element Pagination源码

小鱼儿 2021-11-27 04:01 209阅读 0赞

**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>

转载于:https://www.cnblogs.com/wsk1576025821/p/10973574.html