# menu (w-menu)

- **Import**: `WMenu` from `win-design-next`
- **Tag**: `<w-menu>`
- **说明**: Menu 菜单
- **分类**: navigation
- **Skill 版本**: V1.1.0
- **适配组件库**: win-design-next 1.2.2
- **API 来源**: `docs/zh-CN/component/menu.md`

## API

## 菜单 API

### Attributes

| 属性名                               | 说明                                                                                                                              | 类型                                   | Default  |
| ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | -------- |
| mode                                 | 菜单展示模式                                                                                                                      | ^[enum]`'horizontal' \| 'vertical'`    | vertical |
| collapse                             | 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）                                                                              | ^[boolean]                             | false    |
| ellipsis                             | 是否省略多余的子项（仅在横向模式生效）                                                                                            | ^[boolean]                             | true     |
| ellipsis-icon                        | 自定义省略图标 (仅在水平模式下可用)                                                                                               | ^[string] / ^[Component]               | —        |
| popper-offset                        | 弹出层的偏移量(对所有子菜单有效)                                                                                                  | ^[number]                              | 6        |
| default-active                       | 页面加载时默认激活菜单的 index                                                                                                    | ^[string]                              | ''       |
| default-openeds                      | 默认打开的 sub-menu 的 index 的数组                                                                                               | ^[object]`string[]`                    | []       |
| unique-opened                        | 是否只保持一个子菜单的展开                                                                                                        | ^[boolean]                             | false    |
| menu-trigger                         | 子菜单打开的触发方式，只在 `mode` 为 horizontal 时有效。                                                                          | ^[enum]`'hover' \| 'click'`            | hover    |
| router                               | 是否启用 `vue-router` 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 `default-active` 来设置加载时的激活项。 | ^[boolean]                             | false    |
| collapse-transition                  | 是否开启折叠动画                                                                                                                  | ^[boolean]                             | true     |
| popper-effect                        | Tooltip 主题，内置了 `dark` / `light` 两种主题，当菜单折叠时生效。                                                                | ^[enum]`'dark' \| 'light'` / ^[string] | dark     |
| close-on-click-outside               | 可选，单击外部时是否折叠菜单                                                                                                      | ^[boolean]                             | false    |
| popper-class                         | 为 popper 添加类名                                                                                                                | ^[string]                              | —        |
| show-timeout                         | 菜单出现前的延迟                                                                                                                  | ^[number]                              | 300      |
| hide-timeout                         | 菜单消失前的延迟                                                                                                                  | ^[number]                              | 300      |
| bg-color ^(deprecated)               | 菜单的背景颜色 (十六进制格式) (推荐在样式类中使用 `--w3-menu-bg-color`)                                                           | ^[string]                              | #ffffff  |
| item-text-color ^(deprecated)        | 菜单的文字颜色 (十六进制格式) (推荐在样式类中使用 `--w3-menu-item-text-color`)                                                    | ^[string]                              | #000     |
| item-active-text-color ^(deprecated) | 活动菜单项的文本颜色（十六进制格式）（推荐使用 css var `--w3-menu-item-active-color`）                                            | ^[string]                              | #000     |

### Events

| 事件名 | 说明                | 类型                         |
| ------ | ------------------- | ---------------------------- |
| select | 菜单激活回调        | ^[Function]`MenuSelectEvent` |
| open   | sub-menu 展开的回调 | ^[Function]`MenuOpenEvent`   |
| close  | sub-menu 收起的回调 | ^[Function]`MenuCloseEvent`  |

### Slots

| 插槽名  | 说明           | 子标签                                |
| ------- | -------------- | ------------------------------------- |
| default | 自定义默认内容 | SubMenu / Menu-Item / Menu-Item-Group |

### Exposes

| 方法名 | 说明                                             | 类型                                 |
| ------ | ------------------------------------------------ | ------------------------------------ |
| open   | 打开一个特定的子菜单，参数是要打开的子菜单的索引 | ^[Function]`(index: string) => void` |
| close  | 关闭一个特定的子菜单，参数是要关闭子菜单的索引   | ^[Function]`(index: string) => void` |
