Intro

Used to create, update, and delete receiving addresses.

Install

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

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

Basic Usage

<van-address-edit
  :area-list="areaList"
  show-postal
  show-delete
  show-set-default
  show-search-result
  :search-result="searchResult"
  :area-columns-placeholder="['Choose', 'Choose', 'Choose']"
  @save="onSave"
  @delete="onDelete"
  @change-detail="onChangeDetail"
/>

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

export default {
  setup() {
    const searchResult = ref([]);

    const onSave = () => Toast('save');
    const onDelete = () => Toast('delete');
    const onChangeDetail = (val) => {
      if (val) {
        searchResult.value = [
          {
            name: 'Name1',
            address: 'Address',
          },
        ];
      } else {
        searchResult.value = [];
      }
    };

    return {
      onSave,
      onDelete,
      areaList,
      searchResult,
      onChangeDetail,
    };
  },
};

Props

Attribute	Description	Type	Default
area-list	Area List	object	-
area-columns-placeholder	placeholder of area columns	string[]	`[]`
area-placeholder	placeholder of area input field	string	`Area`
address-info	Address Info	AddressEditInfo	`{}`
search-result	Address search result	AddressEditSearchItem[]	`[]`
show-postal	Whether to show postal field	boolean	`false`
show-delete	Whether to show delete button	boolean	`false`
show-set-default	Whether to show default address switch	boolean	`false`
show-search-result	Whether to show address search result	boolean	`false`
show-area	Whether to show area cell	boolean	`true`
show-detail	Whether to show detail field	boolean	`true`
disable-area	Whether to disable area select	boolean	`false`
save-button-text	Save button text	string	`Save`
delete-button-text	Delete button text	string	`Delete`
detail-rows	Detail input rows	number \| string	`1`
detail-maxlength	Detail maxlength	number \| string	`200`
is-saving	Whether to show save button loading status	boolean	`false`
is-deleting	Whether to show delete button loading status	boolean	`false`
tel-validator	The method to validate tel	(tel: string) => boolean	-
tel-maxlength	Tel maxlength	number \| string	-
postal-validator	The method to validate postal	(tel: string) => boolean	-
validator	Custom validator	(key, val) => string	-

Events

Event	Description	Arguments
save	Emitted when the save button is clicked	content: form content
focus	Emitted when field is focused	key: field name
delete	Emitted when confirming delete	content: form content
select-search	Emitted when a search result is selected	value: search content
click-area	Emitted when the area field is clicked	-
change-area	Emitted when area changed	values: area values
change-detail	Emitted when address detail changed	value: address detail
change-default	Emitted when switching default address	value: checked

Slots

Name	Description
default	Custom content below postal

Methods

Use ref to get AddressEdit instance and call instance methods.

Name	Description	Attribute	Return value
setAddressDetail	Set address detail	addressDetail: string	-

Types

The component exports the following type definitions:

import type {
  AddressEditInfo,
  AddressEditProps,
  AddressEditInstance,
  AddressEditSearchItem,
} from 'vant';

AddressEditInstance is the type of component instance:

import { ref } from 'vue';
import type { AddressEditInstance } from 'vant';

const addressEditRef = ref<AddressEditInstance>();

addressEditRef.value?.setAddressDetail('');

AddressEditInfo Data Structure

key	Description	Type
name	Name	string
tel	Phone	string
province	Province	string
city	City	string
county	County	string
addressDetail	Detailed Address	string
areaCode	Area code	string
postalCode	Postal code	string
isDefault	Is default address	boolean

AddressEditSearchItem Data Structure

key	Description	Type
name	Name	string
address	Address	string

Area Data Structure

Please refer to Area component.

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-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