VUE 使用element el-tooltip封装多行溢出时显示 不溢出不显示tooltip（组件版本绝对好用 适用单行多行 bug修复）

在 Vue 中使用 Element UI 的 el-tooltip 组件来实现多行文本溢出时显示 tooltip，不溢出时不显示 tooltip，可以通过计算属性和 CSS 属性来实现。这里是一个封装组件的示例：

步骤 1: 创建封装的 Tooltip 组件

创建一个新的 Vue 组件，例如 MultilineTooltip.vue。

<template>
  <a-tooltip  trigger="hover" v-if="isOverflow ">
    <template slot="title">
      {{ text }}
    </template>
    <span class="text-wrapper"  :style="`-webkit-line-clamp: ${lines};`"> {{ text }}</span>
  </a-tooltip>
  <div v-else class="text-wrapper"  :style="`-webkit-line-clamp: ${lines};`">{{ text }}</div>
</template>
<script>
export default {
   props: {
    text: String,
    lines: {//传过来的行数默认多行
      type: Number,
      default: 2
    }
  },
  data() {
    return {
      isOverflow : true,
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.computeTextOverflow()
    })
  },
  methods: {
    computeTextOverflow() {
      const textNode = this.$el
      console.log(textNode)
      if (textNode.scrollHeight > textNode.clientHeight) {
        this.isOverflow  = true
      } else {
        this.isOverflow  = false
      }
    },
  },
}
</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: 使用封装的 Tooltip 组件

在父组件中使用封装的 MultilineTooltip 组件，并传递需要显示的文本内容。

<template>
  <multiline-tooltip :text="textToDisplay" />
</template>

<script>
import MultilineTooltip from './MultilineTooltip.vue';

export default {
  components: {
    MultilineTooltip
  },
  data() {
    return {
      textToDisplay: '这是一段可能会溢出的文本，如果超出了容器限制，将显示完整的文本内容...'
    };
  }
};
</script>

注意事项

• 使用 CSS 的 -webkit-line-clamp 属性来限制文本的行数，并配合 -webkit-box-orient 和 overflow 属性来实现多行文本的省略效果。
• 计算属性 shouldShowTooltip 用于决定是否显示 tooltip。它基于文本的 scrollHeight 和 clientHeight 来判断是否溢出。
• 使用 watch 监听 shouldShowTooltip 的变化，以更新 tooltip 的 visible 和 content 属性。
• 通过 v-el-tooltip 指令将 tooltipOptions 绑定到 el-tooltip 组件上。

通过这种方式，封装的组件将根据传入的文本内容是否多行溢出来动态显示 el-tooltip，从而提高用户体验并避免不必要的信息遮挡。注意，Element UI 的 el-tooltip 组件默认不支持多行文本的省略显示，因此这里使用了 CSS 属性 -webkit-line-clamp 来实现。