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

作为一个后台管理系统，对多页签的支持必不可少，之前我对ElementUI的弹窗样式稍加改造，配合上append-to-body相关属性，使对话框能够内嵌到各个页签之中。当我以为大功告成暗中窃喜之时，拿起鼠标噼里啪啦一阵狂点，才发现自己还是太天真，果然我们只是从一个坑跳到了另外一个坑（见下方的动态图）。为了理想中的康庄大道，这场填坑之旅势在必行 对话框内嵌在各页面之中 在页签之间打开多个弹窗进行切换时没有达到预期效果 0x01 坑从哪里来 要想解决问题，我们必须得知道问题的根源所在，才能一劳永逸。而途径只有一个，那就是阅读源码。通过源码，我们知道了弹框的遮罩层是由一个名为popup的mixin混入工具类进行操作的，而popup的核心在于PopupManager这个对象。其中关键部分截图如下： dialog/src/component.vue popup/index.js popup/popup-manager.js popup/popup-manager.js popup/popup-manager.js 原来，Dialog组件在全局只维护一个遮罩层DOM节点，然后在关闭当前遮罩层的时候通过堆栈恢复上一个遮罩层位置。以截图为例，当我们打开第二个页签的弹窗时其实是把第一个弹窗的遮罩层给强行征用了，所以当我们切换回第一个页签时，背景就莫名的消失了。当我们关闭第二个弹窗时，堆栈恢复了上一个弹窗的位置所以我们造成了弹窗未关闭的假象。显然，这种节省资源的做法在多页签及弹窗内嵌的需求下必定是先天不足，分身乏术。 0x02 填坑思路 理清了症结我们对症下药即可，而药方也很简单，就是舍得下本，给每个弹窗分配一个遮罩。 其实通过上述截图我们就可以发现，遮罩都是由PopupManager进行管理的，因此我们只需修改PopupManager的源码即可，总结起来就是对其中的getModal和modalStack进行改造，使其能够根据不同的对话框（每个对话框都维护着一个不同的id，可由此区分）对不同的遮罩层进行操作。具体实现再次不再多说。 这里有个难点在于对esc键的响应，由于对于按键的监听操作是在整个文档，无法与单个遮罩进行关联处理（当然了，如果只需要对遮罩范围内进行监听，那对每个遮罩都绑定一个监听事件也未尝不可，这个问题自然也就不存在了）。在此的思路是遍历所有的遮罩节点，取出在当前界面上可视的并且zIndex最高的一个遮罩进行处理，在此我们借助于window.getComputedStyle的力量来判断对应遮罩是否是我们想要关闭的。 0x03 填坑方法 现在我们已经有了填坑的思路，但是要怎么填，把这个思路付诸实践还是值得思考的，这里提供三种方法： 对Element库进行修改替换。即到github上下载最新的官方库进行修改，然后编译打包，对项目的依赖改成本地编译后的库即可 缺点：动作太大，不利更新 局部替换。增对我们需要修改的组件进行局部覆盖替换。以dialog组件为例，将dialog组件的源码copy到项目目录下，对其中的Popup的引用替换成我们修改后的popup工具类即可 缺点：得对所有用到遮罩的组件（包括Drawer，Message等）进行替换，否则官方的遮罩和自定义的遮罩同时使用冲突造成zIndex不正常的情况 直接对popup-manager的行为进行覆盖 这种是我比较青睐的方式，修改粒度也比较小。思路是在自定义的PopupManager中引入（import）官方组件的PopupManager，然后对其默认行为（函数）进行覆盖重写。

本文章由javascript技术分享原创和收集