在 element-ui 中使用 this.$message.success("注册成功"); 时,直接修改文字样式并没有暴露出很方便的接口,因为 Element UI 的消息提示组件 Message 是通过 JavaScript 动态创建的。
但是你可以通过以下方法自定义消息的样式:
方法 1:使用 customClass 属性
Element UI 的 Message 组件提供了 customClass 属性,可以为消息框添加自定义的类名,然后在 CSS 中定义该类的样式。
bash
this.$message({
message: '注册成功',
type: 'success',
customClass: 'my-message-class'
});
然后在你的 CSS 中定义该类样式:
bash
.my-message-class {
font-size: 18px; /* 自定义文字大小 */
color: red; /* 自定义文字颜色 */
}
方法 2:全局自定义 Message 样式
如果你需要全局修改 Message 组件的样式,可以覆盖 Element UI 内置的样式。
例如,针对 success 类型的消息,可以在全局样式中使用以下 CSS:
bash
.el-message--success {
font-size: 18px; /* 修改成功消息的字体大小 */
color: blue; /* 修改成功消息的文字颜色 */
}
这样,你每次调用 this.$message.success 时,消息文字样式都会应用这些自定义样式。
方法 3:使用 HTML 内容
如果你想在消息内容中使用 HTML 标签,可以用 dangerouslyUseHTMLString 属性:
bash
this.$message({
message: '<strong>注册成功</strong>',
type: 'success',
dangerouslyUseHTMLString: true
});