【Vue3 Antdv】Ant Design Vue文字溢出鼠标滑上显示tooltip。不溢出，鼠标滑上不显示tooltip

组件封装代码

<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.target
  if (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>