Pagination 分页
数据分页导航，支持页码切换。
基本用法
通过 total 设置总条数，自动计算页数。
vue
<APagination :total="50" />更多页码
总页数较多时自动展示省略号。
vue
<APagination :total="200" />当前页
通过 v-model 双向绑定当前页码。
当前页: 1
vue
<script setup>
import { ref } from 'vue'
const current = ref(1)
</script>
<APagination v-model="current" :total="100" />自定义每页条数
通过 pageSize 设置每页条数。
vue
<APagination :total="200" :page-size="20" />API
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
total | number | — | 总条数 |
pageSize | number | 10 | 每页条数 |
modelValue | number | 1 | 当前页码 |
Events
| 名称 | 说明 |
|---|---|
update:modelValue | 页码变化 |
change | 页码变化（同 update:modelValue） |
交互特性
- 按钮悬停背景色过渡
- 选中页码高亮强调色
- 首页/末页禁用状态
- 多页自动折叠为省略号