Introduced
Contact components enable contact presentation, selection, editing, and more.
Introduced
import Vue from 'vue';
import { ContactCard, ContactList, ContactEdit } from 'vant';
Vue.use(ContactCard);
Vue.use(ContactList);
Vue.use(ContactEdit);
Code demo
Basic usage
<van-contact-card
:type="cardType"
:name="currentContact.name"
:tel="currentContact.tel"
@click="showList = true"
/>
<van-popup v-model="showList" position="bottom">
<van-contact-list
v-model="chosenContactId"
:list="list"
@add="onAdd"
@edit="onEdit"
@select="onSelect"
/>
</van-popup>
<van-popup v-model="showEdit" position="bottom">
<van-contact-edit
:contact-info="editingContact"
:is-edit="isEdit"
@save="onSave"
@delete="onDelete"
/>
</van-popup>
export default {
data() {
return {
chosenContactId: null,
editingContact: {},
showList: false,
showEdit: false,
isEdit: false,
list: [{
name: '张三',
tel: '13000000000',
id: 0
}]
};
},
computed: {
cardType() {
return this.chosenContactId !== null ? 'edit' : 'add';
},
currentContact() {
const id = this.chosenContactId;
return id !== null ? this.list.filter(item => item.id === id)[0] : {};
}
},
methods: {
onAdd() {
this.editingContact = { id: this.list.length };
this.isEdit = false;
this.showEdit = true;
},
onEdit(item) {
this.isEdit = true;
this.showEdit = true;
this.editingContact = item;
},
onSelect() {
this.showList = false;
},
onSave(info) {
this.showEdit = false;
this.showList = false;
if (this.isEdit) {
this.list = this.list.map(item => item.id === info.id ? info : item);
} else {
this.list.push(info);
}
this.chosenContactId = info.id;
},
onDelete(info) {
this.showEdit = false;
this.list = this.list.filter(item => item.id !== info.id);
if (this.chosenContactId === info.id) {
this.chosenContactId = null;
}
}
}
};
Not editable
<van-contact-card
type="edit"
name="张三"
tel="13000000000"
:editable="false"
/>
Api
ContactCard Props
Parameters
|
Description
|
Type
|
The default
|
type
|
Type, the optional value
add
edit
|
string
|
add
|
name
|
The contact's name
|
string
|
-
|
tel
|
Contact phone number
|
string
|
-
|
add-text
|
The case tip when you add it
|
string
|
添加订单联系人信息
|
ContactCard Events
The name of the event
|
Description
|
Callback parameters
|
Click
|
Triggered when clicked
|
event: Event
|
ContactList Props
Parameters
|
Description
|
Type
|
The default
|
v-model
|
The id of the contact is currently selected
|
number |
string
|
-
|
list
|
The contact list
|
Contact[]
|
[]
|
add-text
|
Create a new button document
|
string
|
新建联系人
|
default-tag-text
v2.3.0
|
The default contact label document
|
string
|
-
|
ContactList Events
The name of the event
|
Description
|
Callback parameters
|
add
|
Triggered when the new button is clicked
|
-
|
edit
|
Triggered when the edit button is clicked
|
item: Current contact object, index: index
|
select
|
Triggered when switching selected contacts
|
item: Current contact object, index: index
|
ContactEdit Props
Parameters
|
Description
|
Type
|
The default
|
contact-info
|
Contact information
|
object
|
[]
|
is-edit
|
Whether to edit the contact
|
boolean
|
false
|
is-saving
|
Whether to display a save button load animation
|
boolean
|
false
|
is-deleting
|
Whether to display the delete button load animation
|
boolean
|
false
|
tel-validator
|
The phone number format check function
|
(tel: string) => boolean
|
-
|
show-set-default
v2.3.0
|
Whether to display the default contact bar
|
boolean
|
false
|
set-default-label
v2.3.0
|
The default contact bar document
|
string
|
-
|
ContactEdit Events
The name of the event
|
Description
|
Callback parameters
|
save
|
Triggered when the save button is clicked
|
Content: The content of the form
|
delete
|
Triggered when the delete button is clicked
|
Content: The content of the form
|
Contact data structure
The key name
|
Description
|
Type
|
Id
|
A unique identity for each contact
|
number |
string
|
name
|
The contact's name
|
string
|
tel
|
Contact phone number
|
number |
string
|
isDefault
|
Whether it is the default contact
|
boolean
|