useClamp

分类

@Math

导出大小

223 B

包

@vueuse/math

上次更改

3 个月前

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

演示

源码演练场 (beta)

最小值最大值值:0

用法

import { useClamp
 } from '@vueuse/math'

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

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

import { useClamp
 } from '@vueuse/math'

const number
 = shallowRef
(0)
const clamped
 = useClamp
(number
, 0, 10)

类型声明

/**
 * 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>