1. 安装 Vant4：
确保你已经安装了 Vant4，可以使用 npm 或 yarn 安装：
npm install vant@next --save
# 或
yarn add vant@next
2. 在你的 Vue 组件中引入 ContactCard：
<template>
<div>
<!-- 联系人卡片列表 -->
<van-contact-card
v-for="contact in contacts"
:key="contact.id"
:name="contact.name"
:tel="contact.tel"
:avatar="contact.avatar"
:address="contact.address"
@click="onContactClick"
/>
</div>
</template>
<script>
import { VanContactCard } from 'vant';
export default {
components: {
VanContactCard
},
data() {
return {
contacts: [
{
id: 1,
name: 'John Doe',
tel: '1234567890',
avatar: 'https://example.com/avatar1.jpg',
address: '123 Main St, City, Country'
},
{
id: 2,
name: 'Jane Smith',
tel: '0987654321',
avatar: 'https://example.com/avatar2.jpg',
address: '456 Side St, Town, Country'
},
// 可以继续添加其他联系人
]
};
},
methods: {
onContactClick(contact) {
// 联系人卡片点击事件的逻辑
console.log('点击了联系人：', contact);
}
}
};
</script>
在上述示例中，van-contact-card 组件用于创建联系人卡片，通过循环渲染展示多个联系人。通过设置 v-for 指令，你可以根据联系人数据动态生成多个联系人卡片。
这只是一个简单的示例，你可以根据实际需求自定义 ContactCard 的属性和样式，以满足你的项目要求。
转载请注明出处：http://www.zyzy.cn/article/detail/5861/Vant