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

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

问题：
最近碰到一个先执行this.$message提示内容，然后接着弹出dialog带遮罩层弹框。那么问题来了，message提示框会默认被dialog遮罩层挡住，代码如下：

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

let message = this.$message({ message: '计划处理中，请在当前页面等待处理结果', type: 'warning', customClass: 'global-messageZindex', duration: 0 })

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

//将message的提示框位于遮罩层的上方
.global-messageZindex {
  z-index:3000 !important;
}