模拟vue-element-admin实现首页数字的滚动加载

其实还是很简单的，直接上代码

<template>
  <div class="number-grow-warp">
    <span ref="numberGrow" class="number-grow">0</span>
  </div>
</template>

<script>
export default {
  props: {
    time: {
      type: Number,
      default: 2
    },
    value: {
      type: Number,
      default: 720000
    }
  },
  methods: {
    numberGrow(ele) {
      let _this = this;
      let duration = _this.time * 300; // 转换为毫秒
      let start = 0;
      let startTime = performance.now(); // 获取当前时间
      let t = requestAnimationFrame(function animate(time) {
        let elapsed = time - startTime; // 计算已经过去的时间
        start = Math.floor((_this.value * elapsed) / duration); // 根据时间计算当前值

        if (start >= _this.value) {
          start = _this.value;
          cancelAnimationFrame(t);
        }
        ele.innerHTML = start.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
        t = requestAnimationFrame(animate);
      });
    }
  },
  mounted() {
    this.numberGrow(this.$refs.numberGrow);
  }
};
</script>

<style>
.number-grow-warp {
  transform: translateZ(0);
}
</style>

引用

<number-grow :value="720000"></number-grow>

直接就搞定！！！！