ContactEdit 联系人编辑

介绍

编辑并保存联系人信息。

引入

通过以下方式来全局注册组件,更多注册方式请参考组件注册

  1. import { createApp } from 'vue';
  2. import { ContactEdit } from 'vant';
  3. const app = createApp();
  4. app.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 { ref } from 'vue';
  2. import { showToast } from 'vant';
  3. export default {
  4. setup() {
  5. const editingContact = ref({
  6. tel: '',
  7. name: '',
  8. });
  9. const onSave = (contactInfo) => showToast('保存');
  10. const onDelete = (contactInfo) => showToast('删除');
  11. return {
  12. onSave,
  13. onDelete,
  14. editingContact,
  15. };
  16. },
  17. };

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

类型定义

组件导出以下类型定义:

  1. import type { ContactEditInfo, ContactEditProps } from 'vant';

主题定制

样式变量

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

名称默认值描述
—van-contact-edit-paddingvar(—van-padding-md)-
—van-contact-edit-fields-radiusvar(—van-radius-md)-
—van-contact-edit-buttons-paddingvar(—van-padding-xl) 0-
—van-contact-edit-button-margin-bottomvar(—van-padding-sm)-
—van-contact-edit-button-font-sizevar(—van-font-size-lg)-
—van-contact-edit-field-label-width4.1em-

ContactEdit 联系人编辑 - 图1