Vue中查看图像的组件

介绍

v-viewer是基于viewer.js的插件，用于Vue中进行图像查看的组件（可以进行单张、多张图片查看）

v-viewer安装命令

npm install --save v-viewer

引入插件

全局引入使用：在main.js文件中引入

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

Vue.use(Viewer)
Viewer.setDefaults({
  Options: {
      'inline': true,
      'button': true, 
      'navbar': true, 
      'title': true,
      'toolbar': true,
      'tooltip': true,
      'movable': false,
      'zoomable': true,
      'rotatable': true, 
      'scalable': true,
      'transition': false,
      'fullscreen': true,
      'keyboard': true,
      'url': 'data-source'
 }
})

初始化配置项

 使用插件

<template>
    <div>
            <viewer style="height: 100%; width: 100%">
                        <img
                        v-show="workOrderLog.imgs != ''"
                        style="width: 70px; height: 70px;"
                        :src="workOrderLog.imgs"
                        alt=""
                      />
             </viewer>                    
    </div>
</template>

实现效果