先看一下效果

Snipaste_2021-06-04_10-12-54.png

樣式分析

• 一個(gè)分頁(yè)器首先需要上一頁(yè)，下一頁(yè)，中間的頁(yè)碼，以及數(shù)據(jù)的總條數(shù)
• 當(dāng)前頁(yè)高亮顯示，還有不能點(diǎn)擊的按鈕，能點(diǎn)擊的按鈕

靜態(tài)樣式 Pageination.vue

<template>
  <div class="pageination">
    <button>上一頁(yè)</button>
    <button>1</button>
    <button>...</button>
    <button class="disabled">3</button>
    <button>4</button>
    <button class="active">5</button>
    <button>6</button>
    <button>7</button>
    <button>8</button>
    <button>...</button>
    <button class="disabled">12</button>
    <button>下一頁(yè)</button>
    <button class="disabled">共 20 條</button>
  </div>
</template>

<script>
export default {
  name: "Pageination"
</script>

<style lang="less" scoped>
.pageination {
  button {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    outline: none;
    border-radius: 2px;
    pad: 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;

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

    &.disabled {
      cursor: not-allowed;
      color: #ccc;
    }
  }
}
</style>

使用

• 注冊(cè)組件

Vue.component(Pageination.name, Pageination)

• 使用
  通過(guò)父組件向分頁(yè)組件傳值，這里使用props，父組件需要向分頁(yè)組件傳入響應(yīng)的數(shù)據(jù)

<Pagination
  :currentPage="xxx"
  :total="xxx"
  :pageSize="xxx"
  :showPageNo="xxx"
  @currentChange="xxxxxx"
></Pagination>
/**
 * currentPage: 當(dāng)前頁(yè)碼，就是當(dāng)前頁(yè)面是第幾頁(yè)
 * total: 總數(shù)量，比如搜索出的結(jié)果一共有多少條
 * pageSize: 每一頁(yè)顯示的數(shù)據(jù)條數(shù)
 * showPageNo: 連續(xù)頁(yè)碼數(shù)
 * currentChange：頁(yè)碼發(fā)生變化時(shí)觸發(fā)的事件
 */

showPageNo: 連續(xù)頁(yè)碼的意思是，當(dāng)我們分頁(yè)過(guò)多時(shí)，全部顯示出來(lái)就會(huì)顯得不好看，取值為奇數(shù)。假如連續(xù)頁(yè)碼取值為3，當(dāng)前頁(yè)是4，那么就顯示第3，4，5頁(yè)碼，第一頁(yè)和最后一頁(yè)保留，其他頁(yè)使用“...”折疊

Snipaste_2021-06-04_10-40-24.png

• 分頁(yè)組件的props ------> Pageination.vue

export default {
  props: {
    currentPage: {
      // 限制參數(shù)類型
      type: Number, 
      // 設(shè)置默認(rèn)值
      default: 1,
    },

    total: {
      type: Number,
      default: 0,
    },

    pageSize: {
      type: Number,
      default: 10,
    },

    showPageNo: {
      type: Number,
      default: 5,
      // prop自定義驗(yàn)證函數(shù)
      // 官網(wǎng)：https://cn.vuejs.org/v2/guide/components-props.html#Prop-%E9%AA%8C%E8%AF%81 
      validator: function (value) {
        return value % 2 === 1;
      },
    },
  }
}

計(jì)算 ----------> Pageination.vue

有些屬性，需要已知的數(shù)據(jù)進(jìn)行計(jì)算得來(lái)，在分頁(yè)組件中使用計(jì)算屬性

  data() {
    return {
      // this.currentPage就是props里面?zhèn)鬟^(guò)來(lái)的
      myCurrentPage: this.currentPage
    };
  },

computed: {
    // 總頁(yè)數(shù) = 總數(shù)據(jù)數(shù) / 每頁(yè)顯示的數(shù)據(jù)條數(shù)
    // 最后結(jié)果使用向上取整，因?yàn)閜ageSize 只是每頁(yè)最大顯示的條數(shù)，不夠整除，余下的數(shù)據(jù)也應(yīng)自成一頁(yè)
    totalPage() {
      const { total, pageSize } = this;
      return Math.ceil(total / pageSize);
    },
    
    // 設(shè)置連續(xù)頁(yè)碼的起始和結(jié)束的頁(yè)碼
    startEnd() {
      // 獲取計(jì)算依賴項(xiàng)
      const { myCurrentPage, showPageNo, totalPage } = this;
      let start, end;
      /**
       * 起始頁(yè)碼就是用當(dāng)前頁(yè)碼減去最大連續(xù)頁(yè)碼除以2并向下取整的結(jié)果。
       * 如：showPageNo=3，當(dāng)前頁(yè)是4，那么起始頁(yè)碼就應(yīng)該是3，4- Math.floor(3/ 2)=4-1=3
       * 當(dāng)然start是有邊界的，當(dāng)他小于一了就強(qiáng)制變成1
       */
      start = myCurrentPage - Math.floor(showPageNo / 2);
      if(start < 1){
        start = 1
      }

      /**
       * 結(jié)束頁(yè)碼就可以利用起始頁(yè)碼進(jìn)行計(jì)算
       */
      end = start + showPageNo - 1

      /**
       * 結(jié)束頁(yè)碼的邊界值就是當(dāng)他超過(guò)總頁(yè)數(shù)
       * 如：總頁(yè)數(shù)為10，當(dāng)前頁(yè)是9，最大連續(xù)頁(yè)碼是5，
       * 這時(shí)候算出來(lái)的start = 9 - 2 = 7，end = 7 + 5 -1 = 11 > 10, 所以需要修正
       * end修正之后，start和end的間距就不是設(shè)置的showPageNo 了，
       * start也要修改，使用end反推start，start = end - showPageNo 這樣子多剪了一個(gè)1，后面還要加上，同樣的，要對(duì)邊界值判斷
       */
      if(end > totalPage){
        // 修改end為totalPage
        end = totalPage
        // reset start
        start = end - showPageNo + 1
        if(start < 1){
          start = 1
        }
      }
      return { start, end };
    },
  },

完整的js程序

<script>
export default {
  name: "Pageination",
  props: {
    currentPage: {
      type: Number,
      default: 1,
    },

    total: {
      type: Number,
      default: 0,
    },

    pageSize: {
      type: Number,
      default: 10,
    },

    showPageNo: {
      type: Number,
      default: 5,
      validator: function (value) {
        return value % 2 === 1;
      },
    },
  },

  data() {
    return {
      myCurrentPage: this.currentPage,
    };
  },

  mounted(){
    console.log(this);
  },

  computed: {
    totalPage() {
      const { total, pageSize } = this;
      return Math.ceil(showPageNo);
    },

    startEnd() {
      const { myCurrentPage, showPageNo, totalPage } = this;
      let start, end;
      start = myCurrentPage - Math.floor(showPageNo / 2);
      if(start < 1){
        start = 1
      }

      end = start + showPageNo - 1

      if(end > totalPage){
        end = totalPage
        start = end - showPageNo + 1
        if(start < 1){
          start = 1
        }
      }
      return { start, end };
    },
  },
};
</script>

下一節(jié)