AddressList - Vant 4
AddressList
📍 Create beautiful, interactive address lists that make managing delivery locations a breeze!
Intro
Display a list of receiving addresses with style and functionality! 🏠 The AddressList component provides an elegant way to show multiple addresses, allowing users to select, edit, and manage their delivery locations with ease. Perfect for e-commerce apps, delivery services, and any application that needs address management!
Install 📦
Register component globally via app.use, refer to Component Registration for more registration ways. Get started in seconds!
import { createApp } from'vue'; import { AddressList } from'vant'; const app = createApp(); app.use(AddressList);Usage
Basic Usage - Smart Address Management! 🎯
Create a comprehensive address list with selection, editing, and management features! This example shows how to build a complete address management system with default addresses, disabled states, and interactive controls. Watch how easy it is to give users a delightful address selection experience!
import { ref } from'vue'; import { showToast } from'vant'; exportdefault { setup() { const chosenAddressId = ref('1'); const list = [ { id: '1', name: 'John Snow', tel: '13000000000', address: 'Somewhere', isDefault: true, }, { id: '2', name: 'Ned Stark', tel: '1310000000', address: 'Somewhere', }, ]; const disabledList = [ { id: '3', name: 'Tywin', tel: '1320000000', address: 'Somewhere', }, ]; constonAdd = () => showToast('Add'); constonEdit = (item, index) => showToast('Edit:' + index); return { list, onAdd, onEdit, disabledList, chosenAddressId, }; }, };API
Props
| Attribute | Description | Type | Default |
|---|---|---|---|
| v-model | Id of chosen address, support multiple selection (type is []) | *number | string |
| list | Address list | Address[] | [] |
| disabled-list | Disabled address list | Address[] | [] |
| disabled-text | Disabled text | string | - |
| switchable | Whether to allow switch address | boolean | true |
| show-add-button | Whether to show add button | boolean | true |
| add-button-text | Add button text | string | Add new address |
| default-tag-text | Default tag text | string | - |
right-icon v4.5.0 | Right Icon | string | edit |
Events
| Event | Description | Arguments |
|---|---|---|
| add | Emitted when the add button is clicked | - |
| edit | Emitted when the edit icon of address is clicked | item: Address, index: number |
| select | Emitted when an address is selected | item: Address, index: number |
| edit-disabled | Emitted when the edit icon of disabled address is clicked | item: Address, index: number |
| select-disabled | Emitted when a disabled address is selected | item: Address, index: number |
| click-item | Emitted when an address item is clicked | item: Address, index: number, { event } |
Data Structure of Address
| Key | Description | Type |
|---|---|---|
| id | Id | *number |
| name | Name | string |
| tel | Phone | *number |
| address | Address | string |
| isDefault | Is default address | boolean |
Slots
| Name | Description | SlotProps |
|---|---|---|
| default | Custom content after list | - |
| top | Custom content before list | - |
| item-bottom | Custom content after list item | item: Address |
| tag | Custom tag of list item | item: Address |
Types
The component exports the following type definitions:
importtype { AddressListProps, AddressListAddress } from'vant';Theming
CSS Variables
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
| Name | Default Value | Description |
|---|---|---|
| --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 | - |
Related Docs
Explore more components and features to enhance your mobile app experience:
- AddressEdit - Learn about address editing components for creating and modifying addresses
- Area - Master area selection components for location picking
- Radio - Understand radio button components for single selections
- Button - Discover button components and interactions
- Cell - Explore cell components for list items
- Icon - Learn about icon components and customization
- Toast - Master toast notifications for user feedback
- ConfigProvider - Customize themes and global configurations
- Advanced Usage - Component registration and advanced techniques
- Vant 4 Overview - Explore all Vant 4 features and components