useCounter

分类

实用工具

导出大小

265 B

上次更改

7 个月前

带有实用函数的基本计数器。

演示

源代码演练场 (beta)

计数：0

基本用法

import { useCounter
 } from '@vueuse/core'

const { count
, inc
, dec
, set
, reset
 } = useCounter
()

带选项的用法

import { useCounter
 } from '@vueuse/core'

const { count
, inc
, dec
, set
, reset
 } = useCounter
(1, { min
: 0, max
: 16 })

类型声明

显示类型声明

export interface UseCounterOptions {
  min
?: number
  max
?: number
}
export interface UseCounterReturn {
  /**
   * The current value of the counter.
   */
  readonly count
: Readonly
<Ref
<number>>
  /**
   * Increment the counter.
   *
   * @param {number} [delta=1] The number to increment.
   */
  inc
: (delta
?: number) => void
  /**
   * Decrement the counter.
   *
   * @param {number} [delta=1] The number to decrement.
   */
  dec
: (delta
?: number) => void
  /**
   * Get the current value of the counter.
   */
  get
: () => number
  /**
   * Set the counter to a new value.
   *
   * @param val The new value of the counter.
   */
  set
: (val
: number) => void
  /**
   * Reset the counter to an initial value.
   */
  reset
: (val
?: number) => number
}
/**
 * Basic counter with utility functions.
 *
 * @see https://vueuse.org.cn/useCounter
 * @param [initialValue]
 * @param options
 */
export declare function useCounter
(
  initialValue
?: MaybeRef
<number>,
  options
?: UseCounterOptions,
): {
  count
: Readonly
<
    | Ref
<number, number>
    | ShallowRef
<number, number>
    | WritableComputedRef
<number, number>
  >
  inc
: (delta
?: number) => number
  dec
: (delta
?: number) => number
  get
: () => number
  set
: (val
: number) => number
  reset
: (val
?: number) => number
}