Menu 导航菜单

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

    注意:非 template/render 模式下,需使用 。

    顶部导航

    水平的顶部导航菜单。

    通过设置属性 themelightdarkprimary 可以选择主题。

    通过事件 on-select 可以得到点击菜单的 name 值,从而控制页面路由或自定义操作。

    侧栏导航

    垂直导航菜单,可以内嵌子菜单。

    设置 active-name 可以选中指定的菜单,设置 可以展开指定的子菜单。

    设置属性 accordion 可以开启手风琴模式,每次只能展开一个子菜单。

    通过设置属性 themelightdark 可以选择主题,侧栏菜单不支持 primary 主题。

    Menu 导航菜单 - 图3

    内嵌菜单

    垂直菜单,子菜单内嵌在菜单区域。

    分组

    使用 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 添加新记录Booleanfalse
    target相当于 a 链接的 target 属性String_self
    append 3.4.0同 vue-router appendBooleanfalse

    Submenu slot

    名称说明
    菜单项
    title子菜单标题