viewer使用

记录两个使用方式

一：指定dom去渲染，不推荐，改个样式可能就崩了

引入js

import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';

定义data

data() {
    taskInfo: { imgList: [] },
    viewerOptions: {
        title: false,
        toolbar: true,
        button: true,
        navbar: true,
        movable: true,
        zoomable: true,
        rotatable: true,
        scalable: true,
        transition: true,
        keyboard: true,
        url: 'src'
    },
    viewer: null
}

template

      <div class="left-con">
        <el-carousel :interval="5000" arrow indicator-position="outside">
          <el-carousel-item v-for="(item, index) in taskInfo.imgList" :key="index">
            <el-image :src="item" fit="contain" @click.native="handlePreview(index)"></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>

在方法中执行，这里的图片是自动获取dom里的所有图片元素

handlePreview(index) {
      const { viewerOptions } = this

      // 1、直接样式匹配到指定选择器的第一个元素，然后通过$viewer属性获取对应的元素信息对象，从而调用方法显示
      const leftCon = document.getElementsByClassName('left-con')[0];

      const viewer = new Viewer(leftCon, viewerOptions);
      viewer.view(index);
      this.viewer = viewer;
     
    }

记得销毁

beforeDestroy() {
  this.viewer && this.viewer.destroy();
},

效果大概如图，点击可以预览大图

二：指定list渲染（推荐）

引入api

import { api as viewerApi } from 'v-viewer' 具体实现

previewPics(row) {
  // 因为只有一张图，默认从0开始
  const pictureList = [{ url: row.resultImgPath }]
  viewerApi({
    options: {
      toolbar: true,
      url: 'url',
      initialViewIndex: 0
    },
    images: pictureList
  })
}

官网文档：www.npmjs.com/package/v-v…