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)arraymshare(一键分享 )
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中的#锚点stringon
off
normal
bdMini下拉浮层中分享按钮的列数int1
2
3
bdMiniList自定义下拉浮层中的分享按钮类型和排列顺序。array同shareList
onBeforeClick在用户点击分享按钮时执行代码,更改配置。cmd为分享目标id,config为当前设置,返回值为更新后的设置。functionfunction(cmd,config){}
onAfterClick在用户点击分享按钮后执行代码,cmd为分享目标id。可用于统计等。functionfunction(cmd){}
bdPopupOffsetLeft下拉浮层的y偏移量int正|负数
bdPopupOffsetTop下拉浮层的x偏移量int正|负数

share

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

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

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

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

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

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

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

前往低代码交流专区

更多推荐