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

最近碰到一个先执行this.$message提示内容,然后接着弹出dialog带遮罩层弹框。那么问题来了,message提示框会默认被dialog遮罩层挡住,现在就是要解决这个问题。

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

this.$message({message:'这是一条消息提示',type:'success',customClass:'zZindex'});

<style>
  .zZindex {
    z-index:3000 !important;
  }
</style>

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

评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值