vue-timer-hook基于vue3的倒计时组件
源码介绍
vue-timer-hook是一款基于vue3的倒计时组件。vue-timer-hook组件提供了倒计时、秒表计时和显示当前时间三种模式。
Timer Demo {{timer.isRunning ? 'Running' : 'Not running'}} 参数 values Stopwatch Demo {{stopwatch.isRunning ? 'Running' : 'Not running'}} 参数 values Current Time Demo 参数 values简要教程
使用方法
安装
// npm
npm install vue-timer-hook
// yarn
yarn add vue-timer-hook
使用
倒计时-useTimer
vue-timer-hook
参数
类型
是否必须
描述
expiryTimestamp
number(timestamp)
是
倒计时时长
autoStart
boolean
否
是否自动开始倒计时
值
类型
描述
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
参数
类型
是否必须
描述
offsetTimestamp
number(timestamp)
是
设置秒表的初始时间，具体看下方代码
autoStart
boolean
否
是否自动开始倒计时
offsetTimestamp示例代码：
const stopwatchOffset = new Date();
// 实则秒表的初始时间为：0:0:5:0
stopwatchOffset.setSeconds(stopwatchOffset.getSeconds() + 300);
值
类型
描述
seconds
number
秒数
minutes
number
分钟数
hours
number
小时数
days
number
天数
isRunning
boolean
标识秒表是否运行
pause
function
秒表暂停的回调函数
start
function
秒表在开始和暂停的调用该函数
reset
function
调用该函数秒表被重置为
0:0:0:0显示时间-useTime
vue-timer-hook
参数
类型
是否必须
描述
format
string
否
可使用
12-hour将时间格式设置为12小时制
值
类型
描述
seconds
number
秒数
minutes
number
分钟数
hours
number
小时数
ampm
string
12-hour标识12小时制
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » vue-timer-hook基于vue3的倒计时组件
发表评论 取消回复