当前位置:

文字出部分以省略号(...)代替,并显示tooltip,未出不显示

访客 2024-04-24 240 0

效果如下

思路

获取元素的实际宽度,根据实际宽度和最大宽度比较,超出最大宽度则显示tooltip

代码(只展示关键部分,外层是table)

//外层是table表格<div@mouseenter="e=>showToolTip(e,row)"><span>标识</span><kui-tooltipv-if="row.info.show":content="row.info.txt"><span>{{row.info.txt}}</span></kui-tooltip><spanv-else>{{row.info.txt}}</span></div>//鼠标悬浮在绑定事件的元素上时判断当前文字是否超出最大宽度,超出则显示tooltipshowToolTip(e,row){//98可自定义,为文字最大宽度,超出这个宽度显示tooltipconstshowToolTip=e.target.lastChild.offsetWidth>98;//改变列表数据的show字段,show为true时展示tooltip,false为隐藏tooltipthis.data.forEach(item=>{if(item.fingerPrint===row.fingerPrint&&showToolTip){item.resourceInfo.show=true;}else{item.resourceInfo.show=false;}});}

设置省略号可用css3实现

width:98px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;

发表评论

  • 评论列表
还没有人评论,快来抢沙发吧~