文字溢出组件封装,结合element的tooltip

<template>
	<div class="content-tooltip">
		<el-tooltip placement="top" :disabled="!isShowTooltip" effect="light">
			<template #content>
				<div class="all-content">{
  
  {props.text}}</div>
			</template>
			<div class="ellipsis-text" @mouseenter="visibilityChange($event)">{
  
  { props.text }}</div>
		</el-tooltip>
	</div>
</template>

<script setup>
import { defineProps, ref } from 'vue';

const props = defineProps({
	text: { type: String, required: '' },
});

const isShowTooltip = ref(false);
// 判断是否显示 溢出的文本 el-tooltip
const visibilityChange = (event) => {
	const ev = event.target;
	const evWeight = ev.scrollWidth;
	const contentWeight = ev.clientWidth;
	console.log(ev, evWeight, contentWeight, 1);
	if (evWeight > contentWeight) {
		// 实际宽度 > 可视宽度  文字溢出
		isShowTooltip.value = true;
	} else {
		// 否则为不溢出
		isShowTooltip.value = false;
	}
};
</script>

<style scoped>
.ellipsis-text {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
}
.all-content {
	max-width: 600px;
	font-size: 14px;
	white-space: pre-wrap;
}
.content-tooltip {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis; /* 溢出显示省略号 */
}
</style>