Dropdown 下拉菜单是向下弹出的列表。Select 是用于选择，而 Dropdown 是命令集合。
属性
Dropdown
| Antd | Element | 说明 |
|---|---|---|
| arrow | — | 下拉框箭头是否显示 |
| autoAdjustOverflow | — | 下拉框被遮挡时自动调整位置 |
| autoFocus | — | 打开后自动聚焦下拉框 |
| — | button-props | 按钮组件的 props |
| disabled | disabled | 菜单是否禁用 |
| destroyOnHidden | persistent | 关闭后是否销毁 Dropdown / 当下拉菜单处于非活动状态且 persistent 为 false 时，下拉菜单将被销毁 |
| popupRender | — | 自定义弹出框内容 |
| — | popper-class | 自定义浮层类名 |
| — | popper-options | popper.js 参数 |
| getPopupContainer | — | 菜单渲染父节点。 |
| — | hide-on-click | 是否在点击菜单项后隐藏菜单 |
| — | hide-timeout | 收起下拉菜单的延时（仅在 trigger 为 hover 时有效） |
| menu | — | 菜单配置项 |
| — | max-height | 菜单最大高度 |
| overlayClassName | — | 下拉根元素的类名称 |
| overlayStyle | — | 下拉根元素的样式 |
| placement | placement | 菜单弹出位置 |
| — | show-timeout | 展开下拉菜单的延时，仅在 trigger 为 hover 时有效 |
| trigger | trigger | 触发下拉的行为，移动端不支持 hover |
| — | triggerKeys | 指定键盘上哪些按键可以触发操作 |
| open | — | 菜单是否显示，小于 4.23.0 使用 visible |
| — | type | 菜单按钮类型，同 Button 组件一样，仅在 split-button 为 true 的情况下有效。 |
| — | size | 菜单尺寸，在 split-button 为 true 的情况下也对触发按钮生效。 |
| — | split-button | 下拉触发元素呈现为按钮组 |
| — | role | 下拉菜单的 ARIA 属性。 根据具体场景，您可能想要将此更改为“navigation” |
| — | tabindex | Dropdown 组件的 tabindex |
| — | teleported | 是否将下拉列表插入至 body 元素 |
Dropdown Slots
Element Plus 使用插槽来展示触发元素与下拉菜单。
| Element | 说明 |
|---|---|
| default | 下拉菜单的内容。 注意：必须是有效的 html DOM 元素（例如 <span>、<button> 等）或 el-component，以附加监听触发器 |
| dropdown | 下拉列表，通常是 <el-dropdown-menu> 组件 |
DropdownItem
Element Plus 下拉菜单项。
| Element | 说明 |
|---|---|
| command | 派发到command回调函数的指令参数 |
| disabled | 是否禁用 |
| divided | 是否显示分隔符 |
| icon | 自定义图标 |
Dropdown.Button
Ant Design 中 Dropdown 的变体，属性与 Dropdown 的相同。还包括以下属性：
| Antd | Element |
|---|---|
| buttonsRender | 自定义左右两个按钮 |
| loading | 设置按钮载入状态，和 Button 一致 |
| danger | 设置危险按钮 |
| icon | 右侧的 icon |
| size | 按钮大小，和 Button 一致 |
| type | 按钮类型，和 Button 一致 |
| onClick | 点击左侧按钮的回调，和 Button 一致 |
事件
| Antd | Element | 说明 |
|---|---|---|
| onOpenChange | — | 菜单显示状态改变时调用，点击菜单按钮导致的消失不会触发。小于 4.23.0 使用 onVisibleChange（为什么?） |
| — | click | split-button 为 true 时，点击左侧按钮的回调 |
| — | command | 当下拉项被点击时触发，参数是从下拉菜单中发送的命令 |
| — | visible-change | 当下拉菜单出现/消失时触发器, 当它出现时, 参数将是 true, 否则将是 false |
暴露方法
| Element | 说明 |
|---|---|
| handleOpen | 打开下拉菜单 |
| handleClose | 关闭下拉菜单 |
小结
通过对比组件发现基于 React 开发的 Ant Design 框架中的组件在实现嵌套时通过属性来传递复杂的对象，而基于 Vue 开发的 Element Plus 框架是基于 slot 来传递，两种方式孰优孰劣就要看个人爱好与实际的性能情况。有差异性才能共同探索更好的设计模式。
参考链接：
发表回复