vant选项卡,vant cascader
Vant3 ContactCard 是一种基于 Vue.js 的 UI 组件，用于展示联系人信息的卡片。该组件包含了联系人的头像、姓名、职位、邮箱、电话等基本信息，并提供了可自定义的插槽，以便用户可以根据需求添加额外的信息或操作。

下面是一个使用 Vant3 ContactCard 的例子：

html
<template>
<van-contact-card
name="张三"
tel="13800138000"
email="zhangsan@example.com"
:editable="true"
@click="handleClick"
>
<div slot="tags">
<van-tag plain type="primary">VIP</van-tag>
<van-tag plain type="warning">重要客户</van-tag>
</div>
</van-contact-card>
</template>

<script>
import { VanContactCard, VanTag } from 'vant';

export default {
components: {
VanContactCard,
VanTag,
},
methods: {
handleClick() {
console.log('click contact card');
},
},
};
</script>


在上述代码中，我们首先导入了 Vant3 中的 ContactCard 和 Tag 组件，然后在模板中使用 ContactCard 组件来展示联系人信息。在组件中，我们通过传递相应的 props 来设置联系人的基本信息和是否可编辑等属性。同时，我们还使用了插槽来自定义 ContactCard 中的标签信息，并绑定了一个点击事件来处理用户的交互操作。