Element-Ui组件 NavMenu 导航菜单的具体使用

2023-08-10 11:08:05 72

本文来源于Element官方文档：

http://element-cn.eleme.io/#/zh-CN/component/menu

基础用法

普通导航菜单


处理中心


我的工作台
选项1
选项2
选项3


选项4
选项1
选项2
选项3


消息中心
订单管理

垂直导航条





导航一


分组一
选项1
选项2


选项3


选项4
选项1




导航二



导航三



导航四

折叠导航条


展开
收起





导航一


分组一
选项1
选项2


选项3


选项4
选项1




导航二



导航三



导航四

MenuAttribute：

参数类型说明可选值默认值

mode 模式 string horizontal/vertical vertical

collapse 是否水平折叠收起菜单（仅在mode为vertical时可用） boolean — false

background-color 菜单的背景色（仅支持hex格式） string — ffffff

text-color 菜单的文字颜色（仅支持hex格式） string — 303133

active-text-color 当前激活菜单的文字颜色（仅支持hex格式） string — 409EFF

default-active 当前激活菜单的index string — —

default-openeds 当前打开的sub-menu的key数组 Array — —

unique-opened 是否只保持一个子菜单的展开 boolean — false

menu-trigger 子菜单打开的触发方式(只在mode为horizontal时有效) string — hover

router 是否使用vue-router的模式，启用该模式会在激活导航时以index作为path进行路由跳转 boolean — false

MenuMethods:

事件名称说明参数

open 展开指定的sub-menuindex: 需要打开的sub-menu的index

close 收起指定的sub-menuindex: 需要收起的sub-menu的index

MenuEvents:

事件名称说明回调参数

select 菜单激活回调 index:选中菜单项的index,indexPath:选中菜单项的indexpath

open sub-menu展开的回调 index:打开的sub-menu的index，indexPath:打开的sub-menu的indexpath

close sub-menu收起的回调 index:收起的sub-menu的index，indexPath:收起的sub-menu的indexpath

SubMenuAttribute:

参数说明类型可选值默认值

mode 唯一标志 string — —

mode 弹出菜单的自定义类名 string — —

mode 展开sub-menu的延时 number — 300

mode 收起sub-menu的延时 number — 300

mode 是否禁用 boolean — false

Menu-ItemAttribute:

参数说明类型可选值默认值

index 唯一标志 string — —

route VueRouter路径对象 Object — —

disabled 是否禁用 boolean — false

Menu-GroupAttribute:

参数说明类型可选值默认值

title 分组标题 string — —

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Element-Ui组件 NavMenu 导航菜单的具体使用

热门推荐

随机推荐