【element-ui 】【image】：模拟点击预览图片

https://codesandbox.io/p/sandbox/wm4yg2

<template>
  <div>
    <div style="width: 0.01px; height: 0.01px">
      <el-image
        v-for="(image, index) in imageList"
        :key="image"
        :ref="'image' + index"
        :src="image"
        :preview-src-list="imageList"
      />
    </div>
    <el-button
      @click="clickImage(index)"
      v-for="(image, index) in imageList"
      :key="image + 'button'"
      type="primary"
    >
      点击图片{{ index + 1 }}
    </el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageList: [
        "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
        "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
        "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
      ],
    };
  },
  methods: {
    async clickImage(index) {
      // 模拟点击图片预览
      this.$refs["image" + index][0].$el
        .querySelector(".el-image__inner")
        .click();
      await this.$nextTick();
      // 增加点击遮罩关闭图片事件
      const masks = document.querySelectorAll(".el-image-viewer__mask");
      if (masks && masks[index]) {
        masks[index].addEventListener("click", function () {
          const close_btns = document.querySelectorAll(
            ".el-image-viewer__close"
          );
          if (close_btns && close_btns[index]) {
            close_btns[index].click();
          }
        });
      }
      // 给预览容器添加 tabindex 使其可以获得焦点，这样esc可以关闭预览图片
      setTimeout(() => {
        const viewer = this.$refs["image" + index][0].$el.querySelector(
          ".el-image-viewer__wrapper"
        );
        if (viewer) {
          viewer.setAttribute("tabindex", "0");
          viewer.focus();
        }
      }, 500);
    },
  },
};
</script>