前端element-ui两层dialog嵌套遮罩层消散的题目办理办法

目次

• 配景
• 题目
• 办理思路
• 题外话
• 总结

配景

总以为element-ui dialog的遮罩层逻辑有点晦涩，当一个dialog内嵌另一个dialog时，它的遮罩层却始终只有一个，也就是下方class="v-modal"的div。

可以看到， v-modal的层级总是比dialog低一层。

题目

当两层dialog为直接父子关系时， 我们可以简朴的使用其属性append-to-body, modal-append-to-body来办理题目：

• 如，第二层dialog内容被遮罩层覆盖。

但是，当两层dialog不是直接父子关系, 你大概会碰到关闭dialog2时，回到dialog1后，遮罩层消散的题目。

推测：

• 关闭dialog时， 隐蔽遮罩层的逻辑是有延长的，大概（几十毫秒）。
• 关闭dialog2时，element会为dialog1动态添加一个v-modal的遮罩层。
• 在特定环境下，上述 逻辑1 会晚于 逻辑2 .， 导致dialog1的遮罩层消散

办理思路

回到dialog1时， 手动判断 v-modal遮罩层是否存在，没有则添加。

题外话

使用ant design vue的modal时， 好像没有碰到雷同题目

总结

到此这篇关于前端element-ui两层dialog嵌套遮罩层消散的题目办理的文章就先容到这了,更多相干element-ui两层dialog嵌套遮罩层消散内容请搜索脚本之家从前的文章或继承欣赏下面的相干文章盼望各人以后多多支持脚本之家！