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