vue图片点击放大预览 v-viewer插件

一、安装依赖

npm install v-viewer --save

二、在main文件引入，记得要引入样式

import 'viewerjs/dist/viewer.css';
import Viewer from 'v-viewer';
Vue.use(Viewer);

如果你需要修改viewer.js的全局默认配置项，可以像这样引入

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

三、使用

a、以指令形式引入，只需要将v-viewer指令添加到任意元素即可

<div class="Home" v-viewer>
    <img src="" />
</div>

b、以组件形式引入

<viewer :images="images">
   <img v-for="src in images" :src="src" :key="src"/>
</viewer>

 

参考：https://www.jb51.net/article/173489.htm

https://www.jianshu.com/p/84042c7b1b5b