el-image预览时定位当前图片， 点击mask关闭预览

查看el-image组件的源码， 有这样一段

 computed: {
      imageIndex() {
        let previewIndex = 0;
        const srcIndex = this.previewSrcList.indexOf(this.src);
        if (srcIndex >= 0) {
          previewIndex = srcIndex;
        }
        return previewIndex;
      }
    },

可以看出预览的图片索引是Image组件的计算出来的, 传递给预览组件image-viewer进行初始化

<image-viewer :z-index="zIndex" :initial-index="imageIndex" v-if="showViewer" :on-close="closeViewer" :url-list="previewSrcList"/>

所以我们想要点击预览图片时，呈现的是当前图片， 仅需动态绑定src，下面是个例子

<template>
  <div>
    <ul>
      <li v-for="(item, index) in previewSrcList" :key="index" @click="getCurrentPreviewSrc(index)">
        <div>
          <!--可以直接使用img，或者其他元素-->
          <el-image :src="item" />
        </div>
      </li>
    </ul>
    <!--    用于预览图片-->
    <!--    想要点击预览图片时，呈现的是当前图片， 仅需动态绑定src-->
    <el-image ref="preview" class="hidden-image" :src="currentPreviewSrc" :preview-src-list="previewSrcList" @click.native="clickMaskClosePreview"/>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        previewSrcList: [
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607058768193&di=e47060830150ba209e7c70ceb11fa32e&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F27%2F81%2F01200000194677136358818023076.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607058768192&di=6a1c0584e9812f202fc63121141f3674&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F42%2F31%2F01300001320894132989315766618.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607058768192&di=a1e60b75244a9e3477671fc6917d1e6b&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F35%2F34%2F19300001295750130986345801104.jpg'
        ],
        currentPreviewSrc: '' // 当前点击的图片地址，用于预览显示当前图片
      }
    },
    methods: {
      getCurrentPreviewSrc(currentPreviewSrcIndex) {
        this.currentPreviewSrc = this.previewSrcList[currentPreviewSrcIndex]
        this.$refs.preview.showViewer = true
      },
      // 点击mask关闭图片预览
      clickMaskClosePreview(e) {
        // 使用addEventListener,会出现点击点击两次才触发的情况
        if (e.target.getAttribute('class') === 'el-image-viewer__mask') {
          this.$refs.preview.showViewer = false
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  ul {
    li {
      list-style-type: none;
      /deep/ .el-image {
        img {
          width: 200px;
          height: 200px;
        }

      }
    }
  }
  /deep/ .el-image {
    &.hidden-image {
      width: 0;
      height: 0;
    }
  }
</style>

此篇仅记录开发遇到的问题， 请各位大佬指点！