useToggle

類別

工具

匯出大小

224 B

上次變更

5 天前

一個帶有實用功能的布林值切換器。

範例

原始碼

值：關閉

用法

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

<!-- caution: $event will be pass in -->
<button @click="toggleDark" />
<!-- recommended to do this -->
<button @click="toggleDark()" />

類型宣告

typescript

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]