Skip to content

useClamp

Category
Export Size
235 B
Package
@vueuse/math
Last Changed
last month

在两个其他值之间响应式地夹取一个值。

Demo

min: max: value: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)

Type Declarations

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>

Source

SourceDemoDocs

Contributors

Anthony Fu
丶远方
Anthony Fu
IlyaL
ClemDee

Changelog

7432f - feat(types): deprecate MaybeRef and MaybeRefOrGetter in favor of Vue's native (#4636)
59f75 - feat(toValue): deprecate toValue from @vueuse/shared in favor of Vue's native
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
cb644 - refactor!: remove isFunction and isString utils
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
0a72b - feat(toValue): rename resolveUnref to toValue

Released under the MIT License.