element el-image preview-src-list 点击蒙版关闭 图片

element el-image preview-src-list 点击蒙版关闭 图片

事例代码：

  	<el-image
	   :src="图片地址.png"
	   :preview-src-list="[图片地址.png]"
	   alt="图片地址.png">
	   <div slot="error" class="el-image__error">暂无图片</div>
    </el-image>

此时的图片直接点击可以被放大（原始尺寸）
但需要点击右上角关闭按键（叉号）才可以关闭，且按键并不明显；

如何做到点击蒙版关闭？

👍记得点赞哦 😄

👇大佬请看👇

代码修改：

1. html部分： 增加方法 @click.stop=“handleClickItem”

  <el-image
	   :src="图片地址.png"
	   :preview-src-list="[图片地址.png]"
	   @click.stop="handleClickItem"
	   alt="图片地址.png">
	   <div slot="error" class="el-image__error">
		暂无图片</div>
    </el-image>

2. methods中增加方法handleClickItem

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

3.ok 试一试吧，有问题留言

都看👓完了，就👍1️⃣👇吧