{
  "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 — 当前页静态类"
  ]
}