实现基于vue的分页器插件，各个功能都可以自己配置，样式可以随心所欲更改

首先展示一下效果（不会做gif 尴尬）

 

 

 思路，第一步ul li 前面一个上一页按钮后面一个下一页按钮

            

                上一页
            
            

                下一页
            
            
前往： 页
            
Go
        

 中间页码用数组展示

data() {
    return {
      pageArr: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      countPage: this.countPagea,
      jump_count: this.jumpcounta
    };
  },

 

            

                上一页
            
            
{{item}}
            
...
            

                下一页
            
           
            
前往： 页
            
Go
        

最后所有布局完成

            

                上一页
            
            
1
            
...
            
{{item}}
            
...
            

                下一页
            
            
当前页（{{countPage}}）页
            
每页（{{meicount}}）条
            
共（{{allCount}}）条
            
共：{{ allCount }}页
            
前往： 页
            
Go
        

 开始讲逻辑思维

分页器达到当前页背景色变化，点击下一页的时候当前页countPage增加，先粘贴出下一页的函数

next_page() {
      if (this.allPage <= 8) {
        this.countPage++;
        //当前页小于5的话就++，页码不需要加
      } else if (this.countPage < 5) {
        this.countPage++;
      } else {
        //当分页器翻到最后几页时，页码不在增加。
        if (this.pageArr[8] == this.allPage) {
          this.countPage++;
          //当分页器最后数字小于总页码的时候，页码增加
        } else if (this.pageArr[8] < this.allPage) {
          //获取最后一个数字
          var lastNum = this.pageArr[this.pageArr.length - 1];
          console.log(lastNum);
          this.pageArr.push(lastNum + 1);
          this.pageArr.splice(0, 1);
          console.log(this.pageArr);
          this.countPage++;
        }
      }
      this.jump_count = this.countPage
      this.$emit("nextPage", this.countPage);
    },

首先判断总页码是不是小于分页器的跨度，如果小于的话只需要当前页码countPage++就行，不需要考虑当前页在中间的情况。

说明一个情况，当我点击第十页的时候，10是在分页器中间的，当点击第14 第十四又会到分页器的中间，

 

 是这样实现的，当点击第6页的时候，此时分页器的数组pageArr发生变化，9变成10，前面的1变成2，加一减一就会保证6还会在5的位置出现，从而实现了保证当前页在中间的情况。

那当我点到最后几页，或者前几页的时候呢？这个时候就要做判断了，看看分页器最后一个页码pageArr[8]跟总页码作比较，如果pageArr[8] 等于 总页码allPage了，那说明翻到左后几页了，分页器的数组pageArr就不在发生变化，只需让当前页countPage++

同理，点击上一页也是这个逻辑

up_page() {
      if (this.allPage <= 8) {
        this.countPage--;
        //当翻到最前面几页时
      } else if (this.countPage <= 5 && this.pageArr[0] == 1) {
        this.countPage--;
      } else {
        //当前翻页器最后一页等于总页码，并且当前页大于总页码减去3，也是为了保证当前页在中间
        if (
          this.pageArr[8] == this.allPage &&
          this.countPage >= this.allPage - 3
        ) {
          this.countPage--;
          console.log(this.countPage);
          // 当前页小于总页码减去3，也是为了保证当前页在中间，页码增加
        } else if (this.countPage < this.allPage - 3) {
          var firstNum = this.pageArr[0];
          console.log(firstNum);
          this.pageArr.unshift(firstNum - 1);
          this.pageArr.splice(this.pageArr.length - 1, 1);
          console.log(this.pageArr);
          this.countPage--;
        }
      }
      this.jump_count = this.countPage
      this.$emit("nextPage", this.countPage);
    },

首先也得判断一下总页码是不是小于分页器的跨度，总之就是要考虑到翻到前几页 和翻到后几页的特殊情况的处理。

再就是当我点击分页器中的页码的时候，先粘贴出函数

bit_num(item, index) {
        //如果总页数小于分页器的跨度
      if (this.allPage <= 8) {
        this.countPage = item;
      } else {
        //   如果是点击的前几页
        if (item < 5) {
          var arra = [];
          for (var i = 0; i <= 8; i++) {
            arra.push(1 + i);
          }
          this.pageArr = arra;
        }
        // 如果是点击的后几页
        if (item >= this.allPage - 4) {
          var arrb = [];
          for (var i = 0; i <= 8; i++) {
            arrb.unshift(this.allPage - i);
          }
          this.pageArr = arrb;
        }
        if (
          item < 5 ||
          (this.pageArr[8] == this.allPage && item >= this.allPage - 4)
        ) {
          this.countPage = item;
        //   如果点击的是中间页
        } else if (item >= 5 && item < this.allPage - 3) {
          console.log(item);
          var arr = [];
          for (var i = 0; i <= 8; i++) {
            var num = item - 4;
            arr.push(num + i);
          }
          this.countPage = item;
          this.pageArr = arr;
        } else if (item > this.allPage - 5) {
          this.countPage = item;
        }
      }
      this.jump_count = item
      this.$emit("nextPage", item);
    },

有多种情况需要考虑

然后是跳页

jump() {
        // 跳页如果超出最大页码或者小于1
      this.jump_count >= this.allPage
        ? (this.jump_count = this.allPage)
        : this.jump_count;
      this.jump_count <= 1
        ? this.jump_count = 1
        : this.jump_count;
      this.bit_num(this.jump_count);
    }
  },

最后展出完整代码

用法

总结：其实分页插件并不难，一点一点捋着思路走就可以，纯手写，没有参考任何代码，一些功能稍后再完善，代码写的有些糙，在慢慢修正