Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作

图片放大预览功能：参考网址
项目需求只有一张图片，所以这里隐藏了翻页按钮且只用了一张图片的路径，如果需要多张图片翻页，则需要将多张图片的路径保存到数组中进行操作！具体请点击上方参考网址

1. 安装依赖
   npm install v-viewer --save

2. 在main.js中全局引入

import Vue from 'vue';
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer, {
defaultOptions: {
zIndex: 9999
}
})
Viewer.setDefaults({
// 工具栏按钮的控制
toolbar: {
zoomIn: 1, // 放大
zoomOut: 1, // 缩小
oneToOne: 1, // 100%大小
reset: 1, // 还原
prev: 0, // 上一张
play: 1, // 全屏显示
next: 0, // 下一张
rotateLeft: 1, // 逆时针旋转
rotateRight: 1, // 顺时针旋转
flipHorizontal: 1, // 水平翻转
flipVertical: 1 // 垂直翻转
}
})

1. 在需要用到图片的地方就直接可以使用viewer标签了（这是只是一张图片，所以图片路径不做数组处理）

<div style="height: 600px; overflow: hidden; cursor:pointer" v-if="affairInfo.flow_chart_url">
<viewer class="viewer" ref="viewer">
<img :src="$config.filePath+affairInfo.flow_chart_url" alt="" style="width: 100%">
</viewer>
</div>

最终效果

• 点赞
• 收藏
• 分享
• 文章举报