hotline-web/src/components/TextTooltip/index.vue

<template>
	<el-tooltip
		:content="props.tooltipContent ? props.tooltipContent : props.content"
		:placement="props.placement"
		:disabled="isShow"
		:effect="props.effect"
	>
		<template #content>
			<!-- 此处的默认值先看tooltipContent有没有，没有就给默认content -->
			<slot name="tooltipContent">{{ props.tooltipContent ? props.tooltipContent : props.content }}</slot>
		</template>
		<div class="content" @mouseover="isShowTooltip">
			<span ref="contentRef">
				<!-- 给一个没有写插槽的默认值，兼容纯文本的情况 -->
				<slot name="content">{{ props.content }}</slot>
			</span>
		</div>
	</el-tooltip>
</template>
<script setup lang="ts">
import { ref } from 'vue';
// 使用withDefaults来给props赋默认值
const props = defineProps({
	content: {
		type: String,
		default: '',
	},
	tooltipContent: {
		type: String,
		default: '',
	},
	effect: {
		type: String,
		default: 'light',
	},
	placement: {
		type: String,
		default: 'right',
	},
});
// 使用isShow来控制tooltip是否显示
let isShow = ref<boolean>(true);
// 在span标签上定义一个ref
const contentRef = ref();
const isShowTooltip = function (): void {
	// 计算span标签的offsetWidth与盒子元素的offsetWidth，给isShow赋值
	isShow.value = contentRef.value.parentNode.offsetWidth >= contentRef.value.offsetWidth;
};
</script>
<style>
.content {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>