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

$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的遮罩遮住了弹窗内容,需要点击一下弹窗内容才能呈现。也是通过设置这个属性得以解决)

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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值