Vant3 中文入门教程 Vant3 ContactList 联系人列表

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

介绍

展示联系人列表。

实例演示

引入

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

import { createApp } from 'vue';
import { ContactList } from 'vant';
const app = createApp();
app.use(ContactList);

代码演示

基础用法

<van-contact-list
v-model="state.chosenContactId"
:list="state.list"
default-tag-text="默认"
@add="onAdd"
@edit="onEdit"
@select="onSelect"
/>
import { reactive } from 'vue';
import { Toast } from 'vant';
export default {
setup() {
const state = reactive({
chosenContactId: '1',
list: [
{
id: '1',
name: '张三',
tel: '13000000000',
isDefault: true,
},
{
id: '2',
name: '李四',
tel: '1310000000',
},
],
});
const onAdd = () => Toast('新增');
const onEdit = (contact) => Toast('编辑' + contact.id);
const onSelect = (contact) => Toast('选择' + contact.id);
return {
state,
onAdd,
onEdit,
onSelect,
};
},
};

API

Props

参数说明类型默认值
v-model当前选中联系人的 id

number | string

-
list联系人列表

Contact[]

[]

add-text新建按钮文案

string

新建联系人

default-tag-text默认联系人标签文案

string

-

Events

事件名说明回调参数
add点击新增按钮时触发-
edit点击编辑按钮时触发

contact: Contact,index: number

select切换选中的联系人时触发

contact: Contact,index: number

Contact 数据结构

键名说明类型
id每位联系人的唯一标识

number | string

name联系人姓名

string

tel联系人手机号

number | string

isDefault是否为默认联系人

boolean

样式变量

组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。

名称默认值描述
--van-contact-list-edit-icon-size

16px

-
--van-contact-list-add-button-z-index

999

-
--van-contact-list-item-padding

var(--van-padding-md)

-
--van-contact-list-item-radio-icon-color

var(--van-danger-color)

-