安装使用npm命令安装

npm install v-viewer

使用引入v-viewer及必需的css样式，并使用Vue.use()注册插件，之后即可使用。 main.js中 import ‘viewerjs/dist/viewer.css’ import Viewer from ‘v-viewer’ Vue.use(Viewer)

注册挂载之后，在image标签外面直接使用viewer标签

预览单张照片
 <viewer class="flex">       
          <img :src="a.picUrl" width="100%" height="100%" />          
      </viewer>
      预览多张
      <viewer :images="imageurl" class="flex">
        <div
          v-for="(item, index) in imageurl"
          :key="index"
          class="imgs-border"
        >
          <img :src="item" width="100%" height="100%" />
        </div>
      </viewer>

效果：

注意的点：我的这个图片是在弹框中点击预览但是点击之后这个预览在弹框下面

使用v-viewer插件图片预览图片在弹出层后面

原因：elementui的dialog的z-index默认值是2000，v-viewer的z-index默认值是2015，并且每关闭一次dialog弹出层，它的index就会加2，所以按照这样的逻辑，前面的图片都能正常显示，到了第八张的时候，弹出层的z-index变为2016，此时图片显示出现问题，

解决办法：

将v-viewer的z-index的默认值设置尽量大，超出用户打开dialog次数即可。

Vue.use(Viewer, { defaultOptions: { zIndex: 9999,//解决图片放大的层级问题 } });

vue中图片点击预览

使用v-viewer插件图片预览图片在弹出层后面