在AntDesign中自动判断文本是否过长，自动控制是否使用tooltip

在AntDesign中自动判断文本是否过长，自动控制是否使用tooltip

1. 如果文本过长，显示…省略号，并且鼠标放置在上面显示tooltip文本提示
2. 如果文本未过长，鼠标放置不显示tooltip

本方法适用于一切v-for展示的情况进行自动判断
例如：a-table中文字过长自动判断是否使用a-tooltip，或者a-timeline-item中自动判断是否文本超出长度，如果超出自动使用a-tooltip，未超出则不使用a-tooltip。

本人以在a-timeline-item中v-for循环为例，自动判断是否超长，以及自动使用a-tooltip示例。以下为vue3代码作为示例，react以及vue2实现逻辑相同。

<a-timeline>
          <a-timeline-item v-for="(item, index) in infoLine" :key="index" :color="filter(item.status)">
          
            <div class="table-ellipsis">
              <span ref="spanDoms" class="disNone">{{ item.info }}</span>
              <span v-if="isShowHoverComputed(index)" class="text-ellipsis">
                {{ item.info }}
              </span>
              <a-tooltip placement="topLeft" :title="item.info" v-else>
                <span class="text-ellipsis">
                  {{ item.info }}
                </span>
              </a-tooltip>
            </div>
            
          </a-timeline-item>
</a-timeline>
const infoLine=[
	{
		status:'1',
		info:'进度条1'
	},
	{
		status:'2',
		info:'进度条2'
	}
]

const spanDoms = ref()

let isShowHoverComputed = (index) => {
  if (spanDoms.value) {
    let parentWidth = spanDoms.value[index]?.parentNode?.offsetHeight
    let contentWidth = spanDoms.value[index]?.offsetHeight
    // console.log('打印高度1', Number(parentWidth));
    // console.log('打印高度2', Number(contentWidth));
    // console.log('是否显示tooltip', Number(parentWidth) == Number(contentWidth));
    return Number(parentWidth) == Number(contentWidth)
  }
  return true
}


.table-ellipsis {
  position: relative;

  .text-ellipsis {
    max-width: 200px;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .disNone {
    position: absolute;
    top: -10000px;
    z-index: -1;
  }
}

代码解释：

1. 在v-for循环中，ref="spanDoms"这个dom元素设置disNone的class属性，让这个spandoms的标签不可见，这个dom标签里面放入我们要显示在页面上并且可能会超出长度的文本
2. 拿到这个spanDoms标签的高度以及这个标签的父元素高度，进行对比，如果父元素高度等于这个spanDoms标签的高度的话，就证明里面的文本元素的宽度并没有超出父元素高度，此时我们isShowHoverComputed(index)这个方法的返回值为true，不使用a-tooltip进行包裹。
   （注意）spanDoms在vue3中是一个数组，因为spanDoms是被v-for循环包裹，需要我们拿到当前v-for循环的index值，然后通过index值去spanDoms中取出当前遍历的相应的元素的dom（spanDoms.value[index]）。在vue2和react中请使用相应框架的方法拿到相应for循环中的dom元素