uxcore-select-form-field v0.4.26
uxcore-select-form-field

TL;DR
uxcore-select-form-field ui component for react
setup develop environment
$ git clone https://github.com/uxcore/uxcore-select-form-field
$ cd uxcore-select-form-field
$ npm install
$ npm run startUsage
demo
API
Props
| 配置项 | 类型 | 必填 | 默认值 | 功能/备注 |
|---|---|---|---|---|
| renderView | func | N | undefined | 自定义 VIEW 模式下的 value 渲染,回调时会回传当前已选中的项目,值全部是 { value, text } 格式 |
| loadingView | string/jsx | N | undefined | 自定义异步加载的 loading 视图,默认为 kuma-loading-s 样式,不建议自定义 |
| valueStrictMode | bool | N | false | value 的数据类型是否严格匹配,在 0.4.16 版本之前 Option 的 value 始终会转成字符串,会导致表单值传入 Number 时无法匹配到 Option,打开这个属性之后不会做格式转换 |
| searchKey | string | N | q | 接口搜索接收的参数 key,如果仅仅改 key 不需要实现 beforeFetch 了 |
| fetchSizeOptions | object | N | - | 如果是通过搜索返回备选项,可以通过设置 fetchSizeOptions 在备选项最后加上一个提示选项,让用户输入关键词查询 |
备注:valueStrictMode 是为了保证业务向下兼容的无奈之举,实际上 value 类型本来就应该是匹配的,但是之前 rc-select 层是通过 key 这个特殊的 prop 来传递 Option 的 value 的,key 始终会被 React 转为字符串,导致 Number 类型的 value 匹配出问题。rc-select 在后续版本增加了 value 属性的传递解决了这个问题,但是为了避免业务中已经使用了 Form.field.value === '2' 且 Option.value === 2 的时候匹配出现兼容问题,因此加了这样一个开关,因此建议新业务这个开关始终打开。
fetchSizeOptions 格式
{
size: 10, // 如果需要开启提示特性,size 为必选。当接口返回的数据条数少于 size 时不会显示提示
text: '默认仅展示 {count} 条数据,更多请输入关键字查询...', // 非必选,有默认文案
style: {} // 需要覆盖提示 Option 样式时可传入
}4 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago