vue中实现图片全屏缩放预览,支持移动端

项目中要实现移动端的触摸图片缩放功能,开始自己写了下通过js实现,发现有点瑕疵,在网上找了个比较好的插件,用来下感觉挺好,不由惊叹大神真厉害,决定记录下来

安装

# 安装
npm install vue-photo-preview --save

引入

在 main.js中引用
我比较喜欢全局安装,所以就只记录全局的了

# 引入
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)

使用

在img标签添加preview属性 preview值相同即表示为同一组


例子:根据不同的preview值分组

//如果图片是动态生成的,在图片数据更新后调用

this.$previewRefresh();

如:


image.png

更加详细的详细查看原文地址
原文地址:https://www.jianshu.com/p/68f108a7a450

你可能感兴趣的:(vue中实现图片全屏缩放预览,支持移动端)