ContactList 联系人列表

介绍

展示联系人列表。

引入

  1. import Vue from 'vue';
  2. import { ContactList } from 'vant';
  4. 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';
  3. export default {
  4.   data() {
  5.     return {
  6.       chosenContactId: '1',
  7.       list: [
  8.         {
  9.           id: '1',
  10.           name: '张三',
  11.           tel: '13000000000',
  12.           isDefault: true,
  13.         },
  14.         {
  15.           id: '2',
  16.           name: '李四',
  17.           tel: '1310000000',
  18.         },
  19.       ],
  20.     };
  21.   },
  22.   methods: {
  23.     onAdd() {
  24.       Toast('新增');
  25.     },
  26.     onEdit(contact) {
  27.       Toast('编辑' + contact.id);
  28.     },
  29.     onSelect(contact) {
  30.       Toast('选择' + contact.id);
  31.     },
  32.   },
  33. };

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

样式变量

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

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

ContactList 联系人列表 - 图1