{site_name}

{site_name}

🌜 搜索

Vant4 ContactCard 是一种基于 Vue.js 技术栈的联系人信息

前端 𝄐 0
vant选项卡,vant cascader,vant怎么用
Vant4 ContactCard 是一种基于 Vue.js 技术栈的联系人信息卡片组件,用于在网页或移动端应用中展示联系人信息。

使用 Vant4 ContactCard,开发者可以方便地呈现联系人的基本信息,例如姓名、电话号码、邮件地址等,并可以添加操作按钮以方便用户进行即时通讯或导航等操作。该组件还支持自定义样式和数据源,以满足不同场景下的需求。

以下是一个简单的 Vant4 ContactCard 组件示例:


<van-contact-card
:name="contact.name"
:tel="contact.tel"
:email="contact.email"
:address="contact.address"
>
<template #footer>
<van-button size="small" type="primary" @click="makeCall">
拨打电话
</van-button>
<van-button size="small" type="default" @click="sendEmail">
发送邮件
</van-button>
</template>
</van-contact-card>


在上述示例中,我们通过使用 van-contact-card 标签来创建一个联系人卡片。该标签包含了 name、tel、email 和 address 等属性,用于展示联系人的基本信息。在卡片底部,我们使用 template 标签添加了两个操作按钮,分别用于拨打电话和发送电子邮件。当这些按钮被点击时,它们将分别调用 makeCall 和 sendEmail 方法来执行相应的操作。