组件封装代码

<template><a-tooltip @mouseenter="showToolTip" v-bind="getBindValue"><template #title>{{ props.title }}</template><slot><span>{{ props.title }}</span></slot></a-tooltip>
</template><script setup>
import {defineProps,computed,useAttrs} from "vue";const props = defineProps({title:{ //提示标题type:String,default:''}
})/** 获取绑定属性 */
const getBindValue = computed(() => {const delArr = ['title']  //需要过滤的属性const attrs = useAttrs()const obj = { ...attrs, ...props }for (const key in obj) {if (delArr.indexOf(key) !== -1) {delete obj[key]}}return obj
})/** 不溢出不显示tooltip */
const showToolTip = (e) => {const {clientWidth,scrollWidth} = e.targetif (clientWidth >= scrollWidth) {e.target.style.pointerEvents = "none"; // 阻止鼠标事件}
}
</script><style scoped></style>

使用

<template><ToolTip :title="text" placement="topLeft"><span class="text">{{text}}</span></ToolTip>
</template><style>
span.text{display: inline-block;width: 100%;/* 这是单行溢出显示...的样式 */overflow: hidden;text-overflow: ellipsis;white-space:nowrap;
}
</style>