分享一个基于vue的图片查看器组件

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

demo在线链接: duo-image-viewer

支持以下功能:

1.缩放:

分享一个基于vue的图片查看器组件_第1张图片

2.旋转

分享一个基于vue的图片查看器组件_第2张图片

3.拖拽

分享一个基于vue的图片查看器组件_第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.在页面中使用



复制代码

其中showViewer控制显示隐藏,src表示当前展示的图片,srcList表示要展示图片列表

GitHub地址:duofuni/duo-image-viewer

你可能感兴趣的:(vue.js,组件化,组件设计,轮播图,图片预览)