W3Cschool
恭喜您成為首批注冊(cè)用戶(hù)
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
數(shù)據(jù)量過(guò)多時(shí),采用分頁(yè)的形式將數(shù)據(jù)分隔,每次只加載一個(gè)頁(yè)面。
通過(guò)以下方式來(lái)全局注冊(cè)組件,更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。
import { createApp } from 'vue';
import { Pagination } from 'vant';
const app = createApp();
app.use(Pagination);
通過(guò) ?v-model
? 來(lái)綁定當(dāng)前頁(yè)碼。
<van-pagination v-model="currentPage" :total-items="24" :items-per-page="5" />
import { ref } from 'vue';
export default {
setup() {
const currentPage = ref(1);
return { currentPage };
},
};
將 ?mode
? 設(shè)置為 ?simple
? 來(lái)切換到簡(jiǎn)單模式,此時(shí)分頁(yè)器不會(huì)展示具體的頁(yè)碼按鈕。
<van-pagination v-model="currentPage" :page-count="12" mode="simple" />
設(shè)置 ?force-ellipses
? 后會(huì)展示省略號(hào)按鈕,點(diǎn)擊后可以快速跳轉(zhuǎn)。
<van-pagination
v-model="currentPage"
:total-items="125"
:show-page-size="3"
force-ellipses
/>
通過(guò) ?prev-text
?、?next-text
? 等插槽來(lái)自定義分頁(yè)按鈕的內(nèi)容。
<van-pagination v-model="currentPage" :total-items="50" :show-page-size="5">
<template #prev-text>
<van-icon name="arrow-left" />
</template>
<template #next-text>
<van-icon name="arrow" />
</template>
<template #page="{ text }">{{ text }}</template>
</van-pagination>
參數(shù) | 說(shuō)明 | 類(lèi)型 | 默認(rèn)值 |
---|---|---|---|
v-model | 當(dāng)前頁(yè)碼 | number | - |
mode | 顯示模式,可選值為 simple
|
string | multi
|
prev-text | 上一頁(yè)按鈕文字 | string | 上一頁(yè)
|
next-text | 下一頁(yè)按鈕文字 | string | 下一頁(yè)
|
page-count | 總頁(yè)數(shù) | number | string | 根據(jù)頁(yè)數(shù)計(jì)算 |
total-items | 總記錄數(shù) | number | string | 0
|
items-per-page | 每頁(yè)記錄數(shù) | number | string | 10
|
show-page-size | 顯示的頁(yè)碼個(gè)數(shù) | number | string | 5
|
force-ellipses | 是否顯示省略號(hào) | boolean | false
|
事件名 | 說(shuō)明 | 回調(diào)參數(shù) |
---|---|---|
change | 頁(yè)碼改變時(shí)觸發(fā) | - |
名稱(chēng) | 描述 | 參數(shù) |
---|---|---|
page | 自定義頁(yè)碼 | { number: number, text: string, active: boolean } |
prev-text | 自定義上一頁(yè)按鈕文字 | - |
next-text | 自定義下一頁(yè)按鈕文字 | - |
組件導(dǎo)出以下類(lèi)型定義:
import type { PaginationMode, PaginationProps } from 'vant';
組件提供了下列 CSS 變量,可用于自定義樣式,使用方法請(qǐng)參考 ConfigProvider 組件。
名稱(chēng) | 默認(rèn)值 | 描述 |
---|---|---|
--van-pagination-height | 40px | - |
--van-pagination-font-size | var(--van-font-size-md) | - |
--van-pagination-item-width | 36px | - |
--van-pagination-item-default-color | var(--van-primary-color) | - |
--van-pagination-item-disabled-color | var(--van-gray-7) | - |
--van-pagination-item-disabled-background | var(--van-background) | - |
--van-pagination-background | var(--van-background-2) | - |
--van-pagination-desc-color | var(--van-gray-7) | - |
--van-pagination-disabled-opacity | var(--van-disabled-opacity) | - |
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)系方式:
更多建議: