天津市工程建设公众信息网官网_回到明朝当王爷txt下载_数字营销策划_免费的短视频app大全下载

组件代码： 

<template><a-tooltip v-if="isOverflowing" :title="text"><span ref="textRef" class="tooltip-text">{{ text }}</span></a-tooltip><span v-else ref="textRef">{{ text }}</span>
</template><script setup>
import { ref, onMounted } from 'vue';const props = defineProps({text: {type: String,required: true,},maxWidth: {type: Number,default: 100, // 默认最大宽度},
});const isOverflowing = ref(false);
const textRef = ref(null);onMounted(() => {if (textRef.value) {const computedStyle = getComputedStyle(textRef.value);const padding = parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);const totalMaxWidth = props.maxWidth - padding; // 考虑 padding// 创建临时元素以测量文本宽度const tempElement = document.createElement('span');// 复制样式tempElement.style.font = computedStyle.font; // 复制字体tempElement.style.visibility = 'hidden';tempElement.style.whiteSpace = 'nowrap';tempElement.style.position = 'absolute'; // 确保不占空间tempElement.textContent = props.text;// 将元素添加到文档中document.body.appendChild(tempElement);// 判断文本是否超出最大宽度isOverflowing.value = tempElement.scrollWidth > totalMaxWidth;// 移除临时元素document.body.removeChild(tempElement);}
});
</script><style>
.tooltip-text {display: inline-block; /* 使文本能正确测量 */max-width: 100%;      /* 允许文本最大宽度 */white-space: nowrap;   /* 不换行 */overflow: hidden;      /* 隐藏超出部分 */text-overflow: ellipsis; /* 使用省略号 */cursor: pointer;       /* 鼠标悬停时显示手指光标 */
}
</style>

组件使用：

<Tooltip :text="’要显示的文本‘" :maxWidth="65" />
/**
* maxWidth,这个文本容器的最大宽度，超出这个宽度就超出隐藏显示省略号，并开启文本提示
*/