Vue + Element项目 message提示框被dialog弹框遮挡

开发碰到的问题

小shy今天遇到一个需求,在dialog弹出前会调用获取数据的接口,如果接口返回的总数为0,则使用message做一个提示。

但是呢,message总是会被dialog弹框遮挡,如下:
在这里插入图片描述
小shy初步判断应该是跟层叠顺序z-index有关,百度一查,果不其然,哈哈。

解决方法如下:
将message的z-index的值比dialog的大就好了(dialog的z-index的值是两千多一点)。

this.$message({message:'这是一条消息提示',type:'warning',customClass:'war-message'});<style>.war-message{z-index:3000 !important;}
</style>

在这里要将样式写在全局的style里,在含有scoped的style里是不生效的。
结果如下:
在这里插入图片描述


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部