layui 数字步进器_vue中使用数字步进器

效果图

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

数字增加.gif

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

子组件中

{{currentNum}}

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)

}

}

},

}

父组件引用

关键属性解释

image.png

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