我的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);
})
},
js写在 mounted事件里,this.$nextTick(() => { ...... });
百度分享的 js可能会 立即执行并查找DOM元素。
created事件触发时,并不存在DOM