一、背景介绍：

基于Vue3 + Element Plus的项目，多处出现展示超长文本，为了页面美观，笔者决定封装成Text组件，实现“文本超出长度显示省略号，鼠标移上悬浮展示全部内容”的功能。

二、封装的Text组件

<template><el-tooltipeffect="dark":content="text":disabled="isShowTooltip"><divclass="outer":style="style"@mouseover="onMouseOver()"><span ref="innerText">{{ content }}</span></div></el-tooltip>
</template><script setup lang="ts">import { ref, watchEffect } from 'vue'const props = defineProps({text: {type: String,default: ''},style: {type: Object,default: {}}})const { text, style } = propsconst innerText = ref<any>(null)const isShowTooltip = ref<boolean>(false)const onMouseOver = () => {const parentWidth = innerText.value.parentNode.offsetWidth // 获取元素父级可视宽度const contentWidth = innerText.value.offsetWidth // 获取元素可视宽度isShowTooltip.value = contentWidth <= parentWidth}const content = ref<string>('')watchEffect(() => {content.value = props.text})
</script><style lang="scss" scoped>
.outer {width: 100%;text-align: left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;
}
</style>

三、Text组件的使用

<template><div><Text:text="content":style="{marginLeft: '6px',fontSize: '14px'}"></Text></div>
</template><script setup lang="ts">
import { ref } from 'vue'
import Text from '@/components/Text.vue' // Text.vue在项目中的路径
const content = ref<string>('你好')
</script><style>
</style>