百度分享vue版-vshare
vshare
基于百度分享开发的支持VUE2.X的分享插件,为您带来更多的流量!提供多种风格按钮,代码加载更快,引入社会化流量,提升网页抓取速度等优点。
github地址:https://github.com/1006008051/vshare,欢迎star。
安装
npm install vshare -S
使用
注入
// ES6
import vshare from 'vshare'
//or requirevar 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版-vshare的更多相关文章
- ajax局部刷新后,如何让局部中的百度分享重新加载
我这个人不怎么喜欢说太多话,看几个图你们就懂了 Ajax前 Ajax之后 原因分析 解决方法 收工 百度分享是集成了众多主流第三方网站分享和收藏按钮的工具. 通过百度分享轻松将主流第三方网站的分享按钮 ...
- wordpress和普通网页如何使用百度分享组件
百度分享组件是什么?摘自百度百科: 百度分享是一个提供网页地址收藏.分享及发送的WEB2.0按钮工具,网站的浏览者可以方便的分享到人人网.分享到开心网.分享到QQ空间.分享到新浪微博等一系列SNS站点 ...
- 关于百度分享——bdCustomStyle一点bug
最近碰到一个项目,因为用上百度分享,出现了奇怪的bug. 具体是,当访问JSP页面时,js脚本会执行一次,而java脚本执行了两次. 最后排查发现是百度分享js脚本的问题,把"bdCusto ...
- 在phpwind内容页使用百度分享进行图片分享
在phpwind内容页使用百度分享进行图片分享时,百度分享默认提取到的图片不一定是主题正文内容中的图片,需要使用百度提供的配置机制自行调整. 整个代码添加的位置在此不论,主要原理是在主题正文区域提取图 ...
- 百度分享如何自定义分享url和内容?
百度分享默认分享的是当前页的url,但也可以在同一个页面中分享多个不同的url,仅需进行如下简单的配置. 默认的代码如下: <div id="bdshare" class=& ...
- 百度分享不支持https的解决方案
站点自从开启 https 之后 ,百度分享就不能用了!但是又寻找不到类似百度分享的替代品.. 怎么办呢?要如何解决 百度分享不支持https的问题呢, 跟着博主动动手,让你百度分享仍然能在https下 ...
- 百度分享 ajax 或分页后显示不出问题解决方案
自从用了AJAX后,JS重新加载问题就如家常便饭般层出不穷啊.没有系统学习过js感觉亚历山大. 百度后,还是找到了解决办法. 百度分享创建了一个全局对象window._bd_share_main.通过 ...
- 百度分享share.js插件
//百度分享window._bd_share_config = { common : { bdText : '分享标题', bdDesc : '分享描述', bdUrl : '分享链接', bdPic ...
- discuz的门户文章页中增加百度分享代码
discuz虽然有百度分享插件,但是不太想用,于是自己手动添加了百度分享代码: 一.在http://share.baidu.com/地址中申请设置自己的百度分享代码,选择的风格完全按照个人喜好进行选择 ...
随机推荐
- 实现ScrollviewSupportMaxHeight
public class ScrollviewSupportMaxHeight extends ScrollView { public final int MAX_HEIGHT = 1 ...
- cxf之Caused by: java.lang.RuntimeException: Soap 1.1 endpoint already registered on address /rest
发布rest服务 但是spring-cxf-rest.xml中配置的却是 <jaxws:server address="/weather".................. ...
- HDUOJ----More is better(并查集)
More is better Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 327680/102400 K (Java/Others) ...
- 【LeetCode】57. Insert Interval
Insert Interval Given a set of non-overlapping intervals, insert a new interval into the intervals ( ...
- PHP API中,MYSQL与MYSQLI的持久连接区别
转载自:http://www.cnxct.com/some-differences-between-mysql-and-mysqli-of-persistent-connection/ 很久很久以前, ...
- iOS - CFSocket 的使用
1.CFSocket 苹果对对底层 BSD Socket 进行轻量级的封装(纯 C). 主要使用的 API:CFSocekt 用于建立连接,CFStream 用于读写数据. 2.基本使用 2.1 Cl ...
- 采用dlopen、dlsym、dlclose加载动态链接库
1.前言 为了使程序方便扩展,具备通用性,可以采用插件形式.采用异步事件驱动模型,保证主程序逻辑不变,将各个业务已动态链接库的形式加载进来,这就是所谓的插件.linux提供了加载和处理动态链接库的系统 ...
- Linux内核(2) - 分析内核源码如何入手(上)
透过现象看本质,兽兽们无非就是一些人体艺术展示.同样往本质里看过去,学习内核,就是学习内核的源代码,任何内核有关的书籍都是基于内核,而又不高于内核的. 既然要学习内核源码,就要经常对内核代码进行分析, ...
- CListCtrl控件中显示进度条
CListCtrl控件的subitem中显示进度条 http://www.codeproject.com/Articles/6813/List-Control-Extended-for-Progres ...
- Objective-C中的@Property具体解释
Objective-C中的@Property具体解释 @Property (属性) class vairs 这个属性有nonatomic. strong. weak, retain. copy等等 我 ...