个人小计：Progress 进度条如何实现根据数值大小变换颜色

最新推荐文章于 2024-05-16 11:08:43 发布

qimingzhennan_to

最新推荐文章于 2024-05-16 11:08:43 发布

阅读量1.2k

点赞数 1

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qimingzhennan_to/article/details/129553167

版权

众所周知v-Progress标签是一个进度条展示百分比效果的组件，那么如何实现根据百分比的大小来自动切换颜色呢？具体实现代码如下：

<template v-if="col.columnLabel === '项目进度'">
                <div v-if="scope.row[col.columnName]<='10'" class="abcList">
                  <el-progress :text-inside="true" :stroke-width="20" :percentage="scope.row[col.columnName]" status="exception" :text-color="scope.row[col.columnName]<'10' ? '#010711' : '#FFF'"></el-progress>
                </div>
                <div v-if="scope.row[col.columnName]>'10'&&scope.row[col.columnName]<='30'">
                  <el-progress :text-inside="true" :stroke-width="20" :percentage="scope.row[col.columnName]" status="warning"></el-progress>
                </div>
                <div v-if="scope.row[col.columnName]>'30'">
                  <el-progress :text-inside="true" :stroke-width="20" :percentage="scope.row[col.columnName]" status="success"></el-progress>
                </div>
              </template>

  .abcList {
    ::v-deep .el-progress-bar__innerText{
      color: #3E464C;
    }
  }

在代码实现过程中发现使用el-progress标签自带的属性text-color修改颜色属性并没有效果，所以直接使用css样式穿透将文字直接修改成自己想要的结果