地址編輯組件,用于新建、更新、刪除地址信息。
通過以下方式來全局注冊組件,更多注冊方式請參考組件注冊。
import { createApp } from 'vue';
import { AddressEdit } from 'vant';
const app = createApp();
app.use(AddressEdit);
<van-address-edit
:area-list="areaList"
show-delete
show-set-default
show-search-result
:search-result="searchResult"
:area-columns-placeholder="['請選擇', '請選擇', '請選擇']"
@save="onSave"
@delete="onDelete"
@change-detail="onChangeDetail"
/>
import { ref } from 'vue';
import { showToast } from 'vant';
export default {
setup() {
const searchResult = ref([]);
const onSave = () => showToast('save');
const onDelete = () => showToast('delete');
const onChangeDetail = (val) => {
if (val) {
searchResult.value = [
{
name: '黃龍萬科中心',
address: '杭州市西湖區(qū)',
},
];
} else {
searchResult.value = [];
}
};
return {
onSave,
onDelete,
areaList,
searchResult,
onChangeDetail,
};
},
};
參數(shù) | 說明 | 類型 | 默認值 |
---|---|---|---|
area-list | 地區(qū)列表 | object | - |
area-columns-placeholder | 地區(qū)選擇列占位提示文字 | string[] | []
|
area-placeholder | 地區(qū)輸入框占位提示文字 | string | 選擇省 / 市 / 區(qū)
|
address-info | 地址信息初始值 | AddressEditInfo | {}
|
search-result | 詳細地址搜索結果 | AddressEditSearchItem[] | []
|
show-delete | 是否顯示刪除按鈕 | boolean | false
|
show-set-default | 是否顯示默認地址欄 | boolean | false
|
show-search-result | 是否顯示搜索結果 | boolean | false
|
show-area | 是否顯示地區(qū) | boolean | true
|
show-detail | 是否顯示詳細地址 | boolean | true
|
disable-area | 是否禁用地區(qū)選擇 | boolean | false
|
save-button-text | 保存按鈕文字 | string | 保存
|
delete-button-text | 刪除按鈕文字 | string | 刪除
|
detail-rows | 詳細地址輸入框行數(shù) | number | string | 1
|
detail-maxlength | 詳細地址最大長度 | number | string | 200
|
is-saving | 是否顯示保存按鈕加載動畫 | boolean | false
|
is-deleting | 是否顯示刪除按鈕加載動畫 | boolean | false
|
tel-validator | 手機號格式校驗函數(shù) | string => boolean | - |
tel-maxlength | 手機號最大長度 | number | string | - |
validator | 自定義校驗函數(shù) | (key, val) => string | - |
事件名 | 說明 | 回調參數(shù) |
---|---|---|
save | 點擊保存按鈕時觸發(fā) | info: AddressEditInfo |
focus | 輸入框聚焦時觸發(fā) | key: string |
delete | 確認刪除地址時觸發(fā) | info: AddressEditInfo |
select-search | 選中搜索結果時觸發(fā) | value: string |
click-area | 點擊收件地區(qū)時觸發(fā) | - |
change-area | 修改收件地區(qū)時觸發(fā) | selectedOptions: PickerOption[] |
change-detail | 修改詳細地址時觸發(fā) | value: string |
change-default | 切換是否使用默認地址時觸發(fā) | checked: boolean |
名稱 | 說明 |
---|---|
default | 在郵政編碼下方插入內容 |
通過 ref 可以獲取到 AddressEdit 實例并調用實例方法,詳見組件實例方法。
方法名 | 說明 | 參數(shù) | 返回值 |
---|---|---|---|
setAddressDetail | 設置詳細地址 | addressDetail: string | - |
組件導出以下類型定義:
import type {
AddressEditInfo,
AddressEditProps,
AddressEditInstance,
AddressEditSearchItem,
} from 'vant';
?AddressEditInstance
? 是組件實例的類型,用法如下:
import { ref } from 'vue';
import type { AddressEditInstance } from 'vant';
const addressEditRef = ref<AddressEditInstance>();
addressEditRef.value?.setAddressDetail('');
注意:?AddressEditInfo
? 僅作為初始值傳入,表單最終內容可以在 save 事件中獲取。
key | 說明 | 類型 |
---|---|---|
name | 姓名 | string |
tel | 手機號 | string |
province | 省份 | string |
city | 城市 | string |
county | 區(qū)縣 | string |
addressDetail | 詳細地址 | string |
areaCode | 地區(qū)編碼,通過 省市區(qū)選擇 獲?。ū靥睿?/td> | string |
isDefault | 是否為默認地址 | boolean |
key | 說明 | 類型 |
---|---|---|
name | 地名 | string |
address | 詳細地址 | string |
請參考 Area 省市區(qū)選擇 組件。
組件提供了下列 CSS 變量,可用于自定義樣式,使用方法請參考 ConfigProvider 組件。
名稱 | 默認值 | 描述 |
---|---|---|
--van-address-edit-padding | var(--van-padding-sm) | - |
--van-address-edit-buttons-padding | var(--van-padding-xl) var(--van-padding-base) | - |
--van-address-edit-button-margin-bottom | var(--van-padding-sm) | - |
--van-address-edit-button-font-size | var(--van-font-size-lg) | - |
更多建議: