分页器组件

作为前端三剑客的分页器在许多场景都能 使用，在实际工作中也有插件来快速实现分页器功能

但我们要了解原理，所以我们自己手搓个简单的分页器

先处理好静态组件

<template>
  <div class="pagination">
    <button>1</button>
    <button>上一页</button>
    <button>···</button>

    <button>3</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>7</button>
    
    <button>···</button>
    <button>9</button>
    <button>上一页</button>
    
    <button style="margin-left: 30px">共 60 条</button>
  </div>
</template>

<script>
  export default {
    name: "Pagination",
  }
</script>

<style lang="less" scoped>
  .pagination {
    button {
      margin: 0 5px;
      background-color: #f4f4f5;
      color: #606266;
      outline: none;
      border-radius: 2px;
      padding: 0 4px;
      vertical-align: top;
      display: inline-block;
      font-size: 13px;
      min-width: 35.5px;
      height: 28px;
      line-height: 28px;
      cursor: pointer;
      box-sizing: border-box;
      text-align: center;
      border: 0;

      &[disabled] {
        color: #c0c4cc;
        cursor: not-allowed;
      }

      &.active {
        cursor: not-allowed;
        background-color: #409eff;
        color: #fff;
      }
    }
  }
</style>

 

然后从父组件传过对四个必要的参数

<template>
  <div>
  <!-- <Header> </Header>
  <router-view></router-view>
  <Footer v-show="$route.meta.show" > </Footer> -->
  <Pagenation
  :total="total"
  :Pagesize="Pagesize"
  :PageNo="PageNo"
  :Pagecount="Pagecount"
  @getpage='getpage'
  
  > </Pagenation>
  </div>
</template>

<script>
export default {
  
  data() {
    return {
//:total="总数据数" :pageSize="一条页显示几个" :pageNo="当前页" :pagecount="连续页数目"
      total:100,//总数据数
      Pagesize:3 ,//一页显示多少个
      Pagecount:5,//连续页数目
      PageNo:7//当前页

    }
  },
 

}
</script>

然后回到分页组件开始手搓

<template>
  <div class="pagination">
    <h1>{{StartAndEnd}}</h1>
   <!-- 绑定点击事件，但按钮不能一直增加 所以动态设置禁用条件 当点击到 1 时禁用 -->
    <button  @click="$emit('getpage',pageNo-1)" :disabled="pageNo==1" >上一页</button>
    <!-- 判断显示的条件 当  开始的值大于1时显示，等于1 时自动遍历的 -->
     <button v-if="(StartAndEnd.start>1)" @click="$emit('getpage',1)">1</button>
     <!-- 判断显示条件  1与相邻的数有间隔时显示无间隔时不显示 -->
    <button v-if="(StartAndEnd.start>2)">···</button>
<!-- 遍历字符数字  当大于等于开始值的时候开始显示 -->
<!-- 使用 自定义事件 来进行父子间通信 -->
<!-- 动态绑定类名 -->
    <button v-for="page in StartAndEnd.end" :key="page" v-if="page>=StartAndEnd.start"   @click="$emit('getpage',page)" :class="{active:pageNo==page}">{{page}}</button>
    
<!-- 判断省略号显示和隐藏的时机 -->
    <button  v-if="StartAndEnd.end<totalPage-1" >···</button>
    <button v-if="StartAndEnd.end<totalPage" @click="$emit('getpage',totalPage)">{{ totalPage }}</button>
    <button @click="$emit('getpage',pageNo+1)" :disabled="pageNo==totalPage" >上一页</button>
<!-- 算出的有多少页数据 -->
    <button style="margin-left: 30px">共 {{ totalPage }}条</button>
  </div>
</template>

<script>
export default {
  name: "Pagesnation",
  //:total="100" :pageSize="5" :pageNo="5" :pagecount="8"
  //:total="总数据数" :pageSize="一条页显示几个" :pageNo="当前页" :pagecount="连续页数目"
  props: ["total", "pageSize", "pageNo", "pagecount"],
  computed: {
    //根据总数据和 和数据规模 算出 总页数
    totalPage() {
      //向上取整
      return Math.ceil(this.total / this.pageSize);
    },
    //判断开头和末尾
    StartAndEnd() {
      let { totalPage, pagecount, total, pageNo } = this;
      let start = 0;
      let end = 0;
      //情况一：计算出来的页数 小于规定的页数
      if (totalPage < pagecount) {
        start = 1;
        end = totalPage;
      }
      //情况二计算出的页数大于规定页数
      else {
        //规定页数为五页时前后加减二
        //规定页数为七页时前后加减三

        start = pageNo - parseInt(pagecount/2);
        end = pageNo + parseInt(pagecount/2);
        // //约束，当 pageNo - parseInt(pagecount / 2)<1时  不能小于1
         if(pageNo - parseInt(pagecount/2)<1){
            start=1;
           end=pagecount;
        }
        // //约束 pageNo + parseInt(pagecount / 2)<totalPage 不能超过最大页数
        if( pageNo+parseInt(pagecount/2) >totalPage ){
             end=totalPage;
            start=totalPage-pagecount+1

         }

      }

//返回开始和结尾的值
      return {start,end}
    },
    
  },
};
</script>

 最终实现动态切换