介绍
编辑并保存联系人信息。
引入
代码演示
基础用法
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：表单内容 |
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-size | 16px | - | |
| @contact-edit-field-label-width | 4.1em | - |
效果图：
