Menu 菜单

为页面和功能提供导航的菜单列表，支持子菜单、分组、暗色主题、手风琴模式、徽标、Logo 插槽、路由跳转（to）、查询参数（query）、外部链接（href）、自定义点击回调（onClick）等。组件根据宽度自动检测折叠状态：宽度 ≤ collapsedWidth（默认 64px）时仅显示图标，悬停自动弹出 tooltip 或子菜单面板。

综合示例

包含 Logo、徽标、子菜单、分组、路由跳转、自定义回调、外部链接、折叠切换的完整侧边栏演示。切换 width 宽度，组件自动感知折叠。

基础用法

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

当前选中：shouye

带 Logo

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

徽标 Badge

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

子菜单

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

菜单分组

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

暗色主题

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

暗色主题 + 分组

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

手风琴模式

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

折叠模式

将 width 设置为 56（≤ 64px 即 collapsedWidth 默认值）即可触发折叠，菜单仅显示图标。悬停普通菜单项会显示 tooltip 文字提示，悬停含子菜单的项会在右侧弹出子菜单面板。

水平模式

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

水平暗色模式

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

默认展开

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

禁用菜单项

设置 disabled 禁用某个菜单项。

不可选中

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

当前选中：

分割线与自定义缩进

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

底部插槽

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

事件回调

监听 select 和 openChange 事件。

select：—
openChange：—

受控展开

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

折叠切换

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

路由跳转

通过 to 字段指定路由路径，点击菜单项自动跳转；query 字段可传递查询参数；href 字段可打开外部链接。

点击菜单项将自动跳转到对应页面

Props

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

MenuItem 类型

属性	类型	说明
`key`	`string \| number`	唯一标识
`label`	`string`	标题
`icon`	`string`	图标名称
`disabled`	`boolean`	是否禁用
`divider`	`boolean`	是否为分割线
`selectable`	`boolean`	是否可选中，默认 true
`type`	`'group'`	设为 "group" 创建分组
`badge`	`string \| number`	徽标内容
`children`	`MenuItem[]`	子菜单或分组子项
`to`	`string`	路由跳转路径，如 '/docs/button'
`query`	`Record<string, string>`	路由查询参数，与 to 搭配使用
`href`	`string`	外部链接，点击后 window.open 打开
`target`	`string`	href 的 target 属性，默认 '_blank'
`onClick`	`(item: MenuItem) => void`	自定义点击回调函数，优先级高于 to/href

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`	展开变化
`update:collapsed`	`(collapsed: boolean) => void`	折叠状态变化（宽度自动检测触发）

Slots

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