-
组件布局 Layout视图 View导航 Navigation反馈 Feedback
下拉菜单 Selectissue v2.0.26- v2.0.26
- v2.0.25
- v2.0.24
- v2.0.23
- v2.0.22
- v2.0.21
- v2.0.20
- v2.0.19
- v2.0.18
- v2.0.17
- v2.0.16
- v2.0.15
- v2.0.14
- v2.0.13
- v2.0.12
- v2.0.11
- v2.0.10
- v2.0.9
- v2.0.7
- v2.0.6
- v2.0.5
- v2.0.4
- v2.0.3
- v2.0.2
- v2.0.1
- v1.1.11
- v1.1.10
- v1.1.9
- v1.1.8
- v1.1.7
- v1.1.6
- v1.1.5
- v1.1.4
- v1.1.3
- v1.1.2
- v1.1.1
- v1.0.27
- v1.0.26
- v1.0.25
- v1.0.24
- v1.0.23
- v1.0.22
- v1.0.21
- v1.0.20
- v1.0.19
- v1.0.18
- v1.0.17
- v1.0.16
- v1.0.15
- v1.0.14
- v1.0.13
- v1.0.12
- v1.0.11
- v1.0.9
- v1.0.8
- v2.0.26
- v2.0.25
- v2.0.24
- v2.0.23
- v2.0.22
- v2.0.21
- v2.0.20
- v2.0.19
- v2.0.18
- v2.0.17
- v2.0.16
- v2.0.15
- v2.0.14
- v2.0.13
- v2.0.12
- v2.0.11
- v2.0.10
- v2.0.9
- v2.0.7
- v2.0.6
- v2.0.5
- v2.0.4
- v2.0.3
- v2.0.2
- v2.0.1
- v1.1.11
- v1.1.10
- v1.1.9
- v1.1.8
- v1.1.7
- v1.1.6
- v1.1.5
- v1.1.4
- v1.1.3
- v1.1.2
- v1.1.1
- v1.0.27
- v1.0.26
- v1.0.25
- v1.0.24
- v1.0.23
- v1.0.22
- v1.0.21
- v1.0.20
- v1.0.19
- v1.0.18
- v1.0.17
- v1.0.16
- v1.0.15
- v1.0.14
- v1.0.13
- v1.0.12
- v1.0.11
- v1.0.9
- v1.0.8
下拉弹出菜单,代替原生的选择器。当然Select扩展了其他功能:多选,级联,搜索过滤单选和搜索过滤多选与自动填充选择。
何时使用
代替原生 select下拉列表
如何使用
import { Select } from 'tinper-bee';
or
import Select from 'bee-select';
import 'bee-select/build/Select.css';
能力特性
API
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
open | 控制下拉框展开收起 | bool | false |
value | 指定当前选中的条目 | string/array/react node | - |
defaultValue | 指定默认选中的条目 | string/array/react node | - |
multiple | 支持多选 | bool | false |
allowClear | 支持清除, 单选模式有效 | bool | false |
filterOption | 是否根据输入项进行筛选。当其为一个函数时,会接收 inputValue option 两个参数,当 option 符合筛选条件时,应返回 true,反之则返回 false | bool/func | true |
tags | 可以把随意输入的条目作为 tag,输入项不需要与下拉选项匹配 | bool | false |
onSelect | 被选中时调用,参数为选中项的 value 值 | func | - |
onDeselect | 取消选中时调用,参数为选中项的 option value 值,仅在 multiple 或 tags 模式下生效 | func | - |
onChange | 选中 option,或 input 的 value 变化(combobox 模式下)时,调用此函数 | bool | - |
onSearch | 文本框值变化时回调 | func | - |
onBlur | 失去焦点的时回调 | bool | - |
onFocus | 获得焦点时回调 | func | - |
onMouseEnter | 鼠标移入时回调 | func | - |
onMouseLeave | 鼠标移出时回调 | func | - |
placeholder | 选择框默认文字 | string | - |
notFoundContent | 当下拉列表为空时显示的内容 | string | 'Not Found' |
optionFilterProp | 搜索时过滤对应的 option 属性,如设置为 children 表示对内嵌内容进行搜索。示例 | string | value |
dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | true | - |
optionLabelProp | 回填到选择框的 Option 的属性值,默认是 Option 的子元素。比如在子元素需要高亮效果时,此值可以设为 value | string/number | children (combobox 模式下)为 value |
combobox | 输入框自动提示模式 | bool | false |
size | 选择框大小,可选 lg sm | string | default |
showSearch | 是否可以输入搜索 | bool | false |
supportWrite | 输入搜索查询时是否支持自定义输入,需配合showSearch使用,否则无效 | bool | false |
disabled | 是否禁用 | bool | false |
defaultActiveFirstOption | 是否默认高亮第一个选项 | bool | true |
dropdownStyle | 下拉菜单的 style 属性 | object | - |
dropdownClassName | 下拉菜单的 className 属性 | string | - |
getPopupContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位 | func | () => document.body |
labelInValue | 是否把每个选项的 label 包装到 value 中,决定 Select 的 value 类型。 | bool | false |
data | 可以设置data属性来自动生成option,可以参见demo中的示例。也可以设置是否禁用disabled | Array | - |
autofocus | 设置是否默认打开,从属性需配合onFocus、onBlur 。 | bool | false |
onKeyDown | 按下键盘的回调 | func | - |
Children | 必填,Option组件/OptGroup组件 | node | - |
popData | 下拉框自定义属性,例如 {"data-name":"lucian","data-sex":"man"} ,属性名不能和其它属性名重复,否则会被覆盖 |
Object | - |
maxTagCount | 最多显示多少个 tag,多选时超过次个数显示省略号 | number | - |
maxTagPlaceholder | 超过最大长度显示的内容 | string | - |
noWarp | 多选不换行 | bool | - |
Option
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
key | 如果 react 需要你设置此项,此项值与 value 的值相同,然后可以省略 value 设置 | string | - |
value | 默认根据此属性值进行筛选 | string | - |
disabled | 是否禁用 | bool | false |
className | Option 选择器类名 | string | - |
OptGroup
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
label | 组名 | string/react element | - |
mode | string | - | |
Children | Option组件 | node | - |
已支持的键盘操作
按键 | 功能 |
---|---|
↑(上箭) | 切换选项 |
↓(下箭) | 切换选项 |
esc | 关闭下拉项 |
enter | 选中下拉框 |
注意事项
在Modal组件中,使用Select组件时,需要使用getPopupContainer,来让下拉显示在modal上。
return (
<Select
getPopupContainer={() => document.getElementById('modalId')}>
</Select>
)
更新日志
-
v2.0.18 2019-11-19 ( release地址 )
- bee-select @2.0.18
- [ Fixbug ] 兼容 ie11,解决展开时下拉按钮方向不对的问题。
- bee-select @2.0.18
-
v2.0.17 2019-11-04 ( release地址 )
- bee-select @2.0.17
- [Fixbug]解决老版本样式问题,下拉框闪烁的问题。
- bee-select @2.0.17
-
v2.0.16 2019-09-23 ( release地址 )
- bee-select @2.0.16
- [Feature]支持自定义属性。
- bee-select @2.0.16
-
v2.0.11 2019-04-25 ( release地址 )
- bee-select @2.0.11
- 新增onKeyDown回调,enterKeyDown开关控制enter事件
- 新增下拉框自定义属性功能
- bee-select @2.0.11
-
v2.0.9 2019-04-10 ( release地址 )
- bee-select @2.0.9
- [Feature]下拉框禁用状态与输入框统一
- [Feature]多选下拉的选中状态标识改为主题红色#f53c32
- bee-select @2.0.9
-
v2.0.7 2019-03-19 ( release地址 )
bee-select v2.0.8升级内容
- [Feature]bee-select @2.0.8
- 选中背景色统一改为 #FFF7E7
- 下拉面板及输入框文字色统一为 #212121
- 禁用文字色统一为 #909090
- [Feature]bee-select @2.0.8