Contact 联系人
介绍
联系人相关组件，包含联系人卡片、联系人列表和联系人编辑组件。
引入
js
import { createApp } from 'vue';
import { Contact, ContactCard, ContactEdit, ContactList } from '@szhn/dh-design-mobile';
const app = createApp();
app.use(Contact);
app.use(ContactCard);
app.use(ContactEdit);
app.use(ContactList);代码演示
基础用法
基础用法展示联系人卡片。
html
<van-contact-card type="add" @click="onAdd" />联系人列表
展示联系人列表，可以选择联系人、新增和编辑联系人。
html
<van-contact-card
type="edit"
:name="currentContact.name"
:tel="currentContact.tel"
@click="showList = true"
/>
<van-popup v-model:show="showList" position="bottom" round>
<van-contact-list
v-model="chosenContactId"
:list="list"
default-tag-text="默认"
@add="onAdd"
@edit="onEdit"
@select="onSelect"
/>
</van-popup>联系人编辑
创建或编辑联系人信息。
html
<van-contact-edit
:contact-info="editingContact"
set-default-label="设为默认联系人"
show-set-default
@save="onSave"
@delete="onDelete"
/>API
ContactCard Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 卡片类型 | 'add' | 'edit' | add |
| name | 联系人姓名 | string | - |
| tel | 联系人手机号 | string | - |
| add-text | 添加时的文案提示 | string | 添加联系人 |
| editable | 是否可以编辑联系人 | boolean | true |
ContactList Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 当前选中联系人的 id | number | string | - |
| list | 联系人列表 | ContactListItem[] | [] |
| add-text | 新建按钮文案 | string | 新建联系人 |
| default-tag-text | 默认联系人标签文案 | string | - |
ContactList Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| add | 点击新增按钮时触发 | - |
| edit | 点击编辑按钮时触发 | contact: ContactListItem，index: number |
| select | 切换选中的联系人时触发 | contact: ContactListItem，index: number |
ContactEdit Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| contact-info | 联系人信息 | ContactEditInfo | {} |
| 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 | - |
ContactEdit Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| save | 点击保存按钮时触发 | content：表单内容 |
| delete | 点击删除按钮时触发 | content：表单内容 |
| change-default | 切换是否为默认联系人时触发 | checked：是否默认 |
ContactCard Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击时触发 | event: MouseEvent |
主题定制
样式变量
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --van-contact-card-padding | var(--van-padding-md) | 联系人卡片内边距 |
| --van-contact-card-add-icon-size | 40px | 新增图标大小 |
| --van-contact-card-add-icon-color | var(--van-primary-color) | 新增图标颜色 |
| --van-contact-card-title-line-height | var(--van-line-height-md) | 标题行高 |
| --van-contact-list-padding | var(--van-padding-sm) var(--van-padding-sm) 80px | 联系人列表内边距 |
| --van-contact-list-edit-icon-size | 16px | 编辑图标大小 |
| --van-contact-list-add-button-z-index | 999 | 新增按钮层级 |
| --van-contact-list-radio-color | var(--van-primary-color) | 单选按钮颜色 |
| --van-contact-list-item-padding | var(--van-padding-md) | 列表项内边距 |
| --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 | 表单标签宽度 |