AddressEdit - Vant 4

AddressEdit

📍 Streamline address management with smart, user-friendly forms!

Intro

AddressEdit is your complete solution for managing shipping and billing addresses! This intelligent component makes it effortless for users to add, edit, and organize their addresses with features like area selection, address search, and smart validation. Perfect for e-commerce apps, delivery services, or any application that needs reliable address management! 🏠✨

Install

Ready to revolutionize how your users manage addresses? Let's get AddressEdit up and running! Register it globally with app.use() and you'll have a powerful address management system at your fingertips. Check out our Component Registration guide for more setup options! 🚀

import { createApp } from'vue'; import { AddressEdit } from'vant'; const app = createApp(); app.use(AddressEdit);

Usage

Basic Usage - Smart Address Forms Made Simple! 🎯

Create a comprehensive address editing experience with just a few lines of code! This example shows how to build a complete address form with area selection, search functionality, and smart validation. Watch how easy it is to give users a delightful address management experience!

import { ref } from'vue'; import { showToast } from'vant'; exportdefault { setup() { const searchResult = ref([]); constonSave = () => showToast('save'); constonDelete = () => showToast('delete'); constonChangeDetail = (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-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*
detail-maxlength	Detail maxlength	*number	string*
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	(val: string) => boolean	-
tel-maxlength	Tel maxlength	*number	string*
validator	Custom validator	(key: string, val: string) => string	-

Events

Event	Description	Arguments
save	Emitted when the save button is clicked	info: AddressEditInfo
focus	Emitted when field is focused	key: string
change v4.7.0	Emitted when only the name and tel field are changed	{key: string, value: string}
delete	Emitted when confirming delete	info: AddressEditInfo
select-search	Emitted when a search result is selected	value: string
click-area	Emitted when the area field is clicked	-
change-area	Emitted when area changed	selectedOptions: PickerOption[]
change-detail	Emitted when address detail changed	value: string
change-default	Emitted when switching default address	checked: boolean

Slots

Name	Description
default	Custom content below address detail

Methods

Use ref to get AddressEdit instance and call instance methods.

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

Types

The component exports the following type definitions:

importtype { AddressEditInfo, AddressEditProps, AddressEditInstance, AddressEditSearchItem, } from'vant';

AddressEditInstance is the type of component instance:

import { ref } from'vue'; importtype { 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
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)	-

Related Docs

Explore more components and features to enhance your mobile app experience:

• AddressList - Learn about address list components for managing multiple addresses
• Area - Master area selection components for location picking
• Field - Discover form field components for user input
• Button - Understand button components and interactions
• Form - Explore form validation and management
• Picker - Learn about picker components for selections
• ConfigProvider - Customize themes and global configurations
• Advanced Usage - Component registration and advanced techniques
• Vant 4 Overview - Explore all Vant 4 features and components