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;
        }
      }
相关推荐
倒霉男孩1 小时前
HTML视频和音频
前端·html·音视频
喜欢便码1 小时前
JS小练习0.1——弹出姓名
java·前端·javascript
chase。1 小时前
【学习笔记】MeshCat: 基于three.js的远程可控3D可视化工具
javascript·笔记·学习
暗暗那2 小时前
【面试】什么是回流和重绘
前端·css·html
小宁爱Python2 小时前
用HTML和CSS绘制佩奇:我不是佩奇
前端·css·html
weifexie2 小时前
ruby可变参数
开发语言·前端·ruby
千野竹之卫2 小时前
3D珠宝渲染用什么软件比较好?渲染100邀请码1a12
开发语言·前端·javascript·3d·3dsmax
sunbyte2 小时前
初识 Three.js:开启你的 Web 3D 世界 ✨
前端·javascript·3d
半兽先生3 小时前
WebRtc 视频流卡顿黑屏解决方案
java·前端·webrtc
南星沐4 小时前
Spring Boot 常用依赖介绍
java·前端·spring boot