duo-image-viewer

a image viewer

Usage no npm install needed!

<script type="module">
  import duoImageViewer from 'https://cdn.skypack.dev/duo-image-viewer';
</script>

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>

→ simple demo

维护者