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	Emitted when component is clicked	event: Event

Less Variables

How to use: Custom Theme.

Name	Default Value	Description
@contact-card-padding	`@padding-md`	-
@contact-card-add-icon-size	`40px`	-
@contact-card-add-icon-color	`@blue`	-
@contact-card-value-line-height	`@line-height-md`	-