@cniot/address-select

0.3.0 • Public • Published

说明

地址选择组件

使用

引入

import AddressSelect from '@cniot/address-select';

使用

<AddressSelect
    config={{
      apiModel: 'api',
      urlBase: 'your urlBase', // 必填,对应接口域名
    }}
  />

API

属性 是否必填 默认值 说明
value [] (单选时为'') (受控)当前值, 传入最后一级的 regionId, 例如 广东省-广州市-天河区 则传入天河区的 regionId
defaultValue [] (单选时为'') (非受控)默认值
onChange (value, data, extra) => {} 传入 onChange 成为受控组件, 透出的 value: string[] regionId[](单选时为 regionId: string), 最下级的 regionId, 例如 广东省-广州市-天河区 则透出天河区的 regionId
useDetailValue false 把 value onChange 第一个参数从字符串变成对象,具体格式如下
onVisibleChange (visible, type) => {} 下拉框显示或关闭时触发事件的回调函数
multiple true
disabled false 是否禁用选择器
showTopLevel false 是否展示【国家】层级
showSearch false 开启搜索,cdn 模式和 mtop 模式行为不同,api 模式暂不支持
showFooter false 开启底部快捷操作(全选、反选、清除),仅多选模式下生效
dataLanguage local 地址数据国际化, 缺省为 local。可选值为 ISO 码,如 CN、EN
locale - 文案多语言,默认中文。文案内置中、英、日、韩、俄语言包,也可自行传入。
maxLevel 4 显示到几级地址,针对所有国家都生效
levelConfig - 只有在多个国家时(iso='')生效,适用于单独设置某个国家区划层级,优先级高于 maxLevel。示例:
{ CN: 2 }, key 为国家对应 iso
iso CN (填''或其他空值)且(showTopLevel=true)时,可选择国家
maxTagCount - 最多显示多少个 tag, 仅在多选模式下有效
maxTagPlaceholder - 隐藏多余 tag 时显示的内容,在 maxTagCount 生效时起作用
changeOnSelect false 是否选中即发生改变, 仅在单选模式下有效
canOnlyCheckLeaf false 是否仅叶子节点可勾选,仅在多选模式下有效
showDisabledDivision false 地址数据库中,是否展示已删除数据
markedDeletion true 标记已删除数据,配置已删除数据显示时生效, 如果传入了 itemRender 需要自己处理, 不开启 showDisabledDivision 也不会有这个
needSkipLevelData true 是否需要跳级数据,例如,maxLevel = 3, showTopLevel = false, 广东省-中山市 广东省-东莞市 下没有区, 直接到街道, 开启 false 就不显示
includeList [] 国家列表显示,只显示某些国家,ISO 码['CN', 'SG']
excludeList [] 国家列表显示,隐藏某些国家, ISO 码['CN', 'SG']
blackList [] 过滤某些区划不显示,数组内为区划 id。不包括国家级别,过滤国家请使用 excludeList
divisionSort - 区划排序,默认按字母进行排序。可选值 ID 和 EN
readOnly - 预览模式
config configProps 地址库参数

config 相关配置

属性 是否必填 默认值 说明
apiModel mtop 可选值,"api","cdn"
cdnUrl apiModel 为 cdn 模式下的 cdn 地址 当前版本:https://division-data.alicdn.com/simple/addr_1_4_all.js
urlBase apiModel 为 api 时必填, host 地址,如https://oneapi.alibaba-inc.com/mock/CNBP
params api 模式,请求时携带参数,例如 { version: '18Q4' }

useDetailValue 开启时数据格式

{
  countryCode: null,
  countryName: null,

  provinceCode: null,
  provinceName: null,

  cityCode: null,
  cityName: null,

  countyCode: null,
  countyName: null,

  streetCode: null,
  streetName: null,
}

Readme

Keywords

none

Package Sidebar

Install

npm i @cniot/address-select

Weekly Downloads

1

Version

0.3.0

License

ISC

Unpacked Size

342 kB

Total Files

10

Last publish

Collaborators

  • hxuena
  • lanjian.yj
  • qige.yzx
  • mingnan.wmn
  • xiaobc
  • wangyuhao.wyh
  • rio7
  • wukidy
  • jun.lu
  • zhouhuan