useCountdown

类别

Time

导出体积

565 B

上次更改

7 months ago

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

示例

源码 playground (beta)

🚀

Rocket launch in 5 seconds

Countdown:

使用方法

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
, {
})

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

类型声明

显示类型声明

export interface UseCountdownOptions {
  /**
   *  Interval for the countdown in milliseconds. Default is 1000ms.
   */
  interval
?: MaybeRefOrGetter
<number>
  /**
   * Callback function called when the countdown reaches 0.
   */
  onComplete
?: () => void
  /**
   * Callback function called on each tick of the countdown.
   */
  onTick
?: () => void
  /**
   * Start the countdown immediately
   *
   * @default false
   */
  immediate
?: boolean
}
export interface UseCountdownReturn extends Pausable {
  /**
   * Current countdown value.
   */
  remaining
: ShallowRef
<number>
  /**
   * Resets the countdown and repeatsLeft to their initial values.
   */
  reset
: (countdown
?: MaybeRefOrGetter
<number>) => void
  /**
   * Stops the countdown and resets its state.
   */
  stop
: () => void
  /**
   * Reset the countdown and start it again.
   */
  start
: (countdown
?: MaybeRefOrGetter
<number>) => void
}
/**
 * Wrapper for `useIntervalFn` that provides a countdown timer in seconds.
 *
 * @param initialCountdown
 * @param options
 *
 * @see https://vueuse.org/useCountdown
 */
export declare function useCountdown
(
  initialCountdown
: MaybeRefOrGetter
<number>,
  options
?: UseCountdownOptions,
): UseCountdownReturn