Pagination 分页
新粗野主义风格的分页组件，基于内置计算分页算法构建，支持响应式分页范围计算（自动处理省略号显示）、首页/末页快速导航、可配置兄弟页数（siblingCount）控制显示范围，提供多种变体和尺寸选择，完整的无障碍支持（aria-label、aria-current），以及可点击省略号自定义跳页交互。
预览
Preview
基础用法
变体：默认 / 圆角 / 极简
尺寸：小 / 默认 / 大
siblingCount（相邻页码数）
showFirstLast（首页/末页按钮）
showPageNumbers（页码显示模式）
自定义布局与快速跳转（Jumper）
通过配置 layout 属性，可以自由排列：总条数（total）、每页条数（sizes）、上一页（prev）、页码（pager）、下一页（next）和快速跳转（jumper）。
可点击省略号（jump 事件）
点击省略号 ••• 触发 jump 事件，弹出输入框直接跳转到目标页码。
安装
pnpm dlx brutx-vue@latest add pagination用法
vue
<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>带完整选项
vue
<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）。 默认值为 'sizes, prev, pager, next, jumper, total'。在 jumper 快速跳转输入框中，输入目标页码并按回车键（Enter）即可跳转。
vue
<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"），而不是页码按钮。
vue
<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 事件（无参数），开发者可在此事件中实现自定义跳页交互，例如弹出输入框让用户直接输入目标页码。
vue
<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 |
Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue | number | —（必填） | 当前页码，支持 v-model 双向绑定 |
totalPages | number | — | 总页数（与 total + pageSize 二选一） |
total | number | — | 总条数 |
pageSize | number | 10 | 每页条数 |
pageSizes | number[] | [10, 20, 50, 100] | 每页条数选项 |
layout | string | 'sizes, prev, pager, next, jumper, total' | 自定义布局（逗号分隔：total、sizes、prev、pager、next、jumper） |
disabled | boolean | false | 是否禁用 |
background | boolean | false | 页码按钮是否显示背景色 |
hideOnSinglePage | boolean | false | 只有一页时是否隐藏 |
siblingCount | number | 1 | 当前页码两侧显示的兄弟页数 |
showFirstLast | boolean | true | 是否显示首页/末页按钮 |
showPageNumbers | boolean | true | 是否显示页码按钮，为 false 时显示页码计数器 |
variant | 'default' | 'rounded' | 'minimal' | 'default' | 组件变体样式 |
size | 'sm' | 'default' | 'lg' | 'default' | 组件尺寸 |
class | string | — | 自定义 CSS 类名，会合并到根元素 <nav> 上 |
事件
| 事件 | 参数 | 说明 |
|---|---|---|
update:modelValue | page: number | 页码变化时触发，用于 v-model 绑定 |
update:pageSize | size: number | 每页条数变化时触发 |
jump | — | 点击省略号 ... 按钮时触发，用于自定义跳页交互 |
可访问性
- ARIA 属性：根元素使用
<nav>标签，role="navigation"和aria-label属性；页码按钮使用aria-label="Go to page X"格式；当前页码按钮使用aria-current="page"标识 - 焦点管理：导航按钮使用语义化标签（首页、上一页、下一页、末页）；禁用状态使用
disabled属性和相应样式