@cainiaofe/cn-address v0.4.1

通用文档

基于 @cainiaofe/cn-ui 版本

• Web 组件研发规约
• 开发环境配置
  • 请确保 git 版本不小于 2.9
• 样式方案
• 地址数据国际化方案
• 代码质量
• 地址库 （https://address-console.cainiao-inc.com）
• 收费说明
• mtop 接口出入参说明
• 地址组件设计

Getting Started

tnpm i

tnpm start

Running the tests

tnpm run test

组件名称

菜鸟地址选择组件

简介

内部采用地址库标准数据，支持国内外数据和单选多选，支持多种数据源

支持功能

功能支持包括：

• 国家或地区选择
• 默认值设置，设置后默认选中
• 支持受控和非受控两种模式
• 区划选择
• 禁用选择器
• 单选或多选
• 区划层级设置(可对全部或单独某个国家设置国家)
• 快捷操作栏是否开启（仅多选模式），全选、反选、取消
• 指定某个国家区划选择
• 已删除区划数据是否显示
• 标记已删除数据（显示已删除数据时生效）
• 指定某几个国家显示
• 指定某几个国家不显示
• 过滤黑名单区划（非国家级别区划）
• 数据源支持 mtop 地址库数据、自定义接口形式, 接口要求，以及 cdn 形式，需传入 cdn 地址
• 数据版本定制
• 支持菜鸟地址库数据和lazada数据
• 区划数据自动升级
• 支持与 CnFilter 结合使用
• 支持与 Form 结合使用
• 多语言支持，数据多语言及文案
• 支持搜索功能
• 支持预览模式
• 区划排序，默认按字母进行排序。可选值 ID(按 id 排序)和 EN(按 en 或 pinyin 名称排序)
• 选择即生效（单选模式）
• 仅叶子节点可选（多选模式）
• 最多显示多少个 tag（多选模式）
• 支持 useDetailValue 模式
• 支持 useDetailMap 自定义映射
• value 可接收string或者对象类型数据

API

• configProps 地址库参数:

• 地址库数据参考

dataLanguage为local时,取值为 names[item.language]
此时item.language = 'CN'
{
  "disable": false,
  "id": "310000",
  "iso": "CN",
  "language": "CN",
  "leaf": false,
  "level": 2,
  "names": {
    "EN": "Shanghai",
    "CN": "上海"
  }
}

用例

<CnAddress
	className='w'
	onChange={(v, data, extra) => {
		console.log(v, data, extra);
	}}
	maxLevel={5}
	iso='CN'
	showTopLevel={true}
	config={{
		businessId: '', // 填申请并填写
	}}
/>