s-count-to 数字过渡动画组件

<template>
  <CountTo
    :start-val="startVal"
    :end-val="endVal"
    :duration="duration"
    :decimals="decimals"
  />
</template>

<script>
// 数组滚动动画
import CountTo from 'vue-count-to'
// 外部只需要传 end 就可以

export default {
  name: 'SCountTo',

  components: {
    CountTo,
  },

  props: {
    start: {
      type: [String, Number],
      default: 0
    },
    end: {
      type: [String, Number],
      default: 2021
    },
    // 小数位
    decimals: {
      type: Number,
      default: 0
    },
    duration: {
      type: Number,
      default: 1000
    },
  },

  data () {
    return {
      startVal: 0,
      endVal: 0,
    }
  },

  watch: {
    // 动态赋值的动画处理
    end (newVal, oldVal) {
      this.startVal = oldVal
      this.endVal = newVal
    },
  },

  mounted () {
    this.startVal = this.start
    this.endVal = this.end
  },
}
</script>