useClamp
響應式地將值限制在另外兩個值之間。
範例
最小值最大值值: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)
類型宣告
typescript
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>
原始碼
貢獻者
變更日誌
v12.8.0
on 3/5/2025v12.3.0
on 1/2/202559f75
- feat(toValue): 棄用來自 `@vueuse/shared` 的 `toValue`,改用 Vue 原生方法v12.0.0-beta.1
on 11/21/2024v10.0.0-beta.5
on 4/13/2023cb644
- refactor!: 移除 `isFunction` 和 `isString` 工具v10.0.0-beta.4
on 4/13/20234d757
- feat(types)!: 將 `MaybeComputedRef` 重新命名為 `MaybeRefOrGetter`0a72b
- feat(toValue): 將 `resolveUnref` 重新命名為 `toValue`v9.13.0
on 2/18/2023