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;
        }
      }
相关推荐
榴莲omega2 分钟前
第7天:网络进阶——TCP/UDP、WebSocket、长连接
javascript·网络·tcp/ip·udp·八股
xuankuxiaoyao6 分钟前
VUE.JS 实践 第二章
前端·javascript·vue.js
毕设源码-赖学姐8 分钟前
【开题答辩全过程】以 基于Vue的电商管理平台为例,包含答辩的问题和答案
前端·javascript·vue.js
Wayward and pinnacle11 分钟前
二次封装多选框组件
前端·javascript·vue.js
咬人喵喵28 分钟前
植树节主题核心 SVG 交互玩法 + 品牌 / 账号案例 + 组件 / 教程
前端·css·编辑器·svg·e2编辑器
Sailing41 分钟前
🚀AI 写代码越来越快,但我开始不敢上线了
前端·后端·面试
Alair‎41 分钟前
Vue 3 基础教程:从入门到精通
前端·javascript·vue.js
百锦再42 分钟前
树形数据展示:树形表格与树形控件的深度对比(Vue实现)
javascript·vue.js·ecmascript·递归·tree·data·table
Sylvia33.43 分钟前
体育数据API实战:用火星数据实现NBA赛事实时比分与状态同步
java·linux·开发语言·前端·python
码农阿豪44 分钟前
Vue+Ant Design表格组件开发实战:从问题到优化的完整指南
前端·javascript·vue.js