Vant AddressEdit address editor

May 07, 2021 Vant

Introduced

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

Vue.use(AddressEdit);

Code demo

Basic usage

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

import { Toast } from 'vant';

export default {
  data() {
    return {
      areaList,
      searchResult: []
    }
  },
  methods: {
    onSave() {
      Toast('save');
    },
    onDelete() {
      Toast('delete');
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [{
          name: '黄龙万科中心',
          address: '杭州市西湖区'
        }];
      } else {
        this.searchResult = [];
      }
    }
  }
}

Api

Props

Parameters	Description	Type	The default
area-list	The list of regions	object	-
area-columns-placeholder `v2.2.5`	The region selects the column placeholder prompt text	string[]	`[]`
address-info	The initial value of the conseer information	AddressInfo	`{}`
search-result	Detailed address search results	SearchResult[]	`[]`
show-postal	Whether to display the zip code	boolean	`false`
show-delete	Whether to display the delete button	boolean	`false`
show-set-default	Whether to display the default address bar	boolean	`false`
show-search-result	Whether to display search results	boolean	`false`
save-button-text	Save the button text	string	`保存`
delete-button-text	Delete the button text	string	`删除`
detail-rows	Enter the number of box lines for the detailed address	number \| string	`1`
detail-maxlength `v2.0.4`	The maximum length of the detailed address	number \| string	`200`
is-saving	Whether to display a save button load animation	boolean	`false`
is-deleting	Whether to display the delete button load animation	boolean	`false`
tel-validator	The phone number format check function	string => boolean	-
postal-validator `v2.1.2`	The zip code format check function	string => boolean	-
validator	Custom check functions	(key, val) => string	-

Events

The name of the event	Description	Callback parameters
save	Triggered when the save button is clicked	Content: The content of the form
focus	Triggered when the input box is focused	Key: Key for the focused input box
delete	Triggered when the address is confirmed to be deleted	Content: The content of the form
cancel-delete	Triggered when the address is undroled	Content: The content of the form
select-search	Triggered when search results are selected	Value: Search results
change-area	Triggered when the receipt area is modified	Values: Region information
change-detail	Triggered when the detailed address is modified	Value: Detailed address content
change-default	Triggered when switching whether to use the default address	Value: Whether or not to select

Slots

Name	Description
default	Insert content below the zip code

Method

Ref allows you to get to the AddressEdit instance and call the instance method, as detailed in the Component Instance Method

The method name	Description	Parameters	Returns a value
setAddressDetail	Set the detailed address	addressDetail: string	-

AddressInfo data format

Note: AddressInfo is only passed in as an initial value, and the final content of the form can be obtained in the save event

key	Description	Type
Id	A unique identity for each address	number \| string
name	The name of the conseer	string
tel	The receiving person's mobile phone number	string
province	Provinces	string
city	City	string
county	District	string
addressDetail	Detailed address	string
areaCode	Region code, `省市区选择` (required)	string
postalCode	Zip code	string
isDefault	Whether it is the default address	boolean

SearchResult data format

key	Description	Type
name	Names	string
address	Detailed address	string

List data format for provinces, cities and counties

Refer to the Area component.