vue点击图片放大【v-image-preview】

简单的图片放大遮罩，使用组件v-image-preview

1.安装

npm install vue-directive-image-previewer -D

2.在main.js中引入（使用后遮罩为底层会被覆盖，使用z-index）

import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'
import 'vue-directive-image-previewer/dist/assets/style.css'
Vue.use(VueDirectiveImagePreviewer, {
  zIndex: '2019' 
})

3.在代码中加入v-image-preview

  <img style="width: 150px; height: 70px" :src="item.url" v-image-preview />