vue组件中使用百度分享初次加载失败？

Question

我的vue项目中使用了百度分享，代码如下
template中

js（放在created中）

初次加载时，百度分享的按钮图片都不显示，F12发现class和点击事件都未生效
刷新后就正常显示使用

在mounted中使用this.$nextTick，也有点问题

mounted() {

        let _this = this;
        this.$nextTick(function () {
            window._bd_share_config = {
                common : {
                    bdText : _this.art.title,
                    bdDesc : _this.art.abstract,
                    bdPic : "http://www.jubao56.com/upload_admin/2016-07-05%2010:08:50-banner4_m.jpg",
                },
                share : [{
                    tag:"share_0",
                    bdSize : 24
                }],
            };
            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);
        })
    },

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

js写在 mounted事件里，this.$nextTick(() => { ...... });

百度分享的 js可能会 立即执行并查找DOM元素。
created事件触发时，并不存在DOM

Answer 3

你好 请问解决了吗 我也有这个问题

Answer 4

把this.$nextTick的代码换成setTimeout(()=>{},0);
我是这样解决的。

Answer 5

在beforeCreate中加上这一句就好了 window._bd_share_main = "";

Answer 6

我刚学vue小白，我也遇见这个问题了，谁能解答怎么使用百度分享啊，去百度搜索也没有几篇文章