场景

使用 elementUI 的 image 图片组件，开启图片预览功能（preview-src-list）。

组件库只提供了两种方式关闭图片预览：
源码位置：/node_modules/element-ui/packages/image/src/image-viewer.vue

1. 点击右上角关闭icon
   
2. 按 ESC 键
   
   除此之外，用户点击遮罩层关闭预览大图也是习惯性的常规操作，但 elementUI 并没有支持。

实现起来也很简单，两种思路：

1. 把 hide 事件绑定在遮罩层 dom
2. 直接调用 关闭按钮 上的 click 事件

获取遮罩层dom很容易，hide 事件就相对麻烦了，需要获取 vue实例子组件 image-viewer，再访问子组件的method。所以我使用了第二种方法。

直接上代码

<template>
...
	<el-image
	:preview-src-list="item.isPreview ? previewSrcList : []"
	  class="block-img"
	  :src="item.url"
	  fit="cover"
	  @click.stop="handleClickItem"
	></el-image>
...
</template>

<script>
...
	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();
			});
		})
	}
...
</script>