vue中使用数字步进器

效果图

传入一个数值，从0加到该数值，通常用于页面刚加载时候的动态效果展示。制作了一个low的gif，看个大概意思。

数字增加.gif

我将其抽成了一个组件，各位直接拿即可。

子组件中

<template>
  <span>{{currentNum}}</span>
</template>

<script>
  export default {
    name: "numberGrow",
    props:{
      originNum:'',
      step:''
    },
    data(){
      return {
        timer:'',
        currentNum:''
      }
    },
    mounted(){
      this.numberGrow()
      this.timer = setInterval(()=>{
          this.numberGrow()
        },8000)  //每个一段时间刷新，可去
    },
    beforeDestroy(){
      clearInterval(this.timer)
    },
    methods:{
      numberGrow(){
        this.currentNum = 0;
        let start = 0;
        if(this.originNum&&this.originNum>0){
          let timer = setInterval(()=>{
            start += 1;
            if(start>this.step){
              clearInterval(timer)
              this.currentNum = this.originNum
            }else{
              this.currentNum += Math.floor(Number(this.originNum/this.step));
            }
          },50)
        }
      }
    },
  }
</script>

<style scoped>

</style>

父组件引用

<numberGrow v-if="latestMonthInfo.sum" :originNum="latestMonthInfo.sum" :step='30'></numberGrow>

关键属性解释

image.png

跟我一起，每天学习一个前端小技巧。祝各位周五不加班儿~