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;
        }
      }
相关推荐
三*一7 小时前
优化修整算法
前端·javascript·算法
楠楠子呀8 小时前
英语、西语、阿语客户各开一个口:多语言获客的分流方案
开发语言·javascript·ecmascript·跨境电商·whatsapp·营销工具
AIGC小尼8 小时前
毕设实战|SpringBoot+Vue 实现多个系统项目
vue.js·spring boot·课程设计
weifont8 小时前
自动化抓取和上架商品:能不动手,就少动手
运维·前端·自动化
米柆8 小时前
HTML5 audio /video 完整事件监听模板
前端·html·html5
半个落月8 小时前
LangGraph.js 实战:从状态图到分支、循环、检查点与人工中断
javascript·人工智能·langchain
IT_陈寒9 小时前
Vite热更新失效?你可能也踩了这个坑
前端·人工智能·后端
程序员大阳10 小时前
副队长CSS教程(30)–CSS Grid 实战:实现复杂自适应表单布局
前端·css·自适应·grid·表单
Csvn10 小时前
微前端实现
前端
Chrischaan10 小时前
做 AI 塔罗小程序时,我为什么不让大模型自己抽牌:一次上线复盘
前端