# @beisen-phoenix/field-dropdown > | 参数 | 说明 | 类型 | 默认值 | 是否必传 | | --------------------- | ------------------------------------------- Latest version **3.3.55** (published 2019-11-25) · ISC license · 0 weekly downloads ## Install ```sh npm install @beisen-phoenix/field-dropdown pnpm add @beisen-phoenix/field-dropdown yarn add @beisen-phoenix/field-dropdown bun add @beisen-phoenix/field-dropdown ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 3.3.55 | | Published | 2019-11-25 | | First published | 2019-04-12 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 7 | | Unpacked size | 60.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | beisencorp | ## Links - npm: https://www.npmjs.com/package/@beisen-phoenix/field-dropdown - npm.io page: https://npm.io/package/@beisen-phoenix/field-dropdown ## Dependencies (7) - [@beisen-phoenix/select](https://npm.io/package/@beisen-phoenix/select.md) ^3.3.55 - [@beisen-phoenix/common-utils](https://npm.io/package/@beisen-phoenix/common-utils.md) ^3.3.55 - [@beisen-phoenix/unmodeled-layer](https://npm.io/package/@beisen-phoenix/unmodeled-layer.md) ^3.3.55 - [@beisen-phoenix/multi-select-list](https://npm.io/package/@beisen-phoenix/multi-select-list.md) ^3.3.55 - [@beisen-phoenix/single-select-list](https://npm.io/package/@beisen-phoenix/single-select-list.md) ^3.3.55 - [@beisen-phoenix/group-single-select](https://npm.io/package/@beisen-phoenix/group-single-select.md) ^3.3.55 - [@beisen-phoenix/form-control-preview](https://npm.io/package/@beisen-phoenix/form-control-preview.md) ^3.3.55 ## Recent versions - 3.3.55 (latest) — 2019-11-25 - 3.2.44-rc.1 (rc) — 2019-10-24 - 3.3.54 — 2019-11-25 - 3.3.53 — 2019-11-25 - 3.3.52 — 2019-11-24 - 3.3.51 — 2019-11-23 - 3.3.50 — 2019-11-22 - 3.3.49 — 2019-11-22 - 3.3.48 — 2019-11-22 - 3.3.46 — 2019-11-22 - 3.3.45 — 2019-11-21 - 3.3.43 — 2019-11-21 - 3.3.42 — 2019-11-21 - 3.3.41-beta.1 — 2019-11-21 - 3.3.41 — 2019-11-21 - … 430 more at https://npm.io/package/@beisen-phoenix/field-dropdown/versions ## README | 参数 | 说明 | 类型 | 默认值 | 是否必传 | | --------------------- | ------------------------------------------------------------------------------------------------------------------------- | ----------------------- | --------- | -------- | | 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 | No | | onBlur | 失焦调用 | | (e)=>void | no | 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 ```javascript 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 ```javascript 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中做立即验证逻辑 ###### 托管模式下的示例 ```javascript const onChange = (data, callback) => { if (!data) { alert('必须选中某个选项'); } else { callback(); } }; ``` ###### 指定挂载点的示例 ```javascript const getPopupContainer = trigger => { return trigger.parentNode; }; ``` --- _Source: https://npm.io/package/@beisen-phoenix/field-dropdown · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._