FxPagination 分页

当数据量过多时，使用分页分解数据。不依赖任何 UI 框架，基于 fxSelect（每页条数子部件）+ fxInput（跳页子部件）+ FxIcon（前后箭头）。

基础用法

页数较少时不显示省略号；大于 7 页时自动出现前后省略号。

<template>
  <div class="demo-pagination-block">
    <div class="demo-demonstration">页数较少时</div>
    <FxPagination layout="prev, pager, next" :total="50" />
  </div>
  <div class="demo-pagination-block">
    <div class="demo-demonstration">大于 7 页时</div>
    <FxPagination layout="prev, pager, next" :total="1000" />
  </div>
</template>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 24px;
}
.demo-demonstration {
  margin-bottom: 16px;
  color: var(--fx-text-color-secondary);
}
</style>

带背景色

background 为页码与前后按钮添加背景色，当前页为主色实底。

<template>
  <FxPagination background layout="prev, pager, next" :total="1000" />
</template>

更多元素

layout 控制元素及顺序，逗号分隔；-> 作为左右分界，其后的元素靠右排列。下方 demo 可切换尺寸 / 背景色 / 禁用，并组合 total / sizes / jumper。

<template>
  <div class="demo-pagination-toolbar">
    <FxRadioGroup v-model="size">
      <FxRadioBtn value="default">default</FxRadioBtn>
      <FxRadioBtn value="large">large</FxRadioBtn>
      <FxRadioBtn value="small">small</FxRadioBtn>
    </FxRadioGroup>
    <label class="demo-switch">background <FxSwitch v-model="background" /></label>
    <label class="demo-switch">disabled <FxSwitch v-model="disabled" /></label>
  </div>

  <hr class="demo-divider" />

  <div class="demo-pagination-block">
    <div class="demo-demonstration">总条数</div>
    <FxPagination
      v-model:current-page="currentPage1"
      :page-size="100"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, prev, pager, next"
      :total="1000"
    />
  </div>
  <div class="demo-pagination-block">
    <div class="demo-demonstration">切换每页条数</div>
    <FxPagination
      v-model:current-page="currentPage2"
      v-model:page-size="pageSize2"
      :page-sizes="[100, 200, 300, 400]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="sizes, prev, pager, next"
      :total="1000"
    />
  </div>
  <div class="demo-pagination-block">
    <div class="demo-demonstration">跳页</div>
    <FxPagination
      v-model:current-page="currentPage3"
      v-model:page-size="pageSize3"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="prev, pager, next, jumper"
      :total="1000"
    />
  </div>
  <div class="demo-pagination-block">
    <div class="demo-demonstration">全部组合</div>
    <FxPagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"

type Size = "large" | "default" | "small"

const currentPage1 = ref(5)
const currentPage2 = ref(5)
const currentPage3 = ref(5)
const currentPage4 = ref(4)
const pageSize2 = ref(100)
const pageSize3 = ref(100)
const pageSize4 = ref(100)
const size = ref<Size>("default")
const background = ref(false)
const disabled = ref(false)
</script>

<style scoped>
.demo-pagination-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.demo-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.demo-divider {
  margin: 16px 0;
  border: none;
  border-top: 1px solid var(--fx-border-color);
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 24px;
}
.demo-demonstration {
  margin-bottom: 16px;
  color: var(--fx-text-color-secondary);
}
</style>

小尺寸

size="small" 使用小尺寸。

<template>
  <FxPagination size="small" layout="prev, pager, next" :total="50" />
  <FxPagination
    size="small"
    background
    layout="prev, pager, next"
    :total="50"
    class="mt-4"
  />
</template>

页码按钮数

pager-count 控制页码按钮数量（5-21 之间的奇数），默认 7。

<template>
  <FxPagination
    :page-size="20"
    :pager-count="11"
    layout="prev, pager, next"
    :total="1000"
  />
</template>

只有一页时自动隐藏

hide-on-single-page 开启后，总页数为 1 时不渲染分页。

<template>
  <div>
    <label class="demo-switch">
      hide-on-single-page <FxSwitch v-model="value"
    /></label>
    <hr class="demo-divider" />
    <FxPagination
      :hide-on-single-page="value"
      :total="5"
      layout="prev, pager, next"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"

const value = ref(false)
</script>

<style scoped>
.demo-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.demo-divider {
  margin: 16px 0;
  border: none;
  border-top: 1px solid var(--fx-border-color);
}
</style>

API

Attributes

参数	说明	类型	默认值
v-model:current-page	当前页（受控）	number	—
default-current-page	当前页初始值（非受控）	number	—
v-model:page-size	每页条数（受控）	number	—
default-page-size	每页条数初始值（非受控）	number	—
total	总条数（与 page-count 二选一）	number	—
page-count	总页数（与 total 二选一）	number	—
pager-count	页码按钮数（5-21 之间的奇数）	number	7
layout	布局元素，逗号分隔	string	'prev, pager, next, jumper, ->, total'
page-sizes	每页条数可选项	number[]	[10, 20, 30, 40, 50, 100]
popper-class	sizes 下拉的自定义类名	string	—
popper-style	sizes 下拉的自定义样式	CSSProperties	—
prev-text	上一页按钮文字（优先于 prev-icon）	string	—
prev-icon	上一页按钮图标	string | Component	ep:arrow-left
next-text	下一页按钮文字	string	—
next-icon	下一页按钮图标	string | Component	ep:arrow-right
teleported	sizes 下拉是否 teleport 到 body	boolean	true
size	尺寸	'large' | 'default' | 'small'	'default'
background	是否为按钮带背景色	boolean	false
disabled	是否禁用	boolean	false
hide-on-single-page	只有一页时是否隐藏	boolean	false
append-size-to	sizes 下拉挂载点（选择器）	string	—

Events

事件名	说明	回调参数
update:current-page	当前页变化	(val: number)
update:page-size	每页条数变化	(val: number)
change	当前页或每页条数变化	(currentPage: number, pageSize: number)
current-change	当前页变化	(val: number)
size-change	每页条数变化	(val: number)
prev-click	点击上一页	(val: number)
next-click	点击下一页	(val: number)

Slots

名称	说明
default	layout 含 'slot' 时插入的自定义内容，可放任意元素

实现说明

• 受控 / 非受控：current-page / page-size 支持 v-model 双向绑定，或用 default-current-page / default-page-size 设初始值（非受控）。传入 current-page 必须监听 update:current-page / current-change，否则 dev 环境告警且不渲染（避免父级无法同步状态）。
• 页数推算：优先取 page-count，否则由 total / page-size 向上取整，至少 1。
• 子部件：prev / next（前后翻页 + FxIcon）、pager（页码列表 + 折叠省略号，hover/聚焦省略号切换为快进图标）、sizes（基于 fxSelect 的每页条数下拉）、jumper（基于 fxInput 的跳页输入）、total（总条数文案）。
• 样式：走 @fx/styles token（--color-* / --radius-* / --fs-*），尺寸（按钮 32 / 小 24 / 大 40，元素间距 16）为常规分页规格；不引用任何第三方 UI 库 CSS 变量。