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;
        }
      }
相关推荐
兆子龙22 分钟前
当「多应用共享组件」成了刚需:我们从需求到模块联邦的落地小史
前端·架构
Qinana23 分钟前
从代码到智能体:MCP 协议如何重塑 AI Agent 的边界
前端·javascript·mcp
Wect33 分钟前
LeetCode 130. 被围绕的区域:两种解法详解(BFS/DFS)
前端·算法·typescript
不会敲代码136 分钟前
从入门到进阶:手写React自定义Hooks,让你的组件更简洁
前端·react.js
用户54330814419438 分钟前
拆完 Upwork 前端我沉默了:你天天卷的那些技术,人家根本没用
前端
洋洋技术笔记38 分钟前
Vue实例与数据绑定
前端·vue.js
Marshall15139 分钟前
zzy-scroll-timer:一个跨框架的滚动定时器插件
前端·javascript
明月_清风2 小时前
打字机效果优化:用 requestAnimationFrame 缓冲高频文字更新
前端·javascript
明月_清风2 小时前
Markdown 预解析:别等全文完了再渲染,如何流式增量渲染代码块和公式?
前端·javascript
掘金安东尼3 小时前
用 CSS 打造完美的饼图
前端·css