element-ui中Message消息提示与Dialog对话框同时使用的遮罩问题

问题描述

element-ui中，当在嵌套的Dialog对话框中使用Message消息提示的时候，会出现消息提示被Dialog对话框遮罩而看不到消息提示的情况。

原因分析

Message消息提示和Dialog对话框本质上都是弹窗，出现遮罩的问题，是二者之间的z-index的值的大小所致。由于咱们对于Message消息提示的需求是显示在Dialog对话框之上的，所以咱么只需调整Message消息提示的z-index值比Dialog对话框的z-index的值大即可。

解决办法

在element-ui中有对Message消息提示的class样式自定义的方法customClass，

所以，在使用的时候自定义class类，然后在style样式中设置class类的z-index值即可，方法如下：

//在methods方法中使用Message消息提示时，自定义其customClass
this.$message(
    {
        message:'这是一条消息提示',
        type:'success',
        customClass:'mzindex'
    }
); 

//在style样式中设置z-index的值
<style> 
    .mzindex{ 
        z-index:3000 !important; 
    } 
</style>