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>