vue 漸變 進度條 progress

廢話 很少少說 ，直接上代碼

新建文件 gradual-progress.vue

<!--
 * @Author: gfc
 * @Date: 2019-11-07 14:00:11
 * @LastEditors: gfc
 * @LastEditTime: 2019-11-13 10:24:44
 * @Description: cp 漸變式進度條
 eg:
 <cp-progress :percentage="progressnum" style="width:300px"></cp-progress>
 -->
<template>
  <div class="cp-progress-main">
    <div class="cp-progress-bg" :style="{ 'border-radius': bRadius+'px'}">
      <div class="cp-progress-bar"
        :style="{ width: getPercentage+'%' ,background:getGradient,height:strokeWidth+'px' ,'border-radius': bRadius+'px'}"></div>
    </div>
    <div class="cp-progress-text" :style="{ 'line-height': (strokeWidth+16)+'px'}">{{getPercentage}}%</div>
  </div>
</template>
<script>

export default {
  data () {
    return {

    }
  },
  computed: {
    // 經過比例 獲取 百分比
    getPercentage () {
      if (this.percentage < 0) {
        return 0
      } else if (this.percentage > 1) {
        return 100
      } else {
        // console.log(this.percentage)
        return parseInt((this.percentage + 0.000006) * 100)
      }
    },
    // 獲取 進度條顏色對象
    getGradient () {
      let linecolor = this.getColorItem(this.percentage)
      if (linecolor) {
        return 'linear-gradient(90deg,' + linecolor.s + ',' + linecolor.e + ')'
      } else {
        return ''
      }
    }
  },
  methods: {
    // 根據進度 獲取顏色數組
    getColorItem (p) {
      let mp = this.getPercentage
      for (let sub of this.linearColors) {
        if (!sub.ef && mp <= sub.v) {
          return sub
        } else if (sub.ef && mp < sub.v) {
          return sub
        }
      }
      return null
    }
  },
  props: {
    // 設置 進度條的 弧度
    bRadius: {
      type: Number,
      default: 4
    },
    textInside: {
      type: Number,
      default: 100
    },
    // 進度條的高度 就是粗細度
    strokeWidth: {
      type: Number,
      default: 8
    },
    // 進度條 的百分比 [0-1] 的小數
    percentage: {
      type: Number,
      default: 0
    },
    // 進度條 每一個階段的 顏色組
    linearColors: {
      type: Array,
      default: function () {
        return [{ v: 25, s: '#F7564A', e: '#F7564A' }, { v: 50, s: '#F7564A', e: '#F7E04B' }, { v: 100, s: '#F7E04B', e: '#25CCDB', ef: true }, { v: 100, s: '#25CCDB', e: '#25CCDB' }]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.cp-progress-main {
  display: flex;
  .cp-progress-bg {
    width: 50px;
    background: #eaedf4;
    flex: 1;
    margin: 8px 0;
    .cp-progress-bar {
      transition: width 1s;
    }
  }
  .cp-progress-text {
    width: 50px;
    font-size: 12px;
    font-weight: 400;
    color: #333333;

    margin-left: 10px;
  }
}
</style>

 

使用方法：

 <cp-progress :percentage="progressnum" style="width:300px"></cp-progress>

 

progressnum ： [0-1]

不一樣的階段 不一樣顏色進行設置：已經默認了一組顏色

linearColors

效果：