Ant Design Element Plus 比较 – 导航组件之导航菜单

Menu 导航菜单是为页面和功能提供导航的菜单列表。

属性

Antd	Element	说明
defaultOpenKeys	default-openeds	初始展开的 SubMenu 菜单项 key 数组
defaultSelectedKeys	default-active	初始选中的菜单项 key 数组
expandIcon	—	自定义展开图标
forceSubMenuRender	—	在子菜单展示之前就渲染进 DOM
inlineCollapsed	—	inline 时菜单是否收起状态
inlineIndent	—	inline 模式的菜单缩进宽度
items	—	菜单内容
mode	mode	菜单展示模式
multiple	—	是否允许多选
openKeys	—	当前展开的 SubMenu 菜单项 key 数组
overflowedIndicator	ellipsis-icon	用于自定义 Menu 水平空间不足时的省略收缩的图标
selectable	—	是否允许选中
selectedKeys	—	当前选中的菜单项 key 数组
style	—	根节点样式
subMenuCloseDelay	hide-timeout	用户鼠标离开子菜单后关闭延时，单位：秒
subMenuOpenDelay	show-timeout	用户鼠标进入子菜单后开启延时，单位：秒
theme	—	主题颜色
triggerSubMenuAction	—	SubMenu 展开/关闭的触发行为
—	collapse	是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）
—	ellipsis	是否省略多余的子项（仅在横向模式生效）
—	popper-offset	弹出层的偏移量(对所有子菜单有效)
—	unique-opened	是否只保持一个子菜单的展开
—	menu-trigger	子菜单打开的触发方式，只在 `mode` 为 horizontal 时有效。
—	router	是否启用 `vue-router` 模式。启用该模式会在激活导航时以 index 作为 path 进行路由跳转使用 `default-active` 来设置加载时的激活项。
—	collapse-transition	是否开启折叠动画
—	popper-effect	Tooltip 主题，内置了 `dark` / `light` 两种主题，当菜单折叠时生效。
—	close-on-click-outside	可选，单击外部时是否折叠菜单
—	popper-class	为 popper 添加类名
—	persistent	当菜单处于非活动状态且 `persistent` 为 `false` 时，下拉菜单将被销毁

Menu 组件属性比较

MenuItemType

Ant Design Menu 组件的 items 属性的 MenuItemType。

Antd	说明
danger	展示错误状态样式
disabled	是否禁用
extra	额外节点
icon	菜单图标
key	item 的唯一标志
label	菜单项标题
title	设置收缩时展示的悬浮标题

MenuItem 属性说明

SubMenuType

Ant Design Menu 组件的 items 属性的 SubMenuType。

Antd	说明
children	子菜单的菜单项
disabled	是否禁用
icon	菜单图标
key	唯一标志
label	菜单项标题
popupClassName	子菜单样式，`mode="inline"` 时无效
popupOffset	子菜单偏移量，`mode="inline"` 时无效
onTitleClick	点击子菜单标题
theme	设置子菜单的主题，默认从 Menu 上继承

SubMenuType 属性说明

MenuItemGroupType

Ant Design Menu 组件的 items 属性的 MenuItemGroupType。定义类型为 group 时，会作为分组处理。

const groupItem = {
  type: 'group', // Must have
  label: 'My Group',
  children: [],
};

Antd	说明
children	分组的菜单项
label	分组标题

MenuItemGroupType 属性说明

MenuDividerType

Ant Design Menu 组件的 items 属性的 MenuDividerType。菜单项分割线，只用在弹出菜单内，需要定义类型为 divider：

const dividerItem = {
  type: 'divider', // Must have
};

Antd	说明
dashed	是否虚线

MenuDividerType 属性说明

MenuItem

Element Plus Menu 组件下的 MenuItem 组件。

Antd	说明
index	唯一标志
route	Vue Route 路由位置参数
disabled	是否禁用

MenuItem 组件属性

SubMenu

Element Plus Menu 组件下的 SubMenu 组件。

Antd	说明
index	唯一标志
popper-class	为 popper 添加类名
show-timeout	子菜单出现之前的延迟，(继承 menu 的 `show-timeout` 配置)
hide-timeout	子菜单消失之前的延迟，(继承 menu 的 `hide-timeout` 配置)
disabled	是否禁用
teleported	是否将弹出菜单挂载到 body 上，第一级SubMenu默认值为 true，其他SubMenus 的值为 false
popper-offset	弹出窗口的偏移量 (覆盖 `popper`的菜单)
expand-close-icon	父菜单展开且子菜单关闭时的图标， `expand-close-icon` 和 `expand-open-icon` 需要一起配置才能生效
expand-open-icon	父菜单展开且子菜单打开时的图标， `expand-open-icon` 和 `expand-close-icon` 需要一起配置才能生效
collapse-close-icon	父菜单收起且子菜单关闭时的图标， `collapse-close-icon` 和 `collapse-open-icon` 需要一起配置才能生效
collapse-open-icon	父菜单收起且子菜单打开时的图标， `collapse-open-icon` 和 `collapse-close-icon` 需要一起配置才能生效

SubMenu 组件属性

事件

Antd	Element	说明
onClick	—	点击 MenuItem 调用此函数
onDeselect	—	取消选中时调用，仅在 multiple 生效
onOpenChange	—	SubMenu 展开/关闭的回调
onSelect	select	被选中时调用

Menu 组件事件说明

暴露方法

Element	说明
open	打开一个特定的子菜单，参数是要打开的子菜单的索引
close	关闭一个特定的子菜单，参数是要关闭子菜单的索引
updateActiveIndex	通过索引激活指定菜单

Menu 组件暴露方法

小结

通过对比组件发现基于 React 开发的 Ant Design 框架中的组件在实现嵌套时通过属性来传递复杂的对象，而基于 Vue 开发的 Element Plus 框架是基于子组件来实现，两种方式孰优孰劣就要看个人爱好与实际的性能情况。有差异性才能共同探索更好的设计模式。

参考链接：

比较编程网