图片预览

使用v-viewer进行图片预览，点击按钮可对图片进行直接预览，基于vue

用法

安装
npm install v-viewer --save
项目引入

import Viewer from 'v-viewer' // viewer.js一种图片预览处理工具
import 'viewerjs/dist/viewer.css' // viewer.js一种图片预览处理工具
// 图片预览后的一些操作，根据需要选用
Vue.use(Viewer, {
  defaultOptions: {
    'zIndex': 9999,
    'inline': false, // 启用 inline 模式
    'button': true, // 显示右上角关闭按钮
    'navbar': true, // 显示缩略图导航
    'title': false // 显示当前图片的标题

  }
})

代码

// template
<div class="viewer-dialog-box">
      <div class="img-box">
        <div
          class="img-wrap"
          v-viewer
          ref="viewer"
          v-show="imgShow"
        >
          <img
            v-for="(src,index) in imageScreen"
            :src="imageScreen"
            :key="index"
            style="width:100%;"
          >
          <!-- <div ref="nodata" style="text-align: center;margin-top:100px;" v-if="!imageScreen.length">暂无数据</div> -->
        </div>
      </div>
    </div>
// script
// 从后端获取图片信息
data() {
	return {
		imageScreen: [], // 拍照投屏路径
	}
}
async openScreen() {
      // 获取文件信息
      this.imageScreen = []
      const photoInfoRes = await getPhotoInfo()
      console.log(photoInfoRes, 'photo info')
      if (photoInfoRes.data) {
        // 根据文件mediaId获取图片path
        const photoId = photoInfoRes.data.fileId
        console.log(photoId)
        try {
          const photoPathRes = await getPhotoPath(parseInt(photoId))
          console.log(photoPathRes)
          this.imageScreen.push(photoPathRes.data)
          // this.photoScreen = true
          console.log(this.$refs['viewer'])
          // 直接显示图片
          const viewer = this.$refs['viewer'].$viewer
          viewer.show()
        } catch (error) {
          console.log(error)
        }
      } else {
        this.openPhotoMessage()
      }
    }
// style
.viewer-dialog-box {
  .img-box {
    height: 0px;
    margin: 0 auto;
    .img-wrap {
      width: 0;
      height: 0;
      position: relative;
      cursor: pointer;
      .img-wrap > div {
        height: 100%;
        width: 100%;
      }
      img {
        height: 0;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
      }
    }
  }
}