vue2 静态组件之分页器页码组件封装 ，分页器需要哪些数据？

分页器展示：需要哪些数据（条件）：
需要知道当前是第几个：pageNo字段代表当前页数
需要知道每一个需要展示多少条数据：pagesize字段进行代表--【获取另外一条信息：一共多少页】
需要知道分页器连续页码的个数5|7(奇数)，因为奇数对称

  总结：对于分页器而言，自定义前提需要知道四个前提条件
  pageNo:当前第几个
  pageSize:代表每一页展示多少条数据
  total:代表整个分页一共要展示多少条数据
  continues：代表分页连续页码个数

以下为分页器静态组件的代码 通过父子组件通信，用props传递数据

父组件：

  <Pagination :pageNo="5" :pageSize="3" :total="91" :continues="5"/>

子组件：

<template>
  <div class="pagination">
      <!-- 连续开始页码数大于1显示 -->
     <button v-if="startNumandendStart.start>1">上一页</button>
    <button  v-if="startNumandendStart.start>1">1</button>
     <!--连续页码开始数大于2显示... -->
    <button  v-if="startNumandendStart.start>2">···</button>

    <button 
    v-for="(num,index) in startNumandendStart.end" 
    :key="index" 
    v-if="num>=startNumandendStart.start">
    {{num}}
    </button>
    
    <!-- 连续结束页码数小于总页码数-1 显示... -->
    <button v-if="startNumandendStart.end<totalPage-1">···</button>
    <!-- 总页数 -->
    <button v-if="startNumandendStart.end<totalPage">{{totalPage}}</button>
    <button v-if="startNumandendStart.end<totalPage">下一页</button>
    
    <button style="margin-left: 30px">共 {{total}} 条</button>
  </div>
  
</template>

<script>
  export default {
    name: "Pagination",
    props:['pageNo','pageSize','total','continues'],
    computed:{
        //总共多少页
        totalPage(){
            //向上取整
            return Math.ceil(this.total/this.pageSize);
        },
        //计算连续起始页码数
        startNumandendStart(){
            let start=0;
            let end =0;
            //计算起始页码数
            
            //非正常情况下 开始页码数 12345 当前页小于平均数+1时 start=1
            if(this.pageNo<((this.continues-1)/2)+1){
                start=1
                end=this.continues
                
            }else{
                //正常情况下 开始页码数 56789 当前页直接减去平均数
                start=this.pageNo-(this.continues-1)/2;
                 //结束位置 正常情况下 连续页码数 56789 当前页直接加上平均数
                end=this.pageNo+(this.continues-1)/2
                
            }
            //非正常情况 27 28 29 30 31  当前页大于等于总页数时
            if(this.pageNo>=this.totalPage-((this.continues-1)/2)){
                end=this.totalPage
                start=this.totalPage-this.continues+1
            }
            
            return {start,end}

        }
    }
  }
</script>

<style lang="less" scoped>
  .pagination {
      text-align: center;
    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>

通过修改父组件中pageNo的参数，实现如下页码效果：