elementui的$message提示框被dialog遮罩层挡住问题解决

风中徘徊

于 2021-07-14 15:14:10 发布

阅读量6.8k

点赞数 13

分类专栏： elementui

本文链接：https://blog.youkuaiyun.com/jinxin740202/article/details/118728090

版权

elementui 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何通过设置message组件的customClass属性，为Elemeent UI中的$message添加自定义z-index，使其在dialog遮罩层之上显示。关键在于将样式写在全局style中并确保z-index值高于dialog的2007权重。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

elementui的$message提示框被dialog遮罩层挡住问题解决

问题：
最近碰到一个先执行this.$message提示内容，然后接着弹出dialog带遮罩层弹框。那么问题来了，message提示框会默认被dialog遮罩层挡住，代码如下：
在这里插入图片描述

原因：
由于都是弹框，问题肯定是出在z-index比重问题。由于用$message方式是写在js中而不是写在html中所以不是很好直接去改样式。
不过好在message组件中提供了customClass 属性，我们可以利用这个属性去添加一个z-index超过dialog遮罩层比重的值就好了。

let message = this.$message({ message: '计划处理中，请在当前页面等待处理结果', type: 'warning', customClass: 'global-messageZindex', duration: 0 })

注意：
dialog遮罩层的比重好像是2007左右，我们只要超过这值就好，这里有个小细节，样式定义的地方要写在全局的style中，写在含有scoped的style中是不生效的。


//将message的提示框位于遮罩层的上方
.global-messageZindex {
  z-index:3000 !important;
}