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

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

Vue——ElementUI 如何修改this.$message消息提示框样式及内容样式_第1张图片

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

具体步骤

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

你可能感兴趣的:(开发笔记,elementui,html,css,vue)