element-ui Pagination組件源碼分析整理筆記（七）

element-ui源碼的版本是2.4.9

pagination.js

import Pager from './pager.vue';
import ElSelect from 'element-ui/packages/select';
import ElOption from 'element-ui/packages/option';
import ElInput from 'element-ui/packages/input';
import Locale from 'element-ui/src/mixins/locale';
import { valueEquals } from 'element-ui/src/utils/util';

export default {
  name: 'ElPagination',

  props: {
    pageSize: {  //每頁顯示條目個數，支持.sync 修飾符
      type: Number,
      default: 10
    },
    small: Boolean, //是否使用小型分頁樣式
    total: Number, //總條目數
    pageCount: Number, //總頁數，total 和 page-count 設置任意一個就能夠達到顯示頁碼的功能；若是要支持 page-sizes 的更改，則須要使用 total 屬性
    pagerCount: {  //頁碼按鈕的數量，當總頁數超過該值時會摺疊
      type: Number,
      validator(value) {
        return (value | 0) === value && value > 4 && value < 22 && (value % 2) === 1;
      },
      default: 7
    },
    currentPage: { //當前頁數，支持 .sync 修飾符
      type: Number,
      default: 1
    },
    layout: { //組件佈局，子組件名用逗號分隔
      default: 'prev, pager, next, jumper, ->, total'
    },
    pageSizes: { //每頁顯示個數選擇器的選項設置
      type: Array,
      default() {
        return [10, 20, 30, 40, 50, 100];
      }
    },
    popperClass: String, //每頁顯示個數選擇器的下拉框類名
    prevText: String, //替代圖標顯示的上一頁文字
    nextText: String, //替代圖標顯示的下一頁文字
    background: Boolean, //是否爲分頁按鈕添加背景色
    disabled: Boolean //是否禁用
  },

  data() {
    return {
      internalCurrentPage: 1,  //當前的頁碼
      internalPageSize: 0,  //總頁數
      lastEmittedPage: -1,
      userChangePageSize: false
    };
  },
  //render函數生成el-pagination
  render(h) {
    //最外層的div標籤
    let template = <div class={['el-pagination', {
      'is-background': this.background,
      'el-pagination--small': this.small
    }] }></div>;
    const layout = this.layout || '';
    if (!layout) return;
    const TEMPLATE_MAP = {
      prev: <prev></prev>,
      jumper: <jumper></jumper>,
      pager: <pager currentPage={ this.internalCurrentPage } pageCount={ this.internalPageCount } pagerCount={ this.pagerCount } on-change={ this.handleCurrentChange } disabled={ this.disabled }></pager>,
      next: <next></next>,
      sizes: <sizes pageSizes={ this.pageSizes }></sizes>,
      slot: <my-slot></my-slot>,
      total: <total></total>
    };
    const components = layout.split(',').map((item) => item.trim());
    const rightWrapper = <div class="el-pagination__rightwrapper"></div>;
    let haveRightWrapper = false;

    template.children = template.children || [];
    rightWrapper.children = rightWrapper.children || [];
    components.forEach(compo => {
      // ->這個符號主要是將其後面的組件放在rightWrapper中，而後右浮動；若是存在->符號，就將haveRightWrapper爲true
      if (compo === '->') {
        haveRightWrapper = true;
        return;
      }
      // 當haveRightWrapper爲true,即在->後面的放入rightWrapper中
      if (!haveRightWrapper) {
        template.children.push(TEMPLATE_MAP[compo]);
      } else {
        rightWrapper.children.push(TEMPLATE_MAP[compo]);
      }
    });

    if (haveRightWrapper) {
      //將rightWrapper加在template.children數組的開頭，這樣rightWrapper浮動以後就是在最右邊
      template.children.unshift(rightWrapper);
    }
    return template;
  },

  components: {
    MySlot: {
      render(h) {
        return (
          this.$parent.$slots.default
            ? this.$parent.$slots.default[0]
            : ''
        );
      }
    },
    // 上一頁組件
    Prev: {
      //上一頁; prevText用戶設置的替代上一頁圖標的文字，存在顯示文字，不存在顯示上一頁圖標
      render(h) {
        return (
          <button
            type="button"
            class="btn-prev"
            disabled={ this.$parent.disabled || this.$parent.internalCurrentPage <= 1 }
            on-click={ this.$parent.prev }>
            {
              this.$parent.prevText
                ? <span>{ this.$parent.prevText }</span>
                : <i class="el-icon el-icon-arrow-left"></i>
            }
          </button>
        );
      }
    },
   //下一頁組件
    Next: {
      // this.$parent.internalCurrentPage === this.$parent.internalPageCount 當前頁數等於總頁數時 或者 總頁數等於0時，下一頁按鈕被禁用
      render(h) {
        return (
          <button
            type="button"
            class="btn-next"
            disabled={ this.$parent.disabled || this.$parent.internalCurrentPage === this.$parent.internalPageCount || this.$parent.internalPageCount === 0 }
            on-click={ this.$parent.next }>
            {
              this.$parent.nextText
                ? <span>{ this.$parent.nextText }</span>
                : <i class="el-icon el-icon-arrow-right"></i>
            }
          </button>
        );
      }
    },
    // 每頁顯示條目個數組件
    Sizes: {
      mixins: [Locale],
      props: {
        pageSizes: Array //每頁顯示個數選擇器的選項設置   [10, 20, 30, 40, 50, 100]
      },
      watch: {
        pageSizes: {
          // 確認是否以當前的初始值執行handler的函數
          immediate: true,
          handler(newVal, oldVal) {
            if (valueEquals(newVal, oldVal)) return;
            if (Array.isArray(newVal)) {
              // 若是用戶設置了每頁顯示的條目個數，而且pageSize在設置的pageSizes中存在的話，就顯示pageSize，不然就顯示this.pageSizes[0]
              // 最後將每頁顯示的條目個數賦值給this.$parent.internalPageSize
              this.$parent.internalPageSize = newVal.indexOf(this.$parent.pageSize) > -1
                ? this.$parent.pageSize
                : this.pageSizes[0];
            }
          }
        }
      },
      render(h) {
        // this.t('el.pagination.pagesize') 返回'條/頁'
        return (
          <span class="el-pagination__sizes">
            <el-select
              value={ this.$parent.internalPageSize }
              popperClass={ this.$parent.popperClass || '' }
              size="mini"
              on-input={ this.handleChange }
              disabled={ this.$parent.disabled }>
              {
                this.pageSizes.map(item =>
                  <el-option
                    value={ item }
                    label={ item + this.t('el.pagination.pagesize') }>
                  </el-option>
                )
              }
            </el-select>
          </span>
        );
      },
      components: {
        ElSelect,
        ElOption
      },
      methods: {
        handleChange(val) {
          if (val !== this.$parent.internalPageSize) {
            this.$parent.internalPageSize = val = parseInt(val, 10);
            this.$parent.userChangePageSize = true;
            //若是父組件中pageSize用了.sync 修飾符，這裏將會觸發父組件的update，改變pageSize的值
            this.$parent.$emit('update:pageSize', val);
            //觸發父組件的size-change事件，將改變的每頁顯示的條目個數的值傳遞出去
            this.$parent.$emit('size-change', val);
          }
        }
      }
    },
    //前往多少頁組件
    Jumper: {
      mixins: [Locale],
      data() {
        return {
          oldValue: null
        };
      },
      components: { ElInput },
      watch: {
        '$parent.internalPageSize'() {
          this.$nextTick(() => {
            this.$refs.input.$el.querySelector('input').value = this.$parent.internalCurrentPage;
          });
        }
      },
      methods: {
        handleFocus(event) {
          this.oldValue = event.target.value;
        },
        handleBlur({ target }) {
          this.resetValueIfNeed(target.value);
          this.reassignMaxValue(target.value);
        },
        // 按下回車，前往多少頁
        handleKeyup({ keyCode, target }) {
          if (keyCode === 13 && this.oldValue && target.value !== this.oldValue) {
            this.handleChange(target.value);
          }
        },
        // 改變當前頁
        handleChange(value) {
          // 更新頁碼列表中當前頁的值
          this.$parent.internalCurrentPage = this.$parent.getValidCurrentPage(value);
          this.$parent.emitChange();
          this.oldValue = null;
          this.resetValueIfNeed(value);
        },
        resetValueIfNeed(value) {
          const num = parseInt(value, 10);
          if (!isNaN(num)) {
            if (num < 1) {
              // 調用input中的setCurrentValue方法，將input中的值設置爲1
              this.$refs.input.setCurrentValue(1);
            } else {
              //  若是input中輸入的值，大於最大頁碼，則置爲最大頁碼值
              this.reassignMaxValue(value);
            }
          }
        },
        reassignMaxValue(value) {
          const { internalPageCount } = this.$parent;
          if (+value > internalPageCount) {
              // 調用input中的setCurrentValue方法，將input中的值設置爲internalPageCount或者爲1
            this.$refs.input.setCurrentValue(internalPageCount || 1);
          }
        }
      },
      // 前往多少頁
      render(h) {
        return (
          <span class="el-pagination__jump">
            { this.t('el.pagination.goto') }
            <el-input
              class="el-pagination__editor is-in-pagination"
              min={ 1 }
              max={ this.$parent.internalPageCount }
              value={ this.$parent.internalCurrentPage }
              domPropsValue={ this.$parent.internalCurrentPage }
              type="number"
              ref="input"
              disabled={ this.$parent.disabled }
              nativeOnKeyup={ this.handleKeyup }
              onChange={ this.handleChange }
              onFocus={ this.handleFocus }
              onBlur={ this.handleBlur }/>
            { this.t('el.pagination.pageClassifier') }
          </span>
        );
      }
    },
    //總共的頁數，組件
    Total: {
      mixins: [Locale],
      render(h) {
        return (
          typeof this.$parent.total === 'number'
            ? <span class="el-pagination__total">{ this.t('el.pagination.total', { total: this.$parent.total }) }</span>
            : ''
        );
      }
    },

    Pager
  },

  methods: {
    handleCurrentChange(val) {
      this.internalCurrentPage = this.getValidCurrentPage(val);
      this.userChangePageSize = true;
      //觸發父組件current-change事件，並傳遞相應的值
      this.emitChange();
    },

    prev() {
      if (this.disabled) return;
      const newVal = this.internalCurrentPage - 1;
      this.internalCurrentPage = this.getValidCurrentPage(newVal);
      //觸發父組件的prev-click事件，並將CurrentPage傳遞出去
      this.$emit('prev-click', this.internalCurrentPage);
      //觸發父組件current-change事件，並傳遞相應的值
      this.emitChange();
    },

    next() {
      if (this.disabled) return;
      const newVal = this.internalCurrentPage + 1;
      this.internalCurrentPage = this.getValidCurrentPage(newVal);
      //觸發父組件的next-click事件，並將CurrentPage傳遞出去
      this.$emit('next-click', this.internalCurrentPage);
      this.emitChange();
    },
    //校驗須要前往的頁碼的值
    getValidCurrentPage(value) {
      value = parseInt(value, 10);
      const havePageCount = typeof this.internalPageCount === 'number';
      let resetValue;
      if (!havePageCount) {
        if (isNaN(value) || value < 1) resetValue = 1;
      } else {
        // 若是當前頁碼小於1，則取1；若是當前頁碼大於最大頁碼，則取最大頁碼
        if (value < 1) {
          resetValue = 1;
        } else if (value > this.internalPageCount) {
          resetValue = this.internalPageCount;
        }
      }
      //若是當前頁碼是非數字，或者爲0，則將當前頁碼置爲1，並返回
      if (resetValue === undefined && isNaN(value)) {
        resetValue = 1;
      } else if (resetValue === 0) {
        resetValue = 1;
      }
      return resetValue === undefined ? value : resetValue;
    },

    emitChange() {
      this.$nextTick(() => {
        //用戶改變當前PageSize時，觸發父組件的current-change事件
        if (this.internalCurrentPage !== this.lastEmittedPage || this.userChangePageSize) {
          this.$emit('current-change', this.internalCurrentPage);
          //lastEmittedPage記錄最後傳遞的CurrentPage的值
          this.lastEmittedPage = this.internalCurrentPage;
          this.userChangePageSize = false;
        }
      });
    }
  },

  computed: {
    internalPageCount() {
      if (typeof this.total === 'number') {
        //總頁數 = 總條目數 / 每頁的顯示條數
        return Math.ceil(this.total / this.internalPageSize);
      } else if (typeof this.pageCount === 'number') {
        //總頁數
        return this.pageCount;
      }
      return null;
    }
  },

  watch: {
    currentPage: {
      immediate: true,
      handler(val) {
        this.internalCurrentPage = val;
      }
    },

    pageSize: {
      immediate: true,
      handler(val) {
        this.internalPageSize = isNaN(val) ? 10 : val;
      }
    },
    // internalCurrentPage改變時去觸發父組件中currentPage更新
    // 在v2.4.11這裏已經改掉了
    internalCurrentPage: {
      immediate: true,
      handler(newVal, oldVal) {
        newVal = parseInt(newVal, 10);

        /* istanbul ignore if */
        if (isNaN(newVal)) {
          newVal = oldVal || 1;
        } else {
          newVal = this.getValidCurrentPage(newVal);
        }
        if (newVal !== undefined) {
          this.internalCurrentPage = newVal;
          if (oldVal !== newVal) {
            this.$emit('update:currentPage', newVal);
          }
        } else {
          this.$emit('update:currentPage', newVal);
        }
        this.lastEmittedPage = -1;
      }
    },

    internalPageCount(newVal) {
      /* istanbul ignore if */
      const oldPage = this.internalCurrentPage;
      if (newVal > 0 && oldPage === 0) {
        this.internalCurrentPage = 1;
      } else if (oldPage > newVal) {
        this.internalCurrentPage = newVal === 0 ? 1 : newVal;
        this.userChangePageSize && this.emitChange();
      }
      this.userChangePageSize = false;
    }
  }
};

pager.vue

<template>
  <!--頁碼列表-->
  <ul @click="onPagerClick" class="el-pager">
      <!--第一頁-->
    <li
      :class="{ active: currentPage === 1, disabled }"
      v-if="pageCount > 0"
      class="number">1</li>
      <!--more圖標-->
    <li
      class="el-icon more btn-quickprev"
      :class="[quickprevIconClass, { disabled }]"
      v-if="showPrevMore"
      @mouseenter="onMouseenter('left')"
      @mouseleave="quickprevIconClass = 'el-icon-more'">
    </li>
      <!--頁碼-->
    <li
      v-for="pager in pagers"
      :key="pager"
      :class="{ active: currentPage === pager, disabled }"
      class="number">{{ pager }}</li>
      <!--more圖標-->
    <li
      class="el-icon more btn-quicknext"
      :class="[quicknextIconClass, { disabled }]"
      v-if="showNextMore"
      @mouseenter="onMouseenter('right')"
      @mouseleave="quicknextIconClass = 'el-icon-more'">
    </li>
      <!--總頁碼-->
    <li
      :class="{ active: currentPage === pageCount, disabled }"
      class="number"
      v-if="pageCount > 1">{{ pageCount }}</li>
  </ul>
</template>

<script type="text/babel">
  export default {
    name: 'ElPager',

    props: {
      currentPage: Number, //當前頁碼
      pageCount: Number, //總頁數
      pagerCount: Number, //頁碼按鈕的數量，當總頁數超過該值時會摺疊
      disabled: Boolean
    },

    watch: {
      showPrevMore(val) {
        if (!val) this.quickprevIconClass = 'el-icon-more';
      },

      showNextMore(val) {
        if (!val) this.quicknextIconClass = 'el-icon-more';
      }
    },

    methods: {
      onPagerClick(event) {
        const target = event.target;
        if (target.tagName === 'UL' || this.disabled) {
          return;
        }

        let newPage = Number(event.target.textContent);
        const pageCount = this.pageCount;
        const currentPage = this.currentPage;
        const pagerCountOffset = this.pagerCount - 2;

        //點擊more圖標頁碼顯示計算邏輯
        if (target.className.indexOf('more') !== -1) {
          if (target.className.indexOf('quickprev') !== -1) {
            newPage = currentPage - pagerCountOffset;
          } else if (target.className.indexOf('quicknext') !== -1) {
            newPage = currentPage + pagerCountOffset;
          }
        }

        /* istanbul ignore if */
        if (!isNaN(newPage)) {
          if (newPage < 1) {
            newPage = 1;
          }
          if (newPage > pageCount) {
            newPage = pageCount;
          }
        }

        if (newPage !== currentPage) {
          this.$emit('change', newPage);
        }
      },
      // 鼠標移入more圖標顯示向左或者向右的圖標
      onMouseenter(direction) {
        if (this.disabled) return;
        if (direction === 'left') {
          this.quickprevIconClass = 'el-icon-d-arrow-left';
        } else {
          this.quicknextIconClass = 'el-icon-d-arrow-right';
        }
      }
    },

    computed: {
      pagers() {
        // pagerCount頁碼按鈕的數量(大於等於 5 且小於等於 21 的奇數)
        const pagerCount = this.pagerCount;
        // 按鈕的一半數量
        const halfPagerCount = (pagerCount - 1) / 2;
        // 當前頁碼數
        const currentPage = Number(this.currentPage);
        // 總頁數
        const pageCount = Number(this.pageCount);
        // 左邊的more圖標
        let showPrevMore = false;
        // 右邊的more圖標
        let showNextMore = false;

        // 若是總頁碼數大於要顯示的頁碼按鈕數量
        if (pageCount > pagerCount) {
          //  若是當前頁碼大於（要顯示的頁碼按鈕數量-一半的頁碼按鈕數量）
          if (currentPage > pagerCount - halfPagerCount) {
            //  顯示左邊的more圖標
            showPrevMore = true;
          }
          //  若是當前頁碼小於（要顯示的頁碼按鈕數量-一半的頁碼按鈕數量）
          if (currentPage < pageCount - halfPagerCount) {
            //  顯示右邊的more圖標
            showNextMore = true;
          }
        }
        const array = [];
        //若是左邊的more圖標存在，右邊的more圖標不存在
        if (showPrevMore && !showNextMore) {
          const startPage = pageCount - (pagerCount - 2);
          for (let i = startPage; i < pageCount; i++) {
            array.push(i);
          }
        } else if (!showPrevMore && showNextMore) {   //若是左邊的more圖標不存在，右邊的more圖標存在
          for (let i = 2; i < pagerCount; i++) {
            array.push(i);
          }
        } else if (showPrevMore && showNextMore) {  //若是左右more圖標都存在
          // Math.floor() 返回小於或等於一個給定數字的最大整數。
          const offset = Math.floor(pagerCount / 2) - 1;
          for (let i = currentPage - offset ; i <= currentPage + offset; i++) {
            array.push(i);
          }
        } else {
          for (let i = 2; i < pageCount; i++) {
            array.push(i);
          }
        }

        this.showPrevMore = showPrevMore;
        this.showNextMore = showNextMore;

        return array;
      }
    },

    data() {
      return {
        current: null,
        showPrevMore: false,
        showNextMore: false,
        quicknextIconClass: 'el-icon-more',
        quickprevIconClass: 'el-icon-more'
      };
    }
  };
</script>