elementUI 预览大图关闭按钮问题

Element UI 中的图片有预览大图的功能，但是只能点击右上角的关闭图标才能关闭，感觉很不方便，而且如果大屏还很难注意到这个按钮

<el-image
            v-if="row.image_url"
            style="width: 50px; height: 23px"
            :src="row.image_url"
            :preview-src-list="[row.image_url]"
            @click="handleClickItem">
</el-image>

method:{
    // 关闭el-image遮罩层
    handleClickItem() {
      this.$nextTick(() => {
        // 获取遮罩层dom
        let domImageMask = document.querySelector('.el-image-viewer__mask')
        if (!domImageMask) {
          return
        }
        domImageMask.addEventListener('click', () => {
          // 点击遮罩层时调用关闭按钮的 click 事件
          document.querySelector('.el-image-viewer__close').click()
        })
      })
    }
}

这样的话点击空白处就可以关闭预览了，但是呢，这只是针对单个，像我这个商品列表加预览的话，这样就只会是第一个生效，其他图片预览就不会生效，所以稍微改动下就行，将querySelector改成querySelectorAll，然后遍历添加点击事件就行

method:{
    // 关闭el-image遮罩层
      handleClickItem() {
        this.$nextTick(() => {
          // 获取遮罩层dom
          let domImageMask = document.querySelectorAll('.el-image-viewer__mask')
          if (!domImageMask) {
            return
          }
          domImageMask.forEach((item,index)=>{
            item.addEventListener('click', () => {
              // 点击遮罩层时调用关闭按钮的 click 事件
              let closeBtn = document.querySelectorAll('.el-image-viewer__close')
              closeBtn[index].click()
            })
          })
        })
      }
}