关于vue.js:分享一个基于vue的图片查看器组件

分享一个实用于后盾管理系统、网站等的图片查看器。

demo 在线链接: duo-image-viewer

反对以下性能：

1. 缩放：

2. 旋转

3. 拖拽

4. 全屏

技术栈：vue

如何应用：

1. 装置依赖

npm i duo-image-viewer --save  // cnpm i duo-image-viewer --save
复制代码 

2. 引入并注册组件

找到 vue 我的项目中的 main.js 文件并退出如下代码：

import duoImageViewer from 'duo-image-viewer' // 引入组件
 
Vue.use(duoImageViewer) // 注册组件
复制代码 

3. 在页面中应用

<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: {
        name: '',
        url: "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>
复制代码 

其中 showViewer 管制显示暗藏，src 示意以后展现的图片，srcList 示意要展现图片列表

GitHub 地址：duofuni/duo-image-viewer