菜单 ​

为您的网站提供导航的菜单。

TIP

如果你想覆盖 el-menu 的默认高度，可以使用以下 CSS：

css
.el-menu--horizontal {
  --el-menu-horizontal-height: 100px;
}

顶栏 ​

顶栏菜单可用于多种场景。

默认情况下，菜单是垂直的，但您可以通过将 mode 属性设置为“水平”将其更改为水平。此外，您还可以使用子菜单组件创建二级菜单。菜单提供 background-color、text-color 和 active-text-color 自定义颜色。

左和右 ​

您可以将菜单项置于左侧或右侧。

侧边栏 ​

带有子菜单的垂直菜单。

您可以使用 el-menu-item-group 组件创建菜单组，组的名称由 title 属性或命名槽确定。

Default colors
Custom colors

折叠 ​

垂直菜单可以折叠。

波普偏移 2.4.4 ​

具有 popperOffset 的子菜单将覆盖菜单的 popper-offset。

菜单API ​

菜单属性 ​

| 名称 | 描述 | 类型 | 默认 | | ------------------------ | --------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------- | --- | | 模式 | 菜单显示方式 | 枚举 | 垂直 | | 崩溃 | 菜单是否折叠（仅在垂直模式下可用） | 布尔值 | 假 | | 省略号 | 菜单是否省略（仅水平模式下可用） | 布尔值 | 真实 | | 省略号图标 2.4.4 | 自定义省略号图标（仅在水平模式下可用且省略号为 true） | 字符串 / 组件 | — | | popper 偏移 2.4.4 | 弹出窗口的偏移量（对所有子菜单有效） | 数字 | 6 | | 默认活动 | 页面加载时活动菜单的索引 | 字符串 | '' | | 默认打开 | 包含当前活动子菜单索引的数组 | 数组 | [] | | 独特开放 | 是否只能激活一个子菜单 | 布尔值 | 假 | | 菜单触发 | 如何触发子菜单，仅在 mode 为“水平”时有效 | 枚举 | 悬停 | | 路由器 | vue-router模式是否激活。如果为 true，索引将用作“路径”来激活路由操作。与 default-active 一起使用来设置加载时的活动项目。 | 布尔值 | 假 | | 折叠过渡 | 是否启用折叠过渡 | 布尔值 | 真实 | | 波普效应 2.2.26 | 工具提示主题，菜单折叠时内置主题：dark / light | 枚举 / 字符串 | 黑暗 | | 单击外部关闭 2.4.4 | 可选，单击外部时菜单是否折叠 | 布尔值 | 假 | | 波普级 2.5.0 | 所有弹出菜单和标题工具提示的自定义类名称 | 字符串 | — | | 波普风格 2.11.5 | 所有弹出菜单和标题工具提示的自定义样式字符串 / 对象 | — | | 显示超时 2.5.0 | 控制显示之前所有菜单的超时 | 数字 | 300 | 300 | | 隐藏超时 2.5.0 | 控制隐藏之前所有菜单的超时时间数字 | 300 | 300 | | 背景颜色 ^（已弃用） | 菜单的背景颜色（十六进制格式）（在样式类中使用 --el-menu-bg-color 代替） | 字符串 | #ffffff | | 文本颜色 ^（已弃用） | 菜单的文本颜色（十六进制格式）（在样式类中使用 --el-menu-text-color 代替） | 字符串 | #303133 | | 活动文本颜色 ^（已弃用） | 当前活动菜单项的文本颜色（十六进制格式）（在样式类中使用 --el-menu-active-color 代替） | 字符串 | #409eff | | 持久 2.9.5 | 当菜单处于非活动状态且 persistent 为 false 时，下拉菜单将被销毁 | 布尔值 | 真实 |

菜单活动 ​

名称描述类型
选择菜单激活时的回调函数功能
打开子菜单展开时的回调函数功能
关闭子菜单折叠时的回调函数功能

菜单栏位 ​

名称描述子标签
默认自定义默认内容子菜单/菜单项/菜单项组

菜单公开 ​

名称描述类型
打开打开特定的子菜单，参数为要打开的子菜单的索引功能
关闭关闭特定子菜单，参数为要关闭的子菜单索引功能
处理调整大小手动触发菜单宽度重新计算功能
更新活动索引 2.9.8设置活动菜单索引功能

子菜单API ​

子菜单属性 ​

名称描述类型默认
索引^（必填）独特的识别字符串—
波普尔级弹出菜单的自定义类名字符串—
波普风格 2.11.5弹出菜单的自定义样式字符串 / 对象—
显示超时子菜单显示超时（默认继承菜单show-timeout）数字—
隐藏超时隐藏子菜单超时（默认继承菜单hide-timeout）数字—
已禁用子菜单是否禁用布尔值假
传送是否将弹出菜单传送到主体，一级子菜单默认为 true，其他子菜单为 false布尔值未定义
popper 偏移弹出器的偏移量（覆盖菜单的 popper）数字—
展开关闭图标菜单展开和子菜单关闭时的图标，expand-close-icon 和 expand-open-icon 需要一起传递才生效字符串 / 组件—
展开打开图标展开菜单和打开子菜单时的图标，expand-open-icon 和 expand-close-icon 需要一起传递才能生效字符串 / 组件—
折叠关闭图标菜单折叠和子菜单关闭时的图标，collapse-close-icon 和 collapse-open-icon 需要一起传递才能生效字符串 / 组件—
折叠打开图标菜单折叠和子菜单打开时的图标，collapse-open-icon 和 collapse-close-icon 需要一起传递才生效字符串 / 组件—

子菜单插槽 ​

名称描述子标签
默认自定义默认内容子菜单/菜单项/菜单项组
标题自定义标题内容—

菜单项 API ​

菜单项属性 ​

名称描述类型默认
索引^（必填）独特的识别字符串—
路线Vue路由器路由位置参数字符串 / 对象—
已禁用是否禁用布尔值假

菜单项事件 ​

名称描述类型
点击点击menu-item时的回调函数，参数为menu-item实例功能

菜单项槽位 ​

名称描述
默认自定义默认内容
标题自定义标题内容

菜单项组 API ​

菜单项组属性 ​

名称描述类型默认
标题组标题字符串—

菜单项组槽位 ​

名称描述子标签
默认自定义默认内容菜单项
标题自定义群组标题—

类型声明 ​

显示声明
ts
/**
 * @param index index of activated menu
 * @param indexPath index path of activated menu
 * @param item the selected menu item
 * @param routerResult result returned by `vue-router` if `router` is enabled
 */
type MenuSelectEvent = (
  index: string,
  indexPath: string[],
  item: MenuItemClicked,
  routerResult?: Promise<void | NavigationFailure>
) => void

/**
 * @param index index of expanded sub-menu
 * @param indexPath index path of expanded sub-menu
 */
type MenuOpenEvent = (index: string, indexPath: string[]) => void

/**
 * @param index index of collapsed sub-menu
 * @param indexPath index path of collapsed sub-menu
 */
type MenuCloseEvent = (index: string, indexPath: string[]) => void

interface MenuItemRegistered {
  index: string
  indexPath: string[]
  active: boolean
}

interface MenuItemClicked {
  index: string
  indexPath: string[]
  route?: RouteLocationRaw
}