vant list offset,vant怎么引入,vant dialog,vant list组件,vant怎么用,vant常用组件
Vant4 ContactList 是一款基于 Vue.js 的联系人列表组件，可以用于展示用户的联系人信息。它支持搜索、选择、删除和添加联系人等功能。

以下是一个简单的 Vant4 ContactList 组件例子：

html
<template>
<div>
<van-contact-list
v-model="contacts"
:list="list"
@add="onAdd"
@edit="onEdit"
@delete="onDelete"
/>
</div>
</template>

<script>
export default {
data() {
return {
contacts: [],
list: [
{
id: 1,
name: '张三',
tel: '13000000000',
address: '北京市海淀区',
},
{
id: 2,
name: '李四',
tel: '13100000000',
address: '上海市浦东新区',
},
{
id: 3,
name: '王五',
tel: '13200000000',
address: '广州市天河区',
},
],
};
},
methods: {
onAdd() {
console.log('add');
},
onEdit() {
console.log('edit');
},
onDelete() {
console.log('delete');
},
},
};
</script>


在这个例子中，我们使用了 van-contact-list 组件来展示一个包含三个联系人信息的列表。我们还定义了 contacts 数据属性来保存用户选择的联系人信息。在组件中，我们处理了 add、edit 和 delete 事件，以便在添加、编辑或删除联系人时执行一些操作。