vue根据文字动态判断溢出...鼠标悬停显示el-tooltip展示

在Vue中，可以使用v-if或v-show来根据文字是否溢出来显示或隐藏el-tooltip组件。以下是一个简单的示例：

<template>
  <div class="tooltip-container">
    <el-tooltip
      :content="text"
      placement="top"
      effect="dark"
      :disabled="isTextOverflowing"
    >
      <div ref="textRef" class="text-content">{{ text }}</div>
    </el-tooltip>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      text: '这是一段需要判断是否溢出显示tooltip的文字',
    };
  },
  computed: {
    isTextOverflowing() {
      const textElement = this.$refs.textRef;
      return textElement ? textElement.scrollWidth > textElement.offsetWidth : true;
    },
  },
};
</script>
 
<style scoped>
.text-content {
  width: 150px; /* 限制文字容器宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

在这个例子中，.text-content 类定义了一个有宽度限制的容器，并且通过CSS使得文字溢出时显示为省略号(...)。el-tooltip 组件的 disabled 属性绑定到了 isTextOverflowing 计算属性上，当文本不溢出时，disabled 为 true，此时不显示tooltip；当文本溢出时，isTextOverflowing 计算属性会返回 false，disabled 为 false，此时显示tooltip。