Appearance
AtPagination
夏源庆
最后更新于 2025-11-18 14:57:11
包含一个简单分页器和NaiveUI分页器
代码演示
基础用法
组合展示
API
TIP
AtPaginationProps 继承自 NaiveUI Pagination Props
AtPagination Props
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
| type | enum | 'default' | 分页器类型 | |
| justify | enum | 'start' | 对齐方式 | |
| page | number | 1 | 当前页 | |
| on-update:page | function | undefined | 页码变化时触发 |
simple 类型分页器的 Props
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
| item-count | number | 0 | 总条数 | |
| default-page | number | 1 | 默认页码 | |
| page-size | number | 10 | 每页条数 | |
| page-slot | number | 10 | 页码显示的个数 | |
| prev | Component | undefined | 上一页 | |
| next | Component | undefined | 下一页 | |
| prefix | Component | undefined | 分页前缀 | |
| suffix | Component | undefined | 分页后缀 |
AtPagination Slots
| 名称 | 参数 | 说明 | 版本 |
|---|---|---|---|
| goto | () | 快速跳转的文本内容 | |
| label | 同 PaginationRenderLabel 参数 | 每一项的内容 | |
| next | (info: PaginationInfo) | 下一页 | |
| prev | (info: PaginationInfo) | 上一页 | |
| prefix | (info: PaginationInfo) | 分页前缀 | |
| suffix | (info: PaginationInfo) | 分页后缀 |
类型声明
显示类型声明
Typescript
type PaginationRenderLabel = (
info:
| {
type: 'fast-backward' | 'fast-forward'
node: VNode
active: boolean
}
| {
type: 'page'
node: number
active: boolean
}
) => VNodeChild
interface PaginationInfo {
startIndex: number
endIndex: number
page: number
pageSize: number
pageCount: number
itemCount: number | undefined
}