vant/src/address-edit/README.md

AddressEdit

Intro

Used to create, update, and delete receiving addresses.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

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

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

Usage

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,
    };
  },
};

API

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
cancel-delete	Emitted when canceling 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,
  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.

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