Vue实现点击图片查看大图加放大缩小拖拽等功能前端

【Vue实现点击图片查看大图加放大缩小拖拽等功能】??应届刚入职就开始了项目的历练，点击图片查看大图我想是很常见的功能需求了，因为时间紧任务重，只能借轮子一用了。
??常见的相关Vue的第三方插件或者依赖有vue-directive-image-previewer和v-viewer等，根据综合比较最终选择了v-viewer

安装

npm install v-viewer -S

在main.js中全局引入

// 引入查看大图插件 import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css'Vue.use(Viewer) Viewer.setDefaults({ Options: { // Options必须，否则会出现默认打开等等不可预知的错误 'inline': true, 'button': true, // 显示右上角关闭按钮 'navbar': true, // 缩略图导航 'title': true, // 是否显示当前图片的标题 'toolbar': true, // 显示工具栏 'tooltip': true, // 显示缩放百分比 'movable': true, // 图片是否可移动 'zoomable': true, // 是否可缩放 'rotatable': true, // 是否可旋转 'scalable': true, // 是否可翻转 'transition': true, // 是否使用 CSS3 过度 'fullscreen': true, // 播放时是否全屏 'keyboard': true, // 是否支持键盘 'url': 'data-source' // 设置大图片的 url } })

statement：

属性名	默认值	说明
inline	false	启用 inline 模式
button	true	显示右上角关闭按钮
navbar	true	缩略图导航
title	true	是否显示当前图片的标题
toolbar	true	显示工具栏
tooltip	true	显示缩放百分比
movable	true	图片是否可移动
zoomable	true	是否可缩放
rotatable	true	是否可旋转
scalable	true	是否可翻转
transition	true	是否使用 CSS3 过度
fullscreen	true	播放时是否全屏
keyboard	true	是否支持键盘
url	src	设置大图片的 url