关于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