Skip to content

useCounter

类别
导出体积
265 B
上次更改
5 months ago

基础计数器,带有工具函数。

示例

计数:0

基本用法

ts
import { 
useCounter
} from '@vueuse/core'
const {
count
,
inc
,
dec
,
set
,
reset
} =
useCounter
()

带有选项的用法

ts
import { 
useCounter
} from '@vueuse/core'
const {
count
,
inc
,
dec
,
set
,
reset
} =
useCounter
(1, {
min
: 0,
max
: 16 })

类型声明

显示类型声明
ts
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
} /** * 基础计数器,带有工具函数。 * * @see https://vueuse.org/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
}

源码

源码演示文档

贡献者

Anthony Fu
一纸忘忧
IlyaL
Anthony Fu
SerKo
Robin
Tycho
leewakin
Rock070
iChengbo
Damien Roche
Alex Kozack

更新日志

c1d6e - feat(shared): ensure return types exists (#4659)
7432f - feat(types): deprecate MaybeRef and MaybeRefOrGetter in favor of Vue's native (#4636)
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
cf29c - fix: allow delta to be negative (#3650)
6ae3a - feat: initialValue support ref (#3266)