vue图片预览效果的实现

框架

浏览数:316

2019-6-7

AD:资源代下载服务

前因

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

实现路程

首先,在以往的项目中,我只用过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>',
}

效果

作者:TwentyFourGo