ContactList 联系人列表

介绍

展示联系人列表。

引入

通过以下方式来全局注册组件,更多注册方式请参考组件注册

  1. import { createApp } from 'vue';
  2. import { ContactList } from 'vant';
  3. const app = createApp();
  4. app.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 { ref } from 'vue';
  2. import { Toast } from 'vant';
  3. export default {
  4. setup() {
  5. const chosenContactId = ref('1');
  6. const list = ref([
  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. const onAdd = () => Toast('新增');
  20. const onEdit = (contact) => Toast('编辑' + contact.id);
  21. const onSelect = (contact) => Toast('选择' + contact.id);
  22. return {
  23. list,
  24. onAdd,
  25. onEdit,
  26. onSelect,
  27. chosenContactId,
  28. };
  29. },
  30. };

API

Props

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

Events

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

Contact 数据结构

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

类型定义

组件导出以下类型定义:

  1. import type { ContactListItem, ContactListProps } from 'vant';

主题定制

样式变量

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

名称默认值描述
—van-contact-list-edit-icon-size16px-
—van-contact-list-add-button-z-index999-
—van-contact-list-item-paddingvar(—van-padding-md)-
—van-contact-list-item-radio-icon-colorvar(—van-danger-color)-

ContactList 联系人列表 - 图1