Menu 菜单

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

TIP

如果您想要覆盖el-menu的默认高度, 您可以使用下列CSS

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

顶栏

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

导航菜单默认为垂直模式,通过将 mode 属性设置为 horizontal 来使导航菜单变更为水平模式。 另外,在菜单中通过 sub-menu 组件可以生成二级菜单。 Menu 还提供了background-colortext-coloractive-text-color,分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。

左右

您可以将菜单项放置在左边或右边。

侧栏

垂直菜单,可内嵌子菜单。

通过 el-menu-item-group 组件可以实现菜单进行分组,分组名可以通过 title 属性直接设定,也可以通过具名 slot 来设定。

Default colors
Custom colors

Collapse 折叠面板

垂直导航菜单可以被折叠

弹出层偏移量 2.4.4

当提供了 popperOffset 配置,会覆盖 Submenu 的 popper-offset.

菜单 API

属性名说明类型Default
mode菜单展示模式enumvertical
collapse是否水平折叠收起菜单(仅在 mode 为 vertical 时可用)booleanfalse
ellipsis是否省略多余的子项(仅在横向模式生效)booleantrue
ellipsis-icon 2.4.4自定义省略图标 (仅在水平模式下可用)string / Component
popper-offset 2.4.4弹出层的偏移量(对所有子菜单有效)number6
default-active页面加载时默认激活菜单的 indexstring''
default-openeds默认打开的 sub-menu 的 index 的数组object[]
unique-opened是否只保持一个子菜单的展开booleanfalse
menu-trigger子菜单打开的触发方式,只在 mode 为 horizontal 时有效。enumhover
router是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。booleanfalse
collapse-transition是否开启折叠动画booleantrue
popper-effect 2.2.26Tooltip 主题,内置了 dark / light 两种主题,当菜单折叠时生效。enum / stringdark
close-on-click-outside 2.4.4可选,单击外部时是否折叠菜单booleanfalse
popper-class 2.5.0为 popper 添加类名string
show-timeout 2.5.0菜单出现前的延迟number300
hide-timeout 2.5.0菜单消失前的延迟number300
background-color deprecated菜单的背景颜色 (十六进制格式) (推荐在样式类中使用 --el-menu-bg-color)string#ffffff
text-color deprecated菜单的文字颜色 (十六进制格式) (推荐在样式类中使用 --el-menu-text-color)string#303133
active-text-color deprecated活动菜单项的文本颜色(十六进制格式)(推荐使用 css var --el-menu-active-colorstring#409eff
事件名说明类型
select菜单激活回调Function
opensub-menu 展开的回调Function
closesub-menu 收起的回调Function
插槽名说明子标签
default自定义默认内容SubMenu / Menu-Item / Menu-Item-Group
属性名说明类型
open打开一个特定的子菜单,参数是要打开的子菜单的索引Function
close关闭一个特定的子菜单,参数是要关闭子菜单的索引Function
插槽名说明类型默认值
index required唯一标志string
popper-class为 popper 添加类名string
show-timeout子菜单出现之前的延迟,(继承 menu 的 show-timeout 配置)number
hide-timeout子菜单消失之前的延迟,(继承 menu 的 hide-timeout 配置)number
disabled是否禁用booleanfalse
teleported是否将弹出菜单挂载到 body 上,第一级SubMenu默认值为 true,其他SubMenus 的值为 falsebooleanundefined
popper-offset弹出窗口的偏移量 (覆盖 popper的菜单)number
expand-close-icon父菜单展开且子菜单关闭时的图标, expand-close-iconexpand-open-icon 需要一起配置才能生效string / Component
expand-open-icon父菜单展开且子菜单打开时的图标, expand-open-iconexpand-close-icon 需要一起配置才能生效string / Component
collapse-close-icon父菜单收起且子菜单关闭时的图标, collapse-close-iconcollapse-open-icon 需要一起配置才能生效string / Component
collapse-open-icon父菜单收起且子菜单打开时的图标, collapse-open-iconcollapse-close-icon 需要一起配置才能生效string / Component
属性名说明子标签
default自定义默认内容SubMenu / Menu-Item / Menu-Item-Group
title自定义标题内容
事件名说明类型默认值
index唯一标志string / nullnull
routeVue Route 路由位置参数string / object
disabled是否禁用booleanfalse
插槽名说明类型
click点击菜单项时回调函数, 参数为菜单项实例Function
属性名说明
default自定义默认内容
title自定义标题内容
插槽名说明类型默认值
title组标题string
名称说明子标签
default默认插槽内容Menu-Item
title自定义组标题内容

类型声明

显示类型声明
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
}

源代码

组件样式文档

贡献者