vue实现多个进度条循环自增长动效，定时器实现自动变化的进度条组件

简单概述下实现效果，是一个排行榜多个进度条需要一个自增长的动效，通过循环进度条组件定时器实现自增长。

效果如下：

代码如下：

<template>
  <div class="line">
    <div
      class="proportion"
      :style="`width: ${percent}%;`"
    ></div>
  </div>
</template>

<script>
export default {
  name: 'Progress', //进度条
  props: {
    //初始值
    startValue: {
      type: Number,
      default: 0,
    },
    //结束值
    endValue: {
      type: Number,
      default: 100,
    },
    //动画时间
    duration: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      percent: 0,
    }
  },
  mounted() {
    this.percent = this.startValue >= this.endValue ? this.endValue : this.startValue
    this.progress()
  },
  methods: {
    progress(){
      const that = this
      let progress = this.startValue
      const endValue = this.endValue
      let time = this.duration * 1000 / (endValue - progress) //根据传入时间计算执行时间
      if(progress >= endValue) {
        progress = endValue
      }
      let clearInt = setInterval(function(){
        progress++
        if(progress >= endValue){
          progress = endValue
          clearInterval(clearInt);
        }
        that.percent = progress
      },time)
    },
  },
}
</script>

<style lang="less" scoped>
.line {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: #f5f5f5;
  position: relative;
  .proportion {
    border-radius: 10px;
    background: #00d0a2;
    height: 100%;
    position: absolute;
  }
}
</style>

引入：

<div v-for="item in list" :key="item.key">
    <Progress
        style="height: 20px;"
        :startValue="0"
        :endValue="item.max"
        :duration="1"
    ></Progress>
</div>

注意：！！！

在for循环进度条组件时 需要把key设置成随机数，不然重新请求接口时key值是不变的，vue的diff算法是不会更新这个子组件也就不会触发子组件的生命周期，就无法重新执行动效了。