vue点击图片放大功能

vue点击图片放大功能

1、安装配置

npm install v-viewer --save

2、main.js引用

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

//Vue.use(Viewer) 默认配置写法
Vue.use(Viewer, {
    defaultOptions: {
        zIndex: 9999
    }
})

3、页面使用

<!-- 图片循环展示 -->
<div class="screen-se">
   <viewer :imglist="imglist" class="screen-view">
      <img class="screen-img" :src="item" v-for="(item,index ) in imglist" :key="index">
   </viewer>
</div>

imglist在data里面定义数组

图片的数据很简单：
'/test/test.png'