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

1. 安装

npm install v-viewer -S

2. 在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
  }
})

3. statement：

4. 效果