el-image在预览状态下点击遮罩层无法关闭

今天遇到一个需求，运营人员反应，管理后台的点击预览图片后，要关闭时老是要去右上角找关闭按钮，觉得麻烦，问能不能直接点阴影区域就能关闭掉。

一、找类似案例

  于是网上搜一圈，发现大多是如下解决方案：

<el-image style="width: 200px;" @click="handleClickItem" :src="shopimage" :preview-src-list="[shopimage]" v-if="shopimage"/>

## js
```typescript
    // 背景关闭图片
    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()
            })
        })
    },

二、反思

Elememt一个这么流行的基于Vue.js的UI框架，难道会这么粗暴的解决这种常见的需求吗

三、解决

果然，不出所料

<el-image
		style="width: 30px; height: 30px"
		:src="'http://localhost:3000/s-vtEHOrokQ18LYVS8GWR.svg'"
		:preview-src-list="['http://localhost:3000/s-vtEHOrokQ18LYVS8GWR.svg']"
		:initial-index="0"
		:hide-on-click-modal="true"
	/>

看到此案例，前端开发相关的同学们相信不用多介绍都能瞬间明白了：

hide-on-click-modal="true"

此设置意为：el-image在预览状态下点击遮罩层能够关闭

四、完成

很简单的，本可以一行代码搞定的，结果因为懒得看文档，自己写一堆代码模拟click事件去实现。

日积月累，导致屎山代码越堆越多。