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

本文主要是介绍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中是不生效的，至少我这里是。

这篇关于vue+elementui--$message提示框被dialog遮罩层挡住问题解决的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---