下面的组件代码!
<template> <i class="num-content">{{num}}</i></template><script>export default { props: { number: { type: Number, default: 0 }, // 结果值 during: { type: Number, default: 1 }, // 动画时长 plusFlag: { type: Boolean, default: false } // 动画开关 }, data(){ return{ num: 0, timerId: '', } } , methods: { startPlus() { /** setInterval有时间间隔最小值,为10ms */ var step = (this.number / 1000 / this.during) * 10; if(step < 1){ step = 1; } this.timerId = setInterval(() => { if(this.num + step >= this.number) { this.num = this.number; clearInterval(this.timerId); }else { this.num += step; } }, this.during*1000/this.number); } }, watch: { plusFlag(val){ if(val) { this.startPlus(); } } }}</script>
直接引入父组件注册后就可以用了哦