Dropdown 下拉菜单

文字下拉菜单

文字按钮触发下拉菜单。常用于空间极度受限的收纳操作场景,一般用于表格内详情操作的收纳。

按钮下拉菜单

普通按钮触发下拉菜单。常用于操作收纳场景。

带分割线下拉菜单

通过分割线区分不同的下拉菜单操作。常用于需要区分不同操作结果的场景。

多层下拉菜单

带逻辑层级关系的操作下拉菜单。常用于需要收纳多层逻辑的操作场景。

带禁用操作项的下拉菜单

下拉菜单的操作项可以设置禁用。常用于禁用部分操作项的场景。

自定义其他属性的下拉菜单

下拉菜单依赖 Popup 组件,可以透传自定义 Popup 组件的属性。

定义最大高度的下拉菜单

下拉菜单支持定义最大高度。

自定义主题的下拉菜单

下拉菜单的菜单项都支持自定义主题,根据具体场景使用。

向左展开的下拉菜单

下拉菜单支持向左侧展开。

带图标的下拉菜单

下拉菜单支持配置菜单项的前置图标。

绑定点击事件的下拉菜单

下拉菜单的操作项绑定 click 事件,常用于需要对每个操作项绑定不同的 click 事件的场景。

通过插槽方式使用下拉菜单

下拉菜单操作项支持通过插槽的方式传递操作项。

支持直接使用 t-dropdown-menu

兼容历史版本 通过 dropdown 具名插槽的使用

名称类型默认值说明必传
directionStringright多层级操作时,子层级展开方向。可选项:left/rightN
disabledBooleanfalse是否禁用组件N
hideAfterItemClickBooleantrue点击选项后是否自动隐藏弹窗N
maxColumnWidthString / Number100选项最大宽度,内容超出时,显示为省略号。值为字符串时,值就是最大宽度;值为数字时,单位:pxN
maxHeightNumber300弹窗最大高度,单位:px 。统一控制每一列的高度N
minColumnWidthString / Number10选项最小宽度。值为字符串时,值就是最小宽度;值为数字时,单位:pxN
optionsArray[]下拉操作项。TS 类型:Array<DropdownOption> type DropdownOption = { children?: DropdownOption[] } & TdDropdownItemProps & Record<string, any>详细类型定义N
panelBottomContentString / Slot / Function-面板内的底部内容。TS 类型:string | TNode通用类型定义N
panelTopContentString / Slot / Function-面板内的顶部内容。TS 类型:string | TNode通用类型定义N
placementStringbottom-left弹窗定位方式,可选值同 Popup 组件。可选项:top/left/right/bottom/top-left/top-right/bottom-left/bottom-right/left-top/left-bottom/right-top/right-bottomN
popupPropsObject-透传 Popup 组件属性,方便更加自由地控制。比如使用 popupProps.overlayStyle 设置浮层样式。TS 类型:PopupPropsPopup API Documents详细类型定义N
triggerStringhover触发下拉显示的方式。可选项:hover/click/focus/context-menuN
onClickFunctionTS 类型:(dropdownItem: DropdownOption, context: { e: MouseEvent }) => void
下拉操作项点击时触发
N
名称参数描述
click(dropdownItem: DropdownOption, context: { e: MouseEvent })下拉操作项点击时触发
名称类型默认值说明必传
activeBooleanfalse是否高亮当前操作项N
contentString / Slot / Function''下拉操作项内容。TS 类型:string | TNode通用类型定义N
disabledBooleanfalse是否禁用操作项N
dividerBooleanfalse是否显示操作项之间的分隔线(分隔线默认在下方)N
prefixIconSlot / Function-组件前置图标。TS 类型:TNode通用类型定义N
themeStringdefault下拉菜单选项主题。可选项:default/success/warning/error。TS 类型:DropdownItemTheme type DropdownItemTheme = 'default' | 'success' | 'warning' | 'error'详细类型定义N
valueString / Number / Object-下拉操作项唯一标识。TS 类型:string | number | { [key: string]: any }N
onClickFunctionTS 类型:(dropdownItem: DropdownOption, context: { e: MouseEvent }) => void
点击时触发
N
名称参数描述
click(dropdownItem: DropdownOption, context: { e: MouseEvent })点击时触发

何时使用

当需要在不影响页面结构的情况下,集成多种操作时;

当功能模块入口较多,需收纳部分低频入口,减少对空间的占用时。

与布局相关

下拉菜单在页面内四个区域会有不同的布局方式。
图示:在左上角,向右下角展开
图示:在右上角,向左下角展开
图示:在左下角,向右上角展开
图示:在右下角,向左上角展开。

推荐/慎用示例

针对重要或逻辑相反的操作,应与其他操作进行区分,并至降低优先级减少误触。

当菜单项过多时,应对其进行分类或分级显示,避免菜单太长,造成操作不便。

相似组件

组件名何时使用
下拉菜单当需要在不影响页面结构的情况下,集成多种操作时;当功能模块入口较多,需收纳部分低频入口,减少对空间的占用时。
选择器需要在有限的空间展示大量选项,用来进行数据处理时。
  • left
  • right
  • top
  • left
  • right
  • bottom
  • top-left
  • top-right
  • bottom-left
  • bottom-right
  • left-top
  • left-bottom
  • right-top
  • right-bottom
  • hover
  • click
  • focus
  • context-menu