vue-timer-hook基于vue3的倒计时组件


源码介绍

简要教程

vue-timer-hook是一款基于vue3的倒计时组件。vue-timer-hook组件提供了倒计时、秒表计时和显示当前时间三种模式。

使用方法

安装
// npm        
npm install vue-timer-hook
// yarn
yarn add vue-timer-hook
      
使用

倒计时-useTimer




      

参数

参数 类型 是否必须 描述
expiryTimestamp number(timestamp) 倒计时时长
autoStart boolean 是否自动开始倒计时

values

类型 描述
seconds number 秒数
minutes number 分钟数
hours number 小时数
days number 天数
isRunning boolean 标识倒计时器是否运行
pause function 倒计时器暂停的回调函数
start function 倒计时器在暂停后,如果调用该函数,将从原来设定的时间开始继续倒计时
resume function 倒计时器在暂停后,如果调用该函数,将从剩余的时间开始继续倒计时
restart function 调用该函数倒计时器重新开始倒计时。接收2个参数:expiryTimestamp-新的倒计时时间;autoStart-是否自动开始倒计时

秒表计时-useStopwatch



       
    

参数

参数 类型 是否必须 描述
offsetTimestamp number(timestamp) 设置秒表的初始时间,具体看下方代码
autoStart boolean 是否自动开始倒计时

offsetTimestamp示例代码:

const stopwatchOffset = new Date();
// 实则秒表的初始时间为:0:0:5:0
stopwatchOffset.setSeconds(stopwatchOffset.getSeconds() + 300);        
    

values

类型 描述
seconds number 秒数
minutes number 分钟数
hours number 小时数
days number 天数
isRunning boolean 标识秒表是否运行
pause function 秒表暂停的回调函数
start function 秒表在开始和暂停的调用该函数
reset function 调用该函数秒表被重置为0:0:0:0

显示时间-useTime



        
    

参数

参数 类型 是否必须 描述
format string 可使用12-hour将时间格式设置为12小时制

values

类型 描述
seconds number 秒数
minutes number 分钟数
hours number 小时数
ampm string 12-hour标识12小时制

github网址:https://github.com/riderx/vue-timer-hook



点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部