vue_分页组件

封装的分页组件的结构如下：

1.基本分页功能

（1）将数组分为指定大小的多个小数组的chunk方法

export function chunk(arr=[],size=1){
   
    if(arr.length===0) return [];
    return arr.reduce((total,currentValue)=>{
   
        if(total[total.length-1].length===size){
   
            total.push([currentValue]);//当小数组的长度与指定大小size相等时，重新创建一个小数组
        }
        else{
   
            total[total.length-1].push(currentValue);//当小数组的长度小于指定大小size时，就往该小数组中添加数据
        }
        return total;
    },[[]])//[[]]是为了将分割后的小数组仍保留在一个大数组中
}

2.页码显示策略

为了方便地跳转到任意页码，却又不至于在页面中显示太多页码，页码不是始终全部显示出来的，而是在页码少时全部显示，页码多时只显示部分页码。这就存在显示策略问题。

（1）我们从当前页码出发，比如模块中当前页码是第5页：

那么以该页码为中心，两边显示一定的页码，比如两边各显示2页；

另外首页和尾页需要始终显示出来，方便回到首页和跳转到尾页；

首页到第3页中间的页码以及第7页到页尾的页码都隐藏起来，并且支持点击左/右更多按钮，快捷跳转多页（比如5页）的功能。

（2）如果只存在8页，则去掉右边的更多按钮：

（3）如果当前页码在第4页，则去掉左边的更多按钮，显示右边的更多按钮：

简述如下：

（1）首页和尾页需要始终显示出来（如果只有1页则不显示尾页）；

（2）除首尾页之外，当前页码左右最多只显示2页（共5页）；

（3）其它页码折叠起来，用更多按钮（…）代替。

3.分页器

（1）分3步实现分页器功能：

1）实现首尾翻页

2）实现快捷分页

3）实现分页按钮组

（2）增加左/右按钮更多按钮的翻页功能

有了首尾页的翻页还不够，还需要继续完善更多按钮的快捷翻页功能。

先梳理下更多按钮的显示逻辑：

1）中间按钮一共5页，加上首尾按钮2页，一共7页，也就是说只有大于7页，才有可能显示更多按钮；

2）左右更多按钮会随着当前页码的不同而显示或隐藏，以第4页和倒数第4页为界；

3）当页码大于第4页时，应该显示左边更多按钮；

4）当页码小于倒数第4页，都应该显示右边更多按钮。

//Pager组件代码：

<template>
    <ul class="pager">
        <!--        首页-->
        <li class="number"
            :class="{active: this.current===1}"
            @click="setPage(1)">1</li>

        <!--        左边更多-->
        <li class="more left"
            v-if="totalPage>centerSize+2 && current-centerSize/2-1>1"
            @click="setPage(current-jumpSize)">...</li