vant list offset,vant dialog,vant-cli,vant mobile,vant list组件,vant常用组件
Vant3 ContactList 是一个基于Vue.js的联系人列表组件，可用于在应用程序中显示和管理多个联系人。

该组件提供了一个可定制的用户界面，使开发者可以轻松地添加、编辑、删除联系人，并支持搜索功能。它还支持懒加载和分页，以优化大型联系人列表的性能。

以下是一个简单的 ContactList 组件示例，演示了如何使用它来显示一些联系人信息：

html
<template>
<van-contact-list v-model="contacts" @add="addContact">
<template #header>
<div class="title">My Contacts</div>
</template>
<template #default="{ item }">
<van-cell :title="item.name" :label="item.phone" />
</template>
</van-contact-list>
</template>

<script>
export default {
data() {
return {
contacts: [
{ name: 'Alice', phone: '555-1234' },
{ name: 'Bob', phone: '555-5678' },
{ name: 'Charlie', phone: '555-9012' },
],
};
},
methods: {
addContact() {
this.contacts.push({ name: '', phone: '' });
},
},
};
</script>


在此示例中，我们创建了一个 ContactList 组件，并将其绑定到一个名为 contacts 的数据数组上。该数组包含三个联系人对象，每个对象都具有名称和电话号码属性。

我们还定义了一个 addContact 方法，用于在点击 "Add" 按钮时添加一个新的空白联系人对象。

最后，我们使用 <van-cell> 组件来定义每个联系人在列表中的外观，并使用模板插槽自定义了 ContactList 的标题和底部按钮。