跳到主要内容

useClamp

分类
导出大小
223 B
@vueuse/math
上次更改
3 个月前

响应式地将一个值限制在另外两个值之间。

演示

最小值最大值值:0

用法

ts
import { 
useClamp
} from '@vueuse/math'
const
min
=
shallowRef
(0)
const
max
=
shallowRef
(10)
const
value
=
useClamp
(0,
min
,
max
)

你也可以传入一个 ref,当源 ref 改变时,返回的 computed 会随之更新。

ts
import { 
useClamp
} from '@vueuse/math'
const
number
=
shallowRef
(0)
const
clamped
=
useClamp
(
number
, 0, 10)

类型声明

ts
/**
 * Reactively clamp a value between two other values.
 *
 * @see https://vueuse.org.cn/useClamp
 * @param value number
 * @param min
 * @param max
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function 
useClamp
(
value
:
ReadonlyRefOrGetter
<number>,
min
:
MaybeRefOrGetter
<number>,
max
:
MaybeRefOrGetter
<number>,
):
ComputedRef
<number>
export declare function
useClamp
(
value
:
MaybeRefOrGetter
<number>,
min
:
MaybeRefOrGetter
<number>,
max
:
MaybeRefOrGetter
<number>,
):
Ref
<number>

来源

源码演示文档

贡献者

Anthony Fu
Anthony Fu
IlyaL
SerKo
ClemDee

更新日志

v13.6.0
d32f8 - refactor: 为所有纯函数添加 @__NO_SIDE_EFFECTS__ 注释 (#4907)
v12.8.0
7432f - feat(types): 废弃 MaybeRefMaybeRefOrGetter,转而使用 Vue 的原生类型 (#4636)
v12.3.0
59f75 - feat(toValue): 废弃 @vueuse/shared 中的 toValue,转而使用 Vue 的原生函数
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)

根据 MIT 许可证发布。