前端element-ui两层dialog嵌套遮罩层消失的问题解决办法

更新时间：2024年08月30日 10:13:41 作者：道着无为法自然

最近使用vue+elementUI做项目,使用过程中很多地方会用到dialog这个组件,有好几个地方用到了dialog的嵌套,这篇文章主要给大家介绍了关于前端element-ui两层dialog嵌套遮罩层消失的问题解决办法,需要的朋友可以参考下

背景

总觉得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时，似乎没有碰到类似问题

总结

到此这篇关于前端element-ui两层dialog嵌套遮罩层消失的问题解决的文章就介绍到这了,更多相关element-ui两层dialog嵌套遮罩层消失内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

去除element-ui中Dialog对话框遮罩层方法详解

解决vant-UI库修改样式无效的问题
这篇文章主要介绍了解决vant-UI库修改样式无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
Vue监听数据的原理详解
本篇文章主要介绍了Vue监测数据的原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看
2021-10-10
Antd中单个DatePicker限定时间输入范围操作
这篇文章主要介绍了Antd中单个DatePicker限定时间输入范围操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
Element-UI日期选择器(选择日期范围)禁用未来日期实现代码
我们在网页开发时通常需要用到一些日期组件来方便用户选择时间,其中element日期组件是一个非常好用的工具,这篇文章主要给大家介绍了关于Element-UI日期选择器(选择日期范围)禁用未来日期的相关资料,需要的朋友可以参考下
2024-02-02
vue-cropper组件实现图片切割上传
这篇文章主要为大家详细介绍了vue-cropper组件实现图片切割上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-05-05
Vuex中状态管理器的使用详解
这篇文章主要介绍了Vuex状态管理器的使用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
Vue项目之ES6装饰器在项目实战中的应用
作为一个曾经的Java coder,当第一次看到js里面的装饰器Decorator,就马上想到了Java中的注解,当然在实际原理和功能上面,Java的注解和js的装饰器还是有很大差别的,这篇文章主要给大家介绍了关于Vue项目之ES6装饰器在项目实战中应用的相关资料,需要的朋友可以参考下
2022-06-06
Vue3中reactive与ref函数使用场景
这篇文章主要为大家介绍了Vue3 中有场景是 reactive 能做而 ref 做不了的使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
本文讲述的是从开发一款基于Vue2x的响应式自适应轮播组件插件的一个全过程，包含发布到npm，构建自己的npm包，供下载安装使用的技巧,非常不错，具有一定的参考借鉴价值，感兴趣的朋友跟随脚本之家小编一起看看吧
2018-05-05
vue中的vue-print-nb如何实现页面打印
这篇文章主要介绍了vue中的vue-print-nb如何实现页面打印，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04