利用element-ui图片查看器el-image实现“点击文字显示放大图片功能“

需求：如图，点击表格中的文件名查看大图

查看element-ui的image组件源码，里面有两个文件(image-viewwe.vue和main.vue)

el-image-viewer小组件源码
其中props参数：

props: {
    urlList: {
      type: Array,
      default: () => []
    },
    zIndex: {
      type: Number,
      default: 2000
    },
    onSwitch: {
      type: Function,
      default: () => {}
    },
    onClose: {
      type: Function,
      default: () => {}
    },
    initialIndex: {
      type: Number,
      default: 0
    }
  }

参数含义：
urlList 绑定的文件列表
zIndex 查看器层级
onSwitch 图片切换事件
onClose 查看器关闭事件
initialIndex 初始化展示哪张图片
看到这，网上很多方式是在需要的地方引入import ElImageViewer from 'element-ui/packages/image/src/image-viewer'，然后使用就可以；但本人在使用中有bug出现(图片放大查看时，显示两层图片，旋转时明显);故还是采用el-image

<el-table-column
        v-for="(item, index) in tableData.formThead"
        :key="index"
        align="center"
      >
        <template v-slot:default="scope">
          <span
            v-if="tableData.formTranslate[index] == '文件名' && tableData.formTheadEn[index] == 'file_url'"
            class="file_name"
            @click="onPreview(scope.row)"
          >{{ scope.row.file_name }}span>
          <el-image
            v-if="tableData.formTheadEn[index] == 'file_url'"
            ref="preview"
            class="hideImgDiv"
            :src="defaultImg "
            :preview-src-list="scope.row.file_url ? imageUrl : [defaultImg]"
          >
          el-image>
        template>
      el-table-column>

data(){
	return {
		defaultImg: require('@/assets/default.png'),
		imageUrl: []
}
},

methods: {
	onPreview(row) { // 开启大图查看器
      this.imageUrl = []
      this.imageUrl.push(row.file_url)
      // 调用image组件中的大图浏览图片方法
      this.$refs.preview[0].clickHandler()
    }
}

取经处：https://www.jianshu.com/p/53b2fa92965e

网上看到实现在预览大图时点击遮罩层关闭功能：

let t = this;      
    this.showViewer = true;      
    this.$nextTick(() => {        
        document.querySelector(".el-image-viewer__mask").onclick = function() {          
            t.showViewer = false;        
        };      
    });