vue pc端分享插件-ssr版

pc端要实现分享页面的功能，效果图如下

image.png

找了vshare 插件，实现了分享
https://github.com/1006008051/vshare

页面初始化后可以实现分享功能，但是页面跳出去，然后再回来，分享图标就不显示了，于是修改了vshare的代码

<template>
  <div class="bdsharebuttonbox">
    <a v-for="item in defaultConfig.shareList" :key="item.id" :class="'bds_'+item" :data-cmd="item"></a>
  </div>
</template>

<script>
export default {
  data () {
    return {
      defaultConfig: {
        shareList: ['more','qzone','tsina','tqq','renren','weixin'],
        share: [{bdSize: 24}],
        slide: false,
        image: false,
        selectShare: false
      }
    }
  },
  props: ['vshareConfig'],
  beforeCreate () {
    if(process.client) {
      window._bd_share_main = ''
    }
  },
  mounted () {
    console.log(this.vshareConfig)
    if(process.client) {
      this.$nextTick(()=>{
        this.initShare()
      })
    }
  },
  methods: {
    initShare() {
      if (this.vshareConfig) {
        this.vshareConfig.shareList ? this.defaultConfig.shareList = this.vshareConfig.shareList :'';
        if (this.vshareConfig.shareList) {

        }
        if (this.vshareConfig.share) {
          this.defaultConfig.share = this.vshareConfig.share
        }
        if (this.vshareConfig.slide) {
          this.defaultConfig.slide = this.vshareConfig.slide
        }
        if (this.vshareConfig.image) {
          this.defaultConfig.image = this.vshareConfig.image
        }
        if (this.vshareConfig.selectShare) {
          this.defaultConfig.selectShare = this.vshareConfig.selectShare
        }
      }
      window._bd_share_config = this.defaultConfig
      // 如果有意外 为了避免冲突 先干掉以前的分享script
      const $el = document.querySelector('#baiduShare')
      console.info($el)
      $el && document.body.removeChild($el)
      
      const s = document.createElement('script');
      s.type = 'text/javascript';
      s.id = 'baiduShare'
      s.src = 'http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion=440186'
      document.body.appendChild(s);
    }
  }
}
</script>

if(process.client) {} 这个因为是ssr项目所以才加入的，不是ssr项目无需加这个判断，引用方式如下（用了elementui el-popover）

      <el-popover
          placement="bottom"
          width="200"
          trigger="click">
          <div style="padding-left: 13px;" >
              <vshare ref="vshare" :vshareConfig="vshareConfig"></vshare>
          </div>
          <li class="te3 pointer" style="background: #f59192" slot="reference">
            <img src="~/assets/img/public/shouCan.png" />
            <span>分享</span>
          </li>          
      </el-popover>

import  vshare  from './bdShare'

export default {
  name: 'optionbar',
  data() {
    return {
      vshareConfig: {
        shareList: [
          'qzone',
          'tsina',
          'renren',
          'tsohu',
          'weixin'
        ],
        common : {
          //此处放置通用设置
        },
        share : [{
          //此处放置分享按钮设置
          bdSize: 24
          }
        ],
        // slide : [
        //   //此处放置浮窗分享设置 
        // ],
        // image : [
        //   //此处放置图片分享设置
        // ],
        // selectShare : [
        //   //此处放置划词分享设置
        // ]
      }
    }
  },
  components: {
    vshare: vshare
  }
}

具体的配置可以看vshare文档
最后效果如下

image.png