element ui 中显示dialog后 再显示提示消息message被遮挡的问题的解决。

vue项目中使用element ui 中的el-dialog 弹出表单让用户填写信息。

在信息填写有误时显示提示信息的时候，发现Message 消息被dialog遮挡住了

查看了Message 与el-dialog的样式，其中都各自设置了z-index, 而dialog的比Message的大

这样看来，只需要设置Message的样式,将其设置为比dialog大即可。
正好Message支持自定义样式

显示Message的函数中有个参数 “customClass 自定义类名”

<style scoped  lang="stylus">
 .customMsgCls {
  z-index: 20010 !important;
}
</style>

运行后，发现不行，查了下资料，发现这个样式必须是全局的，不能是限定为范围内的。

所以改成下面这样。

<style  lang="stylus">
 .customMsgCls {
  z-index: 20010 !important;
}
</style>

再次运行，果然可以了。

问题解决，休息下。

版权声明：本文为凸然网站的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：element ui 中显示dialog后 再显示提示消息message被遮挡的问题的解决。