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