vue实现点击图片查看图片

1.  使用vue一个组件    vue-directive-image-previewer     安装依赖项

npm install vue-directive-image-previewer -D

2. 在main.js全局导入使用

import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'
import 'vue-directive-image-previewer/dist/assets/style.css'
Vue.use(VueDirectiveImagePreviewer) 

3. 在项目中使用:

    三种方法:

<img v-image-preview src="some-pic-url"/>
 
<img v-image-preview="some-pic-url or another-pic-url" src="some-pic-url"/>
 
<img v-image-preview="{src: 'some-pic-url or another-pic-url'}" src="some-pic-url"/>

4. 修改样式层级,再 main.js 中修改

import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'
import 'vue-directive-image-previewer/dist/assets/style.css'
Vue.use(VueDirectiveImagePreviewer, {
  zIndex: 9999,  //层级显示
  previewSize: 3 //三倍图
})