vant/src/contact-edit

ContactEdit

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 { Toast } from 'vant';

export default {
  data() {
    return {
      editingContact: {},
    };
  },
  methods: {
    onSave(contactInfo) {
      Toast('Save');
    },
    onDelete(contactInfo) {
      Toast('Delete');
    },
  },
};

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 v2.3.0	Whether to show default contact switch	boolean	false
set-default-label v2.3.0	default contact switch label	string	-

Events

Event	Description	Arguments
save	Triggered when click save button	content：contact info
delete	Triggered when click delete button	content：contact info

Data Structure of Contact

key	Description	Type
name	Name	string
tel	Phone	string