element ui 图片 image组件 实现点击遮罩层关闭图片预览

1、图片预览只提供了点击右上角按钮关闭和按Esc按钮关闭，但是我们想要点击遮罩层关闭图片预览，如何实现，直接上代码了：

 <div class="demo-image__preview">
        <el-image 
          :src="showmsg.content" 
          :preview-src-list="[showmsg.content]"
          fit="cover"
          @click.stop="handleClickItem">
        </el-image>
   </div>

js部分

handleClickItem(){
        // 获取遮罩层dom
        setTimeout(function(){
          let domImageMask = document.querySelector(".el-image-viewer__wrapper");
          if (!domImageMask) {
            return;
          }
          domImageMask.addEventListener("click", (e) => {
            if(e.target.parentNode.className == 'el-image-viewer__actions__inner') {
              return;  //如果点击底部菜单，不关闭
            }
            // 点击遮罩层时调用关闭按钮的 click 事件
            document.querySelector(".el-image-viewer__close").click();
          });
        },300)
      }

注意要点：
1、要给个延时操作，要不然dom没取到
2、如果点击的是底部功能栏，则不关闭图片预览。