图片放大预览功能:参考网址
项目需求只有一张图片,所以这里隐藏了翻页按钮且只用了一张图片的路径,如果需要多张图片翻页,则需要将多张图片的路径保存到数组中进行操作!具体请点击上方参考网址
-
安装依赖
npm install v-viewer --save -
在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 // 垂直翻转
}
})
- 在需要用到图片的地方就直接可以使用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>
网友评论