一. 先看效果图

 

二. 具体步骤

简介：一款基于 viewer.js 封装的Vue版插件，可用于图像查看，以及图片的旋转、缩放等功能预览

官网：v-viewer

文档说明：Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作 - Mirari's Blog

GitHub 下载地址：https://github.com/mirari/v-viewer

1. v-viewer插件安装

npm install v-viewer --save

2. main.js配置：

import Viewer from 'v-viewer'//图片预览
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({Options: { 'zIndex': 9999,'inline': true, //启用lnline模式'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. 页面使用 

<viewer><img :src="url" :key="url"/>
</viewer>