在vue项目中使用百度分享

环境：在vue项目中使用

html部分

<div class="share__wrap">
  <div class="share__content">
    <div class="bdsharebuttonbox col-xs-5 share__wrapper">
      <a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间">分享到QQ空间</a>
      <a class="bds_tsina" data-cmd="tsina" title="分享到新浪微博">分享到新浪微博</a>
      <a class="bds_renren" data-cmd="renren" title="分享到人人网">分享到人人网</a>
    </div>
  </div>
</div>

js部分

/**
 * 顶部分享
 * @param {string} img - 图片地址
 * @param {string} text - 文本提示
 * @param {string} desc - 描述
 */
const share = (img, text, desc) => {
  const url = document.location.href

  window._bd_share_config = {
    common: {
      bdSnsKe: {},
      bdMini: '2',
      bdStyle: '0',
      bdSize: '32',
      bdUrl: url,
      bdPic: img,
      bdText: text,
      bdDesc: desc,
    },
    share: {},
    selectShare: {
      bdContainerClass: null,
      bdSelectMiniList: ['qzone', 'tsina', 'popup_tqq', 'renren'],
      viewSize: '32',
    },
  }
  const bdScript = document.createElement('script')
  bdScript.setAttribute('src', `http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion=${new Date().getTime()}`)
  document.getElementsByTagName('head')[0].appendChild(bdScript)
}
export default share

分享媒体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
邮件分享	mail
我的搜狐	isohu
摇篮空间	yaolan
若邻网	wealink
天涯社区	ty
Facebook	fbook
Twitter	twi
linkedin	linkedin
复制网址	copy
打印	print
百度中心	ibaidu
微信	weixin
股吧	iguba