Vant3 中文入门教程 Vant3 ContactEdit 联系人编辑

2024-02-25 开发教程 Vant3 中文入门教程 匿名 1

介绍

编辑并保存联系人信息。

实例演示

引入

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

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,
};
},
};

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

样式变量

组件提供了下列 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

-