fix
							parent
							
								
									1ed718b67f
								
							
						
					
					
						commit
						4d4caa3bc4
					
				| 
						 | 
				
			
			@ -1,465 +0,0 @@
 | 
			
		|||
<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>
 | 
			
		||||
| 
						 | 
				
			
			@ -1,187 +0,0 @@
 | 
			
		|||
<script>
 | 
			
		||||
import { cloneElement, isValidElement, getClass, getStyle } from '../_util/vnode'
 | 
			
		||||
import RcTooltip from './src/Tooltip'
 | 
			
		||||
import getPlacements from './placements'
 | 
			
		||||
import PropTypes from '../_util/vue-types'
 | 
			
		||||
import { hasProp, getComponentFromProp } from '../_util/props-util'
 | 
			
		||||
import abstractTooltipProps from './abstractTooltipProps'
 | 
			
		||||
 | 
			
		||||
const splitObject = (obj, keys) => {
 | 
			
		||||
  const picked = {}
 | 
			
		||||
  const omited = { ...obj }
 | 
			
		||||
  keys.forEach(key => {
 | 
			
		||||
    if (obj && key in obj) {
 | 
			
		||||
      picked[key] = obj[key]
 | 
			
		||||
      delete omited[key]
 | 
			
		||||
    }
 | 
			
		||||
  })
 | 
			
		||||
  return { picked, omited }
 | 
			
		||||
}
 | 
			
		||||
const props = abstractTooltipProps()
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'Tooltip',
 | 
			
		||||
  props: {
 | 
			
		||||
    ...props,
 | 
			
		||||
    title: PropTypes.any,
 | 
			
		||||
  },
 | 
			
		||||
  model: {
 | 
			
		||||
    prop: 'visible',
 | 
			
		||||
    event: 'change',
 | 
			
		||||
  },
 | 
			
		||||
  data () {
 | 
			
		||||
    return {
 | 
			
		||||
      sVisible: !!this.$props.visible,
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  watch: {
 | 
			
		||||
    visible (val) {
 | 
			
		||||
      this.sVisible = val
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    onVisibleChange (visible) {
 | 
			
		||||
      if (!hasProp(this, 'visible')) {
 | 
			
		||||
        this.sVisible = this.isNoTitle() ? false : visible
 | 
			
		||||
      }
 | 
			
		||||
      if (!this.isNoTitle()) {
 | 
			
		||||
        this.$emit('change', visible)
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    getPopupDomNode () {
 | 
			
		||||
      return this.$refs.tooltip.getPopupDomNode()
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    getPlacements () {
 | 
			
		||||
      const { builtinPlacements, arrowPointAtCenter, autoAdjustOverflow } = this.$props
 | 
			
		||||
      return builtinPlacements || getPlacements({
 | 
			
		||||
        arrowPointAtCenter,
 | 
			
		||||
        verticalArrowShift: 8,
 | 
			
		||||
        autoAdjustOverflow,
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    isHoverTrigger () {
 | 
			
		||||
      const { trigger } = this.$props
 | 
			
		||||
      if (!trigger || trigger === 'hover') {
 | 
			
		||||
        return true
 | 
			
		||||
      }
 | 
			
		||||
      if (Array.isArray(trigger)) {
 | 
			
		||||
        return trigger.indexOf('hover') >= 0
 | 
			
		||||
      }
 | 
			
		||||
      return false
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    // Fix Tooltip won't hide at disabled button
 | 
			
		||||
    // mouse events don't trigger at disabled button in Chrome
 | 
			
		||||
    // https://github.com/react-component/tooltip/issues/18
 | 
			
		||||
    getDisabledCompatibleChildren (ele) {
 | 
			
		||||
      const isAntBtn = ele.componentOptions && ele.componentOptions.Ctor.options.__ANT_BUTTON
 | 
			
		||||
      if (((isAntBtn && ele.componentOptions.propsData.disabled) || (ele.tag === 'button' && ele.data && ele.data.attrs.disabled !== false)) && this.isHoverTrigger()) {
 | 
			
		||||
      // Pick some layout related style properties up to span
 | 
			
		||||
      // Prevent layout bugs like https://github.com/ant-design/ant-design/issues/5254
 | 
			
		||||
        const { picked, omited } = splitObject(
 | 
			
		||||
          getStyle(ele),
 | 
			
		||||
          ['position', 'left', 'right', 'top', 'bottom', 'float', 'display', 'zIndex'],
 | 
			
		||||
        )
 | 
			
		||||
        const spanStyle = {
 | 
			
		||||
          display: 'inline-block', // default inline-block is important
 | 
			
		||||
          ...picked,
 | 
			
		||||
          cursor: 'not-allowed',
 | 
			
		||||
        }
 | 
			
		||||
        const buttonStyle = {
 | 
			
		||||
          ...omited,
 | 
			
		||||
          pointerEvents: 'none',
 | 
			
		||||
        }
 | 
			
		||||
        const spanCls = getClass(ele)
 | 
			
		||||
        const child = cloneElement(ele, {
 | 
			
		||||
          style: buttonStyle,
 | 
			
		||||
          class: null,
 | 
			
		||||
        })
 | 
			
		||||
        return (
 | 
			
		||||
          <span style={spanStyle} class={spanCls}>
 | 
			
		||||
            {child}
 | 
			
		||||
          </span>
 | 
			
		||||
        )
 | 
			
		||||
      }
 | 
			
		||||
      return ele
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    isNoTitle () {
 | 
			
		||||
      const { $slots, title } = this
 | 
			
		||||
      return !$slots.title && !title
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    // 动态设置动画点
 | 
			
		||||
    onPopupAlign (domNode, align) {
 | 
			
		||||
      const placements = this.getPlacements()
 | 
			
		||||
      // 当前返回的位置
 | 
			
		||||
      const placement = Object.keys(placements).filter(
 | 
			
		||||
        key => (
 | 
			
		||||
          placements[key].points[0] === align.points[0] &&
 | 
			
		||||
        placements[key].points[1] === align.points[1]
 | 
			
		||||
        ),
 | 
			
		||||
      )[0]
 | 
			
		||||
      if (!placement) {
 | 
			
		||||
        return
 | 
			
		||||
      }
 | 
			
		||||
      // 根据当前坐标设置动画点
 | 
			
		||||
      const rect = domNode.getBoundingClientRect()
 | 
			
		||||
      const transformOrigin = {
 | 
			
		||||
        top: '50%',
 | 
			
		||||
        left: '50%',
 | 
			
		||||
      }
 | 
			
		||||
      if (placement.indexOf('top') >= 0 || placement.indexOf('Bottom') >= 0) {
 | 
			
		||||
        transformOrigin.top = `${rect.height - align.offset[1]}px`
 | 
			
		||||
      } else if (placement.indexOf('Top') >= 0 || placement.indexOf('bottom') >= 0) {
 | 
			
		||||
        transformOrigin.top = `${-align.offset[1]}px`
 | 
			
		||||
      }
 | 
			
		||||
      if (placement.indexOf('left') >= 0 || placement.indexOf('Right') >= 0) {
 | 
			
		||||
        transformOrigin.left = `${rect.width - align.offset[0]}px`
 | 
			
		||||
      } else if (placement.indexOf('right') >= 0 || placement.indexOf('Left') >= 0) {
 | 
			
		||||
        transformOrigin.left = `${-align.offset[0]}px`
 | 
			
		||||
      }
 | 
			
		||||
      domNode.style.transformOrigin = `${transformOrigin.left} ${transformOrigin.top}`
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
 | 
			
		||||
  render (h) {
 | 
			
		||||
    const { $props, $data, $slots } = this
 | 
			
		||||
    const { prefixCls, openClassName, getPopupContainer, getTooltipContainer } = $props
 | 
			
		||||
    const children = ($slots.default || []).filter(c => c.tag || c.text.trim() !== '')[0]
 | 
			
		||||
    let sVisible = $data.sVisible
 | 
			
		||||
    // Hide tooltip when there is no title
 | 
			
		||||
    if (!hasProp(this, 'visible') && this.isNoTitle()) {
 | 
			
		||||
      sVisible = false
 | 
			
		||||
    }
 | 
			
		||||
    if (!children) {
 | 
			
		||||
      return null
 | 
			
		||||
    }
 | 
			
		||||
    const child = this.getDisabledCompatibleChildren(isValidElement(children) ? children : <span>{children}</span>)
 | 
			
		||||
    const childCls = {
 | 
			
		||||
      [openClassName || `${prefixCls}-open`]: true,
 | 
			
		||||
    }
 | 
			
		||||
    const tooltipProps = {
 | 
			
		||||
      props: {
 | 
			
		||||
        ...$props,
 | 
			
		||||
        getTooltipContainer: getPopupContainer || getTooltipContainer,
 | 
			
		||||
        builtinPlacements: this.getPlacements(),
 | 
			
		||||
        visible: sVisible,
 | 
			
		||||
      },
 | 
			
		||||
      ref: 'tooltip',
 | 
			
		||||
      on: {
 | 
			
		||||
        visibleChange: this.onVisibleChange,
 | 
			
		||||
        popupAlign: this.onPopupAlign,
 | 
			
		||||
      },
 | 
			
		||||
    }
 | 
			
		||||
    return (
 | 
			
		||||
      <RcTooltip {...tooltipProps}>
 | 
			
		||||
        <template slot='overlay'>
 | 
			
		||||
          {getComponentFromProp(this, 'title')}
 | 
			
		||||
        </template>
 | 
			
		||||
        {sVisible ? cloneElement(child, { class: childCls }) : child}
 | 
			
		||||
      </RcTooltip>
 | 
			
		||||
    )
 | 
			
		||||
  },
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
		Loading…
	
		Reference in New Issue