Back to Vant

Pagination

packages/vant/src/pagination/README.md

4.10.03.4 KB
Original Source

Pagination

Intro

When the amount of data is too much, use pagination to separate the data, and load only one page at a time.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

js
import { createApp } from 'vue';
import { Pagination } from 'vant';

const app = createApp();
app.use(Pagination);

Usage

Basic Usage

html
<van-pagination v-model="currentPage" :total-items="24" :items-per-page="5" />
js
import { ref } from 'vue';

export default {
  setup() {
    const currentPage = ref(1);
    return { currentPage };
  },
};

Simple mode

html
<van-pagination v-model="currentPage" :page-count="12" mode="simple" />

Show ellipses

html
<van-pagination
  v-model="currentPage"
  :total-items="125"
  :show-page-size="3"
  force-ellipses
/>

Custom Button

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

API

Props

AttributeDescriptionTypeDefault
v-modelCurrent page numbernumber-
modeMode, can be set to simple multistringmulti
prev-textPrevious textstringPrevious
next-textNext textstringNext
total-itemsTotal itemsnumber | string0
items-per-pageItem number per pagenumber | string10
page-countThe total number of pages, if not set, will be calculated based on total-items and items-per-pagenumber | string-
show-page-sizeCount of page size to shownumber | string5
force-ellipsesWhether to show ellipsesbooleanfalse
show-prev-button v4.2.1Whether to show prev buttonbooleantrue
show-next-button v4.2.1Whether to show next buttonbooleantrue

Events

EventDescriptionArguments
changeEmitted when current page changed-

Slots

NameDescriptionSlotProps
pageCustom pagination item{ number: number, text: string, active: boolean }
prev-textCustom prev text-
next-textCustom next text-

Types

The component exports the following type definitions:

ts
import type { PaginationMode, PaginationProps } 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-pagination-height40px-
--van-pagination-font-sizevar(--van-font-size-md)-
--van-pagination-item-width36px-
--van-pagination-item-default-colorvar(--van-primary-color)-
--van-pagination-item-disabled-colorvar(--van-gray-7)-
--van-pagination-item-disabled-backgroundvar(--van-background)-
--van-pagination-backgroundvar(--van-background-2)-
--van-pagination-desc-colorvar(--van-gray-7)-
--van-pagination-disabled-opacityvar(--van-disabled-opacity)-