elementui 弹窗遮罩问题;Message层级问题(被遮罩、弹窗遮住,设置层级;弹窗内容被遮罩遮挡)

目录

  • $Message: 提示信息被弹窗(遮罩)遮住。只是层级样式不够
    • 示例(因弹窗层级过高,遮挡住了消息提示,单独设置信息提示的层级)
  • 弹窗、抽屉: 内容被遮罩遮挡、层级不起效果、需要点击一次遮罩才进行呈现

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

elementui 文档上,Message板块有写到 customClass 可以提供自定义class。通过自己设置类名,可以对其设置相关css属性。
elementui 弹窗遮罩问题;Message层级问题(被遮罩、弹窗遮住,设置层级;弹窗内容被遮罩遮挡)_第1张图片

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

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

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

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

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

你可能感兴趣的:(element-ui,elementui,前端,javascript)