解决按esc键同时关闭了el-dialog弹窗和el-image的问题

前言

业务需求：

后台系统打开编辑框，又打开el-image预览框，要将el-image框显示在编辑框之上，按下esc键后，先关闭el-image框，再关闭编辑框

出现的问题：

1.el-image框被编辑框遮挡

2.按下esc键后，编辑框和大图都被关闭了
ps：没法截图演示bug -，-

---

一、解决el-image被编辑框遮挡的问题

根据官方文档，el-image的z-index初始默认层级是2000；而el-dialog是2001

解决：

ps：将el-image的z-index层级设置高于2000就可。

---

二、解决ESC键同时关闭了编辑框和el-image大图

就目前的官方element-ui组件使用来看，当编辑框和el-image大图同时开启的时候，按下esc键会同时调用dialog和el-image的关闭方法，
因为自己没有找到相关的官方解决方案，所以自行想出了一个解决办法，或许不是最优，目前先这样使用着。

解决：

代码如下（示例）：

<el-dialog :title="addStatus == 1 ? '新增' : '编辑'" :visible.sync="addVisible" width="80%" top="6vh" :close-on-click-modal="false" style="padding-bottom:5vh" :before-close="closeDialog">
      //这里是dialog内部代码
</el-dialog>
      

ps：使用dialog的官方属性 before-close，传入function closeDialog
可在控制台按下ESC键调试，可以看到关闭dialog和el-image大图时都调用了这个方法。
（但是在官方文档el-image中并没有这个属性，为何也进入了dialog的before-close事件，目前不太清楚 -，-）

注：虽然都进入了 before-close，但dialog在before-close的方法中，会阻止弹窗的关闭事件，而el-image不会被阻止，所以利用这点解决如下：

//methods
closeDialog(done){
      //console.log(222);
      const a = document.getElementsByClassName('el-image-viewer__wrapper')[0];
      //console.log(a);
      if(!a){
        done()
      }
    }

ps：在dialog关闭之前，先判断DOM中是否存在el-image预览大图模态框相关的标签（存在，则代表当前有el-image大图开启），如果存在，禁止dialog关闭，若不存在，调用done()关闭弹窗。

---

总结

提示：这里对文章进行总结：
无意中发现了这个问题，在网上找了许久没有找到有相关的解决经验帖子。所以自己研究了一下，或许不太专业，但目前就先这样。