话不多说，直接上代码
<template><divv-data-scroll="{target: 100speed: 1000}">100</div>
</template><script setup lang="ts">
import { DirectiveBinding } from 'vue';function dataScroll(el: HTMLElement, binding: DirectiveBinding) {// mounted 时，binding.oldValue 为 undefinedlet origin = binding.oldValue?.target || 0;let {target,speed} = binding.value;// 目标值与原值一样则不进行任何操作if (origin === target) return// 计算每次改变的值let difNumber = (target - origin) / speed * 10;// 恢复为原来的值，不恢复的话会闪一下el.innerText = origin;let timer = setInterval(() => {if (origin + difNumber < target) {origin += difNumber} else {origin = target;clearInterval(timer);}el.innerText = origin.toFixed(0);}, 10)
}const VDataScroll = {mounted(el: HTMLElement, binding: DirectiveBinding) {dataScroll(el, binding)},updated(el: HTMLElement, binding: DirectiveBinding) {dataScroll(el, binding)}
}
</script>
)
)
