页面dom部分
类名bdsharebuttonbox 固定参数勿动
<dropdown-menu slot="list" class="bdsharebuttonbox">
<li class="ivu-dropdown-item" :name="1"><a href="#" class="bds_sqq" data-cmd="sqq">QQ</a></li>
<li class="ivu-dropdown-item" :name="2"><a href="#" class="bds_weixin" data-cmd="weixin">微信</a></li>
</dropdown-menu>
分享css http://bdimg.share.baidu.com/static/api/css/share_style1_16.css
data-tag属性为分享按钮标识,用于实现同一页面中多分享按钮不同配置,详见设置部分。
data-cmd属性为分享目标标识,取值请参见:分享媒体id对应表。此外值为more时点击展现更多弹窗,值为count时展现分享数
mouted状态中配置
window._bd_share_config = {
"common": {//此处放置通用设置
"bdUrl": '',
onBeforeClick:function (cmd,config) {
config.bdUrl='https://www.baidu.com'//拼接页面加载参数
return config
}
},
"slide" : [],//此处放置浮窗分享设置
"share": {},//此处放置分享按钮设置
"image": {//此处放置图片分享设置
"viewList": ["weixin"],
"viewText": "分享到:",
"viewSize": "16"
},
"selectShare": {//此处放置划词分享设置
"bdContainerClass": null,
"bdSelectMiniList": ["weixin"]
},
};
//页面增加分享js
document.getElementsByTagName('head')[0].appendChild(document.createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=430879'
common 通用设置项解析:
配置项名称 | 值类型 | 格式和取值 | 描述 |
---|---|---|---|
bdText | string | 自定义 | 分享的内容 |
bdDesc | string | 自定义 | 分享的摘要 |
bdUrl | string | 自定义 | 分享的Url地址 |
bdPic | string | 自定义 | 分享的图片 |
bdSign | string | on|off|normal | 是否进行回流统计。 'on': 默认值,使用正常方式挂载回流签名(#[数字签名]) 'off': 关闭数字签名,不统计回流量 'normal': 使用&符号连接数字签名,不破坏原始url中的#锚点 |
bdMini | int | 1|2|3 | 下拉浮层中分享按钮的列数 |
bdMiniList | array | ['qzone','tsina',...] | 自定义下拉浮层中的分享按钮类型和排列顺序。详见分享媒体id对应表 |
onBeforeClick | function | function(cmd,config){} | 在用户点击分享按钮时执行代码,更改配置。 cmd为分享目标id,config为当前设置,返回值为更新后的设置。 |
onAfterClick | function | function(cmd){} | 在用户点击分享按钮后执行代码,cmd为分享目标id。可用于统计等。 |
bdPopupOffsetLeft | int | 正|负数 | 下拉浮层的y偏移量 |
bdPopupOffsetTop | int | 正|负数 | 下拉浮层的x偏移量 |
share分享按钮配置项解析:
配置项名称 | 值类型 | 格式和取值 | 描述 |
---|---|---|---|
tag | string | 与data-tag一致 | 表示该配置只会应用于data-tag值一致的分享按钮。 如果不设置tag,该配置将应用于所有分享按钮。 |
bdSize | int | 16|24|32 | 分享按钮的尺寸 |
bdCustomStyle | string | 样式文件地址 | 自定义样式,引入样式文件 |
slide 浮窗分享设置项解析:
配置项名称 | 值类型 | 格式和取值 | 描述 |
---|---|---|---|
bdImg | string | 0|1|2|3|4|5|6|7|8 | 分享浮窗图标的颜色。 |
bdPos | string | left|right | 分享浮窗的位置 |
bdTop | int | 分享浮窗与可是区域顶部的距离(px) |
image 图片分享设置项解析:
配置项名称 | 值类型 | 格式和取值 | 描述 |
---|---|---|---|
tag | string | 与data-tag一致 | 表示该配置只会应用于data-tag值一致的图片。如果不设置tag,该配置将应用于所有图片。 |
viewType | string | list|collection | 图片分享按钮样式。 |
viewPos | string | top|bottom | 图片分享展示层的位置。 |
viewColor | string | black|white | 图片分享展示层的背景颜色。 |
viewSize | int | 16|24|32 | 图片分享展示层的图标大小。 |
viewList | array | ['qzone','tsina',...] | 自定义展示层中的分享按钮类型和排列顺序。详见分享媒体id对应表 |
selectShare 图片分享设置项解析:
配置项名称 | 值类型 | 格式和取值 | 描述 |
---|---|---|---|
bdSelectMiniList | array | ['qzone','tsina',...] | 自定义弹出浮层中的分享按钮类型和排列顺序。详见分享媒体id对应表 |
bdContainerClass | string | myclassname | 自定义划词分享的激活区域 |
分享媒体id对应表
名称 | ID |
---|---|
印象笔记 | evernotecn |
网易热 | h163 |
一键分享 | mshare |
QQ空间 | qzone |
新浪微博 | tsina |
人人网 | renren |
腾讯微博 | tqq |
百度相册 | bdxc |
开心网 | kaixin001 |
腾讯朋友 | tqf |
百度贴吧 | tieba |
豆瓣网 | douban |
百度新首页 | bdhome |
QQ好友 | sqq |
和讯微博 | thx |
百度云收藏 | bdysc |
美丽说 | meilishuo |
蘑菇街 | mogujie |
点点网 | diandian |
花瓣 | huaban |
堆糖 | duitang |
和讯 | hx |
飞信 | fx |
有道云笔记 | youdao |
麦库记事 | sdo |
轻笔记 | qingbiji |
人民微博 | people |
新华微博 | xinhua |
邮件分享 | |
我的搜狐 | isohu |
摇篮空间 | yaolan |
若邻网 | wealink |
天涯社区 | ty |
fbook | |
twi | |
复制网址 | copy |
打印 | |
百度中心 | ibaidu |
微信 | weixin |
股吧 | iguba |
配置信息借鉴这里