ContactEdit 联系人编辑

介绍

编辑并保存联系人信息。

引入

  1. import Vue from 'vue';
  2. import { ContactEdit } from 'vant';
  3. Vue.use(ContactEdit);

代码演示

基础用法

  1. <van-contact-edit
  2. is-edit
  3. show-set-default
  4. :contact-info="editingContact"
  5. set-default-label="设为默认联系人"
  6. @save="onSave"
  7. @delete="onDelete"
  8. />
  1. import { Toast } from 'vant';
  2. export default {
  3. data() {
  4. return {
  5. editingContact: {},
  6. };
  7. },
  8. methods: {
  9. onSave(contactInfo) {
  10. Toast('保存');
  11. },
  12. onDelete(contactInfo) {
  13. Toast('删除');
  14. },
  15. },
  16. };

API

Props

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

Events

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

Contact 数据结构

键名说明类型
name联系人姓名string
tel联系人手机号number | string

样式变量

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

名称默认值描述
@contact-edit-padding@padding-md-
@contact-edit-fields-radius@border-radius-md-
@contact-edit-buttons-padding@padding-xl 0-
@contact-edit-button-margin-bottom@padding-sm-
@contact-edit-button-font-size16px-
@contact-edit-field-label-width4.1em-

ContactEdit 联系人编辑 - 图1