vue图片预览效果的实现

2019年9月16日 238次阅读 来源: TwentyFourGo

前因

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

实现路程

首先，在以往的项目中，我只用过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数组
index0预览图片的索引值
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>',
}

效果

《vue图片预览效果的实现》

    原文作者：TwentyFourGo
    原文地址: https://segmentfault.com/a/1190000019398933
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞