dreamland/lib/GraceUI5/components/gui-number-animate.vue

<template>
	<text :style="{
		fontSize:fontSize, 
		fontWeight:fontWeight, 
		color:color, 
		lineHeight:lineHeight
	}">{{numAnimate}}</text>
</template>
<script>
export default{
	name  : "gui-number-animate",
	props : {
		num        : { type : Number,  default : 0 },
		stepNumber : { type : Number,  default : 50 },
		timer      : { type : Number,  default : 1000 },
		keepInt    : { type : Boolean, default : false },
		fontSize   : { type : String,  default : '28rpx' },
		color      : { type : String,  default : '#333333' },
		lineHeight : { type : String,  default : '50rpx' },
		fontWeight : { type : String,  default : '400' }
	},
	data() {
		return {
			numAnimate : 0,
			intervalId : null
		}
	},
	created:function(){
		let timer = this.timer / this.stepNumber;
		let step  = Math.floor((this.num / this.stepNumber) * 100) / 100;
		this.intervalId = setInterval(() => {
			// 正值 
			if(this.num >= 0){
				if(this.numAnimate >= this.num){
					this.numAnimate = this.num;
					clearInterval(this.intervalId);
					return;
				}
			}else{
				if(this.numAnimate <= this.num){
					this.numAnimate = this.num;
					clearInterval(this.intervalId);
					return;
				}
			}
			let  res = this.numAnimate + step;
			this.numAnimate = this.keepInt ? parseInt(res) : Math.floor(res * 100) / 100;
		}, timer);
	}
}
</script>
<style scoped>
</style>