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;
        }
      }
相关推荐
千寻girling1 分钟前
面试官: “ 说一下 JS 中什么是事件循环 ? ”
前端·javascript
程序员龙语4 分钟前
CSS 高级选择器应用
前端·css
Cassie燁5 分钟前
el-table源码解读2-2——createStore()初始化方法
前端·javascript·vue.js
程序员修心7 分钟前
CSS文本样式全解析:11个核心属性详解
前端·css
旧梦吟32 分钟前
脚本网站 开源项目
前端·web安全·网络安全·css3·html5
我有一棵树35 分钟前
解决 highlight.js 不支持语言的方法
开发语言·javascript·ecmascript
北极糊的狐41 分钟前
按钮绑定事件达成跳转效果并将树结构id带入子页面形成参数完成查询功能并将返回的数据渲染到页面上2022.5.29
前端·javascript·vue.js
幽络源小助理42 分钟前
幽络源二次元分享地址发布页源码(HTML) – 源码网免费分享
前端·html
全栈前端老曹1 小时前
【ReactNative】页面跳转与参数传递 - navigate、push 方法详解
前端·javascript·react native·react.js·页面跳转·移动端开发·页面导航
用泥种荷花2 小时前
【前端学习AI】Python环境搭建
前端