通过自定义指令实现 element-ui的tooltip组件 文本长度超出显示不超出不显示

html部分

  

    
      
1111这是测试的文本内容，没有实际意义。
    

    
      
2222这是测试的文本内容，没有实际意义。
    
  

css部分 第一个是超出出现 ... 第二个是不超出的

注意：超出出现... 需要用这种写法

.text{
  display: inline-block;
  width: 100px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:1;
}
.text2{
  width: 500px;
}

自定义指令

Vue.directive('showByContent', {
  
  inserted(el, binding) {
    // 实际高度 小于 1.5倍显示高度 （1.5倍为边界值的兼容）
    if(el.scrollHeight < el.offsetHeight * 1.5){
      // 隐藏  tooltip
      let openDelay = el.__vue__ && el.__vue__.openDelay || 10
      el.addEventListener('mouseenter', () => {
        let ariaDescribedby = el.attributes['aria-describedby'].value
        // 鼠标移入之后延迟10ms把显示出来的tooltip的dom 给隐藏起来，tooltip的节点id为当前dom的aria-describedby值  通过这个关系查找的指定的框
        setTimeout(res=>{
          if(!document.getElementById(ariaDescribedby)){ return }
          document.getElementById(ariaDescribedby).style.display = 'none'
        },openDelay + 10)
        
      }) 
    }
  },
  
})

有其他更好的方法，欢迎分享。

有错误欢迎指正！