ContactCard - Vant 4

ContactCard

Intro

Display contact information in the form of cards.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from'vue'; import { ContactCard } from'vant'; const app = createApp(); app.use(ContactCard);

Usage

Add Contact

import { showToast } from'vant'; exportdefault { setup() { constonAdd = () => showToast('add'); return { onAdd, }; }, };

Edit Contact

import { ref } from'vue'; import { showToast } from'vant'; exportdefault { setup() { const tel = ref('13000000000'); const name = ref('John Snow'); constonEdit = () => showToast('edit'); return { tel, name, onEdit, }; }, };

Uneditable

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
editable	Whether to allow editing of contacts	boolean	true

Events

Event	Description	Arguments
click	Emitted when component is clicked	event: MouseEvent

Types

The component exports the following type definitions:

importtype { ContactCardType, ContactCardProps } 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-card-padding	var(--van-padding-md)	-
--van-contact-card-add-icon-size	40px	-
--van-contact-card-add-icon-color	var(--van-primary-color)	-
--van-contact-card-title-line-height	var(--van-line-height-md)	-