如果您搜到这篇文章的话,那估计您遇到跟我一样的问题了.
众所周知,每一个插件都有很多坑,比如说市面上比较火爆的 图片浏览插件viewer,有js版本和jqery版本的,尽管这两个版本不一样,但是大同小异.
话不多说直接上代码
HTML部分
<div style="min-height:180px;">
<ul class="barcode_img" id="style_img">
<li v-for="m in styleImgList">
<img v-bind:src="'/Resource/Product/'+m.url" style="width:80px;height:80px;" />
</li>
</ul>
</div>
js部分
敲黑板!!!划重点!!!
//这一段是vue里面的,在dom都渲染完时的成功回调,一定要放在这里执行,也就是js里面的window.onload 函数;
this.$nextTick(function () {
var viewerStyle = new Viewer(document.getElementById('style_img'), {
// 相关配置项,详情见下面
show: function () { // 动态加载图片后,更新实例
//viewerStyle.update();//这一段只能更新图片展示,并不能解决第一次动态加载无法点击查看大图的问题,下面一个才是解决方案
viewerStyle.view(0).update();
},
});
})