Menu 导航菜单
为页面和功能提供导航的菜单列表,常用于网站顶部和左侧。
注意:非 template/render 模式下,需使用 。
顶部导航
水平的顶部导航菜单。
通过设置属性 theme
为 light
、dark
、primary
可以选择主题。
通过事件 on-select
可以得到点击菜单的 name 值,从而控制页面路由或自定义操作。
垂直导航菜单,可以内嵌子菜单。
设置 active-name
可以选中指定的菜单,设置 可以展开指定的子菜单。
设置属性 accordion
可以开启手风琴模式,每次只能展开一个子菜单。
通过设置属性 theme
为 light
、dark
可以选择主题,侧栏菜单不支持 primary 主题。
内嵌菜单
垂直菜单,子菜单内嵌在菜单区域。
使用 MenuGroup
组件进行分组。
Menu events
事件名 | 说明 | 返回值 |
---|---|---|
on-select | 选择菜单(MenuItem)时触发 | name |
on-open-change | 当 展开/收起 子菜单时触发 | 当前展开的 Submenu 的 name 值数组 |
MenuItem props
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 菜单项的唯一标识,必填 | String | Number | - |
to | 跳转的链接,支持 vue-router 对象 | String | Object | - |
replace | 路由跳转时,开启 replace 将不会向 history 添加新记录 | Boolean | false |
target | 相当于 a 链接的 target 属性 | String | _self |
append 3.4.0 | 同 vue-router append | Boolean | false |
Submenu slot
名称 | 说明 |
---|---|
无 | 菜单项 |
title | 子菜单标题 |