位置: IT常识 - 正文
vue3使用ElementPlus的消息el-message样式不生效或者被遮盖（z-index）(vue怎么用elementui)
发布时间：2024-01-08vue3使用ElementPlus的消息el-message样式不生效或者被遮盖（z-index） 问题1：el-message自定义样式不生效
本文链接地址:https://www.jiuchutong.com/zhishi/289731.html
转载请保留说明！
推荐整理分享vue3使用ElementPlus的消息el-message样式不生效或者被遮盖（z-index）(vue怎么用elementui)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue3使用vuex,vue3 element-plus,vue3使用vuex,vue3+elementplus,vue3 element-plus,vue3使用ref获取元素,vue3 elementplus,vue3 elementplus,内容如对您有帮助，希望把文章链接给更多的朋友！
想改弹出框的位置时不生效，使用了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-indexElMessage({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小的值就可以了
上一篇：为庆祝中秋而摆放的灯笼，新加坡 (© Khin/Getty Images)(为庆祝中秋而摆放的东西)
下一篇：Madonna della Corona教堂，意大利 (© Volodymyr Kalyniuk/Alamy)
