vue项目引入社交分享插件

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