W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
展示聯(lián)系人列表。
通過(guò)以下方式來(lái)全局注冊(cè)組件,更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。
import { createApp } from 'vue';
import { ContactList } from 'vant';
const app = createApp();
app.use(ContactList);
<van-contact-list
v-model="chosenContactId"
:list="list"
default-tag-text="默認(rèn)"
@add="onAdd"
@edit="onEdit"
@select="onSelect"
/>
import { ref } from 'vue';
import { showToast } from 'vant';
export default {
setup() {
const chosenContactId = ref('1');
const list = ref([
{
id: '1',
name: '張三',
tel: '13000000000',
isDefault: true,
},
{
id: '2',
name: '李四',
tel: '1310000000',
},
]);
const onAdd = () => showToast('新增');
const onEdit = (contact) => showToast('編輯' + contact.id);
const onSelect = (contact) => showToast('選擇' + contact.id);
return {
list,
onAdd,
onEdit,
onSelect,
chosenContactId,
};
},
};
參數(shù) | 說(shuō)明 | 類型 | 默認(rèn)值 |
---|---|---|---|
v-model | 當(dāng)前選中聯(lián)系人的 id | number | string | - |
list | 聯(lián)系人列表 | Contact[] | []
|
add-text | 新建按鈕文案 | string | 新建聯(lián)系人
|
default-tag-text | 默認(rèn)聯(lián)系人標(biāo)簽文案 | string | - |
事件名 | 說(shuō)明 | 回調(diào)參數(shù) |
---|---|---|
add | 點(diǎn)擊新增按鈕時(shí)觸發(fā) | - |
edit | 點(diǎn)擊編輯按鈕時(shí)觸發(fā) | contact: Contact,index: number |
select | 切換選中的聯(lián)系人時(shí)觸發(fā) | contact: Contact,index: number |
鍵名 | 說(shuō)明 | 類型 |
---|---|---|
id | 每位聯(lián)系人的唯一標(biāo)識(shí) | number | string |
name | 聯(lián)系人姓名 | string |
tel | 聯(lián)系人手機(jī)號(hào) | number | string |
isDefault | 是否為默認(rèn)聯(lián)系人 | boolean |
組件導(dǎo)出以下類型定義:
import type { ContactListItem, ContactListProps } from 'vant';
組件提供了下列 CSS 變量,可用于自定義樣式,使用方法請(qǐng)參考 ConfigProvider 組件。
名稱 | 默認(rèn)值 | 描述 |
---|---|---|
--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) | - |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: