useToggle

类别

Utilities

导出体积

208 B

上次更改

2 weeks ago

一个带有实用功能的布尔切换器。

示例

源码 playground (beta)

值：关

用法

import { useToggle
 } from '@vueuse/core'

const [value
, toggle
] = useToggle
()

当你传入一个 ref 时，useToggle 将返回一个简单的切换函数：

import { useDark
, useToggle
 } from '@vueuse/core'

const isDark
 = useDark
()
const toggleDark
 = useToggle
(isDark
)

注意：请注意，切换函数接受第一个参数作为覆盖值。你可能希望避免直接将函数传递给模板中的事件，因为事件对象将被传入。

html

<!-- 注意：$event 将被传入 -->
<button @click="toggleDark" />
<!-- 推荐这样做 -->
<button @click="toggleDark()" />

类型声明

export type ToggleFn
 = (value
?: boolean) => void
export type UseToggleReturn
 = [ShallowRef
<boolean>, ToggleFn
] | ToggleFn

export interface UseToggleOptions
<Truthy
, Falsy
> {
  truthyValue
?: MaybeRefOrGetter
<Truthy
>
  falsyValue
?: MaybeRefOrGetter
<Falsy
>
}
export declare function useToggle
<Truthy
, Falsy
, T
 = Truthy
 | Falsy
>(
  initialValue
: Ref
<T
>,
  options
?: UseToggleOptions
<Truthy
, Falsy
>,
): (value
?: T
) => T

export declare function useToggle
<
  Truthy
 = true,
  Falsy
 = false,
  T
 = Truthy
 | Falsy
,
>(
  initialValue
?: T
,
  options
?: UseToggleOptions
<Truthy
, Falsy
>,
): [ShallowRef
<T
>, (value
?: T
) => T
]