【Ant design vue】Progress根据完成度自定义分段颜色

业务需求

当完成度<50%时，进度条显示红色；
当完成度>=50%且<90%时，进度条显示黄色；
当完成度>90%时，进度条显示绿色；

代码演示

思路：

1. 抽出方法：利用progress组件的strokeColor属性。通过判断已完成的分段百分比在哪个区间，就设置所需的颜色。
2. 抽出方法：利用progress组件的format，可以自定义进度条后面的文字格式

<div class="progress">
      A组:
      <a-progress
        :percent="dataSource.aTeamPercent"
        :strokeColor="getProgressColor(dataSource.aTeamPercent)"
        :format="percent => getProgressText(percent, dataSource.aTeamDone, dataSource.aTeamTotal)"
      />
      B组:
      <a-progress
        :percent="dataSource.bTeamPercent"
        :strokeColor="getProgressColor(dataSource.bTeamPercent)"
        :format="percent => getProgressText(percent, dataSource.bTeamDone, dataSource.bTeamTotal)"
      />
      C组:
      <a-progress
        :percent="dataSource.cTeamPercent"
        :strokeColor="getProgressColor(dataSource.cTeamPercent)"
        :format="percent => getProgressText(percent, dataSource.cTeamDone, dataSource.cTeamTotal)"
      />
    div>

// author By Emily酱 from CSDN
data () {
     
    return {
     
      dataSource: {
      // 数据源可以通过接口获取，自行改下就可
        aTeamDone: 10,
        aTeamTotal: 100,
        aTeamPercent: 10,
        bTeamDone: 60,
        bTeamTotal: 10,
        bTeamPercent: 60,
        cTeamDone: 95,
        cTeamTotal: 100,
        cTeamPercent: 95
      }
    }
  },
  methods: {
     
    // 进度条根据完成度自定义分段的颜色 -- 参数successPercent表示已完成的分段百分比
    getProgressColor (successPercent) {
     
      let color = ''
      if (successPercent < 50) {
     
        color = '#f50'
      } else if (successPercent >= 50 && successPercent < 90) {
     
        color = '#FF9900'
      } else if (successPercent >= 90) {
     
        color = '#87d068'
      }
      return color
    },
    // 自定义进度条的文字格式
    getProgressText (percent, done, total) {
     
      return `进度：${
       percent}% （已完成${
       done}个，未完成${
       total}个）`
    }
  }