Skip to content

useCountdown

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

¥Wrapper for useIntervalFn that provides a countdown timer.

示例

🚀
Rocket launch in 5 seconds
Countdown:

用法

¥Usage

js
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.

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

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()