Pagination 分页

在分页数据之间导航。

命令行安装

npx @loongship-kit/ui add pagination

组件结构

角色	组件	职责	使用条件
根组件	Pagination	计算页码并管理当前页	数据分页必需
内容容器	PaginationContent	暴露并排列页码项目	数据分页必需
页码与链接	PaginationItem、PaginationLink	渲染页码按钮或链接	按分页模式选用
导航组件	PaginationPrevious、PaginationNext	切换到上一页或下一页	按需
辅助组件	PaginationEllipsis	表示被省略的页码范围	按需

数据分页

• …More pages

查看代码

<template>
  <Pagination v-model:page="page" :items-per-page="10" :total="80" show-edges>
    <PaginationContent v-slot="{ items }">
      <PaginationPrevious />
      <template v-for="(item, index) in items" :key="index">
        <PaginationItem
          v-if="item.type === 'page'"
          :value="item.value"
          :is-active="item.value === page"
        />
        <PaginationEllipsis v-else />
      </template>
      <PaginationNext />
    </PaginationContent>
  </Pagination>
</template>

自定义按钮文本

查看代码

<template>
  <Pagination :items-per-page="10" :total="30" :default-page="1">
    <PaginationContent v-slot="{ items }">
      <PaginationPrevious>上一页</PaginationPrevious>
      <template v-for="(item, index) in items" :key="index">
        <PaginationItem v-if="item.type === 'page'" :value="item.value" />
        <PaginationEllipsis v-else />
      </template>
      <PaginationNext>下一页</PaginationNext>
    </PaginationContent>
  </Pagination>
</template>

链接分页

• 1
• 2
• 3

查看代码

<template>
  <Pagination :items-per-page="10" :total="30" :default-page="2">
    <PaginationContent>
      <PaginationItem><PaginationLink href="?page=1">1</PaginationLink></PaginationItem>
      <PaginationItem><PaginationLink href="?page=2" is-active>2</PaginationLink></PaginationItem>
      <PaginationItem><PaginationLink href="?page=3">3</PaginationLink></PaginationItem>
    </PaginationContent>
  </Pagination>
</template>

API

Pagination（主组件）

属性

属性	类型	默认值	说明
v-model:page	number	-	当前页码
defaultPage	number	1	非受控模式的初始页码
itemsPerPage	number	10	每页条数
total	number	0	数据总条数
siblingCount	number	2	当前页两侧显示的页码数量
showEdges	boolean	false	是否始终显示首尾页
disabled	boolean	false	是否禁用
as	string | Component	'nav'	渲染元素
asChild	boolean	false	合并到唯一子元素
class	ClassValue	-	自定义类名

事件

事件	参数	说明
update:page	page: number	页码改变时触发

插槽

插槽	参数	说明
default	{ page: number, pageCount: number }	分页内容

子组件

PaginationContent — 页码项目容器

属性

属性	类型	默认值	说明
as	string | Component	'ul'	渲染元素
asChild	boolean	false	合并到唯一子元素
class	ClassValue	-	自定义类名

插槽

插槽	参数	说明
default	{ items: Array<{ type: 'page'; value: number } | { type: 'ellipsis' }> }	渲染页码项目列表

PaginationItem — 数据分页页码项

属性

属性	类型	默认值	说明
value	number	-	数据分页中的页码；省略时作为链接分页容器
isActive	boolean	false	是否使用当前页样式
class	ClassValue	-	外层 li 的类名

插槽

插槽	参数	说明
default	—	覆盖页码文本；未设置 value 时放置 PaginationLink

PaginationLink — 链接分页内容

属性

属性	类型	默认值	说明
href	string	-	链接地址
isActive	boolean	false	是否设置当前页样式和 aria-current="page"
class	ClassValue	-	自定义类名

插槽

插槽	参数	说明
default	—	链接内容

PaginationPrevious / PaginationNext — 上一页与下一页

属性

属性	类型	默认值	说明
as	string | Component	'button'	渲染元素
asChild	boolean	false	合并到唯一子元素
class	ClassValue	-	自定义类名

插槽

组件	插槽	参数	说明
PaginationPrevious	default	—	上一页文本，默认 Previous
PaginationNext	default	—	下一页文本，默认 Next

PaginationEllipsis — 省略页码提示

属性

属性	类型	默认值	说明
as	string | Component	'div'	渲染元素
asChild	boolean	false	合并到唯一子元素
class	ClassValue	-	自定义类名

省略号

组件固定显示省略号和供屏幕阅读器使用的 More pages 文本。