vue实现数字从1递增到指定值

vue封装一个组件实现，一个从1递增到指定值，这个指定值是通过父组件传递过来的。

实现代码：

• 父组件

  <template>
    <div>
      <!-- 使用组件 -->
      <digit-dance :digit="100" />
    </div>
  </template>
  <script>
  // 导入组件
  import DigitDance from '@/views/components/DigitDance.vue'
  export default {
    components: {
      // 局部注册组件
      DigitDance
    }
  }
  </script>
  <style>
  
  </style>

• 子组件

  <template>
    <span>{{ number }}</span>
  </template>
  <script>
  export default {
    props: {
      digit: Number
    },
    data() {
      return {
        number: 0
      }
    },
    watch: {
      digit() {
        this.number = 0
        // 如果是0，不需要处理
        if (!this.digit) {
          return
        }
        // 动画总时长
        const duration = 2000
        if (this.digit <= 8) {
          const id2 = setInterval(() => {
            this.number++
            if (this.number === this.digit) {
              clearInterval(id2)
            }
          }, duration / this.digit)
          return
        }
        const start = duration * 0.6
        const end = duration * 0.4
        // 启动定时器
        const id = setInterval(() => {
          this.number++
  
          if (this.number === this.digit - 8) {
            clearInterval(id)
  
            const id2 = setInterval(() => {
              this.number++
              if (this.number === this.digit) {
                clearInterval(id2)
              }
            }, end / 8)
          }
        }, start / (this.digit - 8))
      }
    }
  }
  </script>
    <style></style>