效果如下图在线预览APIsEllipsis参数说明类型默认值maxWidth文本最大宽度单位pxstring | number‘100%’tooltipMaxWidth弹出提示最大宽度单位px默认为文本宽度 24string | numberundefinedline最大行数numberundefinedexpand是否启用点击文本展开全部booleanfalsetooltip是否启用文本提示框可自定义设置弹出提示内容boolean | slottrue更多属性请参考 TooltipSlots名称说明类型tooltip自定义弹出提示内容v-slot:tooltipdefault自定义展示内容v-slot:defaultEvents名称说明类型expandChange点击文本展开收起时的回调(expand: boolean) void创建文本省略组件Ellipsis.vue其中引入使用了以下组件和工具函数Vue3文字提示Tooltip监听DOM尺寸 useResizeObserverscript setup langtsimport{ref,computed,watch,onMounted}fromvueimportTooltipfromcomponents/tooltipimport{useResizeObserver}fromcomponents/utilsexportinterfaceProps{maxWidth?:string|number// 文本最大宽度单位 pxtooltipMaxWidth?:string|number// 弹出提示最大宽度单位 px默认为 文本宽度 24line?:number// 最大行数expand?:boolean// 是否启用点击文本展开全部tooltip?:boolean// 是否启用文本提示框可自定义设置弹出提示内容 boolean | slot}constpropswithDefaults(definePropsProps(),{maxWidth:100%,tooltipMaxWidth:undefined,line:undefined,expand:false,tooltip:true})consttooltipRefref()// tooltip 组件引用constobserveScrollref()// tooltip 组件暴露的 observeScroll 函数constshowTooltipref(false)// 是否显示提示框constshowExpandref(false)// 是否可以启用点击展开constexpandedref(false)// 启用点击展开时是否展开constellipsisRefref()// 文本 DOM 引用constcomputedTooltipMaxWidthref()// 计算后的弹出提示最大宽度constellipsisLineref()// 行数conststopObservationref(false)constemitdefineEmits([expandChange])consttextMaxWidthcomputed((){if(typeofprops.maxWidthnumber){return${props.maxWidth}px}returnprops.maxWidth})watch(()props.line,(to){if(to!undefined){ellipsisLine.valueto}else{ellipsisLine.valuenone}},{immediate:true})watch([()props.maxWidth,()props.line,()props.tooltip],(){updateTooltipShow()},{flush:post})useResizeObserver(ellipsisRef,(){if(stopObservation.value){setTimeout((){stopObservation.valuefalse})}else{updateTooltipShow()}})onMounted((){updateTooltipShow()observeScroll.valuetooltipRef.value.observeScroll})functionupdateTooltipShow(){constscrollWidthellipsisRef.value.scrollWidthconstscrollHeightellipsisRef.value.scrollHeightconstclientWidthellipsisRef.value.clientWidthconstclientHeightellipsisRef.value.clientHeightconstoffsetWidthellipsisRef.value.offsetWidth computedTooltipMaxWidth.value${offsetWidth24}pxif(scrollWidthclientWidth||scrollHeightclientHeight){if(props.expand){showExpand.valuetrue}if(props.tooltip){showTooltip.valuetrue}}else{if(props.expand){showExpand.valuefalse}if(props.tooltip){showTooltip.valuefalse}}}functiononExpand(){stopObservation.valuetrueif(ellipsisLine.value!none){ellipsisLine.valuenoneif(props.tooltipshowTooltip.value){expanded.valuetruetooltipRef.value.hide()}emit(expandChange,true)}else{ellipsisLine.valueprops.line??noneif(props.tooltip!showTooltip.value){expanded.valuefalseshowTooltip.valuetruetooltipRef.value.show()}emit(expandChange,false)}}functiononAnimationEnd(){if(expanded.value){showTooltip.valuefalse}}defineExpose({observeScroll})/scripttemplateTooltip reftooltipRef:stylemax-width: ${textMaxWidth}:max-widthcomputedTooltipMaxWidth:content-style{ maxWidth: textMaxWidth }:tooltip-style{ padding: 8px 12px }animationendonAnimationEndtemplate #tooltipslot v-ifshowTooltipnametooltipslot/slot/slot/templatediv refellipsisRefclassellipsis-container:class[line ? ellipsis-line : not-ellipsis-line, { ellipsis-cursor-pointer: showExpand }]:style--ellipsis-max-width: ${textMaxWidth}; --ellipsis-line: ${ellipsisLine};clickshowExpand ? onExpand() : () falseslot/slot/div/Tooltip/templatestyle langlessscoped.ellipsis-container{overflow:hidden;cursor:text;max-width:var(--ellipsis-max-width);}.ellipsis-line{display:-webkit-inline-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--ellipsis-line);}.not-ellipsis-line{display:inline-block;vertical-align:bottom;white-space:nowrap;text-overflow:ellipsis;}.ellipsis-cursor-pointer{cursor:pointer;}/style在要使用的页面引入script setup langtsimportEllipsisfrom./Ellipsis.vuefunctionexpandChange(open:boolean){console.log(open,open)}/scripttemplatedivh1{{$route.name}}{{$route.meta.title}}/h1h2classmt30 mb10基本使用/h2Ellipsis:max-width240住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪/Ellipsish2classmt30 mb10多行省略/h2Ellipsis:line2电灯熄灭 物换星移 泥牛入海br/黑暗好像 一颗巨石 按在胸口br/独脚大盗 百万富翁 摸爬滚打br/黑暗好像 一颗巨石 按在胸口/Ellipsish2classmt30 mb10点击展开/h2Ellipsis expand:line2expandChangeexpandChange电灯熄灭 物换星移 泥牛入海br/黑暗好像 一颗巨石 按在胸口br/独脚大盗 百万富翁 摸爬滚打br/黑暗好像 一颗巨石 按在胸口/Ellipsish2classmt30 mb10定制 Tooltip 内容/h2Ellipsis:max-width240住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪template #tooltipdiv styletext-align: center《秦皇岛》br/住在我心里孤独的br/孤独的海怪 痛苦之王br/开始厌倦 深海的光 停滞的海浪/div/template/Ellipsish2classmt30 mb10自定义 Tooltip 样式/h2Ellipsis:max-width240bg-color#4096ff:tooltip-style{padding:12px 16px,borderRadius:12px,fontSize:16px,backgroundColor:#4096ff}住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪/Ellipsish2classmt30 mb10自定义过渡动画时间/h2Ellipsis:max-width240:transition-duration300住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪/Ellipsish2classmt30 mb10不同的触发方式/h2SpaceEllipsis:max-width240Hover Me 住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪/EllipsisEllipsis:max-width240triggerclickClick Me 住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪/Ellipsis/Spaceh2classmt30 mb10延迟显示隐藏/h2SpaceEllipsis:max-width240:show-delay300:hide-delay300Delay 300ms 住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪/EllipsisEllipsis:max-width240:show-delay500:hide-delay500Delay 500ms 住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪/Ellipsis/Spaceh2classmt30 mb10隐藏箭头/h2Ellipsis:max-width240:arrowfalseHide Arrow 住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪/Ellipsis/div/template
