HUI

# Menu 导航菜单

TIP

若1.0外框架下升级1.9.0组件版本出现右上角 “个人信息”菜单下拉面板宽度过小问题，请升级1.0外框架版本至最新，或自行修改外框架下 src/frame/styles/frame/frame_topbar.scss 中 .toolLast .h-select-dropdown 类名下width：320px !important;

为页面和功能提供导航的菜单列表，常用于网站顶部和左侧。

注意：非 template/render 模式下，需使用 h-menu。

# 顶部导航

水平的顶部导航菜单。
通过设置属性 theme 为 light、dark、primary 可以选择主题。
通过事件 on-select 可以得到点击菜单的 name 值，从而控制页面路由或自定义操作。

# 侧栏导航

垂直导航菜单，可以内嵌子菜单。
设置 active-name 可以选中指定的菜单，设置 open-names 可以展开指定的子菜单。
设置属性 accordion 可以开启手风琴模式，每次只能展开一个子菜单。
通过设置属性 theme 为 light、dark 可以选择主题，侧栏菜单不支持 primary 主题。

# 分组

使用 Menu-group 组件进行分组，注意：

  • Menu-group 只能用在 Menu 和 Submenu 内。
  • Submenu 只能用在 Menu 内，不能用在 Menu-group 和 Menu-item 内。

# 可收缩/展开的侧栏导航

只能在 Menu 的 mode 属性为 vertical 时可以使用;

属性 说明 类型 默认值
mode 菜单类型，可选值为 horizontal（水平） 和 vertical（垂直） String vertical
theme 主题，可选值为 light、dark、primary，其中 primary 只适用于 mode="horizontal" String light
active-name 激活菜单的 name 值 String | Number -
open-names 展开的 Submenu 的 name 集合,vertical 有效 Array []
accordion 是否开启手风琴模式，开启后每次至多展开一个子菜单 Boolean false
width 导航菜单的宽度，只在 mode="vertical" 时有效，如果使用 Col 等布局，建议设置为 auto String 240px
collapse 是否展开/收缩菜单，只在 mode="vertical" 时有效 bollean false
shrinkClose 当有当前选中项的时候，收缩的时候是不弹出当前选中项（此属性只在15版本以及以上有效） bollean false
vertiSide 纵向导航第三级导航条是否平铺显示（此属性只在21版本以及以上有效） Bollean false
nestIndex menu 内 submenu 外层嵌套其他组件的层级标识(非原生HTML标签)，可选值 0, 1,【与手风琴模式一起使用】;当为1时,标识 submenu 外层嵌套一层组件【参考 HUI 工程中的 frame -->sidebar 及 sidebarItem】，此时可以使用菜单手风琴模式, 默认0 标识 submenu 不嵌套，即常规使用（建议在 vertical 时使用，此属性只在 22 版本以及以上有效） String || Number 0
事件名 说明 返回值
on-select 选择菜单（Menu-item）时触发 name
on-open-change 当 展开/收起 子菜单时触发 当前展开的 Submenu 的 name 值数组
方法名 说明 参数
updateOpened 手动更新展开的子目录，注意要在 $nextTick 里调用 无
updateActiveName 手动更新当前选择项，注意要在 $nextTick 里调用 无
属性 说明 类型 默认值
name 菜单项的唯一标识，必填 String | Number -
属性 说明 类型 默认值
name 子菜单的唯一标识，必填 String | Number -
showSlide 当前 submenu 是否支持移入显示,配合 vertiSide 使用（此属性只在 21 版本以及以上有效） Boolean false
名称 说明
无 菜单项
title 子菜单标题
属性 说明 类型 默认值
title 分组标题 String 空