@alicd/crui-select-combobox-field

从指定的值列表中选择性输入，唯一和Select不一致的点在于Combobox会保留用户输入的值。

Usage no npm install needed!

<script type="module">
  import alicdCruiSelectComboboxField from 'https://cdn.skypack.dev/@alicd/crui-select-combobox-field';
</script>

README

category: Components type: UI Views component: Form chinese: 组合下拉框 english: SelectComboboxField source: next-select

从指定的值列表中选择性输入，唯一和 SelectField 不一致的点在于 SelectComboboxField 会保留用户输入的值。

dataSource的使用

SelectComboboxField 同时支持children和在props中传入dataSource作为数据源,如果同时设置,则以children为准.

注意： SelectField 默认使用value作为渲染的菜单项的key值，所以value不能重复, 否则无法渲染下拉菜单

  • children的方式
<SelectComboboxField>
    <Select.Option value="option1">option1</Select.Option>
    <Select.Option value="option2">option2</Select.Option>
    <Select.Option disabled={true}>disabled</Select.Option>
</SelectComboboxField>
  • props的方式
var dataSource = [
    {label:'option1', value:'option1},
    {label:'option2', value:'option2'},
    {label:'disabled', disabled:true}
]
<SelectComboboxField dataSource={dataSource}/>

API

SelectComboboxField

参数 说明 类型 默认值
prefix 样式类名的品牌前缀 String 'next-'
className 自定义类名 String -
style 自定义内联样式 Object -
size 选择器的尺寸

可选值:
'small', 'medium', 'large'		 Enum 'medium'
shape 选择器的形状

可选值:
'normal', 'arrow-only'		 Enum 'normal'
value 当前值 String/Array/ReactNode/Object -
defaultValue 初始默认值 String/Array/ReactNode/Object -
onChange SelectComboboxField 发生改变的时候触发的回调, 注意在输入的时候该事件不会被触发，如果需要监听输入的事件请使用onInputUpdate

签名:
Function(value: String, option: Object) => void
参数:
value: {String} 数据
option: {Object} 选项		 Function () => {}
container 弹层挂载容器节点 String/Function -
placeholder 没有值的时候的占位符 String ''
visible 当前弹层是否显示 Boolean -
defaultVisible 弹层初始是否显示 Boolean -
disabled 是否禁用 Boolean false
dataSource 传入的数据，可以动态渲染子项,详见dataSource的使用 Array -
multiple 是否是多选 Boolean false
tags 是否启用标签模式, 仅在多选时有效,效果是除了自动提示外的选项, 也可以使用输入的文字作为标签 Boolean -
fillProps 填充到选择框里面的值 String 'value'
showSearch 是否显示顶部的搜索框 Boolean false
filterBy 在输入的时候过滤的函数,仅在filterLocal为true时候有效

签名:
Function(filterValue: String, option: Object) => Boolean
参数:
filterValue: {String} 筛选值
option: {Object} 选项
返回值:
{Boolean} 是否保留当前选项
 Function -
filterLocal 是否使用本地过滤,在数据源为远程的时候需要关闭此选项 Boolean true
hasArrow 是否显示右侧的箭头 Boolean true
autoWidth 下拉菜单是否与选择器对齐 Boolean true
hiddenSelected 选择后是否立即隐藏菜单，单选是默认隐藏的，因此该选项只在多选的时候有效 Boolean false
onInputUpdate SelectComboboxField 在用户输入的时候触发的回调

签名:
Function(value: String) => void
参数:
value: {String} 输入值		 Function () => {}
onInputFocus SelectComboboxField 获取焦点的时候触发的回调

签名:
Function(e: Event, clickByUser: Boolean) => void
参数:
e: {Event} DOM事件对象
clickByUser: {Boolean} 是否用户点击		 Function () => {}
onInputBlur SelectComboboxField 失去焦点的时候触发的回调

签名:
Function(e: Event, inputValue: String) => void
参数:
e: {Event} DOM事件对象
inputValue: {String} 输入值		 Function () => {}
onInputEnter SelectComboboxField 回车的时候触发的回调

签名:
Function(e: Event) => void
参数:
e: {Event} DOM事件对象		 Function () => {}
onSearch 在搜索框中输入触发的事件，仅在showSearch为true时候有效

签名:
Function(value: String) => void
参数:
value: {String} 搜索值		 Function () => {}
hasClear 是否显示清空按钮，该按钮可以清空select的value, 该属性仅在单选模式下有效 Boolean false
popupClassName 弹出层的样式类 String -
popupProps 弹出层的属性 Object -
onVisibleChange 弹层显示或隐藏的时候触发的事件

签名:
Function(visible: Boolean) => void
参数:
visible: {Boolean} 弹层是否隐藏和显示		 Function () => {}
onOpen 弹层显示时触发的事件

签名:
Function() => void		 Function () => {}
onClose 弹层隐藏时触发的事件

签名:
Function() => void		 Function () => {}
locale 自定义国际化文案对象

属性:
selectPlaceHolder: {String} 请选择的提示文案
comboboxPlaceHolder: {String} 请输入的提示文案		 Object { selectPlaceHolder: '请选择', comboboxPlaceHolder: '请输入' }
language 自定义国际化语言

可选值:
'en-us', 'zh-cn', 'zh-tw'		 Enum -
label label 标签的文本 ReactNode -
labelCol label 标签布局，通 <Col> 组件，设置 span offset 值，如 {span: 8, offset: 16}，该项仅在垂直表单有效 Object -
help 提示信息，如不设置，则会根据校验规则自动生成. 如果设置会受控（ps: 可以利用这点自定义错误位置,详细看demo自定义错误) ReactNode -
validateStatus 校验状态，如不设置，则会根据校验规则自动生成可选值:'''success'(成功)'error'(失败)'loading'(校验中) Enum -
hasFeedback 配合 validateStatus 属性使用，是否展示校验状态图标, 目前只有Input支持 Boolean false
wrapperCol 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol Object -
extra 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 位于错误信息后面 ReactNode -
inputStyle 表单输入框自定义内联样式 Object/String null
showValidateType 应用于Field 类元素后，指定其展示错误的方式，可选值有 help、tooltip 两种 String help
name walle 模式下才支持 可以配合表单Form 收集表单元素的数据，要求表单必须指定 field 属性 String ''
rules walle 模式下才支持 配置表单规则，可以配置多个规则，可参考：async-validator，注意Form 表单必须配置field 属性才会生效 Array null
x-bind walle 模式下才支持 双向绑定某一个变量 state null

Select.OptionGroup

参数 说明 类型 默认值
label 设置分组的文案 String/ReactNode -

Select.Option

参数 说明 类型 默认值
value 选项值 any -
disabled 是否禁用 Boolean -
children 列表项显示的值，通过子标签的方式设置 any -