ContactList - Vant 4

ContactList

Intro

Used to display the contact list.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

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

Usage

Basic Usage

import { ref } from'vue'; import { showToast } from'vant'; exportdefault { setup() { const chosenContactId = ref('1'); const list = ref([ { id: '1', name: 'John Snow', tel: '13000000000', isDefault: true, }, { id: '2', name: 'Ned Stark', tel: '1310000000', }, ]); constonAdd = () => showToast('Add'); constonEdit = (contact) => showToast('Edit' + contact.id); constonSelect = (contact) => showToast('Select' + contact.id); return { list, onAdd, onEdit, onSelect, chosenContactId, }; }, };

API

Props

Attribute	Description	Type	Default
v-model	Id of chosen contact	*number	string*
list	Contact list	ContactListItem[]	[]
add-text	Add button text	string	Add new contact
default-tag-text	Default tag text	string	-

Events

Event	Description	Arguments
add	Emitted when the add button is clicked	-
edit	Emitted when the edit button is clicked	contact: ContactListItem, index: number
select	Emitted when a contact is selected	contact: ContactListItem, index: number

Data Structure of ContactListItem

key	Description	Type
id	ID	*number
name	Name	string
tel	Phone	string
isDefault	Is default contact	*boolean

Types

The component exports the following type definitions:

importtype { ContactListItem, ContactListProps } from'vant';

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--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)	-