Skip to content

Paginator

Paginator 是一个分页导航组件,用于在大量数据中进行页面切换和导航。它提供了多种样式变体和自定义配置,支持不同的分页场景,如表格数据分页、内容列表分页等。

引入

typescript
import { Paginator } from '@versakit/vue'

使用

loading

API

属性

属性名说明类型默认值
modelValue当前页码number1
totalPages总页数number-
visiblePageCount显示的页码按钮数量number5
showEndButtons是否显示首页和尾页按钮booleantrue
showPrevNextButtons是否显示上一页和下一页按钮booleantrue
showJumper是否显示页码跳转输入框booleanfalse
size分页器大小'sm' | 'md' | 'lg''md'
variant分页器样式变体'default' | 'outline' | 'text''default'
shape分页器形状'square' | 'rounded' | 'circle''rounded'
disabled是否禁用booleanfalse
unstyled是否使用无样式模式booleanfalse
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
}