VUE 使用element el-tooltip封装多行溢出时显示 不溢出不显示tooltip

在Vue中使用Element UI的el-tooltip组件来封装一个组件，使其在多行文本溢出时显示Tooltip，而在不溢出时不显示，确实需要一些策略来间接判断文本是否溢出。由于CSS的display: -webkit-box; -webkit-line-clamp: N;属性并没有直接提供溢出检测的API，我们通常需要借助其他方法。

以下是一些可能的方法：

1. 预先设定字符长度阈值

这是最简单但不完美的方法。你可以基于你的字体、行高和容器宽度来估算一个字符长度的阈值，当文本长度超过这个阈值时，就认为文本会溢出。

<template>
  <el-tooltip
    v-if="isTextOverflow"
    effect="dark"
    :content="text"
    placement="top"
  >
    <div class="text-wrapper">{{ text }}</div>
  </el-tooltip>
  <div v-else class="text-wrapper">{{ text }}</div>
</template>

<script>
export default {
  props: {
    text: String
  },
  computed: {
    // 假设每行大约的字符数，根据实际情况调整
    charsPerLine() {
      return 30; // 示例值
    },
    // 假设的行数
    lines() {
      return 2;
    },
    isTextOverflow() {
      return this.text.length > this.charsPerLine * this.lines;
    }
  }
}
</script>

<style scoped>
.text-wrapper {
  width: 200px; /* 容器宽度 */
  line-height: 1.5; /* 行高 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>

2. 使用JavaScript测量文本高度

这种方法更复杂但更准确。你可以在文本渲染后，使用JavaScript的getBoundingClientRect()方法测量.text-wrapper元素的实际高度，并将其与预期的高度（基于行高和行数计算）进行比较。

这种方法需要等待DOM元素渲染完成，可以在Vue的mounted钩子或watch属性中使用nextTick来实现。

<template>
  <el-tooltip
    v-if="isTextOverflowComputed"
    effect="dark"
    :content="text"
    placement="top"
  >
    <div class="text-wrapper" ref="textWrapper">{{ text }}</div>
  </el-tooltip>
  <div v-else class="text-wrapper">{{ text }}</div>
</template>

<script>
export default {
  props: {
    text: String
  },
  data() {
    return {
      isTextOverflowComputed: false
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.computeTextOverflow();
    });
  },
  methods: {
    computeTextOverflow() {
      const textWrapper = this.$refs.textWrapper;
      if (!textWrapper) return;

      // 假设的行高和行数
      const lineHeight = parseFloat(getComputedStyle(textWrapper).lineHeight);
      const expectedHeight = lineHeight * 2; // 假设两行

      // 加上一些容差，因为计算样式可能不完全精确
      const tolerance = 2;

      this.isTextOverflowComputed = textWrapper.offsetHeight > expectedHeight + tolerance;
    }
  }
}
</script>

<style scoped>
/* ... 同上 ... */
</style>

3. CSS伪元素和JavaScript结合

这种方法结合了CSS和JavaScript。你可以在CSS中使用伪元素（如::after）来尝试在文本末尾添加更多内容，并检查这是否改变了元素的高度。然而，这种方法比较复杂且可能不太可靠，因为它依赖于CSS渲染的细节。

结论

对于大多数应用场景，使用预先设定的字符长度阈值（方法1）可能已经足够好了。如果你需要更高的准确性，并且可以接受一些性能开销，那么使用JavaScript测量文本高度（方法2）可能是更好的选择。方法3虽然理论上可行，但实现起来较为复杂，且可能不如方法2可靠。