Contact 联系人

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

使用指南

  1. import { ContactCard, ContactList, ContactEdit } from 'vant';
  2. Vue
  3. .use(ContactCard)
  4. .use(ContactList)
  5. .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. />

ContactCard API

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

ContactCard Event

事件名说明参数
click点击时触发-

ContactList API

参数说明类型默认值版本
v-model当前选中联系人的 idString | Number--
list联系人列表Array[]-
add-text新建按钮文案String新建联系人-

ContactList Event

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

ContactEdit API

参数说明类型默认值版本
contact-info联系人信息Object[]-
is-edit是否为编辑联系人Booleanfalse-
is-saving是否显示保存按钮加载动画Booleanfalse-
is-deleting是否显示删除按钮加载动画Booleanfalse-
tel-validator手机号格式校验函数(tel: string) => boolean--

ContactEdit Event

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

数据格式

联系人数据格式

key说明类型
id每位联系人的唯一标识String | Number
name联系人姓名String
tel联系人手机号String | Number

原文: https://youzan.github.io/vant/#/zh-CN/contact-card