ant design vue 设置不同值的进度条颜色

nice111nice

已于 2022-11-24 08:59:15 修改

阅读量1.5k

点赞数 1

分类专栏：前端文章标签： vue.js

于 2022-11-24 08:49:41 首次发布

原文链接：https://blog.csdn.net/qq_42203909/article/details/107643467

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

progress进度条根据完成度自定义分段的颜色

- - 代码示例
  - 效果图

代码示例

// 进度条根据完成度自定义分段的颜色 -- 参数successPercent表示已完成的分段百分比
      getProgressColor (successPercent) {
        let color = ''
        if (successPercent <= 50) {
          color = '#1486b4'
        } else if (successPercent > 50 && successPercent < 90) {
          color = '#ffb700'
        } else if (successPercent >= 90) {
          color = '#cb0909'
        }
        return color
      },

<span slot="action1" slot-scope="text, record">
          <a-progress :percent="Number(record.riskLevel)" status="active" :strokeColor="getProgressColor(record.riskLevel)" />
</span>