【解决】el-message消息弹框的显示被el-dialog覆盖（z-index导致）

qq_38969618

已于 2022-10-07 13:56:40 修改

阅读量8.7k

点赞数 3

分类专栏： Element-UI组件库文章标签： vue.js elementui javascript

于 2021-08-06 14:26:52 首次发布

本文链接：https://blog.csdn.net/qq_38969618/article/details/119454149

版权

Element-UI组件库专栏收录该内容

23 篇文章

订阅专栏

方案一：设置el-message的z-index为更大值即可。

// to fix el-message弹框被el-dialog覆盖的问题。
.el-message {
  z-index: 99999999 !important;
}

方案二：设置el-dialog的z-index为较小值即可。

<!--【close-on-click-modal】：点击空白处是否关闭弹框; -->
<el-dialog 
    :title="title" 
    :visible.sync="visible" 
    width="35%"
    z-index="1000"
    :destroy-on-close="true" 
    :close-on-click-modal="false" 
    :show-close="!loading" 
    :before-close="closeDg">
</el-dialog>