Paginator
Paginator 是一个分页导航组件,用于在大量数据中进行页面切换和导航。它提供了多种样式变体和自定义配置,支持不同的分页场景,如表格数据分页、内容列表分页等。
引入
typescript
import { Paginator } from '@versakit/vue'
使用
loading
API
属性
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
modelValue | 当前页码 | number | 1 |
totalPages | 总页数 | number | - |
visiblePageCount | 显示的页码按钮数量 | number | 5 |
showEndButtons | 是否显示首页和尾页按钮 | boolean | true |
showPrevNextButtons | 是否显示上一页和下一页按钮 | boolean | true |
showJumper | 是否显示页码跳转输入框 | boolean | false |
size | 分页器大小 | 'sm' | 'md' | 'lg' | 'md' |
variant | 分页器样式变体 | 'default' | 'outline' | 'text' | 'default' |
shape | 分页器形状 | 'square' | 'rounded' | 'circle' | 'rounded' |
disabled | 是否禁用 | boolean | false |
unstyled | 是否使用无样式模式 | boolean | false |
pt | 传递模板样式 | PaginatorPT | - |
事件
事件名 | 说明 | 回调参数 |
---|---|---|
update:modelValue | 页码变化时触发 | (page: number) => void |
change | 页码变化时触发 | (page: number) => void |
插槽
插槽名 | 说明 |
---|---|
first-button | 自定义首页按钮 |
prev-button | 自定义上一页按钮 |
next-button | 自定义下一页按钮 |
last-button | 自定义尾页按钮 |
样式定制
当使用 unstyled
模式时,可以通过 pt
属性传递自定义样式:
typescript
interface PaginatorPT {
root?: string
list?: string
item?: string
button?: string
activeButton?: string
prevButton?: string
nextButton?: string
firstButton?: string
lastButton?: string
ellipsis?: string
jumper?: string
jumperInput?: string
jumperButton?: string
}