问题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属性调整父元素层级,比如:

son

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