当前位置:首页 » 《我的小黑屋》 » 正文

【前端】解决element-ui两层dialog嵌套,遮罩层消失的问题。

8 人参与  2024年09月19日 08:01  分类 : 《我的小黑屋》  评论

点击全文阅读


背景

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

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

在这里插入图片描述

问题

当两层dialog为直接父子关系时, 我们可以简单的使用其属性append-to-body, modal-append-to-body来解决问题:

如,第二层dialog内容被遮罩层覆盖。
<el-dialog>...<el-dialog></el-dialog></el-dialog>

但是,当两层dialog不是直接父子关系, 你可能会碰到关闭dialog2时,回到dialog1后,遮罩层消失的问题。

推测:

关闭dialog时, 隐藏遮罩层的逻辑是有延迟的,可能(几十毫秒)。关闭dialog2时,element会为dialog1动态添加一个v-modal的遮罩层。在特定情况下,上述 逻辑1 会晚于 逻辑2 ., 导致dialog1的遮罩层消失
<el-dialog ref="dialog1">...<el-tab>...<el-dialog ref="dialog2"></el-dialog><el-tab></el-dialog>

解决思路

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

      // 解决dialog嵌套,从第二层返回后,遮罩层消失的问题      addModalDivIfNotExists() {        // 获取dialog的父级div        const parentDiv = this.$refs.parentDiv;        // 获取dialog        const dialog = this.$refs.dialog        // 检查是否已存在class为"v-modal"的div        const existingModalDiv = parentDiv.querySelector('.v-modal');        if (!existingModalDiv) {          // 如果不存在,则创建一个新的div          const newModalDiv = document.createElement('div');          newModalDiv.classList.add('v-modal');          // 设置z-index          const parentZIndex = dialog.$el.style.zIndex          newModalDiv.style.zIndex = Number(parentZIndex) - 1          // 将新的div添加到父级div中          parentDiv.appendChild(newModalDiv);        }      },

题外话

使用ant design vue的modal时, 似乎没有碰到类似问题


点击全文阅读


本文链接:http://zhangshiyu.com/post/161506.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 大雁南飞人不归结局+番外(沈砚之姜曼殊)结局_(大雁南飞人不归结局+番外大雁南飞人不归结局+番外全书结局)结局列表_笔趣阁(沈砚之姜曼殊)
  • 夕拾难觅朝阳苏亦葵厉晏行完本_夕拾难觅朝阳(苏亦葵厉晏行)
  • [老婆豪掷五百万给初恋,重生后我拒当提款机]人气小说未删减节选_唐欣顾承泽萧然小说节选推荐
  • 半堂花夜渡空城免费在线(裴砚泽沈诺柠)_半堂花夜渡空城免费在线
  • 大雁南飞人不归结局+番外优质全章(姜曼殊沈砚之)_大雁南飞人不归结局+番外优质全章姜曼殊沈砚之
  • [绿茶室友邀请我参加祭祖仪式,却不知我是老祖]人物羁绊章节精选_李岚老祖宗苏婧节选免费试读
  • (番外)+(全书)兰因絮果,爱恨全如玉碎+后续+结局(长乐肖风行)全书在线_兰因絮果,爱恨全如玉碎+后续+结局免费列表_笔趣阁(长乐肖风行)
  • 完结文被绿茶养女夺走真千金身份后,我杀疯了列表_完结文被绿茶养女夺走真千金身份后,我杀疯了(苏楠苏意安+)
  • 刹那芳华顾,褚墨景迟文月+番外+后续_刹那芳华顾,褚墨景迟文月+番外+后续列表
  • 被瘾症折磨的可怜校花免费结局+后续(张团团仁川)全书免费_(张团团仁川)被瘾症折磨的可怜校花免费结局+后续后续(张团团仁川)
  • [竹马率十万铁骑娶我,只为给心上人做嫁衣]反转剧情试读片段_尚书府限免完整章节合集‌
  • 方沐筱宋安(重生后,我将兼挑两房的老公一锅端+后续+结局)结局_(方沐筱宋安重生后,我将兼挑两房的老公一锅端+后续+结局全书结局)结局列表_笔趣阁(方沐筱宋安)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1