Skip to content

address-edit

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History
 
 

address-edit

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
demo
demo
 
 
test
test
 
 
Detail.js
Detail.js
 
 
README.md
README.md
 
 
README.zh-CN.md
README.zh-CN.md
 
 
index.js
index.js
 
 
index.less
index.less
 
 

README.md

AddressEdit

Install

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

Vue.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"
/>
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

Attribute Description Type Default Version
area-list Area List object - -
area-columns-placeholder placeholder of area columns string[] [] 2.2.5
address-info Address Info AddressInfo {} -
search-result Address search result SearchResult[] [] -
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 -
save-button-text Save button text string Save -
delete-button-text Delete button text string Delete -
detail-rows Detail input rows number 1 -
detail-maxlength Detail maxlength number 200 2.0.4
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 - -
postal-validator The method to validate postal (tel: string) => boolean - 2.1.2
validator Custom validator (key, value) => string - -

Events

Event Description Arguments
save Triggered when click save button content：form content
focus Triggered when focus field key: field name
delete Triggered when confirm delete content：form content
cancel-delete Triggered when cancel delete content：form content
select-search Triggered when select search result value: search content
change-area Triggered when change area values: area values
change-detail Triggered when address detail changed value: address detail
change-default Triggered when switch default address value: checked

Slots

Name Description
default Custom content below postal

Methods

Use ref to get address-edit instance and call instance methods

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

AddressInfo Data Structure

key Description Type
id Address Id string | number
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

SearchResult Data Structure

key Description Type
name Name string
address Address string

Area Data Structure

Please refer to Area component。