el-text 超出省略 动态显示tooltip

场景

当我们需要展示一个文本时,常常会遇到文本长度不等问题,通过el-text的line-clamp=" " 属性,可设置最大行数,超出则省略号展示。那么如何将el-text展示省略号时和el-tooltip结合使用呢？

• 简单粗暴的方法就是统一显示tooltip，不管是否有显示省略号，但是这样显然不太友好。
• 最好的办法就是在显示省略号的时候，才显示tooltip。

方案一

根据文本长度，如果实际文字的个数有超过这个最大个数，则显示tooltip。但是这个问题也很严重，首先英文和中文的长度是不一样的，而且还有可能有特殊符号，而且如果屏幕有了缩放，都会出现问题，所以这种方案直接pass。

方案二

通过判断当前文本的offsetHeight和scrollHeight，来确定是否显示tooltip。scrollHeight是文本实际的高度不会因为显示了省略号而变化。

<el-tooltip popper-class="cardItem_tooltip" placement="bottom" v-if="cardItem.aShowTooltip">
    <template #content>
    	<el-text>{{ cardItem.a }}</el-text>
    </template>
    <el-text class="aText" line-clamp="3" :id="cardItem.id">{{ cardItem.a }}</el-text>
</el-tooltip>
<el-text v-else line-clamp="3" :id="cardItem.id" class="aText">{{ cardItem.a }}</el-text>

onMounted(() => {
    countRows()
  	// 监听浏览器窗口大小变化 
    window.addEventListener('resize', () => {
        countRows()
    })
})

const countRows = () => {
    const aText: any = document.querySelectorAll('.aText')
    aText.forEach((item: { getAttribute: (arg0: string) => any; offsetWidth: number; scrollWidth: number; offsetHeight: number; scrollHeight: number }) => {
        let id = item.getAttribute('id')
        // 比较 dom.offsetHeight < dom.scrollHeight
        if (props.cardItem.id == id){
           props.cardItem.aShowTooltip = item.offsetHeight < item.scrollHeight
        }
        
    })
}