[组件库开发之分页器| 青训营笔记]

这是我参与「第五届青训营 」伴学笔记创作活动的第14天，今天继续完成大项目的组件库开发 我负责的是一个分页器组件，首先对分页器进行分析： 分页器的html结构如下：

  <div class="m-pagination">
    <button :disabled = "pageNo == 1" @click = "$emit('getPageInfo',pageNo-1)">上一页</button>
    <button v-show="startNumAndEndNum.start > 1" @click = "$emit('getPageInfo',1)" :class = "{active:pageNo == 1}">1</button>
    <span v-show="startNumAndEndNum.start > 2">···</span>

    <!-- 渲染startNumAndEndNum.end，将所有页面遍历出来，然后通过v-if进行条件判断是否显示 -->
    <!-- v-for与v-if一起使用会在每次重新渲染时仍然消耗大量资源去循环不显示的数据，因此用计算属性来避免可以提高性能 -->
    <button v-for="(item, index) in isShowPage" :key="index" @click = "$emit('getPageInfo',item)" :class = "{active:pageNo == item}">{{ item }}</button>

    <span v-show="startNumAndEndNum.end < totalPage - 1" >···</span>
    <button v-show="startNumAndEndNum.end < totalPage"  @click = "$emit('getPageInfo',totalPage)" :class = "{active:pageNo == totalPage}">{{totalPage}}</button>
    <button :disabled = "pageNo == totalPage" @click = "$emit('getPageInfo',pageNo+1)">下一页</button>

    <button style="margin-left: 30px" @click = "$emit('getPageInfo',totalPage)">共 {{ total }} 条</button>
  </div>

这里我们采用了一系列的button按钮来模拟每一个页面以及用span标签来表示...省略号，用v-show来判断是否显示省略号。

逻辑部分如下：

export default {
  name: "b-pagination",
  // props: ["page-No", "pageSize", "total", "continues"],
  props:{
    pageNo:{
      type:Number,
      required:true
    },
    pageSize:{
      type:Number,
      default:10
    },
    total:{
      type:Number,
      required:true
    },
    continues:{
      type:Number,
      default:5
    },
    
  },
  computed: {
    totalPage() {
      return Math.ceil(this.total / this.pageSize);
    },
    startNumAndEndNum() {
      let start = 0,
        end = 0;
      if (this.totalPage <= this.comtinues) {
        start = 1;
        end = this.totalPage;
      } else {
        start = this.pageNo - Math.floor(this.continues / 2);
        end = this.pageNo + Math.floor(this.continues / 2);
      }
      //纠正不正常的start（start=0或者为负数）与end（超过totalPage）
      if (start < 1) {
        start = 1;
        end = this.continues;
      }
      if (end > this.totalPage) {
        start = this.totalPage - this.continues + 1;
        end = this.totalPage;
      }
      return { start, end };
    },
    isShowPage() {
      let showArr = [];
      for (
        let i = this.startNumAndEndNum.start;
        i <= this.startNumAndEndNum.end;
        i++
      ) {
        showArr.push(i);
      }
      return showArr;
    },
  },
};

首先利用传进来的total总数和pageSize每一页显示个数来计算出一共有多少页，动态展示在我们的分页器中 其次就是计算出什么时候显示省略号以及什么时候显示尾页与头页 最后我们只需要在全局注册pagination组件，然后在app.vue中进行使用，一个简单的分页器就封装完成了。