n-pagination 分页器
数据量过多时的分页导航：上一页按钮 + 页码区 + 下一页按钮，全宽等分格铺满父容器（各格等宽，任意屏宽不溢出）。适用列表底部分页、搜索结果翻页等场景。
- 值绑定走手动双向（组件支持 v-model，也可显式监听更新事件）：
:model-value+@update:model-value。组件完全受控——点击只派发update:modelValue与change（同参同发，参数为新页码），回写由业务完成；同页重复点击不发事件- 总页数 =
ceil(total / pageSize)，下限 1 页（total不足一页或pageSize ≤ 0时单页）；传入页码越界按[1, 总页数]夹取显示与运算，无需自行兜底- 页码形态两档：
multi数字页码（首末页 + 当前页居中窗口 + 省略号，窗口宽pager-count可调，总页数不多时整列平铺）；simple简约页码（"3/20" 文字，空间最省）- 方向按钮内容三档优先级：
#prev/#next插槽 >prev-text/next-text文案 > 内置箭头图标（默认）- 到达边界或
disabled时对应按钮降透明保色相并拦截点击；省略号为纯展示不可点
平台兼容性
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | × | × | × | × |
API
属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| model-value | 当前页码（1 起）；越界按 [1, 总页数] 夹取显示与运算 | Number | 1 | - |
| total | 数据总条数；与 pageSize 共同决定总页数（ceil 取整、下限 1 页） | Number | 0 | - |
| page-size | 每页条数；≤ 0 时按单页处理 | Number | 10 | - |
| mode | 页码形态：multi 数字页码（首末页 + 当前页居中窗口 + 省略号）/ simple 简约页码（"3/20"） | String | multi | multi / simple |
| pager-count | multi 形态当前页居中窗口的页码数（首末页与省略号另计，< 1 按 1 处理）；总页数 ≤ 本值 + 4 时整列平铺不省略 | Number | 3 | - |
| prev-text | 上一页按钮文案；空串渲内置左箭头图标（#prev 插槽优先级更高） | String | "" | - |
| next-text | 下一页按钮文案；空串渲内置右箭头图标（#next 插槽优先级更高） | String | "" | - |
| disabled | 整体禁用（保色相降透明，拦截全部点击；方向按钮到达边界时单独降透明拦截） | Boolean | false | - |
| custom-class | 挂到根节点的额外 class（类需定义在组件样式表内） | String | "" | - |
| custom-style | 根节点行内样式，如 "margin-top:8px;max-width:420px" | String | "" | 与 css 相同 |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| update:model-value | 页码变化后触发（点方向按钮 / 页码格）；配合 :model-value 手动双向绑定 | 新页码（Number） |
| change | 页码变化后触发（语义化入口，与 update:model-value 同时发出） | 新页码（Number） |
插槽
| 插槽名 | 说明 |
|---|---|
| prev | 上一页按钮内容（作用域参数 disabled：该按钮当前是否不可用——到达边界或整体禁用）；提供后覆盖 prev-text 与内置箭头图标 |
| next | 下一页按钮内容（作用域参数 disabled 同上）；提供后覆盖 next-text 与内置箭头图标 |
实现说明
- 机制对照（参考实现 vs 本组件）：值通道取受控双事件（
update:modelValue+change同参同发），不设内部页码副本——副本会与外部值出现双源不同步窗口，纯 computed 单一数据流更稳；页码形态归一为mode字符串枚举（参考实现的简约 / 展开双形态同构，比布尔与魔法数字可读）；布局取全宽等分格（各格flex:1），任意屏宽零溢出、免测量，是移动分页的标准形态 - 页窗算法：总页数不多（≤
pager-count+ 4）整列平铺；多时三段式——首页 + 左省略位 + 当前页居中窗口 + 右省略位 + 末页，窗口贴边时向对侧平移补满（首页恒在第 1 格、末页恒在最后 1 格），跳页间隙恰好一页时并入窗口（不为单页渲省略号）；省略号纯展示不可点（跳页目标不可预期——窄触点上不可发现、易误触，跳页由页码格直达） - 格装配位
:key收拢签名：形态切换（multi ↔ simple）、文案 ↔ 图标 ↔ 插槽来源切换、页窗组成变化都体现为格 key 变化，key 一翻该格销毁重建（App 端已挂载节点插拔不重绘的已知问题，n-badge / n-steps 同款机制）；纯文字变化（页码数字）走原地更新 - 裁剪参考并集记录：逐项颜色 / 尺寸 props（底色、字号、圆角、格宽高等十余项）不收——主题令牌
--n-pagination-*+custom-class/custom-style通道覆盖；forceEllipses强制省略号不收（有间隙自动出现，无视觉增量）；单侧隐藏方向按钮不收（方向按钮恒在保持分页结构稳定，边界以降透明反馈）；隐藏页码区不收（simple已是极简通道，纯箭头组合用两个按钮组合更合适）；省略号点击跳页不收（见上）；change携带触发来源不收（库内 change 统一为最新值语义，来源可由调用侧判断）；程序化prev()/next()方法不收（受控组件直接改model-value即达） - 主题令牌：
--n-pagination-height（格高，默认 40px 触控档）、--n-pagination-radius（圆角）、--n-pagination-gap（格间距）、--n-pagination-font-size（页码字号）、--n-pagination-info-size（简约页码字号）、--n-pagination-bg（格底色，默认随主题表面色）、--n-pagination-active-bg（当前页底色，默认随品牌色）、--n-pagination-disabled-opacity/--n-pagination-press-opacity（禁用 / 按压透明度）