vue-image-swipe图片预览

T'T

已于 2022-10-18 23:21:03 修改

阅读量258

点赞数

文章标签： vue.js javascript 前端

于 2022-10-18 23:16:25 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43640874/article/details/127398852

版权

安装

npm install vue-image-swipe -S

引入

import VueImageSwipe from 'vue-image-swipe'
import 'vue-image-swipe/dist/vue-image-swipe.css'
vue.use (VueImageSwipe);

使用

<div v-for="(item,index) in imgList" 
     :key="index+'item'" 
     @click="preview(index)">
    <img :src="item"/>
</div>

preview(index) {
    this.$imagePreview ({
        images: this.imgList,
        index: index,
        defaultOpt: {
            fullscreenEl: false,
            arrowEl: true,
            preloaderEl: true,
            bgOpacity: 0.85,
            showHideOpacity: true
        }
    })
},

常用配置

defaultOpt: {
  tapToClose: true, 	// 点击上层图层关闭预览
  closeEl: false, 	// 关闭右上角的X图标
  fullscreenEl: true, 	// 打开右上角的全屏图标
  shareEl: false, 	// 关闭右上角的分享图标
  arrowEl: true, 
  preloaderEl: true,
  loop: false,
  bgOpacity: 0.85,
  showHideOpacity: true,
  errorMsg: '<div class="pswp__error-msg">图片加载失败</div>',
}