Element-UI多模态框改造（支持层级嵌套）

Posted 2023-03-09

参考技术A

要想解决问题，我们必须得知道问题的根源所在，才能一劳永逸。而途径只有一个，那就是阅读源码。通过源码，我们知道了弹框的遮罩层是由一个名为 popup 的 mixin 混入工具类进行操作的，而 popup 的核心在于 PopupManager 这个对象。其中关键部分截图如下：

原来， Dialog 组件在全局只维护一个遮罩层 DOM 节点，然后在关闭当前遮罩层的时候通过 堆栈 恢复上一个遮罩层位置。以截图为例，当我们打开第二个页签的弹窗时其实是把第一个弹窗的遮罩层给强行征用了，所以当我们切换回第一个页签时，背景就莫名的消失了。当我们关闭第二个弹窗时，堆栈恢复了上一个弹窗的位置所以我们造成了弹窗未关闭的假象。显然，这种节省资源的做法在多页签及弹窗内嵌的需求下必定是先天不足，分身乏术。

理清了症结我们对症下药即可，而药方也很简单，就是舍得下本，给每个弹窗分配一个遮罩。
其实通过上述截图我们就可以发现，遮罩都是由 PopupManager 进行管理的，因此我们只需修改 PopupManager 的源码即可，总结起来就是对其中的 getModal 和 modalStack 进行改造，使其能够根据不同的对话框（每个对话框都维护着一个不同的id，可由此区分）对不同的遮罩层进行操作。具体实现再次不再多说。
这里有个难点在于对 esc 键的响应，由于对于按键的监听操作是在整个文档，无法与单个遮罩进行关联处理（当然了，如果只需要对遮罩范围内进行监听，那对每个遮罩都绑定一个监听事件也未尝不可，这个问题自然也就不存在了）。在此的思路是遍历所有的遮罩节点，取出在当前界面上可视的并且 zIndex 最高的一个遮罩进行处理，在此我们借助于 window.getComputedStyle 的力量来判断对应遮罩是否是我们想要关闭的。

现在我们已经有了填坑的思路，但是要怎么填，把这个思路付诸实践还是值得思考的，这里提供三种方法：