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

转载已于 2022-11-24 08:59:15 修改 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/qq_42203909/article/details/107643467

文章标签：

#vue.js

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

前端专栏收录该内容

3 篇文章

订阅专栏

本文展示了如何通过JavaScript实现一个进度条，根据给定的完成度百分比动态设置不同颜色段。通过`getProgressColor`函数，可以根据风险等级自动调整strokeColor属性。实例代码和效果图片帮助开发者快速理解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

效果图

在这里插入图片描述