components/tip/index.js
/**
     * Calculate the position of tip,
     * and relayout it's position
     */
Calculate the position of tip,
and relayout it's position
Calculate the position of tip and relayout it ' s position
layout() {
      if (!this.$_tipVM) {
        return
      }
      const tipEl = this.$_tipVM.$el
      const referenceEl = this.$el
      const delta = this.$_getPosition(this.$el, this.wrapperEl)
      const size = this.$_getSize(this.$el, this.wrapperEl)
      const offsetTop = this.offset.top || 0
      const offsetLeft = this.offset.left || 0
      let tipElWidth = tipEl.offsetWidth
      let tipElHeight = tipEl.offsetHeight
      let cssText = ''
      if (this.fill && (this.placement === 'top' || this.placement === 'bottom')) {
        tipElWidth = size.width
        cssText += `width: ${tipElWidth}px;`
      }
      if (this.fill && (this.placement === 'left' || this.placement === 'right')) {
        tipElHeight = size.height
        cssText += `height: ${tipElHeight}px;`
      }
      switch (this.placement) {
        case 'left':
          delta.y += (referenceEl.offsetHeight - tipElHeight) / 2
          delta.x -= tipElWidth + 10
          break
        case 'right':
          delta.y += (referenceEl.offsetHeight - tipElHeight) / 2
          delta.x += referenceEl.offsetWidth + 10
          break
        case 'bottom':
          delta.y += referenceEl.offsetHeight + 10
          delta.x += (referenceEl.offsetWidth - tipElWidth) / 2
          break
        default:
          delta.y -= tipElHeight + 10
          delta.x += (this.$el.offsetWidth - tipElWidth) / 2
          break
      }
      cssText += `position: absolute; top: ${delta.y + offsetTop}px; left: ${delta.x + offsetLeft}px;`
      this.$_tipVM.$el.style.cssText = cssText
    }
layout ( ) { if ( ! this . $_tipVM ) { return } const tipEl = this . $_tipVM . $el const referenceEl = this . $el const delta = this . $_getPosition ( this . $el , this . wrapperEl ) const size = this . $_getSize ( this . $el , this . wrapperEl ) const offsetTop = this . offset . top || 0 const offsetLeft = this . offset . left || 0 let tipElWidth = tipEl . offsetWidth let tipElHeight = tipEl . offsetHeight let cssText = '' if ( this . fill && ( this . placement === 'top' || this . placement === 'bottom' ) ) { tipElWidth = size . width cssText += ` ${ tipElWidth } ` } if ( this . fill && ( this . placement === 'left' || this . placement === 'right' ) ) { tipElHeight = size . height cssText += ` ${ tipElHeight } ` } switch ( this . placement ) { case 'left' : delta . y += ( referenceEl . offsetHeight - tipElHeight ) / 2 delta . x -= tipElWidth + 10 break case 'right' : delta . y += ( referenceEl . offsetHeight - tipElHeight ) / 2 delta . x += referenceEl . offsetWidth + 10 break case 'bottom' : delta . y += referenceEl . offsetHeight + 10 delta . x += ( referenceEl . offsetWidth - tipElWidth ) / 2 break default : delta . y -= tipElHeight + 10 delta . x += ( this . $el . offsetWidth - tipElWidth ) / 2 break } cssText += ` ${ delta . y + offsetTop } ${ delta . x + offsetLeft } ` this . $_tipVM . $el . style . cssText = cssText }
Calculate the position of tip,
 and relayout it's position
Calculate the position of tip and relayout it ' s position