javascript - The initial loading of Baidu sharing in the vue component failed?
PHP中文网
PHP中文网 2017-06-28 09:26:32
0
1
909

I use Baidu Sharing in my vue project, the code is as follows
template

js (put in created)

When loading for the first time, the button images shared by Baidu are not displayed. F12 found that the class and click events did not take effect.
After refreshing, it will be displayed normally.

在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);
        })
    },
PHP中文网
PHP中文网

认证高级PHP讲师

reply all(1)
洪涛

js is written in the mounted event, this.$nextTick(() => { ...... });

The js shared by Baidu may be executed immediately and find DOM elements.
When the created event is triggered, the DOM does not exist

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template