vue-timer-hook是一款基于vue3的倒计时组件。vue-timer-hook组件提供了倒计时、秒表计时和显示当前时间三种模式。
使用方法
安装
// npm
npm install vue-timer-hook
// yarn
yarn add vue-timer-hook
使用
倒计时-useTimer
vue-timer-hook
Timer Demo
{{timer.days}}:{{timer.hours}}:{{timer.minutes}}:{{timer.seconds}}
{{timer.isRunning ? 'Running' : 'Not running'}}
参数
| 参数 | 类型 | 是否必须 | 描述 |
| 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
vue-timer-hook
Stopwatch Demo
{{stopwatch.days}}:{{stopwatch.hours}}:{{stopwatch.minutes}}:{{stopwatch.seconds}}
{{stopwatch.isRunning ? 'Running' : 'Not running'}}
参数
| 参数 | 类型 | 是否必须 | 描述 |
| 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
vue-timer-hook
Current Time Demo
{{time.hours}}:{{time.minutes}}:{{time.seconds}}{{time.ampm}}
参数
| 参数 | 类型 | 是否必须 | 描述 |
| format | string | 否 | 可使用12-hour将时间格式设置为12小时制 |
values
| 值 | 类型 | 描述 |
| seconds | number | 秒数 |
| minutes | number | 分钟数 |
| hours | number | 小时数 |
| ampm | string | 12-hour标识12小时制 |
