AddressEdit 地址編輯 - Vant 4

AddressEdit 地址編輯

📍 介紹

地址編輯組件是電商應用的必備工具！它提供完整的地址管理功能，支援新建、更新、刪除地址資訊。無論是收貨地址、發票地址還是其他地址資訊，都能輕鬆搞定，讓使用者享受便捷的地址管理體驗。

📦 引入

透過以下方式來全域註冊組件，更多註冊方式請參考組件註冊。

import { createApp } from'vue'; import { AddressEdit } from'vant'; const app = createApp(); app.use(AddressEdit);

🎯 程式碼演示

基礎用法

簡單幾行程式碼，就能擁有功能完整的地址編輯表單！支援省市區選擇、詳細地址輸入、聯絡人資訊等。

import { ref } from'vue'; import { showToast } from'vant'; exportdefault { setup() { const searchResult = ref([]); constonSave = () => showToast('save'); constonDelete = () => showToast('delete'); constonChangeDetail = (val) => { if (val) { searchResult.value = [ { name: '黃龍萬科中心', address: '杭州市西湖區', }, ]; } else { searchResult.value = []; } }; return { onSave, onDelete, areaList, searchResult, onChangeDetail, }; }, };

API

Props

參數	說明	類型	預設值
area-list	地區列表	object	-
area-columns-placeholder	地區選擇列佔位提示文字	string[]	[]
area-placeholder	地區輸入框佔位提示文字	string	選擇省 / 市 / 區
address-info	地址資訊初始值	AddressEditInfo	{}
search-result	詳細地址搜尋結果	AddressEditSearchItem[]	[]
show-delete	是否顯示刪除按鈕	boolean	false
show-set-default	是否顯示預設地址欄	boolean	false
show-search-result	是否顯示搜尋結果	boolean	false
show-area	是否顯示地區	boolean	true
show-detail	是否顯示詳細地址	boolean	true
disable-area	是否禁用地區選擇	boolean	false
save-button-text	儲存按鈕文字	string	儲存
delete-button-text	刪除按鈕文字	string	刪除
detail-rows	詳細地址輸入框行數	*number	string*
detail-maxlength	詳細地址最大長度	*number	string*
is-saving	是否顯示儲存按鈕載入動畫	boolean	false
is-deleting	是否顯示刪除按鈕載入動畫	boolean	false
tel-validator	手機號格式校驗函數	(val: string) => boolean	-
tel-maxlength	手機號最大長度	*number	string*
validator	自訂校驗函數	(key: string, val: string) => string	-

Events

事件名	說明	回調參數
save	點擊儲存按鈕時觸發	info: AddressEditInfo
focus	輸入框聚焦時觸發	key: string
change v4.7.0	僅 name 和 tel 輸入框值改變觸發	{key: string, value: string}
delete	確認刪除地址時觸發	info: AddressEditInfo
select-search	選中搜尋結果時觸發	value: string
click-area	點擊收件地區時觸發	-
change-area	修改收件地區時觸發	selectedOptions: PickerOption[]
change-detail	修改詳細地址時觸發	value: string
change-default	切換是否使用預設地址時觸發	checked: boolean

Slots

名稱	說明
default	在郵政編碼下方插入內容

方法

透過 ref 可以獲取到 AddressEdit 實例並呼叫實例方法，詳見組件實例方法。

方法名	說明	參數	回傳值
setAddressDetail	設定詳細地址	addressDetail: string	-
setAreaCode	設定地區編號	code: string	-

類型定義

組件匯出以下類型定義：

importtype { AddressEditInfo, AddressEditProps, AddressEditInstance, AddressEditSearchItem, } from'vant';

AddressEditInstance 是組件實例的類型，用法如下：

import { ref } from'vue'; importtype { AddressEditInstance } from'vant'; const addressEditRef = ref<AddressEditInstance>(); addressEditRef.value?.setAddressDetail('');

AddressEditInfo 資料格式

注意：AddressEditInfo 僅作為初始值傳入，表單最終內容可以在 save 事件中獲取。

key	說明	類型
name	姓名	string
tel	手機號	string
province	省份	string
city	城市	string
county	區縣	string
addressDetail	詳細地址	string
areaCode	地區編碼，透過 省市區選擇 獲取（必填）	string

| isDefault | 是否為預設地址 | boolean |

AddressEditSearchItem 資料格式

key	說明	類型
name	地名	string
address	詳細地址	string

省市縣列表資料格式

請參考 Area 省市區選擇 組件。

主題定製

樣式變數

組件提供了下列 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)	-

🎉 總結

AddressEdit 地址編輯組件是電商應用的得力助手！它提供了完整的地址管理解決方案，從省市區選擇到詳細地址輸入，從聯絡人資訊到預設地址設定，一應俱全。無論是新建地址還是編輯現有地址，都能為使用者提供流暢便捷的操作體驗。

📚 相關內容

想要了解更多？這些內容可能對你有幫助：

• 🚀 快速開始 - 從零開始，快速上手 Vant
• 🎨 主題定製 - 打造專屬於你的視覺風格
• 📱 行動端適配 - 讓你的應用在各種裝置上完美呈現
• 📍 Area 省市區選擇 - 掌握地區選擇組件的使用方法
• 📋 AddressList 地址列表 - 了解地址列表組件的配套使用
• 📝 Form 表單 - 學習表單組件的進階用法
• 🎯 Field 輸入框 - 探索輸入框組件的豐富功能
• 📋 最佳實踐 - 學習開發中的最佳實踐
• 🔍 常見問題 - 快速解決開發中的疑問