useCountdown

useIntervalFn 的封装器，提供倒计时器。

¥Wrapper for useIntervalFn that provides a countdown timer.

示例

源代码演练场

🚀

Rocket launch in 5 seconds

Countdown:

用法

¥Usage

import { useCountdown } from '@vueuse/core'

const countdownSeconds = 5
const { remaining, start, stop, pause, resume } = useCountdown(countdownSeconds, {
  onComplete() {

  },
  onTick() {

  }
})

你可以使用 ref 来更改初始倒计时。start() 和 resume() 还接受下一次倒计时的新倒计时值。

¥You can use a ref to change the initial countdown. start() and resume() also accept a new countdown value for the next countdown.

import { useCountdown } from '@vueuse/core'
import { shallowRef } from 'vue'

const countdown = shallowRef(5)
const { start, reset } = useCountdown(countdown, {
})

// change the countdown value
countdown.value = 10

// start a new countdown with 2 seconds
start(2)

// reset the countdown to 4, but do not start it
reset(4)

// start the countdown with the current value of `countdown`
start()