useCountdown

カウントダウンタイマーを提供する useIntervalFn のラッパー。

使用法

import { useCountdown } from '@vueuse/core'

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

  },
  onTick() {

  }
})

初期のカウントダウンを変更するために ref を使用できます。 start() と resume() は次のカウントダウンのために新しいカウントダウン値を受け取ることもできます。

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

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

// カウントダウンの値を変更
countdown.value = 10

// 2秒で新しいカウントダウンを開始
start(2)

// カウントダウンを4にリセットするが、開始はしない
reset(4)

// 現在の `countdown` の値でカウントダウンを開始
start()