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中文网2017-06-28 09:28:32
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