Vue使用图片放大预览插件

vue项目使用vue-photo-preview插件实现点击图片放大预览和移动


介绍:该插件具有预览方法图片,全屏看图片,上一张下一张的功能

1.运行


npm install vue-photo-preview

2.项目main.js引用




// 引入图片缩放插件
import preview from ‘vue-photo-preview’
import ‘vue-photo-preview/dist/skin.css’

3.在你需要用到的vue页面的html部分引用添加preview属性即可

非常重要,需要在函数初始化时加入
mounted(){
    this.$previewRefresh()
}

在这里是运用了数组,支持后台多图片返回,建议图片使用懒加载方式

这个函数可以在需要有自适应的时候使用

由于我的图片是在elementui框架的对话框里面引用到的,一开始发现放大后图片在对话框下面显示,研究发现对话框的z-index属性一般为3000,所以我们只需要重写一下css属性就可以啦
要注意这里属性重写建议写在index.css下面,不然可能不起作用哦。

4.效果预览

在这里要重点提一个问题,就是在引用的时候,要注意你的引用步骤,当该效果没有的时候可以考虑一下是不是渲染出了问题或者在该引用组件已经渲染后再调用$previewRefresh()函数时会因为数组长度为0,没有效果。解决方法就是watch()一下你打开的对话框再进行图片渲染。