/**
|
* @author: zhengbolin
|
*
|
* AutoTooltip 组件 - 用于自动判断文本是否溢出，并在溢出时展示工具提示。
|
*
|
* 原理：
|
* 该组件通过检测文本容器的 `scrollWidth` 和 `clientWidth` 来判断文本是否溢出，
|
* 如果溢出，则使用 Arco Design 的 `Tooltip` 组件来展示工具提示。
|
*
|
* 使用文档：
|
* 1. 传入 `text` 属性，组件会判断该文本是否溢出；
|
* 2. 若文本溢出，显示工具提示；若不溢出，直接展示文本；
|
* 3. 在窗口大小变化时自动重新计算文本是否溢出。
|
*
|
*/
|
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue'
|
import { Tooltip } from '@arco-design/web-vue'
|
|
interface AutoTooltipProps {
|
text: string // 要展示的文本内容
|
}
|
|
const AutoTooltip = defineComponent({
|
name: 'AutoTooltip',
|
|
props: {
|
text: {
|
type: String,
|
required: true
|
}
|
},
|
|
setup(props: AutoTooltipProps) {
|
const containerRef = ref<HTMLElement | null>(null) // 引用容器元素
|
const isOverflow = ref(false)
|
|
// 检查文本是否溢出
|
const checkOverflow = () => {
|
if (containerRef.value) {
|
isOverflow.value = containerRef.value.scrollWidth > containerRef.value.clientWidth
|
}
|
}
|
|
// 在组件挂载后进行一次溢出检查，并监听窗口的 resize 事件
|
onMounted(() => {
|
checkOverflow()
|
window.addEventListener('resize', checkOverflow)
|
})
|
|
// 在组件卸载前清除事件监听器
|
onBeforeUnmount(() => {
|
window.removeEventListener('resize', checkOverflow)
|
})
|
|
// 渲染函数
|
return () => (
|
<div
|
ref={containerRef}
|
style={{
|
display: 'inline-block', // 设置容器为行内块级元素
|
maxWidth: '100%', // 最大宽度为 100%
|
whiteSpace: 'nowrap', // 防止文本换行
|
overflow: 'hidden', // 超出的文本隐藏
|
textOverflow: 'ellipsis', // 使用省略号表示溢出的文本
|
}}
|
>
|
{isOverflow.value ? (
|
// 如果溢出，使用 Tooltip 展示溢出的内容
|
<Tooltip content={props.text}>
|
<span>{props.text}</span>
|
</Tooltip>
|
) : (
|
// 否则直接展示文本
|
<span>{props.text}</span>
|
)}
|
</div>
|
)
|
},
|
})
|
|
export default AutoTooltip
|
