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

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

 

 

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

<ul class="pagenation">
            <li class="page_first">
                <button :class="{disable_button:countPage == 1}" :disabled="countPage == 1" @click="up_page()">上一页</button>
            </li>
            <li class="page_last">
                <button :class="{disable_button:countPage == allPage}" :disabled='countPage == allPage' @click="next_page()">下一页</button>
            </li>
            <li class="jump_count">前往：<input @keyup.enter="jump()" class="jump_input" type="text" v-model='jump_count'> 页</li>
            <li @click="jump()">Go</li>
        </ul>

 中间页码用数组展示

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

 <ul class="pagenation">
            <li class="page_first">
                <button :class="{disable_button:countPage == 1}" :disabled="countPage == 1" @click="up_page()">上一页</button>
            </li>
            <li :class="{active:countPage == item}" @click="bit_num(item,index)" v-for='(item,index) in pageArr' :key='index'>{{item}}</li>
            <li v-if='(countPage<allPage-4) && allPage>9'>...</li>
            <li class="page_last">
                <button :class="{disable_button:countPage == allPage}" :disabled='countPage == allPage' @click="next_page()">下一页</button>
            </li>
           
            <li class="jump_count">前往：<input @keyup.enter="jump()" class="jump_input" type="text" v-model='jump_count'> 页</li>
            <li @click="jump()">Go</li>
        </ul>

最后所有布局完成

<ul class="pagenation">
            <li class="page_first">
                <button :class="{disable_button:countPage == 1}" :disabled="countPage == 1" @click="up_page()">上一页</button>
            </li>
            <li v-if='pageArr[0]>1' @click="bit_num(1,0)">1</li>
            <li v-if='pageArr[0]>1'>...</li>
            <li :class="{active:countPage == item}" @click="bit_num(item,index)" v-for='(item,index) in pageArr' :key='index'>{{item}}</li>
            <li v-if='(countPage<allPage-4) && allPage>9'>...</li>
            <li class="page_last">
                <button :class="{disable_button:countPage == allPage}" :disabled='countPage == allPage' @click="next_page()">下一页</button>
            </li>
            <li class="countPage">当前页（{{countPage}}）页</li>
            <li class="countPage">每页（{{meicount}}）条</li>
            <li class="allCount">共（{{allCount}}）条</li>
            <li class="allPage">共：{{ allCount }}页</li>
            <li class="jump_count">前往：<input @keyup.enter="jump()" class="jump_input" type="text" v-model='jump_count'> 页</li>
            <li @click="jump()">Go</li>
        </ul>

 开始讲逻辑思维

分页器达到当前页背景色变化，点击下一页的时候当前页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);
    }
  },

最后展出完整代码

<template>
    <div id="page">
        <ul class="pagenation">
            <li class="page_first">
                <button :class="{disable_button:countPage == 1}" :disabled="countPage == 1" @click="up_page()">上一页</button>
            </li>
            <li v-if='pageArr[0]>1' @click="bit_num(1,0)">1</li>
            <li v-if='pageArr[0]>1'>...</li>
            <li :class="{active:countPage == item}" @click="bit_num(item,index)" v-for='(item,index) in pageArr' :key='index'>{{item}}</li>
            <li v-if='(countPage<allPage-4) && allPage>9'>...</li>
            <li class="page_last">
                <button :class="{disable_button:countPage == allPage}" :disabled='countPage == allPage' @click="next_page()">下一页</button>
            </li>
            <li class="countPage">当前页（{{countPage}}）页</li>
            <li class="countPage">每页（{{meicount}}）条</li>
            <li class="allCount">共（{{allCount}}）条</li>
            <li class="allPage">共：{{ allPage}}页</li>
            <li class="jump_count">前往：<input @keyup.enter="jump()" class="jump_input" type="text" v-model='jump_count'> 页</li>
            <li @click="jump()">Go</li>
        </ul>
    </div>
</template>

<script>
export default {
  name: "page",
  props: {
    allCount: {
      type: Number,
      default: 0
    },
    allPage: {
      type: Number,
      default: 80
    },
    countPagea: {
      type: Number,
      default: 1
    },
    jumpcounta: {
      type: Number,
      default: 1
    },
    meicount: {
      type: Number,
      default: 15
    }
  },
  data() {
    return {
      // allCount:2000,
      // allPage:80,
      pageArr: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      countPage: this.countPagea,
      jump_count: this.jumpcounta
    };
  },
  watch: {},
  methods: {
    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);
    },
    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() {
      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);
    }
  },
  computed: {},
  created() {
    if (this.allPage <= 8) {
      var arr = [];
      for (var i = 0; i < this.allPage; i++) {
        arr.push(i + 1);
      }
      this.pageArr = arr;
    }
  },
  mounted() {}
};
</script>

<style lang="scss">
@import "../../style/mixin.scss";
.myDiv {
  background: green;
  @include wh(200px,100px);
  @include sc(20px,red);
}
.disable_button {
  cursor: not-allowed !important;
}
.pagenation {
  margin-top: 100px;
  display: flex;
  li {
    width: 20px;
    height: 25px;
    line-height: 25px;
    margin-left: 10px;
    text-align: center;
    background: #409eff;
    color: #fff;
    outline: none;
    cursor: pointer;
    button {
      width: 80px;
      height: 25px;
      line-height: 25px;
      outline: none;
      border: none;
      background: #409eff;
      color: #fff;
      cursor: pointer;
    }
  }
  .page_first,
  .page_last {
    width: 80px;
    height: 25px;
    line-height: 25px;
    margin-left: 10px;
    text-align: center;
    background: #409eff;
  }
  .countPage,
  .allPage,
  .jump_count {
    width: 110px;
    height: 25px;
    line-height: 25px;
    margin-left: 10px;
    text-align: center;
    background: #409eff;
  }
  .allCount {
    width: 120px;
    height: 25px;
    line-height: 25px;
    margin-left: 10px;
    text-align: center;
    background: #409eff;
  }
  .jump_input {
    padding: 3px;
    width: 40px;
    border: none;
    outline: none;
    height: 20px;
    line-height: 20px;
    border-radius: 2px;
    color: #409eff;
    font-size: 12px;
  }
}
.active {
  background: #fff !important;
  color: #409eff !important;
  border: 1px solid #409eff !important;
}
</style>

用法

<template>
    <div id="page">
       <Pagenation :allCount='all_count' :allPage='allPage' :countPagea="countPage" :meicount="page_count" :jumpcounta="jumpCount" @nextPage="nextPage"></Pagenation>
    </div>
</template>

<script>
import Pagenation from '../compent/pagenation'
export default {
  name: "page",
  data() {
    return {
        all_count:2000,//总条数
        allPage:80,//总页数
        countPage:1,//当前页
        page_count:15,//每页多少条
        jumpCount:1//跳转页
    };
  },
  components:{
      Pagenation
  },
  watch: {

  },
  methods: {
    nextPage(val){
        console.log(val)
    }
  },
  computed: {
   
  },
  created() {
  },
  mounted() {}
};
</script>

<style lang="scss">


</style>

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