AddressList 地址列表 - Vant 4

AddressList 地址列表

📋 介紹

地址列表組件讓地址管理變得簡單高效！它能優雅地展示使用者的所有地址資訊，支援選擇、編輯、刪除等操作，為電商應用提供完整的地址管理解決方案。

📦 引入

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

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

🎯 程式碼演示

基礎用法

展示使用者的地址列表，支援選擇預設地址、編輯地址資訊等功能。清晰的佈局讓使用者一目了然！

html

import { ref } from'vue'; 
import { showToast } from'vant'; 
export default { setup() { const chosenAddressId = ref('1'); 
const list = [ { id: '1', name: '張三', tel: '13000000000', address: '浙江省杭州市西湖區文三路 138 號東方通信大廈 7 樓 501 室', isDefault: true, }, { id: '2', name: '李四', tel: '1310000000', address: '浙江省杭州市拱墅區莫干山路 50 號', }, ]; 
const disabledList = [ { id: '3', name: '王五', tel: '1320000000', address: '浙江省杭州市濱江區江南大道 15 號', }, ]; 
const onAdd = () => showToast('新增地址'); 
const onEdit = (item, index) => showToast('編輯地址:' + index); 
return { list, onAdd, onEdit, disabledList, chosenAddressId, }; }, };

API

Props

參數	說明	類型	預設值
v-model	目前選中地址的 id，支援多選（類型為 `[]`）	*number	string
list	地址列表	AddressListAddress[]	`[]`
disabled-list	不可配送地址列表	AddressListAddress[]	`[]`
disabled-text	不可配送提示文案	string	-
switchable	是否允許切換地址	boolean	`true`
show-add-button	是否顯示底部按鈕	boolean	`true`
add-button-text	底部按鈕文字	string	`新增地址`
default-tag-text	預設地址標籤文字	string	-
right-icon `v4.5.0`	右側圖示名稱或圖片連結，等同於 Icon 組件的 name 屬性	string	`edit`

Events

事件名	說明	回調參數
add	點擊新增按鈕時觸發	-
edit	點擊編輯按鈕時觸發	item: AddressListAddress, index: number
select	切換選中的地址時觸發	item: AddressListAddress, index: number
edit-disabled	編輯不可配送的地址時觸發	item: AddressListAddress, index: number
select-disabled	選中不可配送的地址時觸發	item: AddressListAddress, index: number
click-item	點擊任意地址時觸發	item: AddressListAddress, index: number, { event }

AddressListAddress 資料結構

鍵名	說明	類型
id	每條地址的唯一標識	*number
name	姓名	string
tel	手機號	*number
address	詳細地址	string
isDefault	是否為預設地址	boolean

Slots

名稱	說明	參數
default	在列表下方插入內容	-
top	在頂部插入內容	-
item-bottom	在列表項底部插入內容	item: AddressListAddress
tag	自訂列表項標籤內容	item: AddressListAddress

類型定義

組件匯出以下類型定義：

importtype { AddressListProps, AddressListAddress } from'vant';

主題定製

樣式變數

組件提供了下列 CSS 變數，可用於自訂樣式，使用方法請參考 ConfigProvider 組件。

名稱	預設值	描述
--van-address-list-padding	var(--van-padding-sm) var(--van-padding-sm) 80px	-
--van-address-list-disabled-text-color	var(--van-text-color-2)	-
--van-address-list-disabled-text-padding	var(--van-padding-base) 5 0 var(--van-padding-md)*	-
--van-address-list-disabled-text-font-size	var(--van-font-size-md)	-
--van-address-list-disabled-text-line-height	var(--van-line-height-md)	-
--van-address-list-add-button-z-index	999	-
--van-address-list-item-padding	var(--van-padding-sm)	-
--van-address-list-item-text-color	var(--van-text-color)	-
--van-address-list-item-disabled-text-color	var(--van-text-color-3)	-
--van-address-list-item-font-size	13px	-
--van-address-list-item-line-height	var(--van-line-height-sm)	-
--van-address-list-radio-color	var(--van-primary-color)	-
--van-address-list-edit-icon-size	20px	-

📝 總結

AddressList 地址列表組件是電商應用中不可或缺的重要組件！它不僅能夠優雅地展示使用者的地址資訊，還提供了完整的地址管理功能。透過簡潔的 API 設計和豐富的自訂選項，你可以輕鬆構建出符合業務需求的地址管理介面。

🎯 核心特性：

📋 清晰的地址資訊展示
✅ 靈活的地址選擇機制
✏️ 便捷的編輯和管理功能
🚫 智慧的不可配送地址處理
🎨 豐富的主題定製選項

無論是簡單的地址選擇還是複雜的地址管理場景，AddressList 都能為你提供完美的解決方案！

AddressList 地址列表 ​

📋 介紹 ​

📦 引入 ​

🎯 程式碼演示 ​

基礎用法 ​

API ​

Props ​

Events ​

AddressListAddress 資料結構 ​

Slots ​

類型定義 ​

主題定製 ​

樣式變數 ​

📝 總結 ​

🔗 相關內容 ​