vue图片预览效果的实现

前因

在开发微信公众号时，产品经理要求实现图片可以点击放大，并且点击下一张的效果。因为是第一次做公众号的项目，也是第一次在移动端要做图片预览的效果，所以在网上查了相关资料。

实现路程

首先，在以往的项目中，我只用过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里有三个参数

参数	默认值	说明
images	[]	图片的url数组
index	0	预览图片的索引值
defaultOpt	{}	配置项

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>',
}

效果