NUR

主题

Pagination 分页 ​

当数据量过多时，使用分页分解数据。

基础用法 ​

共 100 条
前往 页
当前页: 1
vue
<my-pagination :total="100" v-model:current-page="page" />

尺寸 ​

size 属性提供 large、default、small 三种尺寸。

共 100 条
前往 页
共 100 条
前往 页
共 100 条
前往 页
vue
<my-pagination :total="100" size="large" />
<my-pagination :total="100" />
<my-pagination :total="100" size="small" />

简化模式 ​

simple 只显示上一页、页码、下一页，适合空间有限的场景。

1 / 10
vue
<my-pagination :total="100" simple />

自定义文字 ​

prevText / nextText 在简化模式下配合使用。

3 / 6
vue
<my-pagination :total="60" simple prev-text="上一页" next-text="下一页" />

带摘要 ​

layout 中加入 summary 显示当前范围摘要。

1-20 / 200
vue
<my-pagination :total="200" :page-size="20" layout="summary, prev, pager, next" />

设置每页条数 ​

共 200 条
前往 页
vue
<my-pagination :total="200" :page-size="20" :page-sizes="[10, 20, 50]" />

折叠按钮 ​

超过 7 页时自动出现折叠按钮 ...，hover 可见展开提示，点击可展开更多页码。

vue
<my-pagination :total="500" layout="prev, pager, next" />

自定义图标 ​

通过 prev-icon 和 next-icon 插槽替换默认箭头。

共 60 条
前往 页
vue
<my-pagination :total="60">
  <template #prev-icon>&lt;</template>
  <template #next-icon>&gt;</template>
</my-pagination>

受控模式 ​

传入 pageCount 代替 total，适用于服务端分页场景。

共 0 条
第 1 / 8 页
vue
<my-pagination :page-count="8" v-model:current-page="page" />

禁用 ​

共 100 条
前往 页
vue
<my-pagination :total="100" disabled />

完整配置 ​

所有功能组合使用。

共 500 条1-20 / 500
前往 页
vue
<my-pagination
  :total="500"
  :page-size="20"
  :page-sizes="[10, 20, 50, 100]"
  layout="total, summary, sizes, prev, pager, next, jumper"
  background
/>

组件结构 ​

完整模式下根元素 <div class="my-pagination"> 按 layout 配置的顺序包含：总条数 __total、摘要 __summary、每页条数选择器 __sizes、页码导航 <nav class="my-pagination__pages">（上一页/页码按钮 __btn/下一页）、跳转输入框 __jumper。简化模式下使用 is-simple 变体，仅显示上一页、页码文本、下一页。

CSS 类名 ​

类名说明
.my-pagination根元素
.is-simple简化模式
.is-large大尺寸
.is-small小尺寸
.is-disabled禁用状态
.is-background按钮背景色
.my-pagination__simple-text简化模式页码文本
.my-pagination__total总条数
.my-pagination__summary当前范围摘要
.my-pagination__sizes每页条数选择器
.my-pagination__pages页码导航容器
.my-pagination__btn页码按钮
.is-active当前激活页码
.my-pagination__fold折叠省略号按钮
.my-pagination__prev上一页按钮
.my-pagination__next下一页按钮
.my-pagination__jumper跳转输入框

API ​

Props ​

属性说明类型默认值
total总条数number0
pageCount总页数（与 total 二选一）number0
currentPage当前页码 (v-model)number1
pageSize每页条数 (v-model)number10
pageSizes每页条数选项number[][10, 20, 30, 50]
layout布局，逗号分隔string'total, sizes, prev, pager, next, jumper'
size尺寸'large' | 'default' | 'small''default'
simple简化模式booleanfalse
prevText上一页按钮文字string—
nextText下一页按钮文字string—
disabled禁用booleanfalse
background按钮背景色booleanfalse

Layout 可用值 ​

值说明
total总条数
summary当前范围摘要 (如 "1-10 / 100")
sizes每页条数选择器
prev上一页按钮
pager页码按钮
next下一页按钮
jumper跳转输入框

Events ​

事件说明回调参数
current-change页码改变(page: number)
size-change每页条数改变(size: number)
update:currentPagev-model 页码(page: number)
update:pageSizev-model 每页条数(size: number)

Slots ​

名称说明
prev-icon上一页图标
next-icon下一页图标