Contact 联系人

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

使用指南

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

代码演示

基础用法

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

不可编辑

  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