vue3使用ElementPlus的消息el-message样式不生效或者被遮盖（z-index）

最新推荐文章于 2025-07-01 15:18:51 发布

M31Gargantua

最新推荐文章于 2025-07-01 15:18:51 发布

阅读量5.6k

点赞数

CC 4.0 BY-SA版权

文章标签： elementui vue 前端

本文链接：https://blog.csdn.net/M31Gargantua/article/details/129480332

文章讲述了在Vue3+TypeScript环境下，遇到el-message组件自定义样式不生效和被遮罩层挡住的问题。解决方案包括通过JavaScript动态设置样式，特别是调整margin-top和z-index属性，以及检查并调整父元素的z-index，以确保message组件的正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题1：el-message自定义样式不生效

想改弹出框的位置时不生效，使用了el-message的自定义类的custom-class属性也不行。原因应该是加了scoped后使用到里面样式的dom会添加data-v-xxxx这种属性防止css污染，但是message生成的dom是没有添加data-v-xxx属性的，所以样式无效。

解决方式：js动态设置（就是麻烦一点）

 this.$message({
          message:'登录失败',
          center:true,
          type:'error',
          duration:0
        });
        var el=document.querySelector('.el-message');
        if(el) el.style.cssText = 'margin-top: 60px;'

我用的vue3+TypeScript

ElMessage({
            showClose: true,
            message: '登录成功',
            type: 'success'
          })
          var el: any = document.querySelector('.el-message')
          if (el) el.style.cssText = 'margin-top: 60px;'

问题2：el-message被遮罩层挡住

在有半透明遮罩层的情况下触发message时其层级（z-index）在遮罩层之下

解决办法：在上面代码的基础上加z-index

ElMessage({
            showClose: true,
            message: '登录成功',
            type: 'success'
          })
          var el: any = document.querySelector('.el-message')
          if (el) {
            el.style.cssText = 'margin-top: 60px;'
            el.style.zIndex = 10000
          }

如果还是被遮罩层挡住很可能是父元素层级的问题，需要给父级加个z-index属性调整父元素层级，比如：

<div style="z-index: 1">
  <div style="z-index: 10">son</div>
</div>
<div style="z-index: 2"></div>

我的是A（父）组件包含了B（子）组件，给A的样式加了z-index小的值就可以了