Vue+elementui 图片放大最好用的组件

组件： vue-directive-image-previewer

1.在vue前端控制台Terminal中输入以下命令

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.在标签中加入属性v-image-preview

4.效果图

效果将会在屏幕中央显示一个大个的图片，点击任意处，图片消失