element-ui中，使用this.$message.success(“登录成功“)，如何修改文字的样式呢？

js_user2024-10-23 13:31

在 element-ui 中使用 this.$message.success("注册成功"); 时，直接修改文字样式并没有暴露出很方便的接口，因为 Element UI 的消息提示组件 Message 是通过 JavaScript 动态创建的。

但是你可以通过以下方法自定义消息的样式：

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; /* 自定义文字颜色 */
}

如果你需要全局修改 Message 组件的样式，可以覆盖 Element UI 内置的样式。

例如，针对 success 类型的消息，可以在全局样式中使用以下 CSS：

bash 复制代码

.el-message--success {
  font-size: 18px; /* 修改成功消息的字体大小 */
  color: blue; /* 修改成功消息的文字颜色 */
}

这样，你每次调用 this.$message.success 时，消息文字样式都会应用这些自定义样式。

如果你想在消息内容中使用 HTML 标签，可以用 dangerouslyUseHTMLString 属性：

bash 复制代码

this.$message({
  message: '<strong>注册成功</strong>',
  type: 'success',
  dangerouslyUseHTMLString: true
});