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;
        }
      }
相关推荐
Zoey的笔记本3 分钟前
「支持ISO27001的GTD协作平台」数据生命周期管理方案与加密通信协议
java·前端·数据库
北辰alk5 分钟前
Vue 的 nextTick:破解异步更新的玄机
vue.js
北辰alk5 分钟前
Vue 技巧揭秘:一个事件触发多个方法,你竟然还不知道?
vue.js
北辰alk18 分钟前
Vue 中 computed 和 watch 的深度解析:别再用错了!
vue.js
奔跑的呱呱牛32 分钟前
geojson-to-wkt 坐标格式转换
javascript·arcgis
C_心欲无痕1 小时前
Docker 本地部署 CSR 前端项目完整指南
前端·docker·容器
康一夏2 小时前
React面试题,封装useEffect
前端·javascript·react.js
Full Stack Developme2 小时前
Redis 持久化 备份 还原
前端·chrome
猪猪拆迁队2 小时前
2025年终总结-都在喊前端已死,这一年我的焦虑、挣扎与重组:AI 时代如何摆正自己的位置
前端·后端·ai编程
❆VE❆2 小时前
WebSocket与SSE深度对比:技术差异、场景选型及一些疑惑
前端·javascript·网络·websocket·网络协议·sse