Install

import { createApp } from 'vue';
import { AddressList } from 'vant';

const app = createApp();
app.use(AddressList);

Usage

Basic Usage

<van-address-list
  v-model="chosenAddressId"
  :list="list"
  :disabled-list="disabledList"
  disabled-text="The following address is out of range"
  default-tag-text="Default"
  @add="onAdd"
  @edit="onEdit"
/>

import { ref } from 'vue';
import { Toast } from 'vant';

export default {
  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',
      },
    ];

    const onAdd = () => Toast('Add');
    const onEdit = (item, index) => Toast('Edit:' + index);

    return {
      list,
      onAdd,
      onEdit,
      disabledList,
      chosenAddressId,
    };
  },
};

API

Props

Attribute	Description	Type	Default
v-model	Id of chosen address	string	-
list	Address list	Address[]	`[]`
disabled-list	Disabled address list	Address[]	`[]`
disabled-text	Disabled text	string	-
switchable	Whether to allow switch address	boolean	`true`
add-button-text	Add button text	string	`Add new address`
default-tag-text	Default tag text	string	-

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

Data Structure of Address

Key	Description	Type
id	Id	number \| string
name	Name	string
tel	Phone	number \| string
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 `v3.0.9`	Custom tag of list item	item: Address

Types

The component exports the following type definitions:

import type { 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-item-radio-icon-color	var(--van-danger-color)	-
--van-address-list-edit-icon-size	20px	-

AddressList

Intro