Pagination-DEMO
vue
<fv-Pagination>
</fv-Pagination>Pagination With Background
vue
<fv-Pagination background="whitesmoke">
</fv-Pagination>Pagination With Boxshadow
vue
<fv-Pagination :total="100" background="whitesmoke" :shadow="true">
</fv-Pagination>Pagination Small Size
vue
<fv-Pagination :small="true">
</fv-Pagination>Pagination Disabled
vue
<fv-Pagination disabled>
</fv-Pagination>Pagination Dark Theme
vue
<fv-Pagination theme="dark" background="black">
</fv-Pagination>属性
| 属性 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
| modelValue | number | 否 | 1 | 当前页码数。 |
| foreground | string | 否 | 'rgba(0, 90, 158, 1)' | |
| background | string | 否 | 'transparent' | |
| borderRadius | number | 否 | 3 | 页码按钮圆角半径。 |
| revealBackgroundColor | string | 否 | '' | 页码按钮Reveal背景颜色。 |
| revealBorderColor | string | 否 | '' | 页码按钮Reveal边框颜色。 |
| total | number | 否 | 10 | 总页码数。 |
| maxVisual | number | 否 | 7 | 最大可视按钮。 |
| small | boolean | 否 | false | 小型分页按钮。 |
| shadow | boolean | 否 | false | |
| disabled | boolean | 否 | false | |
| theme | string | 否 | 'global' | 主题样式。支持 global、light、dark、system 和 custom。 |
| emits | array | 否 | ['update:modelValue', 'next-click', 'prev-click', 'page-click'] | 参见组件的 emits 选项。 |
| lang | string | 否 | "global" | 参见组件的 lang 选项。 |
事件
| 事件名 | 参数 | 说明 |
|---|---|---|
| next-click | number | 下一页按钮点击。 |
| prev-click | number | 上一页按钮点击。 |
| page-click | number | 翻页按钮点击。 |