category: Components type: UI Views component: Form chinese: 地址选择框 english: CNAddressField
地址单选组件。
API
成员 | 说明 | 类型 | 默认值 |
---|---|---|---|
value | 当前组件中的地址值,以 JSON 对象的形式表示,其中包含 country ,province ,city ,area ,town 等字段 |
object |
N/A |
onChange | 用户的选择、清空等交互使地址值变化时所调用的函数 参数: value: object 改变后的地址值,可直接设置到 value 属性上nodeChain: [object] 该 value 值对应的地址详细信息,可用来取地名等 |
(value: object, nodeChain: [object], nodeChain: [object]) => void |
N/A |
defaultValue | 默认选择的地址值,以 JSON 对象的形式表示 | object |
{ "country": "1" } (默认选择中国) |
className | 自定义类名 | string |
N/A |
style | 自定义组件内联样式 | object |
N/A |
size | 选择框大小 |
"small" 或 "medium" 或 "large"
|
"medium" |
name | 可以配合表单Form 收集表单元素的数据,要求表单必须指定 field 属性 | String | "" |
label | label 标签的文本 | ReactNode | - |
rules | 配置表单规则,可以配置多个规则,可参考:async-validator,注意Form 表单必须配置field 属性才会生效 | Array | null |
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 |
overseas | 是否显示国家选择列表 | boolean |
false |
level | 选择到几级地址,1 为只选择省,4 为从省到街道全部选择(国家选择请使用 overseas 属性) |
number |
4 (省、市、区、街道四级全部启用) |
hasClear | 是否显示清空按钮(包含国家和地区选择框上的清空“X”,以及选择器弹层上的“清空”按钮) | boolean |
false |
addressSelectPlaceholder | 地址选择框没有值时显示的内容 | string |
请选择地址 |
countrySelectPlaceholder | 国家选择框没有值时显示的内容 | string |
请选择国家 |
disabled | 是否禁止用户编辑地址 | boolean |
false |
provincePartition | 是否对中国的省级行政区细分以方便用户定位特定省。设置为 "letter" 则会以拼音首字母 "A–G" , "H–K" , "L–S" , "T–Z" 划分。 |
"letter" |
N/A |
showSearch | 是否在省市区选择框中启用搜索,搜索仅限省市区三级地址数据 | boolean |
false |
readOnly | 是否禁止用户编辑地址,该属性为 disabled 属性的别名 |
boolean |
false |
fixedWidth | 是否固定选择器弹层的宽度 | boolean |
true |
animation | 是否启用组件的动效 | boolean |
true |
container | 指定渲染地址选择弹层的容器,一般不需要设置该属性 | any | 默认为地址组件本身 |
popupProps | 地址选择弹层的属性,参见 SelectField 组件 | object |
N/A |
popupClassName | 地址选择弹层的类名 | string |
N/A |
countryPopupProps | 国家选择弹层的属性,参见 SelectField 组件 | object |
N/A |
countryPopupClassName | 国家选择弹层的类名 | string |
N/A |
requestAddressUrl | 国家、省、市、区四级数据的接口地址,默认拉取最新数据,其他数据源:"https://division-data.alicdn.com/simple/addr_4_1111_1.js" "https://division-data.alicdn.com/simple/addr_4_1111.js" "https://division-data.alicdn.com/simple/addr_4_0001.js" "https://division-data.alicdn.com/simple/addr_4_0000.js" 还满足不了,请联系 慧仙 新增数据源 |
string |
"//division-data.alicdn.com/simple/addr_4_1111_1_0.js" |
requestTownUrl | 用于街道一级数据的接口地址 | string |
"//lsp.wuliu.taobao.com/locationservice/addr/output_address_town.do" |
requestAddressLevelUrl | 用于街道一级数据的接口地址 | string |
"//lsp.wuliu.taobao.com/locationservice/addr/outputParentDivisons.do" |
hasToSelectToLastLevel | 用户必须选择到指定的层级,如果为 true ,则使用 level 所指定的最后一层,如果为数字则使用相应数字的层级 |
`boolean | number` |
partialSelectionOverlayClosable | 如果启用了 hasToSelectToLastLevel ,在尚未选择到指定的层级时,是否允许关闭选择弹层(如果为 true 则会关闭弹层,当前弹层内的选择状态由于不满足 hasToSelectToLastLevel 的条件会丢失) |
boolean |
true |
hiddenData | 数据中不做展示的地址 ID 数组,用于去除部分数据。注意不要将该属性误写为 "hidden","hidden" 属性将会将组件隐藏 | string[] |
[] |
ignored | 数据中忽略的地址 ID 数组,用于去除部分数据。注意 hiddenData 与本属性的区别,ignored 会将地址节点从数据中彻底剔除(用户无法选择,且使用被忽略掉的地址进行 setValue() 不被识别),hiddenData 仅仅在展示时隐藏地址节点(用户无法选择),且 ignored 、dataOverride 、preprocessor 等属性仅在地址数据加载时有效,之后对这些属性的更新均无效。一般推荐使用 hiddenData 属性 |
string[] |
[] |
dataOverride | 需要临时复写、增加新的地址数据时使用 | { [addressID: number]: string[] } |
|
preprocessor | 需要对地址数据定制更细致的预处理工作时使用的回调接口,一般优先使用 hiddenData , ignored , dataOverride 等属性,需求无法满足时再考虑使用本属性 |
(dataRaw: { [addressID: number]: string[] }) => { [addressID: number]: string[] } |
默认直接返回第一个参数(不进行任何操作) |
language | 国际化语言 可选值: 'zh-cn', 'en-us', 'zh-tw' |
Enum | 'zh-cn' |
locale | 自定义国际化文案对象 | Object | - |