Menu 菜单

为页面和功能提供导航的菜单列表，支持子菜单、分组、折叠、暗色主题、手风琴模式、徽标、Logo 插槽等。

综合示例

包含 Logo、徽标、子菜单、分组、折叠切换的完整侧边栏演示。

基础用法

通过 items 定义菜单项，v-model 绑定当前选中项。

当前选中：shouye

带 Logo

使用 #logo 插槽自定义顶部品牌区域，折叠时自动隐藏文字。

徽标 Badge

通过 badge 字段为菜单项添加徽标。

子菜单

支持 children 配置子菜单，点击展开/收起。

菜单分组

通过 type: 'group' 创建菜单分组，分组标题不可选中。

暗色主题

设置 theme 为 dark 使用暗色主题，文字自动切换为白色。

暗色主题 + 分组

暗色主题下菜单分组同样正确显示白色文字。

手风琴模式

设置 accordion 后，同一时刻只有一个子菜单展开。

折叠模式

设置 collapsed 让菜单仅显示图标，hover 时弹出 tooltip。

水平模式

设置 mode 为 horizontal 水平排列，子菜单以下拉方式展开。

水平暗色模式

水平菜单同样支持暗色主题。

默认展开

通过 defaultOpenKeys 设置默认展开的子菜单。

禁用菜单项

设置 disabled 禁用某个菜单项。

不可选中

设置 selectable: false 使菜单项不可选中（仍可点击触发 select 事件）。

当前选中：

分割线与自定义缩进

插入 { divider: true } 显示分割线；inlineIndent 控制缩进。

底部插槽

使用 #footer 插槽在菜单底部添加内容。

事件回调

监听 select 和 openChange 事件。

select：—
openChange：—

受控展开

通过 v-model:open-keys 受控管理展开的子菜单。

折叠切换

通过 #footer 插槽放置折叠按钮，点击即可展开/收起侧边栏。

Props

参数	类型	默认值	说明
`modelValue`	`string \| number`	`—`	当前选中项 key（v-model）
`items`	`MenuItem[]`	`—`	菜单项数据（必填）
`mode`	`'vertical' \| 'horizontal'`	`'vertical'`	菜单模式
`theme`	`'light' \| 'dark'`	`'light'`	主题风格
`collapsed`	`boolean`	`false`	是否折叠（仅垂直模式）
`accordion`	`boolean`	`false`	手风琴模式
`defaultOpenKeys`	`(string \| number)[]`	`[]`	默认展开子菜单（非受控）
`openKeys`	`(string \| number)[]`	`—`	受控展开子菜单（v-model:open-keys）
`inlineIndent`	`number`	`16`	菜单项缩进（px）
`popupClassName`	`string`	`''`	水平模式下弹出菜单自定义类名
`width`	`string \| number`	`—`	菜单宽度

MenuItem 类型

属性	类型	说明
`key`	`string \| number`	唯一标识
`label`	`string`	标题
`icon`	`string`	图标名称
`disabled`	`boolean`	是否禁用
`divider`	`boolean`	是否为分割线
`selectable`	`boolean`	是否可选中，默认 true
`type`	`'group'`	设为 "group" 创建分组
`badge`	`string \| number`	徽标内容
`children`	`MenuItem[]`	子菜单或分组子项

Events

事件名	类型	说明
`update:modelValue`	`(key: string \| number) => void`	选中项变化
`select`	`(key: string \| number, item: MenuItem) => void`	选择菜单项
`update:openKeys`	`(keys: (string\|number)[]) => void`	展开变化
`openChange`	`(keys: (string\|number)[]) => void`	展开变化

Slots

插槽名	说明
`logo`	顶部品牌/Logo 区域，参数 { collapsed }
`footer`	菜单底部区域，参数 { collapsed }，常用于折叠按钮或用户信息