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 // 垂直翻转
  }
})

3. 在需要用到图片的地方就直接可以使用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>

最终效果

在这里插入图片描述