Vue 实现智能检测文字是否溢出，溢出显示省略号，鼠标悬浮显示全部【附封装组件完整代码+详细注释+粘贴即食】

一、场景需求

在项目中，经常会遇到文本内容超出容器的情况。为了提高用户体验，我希望在文字溢出时显示悬浮提示，未溢出时则不显示。

二、效果演示

三、实现原理

DOM宽度对比法：通过比较元素的scrollWidth（实际内容宽度）和clientWidth（可视区域宽度）判断是否溢出
动态绑定Tooltip：利用el-tooltip的disabled属性按需激活提示
响应式监听：结合Vue的$nextTick和watch实现动态数据更新后的自动检测

四、完整代码

<template>
  <div class="box">
    <div v-for="(item,i) in list" :key="i" class="items">
      <!-- 添加 el-tooltip 并绑定判断逻辑 -->
      <el-tooltip 
        :disabled="!shouldShowTooltip[i]" 
        :content="`${item.name}：${item.score}`" 
        placement="top">
        <span 
          :ref="el => { nameElements[i] = el }"
          class="name"
          @mouseenter="checkOverflow(i)">
          {
   
   {
   
    item.name }}：{
   
   {
   
    item.score }}
        </span>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
export default {
   
   
  data() {
   
   
    return {
   
   
      list: [
        {
   
   
          name: '我是测试名称1',
          score: '90'
        },
        {
   
   
          name: '我是测试我是测试我是测试我是测试',
          score: '92'
        },
        {
   
   
          name: '雪芽',
          score: '99'
        },
        {
   
   
          name: '果粒橙果粒橙果粒橙果粒橙果粒橙',
          score: '100'
        }
      ],
      shouldShowTooltip: [], // 存储是否需要显示tooltip
      nameElements: []       // 存储DOM引用
    }
  },
  watch: {
   
   
    list() {
   
   
      this.$nextTick(() => {
   
   
        this.list.forEach((_, i)