首页 » 技术分享 » vshare

vshare

　
评论关闭　838次浏览

vshare

markdown

基于百度分享开发的支持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>

默认展示

markdown

配置

// 组件
<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，转载请注明来源！

赞 0