MoreHook

Appearance

Return to top
On this page

useToggle

用于在N个状态值间切换

Demo

source

state: 1

Usage

html
<template>
  <div>
    <p>state: {{ state }}</p>

    <button @click="useToggleState">useToggleState</button>
    <button @click="useSet1">useSet1</button>
    <button @click="useSet2">useSet2</button>
    <button @click="useSet3">useSet3</button>
  </div>
</template>

<script lang="ts" setup>
import { useToggle } from '@morehook/core'

const [state, [useToggleState, useSet1, useSet2, useSet3]] = useToggle(1, 2, 3)
</script>

Type Declarations

typescript
type State = string | number | boolean | undefined
type RefState = Ref<State>
type Fn = (v?: any) => void
type Actions = Fn[]
/**
 * 用于在N个状态值间切换
 * @param args 多个数据源
 * @return [0]: 当前选中值  [1]: [toggle(), ...activeState()] (操作当前值)
 */
export declare function useToggle<T extends State, U extends RefState>(
  ...args: (T | U)[]
): [U, Actions]

Source

Source • Demo • Docs