hongze_fsms_web/src/directives/modules/overflow-tooltip.js

// 长度溢出显示ToolTip 请绑定的标签元素包裹住 element-plus的el-tooltip。
/**
 * binding.value 为长度溢出的元素的css选择器，没有请设置
 */
import { ElMessage } from 'element-plus'

let mainElement 
let tooltipNode
export const overflowTooltip={
  created(el,binding,vnode) {
    try {
      let {value} = binding
      tooltipNode = vnode.children.find((childrenCmpt) => childrenCmpt.component?.type.name == 'ElTooltip')
      setTimeout(()=>{
        mainElement = el.querySelector(value)
        if(!mainElement){
          throw new Error('找不到指定css选择器的元素')
        }
        if(mainElement?.scrollWidth > mainElement?.clientWidth){
          // 超出
          tooltipNode.component.props.disabled=false
        }else{
          tooltipNode.component.props.disabled=true
        }
      },0)
      if(!value){
        throw new Error('请设置长度溢出的元素的css选择器')
      }
      // console.log(tooltipNode);
      if(!tooltipNode){
        throw new Error('找不到el-tooltip组件')
      }
    } catch (error) {
      ElMessage.error(error.message)
      // console.log(error.message);
    }
  },
  updated() {
    if(mainElement?.scrollWidth > mainElement?.clientWidth){
      // 超出
      tooltipNode.component.props.disabled=false
    }else{
      tooltipNode.component.props.disabled=true
    }
  },
}