ElementUI之el-progress动态修改进度条里面文本颜色与进度条色块统一

1.效果:

2.实现方式

通过行内style样式动态给整个progress赋颜色 再在样式里给进度条文字单独设置颜色为默认继承父级颜色就ok啦

html 复制代码
  <el-progress class="custom-progress" stroke-linecap="square" :style="{'color':item.color}" :color="item.color" type="circle" :percentage="item._sum"></el-progress>
css 复制代码
// 我这里是scss的穿透写法 可根据项目调整
      ::v-deep .custom-progress {
        .el-progress__text {
          color: inherit;
        }
      }
相关推荐
张元清16 小时前
React Hooks vs Vue Composables:2026 年全面对比
前端·javascript·面试
yuki_uix16 小时前
从三个自定义 Hook 看 React 状态管理的设计思想
前端·javascript
大漠_w3cpluscom16 小时前
如何在 clamp() 中使用 auto 值
前端·css·html
Younglina16 小时前
🏸 从零打造一个羽毛球球线追踪网站:纯前端实战指南
前端
C澒16 小时前
微前端容器标准化:从碎片化到统一架构的渐进式改造
前端·架构
CyrusCJA16 小时前
JavaScript原型与super关键字
前端·javascript·js
左耳咚16 小时前
Claude Code 技术全景概览
前端·ai编程
2601_9534656117 小时前
m3u8live.cn深度解析:一款专为开发者打造的 M3U8 调试工具
java·前端·django·音视频·开发工具
娇娇yyyyyy17 小时前
QT编程(9): QTextEdit
前端·qt
zzb158017 小时前
RAG from Scratch-优化-routing
java·前端·网络·人工智能·后端·python·mybatis