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;
        }
      }
相关推荐
夏鹏今天学习了吗16 小时前
【性能优化】前端高性能优化策略
前端·性能优化
weixin_4277716119 小时前
css font-size 的妙用
前端·css
凤凰战士芭比Q20 小时前
web中间件——Nginx
前端·nginx·中间件
一 乐20 小时前
点餐|智能点餐系统|基于java+ Springboot的动端的点餐系统小程序(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·小程序·论文
视图猿人20 小时前
RxJS基本使用及在next.js中使用的例子
开发语言·javascript
bitbitDown21 小时前
从零打造一个 Vite 脚手架工具:比你想象的简单多了
前端·javascript·面试
liangshanbo121521 小时前
CSS 数学函数完全指南:从基础计算到高级动画
前端·css
码上成长1 天前
GraphQL:让前端自己决定要什么数据
前端·后端·graphql
冴羽1 天前
为什么在 JavaScript 中 NaN !== NaN?背后藏着 40 年的技术故事
前端·javascript·node.js
久爱@勿忘1 天前
vue下载项目内静态文件
前端·javascript·vue.js