项目中要实现移动端的触摸图片缩放功能，开始自己写了下通过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值相同即表示为同一组
<img src="xxx.jpg" preview preview-text="描述文字">
例子：根据不同的preview值分组
<div class="cont clearfl" v-show="number==0">
<img v-for="(item,index) in img1" preview="0" preview-text="车型外观图片缩放查看" v-lazy="item" :key="index"/>
</div>
<div class="cont clearfl" v-show="number==1">
<img v-for="(item,index) in img2" preview="1" v-lazy="item" preview-text="车型中控图片缩放查看" :key="index"/>
</div>
<div class="cont clearfl" v-show="number==2">
<img v-for="(item,index) in img3" preview="2" v-lazy="item" preview-text="车型座椅图片缩放查看" :key="index" />
</div>
<div class="cont clearfl" v-show="number==3">
<img v-for="(item,index) in img4" preview="3" v-lazy="item" preview-text="车型细节图片缩放查看" :key="index" />
</div>
//如果图片是动态生成的，在图片数据更新后调用
this.$previewRefresh();
如：
image.png
更加详细的详细查看原文地址
原文地址：https://www.jianshu.com/p/68f108a7a450
