源码(vue3+ts)//directives/ellipsis.tsimporttype{App,Directive,DirectiveBinding}from"vue";让tooltipDom:HTMLElement;constellipsisDirective:Directive={mounted(el:HTMLElement,bindings:DirectiveBinding){bindEvent(el,bindings);},updated(el:HTMLElement,bindings:DirectiveBinding){bindEvent(el,bindings);},unmounted(){removeTooltip();},};functionbindEvent(el:HTMLElement,bindings:DirectiveBinding){//首先移除最后绑定的事件el.removeEventListener("mouseenter",handleMouseEnter);el.removeEventListener("mouseleave",removeTooltip);if(bindings.value===false){return;}//设置当前元素超出隐藏el.style.overflow="hidden";el.style.textOverflow="ellipsis";el.style.whiteSpace="nowrap";//如果超过则绑定鼠标进出事件if(el.scrollWidth>el.offsetWidth){el.addEventListener("mouseenter",handleMouseEnter);//鼠标移出移除提示信息el.addEventListener("mouseleave",removeTooltip);}}/**Mouseinevent*/functionhandleMouseEnter(e){if(!tooltipDom){//创建浮层元素tooltipDom=document.createElement("div");//将浮层插入bodydocument.body.appendChild(tooltipDom);}constmaxWidth=600;letcssText=`max-width:${maxWidth}px；溢出：自动；位置：固定；背景：#262627；颜色：#fff；边框半径：4px；行高：20px；吴：10px；显示：块；字体大小：12px；z-指数：99999；分词：break-all；`;//根据mouse-in位置判断浮层是在左边还是右边，避免遮挡clientX}px;`;}else{cssText+=`left:${e.clientX+20}px;`;}//根据鼠标位置判断浮层在上方还是下方，避免遮挡if(window.innerHeight-e.clientY<600){cssText+=`bottom:${window.innerHeight-e.clientY}像素；`;}else{cssText+=`top:${e.clientY}px;`;}tooltipDom.style.cssText=cssText;//浮层文本tooltipDom.innerHTML=e.currentTarget.innerText;}functionremoveTooltip(){//隐藏浮层if(tooltipDom){tooltipDom.style.display="none";}}exportfunctionsetupEllipsisDirective(app:App){app.directive("ellipsis",ellipsisDirective);}源码(vue2+js）从"vue"导入Vue;lettooltipDom;Vue.directive("ellipsis",{inserted(el,绑定){bindEvent（el，绑定）；},componentUpdated(el,绑定){bindEvent(el,绑定);},解除绑定(){removeTooltip();},});functionbindEvent(el,bindings){//首先移动除了最后一个绑定事件el.removeEventListener("mouseenter",handleMouseEnter);el.removeEventListener("mouseleave",removeTooltip);如果(bindings.value===false){返回;}//设置当前元素超出Hideel.style.overflow="hidden";el.style.textOverflow="省略号";el.style.whiteSpace="nowrap";//如果超过，则绑定鼠标进出事件if(el.scrollWidth>el.offsetWidth){el.addEventListener("mouseenter",handleMouseEnter);//鼠标移出会移除提示信息el.addEventListener("mouseleave",removeTooltip);}}/**Mouseinevent*/functionhandleMouseEnter(e){if(!tooltipDom){//创建浮层元素tooltipDom=document.createElement("div");//将浮动层插入正文document.body.appendChild(tooltipDom);}常量最大宽度=600;让cssText=`最大宽度：${maxWidth}px；溢出：自动；位置：固定；背景：#262627；颜色：#fff；边界半径：4px；行高：20px；填充：10px；尺寸：12px；z-指数：99999；分词：break-all；`;//根据鼠标的位置判断浮层是在左边还是右边，避免遮挡clientX}px;`;}else{cssText+=`left:${e.clientX+20}px;`;}//根据鼠标位置判断浮层是在上方还是下方避免遮挡if(window.innerHeight-e.clientY<600){cssText+=`bottom:${window.innerHeight-e.clientY像素；`；}else{cssText+=`top:${e.clientY}px;`;}tooltipDom.style.cssText=cssText;//浮层中的文字tooltipDom.innerHTML=e.currentTarget.innerText;}functionremoveTooltip(){//隐藏浮层if(tooltipDom){tooltipDom.style.display="none";}}