useToggle

useToggle 可用于管理布尔值状态，还可以用于管理任何类型的状态的真假值

基础用法

<template>
  <div>
    <h3>Example1</h3>
    <div>
      <p>Value: {{ value ? "On" : "Off" }}</p>
      <button @click="toggle()">Toggle</button>
    </div>
    <h3>Example2</h3>
    <div>
      <p>Value2: {{ value2 }}</p>
      <button @click="toggle2()">Toggle</button>
    </div>
    <h3>Example3</h3>
    <div>
      <p>Value3: {{ value3 }}</p>
      <button @click="toggle3(false)">No</button>
      <button @click="toggle3(true)">Yes</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useToggle } from "hooks-vue3";
const [value, toggle] = useToggle(false);

const [value2, toggle2] = useToggle(true, {
  true: "Yes",
  false: "No",
});
const [value3, toggle3] = useToggle(true, {
  true: "Yes",
  false: "No",
});
</script>

API

const [value, toggle] = useToggle(false);

参数TS类型

import type { ComputedRef } from 'vue';

type UseToggleState<T> = T | (() => T);

export interface UseToggleOptions<U, S> {
  true?: UseToggleState<U>;
  false?: UseToggleState<S>;
}

function useToggle<U, S>(
  initialValue?: UseToggleState<boolean>,
  options?: UseToggleOptions<U, S>,
): [ComputedRef<U | boolean | S>, (value?: boolean) => void]