ant-design-vue/components/pagination/pagination.vue

<script>
import Button from '../button/index'
import Pager from './Pager'
import Options from './Options'
import locale from './locale/zh_CN'
import KEYCODE from './KeyCode'

// 是否是正整数
function isInteger (value) {
  return typeof value === 'number' &&
    isFinite(value) &&
    Math.floor(value) === value
}

function defaultItemRender (page, type, element) {
  return element
}

export default {
  name: 'Pagination',
  props: {
    prefixCls: {
      type: String,
      default: 'ant-pagination',
    },
    current: {
      type: [Number, String],
      default: 1,
    },
    total: {
      type: [Number, String],
      default: 0,
    },
    pageSize: {
      type: [Number, String],
      default: 10,
    },
    showSizeChanger: {
      type: Boolean,
      default: false,
    },
    pageSizeOptions: {
      type: Array,
      default: () => ['10', '20', '30', '40'],
    },
    showQuickJumper: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: '',
    },
    simple: Boolean,
    showTitle: {
      type: Boolean,
      default: true,
    },
    showTotal: Function,
    itemRender: {
      type: Function,
      default: defaultItemRender,
    },
  },
  model: {
    prop: 'current',
  },
  data () {
    const { current } = this
    return {
      stateCurrent: +current,
    }
  },
  methods: {
    isValid (page) {
      return isInteger(page) && page >= 1 && page !== this.stateCurrent
    },
    calculatePage (p) {
      let pageSize = p
      if (typeof pageSize === 'undefined') {
        pageSize = this.pageSize
      }
      return Math.floor((this.total - 1) / pageSize) + 1
    },
    handleGoTO (event) {
      if (event.keyCode === KEYCODE.ENTER || event.type === 'click') {
        this.handleChange(this.stateCurrent)
      }
    },
    prev () {
      if (this.hasPrev()) {
        this.handleChange(this.stateCurrent - 1)
      }
    },
    next () {
      if (this.hasNext()) {
        this.handleChange(this.stateCurrent + 1)
      }
    },
    hasPrev () {
      return this.stateCurrent > 1
    },
    hasNext () {
      return this.stateCurrent < this.calculatePage()
    },
    handleKeyDown (event) {
      if (event.keyCode === KEYCODE.ARROW_UP || event.keyCode === KEYCODE.ARROW_DOWN) {
        event.preventDefault()
      }
    },
    handleKeyUp (event) {
      const inputValue = event.target.value
      const stateCurrent = this.stateCurrent
      let value

      if (inputValue === '') {
        value = inputValue
      } else if (isNaN(Number(inputValue))) {
        value = stateCurrent
      } else {
        value = Number(inputValue)
      }
      event.target.value = value

      if (event.keyCode === KEYCODE.ENTER) {
        this.handleChange(value)
      } else if (event.keyCode === KEYCODE.ARROW_UP) {
        this.handleChange(value - 1)
      } else if (event.keyCode === KEYCODE.ARROW_DOWN) {
        this.handleChange(value + 1)
      }
    },
    handleChange (p) {
      let page = p
      if (this.isValid(page)) {
        const allTotal = this.calculatePage()
        if (page > allTotal) {
          page = allTotal
        }
        this.stateCurrent = page
        this.$emit('input', page)
        this.$emit('change', page, this.pageSize)
        return page
      }
      return this.stateCurrent
    },
    runIfEnter (event, callback, ...restParams) {
      if (event.key === 'Enter' || event.charCode === 13) {
        callback(...restParams)
      }
    },
    runIfEnterPrev (event) {
      this.runIfEnter(event, this.prev)
    },
    runIfEnterNext (event) {
      this.runIfEnter(event, this.next)
    },
    runIfEnterJumpPrev (event) {
      this.runIfEnter(event, this.jumpPrev)
    },
    runIfEnterJumpNext (event) {
      this.runIfEnter(event, this.jumpNext)
    },
    getJumpPrevPage () {
      return Math.max(1, this.stateCurrent - (this.showLessItems ? 3 : 5))
    },
    getJumpNextPage () {
      return Math.min(this.calculatePage(), this.stateCurrent + (this.showLessItems ? 3 : 5))
    },
    jumpPrev () {
      this.handleChange(this.getJumpPrevPage())
    },
    jumpNext () {
      this.handleChange(this.getJumpNextPage())
    },
  },
  watch: {
    current (val) {
      this.stateCurrent = +val
    },
  },
  components: {
    vcButton: Button,
    Pager,
  },
  render () {
    const prefixCls = this.prefixCls
    const allPages = this.calculatePage()
    const pagerList = []
    let jumpPrev = null
    let jumpNext = null
    let firstPager = null
    let lastPager = null
    let gotoButton = null

    const goButton = this.showQuickJumper
    const pageBufferSize = this.showLessItems ? 1 : 2
    const { stateCurrent, pageSize } = this
    const smallClass = this.size === 'small' ? 'mini' : ''
    const prevPage = stateCurrent - 1 > 0 ? stateCurrent - 1 : 0
    const nextPage = stateCurrent + 1 < allPages ? stateCurrent + 1 : allPages

    if (this.simple) {
      if (goButton) {
        if (typeof goButton === 'boolean') {
          gotoButton = (
            <li
              title={this.showTitle ? `${locale.jump_to}${stateCurrent}/${allPages}` : null}
              class={`${prefixCls}-simple-pager`}
            >
              <vc-button
                onClick={this.handleGoTO}
                onKeyup={this.handleGoTO}
              >
                {locale.jump_to_confirm}
              </vc-button>
            </li>
          )
        } else {
          gotoButton = goButton
        }
      }
      return (
        <ul class={`${prefixCls} ${prefixCls}-simple ${smallClass}`}>
          <li
            title={this.showTitle ? locale.prev_page : null}
            onClick={this.prev}
            tabIndex='0'
            onKeypress={this.runIfEnterPrev}
            class={`${this.hasPrev() ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
            aria-disabled={!this.hasPrev()}
          >
            {this.itemRender(prevPage, 'prev', <a class={`${prefixCls}-item-link`} />)}
          </li>
          <li
            title={this.showTitle ? `${stateCurrent}/${allPages}` : null}
            class={`${prefixCls}-simple-pager`}
          >
            <input
              type='text'
              value={this.stateCurrent}
              onKeydown={this.handleKeyDown}
              onKeyup={this.handleKeyUp}
              onChange={this.handleKeyUp}
              size='3'
            />
            <span class={`${prefixCls}-slash`}>／</span>
            {allPages}
          </li>
          <li
            title={this.showTitle ? locale.next_page : null}
            onClick={this.next}
            tabIndex='0'
            onKeypress={this.runIfEnterNext}
            class={`${this.hasNext() ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
            aria-disabled={!this.hasNext()}
          >
            {this.itemRender(nextPage, 'next', <a class={`${prefixCls}-item-link`} />)}
          </li>
          {gotoButton}
        </ul>
      )
    }

    if (allPages <= 5 + pageBufferSize * 2) {
      for (let i = 1; i <= allPages; i++) {
        const active = stateCurrent === i
        pagerList.push(
          <Pager
            rootPrefixCls={this.prefixCls}
            onClick={this.handleChange}
            onKeypress={this.runIfEnter}
            key={i}
            page={i}
            active={active}
            showTitle={this.showTitle}
            itemRender={this.itemRender}
          />
        )
      }
    } else {
      const prevItemTitle = this.showLessItems ? locale.prev_3 : locale.prev_5
      const nextItemTitle = this.showLessItems ? locale.next_3 : locale.next_5
      jumpPrev = (
        <li
          title={this.showTitle ? prevItemTitle : null}
          key='prev'
          onClick={this.jumpPrev}
          tabIndex='0'
          onKeypress={this.runIfEnterJumpPrev}
          class={`${prefixCls}-jump-prev`}
        >
          {this.itemRender(
            this.getJumpPrevPage(), 'jump-prev', <a class={`${prefixCls}-item-link`} />
          )}
        </li>
      )
      jumpNext = (
        <li
          title={this.showTitle ? nextItemTitle : null}
          key='next'
          tabIndex='0'
          onClick={this.jumpNext}
          onKeypress={this.runIfEnterJumpNext}
          class={`${prefixCls}-jump-next`}
        >
          {this.itemRender(
            this.getJumpNextPage(), 'jump-next', <a class={`${prefixCls}-item-link`} />
          )}
        </li>
      )
      lastPager = (
        <Pager
          rootPrefixCls={prefixCls}
          onClick={this.handleChange}
          onKeypress={this.runIfEnter}
          key={allPages}
          page={allPages}
          active={false}
          showTitle={this.showTitle}
          itemRender={this.itemRender}
        />
      )
      firstPager = (
        <Pager
          rootPrefixCls={prefixCls}
          onClick={this.handleChange}
          onKeypress={this.runIfEnter}
          key={1}
          page={1}
          active={false}
          showTitle={this.showTitle}
          itemRender={this.itemRender}
        />
      )

      let left = Math.max(1, stateCurrent - pageBufferSize)
      let right = Math.min(stateCurrent + pageBufferSize, allPages)

      if (stateCurrent - 1 <= pageBufferSize) {
        right = 1 + pageBufferSize * 2
      }

      if (allPages - stateCurrent <= pageBufferSize) {
        left = allPages - pageBufferSize * 2
      }

      for (let i = left; i <= right; i++) {
        const active = stateCurrent === i
        pagerList.push(
          <Pager
            rootPrefixCls={prefixCls}
            onClick={this.handleChange}
            onKeypress={this.runIfEnter}
            key={i}
            page={i}
            active={active}
            showTitle={this.showTitle}
            itemRender={this.itemRender}
          />
        )
      }

      if (stateCurrent - 1 >= pageBufferSize * 2 && stateCurrent !== 1 + 2) {
        pagerList[0] = (
          <Pager
            rootPrefixCls={prefixCls}
            onClick={this.handleChange}
            onKeypress={this.runIfEnter}
            key={left}
            page={left}
            className={`${prefixCls}-item-after-jump-prev`}
            active={false}
            showTitle={this.showTitle}
            itemRender={this.itemRender}
          />
        )
        pagerList.unshift(jumpPrev)
      }
      if (allPages - stateCurrent >= pageBufferSize * 2 && stateCurrent !== allPages - 2) {
        pagerList[pagerList.length - 1] = (
          <Pager
            rootPrefixCls={prefixCls}
            onClick={this.handleChange}
            onKeypress={this.runIfEnter}
            key={right}
            page={right}
            className={`${prefixCls}-item-before-jump-next`}
            active={false}
            showTitle={this.showTitle}
            itemRender={this.itemRender}
          />
        )
        pagerList.push(jumpNext)
      }

      if (left !== 1) {
        pagerList.unshift(firstPager)
      }
      if (right !== allPages) {
        pagerList.push(lastPager)
      }
    }

    let totalText = null

    if (this.showTotal) {
      totalText = (
        <li class={`${prefixCls}-total-text`}>
          {this.showTotal(
            this.total,
            [
              (stateCurrent - 1) * pageSize + 1,
              stateCurrent * pageSize > this.total ? this.total : stateCurrent * pageSize,
            ]
          )}
        </li>
      )
    }
    const prevDisabled = !this.hasPrev()
    const nextDisabled = !this.hasNext()
    return (
      <ul
        class={`${prefixCls} ${smallClass}`}
        unselectable='unselectable'
      >
        {totalText}
        <li
          title={this.showTitle ? locale.prev_page : null}
          onClick={this.prev}
          tabIndex='0'
          onKeypress={this.runIfEnterPrev}
          class={`${!prevDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
          aria-disabled={prevDisabled}
        >
          {this.itemRender(prevPage, 'prev', <a class={`${prefixCls}-item-link`} />)}
        </li>
        {pagerList}
        <li
          title={this.showTitle ? locale.next_page : null}
          onClick={this.next}
          tabIndex='0'
          onKeypress={this.runIfEnterNext}
          class={`${!nextDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
          aria-disabled={nextDisabled}
        >
          {this.itemRender(nextPage, 'next', <a class={`${prefixCls}-item-link`} />)}
        </li>
        <Options
          locale={locale}
          rootPrefixCls={prefixCls}
          selectComponentClass={this.selectComponentClass}
          selectPrefixCls={this.selectPrefixCls}
          changeSize={this.showSizeChanger ? this.changePageSize : null}
          current={stateCurrent}
          pageSize={pageSize}
          pageSizeOptions={this.pageSizeOptions}
          quickGo={this.showQuickJumper ? this.handleChange : null}
          goButton={goButton}
        />
      </ul>
    )
  },
}
</script>