一个简洁的图片查看器(支持多图记忆)
$ npm i duo-image-viewer --save # install duo-image-viewer
import duoImageViewer from 'duo-image-viewer'
Vue.use(duoImageViewer)
<template>
<div>
<button @click="handleOpen">打开查看器</button>
<duo-image-viewer
:list="srcList"
@open="openCallback"
@close="closeCallback"
:show.sync="showViewer"
:currentIndex="currentIndex"
/>
</div>
</template>
<script>
export default {
data() {
return {
currentIndex: 0, // 打开图片查看器时,需要定位到的图片的索引
srcList: [
"https://scpic.chinaz.net/files/pic/pic9/202203/apic39703.jpg",
"https://scpic.chinaz.net/files/pic/pic9/202005/zzpic24899.jpg",
"https://scpic.chinaz.net/files/pic/pic9/202109/bpic24244.jpg",
"https://scpic.chinaz.net/files/pic/pic9/202110/hpic4529.jpg",
"https://scpic.chinaz.net/files/pic/pic9/201912/zzpic22106.jpg",
"https://scpic.chinaz.net/files/pic/pic9/202202/apic38580.jpg",
], // 图片查看器数据集
showViewer: false, // 是否打开图片查看器
};
},
methods: {
handleOpen() {
this.showViewer = true;
},
openCallback() {}, // 打开时的回调
closeCallback() {}, // 关闭时的回调
}
};
</script>