Pagination 分页
新粗野主义风格的分页组件，基于内置计算分页算法构建，支持响应式分页范围计算（自动处理省略号显示）、首页/末页快速导航、可配置兄弟页数（siblingCount）控制显示范围，提供多种变体和尺寸选择，完整的无障碍支持（aria-label、aria-current），以及可点击省略号自定义跳页交互。
预览
基础用法
变体：默认 / 圆角 / 极简
尺寸：小 / 默认 / 大
siblingCount（相邻页码数）
showFirstLast（首页/末页按钮）
showPageNumbers（页码显示模式）
自定义布局与快速跳转（Jumper）
通过配置 layout 属性，可以自由排列：总条数（total）、每页条数（sizes）、上一页（prev）、页码（pager）、下一页（next）和快速跳转（jumper）。
可点击省略号（jump 事件）
点击省略号 ••• 触发 jump 事件，弹出输入框直接跳转到目标页码。
安装
pnpm dlx brutx-vue@latest add pagination用法
<script setup>
import { ref } from 'vue'
import { Pagination } from 'brutx-ui-vue'
const currentPage = ref(1)
const totalPages = 10
</script>
<template>
<Pagination
v-model="currentPage"
:total-pages="totalPages"
/>
</template>带完整选项
<script setup>
import { ref } from 'vue'
import { Pagination } from 'brutx-ui-vue'
const currentPage = ref(1)
</script>
<template>
<Pagination
v-model="currentPage"
:total-pages="50"
:sibling-count="2"
:show-first-last="true"
:show-page-numbers="true"
variant="default"
size="default"
/>
</template>自定义布局与快速跳转 (Jumper)
你可以通过 layout 属性选择要显示的功能模块，包括：总条数（total）、每页大小选择（sizes）、上一页（prev）、页码（pager）、下一页（next）和快速跳转（jumper）。 区域按 total、sizes、prev、pager、next、jumper 的固定顺序渲染。在 jumper 快速跳转输入框中，输入目标页码并按回车键（Enter）即可跳转。
<script setup>
import { ref } from 'vue'
import { Pagination } from 'brutx-ui-vue'
const currentPage = ref(1)
const pageSize = ref(10)
</script>
<template>
<Pagination
v-model="currentPage"
v-model:page-size="pageSize"
:total="100"
layout="total, sizes, prev, pager, next, jumper"
/>
</template>不显示页码
当设置 showPageNumbers 为 false 时，组件会显示当前页码与总页数的计数器（如 "3 / 10"），而不是页码按钮。
<script setup>
import { ref } from 'vue'
import { Pagination } from 'brutx-ui-vue'
const currentPage = ref(1)
</script>
<template>
<Pagination
v-model="currentPage"
:total-pages="10"
:show-page-numbers="false"
/>
</template>可点击省略号
当总页数较多时，分页范围会以省略号 ... 表示被折叠的页码。省略号为可点击的 <button> 元素（带 aria-label="Jump pages"，无障碍友好），点击后会触发 jump 事件（无参数），开发者可在此事件中实现自定义跳页交互，例如弹出输入框让用户直接输入目标页码。
<script setup>
import { ref } from 'vue'
import { Pagination } from 'brutx-ui-vue'
const currentPage = ref(1)
function handleJump() {
const input = window.prompt('跳转到第几页？')
if (input !== null) {
const page = Number(input)
if (Number.isFinite(page)) {
currentPage.value = page
}
}
}
</script>
<template>
<Pagination
v-model="currentPage"
:total-pages="50"
:sibling-count="1"
@jump="handleJump"
/>
</template>变体
| 变体 | 说明 |
|---|---|
default | 标准按钮样式 |
rounded | 按钮使用 --brutal-radius 圆角 |
minimal | 按钮无边框和阴影 |
尺寸
| 尺寸 | 按钮高度 | 间距 | 图标尺寸 |
|---|---|---|---|
sm | h-8 | gap-1 | h-3 w-3 |
default | h-10 | gap-2 | h-4 w-4 |
lg | h-12 | gap-3 | h-5 w-5 |
API 参考
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue必填 | number | — | 当前页码，从 1 开始并通过 v-model 同步；显示时会约束在可用页码范围内。 |
详情 | |||
totalPages | number | undefined | undefined | 显式总页数；提供时优先于 total 与 pageSize 的计算结果。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/pagination/Pagination.vue | |||
total | number | undefined | undefined | 数据总条数，用于计算总页数及显示 total 区域。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/pagination/Pagination.vue | |||
pageSize | number | undefined | 10 | 每页条数，用于页数计算和页大小选择器，支持 v-model:pageSize。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/pagination/Pagination.vue | |||
pageSizes | number[] | undefined | [10, 20, 50, 100]按实例调用工厂函数 | 每页条数选择器中的可选值列表。 |
详情声明类型number[] | undefined 默认值详情
来源packages/ui/src/components/pagination/Pagination.vue | |||
layout | string | undefined | "sizes, prev, pager, next, jumper, total" | 逗号分隔的显示区域名称：total、sizes、prev、pager、next、jumper。用于选择显示区域，渲染顺序按组件布局固定。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/pagination/Pagination.vue | |||
disabled | boolean | undefined | false | 禁用页码导航、页大小选择及跳转输入。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/pagination/Pagination.vue | |||
background | boolean | undefined | false | 为未激活的页码按钮及前后导航按钮添加背景色。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/pagination/Pagination.vue | |||
hideOnSinglePage | boolean | undefined | false | 计算出的总页数不超过一页时隐藏整个分页导航。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/pagination/Pagination.vue | |||
siblingCount | number | undefined | 1 | 在当前页两侧显示的相邻页码数量，用于计算省略号区域。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/pagination/Pagination.vue | |||
showFirstLast | boolean | undefined | true | 显示首页与末页按钮；还需分别在 layout 中启用 prev 和 next 区域。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/pagination/Pagination.vue | |||
showPageNumbers | boolean | undefined | true | pager 区域显示页码按钮；关闭时改为当前页与总页数的计数文本。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/pagination/Pagination.vue | |||
variant | "default" | "minimal" | "rounded" | undefined | "default" | 分页导航容器的视觉变体。 |
详情声明类型NonNullable<"default" | "rounded" | "minimal" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/pagination/Pagination.vue | |||
size | "default" | "lg" | "sm" | undefined | "default" | 分页导航及页码按钮的尺寸变体。 |
详情声明类型NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/pagination/Pagination.vue | |||
class | string | undefined | undefined | 合并到根 nav 元素的自定义 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/pagination/Pagination.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
@update:modelValue | [page: number] | 点击页码或导航按钮、提交有效跳页值时发出目标页码；改变每页条数导致当前页超出范围时也会发出调整后的页码。 |
详情声明类型[page: number] 来源packages/ui/src/components/pagination/Pagination.vue | ||
@update:pageSize | [size: number] | 页大小选择器改变时发出新的每页条数。 |
详情声明类型[size: number] 来源packages/ui/src/components/pagination/Pagination.vue | ||
@jump | [] | 点击省略号按钮时发出，供使用方打开自定义跳页交互；该事件本身不改变页码。 |
详情声明类型[] 来源packages/ui/src/components/pagination/Pagination.vue | ||
可访问性
- ARIA 属性：根元素使用
<nav>标签，role="navigation"和aria-label属性；页码按钮使用aria-label="Go to page X"格式；当前页码按钮使用aria-current="page"标识 - 焦点管理：导航按钮使用语义化标签（首页、上一页、下一页、末页）；禁用状态使用
disabled属性和相应样式