city-casereport/miniprogram_npm/tdesign-miniprogram/dropdown-menu/README.md
2023-12-06 14:22:42 +08:00

4.9 KiB
Raw Blame History

title description spline isComponent
DropdownMenu 下拉菜单 菜单呈现数个并列的选项类目,用于整个页面的内容筛选,由菜单面板和菜单选项组成。 message true

该组件于 0.8.0 版本上线,请留意版本。

引入

引入组件

app.jsonpage.json 中引入组件:

"usingComponents": {
  "t-dropdown-menu": "tdesign-miniprogram/dropdown-menu/dropdown-menu",
  "t-dropdown-item": "tdesign-miniprogram/dropdown-item/dropdown-item"
}

用法

单选下拉菜单

{{ single }}

多列下拉菜单

{{ multi }}

树形下拉菜单

{{ tree }}

API

DropdownMenu Props

名称 类型 默认值 说明 必传
arrow-icon String / Object 'caret-down-small' 自定义箭头图标 N
close-on-click-overlay Boolean true 是否在点击遮罩层后关闭菜单 N
duration String / Number 200 动画时长 N
show-overlay Boolean true 是否显示遮罩层 N
z-index Number 11600 菜单栏 z-index 层级 N

DropdownMenu Events

名称 参数 描述
open - 菜单展开时触发
close - 菜单关闭时触发

DropdownMenu 外部样式类

类名 说明
t-class 根节点样式类
t-class-item 选项样式类
t-class-label 标签样式类
t-class-icon 图标样式类

DropdownItem Props

名称 类型 默认值 说明 必传
disabled Boolean false 是否禁用 N
keys Object - 用来定义 value / label 在 options 中对应的字段别名。TS 类型:KeysType N
label String - 标题 N
multiple Boolean false 是否多选 N
options Array [] 选项数据。TS 类型:Array<DropdownOption> interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }详细类型定义 N
options-columns String / Number 1 选项分栏1-3 N
options-layout String columns 已废弃。选项排列;不再支持 tree 布局,可与 treeSelect 配合使用 N
value String / Number / Array undefined 选中值。TS 类型:DropdownValue type DropdownValue = string | number | Array<DropdownValue>;详细类型定义 N
default-value String / Number / Array undefined 选中值。非受控属性。TS 类型:DropdownValue type DropdownValue = string | number | Array<DropdownValue>;详细类型定义 N

DropdownItem Events

名称 参数 描述
change (value: DropdownValue) 值改变时触发
confirm (value: DropdownValue) 点击确认时触发
reset - 点击重置时触发
close - 关闭时触发

DropdownItem 外部样式类

类名 说明
t-class 根节点样式类
t-class-content 内容样式类
t-class-column 菜单列样式类
t-class-column-item 菜单列选项样式类
t-class-column-item-label 菜单列选项标签样式类
t-class-footer 底部样式类

CSS 变量

组件提供了下列 CSS 变量,可用于自定义样式。

名称 默认值 描述
--td-dropdown-menu-active-colorm @brand-color -
--td-dropdown-menu-bg-colorm @bg-color-container -
--td-dropdown-menu-border-width 1px -
--td-dropdown-menu-colorm @font-gray-1 -
--td-dropdown-menu-disabled-colorm @font-gray-4 -
--td-dropdown-menu-font-sizem 28rpx -
--td-dropdown-menu-icon-sizem 48rpx -
--td-dropdown-body-max-height 560rpx -
--td-dropdown-menu-bg-color @bg-color-container -
--td-tree-bg-color @bg-color-container -
--td-tree-item-active-color @brand-color -
--td-tree-item-font-size 32rpx -
--td-tree-item-height 96rpx -
--td-tree-root-bg-color @bg-color-secondarycontainer -