Element UI里的文字提示组件Tooltip如何鼠标离开立即消失

Tooltip组件默认的特性是鼠标离开延时、淡出消失,在多个Tooltip之间切换时给用户的体验很不好,如果希望Tooltip在鼠标离开后立即消失,暂时能想到的有效办法是创建Vue的自定义指令:

// Tooltip鼠标离开立即消失的自定义指令
Vue.directive('tooltipHide', {
  // 当绑定元素插入到 DOM 中
  inserted (el, binding) {
    const tooltipId = el.attributes['aria-describedby'].nodeValue
    el.immediateHide = () => {
      const tooltipEl = document.getElementById(tooltipId)
      if (tooltipEl) tooltipEl.style.display = 'none'
    }
    el.addEventListener('mouseleave', el.immediateHide)
  }
})

  

你可能感兴趣的:(ui,vue.js,前端)