<template>
<van-contact-list
:list="contactList"
@add="onAdd"
@edit="onEdit"
@select="onSelect"
@delete="onDelete"
/>
</template>
<script>
import { ContactList } from 'vant';
export default {
components: {
[ContactList.name]: ContactList,
},
data() {
return {
contactList: [
{
id: '1',
name: 'John Doe',
tel: '13800138000',
addText: '公司地址',
address: '广东省 深圳市 南山区 南山大道 1 号',
},
// 可以有多个联系人对象
],
};
},
methods: {
onAdd() {
// 处理点击添加联系人按钮的逻辑
console.log('点击了添加按钮');
},
onEdit(contact) {
// 处理点击编辑按钮的逻辑
console.log('点击了编辑按钮', contact);
},
onSelect(contact) {
// 处理点击联系人的逻辑
console.log('点击了联系人', contact);
},
onDelete(contact) {
// 处理点击删除按钮的逻辑
console.log('点击了删除按钮', contact);
},
},
};
</script>
在这个示例中：
- :list="contactList" 属性用于设置联系人列表数据。
- @add 事件会在点击添加联系人按钮时触发，你可以在 onAdd 方法中处理添加联系人的逻辑。
- @edit 事件会在点击编辑按钮时触发，你可以在 onEdit 方法中处理编辑联系人的逻辑。
- @select 事件会在点击联系人时触发，你可以在 onSelect 方法中处理点击联系人的逻辑。
- @delete 事件会在点击删除按钮时触发，你可以在 onDelete 方法中处理删除联系人的逻辑。
你可以根据实际需求添加其他属性或者定制样式。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5775/Vant