90 lines
3.7 KiB
JSON
90 lines
3.7 KiB
JSON
{
|
||
"slug": "pagination",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 分页条：上一页/当前页/下一页三件套，并在右侧汇总总条数与每页条数。",
|
||
"usage": [
|
||
"defineProps 声明 total/page/pageSize/size 四项，defineEmits 声明四个事件（含未实现的 sizechange），当前页只以静态 is-current 类标出（Pagination.vue3.vue:13）。",
|
||
"上一页用 Math.max(1, page - 1) 兜底，下一页直接 page + 1，因此组件自身不判断是否已到末页（Pagination.vue3.vue:2）。",
|
||
"total 与 pageSize 只用于右侧统计文案「共 N 条 · 每页 M 条」，不参与翻页计算（Pagination.vue3.vue:2）。",
|
||
"除 update:modelValue 与 change 外，另声明了 pagechange 与 sizechange 两个事件，其中 sizechange 在模板中没有触发点（Pagination.vue3.vue:13）。",
|
||
"当前页按钮静态带 is-current 类，没有可点击的页码列表（Pagination.vue3.vue:2）。"
|
||
],
|
||
"bestPractices": [
|
||
"末页防护要自己做：继续点下一页会一直递增页码并回写，不会自动停在最后一页（Pagination.vue3.vue:2）。",
|
||
"sizechange 声明未实现，也没有 pageSize 选择器；示例里 page-size 是固定值（Pagination.vue3.vue:13）。",
|
||
"size prop（尺寸）传入不改变外观，只影响未消费的声明，尺寸差异需外部 CSS 覆盖 kole-pagination 类（Pagination.vue3.vue:11）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "本端一次性声明了四个事件（update:modelValue、change、pagechange、sizechange），其中 sizechange 与 size prop 均未实现。",
|
||
"table": [
|
||
{
|
||
"name": "total",
|
||
"type": "Number",
|
||
"desc": "总条数，默认 128；仅用于统计文案"
|
||
},
|
||
{
|
||
"name": "page",
|
||
"type": "Number",
|
||
"desc": "当前页码，默认 1；受控值，组件不改它"
|
||
},
|
||
{
|
||
"name": "pageSize",
|
||
"type": "Number",
|
||
"desc": "每页条数，默认 10；仅用于统计文案"
|
||
},
|
||
{
|
||
"name": "size",
|
||
"type": "String",
|
||
"desc": "尺寸，默认 default；当前模板未消费该值"
|
||
},
|
||
{
|
||
"name": "update:modelValue",
|
||
"type": "emit(payload: Number)",
|
||
"desc": "翻页时回写新页码"
|
||
},
|
||
{
|
||
"name": "change",
|
||
"type": "emit(payload: Number)",
|
||
"desc": "与 update:modelValue 同载荷的独立事件"
|
||
},
|
||
{
|
||
"name": "pagechange",
|
||
"type": "emit(payload: Number)",
|
||
"desc": "翻页事件，载荷为新页码"
|
||
},
|
||
{
|
||
"name": "sizechange",
|
||
"type": "emit(declared only)",
|
||
"desc": "声明了该事件但模板内没有触发点"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"容器有 aria-label=\"分页\"，三个按钮都是原生 button，键盘可达（Pagination.vue3.vue:2）。",
|
||
"当前页按钮没有 aria-current=\"page\"，上下页按钮没有 aria-label 区分「上一页/下一页」之外的语义，读屏只能靠文字（Pagination.vue3.vue:2）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Pagination.vue3.vue",
|
||
"kind": "Vue 3 组件",
|
||
"desc": "pagination 的 Vue 3（<script setup>）实现源码"
|
||
},
|
||
{
|
||
"file": "frameworks/Pagination.css",
|
||
"kind": "样式",
|
||
"desc": "该组件在 PC 端共用的样式表"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"pagination-ex-1",
|
||
"pagination-ex-2"
|
||
],
|
||
"notes": [
|
||
"frameworks/Pagination.vue3.vue:13 — 声明四个事件，sizechange 无触发点",
|
||
"frameworks/Pagination.vue3.vue:2 — 上一页兜底到 1，下一页无末页判断",
|
||
"frameworks/Pagination.vue3.vue:2 — 当前页静态类"
|
||
]
|
||
}
|