1、npm 引入

npm install v-viewer --save

2、main.js配置

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

Vue.use(Viewer)

// 配置项
Viewer.setDefaults({
  Options: {
    'inline': true, // 启用 inline 模式
    // 'button': true, // 显示右上角关闭按钮
    // 'navbar': true, // 显示缩略图导航
    // 'title': true, // 显示当前图片的标题
    // 'toolbar': true, // 显示工具栏
    'tooltip': true, // 显示缩放百分比
    'movable': true, // 图片是否可移动
    'zoomable': true, // 图片是否可缩放
    'rotatable': true, // 图片是否可旋转
    'scalable': true, // 图片是否可翻转
    'transition': true, // 使用 CSS3 过度
    'fullscreen': true, // 播放时是否全屏s
    // 'keyboard': true, // 是否支持键盘
    'url': 'data-source' // 设置大图片的 url
  }
})

3、使用

<viewer> <img src="../assets/tu11.jpg" /></viewer>

简单强大~实测有效~~

2022-1-6 更新

在移动端使用，双击放大图片后，无法再拖动图片，图片的左上角位置被固定，暂未解决