vue 图片点击放大，vue-photo-preview 使用

项目开发中经常遇到图片点击放大的需求，刚好框架一直用的是vue，这里说一下vue-photo-preview的使用，适用于PC端和移动端，另一款photoswipe点击放大看这里

1、如果是webpack打包的项目：

• 首先安装vue-photo-preview

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 v-for="(img,img_index) in c_item.imgList" :key="img_index" :src="img" :preview="1" />  

由于这里的imgList是动态获取的，所以在成功请求到数据后在加上this.$previewRefresh()重置
效果如下：

效果图
2、纯引入vue.js的文件使用vue-photo-preview：

• 下载vue-photo-preview.js (整个项目都需要放入你的文件目录，不能只保存js文件，需要skin)
• 引入：

<script src="dist/vue-photo-preview.js"></script>

• 使用同1，动态获取imgList时需要this.$previewRefresh();

<!--html-->
<img src="img1.png" alt="" :preview="1">
<img src="img2.png" alt="" :preview="1">
<img src="img3.png" alt="" :preview="1">
/*JS:*/
var options={
    fullscreenEl:false //关闭全屏按钮
};
Vue.use(vuePhotoPreview,options);
new Vue({ ... })