README
一个简洁的图片查看器
目录
快速入门
安装
$ npm i duo-image-viewer --save # install duo-image-viewer
用法
main.js 文件:
import duoImageViewer from 'duo-image-viewer'
Vue.use(duoImageViewer)
使用:
<template>
<div>
<button @click="handleOpen">打开查看器</button>
<duo-image-viewer
:src="src"
:srcList="srcList"
@close="handleClose"
:showViewer="showViewer"
/>
</div>
</template>
<script>
export default {
data() {
return {
src: "https://baidu.com/pictures/2020-09-08/1599535213868-GDJJZizFVtepBxlXpq.jpg",
srcList: [
"https://baidu.com/pictures/2020-09-08/1599535213868-GDJJZizFVtepBxlXpq.jpg",
"https://baidu.com/pictures/2020-09-08/1599535221238-tQfrTrrwOLSdhtiVBY.jpg",
],
showViewer: false,
};
},
methods: {
handleOpen() {
this.showViewer = !this.showViewer
},
handleClose() {
this.showViewer = false
}
}
};
</script>