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

ContactCard

Intro

Display contact information in the form of cards.

Install

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

const app = createApp();
app.use(ContactCard);

Usage

Add Contact

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

import { Toast } from 'vant';

export default {
  setup() {
    const onAdd = () => Toast('add');
    return {
      onAdd,
    };
  },
};

Edit Contact

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

import { ref } from 'vue';
import { Toast } from 'vant';

export default {
  setup() {
    const tel = ref('13000000000');
    const name = ref('John Snow');
    const onEdit = () => Toast('edit');

    return {
      tel,
      name,
      onEdit,
    };
  },
};

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`
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:

import type { 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-value-line-height	var(--van-line-height-md)	-

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