【前端开发】常见自定义指令tips

Vue.directive('tip', {

  bind(el, binding) {

    el.style.position = 'relative'

    // icon插入

    const a = `<i type="primary" class="el-icon-question question-style-table"></i>`

    const objE = document.createElement('div')

    objE.innerHTML = a

    const iconElementArr: any = objE.childNodes

    const iconElement = iconElementArr[0]

    iconElement.style.color = '#c0c4cc'

    iconElement.style.position = 'absolute'

    iconElement.style.right = '-16px'

    iconElement.style.zIndex = 999999999

    if (binding.value.tipsType === 'table') {

      iconElement.style.top = '2px'

    } else {

      iconElement.style.top = '8px'

    }

    el.appendChild(iconElement)

    // hover提示插入

    const tip = document.createElement('span')

    tip.className = 'tooltip'

    // 提示框样式

    const css: any = {

      display: 'none',

      position: 'fixed',

      width: '300px',

      padding: '5px 10px',

      borderRadius: '4px',

      fontSize: '12px',

      color: '#333333',

      backgroundColor: 'white',

      lineHeight: 1.4,

      textAlign: 'left',

      zIndex: 9999999999,

      border: '1px solid #999'

    }

    const pos: any = setPosition(tip, binding.value.position, binding.value.bgColor)

    for (const item in pos) {

      css[item] = pos[item]

    }

    tip.innerHTML = binding.value.content

    setCss(tip, css)

    iconElement.addEventListener('mouseover', function(e: any) {

      console.log(e)

      if (binding.value.position === 'left') {

        tip.style.left = `${e.clientX + 16}px`

        tip.style.top = `${e.clientY - 6}px`

      } else {

        tip.style.left = `${e.clientX + 6}px`

        tip.style.top = `${e.clientY - 10}px`

      }

      tip.style.display = 'block'

    })

    iconElement.addEventListener('mouseout', function() {

      tip.style.display = 'none'

    })

    document.body.appendChild(tip)

  }

})