编辑并保存联系人信息。
通过以下方式来全局注册组件，更多注册方式请参考组件注册。
import { createApp } from 'vue';
import { ContactEdit } from 'vant';
const app = createApp();
app.use(ContactEdit); <van-contact-edit
is-edit
show-set-default
:contact-info="editingContact"
set-default-label="设为默认联系人"
@save="onSave"
@delete="onDelete"
/>
import { ref } from 'vue';
import { showToast } from 'vant';
export default {
setup() {
const editingContact = ref({
tel: '',
name: '',
});
const onSave = (contactInfo) => showToast('保存');
const onDelete = (contactInfo) => showToast('删除');
return {
onSave,
onDelete,
editingContact,
};
},
}; | 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| contact-info | 联系人信息 | Contact | {} |
| is-edit | 是否为编辑联系人 | boolean | false |
| is-saving | 是否显示保存按钮加载动画 | boolean | false |
| is-deleting | 是否显示删除按钮加载动画 | boolean | false |
| tel-validator | 手机号格式校验函数 | (tel: string) => boolean | - |
| show-set-default | 是否显示默认联系人栏 | boolean | false |
| set-default-label | 默认联系人栏文案 | string | - |
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| save | 点击保存按钮时触发 | content：表单内容 |
| delete | 点击删除按钮时触发 | content：表单内容 |
| 键名 | 说明 | 类型 |
|---|---|---|
| name | 联系人姓名 | string |
| tel | 联系人手机号 | number | string |
组件导出以下类型定义：
import type { ContactEditInfo, ContactEditProps } from 'vant'; 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --van-contact-edit-padding | var(--van-padding-md) | - |
| --van-contact-edit-fields-radius | var(--van-radius-md) | - |
| --van-contact-edit-buttons-padding | var(--van-padding-xl) 0 | - |
| --van-contact-edit-button-margin-bottom | var(--van-padding-sm) | - |
| --van-contact-edit-button-font-size | var(--van-font-size-lg) | - |
| --van-contact-edit-field-label-width | 4.1em | - |