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;
        }
      }
相关推荐
SuperEugene9 分钟前
Axios + Vue 错误处理规范:中后台项目实战,统一捕获系统 / 业务 / 接口异常|API 与异步请求规范篇
前端·javascript·vue.js·前端框架·axios
行走的陀螺仪10 分钟前
手写 Vue3 极简 i18n
前端·javascript·vue.js·国际化·i18n
羽沢3118 分钟前
一篇简单的STOMP教程QAQ
前端·javascript·stomp
code_Bo19 分钟前
使用AI完成Swagger接口类型在前端自动生成的工具
前端·后端·架构
加个鸡腿儿41 分钟前
从"包裹器"到"确认按钮"——一个组件的三次重构
前端·vue.js·设计模式
Kel44 分钟前
深入 OpenAI Node SDK:一个请求的奇幻漂流
javascript·人工智能·架构
子兮曰1 小时前
AI写代码坑了90%程序员!这5个致命bug,上线就炸(附避坑清单)
前端·javascript·后端
猪八宅百炼成仙1 小时前
PanelSplitter 组件:前端左右布局宽度调整的实用解决方案
前端
BUG胡汉三1 小时前
自建在线文档编辑服务:基于 Collabora CODE + Spring Boot + Vue 3 的完整实现
vue.js·spring boot·后端·在线编辑
锋利的绵羊1 小时前
【解决方案】微信浏览器跳出到浏览器打开、跳转到app,安卓&ios
前端