Vue.js 中的文本溢出处理与工具提示组件：`TextEllipsisTooltip`-EW帮帮网

在开发 Web 应用时，文本溢出是一个常见的问题。当文本内容超出容器宽度或高度时，如何优雅地处理溢出并提供完整的文本信息，是提升用户体验的关键。本文将介绍如何封装一个 Vue.js 组件 TextEllipsisTooltip，它能够处理单行和多行文本溢出，并在鼠标悬停时显示完整的文本内容。

一、组件功能概述

TextEllipsisTooltip 组件的主要功能包括：

单行和多行文本溢出处理：支持通过 maxLines 属性控制文本显示的最大行数。
动态内容支持：当文本内容动态更新时，组件会自动检测是否溢出。
响应式设计：支持窗口大小调整，自动重新检测文本是否溢出。
工具提示显示：当文本溢出时，鼠标悬停会显示完整的文本内容。
可配置性：通过 props 自定义最大宽度、最大行数、工具提示位置等。

二、组件实现思路

1. 组件结构

组件包含以下部分：

文本容器：用于显示文本，并检测文本是否溢出。
工具提示触发器：用于在鼠标悬停时显示工具提示。
工具提示组件：使用 Element UI 的 el-tooltip 或其他类似组件。

2. 检测文本溢出

通过以下方式检测文本是否溢出：

单行文本：比较 scrollWidth 和 clientWidth。
多行文本：使用 CSS 的 line-clamp 属性，并比较 scrollHeight 和 clientHeight。

3. 工具提示显示

通过鼠标事件控制工具提示的显示和隐藏：

当鼠标悬停时，显示工具提示。
当鼠标移出时，隐藏工具提示。

4. 响应式设计

监听窗口大小调整事件，重新检测文本是否溢出。

三、组件代码实现

以下是 TextEllipsisTooltip 组件的完整代码实现：

1. 组件模板

<template>
  <div
    ref="textContainer"
    class="text-ellipsis-tooltip"
    :class="{ 'has-overflow': hasOverflow }"
    :style="{ maxWidth, maxHeight }"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
  >
    <div ref="textContent" class="text-content">
      {{ text }}
    </div>
    <el-tooltip
      v-if="hasOverflow && showTooltip"
      :content="text"
      :placement="tooltipPlacement"
      :show-after="showAfter"
      :hide-after="0"
    >
      <div class="tooltip-trigger" />
    </el-tooltip>
  </div>
</template>

2. 组件脚本

<script>
export default {
  name: 'TextEllipsisTooltip',
  props: {
    text: {
      type: String,
      default: ''
    },
    maxWidth: {
      type: [String, Number],
      default: '100%'
    },
    maxHeight: {
      type: [String, Number],
      default: 'auto'
    },
    maxLines: {
      type: Number,
      default: 1
    },
    tooltipPlacement: {
      type: String,
      default: 'top'
    },
    showAfter: {
      type: Number,
      default: 200
    }
  },
  data() {
    return {
      hasOverflow: false,
      showTooltip: false
    };
  },
  watch: {
    text() {
      this.$nextTick(() => {
        this.checkOverflow();
      });
    },
    maxLines() {
      this.$nextTick(() => {
        this.checkOverflow();
      });
    }
  },
  mounted() {
    this.checkOverflow();
    window.addEventListener('resize', this.checkOverflow);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkOverflow);
  },
  methods: {
    checkOverflow() {
      this.$nextTick(() => {
        const textElement = this.$refs.textContent;
        const container = this.$refs.textContainer;

        if (textElement && container) {
          // 检测单行溢出
          const isSingleLineOverflow = textElement.scrollWidth > container.clientWidth;

          // 检测多行溢出
          const isMultiLineOverflow =
            this.maxLines > 1 &&
            textElement.scrollHeight > container.clientHeight;

          this.hasOverflow = isSingleLineOverflow || isMultiLineOverflow;
        }
      });
    },
    handleMouseEnter() {
      if (this.hasOverflow) {
        this.showTooltip = true;
      }
    },
    handleMouseLeave() {
      this.showTooltip = false;
    }
  }
};
</script>

3. 组件样式

<style scoped lang="scss">
.text-ellipsis-tooltip {
  position: relative;
  overflow: hidden;
  display: inline-block;
  word-wrap: break-word;

  .text-content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
  }

  &.has-overflow {
    .text-content {
      -webkit-line-clamp: v-bind(maxLines);
    }
  }

  .tooltip-trigger {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: help;
  }
}
</style>

四、使用组件

1. 引入组件

将组件保存为 TextEllipsisTooltip.vue，并在父组件中引入：

import TextEllipsisTooltip from './components/TextEllipsisTooltip.vue';

export default {
  components: {
    TextEllipsisTooltip
  }
};

2. 使用组件

在父组件的模板中使用 TextEllipsisTooltip，并传递必要的 props：

<template>
  <div>
    <h1>文本溢出工具提示示例</h1>
    <TextEllipsisTooltip
      text="这是一段很长的文本，可能会超出容器的宽度。"
      maxWidth="200px"
      maxLines="2"
      tooltipPlacement="top"
      showAfter="300"
    />
  </div>
</template>

3. 自定义样式

如果需要进一步定制样式，可以在父组件中覆盖组件的样式：

.text-ellipsis-tooltip {
  background-color: #f0f0f0;
  padding: 5px;
  border: 1px solid #ccc;

  .text-content {
    color: #333;
  }

  .tooltip-trigger {
    cursor: pointer;
  }
}

五、测试功能

启动项目后，确保以下功能正常：

单行文本溢出：当文本超出容器宽度时，显示省略号。
多行文本截断：当文本超出指定行数时，显示省略号。
工具提示显示：鼠标悬停时，显示完整的文本内容。
动态内容更新：文本内容动态更新后，工具提示逻辑仍然正确。
响应式设计：窗口大小调整后，工具提示逻辑仍然正确。

六、总结

TextEllipsisTooltip 组件通过封装文本溢出处理和工具提示功能，提供了一个灵活且易于使用的解决方案。它支持单行和多行文本溢出，并通过 props 提供了高度的可配置性。通过本文的介绍和代码实现，你可以在 Vue.js 项目中快速集成并使用这个组件，提升应用的用户体验。

Vue.js 中的文本溢出处理与工具提示组件：`TextEllipsisTooltip`