一、介绍
v-viewer是用于图片浏览的Vue组件,支持旋转、缩放、翻转等操作。
需求场景:通过点击按钮“查看图片”之后,弹出图片预览的弹框。
官网:v-viewer官网
二、安装
npm install v-viewer
main.js:
import Vue from 'vue'
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
Options: {
'inline':false,
'button':false, //右上角按钮
"navbar": false, //底部缩略图
"title": false, //当前图片标题
"toolbar": true, //底部工具栏
"tooltip": true, //显示缩放百分比
"movable": true, //是否可以移动
"zoomable": true, //是否可以缩放
"rotatable": true, //是否可旋转
"scalable": true, //是否可翻转
"transition": false, //使用 CSS3 过度
"fullscreen": false, //播放时是否全屏
"keyboard": true, //是否支持键盘
"url": "data-source"
}
})
common.js(自己项目的公共JS文件):
import {
api as viewerApi } from "v-viewer"
export function showViewImgDialog(imgSrc) {
let images = [{
'data-source': "" }]
if (["", null, undefined].includes(imgSrc)) {
this.$common.notify("error", "请先选择要查看的图片") // 这里改成自己的消息弹框提示组件
return false
}
images[0]['data-source'] = imgSrc
viewerApi({
options: {
toolbar: true,
url: 'data-source',
initialViewIndex: 0
},
images: images
})
}
最后,直接在自己的组件中调用这个showViewImgDialog方法就可以了。
// 查看图片的点击事件
onClickViewImg() {
this.$common.showViewImgDialog(this.scanImgSrc)
}
三、实际效果预览
**注意:**如果v-viewer插件的弹框被你自己框架的弹框组件覆盖了,就修改CSS的z-index来显示图片预览弹框。
.viewer-container {
z-index: 20150000 !important;
}