溢出隐藏组件

<template>
	<div class="text-container rel" @mouseenter="handleMouseEnter">
		<div ref="textContainer" class="overflow-hidden hidden-text wspw" :style="{ '-webkit-line-clamp': clampLines }">
			{{ text }}
		</div>
		<div ref="hiddenText" class="hidden-text wspw">{{ text }}</div>
		<el-tooltip ref="tooltip" :content="text" placement="top" :disabled="!showTooltip" effect="light">
			<template #content>
				<span class="wspw">{{ text }}</span>
			</template>
			<div class="overflow-hidden" :style="{ '-webkit-line-clamp': clampLines }">
				{{ text }}
			</div>
		</el-tooltip>
	</div>
</template>

<script>
export default {
	name: 'TextOverFlow',
	props: {
		text: {
			type: String,
			default: ''
		},
		clampLines: {
			// 控制溢出隐藏的行数
			type: Number,
			default: 1
		}
	},
	data() {
		return {
			showTooltip: false // 控制是否显示tooltip
		}
	},
	mounted() {
		this.updateTooltipVisibility()
	},
	methods: {
		handleMouseEnter() {
			this.updateTooltipVisibility()
		},
		updateTooltipVisibility() {
			const textContainerHeight = this.$refs.textContainer.clientHeight
			const hiddenTextHeight = this.$refs.hiddenText.clientHeight

			this.showTooltip = hiddenTextHeight > textContainerHeight
		}
	}
}
</script>

<style scoped lang="scss">
.overflow-hidden {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hidden-text {
	position: absolute;
	width: 100%; /* 使用与目标元素相同的宽度 */
	visibility: hidden;
}

.wspw {
	white-space: pre-wrap; /* 保留换行符 */
}
</style>