Appearance
Menu 导航菜单
为网站提供导航功能的菜单组件，支持垂直、水平和内嵌三种模式，可配合菜单项和子菜单使用。垂直和内嵌模式默认宽度为 200px，可以通过 CSS 自定义宽度。
基础用法
最常见的用法，通过 v-model 绑定当前激活的菜单项索引，使用 c-menu-item 作为菜单项。
📝 垂直菜单
📝 水平菜单
水平菜单支持悬停弹出二级菜单，默认使用 hover 触发方式。
💡 提示：水平模式下，子菜单默认使用
hover触发方式，鼠标移入一级菜单时会自动弹出二级菜单。
子菜单
使用 c-sub-menu 组件可以创建多级菜单。
📂 垂直子菜单
📂 水平子菜单
水平菜单支持多级子菜单，鼠标移入一级菜单时会自动弹出下拉菜单。水平模式默认使用 hover 触发，无需手动设置 trigger 属性。
💡 提示：水平模式下，子菜单默认使用
hover触发方式，鼠标移入一级菜单时会自动弹出二级菜单，无需手动设置trigger="hover"。
子菜单触发方式
通过 trigger 属性设置子菜单的触发方式，支持 click（点击）和 hover（悬停）两种方式。
🖱️ 点击触发（默认）
默认展开
通过 default-open 属性设置子菜单默认展开。
禁用状态
通过 disabled 属性禁用菜单项或子菜单。
菜单图标
菜单项支持使用图标，可以通过 c-icon 组件在菜单项中插入图标。
💡 提示：
- 菜单项中可以直接使用
c-icon组件插入图标- 子菜单标题可以通过
title插槽自定义，包括图标- 图标会自动与文字保持适当间距
主题
菜单组件默认使用亮色主题，暗色模式通过父元素添加 class="dark" 类来适配。
🌞 亮色主题（默认）
💡 提示：
- 菜单组件默认使用亮色主题，无需额外配置
- 暗色模式通过在父元素上添加
class="dark"类来适配- 暗色模式支持所有菜单模式（垂直、水平、内嵌）
自定义颜色
通过丰富的颜色属性自定义菜单的各个状态颜色，包括菜单项、子菜单、激活状态和悬停状态的颜色配置。
🎨 完整颜色配置示例
📋 颜色属性说明
菜单项颜色
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
background-color | 菜单背景色 | string | '' |
text-color | 菜单文字颜色 | string | '' |
active-text-color | 激活菜单项的文字颜色 | string | '' |
active-background-color | 激活菜单项的背景色 | string | '' |
hover-background-color | 鼠标悬停时的背景色 | string | '' |
hover-text-color | 鼠标悬停时的文字颜色 | string | '' |
子菜单颜色
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
sub-menu-background-color | 子菜单的背景色 | string | '' |
sub-menu-text-color | 子菜单的文字颜色 | string | '' |
sub-menu-hover-background-color | 子菜单鼠标悬停时的背景色 | string | '' |
sub-menu-hover-text-color | 子菜单鼠标悬停时的文字颜色 | string | '' |
💡 提示：
- 所有颜色属性都是可选的，未设置时使用默认样式
- 可以通过这些属性实现完全自定义的菜单配色方案
- 建议悬停颜色与激活颜色保持一致的色系，以提供良好的视觉反馈
- 子菜单颜色可以独立配置，实现更精细的视觉层次
折叠模式
通过 collapse 属性设置菜单折叠状态（仅垂直模式）。折叠后菜单项只显示图标，文字会自动隐藏。
多级菜单
支持创建多级嵌套菜单。
事件处理
监听菜单选择事件，可以在外部处理路由跳转等逻辑。
API 参考
Menu Props
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
modelValue | 当前激活的菜单项索引 | string | number | Array<string | number> | — | '' |
mode | 菜单模式 | 'horizontal' | 'vertical' | 'inline' | horizontal、vertical、inline | vertical |
collapse | 是否折叠（仅垂直模式） | boolean | — | false |
trigger | 子菜单的触发方式 | 'hover' | 'click' | hover、click | 水平模式默认 hover，垂直和内嵌模式默认 click |
router | 是否开启路由模式（预留，需外部处理） | boolean | — | false |
unique-opened | 是否只保持一个子菜单展开 | boolean | — | false |
multiple | 是否允许多选 | boolean | — | false |
inline-collapsed | 内嵌菜单是否收起（仅 inline 模式） | boolean | — | false |
inline-indent | 内嵌模式的菜单缩进宽度 | number | — | 24 |
background-color | 菜单背景色 | string | — | '' |
text-color | 文字颜色 | string | — | '' |
active-text-color | 激活文字颜色 | string | — | '' |
active-background-color | 激活菜单项的背景色 | string | — | '' |
hover-background-color | 鼠标悬停时的背景色 | string | — | '' |
hover-text-color | 鼠标悬停时的文字颜色 | string | — | '' |
sub-menu-background-color | 子菜单的背景色 | string | — | '' |
sub-menu-text-color | 子菜单的文字颜色 | string | — | '' |
sub-menu-hover-background-color | 子菜单鼠标悬停时的背景色 | string | — | '' |
sub-menu-hover-text-color | 子菜单鼠标悬停时的文字颜色 | string | — | '' |
💡 提示：
- 垂直和内嵌模式菜单默认宽度为 200px，可以通过 CSS 自定义宽度
- 菜单项支持使用
c-icon组件插入图标，图标会自动与文字保持适当间距
Menu Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
update:modelValue | 激活菜单项改变 | (value: string | number | Array<string | number>) |
select | 菜单项被选择时触发 | (index: string | number) |
open | 子菜单打开时触发 | (index: string | number) |
close | 子菜单关闭时触发 | (index: string | number) |
MenuItem Props
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
index | 菜单项的唯一标识（必填） | string | number | — | — |
disabled | 是否禁用 | boolean | — | false |
route | 路由信息（预留，需外部处理） | string | object | — | — |
MenuItem Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
click | 点击事件 | (evt: MouseEvent) |
SubMenu Props
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
index | 子菜单的唯一标识（必填） | string | number | — | — |
title | 子菜单标题 | string | — | '' |
disabled | 是否禁用 | boolean | — | false |
default-open | 是否默认展开 | boolean | — | false |
SubMenu Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
open | 子菜单打开时触发 | (index: string | number) |
close | 子菜单关闭时触发 | (index: string | number) |
SubMenu Slots
| 插槽名 | 说明 |
|---|---|
title | 自定义标题内容 |
| 默认 | 子菜单内容 |
💡 提示：以上为在线示例（非代码块），你可以直接在页面中与 Menu 组件交互体验各种功能。