ContactEdit - Vant 4

ContactEdit

Intro

Edit and save the contact information.

Install

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

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

Usage

Basic Usage

import { ref } from'vue'; import { showToast } from'vant'; exportdefault { setup() { const editingContact = ref({ tel: '', name: '', }); constonSave = (contactInfo) => showToast('Save'); constonDelete = (contactInfo) => showToast('Delete'); return { onSave, onDelete, editingContact, }; }, };

API

Props

Attribute	Description	Type	Default
contact-info	Contact Info	ContactEditInfo	{}
is-edit	Whether is editing	boolean	false
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	-
show-set-default	Whether to show default contact switch	boolean	false
set-default-label	default contact switch label	string	-

Events

Event	Description	Arguments
save	Emitted when the save button is clicked	content: contact info
delete	Emitted when the delete button is clicked	content: contact info
change-default	Emitted when the default contact is switched	checked��contact is not the default

Data Structure of ContactEditInfo

key	Description	Type
name	Name	string
tel	Phone	string
isDefault	Is Default	*boolean

Types

The component exports the following type definitions:

importtype { ContactEditInfo, ContactEditProps } from'vant';

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-contact-edit-padding	var(--van-padding-md)	-
--van-contact-edit-fields-radius	var(--van-radius-md)	-
--van-contact-edit-buttons-padding	var(--van-padding-xl) 0	-
--van-contact-edit-button-margin-bottom	var(--van-padding-sm)	-
--van-contact-edit-button-font-size	var(--van-font-size-lg)	-
--van-contact-edit-field-label-width	4.1em	-