vant/src/contact-card

ContactCard

Install

import Vue from 'vue';
import { ContactCard } from 'vant';

Vue.use(ContactCard);

Usage

Add Contact

<van-contact-card type="add" @click="onAdd" />

import { Toast } from 'vant';

export default {
  methods: {
    onAdd() {
      Toast('add');
    },
  },
};

Edit Contact

<van-contact-card
  type="edit"
  :name="currentContact.name"
  :tel="currentContact.tel"
  @click="onEdit"
/>

import { Toast } from 'vant';

export default {
  data() {
    return {
      currentContact: {
        name: 'John Snow',
        tel: '13000000000',
      },
    };
  },
  methods: {
    onEdit() {
      Toast('edit');
    },
  },
};

Uneditable

<van-contact-card
  type="edit"
  name="John Snow"
  tel="13000000000"
  :editable="false"
/>

API

Props

Attribute	Description	Type	Default
type	Can be set to edit	string	add
name	Name	string	-
tel	Phone	string	-
add-text	Add card text	string	Add contact info

Events

Event	Description	Arguments
click	Triggered when clicked	event: Event