SuperAPI AI 工具集

el-menu

前端与建站

查看项目

更新于 10-15 23:32

技能介绍

el-menu 是 Element Plus 提供的网站导航菜单组件,适用于创建导航栏、侧边栏和下拉菜单。支持水平(顶栏)与垂直(侧边栏)两种模式;垂直模式可折叠;支持多级嵌套子菜单与菜单分组;可配置颜色、图标与主题;支持键盘导航。

用法:通过 mode 指定水平或垂直;collapse 控制垂直菜单是否折叠;router 开启后菜单项 index 与路由路径匹配即可自动导航;default-active 设置初始激活项,default-openeds 设置初始展开项,unique-opened 限制只展开一个子菜单,menu-trigger 在水平模式下控制子菜单以悬停或点击触发。

组件包含 el-sub-menu(index 必填、disabled、各图标属性等)、el-menu-item(index 必填、route、disabled,支持 click 事件)、el-menu-item-group(title)。菜单可监听 select、open、close 事件,并通过 ref 调用 open、close、handleResize、updateActiveIndex 等方法。

使用示例包括顶栏水平菜单、左右对齐布局、垂直侧边栏、可折叠侧边栏、结合 Vue Router 的导航及菜单分组。常见问题涉及激活状态更新(用 updateActiveIndex)、路由导航不生效(需设置 router 且 index 与路径一致)、水平模式自定义高度(覆盖 CSS 变量 --el-menu-horizontal-height)。

限制:资料未提供版本要求、安装命令与收费信息;折叠仅适用于垂直模式,水平模式不支持 collapse,其省略号行为由 ellipsis 控制。