vue v-viewer 预览图插件使用

1.安装插件 npm/cnpm  i v-viewer -S 

2.main.js配置

import Viewer from 'v-viewer' // 图片预览
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
  Options: {
    'zIndex': 9999,
    'inline': true,
    'button': true,
    'navbar': true,
    'title': true, 
    'toolbar': true, 
    'tooltip': true, 
    'movable': true, 
    'zoomable': true, 
    'rotatable': true, 
    'scalable': true, 
    'transition': true, 
    'fullscreen': true, 
    'keyboard': true, 
    'url': 'data-source'
  }
})

3.完整demo

<template>
  <div class="viewer-dialog-box">
    <el-dialog title="预览图效果" :visible.sync="dialogVisible">
       <div class="img-box"> 
        <div class="img-wrap">
          <viewer :images="imgList">
            <img v-for="(src,index) in imgList" :src="src" :key="index" style="width:100%;">
            <div ref="nodata" style="text-align: center;margin-top:100px;" v-if="!imgList.length">暂无数据</div>
          </viewer>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return {
      imgList: [],   // 后台返回来图片数据 直接是图片路径组成的数组
    }
  }
}
</script>


<style lang="scss">
  .viewer-dialog-box{
    .img-box{
      height:400px;
      margin: 0 auto;
      .img-wrap{
        position: relative;
        cursor: pointer;
        .img-wrap > div {
          height: 100%;
          width: 100%;
        }
        img{
          height: 400px;
          width: 100%;
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
        }
      }
    }
  }
</style>