使用element ui隐藏组件实现图片预览功能！

elementUI是前端开发中经常需要用到的UI框架，最近在浏览element官网时发现el-image这个组件有图片预览的组件，找到其源码，发这个预览方法是封装好的组件，于是尝试单独在自己的项目中使用这个组件。

支持多图预览、旋转、放大等操作，能够满足日常所需！

1、引入组件

import ElImageViewer from "element-ui/packages/image/src/image-viewer";

2、注册组件

components: { ElImageViewer, }

3、使用组件

<div @click="previewImage(scope.row.dealVoucher)">查看照片</div>

<el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="srcList" />

4、相关方法

closeViewer() {
      this.showViewer = false;
    },
    
previewImage(url) {
      var arr = url.split(",");
      for (var i = 0; i < arr.length; i++) {
        arr[i] = this.ossUrl + arr[i] + "!big";
      }
      this.srcList = arr;
      this.showViewer = true;
      
    },```