Menu 菜单
为网站提供导航功能的菜单，支持顶部导航、侧边导航和折叠侧栏。
ts
import { createApp } from 'vue'
import { ElMenu, ElMenuItem, ElSubMenu, ElMenuItemGroup } from '@szhn/dh-design-pc'
const app = createApp()
app.use(ElMenu)
app.use(ElMenuItem)
app.use(ElSubMenu)
app.use(ElMenuItemGroup)顶栏
将 mode 设置为 horizontal 可启用水平菜单。通过 sub-menu 可生成二级菜单。
左右布局
水平菜单下可以借助布局容器，将部分菜单项靠右放置。
工作台顶栏
结合品牌区、水平菜单与右侧操作区，适用于公文处理、协同办公等工作台场景。工作台 为一级菜单项，可与 首页、订阅消息 并列展示，右侧常用操作区可放置搜索、头像与通知。
侧栏
垂直菜单用于侧边导航，可内嵌子菜单，并支持展开态和收起态。
折叠面板
通过 collapse 属性可将垂直菜单折叠。
Popper 偏移
通过 popper-offset 可以统一调整子菜单弹层与触发项的距离；SubMenu 上单独设置时会覆盖 Menu 上的全局配置。
API
Menu Attributes（常用）
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| mode | 菜单展示模式 | vertical | horizontal | vertical |
| collapse | 是否折叠（vertical 时有效） | boolean | false |
| default-active | 默认激活菜单的 index | string | '' |
| default-openeds | 默认展开的 sub-menu 数组 | string[] | [] |
| unique-opened | 是否只保持一个子菜单展开 | boolean | false |
| router | 是否启用 vue-router 模式 | boolean | false |
| ellipsis | 水平模式下是否省略多余项 | boolean | true |
| popper-offset | 全局弹层偏移量 | number | 6 |
| menu-trigger | 水平模式下子菜单触发方式 | hover | click | hover |
Menu Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| select | 菜单激活回调 | (index, indexPath, item) |
| open | sub-menu 展开回调 | (index, indexPath) |
| close | sub-menu 收起回调 | (index, indexPath) |
Menu Exposes
| 名称 | 说明 |
|---|---|
| open(index) | 手动展开指定子菜单 |
| close(index) | 手动收起指定子菜单 |
| handleResize() | 手动触发宽度重算 |
| updateActiveIndex(index) | 设置当前激活菜单项 |
MenuItem / SubMenu / MenuItemGroup
MenuItem：index（唯一标识，必填）、disabled、route。SubMenu：index、disabled、popper-class、show-timeout、popper-offset等。MenuItemGroup：title设置分组名。
更多内容参见 Element Plus Menu 文档。