vue怎么用百度分享

Question

vue用百度分享具体该怎么用啊，我把js相关代码写在了mounted的钩子里，并且是setTimeout()执行的，但是原本代码的样式有时候生效有时候就不生效，很不稳定啊~~~~

生效时的样子如上，不生效的样子如下：

这是什么原因导致的呢？

mounted(){
        setTimeout(()=>{
          window._bd_share_config = {
            "common": {
              "bdSnsKey": {},
              "bdText": "有一款宝贝推荐给你",
              "bdMini": "2",
              "bdMiniList": false,
              "bdPic": "2.jpeg",
              "bdStyle": "0",
              "bdSize": "0"
            },
            "share": {}
          };
          with(document)0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~ ( - new Date() / 36e5)];
        },0)
    },

Answer 1

试了那么多种方法都不行，自己观察了一下，解决了。就是要加上class bdshare-button-style0-16

 <template>
       <div class="bdsharebuttonbox bdshare-button-style0-16">
           <a href="#" class="bds_more" data-cmd="more"></a>
           <a href="#" class="bds_qzone" data-cmd="qzone"></a>
           <a href="#" class="bds_tsina" data-cmd="tsina"></a>
           <a href="#" class="bds_tqq" data-cmd="tqq"></a>
           <a href="#" class="bds_renren" data-cmd="renren"></a>
           <a href="#" class="bds_weixin" data-cmd="weixin"></a>
        </div>
    
    </template>
    
    <script>
    export default {
    beforeCreate(){
        const _this=this;
        setTimeout(()=>{
            _this.setup()
        },0)
    },
    methods:{
        setup(){      
            window._bd_share_config={
                "common":{
                    "bdSnsKey":{},
                    "bdText":"",
                    "bdMini":"2",
                    "bdPic":"",
                    "bdStyle":"0",
                    "bdSize":"16"
                },
                "share":{},
                "image":{
                    "viewList":["qzone","tsina","tqq","renren","weixin"],
                    "viewText":"分享到：","viewSize":"16"
                },
                "selectShare":{
                    "bdContainerClass":null,
                    "bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]
                }
            };
            const s = document.createElement('script');
            s.type = 'text/javascript';
            s.src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5);
            document.body.appendChild(s);
        }
    }
    }
    </script>

Answer 2

贴代码看看啊

Answer 3

别在mounted挂载完成之后钩子写

试试在beforeMount 挂载之前写

Answer 4

试试这样：

mounted(){
    this.$nextTick(function () {
    // 执行函数
    })
}

或者把setTimeout的时间设置为20试试，一般浏览器更新周期为18ms