element Pagination源码

src/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: {
    // 每页显示条目个数，支持 .sync 修饰符
    pageSize: {
      type: Number,
      default: 10
    },
    // 是否使用小型分页样式
    small: Boolean,
    // 总条目数
    total: Number,
    // 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性
    pageCount: Number,
    // 页码按钮的数量，当总页数超过该值时会折叠
    pagerCount: {
      type: Number,
      validator (value) {
        return (value | 0) === value && value > 4 && value < 22 && (value % 2) === 1;
      },
      default: 7
    },
    // 当前页数，支持 .sync 修饰符
    currentPage: {
      type: Number,
      default: 1
    },
    // 组件布局，子组件名用逗号分隔    String    sizes, prev, pager, next, jumper, ->, total, slot
    layout: {
      default: 'prev, pager, next, jumper, ->, total'
    },
    // 每页显示个数选择器的选项设置    number[]    —    [10, 20, 30, 40, 50, 100]
    pageSizes: {
      type: Array,
      default () {
        return [10, 20, 30, 40, 50, 100];
      }
    },
    // 每页显示个数选择器的下拉框类名
    popperClass: String,
    // 替代图标显示的上一页文字
    prevText: String,
    // 替代图标显示的下一页文字
    nextText: String,
    // 是否为分页按钮添加背景色
    background: Boolean,
    // 是否禁用
    disabled: Boolean,
    // 只有一页时是否隐藏
    hideOnSinglePage: Boolean
  },

  data () {
    return {
      //当前的页码
      internalCurrentPage: 1,
      //总页数
      internalPageSize: 0,
      lastEmittedPage: -1,
      userChangePageSize: false
    };
  },
  //render函数生成el-pagination
  render (h) {
    const layout = this.layout;
    if (!layout) return null;
    if (this.hideOnSinglePage && (!this.internalPageCount || this.internalPageCount === 1)) return null;
    // 最外层div
    let template = <div class={['el-pagination', {
      'is-background': this.background,
      'el-pagination--small': this.small
    }]}></div>;
    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: <slot>{this.$slots.default ? this.$slots.default : ''}</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 || [];
    // ->这个符号主要是将其后面的组件放在rightWrapper中，然后右浮动；如果存在->符号，就将haveRightWrapper为true
    components.forEach(compo => {
      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: {
    // 上一页组件
    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: {
      // 当前页数等于总页数时 或者 总页数等于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;
            // 如果用户设置了每页显示的条目个数，并且pageSize在设置的pageSizes中存在的话，就显示pageSize，否则就显示this.pageSizes[0]
            // 最后将每页显示的条目个数赋值给this.$parent.internalPageSize
            if (Array.isArray(newVal)) {
              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],

      components: { ElInput },

      data () {
        return {
          userInput: null
        };
      },

      watch: {
        '$parent.internalCurrentPage' () {
          this.userInput = null;
        }
      },

      methods: {
        // 按下回车，前往多少页
        handleKeyup ({ keyCode, target }) {
          // Chrome, Safari, Firefox triggers change event on Enter
          // Hack for IE: https://github.com/ElemeFE/element/issues/11710
          // Drop this method when we no longer supports IE
          if (keyCode === 13) {
            this.handleChange(target.value);
          }
        },
        handleInput (value) {
          this.userInput = value;
        },
        // 改变当前页
        handleChange (value) {
          // 更新页码列表中当前页的值
          this.$parent.internalCurrentPage = this.$parent.getValidCurrentPage(value);
          this.$parent.emitChange();
          this.userInput = null;
        }
      },
      // 前往多少页
      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.userInput !== null ? this.userInput : this.$parent.internalCurrentPage}
              type="number"
              disabled={this.$parent.disabled}
              nativeOnKeyup={this.handleKeyup}
              onInput={this.handleInput}
              onChange={this.handleChange} />
            {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) {
          // currentPage 改变时会触发    当前页
          this.$emit('current-change', this.internalCurrentPage);
          // 当前页赋值给上次点击的页面
          //lastEmittedPage记录最后传递的CurrentPage的值
          this.lastEmittedPage = this.internalCurrentPage;
          this.userChangePageSize = false;
        }
      });
    }
  },

  computed: {
    // 总页码
    internalPageCount () {
      if (typeof this.total === 'number') {
        //总页数 = 总条目数 / 每页的显示条数
        return Math.max(1, Math.ceil(this.total / this.internalPageSize));
      } else if (typeof this.pageCount === 'number') {
        //总页数
        return Math.max(1, this.pageCount);
      }
      return null;
    }
  },

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

    pageSize: {
      immediate: true,
      handler (val) {
        this.internalPageSize = isNaN(val) ? 10 : val;
      }
    },
    // internalCurrentPage改变时去触发父组件中currentPage更新
    internalCurrentPage: {
      immediate: true,
      handler (newVal) {
        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;
    }
  }
};

src/pagination.vue

<template>
  <ul @click="onPagerClick" class="el-pager">
  <!-- 第一页 -->
    <li
      :class="{ active: currentPage === 1, disabled }"
      v-if="pageCount > 0"
      class="number">1</li>
      <!-- 向右更多 -->
    <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>
      <!-- 向右的更多 -->
    <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: {
      // 当前页数，支持 .sync 修饰符    number    —    1
      currentPage: Number,
      // 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性    Number    —    —
      pageCount: Number,
      // 页码按钮的数量，当总页数超过该值时会折叠    number    大于等于 5 且小于等于 21 的奇数    7
      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; //每次移动的距离
        // 点击...
        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)) {
          // 最小为1
          if (newPage < 1) {
            newPage = 1;
          }
          // 最大为pageCount
          if (newPage > pageCount) {
            newPage = pageCount;
          }
        }
        // 新旧值不相等
        if (newPage !== currentPage) {
          this.$emit('change', newPage);
        }
      },
      // 鼠标移入
      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() {
        const pagerCount = this.pagerCount;//展示的最大页数
        // 展示的最大页数的一半
        const halfPagerCount = (pagerCount - 1) / 2;
        // 当前页数
        const currentPage = Number(this.currentPage);
        // 总页数
        const pageCount = Number(this.pageCount);

        let showPrevMore = false;
        let showNextMore = false;
        // 总页数大于设置显示的最大总页数
        if (pageCount > pagerCount) {
          // 如果当前页数大于最大总页数减去最大总页数一半
          if (currentPage > pagerCount - halfPagerCount) {
            // 展示向左更多
            showPrevMore = true;
          }
          // 反之向右更多
          if (currentPage < pageCount - halfPagerCount) {
            showNextMore = true;
          }
        }

        const array = [];
        // 出现向左更多
        if (showPrevMore && !showNextMore) {
          const startPage = pageCount - (pagerCount - 2);
          for (let i = startPage; i < pageCount; i++) {
            array.push(i);
          }
        } else if (!showPrevMore && showNextMore) {
          for (let i = 2; i < pagerCount; i++) {
            array.push(i);
          }
        } else if (showPrevMore && showNextMore) {
          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>