|
20 | 20 |
|
21 | 21 | | 参数 | 说明 | 类型 | 默认值 | |
22 | 22 | | --- | --- | --- | --- | |
| 23 | +| prefixCls | 组件CSS样式前缀 | string | rw-select | |
| 24 | +| className | 组件className属性 | string | - | |
| 25 | +| style | 组件style属性 | React.CSSProperties | - | |
| 26 | +| tabIndex | 组件tabIndex属性 | number | - | |
| 27 | +| options | 组件数据 | Array\<Option> | false | |
| 28 | +| inline | 内联组件 | boolean | true | |
| 29 | +| emptyLabel | 下拉框无内容时显示 | ReactNode | no data. | |
| 30 | +| valueField | 设置取值字段 | string | value | |
| 31 | +| labelField | 设置显示字段 | string | label | |
| 32 | +| childrenField | 设置子节点字段 | string | children | |
| 33 | +| labelInValue | 是否把每个选项的 label 包装到 value 中,会把 Select 的 value 类型从 `string` 变为 `{key: string, label: ReactNode}` 的格式 | boolean | false | |
23 | 34 | | allowClear | 支持清除 | boolean | false | |
24 | | -| autoClearSearchValue | 是否在选中项后清空搜索框,只在 `mode` 为 `multiple` 或 `tags` 时有效。 | boolean | true | |
25 | 35 | | autoFocus | 默认获取焦点 | boolean | false | |
26 | | -| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true | |
27 | | -| defaultValue | 指定默认选中的条目 | string\|string\[]<br />number\|number\[] | - | |
| 36 | +| defaultValue | 指定默认选中的条目 | string|number | - | |
| 37 | +| value | 指定默认选中的条目 `受控` | string|number | - | |
28 | 38 | | disabled | 是否禁用 | boolean | false | |
| 39 | +| readOnly | 是否只读 | boolean | false | |
| 40 | +| placeholder | 选择框默认文字 | string | - | |
| 41 | +| showArrow | 是否显示下拉小箭头 | boolean | true | |
| 42 | +| showSearch | 显示下拉框的搜索输入框 | boolean | false | |
| 43 | +| optionFilterField | 搜索时过滤对应的 option 属性 | string | label | |
| 44 | +| filterOption | 是否根据输入项进行筛选。当其为一个函数时,会接收 `searchText` `option` 两个参数,当 `option` 符合筛选条件时,应返回 `true`,反之则返回 `false`。 | boolean or function(inputValue, option) | true | |
29 | 45 | | dropdownClassName | 下拉菜单的 className 属性 | string | - | |
30 | 46 | | dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true | |
31 | | -| dropdownRender | 自定义下拉框内容 | (menuNode: ReactNode, props) => ReactNode | - | |
32 | 47 | | dropdownStyle | 下拉菜单的 style 属性 | object | - | |
33 | | -| filterOption | 是否根据输入项进行筛选。当其为一个函数时,会接收 `inputValue` `option` 两个参数,当 `option` 符合筛选条件时,应返回 `true`,反之则返回 `false`。 | boolean or function(inputValue, option) | true | |
34 | | -| firstActiveValue | 默认高亮的选项 | string\|string\[] | - | |
35 | | -| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | Function(triggerNode) | () => document.body | |
36 | | -| labelInValue | 是否把每个选项的 label 包装到 value 中,会把 Select 的 value 类型从 `string` 变为 `{key: string, label: ReactNode}` 的格式 | boolean | false | |
37 | | -| maxTagCount | 最多显示多少个 tag | number | - | |
38 | | -| maxTagPlaceholder | 隐藏 tag 时显示的内容 | ReactNode/function(omittedValues) | - | |
39 | | -| mode | 设置 Select 的模式为多选或标签 | 'multiple' \| 'tags' | - | |
40 | | -| notFoundContent | 当下拉列表为空时显示的内容 | string | 'Not Found' | |
41 | | -| optionFilterProp | 搜索时过滤对应的 option 属性,如设置为 children 表示对内嵌内容进行搜索 | string | value | |
42 | | -| optionLabelProp | 回填到选择框的 Option 的属性值,默认是 Option 的子元素。比如在子元素需要高亮效果时,此值可以设为 `value`。 | string | `children` (combobox 模式下为 `value`) | |
43 | | -| placeholder | 选择框默认文字 | string | - | |
44 | | -| showArrow | 是否显示下拉小箭头 | boolean | true | |
45 | | -| showSearch | 使单选模式可搜索 | boolean | false | |
46 | | -| size | 选择框大小,可选 `large` `small` | string | default | |
47 | | -| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
48 | | -| removeIcon | 自定义的多选框清除图标 | ReactNode | - | |
49 | | -| clearIcon | 自定义的多选框清空图标 | ReactNode | - | |
50 | | -| menuItemSelectedIcon | 自定义当前选中的条目图标 | ReactNode | - | |
51 | | -| tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string\[] | | |
52 | | -| value | 指定当前选中的条目 | string\|string\[]\|number\|number\[] | - | |
| 48 | +| dropdownProps | 下拉菜单扩展属性,参考`ListBox` | object | - | |
| 49 | +| placement | dropdown出现位置<`PlacementType`> | string | bottomLeft | |
| 50 | +| offset | dropdown位置偏移量 | Array<number> | [0, 0] | |
| 51 | +| popupClassName | dropdown弹出层的className属性 | string | - | |
| 52 | +| popupRootComponent | dropdown弹出层自定义组件类型 | ReactNode | div | |
| 53 | +| getPopupContainer | popup渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域。 | Function(triggerNode) | () => document.body | |
| 54 | +| destroyPopupOnHide | dropdown隐藏时删除DOM节点 | boolean | true | |
| 55 | +| defaultOpen | 是否默认展开下拉菜单 | boolean | - | |
| 56 | +| open | 是否展开下拉菜单`受控` | boolean | - | |
| 57 | +| onResizeToHideDropDown | 浏览器大小改变时隐藏下拉框 | boolean | true | |
| 58 | +| onScrollToHideDropDown | 浏览器触发滚动时隐藏下拉框 | boolean | false | |
| 59 | +| renderValue | 自定义渲染被选中的选项 | (menu: ReactNode, option: Option) => ReactNode | - | |
| 60 | +| renderMenu | 自定义下拉框内容 | (menu: ReactNode, props) => ReactNode | - | |
| 61 | +| renderMenuItem | 自定义下拉选项内容 | (label:React.Node, option:Option) => ReactNode | - | |
| 62 | +| renderMenuGroupTitle | 自定义下拉分组标题内容 | (label:React.Node, option:Option) => ReactNode | - | |
53 | 63 | | onBlur | 失去焦点的时回调 | function | - | |
54 | | -| onChange | 选中 option,或 input 的 value 变化(combobox 模式下)时,调用此函数 | function(value, option:Option/Array<Option>) | - | |
55 | | -| onDeselect | 取消选中时调用,参数为选中项的 value (或 key) 值,仅在 multiple 或 tags 模式下生效 | function(value,option:Option) | - | |
56 | 64 | | onFocus | 获得焦点时回调 | function | - | |
| 65 | +| onChange | 选中 option 时调用此函数 | function(value, option:Option) | - | |
| 66 | +| onSearch | 搜索输入框值变化时回调 | function(value: string) | | |
| 67 | +| onSelect | 被选中时调用,参数为选中项的 value (或 key) 值 | function(value, option:Option) | - | |
| 68 | +| onDropDownVisibleChange | 展开/隐藏下拉菜单的回调 | function(open) | - | |
57 | 69 | | onMouseEnter | 鼠标移入时回调 | function | - | |
58 | 70 | | onMouseLeave | 鼠标移出时回调 | function | - | |
59 | | -| onPopupScroll | 下拉列表滚动时的回调 | function | - | |
60 | | -| onSearch | 文本框值变化时回调 | function(value: string) | | |
61 | | -| onSelect | 被选中时调用,参数为选中项的 value (或 key) 值 | function(value, option:Option) | - | |
62 | | -| defaultOpen | 是否默认展开下拉菜单 | boolean | - | |
63 | | -| open | 是否展开下拉菜单 | boolean | - | |
64 | | -| onDropdownVisibleChange | 展开下拉菜单的回调 (3.9.0 后支持) | function(open) | - | |
65 | | -| loading | 加载中状态 | Boolean | false | |
| 71 | + |
66 | 72 |
|
67 | 73 | > 注意,如果发现下拉菜单跟随页面滚动,或者需要在其他弹层中触发 Select,请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentNode}` 将下拉弹层渲染节点固定在触发器的父元素中。 |
68 | 74 |
|
|
78 | 84 | | 参数 | 说明 | 类型 | 默认值 | |
79 | 85 | | --- | --- | --- | --- | |
80 | 86 | | disabled | 是否禁用 | boolean | false | |
81 | | -| key | 和 value 含义一致。如果 React 需要你设置此项,此项值与 value 的值相同,然后可以省略 value 设置 | string | | |
82 | | -| title | 选中该 Option 后,Select 的 title | string | - | |
| 87 | +| label | 选中该 Option 后,Select 的 title | ReactNode | - | |
83 | 88 | | value | 默认根据此属性值进行筛选 | string\|number | - | |
84 | | -| className | Option 器类名 | string | - | |
85 | 89 |
|
86 | 90 | ### OptGroup props |
87 | 91 |
|
88 | 92 | | 参数 | 说明 | 类型 | 默认值 | |
89 | 93 | | --- | --- | --- | --- | |
90 | | -| key | | string | - | |
| 94 | +| children | 子节点 | Array\<Option> | - | |
91 | 95 | | label | 组名 | string\|React.Element | 无 | |
| 96 | + |
| 97 | +### PlacementType |
| 98 | + |
| 99 | +``` |
| 100 | +type PlacementType = |
| 101 | + | bottomLeft |
| 102 | + | bottomCenter |
| 103 | + | bottomRight |
| 104 | + | topLeft |
| 105 | + | topCenter |
| 106 | + | topRight |
| 107 | + | leftTop |
| 108 | + | leftCenter |
| 109 | + | leftBottom |
| 110 | + | rightTop |
| 111 | + | rightCenter |
| 112 | + | rightBottom |
| 113 | + | centerCenter |
| 114 | +
|
| 115 | +``` |
0 commit comments