Vue——ElementUI 如何修改this.$message消息提示框样式及内容样式

产品需求:要求提示信息换行时单词不能分开

Vue——ElementUI 如何修改this.$message消息提示框样式及内容样式

因为element-ui中this.$message 默认 word-break:break-all , 我需要改为word-wrap:break-word

具体步骤

Vue——ElementUI 如何修改this.$message消息提示框样式及内容样式
在这个样式表中修改无效,所以发现在scoped的style中修改它的样式是无效的,因为ElementUI组件不可以给样式添加scoped。因此要想修改其样式就一定要去掉scoped,但是如果去掉scoped后,又不满足单组件的CSS样式,所以我们在写个style,附加在没有scoped的style中就可以实现了。
Vue——ElementUI 如何修改this.$message消息提示框样式及内容样式
到这里就实现了

上一篇:vue学习---scoped样式(让样式在局部生效,防止冲突)


下一篇:原生JS实现vue / vue-loader中的scoped原理