@beisen-phoenix/field-dropdown

参数	说明	类型	默认值	是否必传
selectType	类型('single' / 'multiple' / 'group') 分别代表单选、多选、分组单选	string	single	No
disabled	该输入项是否禁用	boolean	false	No
placeHolder	输入框的占位符	string		No
hasError	是否显示错误	boolean	false	No
isPreview	是否用于表单展示态	boolean	false	No
value	已选的值,需要与 options 中的 value 对应(如果是多选 value 默认使用','分开，如“1,2,3”,也可以用 splitKey 指定分隔符)	string		No
zIndex	弹层的 z-index 值	number	199	No
stretch	弹层是否根据父容器的大小进行拉伸,可选值包括 width、minWidth、height、minHeight	string		No
options	可选项	obj[]		Yes
isSearch	是否开启搜索功能	boolean	true	No
optionSearch	选项列表上是否显示搜索	boolean	false	No
hostSubmit	多选模式下是否托管提交事件,如果托管,则弹层不会主动关闭,需要用户手动调用 callback	boolean	false	No
onChange	选中地区数据的回调,负责将值传回 form	(data,callback) => void		No
getPopupContainer	弹层挂载的容器(默认是挂载到 body 下,通过此函数可以改变弹层挂载的节点)	Funtion		No
layerWidth	如果不选择下拉宽度自适应，可以使用此属性自己控制宽度	number		No
size	选择框大小可配置	small 、large 、normal		normal
displayLabel	非空时，选择器中选中值的展示（解决异步数据源时，无法指定当前选中值的问题）'选项一,选项二'，也可以通过 splitKey 指定分隔符	string		No
showCheckAll	多选模式是否显示全选		boolean	true
onBlur	失焦调用		(e)=>void	no
extraCls	自定义 selector class,一般用于覆盖组件默认样式使用 (2019-09-11 新增 api)	string	无	否
caseSensitive	搜索时是否大小写敏感 (2019-09-27 新增 api)	boolean	false	否
optionSearchAutoFocus	弹层内搜索框是否自动获取焦点（2019-10-15 新增）	boolean	false	否
splitKey	多选时传入 value 和 displayLabel 可以指定分隔符分割（2019-10-30 新增）	string	false	","

changelog

2019/10/30

• 新增 splitKey,由于在复选下有些 value 或者 label 里有“，”号这个字符，导致组件内部通过“，”分割的逻辑不能做到支持，所以新增 splitKey 属性，在复选场景下组件使用者可以根据自身需要，将 value 或者 label 按照固定字符进行分割

2019/10/10

• 变更 displayLabel 属性，移除对禁用状态的判断，指定了此属性且非空，选择器中直接展示此属性的值。【注意：更改选中数据后，需要同步修改该属性值】

2019/09/27

• 新增 caseSensitive 属性，搜索时是否大小写敏感

2019/09/11

• 新增 autoFocus 属性，是否挂载自动获焦

2019/09/09

• 新增 onBlur 属性，选择器失焦时将会调用）

  2019/09/03

• 新增 displayLabel 属性，用于禁用状态下，选中值的展示（解决禁用没有数据源时，无法指定选中值的问题）

2019/09/02

• 新增 layerWidth 属性，用于控制下拉选择的层的宽度
• 新增 size 属性，用于控制下拉选的大小

单选和多选的 options

const options2 = [
    {
        label: 'aaabbb',
        value: 0
    },
    {
        label: 'bbbccc',
        value: 1
    },
    {
        label: 'cccddd',
        value: 2
    },
    {
        label: 'dddeee',
        value: 3
    },
    {
        label: 'eeefff',
        value: 4
    },
    {
        label: 'fffggg',
        value: 5
    },
    {
        label: 'ggghhh',
        value: 6
    },
    {
        label: 'hhhiii',
        value: 7
    },
    {
        label: 'jjj',
        value: 8
    },
    {
        label: 'kkk',
        value: 9
    },
    {
        label: 'LLL',
        value: 10
    },
    {
        label: 'MMM',
        value: 11
    },
    {
        label: 'NNN',
        value: 12
    },
    {
        label: 'OOO',
        value: 13
    }
];

分组单选的 options

const options1 = [
    {
        label: '分类一',
        children: [
            {
                label:
                    '在职员工测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试',
                value: 'employee'
            },
            {
                label: '退休员工',
                value: 'retiredemployee'
            },
            {
                label: '离职员工',
                value: 'leavedemployee'
            }
        ]
    },
    {
        label: '分类三',
        children: [
            {
                label: '在职员工1',
                value: 'employee111'
            },
            {
                label: '退休员工2',
                value: 'retiredemployee1111'
            },
            {
                label: '离职员工3',
                value: 'leavedemployee222'
            }
        ]
    }
];

hostSubmit 说明

此 api 在多选模式下起作用,表示是否要自己托管确定按钮的点击事件

• 如果值为 true 表示要托管,此时的 onChange 回调函数的格式为(data,callback) => void。
• 若值为 false,表示不托管此事件,则 onChange 的回调函数格式为(data) => void。

什么情况下会使用此 api

• 希望在 onChange 接受到选中的之后,立即做一些自定义验证,根据验证结果来决定是否要关闭多选弹层

什么情况下不会使用此 api

• 单选模式不会使用此 api

•        不需要在onChange中做立即验证逻辑
  

托管模式下的示例

const onChange = (data, callback) => {
    if (!data) {
        alert('必须选中某个选项');
    } else {
        callback();
    }
};

指定挂载点的示例

const getPopupContainer = trigger => {
    return trigger.parentNode;
};