跳到主要內容

useClamp

類別
導出大小
235 B
套件
@vueuse/math
最後更新
5 天前

響應式地將值限制在另外兩個值之間。

範例

最小值最大值值: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>

原始碼

SourceDemoDocs

貢獻者

Anthony Fu
Anthony Fu
IlyaL
ClemDee

變更日誌

v12.8.0 on 3/5/2025
7432f - feat(types): 棄用 `MaybeRef` 和 `MaybeRefOrGetter`,改用 Vue 原生方法 (#4636)
v12.3.0 on 1/2/2025
59f75 - feat(toValue): 棄用來自 `@vueuse/shared` 的 `toValue`,改用 Vue 原生方法
v12.0.0-beta.1 on 11/21/2024
0a9ed - feat!: 移除 Vue 2 支援,最佳化 bundle 並清理 (#4349)
v10.0.0-beta.5 on 4/13/2023
cb644 - refactor!: 移除 `isFunction` 和 `isString` 工具
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: 將 `MaybeComputedRef` 重新命名為 `MaybeRefOrGetter`
0a72b - feat(toValue): 將 `resolveUnref` 重新命名為 `toValue`
v9.13.0 on 2/18/2023
08a07 - feat: composable computed 用法改進 (#2696)

以 MIT 授權條款發布。