介绍
收货地址编辑组件，用于新建、更新、删除收货地址。
引入
代码演示
基础用法
API
Props
| 参数 | 说明 | 类型 | 默认值 | |
|---|---|---|---|---|
| area-list | 地区列表 | object | - | |
| area-columns-placeholder | 地区选择列占位提示文字 | string[] | [] | |
area-placeholder v2.6.1 | 地区输入框占位提示文字 | string | 选择省 / 市 / 区 | |
| address-info | 收货人信息初始值 | AddressInfo | {} | |
| search-result | 详细地址搜索结果 | SearchResult[] | [] | |
| show-postal | 是否显示邮政编码 | boolean | false | |
| show-delete | 是否显示删除按钮 | boolean | false | |
| show-set-default | 是否显示默认地址栏 | boolean | false | |
| show-search-result | 是否显示搜索结果 | boolean | false | |
| show-area | 是否显示地区 | boolean | true | |
| show-detail | 是否显示详细地址 | boolean | true | |
disable-area v2.5.0 | 是否禁用地区选择 | boolean | false | |
| save-button-text | 保存按钮文字 | string | 保存 | |
| delete-button-text | 删除按钮文字 | string | 删除 | |
| detail-rows | 详细地址输入框行数 | number / string | 1 | |
| detail-maxlength | 详细地址最大长度 | number / string | 200 | |
| is-saving | 是否显示保存按钮加载动画 | boolean | false | |
| is-deleting | 是否显示删除按钮加载动画 | boolean | false | |
| tel-validator | 手机号格式校验函数 | string => boolean | - | |
tel-maxlength v2.10.0 | 手机号最大长度 | number / string | - | |
| postal-validator | 邮政编码格式校验函数 | string => boolean | - | |
| validator | 自定义校验函数 | (key, val) => string | - |
Events
| 事件名 | 说明 | 回调参数 | |
|---|---|---|---|
| save | 点击保存按钮时触发 | content：表单内容 | |
| focus | 输入框聚焦时触发 | key: 聚焦的输入框对应的 key | |
| delete | 确认删除地址时触发 | content：表单内容 | |
| cancel-delete | 取消删除地址时触发 | content：表单内容 | |
| select-search | 选中搜索结果时触发 | value: 搜索结果 | |
click-area v2.5.9 | 点击收件地区时触发 | - | |
| change-area | 修改收件地区时触发 | values: 地区信息 | |
| change-detail | 修改详细地址时触发 | value: 详细地址内容 | |
| change-default | 切换是否使用默认地址时触发 | value: 是否选中 |
Slots
| 名称 | 说明 | |
|---|---|---|
| default | 在邮政编码下方插入内容 |
方法
通过 ref 可以获取到 AddressEdit 实例并调用实例方法，详见
。
| 方法名 | 说明 | 参数 | 返回值 | |
|---|---|---|---|---|
| setAddressDetail | 设置详细地址 | addressDetail: string | - |
AddressInfo 数据格式
注意：AddressInfo 仅作为初始值传入，表单最终内容可以在 save 事件中获取
| key | 说明 | 类型 | |
|---|---|---|---|
| id | 每条地址的唯一标识 | number / string | |
| name | 收货人姓名 | string | |
| tel | 收货人手机号 | string | |
| province | 省份 | string | |
| city | 城市 | string | |
| county | 区县 | string | |
| addressDetail | 详细地址 | string | |
| areaCode | 地区编码，通过省市区选择获取（必填） | string | |
| postalCode | 邮政编码 | string | |
| isDefault | 是否为默认地址 | boolean |
SearchResult 数据格式
| key | 说明 | 类型 | |
|---|---|---|---|
| name | 地名 | string | |
| address | 详细地址 | string |
省市县列表数据格式
请参考
组件。
样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考
。
| 名称 | 默认值 | 描述 | |
|---|---|---|---|
| @address-edit-padding | @padding-sm | - | |
| @address-edit-buttons-padding | @padding-xl @padding-base | - | |
| @address-edit-button-margin-bottom | @padding-sm | - | |
| @address-edit-detail-finish-color | @blue | - | |
| @address-edit-detail-finish-font-size | @font-size-sm | - |
效果图：
