vue使用v-viewer插件做图片展示预览遇到弹框再次打开无法预览图片问题

使用element-ui框架；v-viewer图片预览插件；

问题描述：

列表中点击查看详情，e-dialog弹框查看详情；弹框中有多张图片；

列表刷新后，首次点击查看详情时；点击图片预览放大正常；关闭弹框后再次打开查看详情；点击图片无反应；

挠头一小时，头发掉一地！！！

经过大量比对。最后发下其问题所在：（就是技术菜）

下面是有问题的代码片段：

<el-form-item label="渠道结算截图">
  <viewer>
    <img  v-for="src in imgShow(form.channelSettlementPictures)" :src="src" :key="src" width="auto" height="60px"/>
  </viewer>
</el-form-item>

上述代码中；接收图片集合字符串，处理成集合进行循环；首次弹框访问正常。

解决问题代码片段：

<el-form-item label="渠道结算截图">
  <viewer :images="imgShow(form.channelSettlementPictures)">
     <img  v-for="src in imgShow(form.channelSettlementPictures)" :src="src" :key="src" width="auto" height="60px"/>
  </viewer>
</el-form-item>

其核心在于是否赋值引用控件初始值：

:images="imgShow(form.channelSettlementPictures)"

这句话中的":images"是viewer插件的固定参数值；接收值为集合类型值；加入这句话就可以解决问题了。

还有弹框层级问题：

需要修改viewer的默认层级，我这里是在全局定义修改的，仅供参考

Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999,
  } })
Viewer.setDefaults({
  Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }
})

这里的

defaultOptions: {
    zIndex: 9999,
  } }

是解决层级问题关键所在；

以上就是一晚上的问题解决方案。。。。（前端需要学的还很多啊！）

参考地址：

v-viewer官网 

npmjs-v-viewer