介绍
编辑并保存联系人信息。
引入
import Vue from 'vue';
import { ContactEdit } from 'vant';
Vue.use(ContactEdit);
代码演示
基础用法
<van-contact-edit
is-edit
show-set-default
:contact-info="editingContact"
set-default-label="设为默认联系人"
@save="onSave"
@delete="onDelete"
/>
import { Toast } from 'vant';
export default {
data() {
return {
editingContact: {},
};
},
methods: {
onSave(contactInfo) {
Toast('保存');
},
onDelete(contactInfo) {
Toast('删除');
},
},
};
API
Props
| 参数 |
说明 |
类型 |
默认值 |
| 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
|
- |
Events
| 事件名 |
说明 |
回调参数 |
| save |
点击保存按钮时触发 |
content：表单内容 |
| delete |
点击删除按钮时触发 |
content：表单内容 |
| 键名 |
说明 |
类型 |
| 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-size |
16px
|
- |
| @contact-edit-field-label-width |
4.1em
|
- |
