跳到主要内容

useCounter

分类
导出大小
265 B
上次更改
7 个月前

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

演示

计数: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
} /** * 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
}

来源

源文件示例文档

贡献者

Anthony Fu
IlyaL
Anthony Fu
SerKo
Robin
泰科
leewakin
Rock070
iChengbo
Damien Roche
Alex Kozack

更新日志

v13.1.0
c1d6e - feat(shared): 确保返回类型存在 (#4659)
v12.8.0
7432f - feat(types): 废弃 MaybeRefMaybeRefOrGetter,转而使用 Vue 的原生类型 (#4636)
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)
v10.8.0
cf29c - 修复: 允许 delta 为负值 (#3650)
v10.3.0
6ae3a - 特性: initialValue 支持 ref (#3266)

根据 MIT 许可证发布。