useClamp

类别

@Math

导出体积

223 B

依赖包

@vueuse/math

上次更改

7 minutes ago

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

示例

源码playground (beta)

min: max: value:0

用法

import { useClamp } from '@vueuse/math'

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

可写的 Ref

当你传入一个可变的 ref 时，返回的值是一个可写的计算属性，在设置值时会进行夹取：

import { useClamp } from '@vueuse/math'

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

clamped.value = 15 // clamped.value 将被夹取为 10
clamped.value = -5 // clamped.value 将被夹取为 0

只读模式

当你传入一个 getter 函数或只读的 ref 时，返回的值将是一个只读的计算属性：

import { useClamp } from '@vueuse/math'

const value = ref(5)
const clamped = useClamp(() => value.value * 2, 0, 10)

// clamped.value 是根据 getter 计算出来的

响应式边界

所有参数（value、min、max）都可以是响应式的：

import { useClamp } from '@vueuse/math'

const value = shallowRef(5)
const min = shallowRef(0)
const max = shallowRef(10)

const clamped = useClamp(value, min, max)

max.value = 3 // clamped.value 会自动变成 3

类型声明

/**
 * Reactively clamp a value between two other values.
 *
 * @see https://vueuse.org/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>

源码

源码 • 演示 • 文档

贡献者

一纸忘忧

更新日志

没有最近的更新日志