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;
        }
      }
相关推荐
hunterandroid7 分钟前
Jetpack Compose 入门:用声明式 UI 写 Android 页面
前端
以和为贵10 分钟前
前端手写 RAG 踩坑实录:四个让检索"翻车"的坑
前端·人工智能·面试
用户21366100357214 分钟前
Redux异步方案与React性能优化Hooks
前端
假如让我当三天老蒯16 分钟前
TypeScript 继续学习(学习用)
前端·面试·typescript
玄玄子16 分钟前
CSS 浮动引起父元素高度塌陷
前端·css
拾年27519 分钟前
我用 30 行代码,搞懂了大模型是怎么"读"中文的
javascript·人工智能·llm
竹林81819 分钟前
从 ethers.js 到 viem:我在一个 DeFi 看板项目中踩过的所有坑与最终方案
前端·javascript
kyrie2822 分钟前
React Redux 完整用法
前端
bonechips27 分钟前
Tool Use:从"缸中大脑"到 AI Agent 的技术真相
javascript·agent
程序员鱼皮27 分钟前
Codex 又出王炸功能「录制回放」,实战测评!附原理浅析
前端·后端·ai编程