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,亲测有效!!!

相关推荐
DianSan_ERP4 小时前
电商架构演进:如何在高并发场景下实现多平台API的标准化履约?
运维·前端·网络·安全·架构·自动化
碎_浪7 小时前
给键盘党的英语记忆工具:我做了一款「打字背单词」桌面应用
前端·程序员·ai编程
阿成学长_Cain8 小时前
Linux dirs命令详解|Bash目录堆栈管理快速切换目录实战教程
linux·运维·前端·数据库
多加点辣也没关系8 小时前
JavaScript|第4章:类型转换
开发语言·javascript
yqcoder9 小时前
httpOnly 是什么,又有什么用?
开发语言·前端·javascript
IT_陈寒9 小时前
Java的Stream.parallel()把我CPU跑爆了,这种优化要谨慎
前端·人工智能·后端
小皮虾9 小时前
小程序首页性能优化实战:从 4 秒到 1.8 秒
前端·微信小程序
烬羽9 小时前
还在手动拼路径、写回调地狱?一文吃透 Node.js 的 path 和 fs
javascript·程序员·node.js
山河木马9 小时前
GPU自动处理专题1-裁剪到底在裁什么(裁剪)
前端·webgl·计算机图形学