Contact 联系人

介绍

通过 Contact 组件可以实现联系人的展示、选择、编辑等功能。

引入

  1. import Vue from 'vue';
  2. import { ContactCard, ContactList, ContactEdit } from 'vant';
  3. Vue.use(ContactCard);
  4. Vue.use(ContactList);
  5. Vue.use(ContactEdit);

代码演示

基础用法

  1. <!-- 联系人卡片 -->
  2. <van-contact-card
  3. :type="cardType"
  4. :name="currentContact.name"
  5. :tel="currentContact.tel"
  6. @click="showList = true"
  7. />
  8. <!-- 联系人列表 -->
  9. <van-popup v-model="showList" position="bottom">
  10. <van-contact-list
  11. v-model="chosenContactId"
  12. :list="list"
  13. @add="onAdd"
  14. @edit="onEdit"
  15. @select="onSelect"
  16. />
  17. </van-popup>
  18. <!-- 联系人编辑 -->
  19. <van-popup v-model="showEdit" position="bottom">
  20. <van-contact-edit
  21. :contact-info="editingContact"
  22. :is-edit="isEdit"
  23. @save="onSave"
  24. @delete="onDelete"
  25. />
  26. </van-popup>
  1. export default {
  2. data() {
  3. return {
  4. chosenContactId: null,
  5. editingContact: {},
  6. showList: false,
  7. showEdit: false,
  8. isEdit: false,
  9. list: [{
  10. name: '张三',
  11. tel: '13000000000',
  12. id: 0
  13. }]
  14. };
  15. },
  16. computed: {
  17. cardType() {
  18. return this.chosenContactId !== null ? 'edit' : 'add';
  19. },
  20. currentContact() {
  21. const id = this.chosenContactId;
  22. return id !== null ? this.list.filter(item => item.id === id)[0] : {};
  23. }
  24. },
  25. methods: {
  26. // 添加联系人
  27. onAdd() {
  28. this.editingContact = { id: this.list.length };
  29. this.isEdit = false;
  30. this.showEdit = true;
  31. },
  32. // 编辑联系人
  33. onEdit(item) {
  34. this.isEdit = true;
  35. this.showEdit = true;
  36. this.editingContact = item;
  37. },
  38. // 选中联系人
  39. onSelect() {
  40. this.showList = false;
  41. },
  42. // 保存联系人
  43. onSave(info) {
  44. this.showEdit = false;
  45. this.showList = false;
  46. if (this.isEdit) {
  47. this.list = this.list.map(item => item.id === info.id ? info : item);
  48. } else {
  49. this.list.push(info);
  50. }
  51. this.chosenContactId = info.id;
  52. },
  53. // 删除联系人
  54. onDelete(info) {
  55. this.showEdit = false;
  56. this.list = this.list.filter(item => item.id !== info.id);
  57. if (this.chosenContactId === info.id) {
  58. this.chosenContactId = null;
  59. }
  60. }
  61. }
  62. };

不可编辑

  1. <van-contact-card
  2. type="edit"
  3. name="张三"
  4. tel="13000000000"
  5. :editable="false"
  6. />

API

ContactCard Props

参数说明类型默认值
type类型,可选值为 add editstringadd
name联系人姓名string-
tel联系人手机号string-
add-text添加时的文案提示string添加订单联系人信息

ContactCard Events

事件名说明回调参数
click点击时触发event: Event

ContactList Props

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

ContactList Events

事件名说明回调参数
add点击新增按钮时触发-
edit点击编辑按钮时触发item: 当前联系人对象,index: 索引
select切换选中的联系人时触发item: 当前联系人对象,index: 索引

ContactEdit Props

参数说明类型默认值
contact-info联系人信息object[]
is-edit是否为编辑联系人booleanfalse
is-saving是否显示保存按钮加载动画booleanfalse
is-deleting是否显示删除按钮加载动画booleanfalse
tel-validator手机号格式校验函数(tel: string) => boolean-
show-set-default v2.3.0是否显示默认联系人栏booleanfalse
set-default-label v2.3.0默认联系人栏文案string-

ContactEdit Events

事件名说明回调参数
save点击保存按钮时触发content:表单内容
delete点击删除按钮时触发content:表单内容

Contact 数据结构

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

Contact 联系人 - 图1