Pagination 分页

数据量过多时，采用分页的形式将数据分隔，每次只加载一个页面。

基础用法

参数	说明	类型	默认值
v-model	当前页码	`number`	-
mode	显示模式，可选值为 `simple`	`string`	`multi`
prev-text	上一页按钮文字	`string`	`上一页`
prev-icon	上一页的图标，比 prev-text 优先级更高	`string \| Component`	`-`
next-text	下一页按钮文字	`string`	`下一页`
next-icon	下一页的图标，比 next-text 优先级更高	`string \| Component`	`-`
page-count	总页数	`number \| string`	根据页数计算
total-items	总记录数	`number \| string`	`0`
items-per-page/ v-model:items-per-page	每页记录数	`number \| string`	`10`
placement	下拉框出现的位置	`string`	`bottom`
show-page-size	显示的页码个数	`number \| string`	`5`
force-ellipses	是否显示省略号	`boolean`	`false`
show-prev-button	是否展示上一页按钮	`boolean`	`true`
show-next-button	是否展示下一页按钮	`boolean`	`true`
page-sizes	每页显示个数选择器的选项设置	`array`	`[10, 20, 30, 40, 50, 100]`
popperClass	每页显示个数选择器的下拉框类名	`string`	-
layout	组件布局，子组件名用逗号分隔	`string`	`prev, pager, next`

事件名	说明	回调参数
change	页码改变时触发	-
size-change	`items-per-page` 改变时触发	-

名称	描述	参数
page	`multi`自定义页码	`{ number: number, text: string, active: boolean }`
pageDesc	`simple`下自定义页码	-
prev-text	自定义上一页按钮文字	-
next-text	自定义下一页按钮文字	-

组件导出以下类型定义：

import type { PaginationMode, PaginationProps } from 'ryxon'

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
--r-pagination-height	`40px`	-
--r-pagination-font-size	`var(--r-font-size-md)`	-
--r-pagination-item-width	`36px`	-
--r-pagination-item-default-color	`var(--r-primary-color)`	-
--r-pagination-item-disabled-color	`var(--r-gray-7)`	-
--r-pagination-item-disabled-background	`var(--r-background)`	-
--r-pagination-background	`var(--r-background-2)`	-
--r-pagination-desc-color	`var(--r-gray-7)`	-
--r-pagination-disabled-opacity	`var(--r-disabled-opacity)`	-
--r-pagination-button-color	`var(--r-text-color-primary)`	-
--r-pagination-hover-color	`var(--r-primary-color)`	-