实现一个放入一个带有指定宽度的文本内容，组件自动根据放入的元素是否被自身文字所溢出，从而决定是否需要启用element的textPooper组件。

思路分析

1. 为不影响文字内容样式，组件的宽高等于内容的宽高。
2. 需要准确获取到当前组件的元素，不能使用docment的获取元素的方法，因为这样很难设定唯一值，使用vue的ref属性来进行获取当前组件元素。
3. 使用插槽的方式将父组件传递过来的文字元素进行渲染。
4. 因文字元素在组件中，且只有一个子元素，可以通过ref获取到当前组件的元素，再通过获取到的元素取出相应的文字元素进行计算是否溢出。

实现过程

1. 设置组件元素的基本结构、ref名和基本样式

   <template>
    <div ref="tooltipRef" class="text_pooper">
       <el-tooltip
          :popper-class="props.popperClass"
          :content="props.popperContent"
          placement="top"
          :hide-after="200"
          :disabled="!isOverflow"
        >
          <slot name="text"></slot>
       </el-tooltip>
    </div>
   </template>
   

   .text_pooper {
      width: fit-content;
      height: fit-content;
    }
   

2. 在js中声明ref,props和必要的一些参数

   <script setup>
   import { nextTick, onMounted, ref } from 'vue'
   const props = defineProps({
     /**
      * 悬浮显示的内容
      */
     popperContent: String,
     /**
      * 悬浮显示的css类名，用于自定义样式
      */
     popperClass: {
       type: String,
       default: 'tooltip_defalut_css'
     }
   })
   /**
    * 获取tooltip的ref，作用是找到当前父类下的首个子元素，因该组件的功能就是用于文字且只有一个元素
    */
   const tooltipRef = ref(null)
   /**
    * 是否溢出
    */
   const isOverflow = ref(false)
   </script>
   

3. 进行文字是否溢出的计算

   onMounted(() => {
     // 利用微队列确保元素render函数已经渲染完成
     nextTick(() => {
     //当传入要提示的内容时才进行计算是否溢出，否则不进行计算
     //因为如果传入的内容为空，则不需要显示tooltip，所以不需要进行计算
        if (props.popperContent && typeof props.popperContent === 'string' && tooltipRef.value) {
             let childrenDom = tooltipRef.value.children[0]
             if (childrenDom && childrenDom.clientWidth < childrenDom.scrollWidth) {
             isOverflow.value = true
                 } else {
                   isOverflow.value = false
                 }
           }
        })
     })
   

4. 最后是悬浮弹出的样式：重点1：悬浮弹窗样式不能放在scoped中 ；重点2：要在自定义的悬浮弹窗类名前加上.el-popper 。如果发现样式不生效，可以通过设置element的el-tooltip组件的消失时间，从而检查悬浮弹窗的类名是否正确。

   <!-- 下方是自定义tooltip的样式,如果嫌麻烦,自定义的悬浮弹窗的样式可以放在父组件中，根据使用场景设置好唯一类名，避免全局污染  -->
   <!-- 要记得开头加上.el-popper -->
   <style>
   .el-popper.tooltip_defalut_css {
     border: 1px solid #999;
     border: 10px;
     padding: 10px;
     max-width: 200px;
     font-size: 16px;
     text-align: center;
     color: pink !important;
     /* color: yellow; */
   }
   /* 下方是去除三角箭头的代码 */
   .el-popper.tooltip_defalut_css .el-popper__arrow::before {
     border-bottom-color: #999;
     border-right-color: #999;
   }
   /* .el-popper.tooltip_defalut_css .el-popper__arrow {
     border-bottom-color: red !important;
    } */
   </style>