使用 VueUse 构建一个支持暂停/重置的 CountUp 组件

张开发
• 2026/4/14 5:56:34 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

使用 VueUse 构建一个支持暂停/重置的 CountUp 组件
使用 VueUse 构建一个支持暂停/重置的 CountUp 组件告别臃肿的依赖，用组合式 API 实现完全可控的数字滚动动画在日常的前端开发中，数字滚动动画（CountUp）是一个非常常见的需求——从 0 增长到 100 万、实时更新的交易数据、统计看板的关键指标……一个平滑的数字动画能让页面瞬间“活”起来。社区中已经有不少现成的解决方案，比如vue-countup-v3。但它有一个明显的局限：只支持自动播放，无法提供暂停、重置等精细控制。如果你的业务需要用户手动启停动画（例如数据对比场景），或者需要根据某些状态重置计数器，这个库就无法满足。本文介绍如何利用 VueUse 的useRafFn从零构建一个功能更强大的CountUp组件。它不仅支持vue-countup-v3的全部特性，还额外提供了pause、resume、reset等命令式控制方法，并且完全基于 Vue 3 + TypeScript，零额外依赖。为什么不用useTransition？VueUse 提供了一个非常优雅的useTransition，可以轻松实现数值的过渡动画。但它是一个“声明式

更多文章