import{o as t,a,y as n}from"./vue-libs.b44bc779.js";const e={class:"van-doc-markdown-body"},d=n(`

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

AttributeDescriptionTypeDefault
v-modelId of chosen contactnumber | string-
listContact listContact[][]
add-textAdd button textstringAdd new contact
default-tag-textDefault tag textstring-

Events

EventDescriptionArguments
addEmitted when the add button is clicked-
editEmitted when the edit button is clickedcontact: Contact, index: number
selectEmitted when a contact is selectedcontact: Contact, index: number

Data Structure of Contact

keyDescriptionType
idIDnumber | string
nameNamestring
telPhonestring
isDefaultIs default contactboolean

Types

The component exports the following type definitions:

import type { 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.

NameDefault ValueDescription
--van-contact-list-edit-icon-size16px-
--van-contact-list-add-button-z-index999-
--van-contact-list-item-paddingvar(--van-padding-md)-
--van-contact-list-item-radio-icon-colorvar(--van-danger-color)-
`,12),l=[d],h={__name:"README",setup(c,{expose:s}){return s({frontmatter:{}}),(o,r)=>(t(),a("div",e,l))}};export{h as default};