Menu 菜单
为网站提供导航功能的菜单。
TIP
如果您想要覆盖el-menu的默认高度, 您可以使用下列CSS
css
.el-menu--horizontal {
--el-menu-horizontal-height: 100px;
}顶栏
顶部栏菜单可以在各种场景中使用。
左右
侧栏
垂直菜单，可内嵌子菜单。
Collapse 折叠面板
垂直导航菜单可以被折叠
弹出层偏移量
当提供了 popperOffset 配置，会覆盖 Submenu 的 popper-offset.
菜单 API
Menu
| 属性名 | 说明 | 类型 | 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 |
| close-on-click-outside | 可选，单击外部时是否折叠菜单 | boolean | false |
| popper-class | 为 popper 添加类名 | string | — |
| show-timeout | 菜单出现前的延迟 | number | 300 |
| hide-timeout | 菜单消失前的延迟 | number | 300 |
| background-color | 菜单的背景颜色 (十六进制格式) (推荐在样式类中使用 --el-menu-bg-color) | string | #ffffff |
| text-color | 菜单的文字颜色 (十六进制格式) (推荐在样式类中使用 --el-menu-text-color) | string | #303133 |
| active-text-color | 活动菜单项的文本颜色（十六进制格式）（推荐使用 css var --el-menu-active-color） | string | #409eff |
Menu 事件
| 事件名 | 说明 | 类型 |
|---|---|---|
| select | 菜单激活回调 | Function |
| open | sub-menu 展开的回调 | Function |
| close | sub-menu 收起的回调 | Function |
Menu Slots
| 插槽名 | 说明 | 子标签 |
|---|---|---|
| default | 自定义默认内容 | SubMenu / Menu-Item / Menu-Item-Group |
Menu Exposes
| 属性名 | 说明 | 类型 |
|---|---|---|
| open | 打开一个特定的子菜单，参数是要打开的子菜单的索引 | Function |
| close | 关闭一个特定的子菜单，参数是要关闭子菜单的索引 | Function |
SubMenu API
| 属性名 | 说明 | 类型 | Default |
|---|---|---|---|
| index | 唯一标志 | string | — |
| popper-class | 为 popper 添加类名 | string | — |
| show-timeout | 子菜单出现之前的延迟，(继承 menu 的 show-timeout 配置) | number | — |
| hide-timeout | 子菜单消失之前的延迟，(继承 menu 的 hide-timeout 配置) | number | — |
| disabled | 是否禁用 | boolean | false |
| teleported | 是否将弹出菜单挂载到 body 上，第一级SubMenu默认值为 true，其他SubMenus 的值为 false | boolean | undefined |
| popper-offset | 弹出窗口的偏移量 (覆盖 popper的菜单) | number | — |
| expand-close-icon | 父菜单展开且子菜单关闭时的图标， expand-close-icon 和 expand-open-icon 需要一起配置才能生效 | string / Component | — |
| expand-open-icon | 父菜单展开且子菜单打开时的图标， expand-open-icon 和 expand-close-icon 需要一起配置才能生效 | string / Component | — |
| collapse-close-icon | 父菜单收起且子菜单关闭时的图标， collapse-close-icon 和 collapse-open-icon 需要一起配置才能生效 | string / Component | — |
| collapse-open-icon | 父菜单收起且子菜单打开时的图标， collapse-open-icon 和 collapse-close-icon 需要一起配置才能生效 | string / Component | — |
SubMenu Slots
| 属性名 | 说明 | 子标签 |
|---|---|---|
| default | 自定义默认内容 | SubMenu / Menu-Item / Menu-Item-Group |
| title | 自定义标题内容 | — |
Menu-Item API
| 事件名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| index | 唯一标志 | string / null | null |
| route | Vue Route 路由位置参数 | string / object | — |
| disabled | 是否禁用 | boolean | false |
Menu-Item 事件
| 插槽名 | 说明 | 类型 |
|---|---|---|
| click | 点击菜单项时回调函数, 参数为菜单项实例 | Function |
Menu-Item Slots
| 插槽名 | 说明 |
|---|---|
| default | 自定义默认内容 |
| title | 自定义标题内容 |
Menu-Item-Group API
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 组标题 | string | — |
Menu-Item-Group Slots
| 名称 | 说明 | 子标签 |
|---|---|---|
| default | 默认插槽内容 | Menu-Item |
| title | 自定义组标题内容 | — |