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

产品需求：要求提示信息换行时单词不能分开因为element-ui中this.$message 默认 word-break:break-all ，我需要改为word-wrap:break-word具体步骤在这个样式表中修改无效，所以发现在scoped的style中修改它的样式是无效的，因为ElementUI组件不可以给样式添加scoped。因此要想修改其样式就一定要去掉scoped，但是如果去掉s

管乐明

8687人浏览 · 2021-09-03 17:54:42

管乐明 · 2021-09-03 17:54:42 发布

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

在这里插入图片描述

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

具体步骤

在这里插入图片描述
在这个样式表中修改无效，所以发现在scoped的style中修改它的样式是无效的，因为ElementUI组件不可以给样式添加scoped。因此要想修改其样式就一定要去掉scoped，但是如果去掉scoped后，又不满足单组件的CSS样式，所以我们在写个style，附加在没有scoped的style中就可以实现了。
在这里插入图片描述
到这里就实现了

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^