Vue项目的查看图片插件 -- v-viewer

一、介绍

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;
}