查看百度分享组件的文挡，查看文挡，得知文挡分享的使用范例如下：
<div class="bdsharebuttonbox" data-tag="share_1">
<!-- 此处添加展示按钮 -->//见下方按钮标签代码
</div>
<script>
window._bd_share_config = {
//此处添加分享具体设置
}
//以下为js加载部分
with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
</script>
按钮标签代码：
<div class="bdsharebuttonbox" data-tag="share_1">
<a class="bds_mshare" data-cmd="mshare"></a>
<a class="bds_qzone" data-cmd="qzone" href="#"></a>
<a class="bds_tsina" data-cmd="tsina"></a>
<a class="bds_baidu" data-cmd="baidu"></a>
<a class="bds_renren" data-cmd="renren"></a>
<a class="bds_tqq" data-cmd="tqq"></a>
<a class="bds_more" data-cmd="more">更多</a>
<a class="bds_count" data-cmd="count"></a>
</div>
说明：
只有普通页面分享需要按钮标签。划词分享、图片分享无需添加HTML结构。
HTML结构可以放在body的任意位置，可复制多份。
class＝"bdsharebuttonbox" 部分为dom选择器，请勿改动。
data-tag属性为分享按钮标识，用于实现同一页面中多分享按钮不同配置，详见设置部分。
data-cmd属性为分享目标标识，取值请参见：分享媒体id对应表。此外值为more时点击展现更多弹窗，值为count时展现分享数。
HTML代码中其他部分均可自定义。
通用项解析
分享媒体id对应表
名称 ID
一键分享 mshare
QQ空间 qzone
新浪微博 tsina
人人网 renren
腾讯微博 tqq
百度相册 bdxc
开心网 kaixin001
腾讯朋友 tqf
百度贴吧 tieba
豆瓣网 douban
搜狐微博 tsohu
百度新首页 bdhome
QQ好友 sqq
和讯微博 thx
百度云收藏 bdysc
美丽说 meilishuo
蘑菇街 mogujie
点点网 diandian
花瓣 huaban
堆糖 duitang
和讯 hx
飞信 fx
有道云笔记 youdao
麦库记事 sdo
轻笔记 qingbiji
人民微博 people
新华微博 xinhua
邮件分享 mail
我的搜狐 isohu
摇篮空间 yaolan
若邻网 wealink
天涯社区 ty
Facebook fbook
Twitter twi
linkedin linkedin
复制网址 copy
打印 print
百度个人中心 ibaidu
微信 weixin
股吧 iguba
完整代码如下：
<div class="bdsharebuttonbox" data-tag="share_1">
<a class="bds_mshare" data-cmd="mshare"></a>
<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
<a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到qq空间"></a>
<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪"></a>
<a href="#" class="bds_baidu" data-cmd="baidu" title="分享到百度"></a>
<a href="#" class="bds_renren" data-cmd="renren" title="分享到人人"></a>
<a href="#" class="bds_tqq" data-cmd="tqq" title="分享到tqq"></a>
<a href="#" class="bds_more" data-cmd="more">更多</a>
</div>
<script>
window._bd_share_config = {
common : {
bdText : '自定义分享内容',
bdDesc : '自定义分享摘要',
bdUrl : '自定义分享url地址',
bdPic : '自定义分享图片'
},
share : [{
"bdSize" : 16
}],
slide : [{
bdImg : 0,
bdPos : "right",
bdTop : 100
}],
image : [{
viewType : 'list',
viewPos : 'top',
viewColor : 'black',
viewSize : '16',
viewList : ['qzone','tsina','huaban','tqq','renren']
}],
selectShare : [{
"bdselectMiniList" : ['qzone','tqq','kaixin001','bdxc','tqf']
}]
}
with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
</script>
运行效果如下
然后再介绍一个vue使用这个的方法
这个大佬已经写好了我就不班门弄斧了：https://blog.csdn.net/a5252145/article/details/85126398