useCountdown

▸ useCountdown(defaultOptions?): UseCountdownResult

使用倒计时钩子函数

参数

Name	Type	Description
defaultOptions?	CountdownConfig	倒计时参数

返回值

UseCountdownResult

包含 start, stop, onEnd 函数和倒计时结果的对象

示例

// 创建倒计时钩子
const countdown = useCountdown({
  duration: 60,
  precision: 'seconds',
})

// 倒计时默认值
console.log(countdown.seconds) // 60

// 监听倒计时变化
watchEffect(() => {
  console.log(
    `${countdown.days}天 ${countdown.hours}:${countdown.minutes}:${countdown.seconds}::${countdown.milliseconds}`
  )
})

// 设置倒计时结束回调
onEnd(() => {
  console.log('倒计时结束')
})

// 组件挂载时开始倒计时
onMounted(() => {
  // 开始倒计时
  countdown.start()

  // 开始倒计时，覆盖参数
  countdown.start({duration: 60, precision: 'seconds'}) // 开始 60 秒的倒计时，精度为秒
  countdown.start({endAt: dayjs().add(1, 'minute'), precision: 'seconds'}) // 截止时间为当前时间后 1 分钟，精度为秒
  countdown.start({duration: 5, precision: 'milliseconds'}) // 开始 5 秒的倒计时，精度为毫秒
  countdown.start({duration: 10, precision: 'seconds', now: serverTime}) // 开始 10 秒的倒计时，当前时间为服务器时间
})

// 组件卸载时停止倒计时
onUnmounted(() => {
  countdown.stop()
})

源码

use-countdown.js