useToggle

布尔值切换Hook

前置依赖

依赖参数

参数名	类型	说明
deps.vue.ref	<T>(value: T) => Ref<T>	Vue的ref函数

环境要求

• Vue 3: 使用Composition API

npm install vue@^3.0.0

函数签名

interface UseToggleDeps {
  vue: {
    ref: <T>(value: T) => Ref<T>
  }
}

interface UseToggleReturn {
  value: Ref<boolean>
  toggle: () => void
  setTrue: () => void
  setFalse: () => void
  setValue: (val: boolean) => void
}

function useToggle(
  initialValue?: boolean,
  deps: UseToggleDeps
): UseToggleReturn

参数

参数名	类型	必填	说明
initialValue	boolean	否	初始值，默认为 false
deps	UseToggleDeps	是	环境依赖

返回值

属性名	类型	说明
value	Ref<boolean>	当前布尔值状态
toggle	() => void	切换状态
setTrue	() => void	设置为true
setFalse	() => void	设置为false
setValue	(val: boolean) => void	设置指定值

工作原理

1. 使用 ref 创建响应式布尔值
2. toggle 方法反转当前值
3. setTrue/setFalse 直接设置固定值
4. setValue 可设置任意布尔值
5. 所有修改都会触发响应式更新

使用示例

基本用法

import { ref } from 'vue'
import { useToggle } from 'zcw-shared/hooks/useToggle'

const { value, toggle, setTrue, setFalse } = useToggle(false, {
  vue: { ref }
})

console.log(value.value) // false
toggle()                 // true
toggle()                 // false
setTrue()               // true
setFalse()              // false

模态框控制

<script setup>
import { ref } from 'vue'
import { useToggle } from 'zcw-shared/hooks/useToggle'

const { 
  value: isModalOpen, 
  setTrue: openModal, 
  setFalse: closeModal 
} = useToggle(false, { vue: { ref } })
</script>

<template>
  <button @click="openModal">打开模态框</button>
  
  <Modal v-if="isModalOpen" @close="closeModal">
    <!-- 模态框内容 -->
  </Modal>
</template>

侧边栏折叠

const { 
  value: isSidebarCollapsed, 
  toggle: toggleSidebar 
} = useToggle(false, { vue: { ref } })

// 点击切换
toggleSidebar()