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  

vue分享插件的更多相关文章

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

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

  2. vue各种插件汇总

    https://blog.csdn.net/wh8_2011/article/details/80497620(copy) Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一 ...

  3. vue常用插件汇总

    UI-框架element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量 ...

  4. vue 常用插件,保存

    UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI ...

  5. iShare.js分享插件

    iShare.js是一个小巧的分享插件,纯JS编写,不依赖任何第三方库,使用简便. 为啥写这个插件? 因为在搭建个人blog时(还没有搭建好(¯﹃¯)),对目前国内比较受欢迎的分享插件都不太满意,主要 ...

  6. ckplayer播放器去掉右边的开关灯分享插件

    在上一篇文章中介绍了如何使用ckplayer播放器,但是有的人不需要CK播放器右边的开关灯分享插件,那么就需要把该插件给去掉,方法也很简单. 第一步:先打开ckplayer.js里找到下面三行删除掉 ...

  7. JiaThis WordPress分享插件安装全攻略

    WordPress 是一个功能非常强大的博客系统,插件众多,易于扩充功能.安装和使用都非常方便.目前 WordPress 已经成为主流的 Blog 搭建平台.按照下面的方法,只需简单几步,就可轻松地将 ...

  8. 写一个Vue loading 插件

    什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参 ...

  9. 织梦CMS安装分享插件

    获取百度分享按钮织梦系统插件 点击下载:dedecms 5.* 插件 更新日期:2011.09.05 1.下载百度分享插件的织梦cms版本. 2.使用管理员账号登录您的站点后台管理中心,单击" ...

随机推荐

  1. Lucene的索引不跨平台

    在windows上使用Lucene生成索引文件,将索引文件复制到Linux服务器上,报错"校验错误,可能是硬件问题". 所以,Lucene的跨平台只是代码跨平台,生成的索引不跨平台 ...

  2. Pandas中DataFrame修改列名

    Pandas中DataFrame修改列名:使用 rename df = pd.read_csv('I:/Papers/consumer/codeandpaper/TmallData/result01- ...

  3. Google C++单元测试框架

    一.概述 Google C++单元测试框架(简称Gtest),可在多个平台上使用(包括Linux, Mac OS X, Windows, Cygwin和Symbian),它提供了丰富的断言.致命和非致 ...

  4. java程序员学习路线图 java程序员进阶路线

  5. linux 硬件设备文件名

  6. Oracle 11gR2数据库使用

    1很奇怪,不太懂原理 一.Oracle 12c创建用户是出现“ORA-65096: invalid common user or role name”的错误 - CalvinR http://www. ...

  7. 小半斤拔凉 支付Java 相关参考

    http://git.oschina.net/littleCrazy/dianshangpingtai-zhifu http://git.oschina.net/52itstyle/springMvc ...

  8. 读书笔记5基于matplotlib画图

    一.导入需要的模块 import numpy as np import matplotlib.pyplot as plt import seaborn as sns import scipy.stat ...

  9. Android开发4——文件操作模式

    一.基本概念 // 上下文对象private Context context; public FileService(Context context){ super(); this.context = ...

  10. 《Effective Java》读书笔记八(异常)

    No57 只针对异常的情况才使用异常 异常应该只用于异常的情况下,它们永远不应该用于正常的控制流. No58 对可恢复的情况使用受检异常,对编程错误使用运行时异常 Java程序设计语言提供了三种可抛出 ...