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

在 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
});

我使用的是方法3,亲测有效!!!

相关推荐
coding随想21 分钟前
JavaScript中的系统对话框:alert、confirm、prompt
开发语言·javascript·prompt
LuckyLay28 分钟前
使用 Docker 搭建 Rust Web 应用开发环境——AI教你学Docker
前端·docker·rust
pobu1681 小时前
aksk前端签名实现
java·前端·javascript
烛阴1 小时前
带参数的Python装饰器原来这么简单,5分钟彻底掌握!
前端·python
0wioiw01 小时前
Flutter基础(前端教程⑤-组件重叠)
开发语言·前端·javascript
冰天糖葫芦1 小时前
VUE实现数字翻牌效果
前端·javascript·vue.js
Brilliant Nemo1 小时前
集成CommitLInt+ESLint+Prettier+StyleLint+LintStaged
javascript
嘉琪0011 小时前
2025 js——面试题(7)——ajax相关
开发语言·javascript·ajax
南岸月明1 小时前
我与技术无缘,只想副业搞钱
前端