- 安装
npm install vue-image-swipe -S
- 在main.js中引用
import Vue from 'vue'
import VueImageSwipe from 'vue-image-swipe'
import 'vue-image-swipe/dist/vue-image-swipe.css'
Vue.use(VueImageSwipe)
- 使用
<template>
<div>
<ul>
<li
:key="index"
@click="preview(index)"
v-for="(img, index) in images"
>
<img
:src="img"
alt=""
/>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "vue-image-swipe",
data() {
return {
images: [
"https://placekitten.com/400/400",
"https://placekitten.com/600/400",
"https://placekitten.com/600/600",
"https://placekitten.com/800/600",
"https://placekitten.com/800/800",
],
};
},
created() {},
methods: {
preview(index) {
this.$imagePreview({
images: this.images,
index: index,
defaultOpt: {
tapToClose: true, // 点击上层图层关闭预览
fullscreenEl: false, // 关闭右上角的全屏图标
closeEl: false // 关闭右上角的X图标
}
});
},
},
};
</script>
methods
只暴露了一个方法this.$imagePreview,并绑定到vue的原型上
使用
this.$imagePreview(options = {
})
options有三个参数
参数 | 默认值 | 说明 |
---|---|---|
images | 空数组 | 图片的url数组 |
index | 0 | 预览图片的索引值, 默认是0 |
defaultOpt | {} | 配置项 |
defaultOpt 的配置项请参考photoswipe配置项, 注意:不能保证所有配置项都是可用的
列举一些常用的配置
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>',
}