★ FEATURED ARTICLE UI组件前端【免费下载链接】varletA Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.项目地址https://gitcode.com/gh_mirrors/va/varlet点击查看免费下载分页Pagination是处理大数据量列表时最常用的交互组件之一。在 Varlet基于 Material Design 2/3 的 Vue3 组件库同时支持移动端与桌面端中var-pagination组件提供了简约模式小屏设备与普通模式宽屏设备两套展示形态并内置了页码快速跳转、每页条数切换、总数自定义显示等能力。本文以组件官方文档为主体结合 Pagination.vue 源码、props.ts 属性定义、pagination.less 样式变量以及 单元测试 中的实际断言完整讲解分页组件的配置方式与底层实现原理读完即可在真实项目中直接落地使用。介绍当你需要处理大量数据的时候可能需要用到它。var-pagination接收current当前页数、size每页条数与total总条数三个核心数据并根据simple属性决定渲染形态默认的简约模式适合小屏设备将simple设为false后进入为宽屏设计的普通模式普通模式额外支持省略号折叠页码与快速跳转。组件的注册方式与其他 Varlet 组件一致可在 index.ts 中看到其通过withInstall挂载为全局组件import { withInstall, withPropsDefaultsSetter } from ../utils/components import Pagination from ./Pagination.vue import { props as paginationProps } from ./props withInstall(Pagination) withPropsDefaultsSetter(Pagination, paginationProps) export { paginationProps } export const _PaginationComponent Pagination export default Pagination简约模式介绍简约模式是组件的默认显示模式推荐在小屏设备上使用。从 Pagination.vue 的模板可以看到简约模式下中间区域渲染为一个var-input输入框加上/ 总页数的文本用户直接输入页码并按回车或失焦即可跳转整个组件只有“上一页 / 输入框 / 下一页”三个核心部分占用空间极小。基本使用只需传入current与total即可渲染出一个完整可用的简约分页器template var-pagination :current1 :total20 / /templatetotal为 20、默认每页 10 条时总页数为 2。简约模式下当前页码展示在输入框中右侧显示/ 2。隐藏 size 控制器使用show-size-changer可以控制size控制器的显示和隐藏。size 控制器由var-menu-select下拉实现用于切换每页条数详见下文普通模式在小屏上若不需要调整每页条数可以将其关闭template var-pagination :current1 :total20 :show-size-changerfalse / /template显示总数使用showTotal属性自定义总数显示。showTotal是一个接收(total, range)两个参数并返回字符串的函数其中total为总条数range为[开始序号, 结束序号]的元组template var-pagination :current1 :total20 :show-size-changerfalse :show-totaltotal 共 ${total} 条 / /template从源码的 range 计算逻辑 可以看到range的起始值为size * (current - 1) 1结束值为Math.min(size * current, total)因此你还可以基于range展示“当前数据范围”信息例如测试用例中的1-10 of 123 items写法showTotal(total, range) { return ${range[0]}-${range[1]} of ${total} items }在 index.spec.js 的simple mode mount用例中正是通过该写法断言了快照中的1-10 of 123 items输出。禁用传入disabled后整个分页器进入禁用态输入框不可编辑、上一页/下一页与 size 切换器均不可点击样式上使用--pagination-disabled-color与--pagination-bg-disabled-color呈现置灰效果template var-pagination :current1 :total20 disabled / /template测试用例 simple mode disabled prop 验证了禁用态快照输入框带有disabled属性、size 区域被标记为var-pagination__size--open--disabled。普通模式介绍simple属性为false时可以开启我们专门为宽屏设计的分页风格。普通模式会渲染完整页码列表首页、尾页、省略号以及省略号之间固定数量的数字按钮此外它额外支持show-quick-jumper快速跳转与elevation海拔阴影。基本使用template var-pagination :simplefalse :current1 :total20 / /template在普通模式下页码按“首页1 省略号 中间数字 省略号 尾页”的布局渲染。从 页面列表生成逻辑 可以看到核心算法当总页数减去 2 仍大于maxPagerCount时生成[1, ..., ...中间按钮, ..., newCount]的折叠结构根据当前页码相对maxPagerCount与尾页的距离决定省略号显示在头部还是尾部中间按钮围绕当前页生成newCurrent i - activePosition当总页数较少时直接渲染全部页码。快照 basic mode mount 展示了total123、max-pager-count为默认 3 时的实际输出1 ... 2 3 4 ... 13并标记了item-modehead/item-modetail两个省略号节点。另外点击省略号本身也支持以maxPagerCount为步长向前/向后翻页测试用例 click ellipsis 验证了从第 10 页点击尾部省略号跳到第 14 页、再点击头部省略号回到第 10 页的行为。隐藏 size 控制器使用show-size-changer可以控制size控制器的显示和隐藏。template var-pagination :current1 :total20 :simplefalse :show-size-changerfalse / /templatesize 控制器在两种模式下都存在。它由模板中的 var-menu-select 与 var-menu-option 组合实现点击后弹出size-option数组中的选项选中后通过clickSize把新size写回组件状态并触发change事件。显示总数使用showTotal属性自定义总数显示。普通模式同样支持该函数式属性并可结合range展示当前数据范围template var-pagination :current1 :total20 :simplefalse :show-size-changerfalse :show-totaltotal 共 ${total} 条 / /template禁用template var-pagination :simplefalse :current1 :total20 disabled / /template禁用态下普通模式的页码按钮、size 切换器与快速跳转输入框全部不可交互且处于当前页的按钮会使用var-pagination__item--disabled--active类呈现专门的禁用高亮背景相关样式定义见 pagination.less。开启页码快速跳转使用show-quick-jumper属性开启页面快速跳转该功能仅在普通模式simple为false下生效template var-pagination :simplefalse :current1 :total20 :show-size-changerfalse show-quick-jumper / /template从 模板实现 可以看到快速跳转区域渲染为“前往 输入框”输入页码后按回车或失焦即触发setPage(quick, ...)同时该函数会调用ensureCurrentBoundary把输入值约束在1与pageCount之间ensureCurrentBoundary 实现跳转完成后输入框内容会被清空避免残留脏数据。API属性参数说明类型默认值v-model:current当前页数string | number1v-model:size每页条数string | number10total总条数string | number0simple是否为简单模式booleantrueelevation海拔高度可选值为truefalse和0-24的等级, 不为简单模式时生效string | number | booleantruedisabled禁用分页booleanfalseshow-size-changer是否显示size切换器booleantrueshow-quick-jumper是否可以快速跳转至某页booleanfalsemax-pager-count省略号间显示的按钮数量number3size-option指定每页可以显示多少条number[][10, 20, 50, 100]show-total用于显示数据总量和当前数据顺序function(total, range)-以上默认值可在 props.ts 中逐条核对current未显式声明默认值组件内部以toNumber(props.current) || 1兜底见 Pagination.vueelevation的取值true/false/0-24最终交给 formatElevation 处理——false返回null无阴影、true使用默认等级2模板中传入formatElevation(elevation, 2)、数值则拼接为var-elevation--n类名。同时需要注意simple模式下默认不带阴影上一页/下一页按钮使用透明背景这符合小屏设备轻量化的设计目标。补充两点实用性说明v-model:current与v-model:size均支持字符串或数字内部通过toNumber统一归一化pageCount由Math.ceil(total / size)计算得出Pagination.vue当total变化或size变化时页码列表会随之重算。事件事件名说明回调参数changecurrent或size改变后的回调current: numbersize: number从 watch 逻辑 可以看到change事件由current、size、pageCount的联动监听触发并通过onUpdate:current/onUpdate:size反写v-model。测试用例 change event 验证了点击上一页/下一页会触发该事件且边界状态下不会重复触发。插槽插槽名说明参数prev上一页按钮内容-next下一页按钮内容-默认插槽内容为var-icon的chevron-left/chevron-right图标模板定义可通过插槽自定义为文字或任意节点例如var-pagination :current1 :total20 template #prev上一页/template template #next下一页/template /var-pagination样式变量以下为组件使用的 css 变量可以使用 StyleProvider 组件 进行样式定制变量名默认值--pagination-text-color#555--pagination-font-sizevar(--font-size-md)--pagination-active-colorvar(--color-on-primary)--pagination-active-bg-colorvar(--color-primary)--pagination-hover-bg-colorrgba(85, 85, 85, 0.15)--pagination-total-margin0 10px--pagination-total-line-height24px--pagination-item-width32px--pagination-item-height32px--pagination-item-margin0 6px--pagination-item-border-radius4px--pagination-item-background#fff--pagination-item-simple-border-radius50%--pagination-input-width32px--pagination-disabled-colorvar(--color-text-disabled)--pagination-bg-disabled-colorvar(--color-disabled)--pagination-size-line-height24px--pagination-size-padding0 4px--pagination-quick-jumper-margin0 10px这些变量的完整声明位于 pagination.less且在主题系统中可被整体覆盖——例如 dark 主题的 pagination.ts 将文本色改为#fff、悬停背景改为rgba(255, 255, 255, .15)、条目背景改为#303030从而实现暗色模式下的自动适配。若要在局部覆盖可通过var-style-provider挂载对应变量例如var-style-provider :style-vars{ --pagination-active-bg-color: var(--color-success), --pagination-item-border-radius: 8px, } var-pagination :current1 :total20 / /var-style-provider在数据表格中的联动使用分页组件并非只能独立使用。在 Varlet 的var-data-table中分页能力直接复用了var-pagination从 usePagination.ts 可以看到数据表格会把自身的pagination配置simple、elevation、maxPagerCount、sizeOption等透传给分页组件并默认采用普通模式simple: false同时由showPagination根据paginationTotal 0决定是否渲染分页器pagedData则负责按当前页与每页条数对数据切片usePagination.ts。这意味着你可以先单独掌握var-pagination的配置再在表格场景中以相同属性直接复用学习成本是一致的。结语var-pagination用一套组件同时覆盖了移动端小屏简约模式与桌面宽屏普通模式两种分页诉求简约模式通过输入框直跳页码、占位极小普通模式则提供折叠页码、快速跳转、size 切换与海拔阴影等完整能力。配合change事件、prev/next插槽与 18 个 CSS 变量开发者可以轻松定制从功能到视觉的每一处细节。文中引用的 props.ts、Pagination.vue、index.spec.js 均为仓库内的真实实现与验证依据可作为进一步深入阅读的入口。赞分享UI组件前端【免费下载链接】varletA Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.项目地址https://gitcode.com/gh_mirrors/va/varlet点击查看免费下载相关推荐Vuesax 分页组件 vs-pagination 完全指南属性配置、实战用法与源码实现原理Vuesax 分页组件 vs pagination 完全指南属性配置、实战用法与源码实现原理 分页Pagination是把大段内容按页拆分、让用户轻松翻阅UI组件前端Varlet Pagination 分页组件完整指南双模式交互、API 参数与源码级边界处理Varlet Pagination 分页组件完整指南双模式交互、API 参数与源码级边界处理 本篇指南围绕 Varlet基于 Vue 3、遵循 MateriUI组件前端ToolJet Timeline 组件完全指南数据格式、属性配置与源码级原理剖析ToolJet Timeline 组件完全指南数据格式、属性配置与源码级原理剖析 Timeline时间线是 ToolJet 应用构建器中用于可视化展示事件低代码后端前端AI 应用MCP 服务上一篇HS2-HF Patch完全指南200插件一键优化你的Honey Select 2游戏体验下一篇Speechless如何一键将微博内容完整备份为PDF文件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
