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-popupv-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-popupv-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. exportdefault{
  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. returnthis.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类型,可选值为 addeditStringadd-
name联系人姓名String--
tel联系人手机号String--
add-text添加时的文案提示String添加订单联系人信息-

ContactCard Events

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

ContactList Props

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

ContactEdit Events

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

联系人数据格式

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

Contact 联系人 - 图1