vshare

基于百度分享开发的支持VUE2.X的分享插件,为您带来更多的流量!提供多种风格按钮,代码加载更快,引入社会化流量,提升网页抓取速度等优点。
github地址:https://github.com/1006008051/vshare,欢迎star。

安装

npm install vshare -S

使用

注入

// ES6
import vshare from 'vshare'
//or require
var vshare = require('vshare')

Vue.use(vshare)

组件使用

<vshare></vshare>

默认展示

配置

// 组件
<vshare
:vshareConfig="vshareConfig"
>
</vshare>
// 数据
data () {
vshareConfig: {
shareList: [
// 此处放分享列表(ID)
],
common : {
//此处放置通用设置
},
share : [{
//此处放置分享按钮设置
}
],
slide : [
//此处放置浮窗分享设置
],
image : [
//此处放置图片分享设置
],
selectShare : [
//此处放置划词分享设置
]
}
}

vshareConfig

shareList

配置项名称 说明 类型 可选值 默认值
---- 此处放分享列表(ID) array mshare(一键分享 )
qzone(QQ空间)
tsina(新浪微博 )
renren(人人网 )
tqq(腾讯微博 )
bdxc(百度相册 )
kaixin001(开心网 )
tqf(腾讯朋友 )
tieba(百度贴吧 )
douban(豆瓣网 )
tsohu(搜狐微博 )
bdhome(百度新首页 )
sqq(QQ好友 )
thx(和讯微博 )
bdysc(百度云收藏 )
meilishuo(美丽说 )
mogujie(蘑菇街 )
diandian(点点网 )
huaban(花瓣 )
duitang(堆糖 )
hx(和讯 )
fx(飞信 )
youdao(有道云笔记 )
sdo(麦库记事 )
qingbiji(轻笔记 )
people(人民微博 )
xinhua(新华微博 )
mail(邮件分享 )
isohu(我的搜狐 )
yaolan(摇篮空间 )
wealink(若邻网 )
ty(天涯社区 )
fbook(Facebook )
twi(Twitter)
linkedin(linkedin)
copy(复制网址 )
print(打印 )
ibaidu(百度个人中心 )
weixin(微信 )
iguba(股吧 )
[‘more’,
‘qzone’,
‘tsina’,
‘tqq’,
‘renren’,
‘weixin’]

common

配置项名称 说明 类型 可选值 默认值
bdText 分享的内容 string 自定义  
bdDesc 分享的摘要 string 自定义  
bdUrl 分享的Url地址 string 自定义  
bdPic 分享的图片 string 自定义  
bdSign ‘on’: 默认值,使用正常方式挂载回流签名(#[数字签名])‘off’: 关闭数字签名,不统计回流量’normal’: 使用&符号连接数字签名,不破坏原始url中的#锚点 string on
off
normal
 
bdMini 下拉浮层中分享按钮的列数 int 1
2
3
 
bdMiniList 自定义下拉浮层中的分享按钮类型和排列顺序。 array 同shareList  
onBeforeClick 在用户点击分享按钮时执行代码,更改配置。cmd为分享目标id,config为当前设置,返回值为更新后的设置。 function function(cmd,config){}  
onAfterClick 在用户点击分享按钮后执行代码,cmd为分享目标id。可用于统计等。 function function(cmd){}  
bdPopupOffsetLeft 下拉浮层的y偏移量 int 正|负数  
bdPopupOffsetTop 下拉浮层的x偏移量 int 正|负数  

share

配置项名称 说明 类型 可选值 默认值
tag 表示该配置只会应用于data-tag值一致的分享按钮。如果不设置tag,该配置将应用于所有分享按钮。 string 与data-tag一致  
bdSize 分享按钮的尺寸 int 16
24
32
 
bdCustomStyle 自定义样式,引入样式文件 string 样式文件地址  

slide (如不需要不传参数或者传false)

配置项名称 说明 类型 可选值 默认值
bdImg 分享浮窗图标的颜色。 string 0
1
2
3
4
5
6
7
8
 
bdPos 分享浮窗的位置 string left
right
 
bdTop 分享浮窗与可是区域顶部的距离(px) int    

image(如不需要不传参数或者传false)

配置项名称 说明 类型 可选值 默认值
tag 表示该配置只会应用于data-tag值一致的图片。如果不设置tag,该配置将应用于所有图片。 string 与data-tag一致  
viewType 图片分享按钮样式。 string list
collection
 
viewPos 图片分享展示层的位置。 string top
bottom
 
viewColor 图片分享展示层的背景颜色。 string black
white
 
viewSize 图片分享展示层的图标大小。 int 16
24
32
 
viewList 自定义展示层中的分享按钮类型和排列顺序。 array 同shareList  

selectShare(如不需要不传参数或者传false)

配置项名称 说明 类型 可选值 默认值
bdSelectMiniList 自定义弹出浮层中的分享按钮类型和排列顺序。 array 同shareList  
bdContainerClass 自定义划词分享的激活区域。 string myclassname  

vshare的更多相关文章

  1. 百度分享vue版-vshare

    vshare 基于百度分享开发的支持VUE2.X的分享插件,为您带来更多的流量!提供多种风格按钮,代码加载更快,引入社会化流量,提升网页抓取速度等优点.github地址:https://github. ...

  2. laravel事务小例子

    发生异常则自动回滚,正常则自动提交,示例如下: DB::connection('vshare')->transaction(function() use($id,$reason,$refuser ...

  3. 解决xp搜索“文件中的一个字或者词组”失效

    问:我的电脑安装的是Windows XP系统,最近它的文件搜索功能不能用了,打开搜索界面时,输入文件或文件夹名的文本框是灰色的,无法输入.请问该怎么解决? 答:打开注册表编辑器,定位到[HKEY_CU ...

  4. nginx 实现Web应用程序的负载均衡

    文章转载自 博客园, 原文地址 http://www.cnblogs.com/ivanyb/archive/2011/11/16/2250710.html 看到园子中的大牛代震军写的一篇玩玩负载均衡- ...

  5. 安装Debian后做的一些事情

    1.source.list # aliyun deb http://mirrors.aliyun.com/debian/ stretch main non-free contrib deb http: ...

  6. vue项目引入社交分享插件

    vshare 基于百度分享开发的支持VUE2.X的分享插件,为您带来更多的流量!提供多种风格按钮,代码加载更快,引入社会化流量,提升网页抓取速度等优点.github地址:https://github. ...

  7. vue分享插件

    vshare 基于百度分享开发的支持VUE2.X的分享插件,为您带来更多的流量!提供多种风格按钮,代码加载更快,引入社会化流量,提升网页抓取速度等优点.github地址:https://github. ...

  8. 负载均衡---在window与linux下配置nginx

    最近有些时间,开始接触负载均衡方面的东西,从硬件F5再到Citrix Netscalar.不过因为硬件的配置虽然不复杂,但昂贵的价格也让一般用户望而却步(十几万到几十万),所以只能转向nginx,sq ...

  9. VBox 安装 Ubuntu Server 的那些坑,键盘乱码、网卡互连、共享目录等

    1.更新,相信大家都是有强迫症的 sudo apt-get update sudo apt-get upgrade 出现错误:Could not open lock file /var/lib/dpk ...

随机推荐

  1. TP3.2中filed和find()使用

    1.总结:filed和find(),进行一维数组查询指定字段时,可以进行配合使用,获得结果:key:value; 但官方没有明确指出. 2.filed和getFiled最终的结果是不一样的,一个获得的 ...

  2. 用curl去探测接口是否正常返回结果,若没有正常返回则触发报警

    现有一需求去curl 在香港的一个接口, 返回值有时正常有时报错 connection reset by peer . 思路: 若 执行成功 $?返回 0  , 不成功则返回其他数字 #!/bin/b ...

  3. Android JUnit 入门指南

    自动化单元测试可以做许多的事,并帮你节省时间.它也可以被用作快速检验新建工程或进行冒烟测试.始终,单元测试是作为一种有效的.系统的检验应用程序各功能执行的方式.Android SDK支持JUnit的自 ...

  4. LeetCode94 Binary Tree Inorder Traversal(迭代实现) Java

    题目: Given a binary tree, return the inorder traversal of its nodes' values. For example: Given binar ...

  5. unity5 创建material

    在material文件夹下 unity5中新创建的material默认如下 开始我不知道贴图应该加在哪儿.于是跳过教程上这一步,直接去选shader: 在这个shader下很明显看到加贴图的地方了: ...

  6. 强制删除一个Windows服务

    一个挂起的服务如下图所示,该服务相关的所有按钮都被禁用,包括启动.停止.暂停和恢复. 要停止这个服务,首先记住这个服务的名称,在这里是 ‘EntropySoftCFS’. 然后打开命令行窗口,运行 s ...

  7. 清除sqlserver日志方法(不适合always on)

    清除sqlserver日志方法 --查看数据库的recovery_model_desc类型 SELECT NAME, recovery_model_desc FROM sys.databases -- ...

  8. 《Effective Java》读书笔记五(枚举和注解)

    No30 用enum代替int常量 一:综述 int枚举模式,示范: // The int enum pattern - severely deficient! public static final ...

  9. IIS启用GZIP压缩js、css无效的原因及解决方法

    IIS启用GZIP压缩之后,原以为可以压缩所有文件了,包括html.CSS.JS.图片这些文件,但是当我检查的时候,发现并不是这样的,压缩的只有html文件,而CSS.JS并没有压缩 在卡卡网的网站速 ...

  10. 批处理学习笔记1 - Hellow World

    记录自己学习批处理的一点总结吧. 批处理的好处: 可以配合vs,在build完文件之后执行自己的批处理命令. 可以批量修改文件名,或者进行复杂的查询等,对文件可编程操作. 从Hellow world开 ...