Vue 实现数字滚动效果

效果就是显示某个数值不是直接显示，而是从0开始滚动，直到为那个数值时停止滚动
1、新建数字滚动组件：test.vue文件

<template>
	<div class="number-grow-warp">
		<span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">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 step = (_this.value * 10) / (_this.time * 1000)
      let current = 0
      let start = 0
      let t = setInterval(function () {
    
    
        start += step
        if (start > _this.value) {
    
    
          clearInterval(t)
          start = _this.value
          t = null
        }
        if (current === start) {
    
    
          return
        }
        current = start
        ele.innerHTML = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')
      }, 10)
    }
  },
  mounted () {
    
    
    this.numberGrow(this.$refs.numberGrow)
  }
}
</script>
 
<style>
.number-grow-warp{
    
    
  transform: translateZ(0);
}
.number-grow {
    
    
  font-family: Arial-BoldMT;
  font-size: 64px;
  color: #ffaf00;
  letter-spacing: 2.67px;
  margin:110px 0 20px;
  display: block;
  line-height:64px;
}
</style>

2、页面使用
先引入组件

然后注册组件

export default {
    
    
	components: {
    
    
		NumberGrow
	}
};

使用

<NumberGrow :value="720000"></NumberGrow>