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

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

时间:2024-10-22 16:50:10浏览次数:3  
标签:success 自定义 样式 element ui 消息 message Message

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

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

方法 1:使用 customClass 属性

Element UI 的 Message 组件提供了 customClass 属性,可以为消息框添加自定义的类名,然后在 CSS 中定义该类的样式。

this.$message({
  message: '注册成功',
  type: 'success',
  customClass: 'my-message-class'
});

然后在你的 CSS 中定义该类样式:

.my-message-class {
  font-size: 18px; /* 自定义文字大小 */
  color: red; /* 自定义文字颜色 */
}

方法 2:全局自定义 Message 样式

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

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

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

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

方法 3:使用 HTML 内容

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

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

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

标签:success,自定义,样式,element,ui,消息,message,Message
From: https://blog.csdn.net/lj_1598/article/details/143162642

相关文章

  • MAUI程序如何部署到MIUI手机上?
    由于VS2022的安卓仿真器启动速度奇慢且进入仿真系统后鼠标操作非常卡时常出现界面无响应的提示因此,要考虑直接部署到安卓手机上本人手机的MIUI版本号是13.0.7稳定版1.设置->我的设备->全部参数->MIUI版本>连续点击“MIUI版本”7次,直到看到“您已处于开发者模式”提示框闪现......
  • 使用Radzen Blazor组件库开发的基于ABP框架炫酷UI主题
    一、项目简介使用过ABP框架的童鞋应该知道它也自带了一款免费的BlazorUI主题,它的页面是长这样的:个人感觉不太美观,于是网上搜了很多Blazor开源组件库,发现有一款样式非常不错的组件库,名叫:Radzen,它的组件库案例网址是:SampleBlazorDashboard|FreeUIComponentsbyRadzen,比较......
  • require.context 用法
    require.context是Webpack特有的一个API,它用于动态加载模块,特别是在需要批量引入文件时非常有用。它允许你创建一个上下文,来包含特定目录下的模块,并可以以编程方式导入它们。以下是require.context的用法及示例。基本语法constcontext=require.context(directory,useS......
  • Taro 鸿蒙技术内幕系列(一):如何将 React 代码跑在 ArkUI 上
    作者:京东零售朱鸣辉   基于Taro打造的京东鸿蒙APP已跟随鸿蒙Next系统公测,本系列文章将深入解析Taro如何实现使用React开发高性能鸿蒙应用的技术内幕背景随着鸿蒙操作系统的快速发展,开发者们期待将现有跨平台应用迁移到鸿蒙平台。Taro作为一个流行的跨平台开......
  • CCPC哈尔滨 【tuihuademing】
    CCPC哈尔滨曼波大战哈姆赛前复盘赛前一周:周一和周四各打了一场,周一状态有点差,最后有一题没有写出来,周四感觉状态很好,在卷的离谱的ICPC2021上海也能进金区赛前一天:酒店伙食不错,就是哈尔滨路况不太好,热身赛感觉脑子有些不转手也很僵有些紧张,单人制造了6发罚时,把能错的地方都错了......
  • Unity 切换UI坐标和世界坐标
    usingUnityEngine;//这个脚本实现了,本脚本所在的游戏物体能够被拖拽publicclassDragObjectT:MonoBehaviour{privateVector3screenPoint;//存储物体在屏幕上的位置privateVector3offset;//存储鼠标点击位置与物体实际位置的偏移量privatebool......
  • Nuxt.js 应用中的 build:manifest 事件钩子详解
    title:Nuxt.js应用中的build:manifest事件钩子详解date:2024/10/22updated:2024/10/22author:cmdragonexcerpt:build:manifest是Nuxt.js中的一个生命周期钩子,它在Vite和Webpack构建清单期间被调用。利用这个钩子,开发者可以自定义Nitro渲染在最终HTM......
  • Nuxt.js 应用中的 build:done 事件钩子详解
    title:Nuxt.js应用中的build:done事件钩子详解date:2024/10/21updated:2024/10/21author:cmdragonexcerpt:build:done是Nuxt.js的一个生命周期钩子,它在Nuxt应用的打包构建器完成运行后被调用。这个钩子为开发者提供了一个在构建过程结束后执行特定逻辑的......
  • Nuxt.js 应用中的 build:manifest 事件钩子详解
    title:Nuxt.js应用中的build:manifest事件钩子详解date:2024/10/22updated:2024/10/22author:cmdragonexcerpt:build:manifest是Nuxt.js中的一个生命周期钩子,它在Vite和Webpack构建清单期间被调用。利用这个钩子,开发者可以自定义Nitro渲染在最终HTML中的......
  • 在Ubuntu小设备上使用VSCode+SSH开发部署nicegui的Web应用,并设置系统开机自动启动应用
    在一些小的设备上跑Ubuntu系统,需要快速的开发和调整项目的时候,往往使用SSH进行远程的开发测试,这样可以避免传统的打包更新处理,能够快速的在实际环境上测试具体的内容。另外由于系统设备往往需要重启后能够保留应用的工作,因此也需要在Ubuntu系统设置自动启动的服务处理。本篇随笔介......