Menu 菜单

为网站提供导航功能的菜单。

提示

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

css

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

顶栏

顶栏菜单可以在各种场景中使用。

左右结构

带有子菜单的垂直菜单。

Collapse 折叠面板

垂直菜单可以被折叠。

弹出框位置偏移 2.4.4

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

名称	描述	类型	默认值
mode	菜单显示模式	`枚举`	vertical
collapse	菜单是否折叠（仅在 vertical 模式下可用）	`boolean`	false
ellipsis	菜单是否省略（仅在 horizontal 模式下可用）	`boolean`	true
ellipsis-icon 2.4.4	自定义省略图标（仅在 horizontal 模式下且 ellipsis 为 true 时可用）	`string` / `Component`	—
popper-offset 2.4.4	弹出框的偏移量（对所有子菜单生效）	`number`	6
default-active	页面加载时激活菜单的 index	`string`	''
default-openeds	包含当前激活子菜单 index 的数组	`object`	[]
unique-opened	是否只有一个子菜单可以被激活	`boolean`	false
menu-trigger	子菜单如何被触发，仅在 `mode` 为 'horizontal' 时有效	`枚举`	悬浮时
router	是否激活 `vue-router` 模式。如果为 true，index 将被用作 'path' 来激活路由操作。与 `default-active` 一起使用以设置加载时的激活项。	`boolean`	false
collapse-transition	是否启用折叠过渡动画	`boolean`	true
popper-effect 2.2.26	当菜单折叠时，Tooltip 的主题，内置主题：`dark` / `light`	`enum` / `string`	暗黑模式
close-on-click-outside 2.4.4	可选，点击外部时菜单是否折叠	`boolean`	false
popper-class 2.5.0	所有弹出菜单和标题的 tooltip 的自定义类名	`string`	—
popper-style 2.11.5	所有弹出菜单和标题的 tooltip 的自定义样式	`string` / `object`	—
show-timeout 2.5.0	控制所有菜单显示前的超时时间	`number`	300
hide-timeout 2.5.0	控制所有菜单隐藏前的超时时间	`number`	300
background-color 已弃用	Menu 的背景色（十六进制格式）（请改用样式类中的 `--el-menu-bg-color`）	`string`	#ffffff
text-color 已弃用	Menu 的文本颜色（十六进制格式）（请改用样式类中的 `--el-menu-text-color`）	`string`	#303133
active-text-color 已弃用	当前激活菜单项的文本颜色（十六进制格式）（请改用样式类中的 `--el-menu-active-color`）	`string`	#409eff
persistent 2.9.5	当菜单未激活且 `persistent` 为 `false` 时，下拉菜单将被销毁	`boolean`	true

名称	描述	类型
select	菜单被激活时的回调函数	`Function`
open	子菜单展开时的回调函数	`Function`
关闭	子菜单折叠时的回调函数	`Function`

名称	描述	子标签
default	自定义默认内容	SubMenu / Menu-Item / Menu-Item-Group

名称	描述	类型
open	打开一个特定的子菜单，参数是要打开的子菜单的 index	`Function`
关闭	关闭一个特定的子菜单，参数是要关闭的子菜单的 index	`Function`
handleResize	手动触发菜单宽度重新计算	`Function`
updateActiveIndex 2.9.8	设置激活菜单的 index	`Function`

SubMenu API

SubMenu 属性

名称	描述	类型	默认值
index 必填	唯一标识	`string`	—
popper-class	弹出菜单的自定义类名	`string`	—
popper-style 2.11.5	弹出菜单的自定义样式	`string` / `object`	—
show-timeout	显示子菜单前的超时时间（默认继承菜单的 `show-timeout`）	`number`	—
hide-timeout	隐藏子菜单前的超时时间（默认继承菜单的 `hide-timeout`）	`number`	—
disabled	子菜单是否被禁用	`boolean`	false
teleported	弹出菜单是否被传送到 body，对于一级子菜单默认为 true，其他子菜单默认为 false	`boolean`	undefined
popper-offset	弹出框的偏移量（覆盖菜单的 `popper-offset`）	`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 插槽

名称	描述	子标签
default	自定义默认内容	SubMenu / Menu-Item / Menu-Item-Group
title	自定义标题内容	—

名称	描述	类型	默认值
index 必填	唯一标识	`string`	—
route	Vue Router 路由位置参数	`string` / `object`	—
disabled	是否禁用	`boolean`	false

名称	描述	类型
click	点击 menu-item 时的回调函数，参数是 menu-item 实例	`Function`

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

名称	描述	类型	默认值
title	分组标题	`string`	—

名称	描述	子标签
default	自定义默认内容	Menu-Item
title	自定义分组标题	—

类型声明

显示声明

/**
 * @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
}