编辑并保存联系人信息。
通过以下方式来全局注册组件,更多注册方式请参考组件注册。
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 { Toast } from 'vant';
export default {
setup() {
const editingContact = ref({});
const onSave = (contactInfo) => Toast('保存');
const onDelete = (contactInfo) => Toast('删除');
return {
onSave,
onDelete,
editingContact,
};
},
};
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
contact-info | 联系人信息 | Contact |
|
is-edit | 是否为编辑联系人 | boolean |
|
is-saving | 是否显示保存按钮加载动画 | boolean |
|
is-deleting | 是否显示删除按钮加载动画 | boolean |
|
tel-validator | 手机号格式校验函数 | (tel: string) => boolean | - |
show-set-default | 是否显示默认联系人栏 | boolean |
|
set-default-label | 默认联系人栏文案 | string | - |
事件名 | 说明 | 回调参数 |
---|---|---|
save | 点击保存按钮时触发 | content:表单内容 |
delete | 点击删除按钮时触发 | content:表单内容 |
键名 | 说明 | 类型 |
---|---|---|
name | 联系人姓名 | string |
tel | 联系人手机号 | number | string |
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
名称 | 默认值 | 描述 |
---|---|---|
--van-contact-edit-padding | var(--van-padding-md) | - |
--van-contact-edit-fields-radius | var(--van-border-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 | - |