useClamp

カテゴリ

@Math

エクスポートサイズ

214 B

パッケージ

@vueuse/math

最終変更

先週

リアクティブに値を他の2つの値の間にクランプします。

デモ

ソース

最小値最大値値:0

使用方法

import { useClamp } from '@vueuse/math'

const min = ref(0)
const max = ref(10)
const value = useClamp(0, min, max)

refを渡すこともでき、ソースrefが変更されると返されたcomputedが更新されます。

import { useClamp } from '@vueuse/math'

const number = ref(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>