Pagination Page

A pagination component for navigating between pages. Simple and straightforward.

Basic Usage

Simply insert content using the component's default slot.

• 1
• 2
• 3
• 4
• 10

<template>
  <b-page v-model:current="current" :total="100"></b-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(2)
</script>

Page Size

• 1
• 2
• 3
• 4
• 10

<template>
  <b-page v-model:current="current" :total="100" show-sizer></b-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(2)
</script>

Elevator

• 1
• 2
• 3
• 4
• 10
跳至 页

<template>
  <b-page v-model:current="current" :total="100" show-elevator></b-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(2)
</script>

Total

• 共 100 条
• 1
• 2
• 3
• 4
• 10

<template>
  <b-page v-model:current="current" :total="100" show-total></b-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(2)
</script>

Mini Size

• 共 100 条
• 1
• 2
• 3
• 4
• 10
跳至 页

<template>
  <b-page
    v-model:current="current"
    :total="100"
    size="small"
    show-elevator
    show-sizer
    show-total
  ></b-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(2)
</script>

Previous/Next Page Text

• Prev
• 1
• 2
• 3
• 4
• 10
• Next

<template>
  <b-page v-model:current="current" :total="100" prev-text="Prev" next-text="Next"></b-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(2)
</script>

Simple Mode

• / 10

<template>
  <b-page v-model:current="current" :total="100" simple></b-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(2)
</script>

Props

Parameter	Description	Type	Options	Default
current	Current page number, supports v-model:current modifier	Number	—	1
total	Total number of items	Number	—	0
page-size	Number of items per page	Number	—	10
page-size-opts	Configuration for page size switching	Array	—	[10, 20, 30, 40]
placement	Expansion direction of the page size switching dropdown	string	bottom / top	bottom
size	Size, options are small (mini) or none (default)	string	—	—
simple	Simple mode	Boolean	—	false
show-total	Show total count	Boolean	—	false
show-elevator	Show elevator for quickly jumping to a specific page	Boolean	—	false
show-sizer	Show page sizer to change page-size	Boolean	—	false
class-name	Custom class name	String	—	—
styles	Custom inline styles	Object	—	—
prev-text	Text for the previous page button, replacing the icon	String	—	—
next-text	Text for the next page button, replacing the icon	String	—	—

Events

Event Name	Description	Return Value
change	Callback when page number changes, returns the new page number	page number
size-change	Callback when page size changes, returns the new page size	page-size

Slot

Name	Description
default	Custom content for displaying the total count