ExUI

Appearance

Pagination 分页 ​

当数据量过多时，使用分页分解数据。

基础用法 ​

基础的分页用法。

vue
<script setup>
import { ref } from 'vue'

const current = ref(1)
</script>

<template>
  <ExPagination
    v-model:current="current"
    :total="100"
  />
</template>

更多页码 ​

当页数较多时，会自动折叠显示。

vue
<template>
  <ExPagination
    v-model:current="current"
    :total="500"
    :page-size="10"
  />
</template>

改变每页显示条数 ​

可以改变每页显示的条数。

vue
<script setup>
import { ref } from 'vue'

const current = ref(1)
const pageSize = ref(10)

const handleChange = (page, pageSize) => {
  console.log('Page changed:', page, pageSize)
}
</script>

<template>
  <ExPagination
    v-model:current="current"
    v-model:page-size="pageSize"
    :total="500"
    show-size-changer
    :page-size-options="[10, 20, 30, 50, 100]"
    @change="handleChange"
  />
</template>

快速跳转 ​

可以快速跳转到指定页码。

vue
<template>
  <ExPagination
    v-model:current="current"
    :total="500"
    show-quick-jumper
  />
</template>

完整功能 ​

包含所有功能的分页组件。

vue
<template>
  <ExPagination
    v-model:current="current"
    v-model:page-size="pageSize"
    :total="500"
    show-size-changer
    show-quick-jumper
    :page-size-options="[10, 20, 30, 50, 100]"
    @change="handleChange"
  />
</template>

简洁模式 ​

简洁的分页模式，适合空间有限的场景。

vue
<template>
  <ExPagination
    v-model:current="current"
    :total="100"
    simple
  />
</template>

不同尺寸 ​

提供三种尺寸的分页组件。

vue
<template>
  <ExPagination
    :current="1"
    :total="100"
    size="small"
  />
  
  <ExPagination
    :current="1"
    :total="100"
    size="medium"
  />
  
  <ExPagination
    :current="1"
    :total="100"
    size="large"
  />
</template>

对齐方式 ​

可以设置分页组件的对齐方式。

vue
<template>
  <ExPagination
    :current="1"
    :total="100"
    align="left"
  />
  
  <ExPagination
    :current="1"
    :total="100"
    align="center"
  />
  
  <ExPagination
    :current="1"
    :total="100"
    align="right"
  />
</template>

自定义总数显示 ​

可以自定义总数的显示文本。

vue
<template>
  <ExPagination
    :current="1"
    :total="500"
    :total-text="(total, range) => `显示 ${range[0]}-${range[1]} 条，共 ${total} 条数据`"
  />
</template>

禁用状态 ​

禁用分页组件。

vue
<template>
  <ExPagination
    :current="1"
    :total="100"
    disabled
  />
</template>

隐藏单页 ​

当只有一页时，可以隐藏分页组件。

总数 5 条（单页，隐藏）：

总数 15 条（多页，显示）：

vue
<template>
  <ExPagination
    :current="1"
    :total="5"
    :page-size="10"
    hide-on-single-page
  />
</template>

赛博朋克主题示例 ​

展示赛博朋克风格的分页组件应用场景。

玩家排行榜

🥇Player001
等级 499900
🥈Player002
等级 489800
🥉Player003
等级 479700
#4Player004
等级 469600
#5Player005
等级 459500
#6Player006
等级 449400
#7Player007
等级 439300
#8Player008
等级 429200
#9Player009
等级 419100
#10Player010
等级 409000
vue
<template>
  <div>
    <h3>玩家排行榜</h3>
    <div class="player-list">
      <!-- 玩家列表 -->
    </div>
    <ExPagination
      :current="1"
      :total="1000"
      :page-size="10"
      show-size-changer
      show-quick-jumper
      size="large"
      align="center"
      :total-text="(total, range) => `显示第 ${range[0]}-${range[1]} 名玩家，共 ${total} 名`"
    />
  </div>
</template>

API ​

Pagination Props ​

属性说明类型默认值
current / v-model:current当前页码number1
page-size / v-model:page-size每页条数number10
total数据总数number—
page-size-options每页条数选项number[][10, 20, 30, 50, 100]
show-size-changer是否显示每页条数选择器booleanfalse
show-quick-jumper是否显示快速跳转booleanfalse
show-total是否显示总数booleantrue
total-text总数文本模板函数(total: number, range: [number, number]) => string—
disabled是否禁用booleanfalse
simple是否简洁模式booleanfalse
size尺寸'small' | 'medium' | 'large''medium'
align对齐方式'left' | 'center' | 'right''left'
show-pages显示的页码按钮数量（奇数）number7
hide-on-single-page是否隐藏单页booleanfalse
aria-label无障碍标签string—

Pagination Events ​

事件名说明类型
update:current页码改变时触发(current: number) => void
update:page-size每页条数改变时触发(pageSize: number) => void
change页码或每页条数改变时触发(current: number, pageSize: number) => void

Pagination Methods ​

方法名说明类型
getElement获取分页DOM元素() => HTMLDivElement | null
goToPage跳转到指定页(page: number) => void
prev上一页() => void
next下一页() => void

无障碍支持 ​

  • 使用语义化的 HTML 标签和 ARIA 属性
  • 完整的键盘导航支持
  • 支持屏幕阅读器
  • 当前页面使用 aria-current="page" 标识
  • 所有按钮都有明确的 aria-label
  • 支持减少动画偏好设置
  • 触摸设备上增大触摸目标

主题定制 ​

可以通过 CSS 变量自定义分页样式：

css
:root {
  --ex-pagination-item-bg: var(--ex-color-bg-secondary);
  --ex-pagination-item-border: var(--ex-color-border-primary);
  --ex-pagination-item-color: var(--ex-color-text-primary);
  --ex-pagination-item-active-bg: var(--ex-color-neon-blue-500);
  --ex-pagination-item-active-color: var(--ex-color-white);
  --ex-pagination-item-hover-border: var(--ex-color-neon-blue-500);
}