import{o as s,a,y as n}from"./vue-libs.b44bc779.js";const e={class:"van-doc-markdown-body"},d=n(`

ContactEdit

Intro

Edit and save the contact information.

Install

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({
      tel: '',
      name: '',
    });
    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

Types

The component exports the following type definitions:

import type { 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-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	var(--van-font-size-lg)	-
--van-contact-edit-field-label-width	4.1em	-

`,12),l=[d],h={__name:"README",setup(o,{expose:t}){return t({frontmatter:{}}),(r,i)=>(s(),a("div",e,l))}};export{h as default};