话不多说上代码:
这段代码是一个基于JavaScript编写的分页器组件，它可以在前端网页中实现分页功能。分页功能通常用于在大量数据的情况下将结果划分为多个页面，以便用户可以方便地浏览和导航数据。
该分页器组件包含以下几个部分：
-
模板（Template）：定义了分页器的外观和布局。它由一个
<div>容器包裹，并包含了多个<button>元素用于显示不同的页码和导航功能。通过条件渲染（v-if）和循环渲染（v-for）指令，根据当前页码和数据总数，动态生成相应的页码按钮。 -
脚本（Script）：使用Vue.js的组件方式实现，定义了分页器组件的行为和逻辑。它包含了一个名为
Pagination的Vue组件，并通过props接收传入的属性值，如当前页码（pageNo）、每页显示的数据个数（pageSize）、总数据个数（total）和连续页码的个数（continues）。利用计算属性（computed），可以根据这些属性值计算出总页数（totalPage）和连续页码的起始数字和结束数字（StartNumAndEndNum），用于动态生成页码按钮。 -
样式（Style）：使用Less预处理器编写的样式表，为分页器组件提供了一定的样式和布局。主要包含了分页按钮的外观样式定义，如背景颜色、边框样式、边距等。其中，禁用状态的按钮具有灰色字体和不可点击的样式，而当前页码的按钮则具有特殊的蓝色背景和白色字体。
总体来说，这个分页器组件通过接收传入的属性值，根据数据总量和每页显示的数据个数计算出总页数，并根据当前页码和连续页码的个数动态展示相应的页码按钮。用户可以通过点击按钮来实现上一页、下一页或直接跳转到指定页码的操作。
要使用这个分页器组件，您需要将它集成到您的前端项目中，并在合适的位置使用该组件的标签。同时，您还可以根据需要修改样式表，以满足您的设计需求。
在分页器组件计算属性computed中计算连续页码【至少5页】的起始数字start、结束数字end【当前页pageNo在连续页码中】
情况判断一：连续的页码 > 总的页数 【start=1，end=总的页数】 情况判断二：连续的页码 < 总的页数 【计算 start = pageNo - parseInt(continues / 2)、end = pageNo + parseInt(continues / 2);】 分情况一：start数字出现0 | 负数 【continues=5，pageNo=1、2的时候】 分情况二：end数字大于总页码 【continues=5，totalPage=30，pageNo=29、30的时候】 记得：最后把 start、end返回
其实是一个比较简单的小案例吧，理清楚逻辑，就很好办。 这只是一个简单的示例，可以按照自己的需求进行修改和扩展，例如添加动画效果或自定义样式。希望这能对你有所帮助！
