ContactList 联系人列表

介绍

展示联系人列表。

引入

  1. import Vue from 'vue';
  2. import { ContactList } from 'vant';
  3. Vue.use(ContactList);

代码演示

基础用法

  1. <van-contact-list
  2. v-model="chosenContactId"
  3. :list="list"
  4. default-tag-text="默认"
  5. @add="onAdd"
  6. @edit="onEdit"
  7. @select="onSelect"
  8. />
  1. import { Toast } from 'vant';
  2. export default {
  3. data() {
  4. return {
  5. chosenContactId: '1',
  6. list: [
  7. {
  8. id: '1',
  9. name: '张三',
  10. tel: '13000000000',
  11. isDefault: true,
  12. },
  13. {
  14. id: '2',
  15. name: '李四',
  16. tel: '1310000000',
  17. },
  18. ],
  19. };
  20. },
  21. methods: {
  22. onAdd() {
  23. Toast('新增');
  24. },
  25. onEdit(contact) {
  26. Toast('编辑' + contact.id);
  27. },
  28. onSelect(contact) {
  29. Toast('选择' + contact.id);
  30. },
  31. },
  32. };

API

Props

参数说明类型默认值
v-model当前选中联系人的 idnumber | string-
list联系人列表Contact[][]
add-text新建按钮文案string新建联系人
default-tag-text v2.3.0默认联系人标签文案string-

Events

事件名说明回调参数
add点击新增按钮时触发-
edit点击编辑按钮时触发contact: Contact,index: number
select切换选中的联系人时触发contact: Contact,index: number

Contact 数据结构

键名说明类型
id每位联系人的唯一标识number | string
name联系人姓名string
tel联系人手机号number | string
isDefault是否为默认联系人boolean

样式变量

组件提供了下列 Less 变量,可用于自定义样式,使用方法请参考主题定制

名称默认值描述
@contact-list-edit-icon-size16px-
@contact-list-add-button-z-index999-
@contact-list-item-padding@padding-md-

ContactList 联系人列表 - 图1