vue实现数字滚动效果

vue实现数字滚动效果

代码如下（示例）：

数字滚动组件num.vue

<template>
  <div
    ref="numberRoll"
    :data-time="time"
    class="number-roll"
    :data-value="num"
  ></div>
</template>
<script>
export default {
  name: "Num",
  props: {
    num: {
      type: Number,
      default: 720000,
    },
    time: {
      type: Number,
      default: 0.5,
    },
  },
  data() {
    return {
      data: null,
    };
  },
  mounted() {
    this.numberRoll(this.$refs.numberRoll);
  },
  methods: {
    numberRoll(ele) {
      let _this = this;
      let step = (_this.num * 10) / (_this.time * 1000);
      let current = 0;
      let start = 0;
      let t = setInterval(function () {
        start += step;
        if (start > _this.num) {
          clearInterval(t);
          start = _this.num;
          t = null;
        }
        if (current === start) {
          return;
        }
        current = start;
        ele.innerHTML = current
          .toFixed(0)
          .toString()
          .replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,");
      }, 10);
    },
  },
};
</script>
<style lang="scss" scoped>
// 数字样式自定义
</style>