v-viewer图片查看器

图片放大预览功能
参考网站：https://github.com/mirari/v-viewer
1、安装依赖
npm install v-viewer --save
2.main.js
/* 控制图片插件 */
import Viewer from ‘v-viewer’
import ‘viewerjs/dist/viewer.css’

Vue.use(Viewer, {
defaultOptions: {
zIndex: 9999
}
})

Viewer.setDefaults({
Options: {
“inline”: true, // 是否启动inline模式
“button”: true, // 是否显示右上角关闭按钮
“navbar”:false, // 是否显示缩略图导航
“title”: true, // 是否显示当前图片的标题
“toolbar”: false, // 是否显示工具栏
“tooltip”: true, // 是否显示缩放百分比
“movable”: true, // 图片是否可移动
“zoomable”: true, // 图片是否可缩放
“rotatable”: true, // 图片是否可旋转
“scalable”: true, // 图片是翻转
“transition”: true, // 是否使用css3过渡
“fullscreen”: true, // 播放时是否全屏
“keyboard”: true, // 是否支持键盘
“url”: “data-source” // 设置大图片的url
}
})
3.组件中
a).方法一

b).方法二 //selectInfoPics 一定要一个数组，否则报错 //判断是否为空是否为数组 if(Object.prototype.toString.call(this.viewPicture)=='[object Array]'){ this.selectInfoPics = this.viewPicture; }else if(Object.prototype.toString.call(this.viewPicture)=='[object String]'&&this.viewPicture != ""){ this.selectInfoPics.push(this.viewPicture); }else if (this.viewPicture == null || this.viewPicture == "" || this.viewPicture == undefined) { this.isShow = false; }