原生Html5 使用Vue实现一个 完整的分页功能

用Vue 实现了 个很简单的分页功能。
效果图：

写的很简单,大家可以 自己diy. 注意 mid 可以 控制 按钮每次调整 后处于的位置。一般是 页码按钮数 / 2 。

<div style="margin:0 auto;text-align:center">
      <a @click="prevPage()">上一页</a>
      <div style="display: inline-block;margin-left: 10px" v-for="index of  pagelist" :key="index">
        <button :class="{active: currentPage === activatePage + index - 1}"  @click="selectPage($event,index)">{{activatePage + index -1}}</button>
      </div>
      <span >第{{currentPage}}页/共{{totalPage}}页</span>
      <a @click="nextPage($event)">下一页</a>
</div>

data(){
          return{
            productList:{total:200,data:{}}, //所有数据
            totalPage: '', // 总共页数，
            activatePage:1,   //激活页 默认为1
            currentPage: 1, //当前页数 ，默认为1
            pagelist:7, //分页按钮个数
            pageSize: 10, // 每页显示数量
            mid: 3, //点击按钮 分页按钮重新渲染时的位置 一般 是 pagelist /2 居中
          }
      }
      
methods:{
        // 设置当前页面数据，对数组操作的截取规则为[0~9],[10~20]...,
        // 当currentPage为1时，我们显示(0*pageSize+1)-1*pageSize，当currentPage为2时，我们显示(1*pageSize+1)-2*pageSize...
        getCurrentPageData() {
          let begin = (this.currentPage - 1) * this.pageSize;
          let end = this.currentPage * this.pageSize;
          this.mid = Math.floor(this.pagelist/2);
          //这里自己diy请求数据

          this.totalPage = this.productList.total / this.pageSize;

        },
        //上一页
        prevPage() {
          console.log(this.currentPage);
          if (this.currentPage === 1) {
            return false;
          } else {
            this.currentPage--;
            if (this.activatePage !== 1 ) {
              if (this.currentPage <= (this.totalPage - this.pagelist  + this.mid )){
                this.activatePage = this.currentPage - this.mid;
              }
            }

            this.getCurrentPageData();
          }
        },
        // 下一页
        nextPage() {

          if (this.currentPage === this.totalPage) {
            return false;
          } else {
            if (this.activatePage !== this.totalPage - this.pagelist  + 1 ) {
              if (this.currentPage >= ( this.pagelist  - this.mid  )){
                this.activatePage = this.currentPage - this.mid + 1 ;
              }
            }
            this.currentPage++;

            this.getCurrentPageData();
          }
        },selectPage(event,msg){
          //计算 是往前还是往后移动
          let gap =  (this.activatePage + msg -1)  - this.currentPage ;

          //把 当前页更新
          this.currentPage=  this.activatePage + msg -1 ;
          if (this.currentPage > this.totalPage){
            this.currentPage = this.totalPage;
          }
          if (this.currentPage < 1){
            this.currentPage = 1;
          }
          //如果是 往前移动 需要 判断两种情况 第一种 如果移动到的下一步 加上 显示的页码按钮数 超出了 总页码数
          //那么 我们就 把 页码按钮的起始更新为 页码数 - 页码按钮显示数 + 1
          //如果小于等于 那么把 页码按钮更新为点击的页码按钮
           if(gap >0 &&  (this.currentPage +  this.pagelist -1) > this.totalPage){
            this.activatePage = this.totalPage - this.pagelist + 1;
          }else if (gap >0 &&  (this.currentPage +  this.pagelist -1) <= this.totalPage){
             //对 最小需要调整按钮的边界进行判断
             if (this.currentPage >= ( this.pagelist  - this.mid)){
               this.activatePage = this.currentPage - this.mid;
             }

          }


          //和上面 一样 我们需要判断 点击分页按钮的 索引  如果点击按钮的数 - 分页按钮的个数  小于0了 那我们 把 分页按钮其实位置改成0
          //否则的 话 就直接 更新成 点击按钮的索引
          if(gap <0 &&  (this.currentPage -  this.pagelist  + 1) <= 1 ){
            this.activatePage = 1;

          }else if (gap < 0 &&  (this.currentPage -  this.pagelist +1) > 1 ){
            //对 最大需要调整按钮的边界进行判断
            if (this.currentPage <= (this.totalPage - this.pagelist  + this.mid)){
              this.activatePage = this.currentPage - this.mid;
            }



          }
          var el = event.currentTarget;
          this.getCurrentPageData();

        }

}