Elementyu tooltip全局封装

import Vue from 'vue'

export function isOverflow(element) {

  if (element.scrollWidth > element.offsetWidth) {

    return element

  }

  return null

}

function getMaxZIndex() {

  let maxZIndex = 0

  const elements = document.body.children

  for (let i = 0; i < elements.length; i++) {

    const zIndex = parseInt(window.getComputedStyle(elements[i])['z-index'])

    if (!isNaN(zIndex) && zIndex > maxZIndex) {

      maxZIndex = zIndex

    }

  }

  return maxZIndex

}

export default {

  bind(el, binding) {

    let tooltip = null

    let timer = null

    const { value } = binding

    const { auto } = binding.modifiers

    const childItem = value && el.querySelector(value)

    const tooltipDom = childItem || el

    console.log('tooltipDom', tooltipDom)

    tooltipDom.addEventListener('mouseenter', function() {

      if (auto && !value) {

        tooltipDom.style.whiteSpace = 'nowrap'

        tooltipDom.style.overflow = 'hidden'

        tooltipDom.style.textOverflow = 'ellipsis'

      }

      const overflowElement = isOverflow(tooltipDom)

      console.log('overflowElement', overflowElement)

      if (!overflowElement) return

      timer && clearTimeout(timer)

      timer = null

      const rect = overflowElement.getBoundingClientRect()

      overflowElement && initTooltip()

      function initTooltip() {

        timer && clearTimeout(timer)

        timer = null

        if (!tooltip) {

          tooltip = document.createElement('div')

          tooltip.className = 'el-tooltip__popper is-dark'

          tooltip.style.position = 'absolute'

          tooltip.style.zIndex = `${getMaxZIndex() + 1 > 1000 ? getMaxZIndex() + 1 : 1000}`

          tooltip.style.maxHeight = '250px'

          tooltip.style.maxWidth = '750px'

          tooltip.style.overflowY = 'auto'

          tooltip.style.opacity = '0'

          tooltip.style.transition = 'opacity 0.5s'

          tooltip.textContent = overflowElement.textContent

          tooltip.style.left = `${rect.left + window.scrollX + (rect.width / 2)}px`

          document.body.appendChild(tooltip)

          window.requestAnimationFrame(() => {

            const tooltipRect = tooltip.getBoundingClientRect()

            tooltip.style.top = `${rect.top + window.scrollY - tooltipRect.height > 16 ? rect.top + window.scrollY - tooltip.offsetHeight - 8 : 16}px`

            const left = window.scrollX + rect.left + (overflowElement.offsetWidth / 2) - (tooltipRect.width / 2) > 16 ? rect.left + (overflowElement.offsetWidth / 2) - (tooltipRect.width / 2) : 16

            tooltip.style.left = `${left}px`

            window.getComputedStyle(tooltip).opacity

            tooltip.style.opacity = '1'

          })

          tooltip.addEventListener('mouseenter', function() {

            tooltip.style.opacity = '1'

            tooltip.isHovered = true

            timer && clearTimeout(timer)

            timer = null

          })

          tooltip.addEventListener('mouseleave', function() {

            tooltip.isHovered = false

            tooltip.style.opacity = '0'

            timer = setTimeout(() => {

              tooltip && document.body.removeChild(tooltip)

              tooltip = null

              timer && clearTimeout(timer)

              timer = null

            }, 500)

          })

        } else {

          const tooltipRect = tooltip.getBoundingClientRect()

          tooltip.style.top = `${rect.top + window.scrollY - tooltipRect.height > 16 ? rect.top + window.scrollY - tooltip.offsetHeight - 8 : 16}px`

          const left = window.scrollX + rect.left + (overflowElement.offsetWidth / 2) - (tooltipRect.width / 2) > 16 ? rect.left + (overflowElement.offsetWidth / 2) - (tooltipRect.width / 2) : 16

          tooltip.style.left = `${left}px`

          window.getComputedStyle(tooltip).opacity

          tooltip.style.opacity = '1'

        }

      }

    })

    tooltipDom && tooltipDom.addEventListener('mouseleave', function() {

      if (tooltip && !tooltip.isHovered) {

        tooltip && (tooltip.style.opacity = '0')

        timer = setTimeout(() => {

          tooltip && document.body.removeChild(tooltip)

          tooltip = null

          timer && clearTimeout(timer)

          timer = null

        }, 500)

      }

    })

  }

}