前因
在开发微信公众号时，产品经理要求实现图片可以点击放大，并且点击下一张的效果。因为是第一次做公众号的项目，也是第一次在移动端要做图片预览的效果，所以在网上查了相关资料。
实现路程
首先，在以往的项目中，我只用过swipper插件，swipper只能实现图片的轮播，以及图片的排版，并没有预览功能。于是在网上搜索到了解决方法—vue-image-swipe
vue-image-swipe
基于photoswipe实现的vue图片预览组件
安装
1 第一步
npm install vue-image-swipe -D
2 第二步
vue 入口文件引入
import Vue from 'vue'import VueImageSwipe from 'vue-image-swipe'import 'vue-image-swipe/dist/vue-image-swipe.css'Vue.use(VueImageSwipe)
项目中使用
<li :key="index"@click="preview(index)"v-for="(l, index) in images"><img :src="l" alt=""></li>
preview(index) {this.$imagePreview({images: this.images,index: index,})}
methods
只有一个方法this.$imagePreview，并绑定到vue的this上使用
this.$imagePreview(options = {})
options里有三个参数
defaultOpt 的配置项请参考photoswipe配置项， 注意：不能保证所有配置项都是可用的
列举一些常用的配置
defaultOpt: {fullscreenEl: true,shareEl: false,arrowEl: true,preloaderEl: true,loop: false,bgOpacity: 0.85,showHideOpacity: true,errorMsg: '<div class="pswp__error-msg">图片加载失败</div>',}
