$Message: 提示信息被弹窗(遮罩)遮住。只是层级样式不够

elementui 文档上,Message板块有写到 customClass 可以提供自定义class。通过自己设置类名,可以对其设置相关css属性。
在这里插入图片描述

示例(因弹窗层级过高,遮挡住了消息提示,单独设置信息提示的层级)

this.$message({
   message: "提示信息",
   type: "warning",
   customClass: 'messageIndex'
 })
.messageIndex {
  z-index: 3000 !important;
}

弹窗、抽屉: 内容被遮罩遮挡、层级不起效果、需要点击一次遮罩才进行呈现

考虑是因为遮罩层默认添加到了body元素上造成的影响,解决方案是将其添加到其盒子父元素上。通过设置对应属性modal-append-to-body值为false进行改变。(之前遇到过element的遮罩遮住了弹窗内容,需要点击一下弹窗内容才能呈现。也是通过设置这个属性得以解决)

贴一张官方文档的图:
在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐