图片查看插件v-viewer

安装

npm install v-viewer --save

引入

全局注册

import 'viewerjs/dist/viewer.css';
import Viewer from 'v-viewer';
Vue.use(Viewer,{
  defaultOptions: {
    zIndex: 9999
  }
});

使用

1.单查看图片,添加参数:v-viewer

<img :src="item.file_image_url" :alt="item.file_name" v-viewer>

2.多张查看

 <viewer :images="fileList.file_image_url"  @inited="inited" class="viewer" ref="viewer">
 此处放置图片或者按钮用于触发事件 this.$viewer.show();
 </viewer>

//  :images 绑定多个图片数组
//  @inited="inited" 监听viewer 实例用于切换
//  this.$viewer.show();查看图片

官方

https://www.npmjs.com/package/v-viewer