useCountdown

类别

Time

导出大小

594 B

最近修改

2 days ago

以秒为单位的响应式倒计时器。

🌐 Reactive countdown timer in seconds.

示例

源代码在线运行

🚀

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