其实还是很简单的,直接上代码
<template>
<div class="number-grow-warp">
<span ref="numberGrow" class="number-grow">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 duration = _this.time * 300; // 转换为毫秒
let start = 0;
let startTime = performance.now(); // 获取当前时间
let t = requestAnimationFrame(function animate(time) {
let elapsed = time - startTime; // 计算已经过去的时间
start = Math.floor((_this.value * elapsed) / duration); // 根据时间计算当前值
if (start >= _this.value) {
start = _this.value;
cancelAnimationFrame(t);
}
ele.innerHTML = start.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
t = requestAnimationFrame(animate);
});
}
},
mounted() {
this.numberGrow(this.$refs.numberGrow);
}
};
</script>
<style>
.number-grow-warp {
transform: translateZ(0);
}
</style>
引用
<number-grow :value="720000"></number-grow>
直接就搞定!!!!