vant/src/contact-edit

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

<van-contact-edit
  is-edit
  show-set-default
  :contact-info="editingContact"
  set-default-label="Set as the default contact"
  @save="onSave"
  @delete="onDelete"
/>

import { ref } from 'vue';
import { Toast } from 'vant';

export default {
  setup() {
    const editingContact = ref({});
    const onSave = (contactInfo) => Toast('Save');
    const onDelete = (contactInfo) => Toast('Delete');
    return {
      onSave,
      onDelete,
      editingContact,
    };
  },
};

API

Props

Attribute	Description	Type	Default
contact-info	Contact Info	Contact	[]
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

Data Structure of Contact

key	Description	Type
name	Name	string
tel	Phone	string

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-border-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	16px	-
--van-contact-edit-field-label-width	4.1em	-