轻松覆盖 Element-Plus 禁用按钮样式

Element Plus 按钮的禁用样式非常的花里胡哨,实际项目使用中一点都不清晰,别说用户可能分不清,写代码的我都有一点迷惑,且暗黑模式下禁用按的样式直接歇菜,不能用了。

请看截图

  • 浅色主题
  • 暗黑主题

点击查看按钮禁用状态

antd 在这个地方做的就很好,禁用按钮是单独的一种颜色,不跟随按钮的主题进行变化,比较便于用户确认按钮表示的意义,请看截图:

演示链接地址

  • 浅色主题
  • 暗黑主题

接下来就是覆盖 Element Plus 禁用按钮的样式了,分别覆盖普通按钮、文本按钮、链接按钮、朴素按钮即可,代码如下:

css 复制代码
.el-button.is-disabled {
  --el-button-disabled-bg-color: var(--el-disabled-bg-color);
  --el-button-disabled-text-color: var(--el-disabled-text-color);
  --el-button-disabled-border-color: var(--el-disabled-border-color);
}
.el-button.is-text.is-disabled,
.el-button.is-link.is-disabled {
  color: var(--el-disabled-text-color) !important;
}
.el-button.is-plain.is-disabled {
  background-color: var(--el-disabled-bg-color) !important;
  color: var(--el-disabled-text-color) !important;
  border-color: var(--el-disabled-border-color) !important;
}

最终演示效果如下:

演示链接

  • 浅色主题
  • 暗黑主题
相关推荐
namekong81 天前
清理谷歌浏览器垃圾文件 Chrome “User Data”
前端·chrome
开发者小天1 天前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
李少兄1 天前
HTML 表单控件
前端·microsoft·html
学习笔记1011 天前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-19431 天前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧1 天前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台1 天前
海龟交易系统R
前端·人工智能·r语言
歪歪1001 天前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio
Captaincc1 天前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员
吃饺子不吃馅1 天前
如何设计一个 Canvas 事件系统?
前端·canvas·图形学