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

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.

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

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

Usage

Basic Usage

<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 };
  },
};

Simple mode

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

Show ellipses

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

Custom Button

<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

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:

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-background-colorvar(--van-background-color)-
--van-pagination-background-colorvar(--van-background-color-light)-
--van-pagination-desc-colorvar(--van-gray-7)-
--van-pagination-disabled-opacityvar(--van-disabled-opacity)-
`,15),l=[d],h={__name:"README",setup(p,{expose:t}){return t({frontmatter:{}}),(r,c)=>(s(),a("div",e,l))}};export{h as default};