Skip to content

useClamp

反应式性地将一个值钳位在两个其他值之间。

¥Reactively clamp a value between two other values.

示例

min: max: value:0

用法

¥Usage

ts
import { useClamp } from '@vueuse/math'

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

你还可以传递 ref,当源引用更改时,返回的 computed 将更新:

¥You can also pass a ref and the returned computed will be updated when the source ref changes:

ts
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>

源代码

源代码示例文档

变更日志

No recent changes

VueUse 中文网 - 粤ICP备13048890号