vant/src/contact-list

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

<van-contact-list
  v-model="chosenContactId"
  :list="list"
  default-tag-text="default"
  @add="onAdd"
  @edit="onEdit"
  @select="onSelect"
/>

import { ref } from 'vue';
import { Toast } from 'vant';

export default {
  setup() {
    const chosenContactId = ref('1');
    const list = ref([
      {
        id: '1',
        name: 'John Snow',
        tel: '13000000000',
        isDefault: true,
      },
      {
        id: '2',
        name: 'Ned Stark',
        tel: '1310000000',
      },
    ]);

    const onAdd = () => Toast('Add');
    const onEdit = (contact) => Toast('Edit' + contact.id);
    const onSelect = (contact) => Toast('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	Contact[]	[]
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: Contact，index: number
select	Emitted when a contact is selected	contact: Contact, index: number

Data Structure of Contact

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

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-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)	-