我们日常的开发任务也经常会碰到应用倒计时的场景,比如直播开播倒计时,发短信按键倒计时,投票结束倒计时,任务提交处理倒计时。在 Vue 添加倒计时功看起来简单,但能做到计时过程精准,效率高,代码精巧其实并不容易。本文推荐 5 款覆盖多种场景的 Vue 倒计时组件库,总有一款适合你。
- vue-awesome-countdown 倒计时组件 - 精准误差小,体积小有,支持按键倒计时
- vue-timer-hook 倒计时组件 - 模拟翻页倒计时,代码简洁,支持 Vue3
- Vue-countdown 倒计时组件 - 按键毫秒倒计时,支持 Vue 3
- Vue-circular-count-down-timer 倒计时组件 - 圆形动效进度条,有归零动画
- vue2-flip-countdown 倒计时组件 - 真实的翻页效果,动效优质
vue-awesome-countdown 倒计时组件 - 精准误差小,体积小有,支持按键倒计时
github:https://github.com/mlinquan/vue-awesome-countdown
计时精准,性能高校,有很实用的按键倒计时,很适合接受短信这种需要用户稍作等待的使用场景。
Vue awesome countdown 代码简单,丰富待方法和应对多种应用场景;高精准度,整个倒计时过程误差精准到1-3毫秒以内。体积也非常小巧,Gzip 压缩小于 2kb
vue-timer-hook 倒计时组件 - 模拟翻页倒计时,代码简洁,支持 Vue3
github:https://github.com/riderx/vue-timer-hook
vue-timer-hook 倒计时组件全面支持 Vue 3 ,拥有漂亮的 UI ,灰色系非常容易搭配。测试时,发现它的代码非常简洁,逻辑清晰,很容易上手。
useTimer
计时器(倒计时)useStopwatch
:秒表(倒计时)useTime
:时间(返回当前时间)
Vue-countdown 倒计时组件 - 按键毫秒倒计时,支持 Vue 3
github:https://github.com/fengyuanchen/vue-countdown
Vue-countdown 倒计时组件代码简洁,支持毫秒级倒计时,支持长时倒计时,支持按键倒计时。

调试前端太麻烦?
Vue-circular-count-down-timer 倒计时组件 - 圆形动效进度条,有归零动画
github:https://github.com/noorzaie/vue-circular-count-down-timer
Vue-circular-count-down 倒计时组件库你可以随意添加任何时间来进行倒计时,它自动帮你计算整个圆形旋转动效的长度,并且在结束时间时,有一个归零动效,视觉效果非常棒。
vue2-flip-countdown 倒计时组件 - 真实的翻页效果,动效优质
github:https://github.com/philipjkim/vue2-flip-countdown
flip-countdown 有非常真实的翻页,不仅有漂亮的阴影变化,还有翻页落下时的回弹效果。
- 基于 vue2.0 的活动倒计时组件
- 可以使用服务端当前时间
- 在倒计时开始或者结束的时候,可以自定义回调
倒计时组件库总结
本文介绍了 5 款倒计时组件,虽然可以避免我们再重复造轮子,但前端调试有时非常令人抓狂。如果不想处理前端问题,推荐使用卡拉云,卡拉云内置各类组件,无需懂任何前端,仅需拖拽即可快速生成。
这是用卡拉云搭建的数据库 CURD 后台管理系统,只需拖拽组件,即可在10分钟内完成搭建。
卡拉云是新一代低代码开发平台,与前端框架 Vue、React等相比,卡拉云的优势在于不用首先搭建开发环境,直接注册即可开始使用。开发者完全不用处理任何前端问题,只需简单拖拽,即可快速生成所需组件,可一键接入包括 MySQL 在内的常见数据库及 API,根据引导简单几步打通前后端,数周的开发时间,缩短至 1 小时。立即免费试用卡拉云。
扩展阅读: