Hamburger 折叠按钮

菜单折叠按钮组件，用于控制侧边栏的展开和收起。

🎯 在线体验：登录 https://vue.youlai.tech 后，点击左上角的折叠按钮即可收起/展开侧边栏。

功能特性

• 🔄 切换状态 - 点击切换侧边栏展开/收起状态
• 🎨 动画效果 - 图标旋转动画
• 📱 响应式 - 移动端自动适配

基础用法

组件已集成在布局中，无需手动引入：

<template>
  <div class="navbar">
    <Hamburger :is-active="isCollapse" @toggle-click="toggleSidebar" />
  </div>
</template>

<script setup lang="ts">
import { useAppStore } from '@/store'

const appStore = useAppStore()
const isCollapse = computed(() => appStore.sidebar.isCollapse)

const toggleSidebar = () => {
  appStore.toggleSidebar()
}
</script>

API

Props

属性	类型	默认值	说明
isActive	boolean	false	是否激活状态（侧边栏收起时为 true）

Events

事件名	参数	说明
toggle-click	-	点击按钮时触发

样式定制

// 自定义折叠按钮样式
.hamburger {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  cursor: pointer;
  
  &.is-active {
    transform: rotate(180deg);
  }
}

与 Store 集成

组件通过 useAppStore 管理侧边栏状态：

import { useAppStore } from '@/store'

const appStore = useAppStore()

// 获取侧边栏状态
const isCollapse = appStore.sidebar.isCollapse

// 切换侧边栏
appStore.toggleSidebar()

// 打开侧边栏
appStore.openSidebar()

// 关闭侧边栏
appStore.closeSidebar()

注意事项

1. 状态同步：组件状态与全局 Store 保持同步
2. 移动端：移动端点击会打开侧边栏抽屉
3. 动画：图标旋转动画通过 CSS transform 实现

相关链接

• 布局系统
• 状态管理