手动封装分页组件(Vue3)

Posted 2023-03-24

参考技术A ①总页数=总条数/每页显示条数  整体向上取整

②当前页码是由父组件传递的属性值，默认值为1

 所有的判断条件是为了让中间按钮除了前两页和最后两页外，都是选中状态

①只显示5个页码、一个上一页按钮、一个下一页按钮

总页码小于等于5的情况

②总页码数大于5时，有三种情况

前五页正常显示，此时展示右边的省略号，如下：

总页码大于5的情况并且是第一页数据

最后五页的显示状态如下：

右侧临界值，让i从倒数第四页开始循环，页码小于等于总页码数，每次+1

中间批次的页码永远都是中间页码被选中，前后都有省略号

让i从当前页码的前两页开始循环，循环到当前页码的后两页

给按钮绑定changePage事件，传入参数，如果参数为false，那么就是点击了上一页，true就是下一页，item就是页码

①点击上一页按钮

如果已经是第一页，那么就不能再点击上一页按钮，也就是要禁用上一页按钮，如图所示：

点击上一页，参数为false，如果当前页码为1，直接return，如果大于1，那么就每点击一次让页码减一

②下一页按钮和上一页按钮同理

③如果是其它( 页码 )，那么就直接将参数赋值给当前页这个变量

④最终将变量通过 自定义事件 ，传递给父组件，让父组件利用这个参数调用接口，重新发起请求获取数据并渲染页面。