封装elementUI tooltip 实现超过一行或多行省略号并显示tooltip浮窗

<template>
  <el-tooltip :disabled="showTooltip" :placement="placement">
    <template #content>
      <span v-if="content || text">{{ content || text }}</span>
      <span v-else><slot></slot></span>
    </template>

    <div :class="lineNumber > 1 ? 'text-ellipsis-multiple' : 'u-line-1'" @mouseenter.stop="onMouseEnter">
      <slot>{{ text }}</slot>
    </div>
  </el-tooltip>
</template>

<script setup>
import { ref } from "vue";

let props = defineProps({
  // 显示内容
  text: {
    type: String,
    default: ""
  },
  // 显示位置
  placement: {
    type: String,
    default: "bottom"
  },
  // tip内容
  content: {
    type: String,
    default: ""
  },
  // 要显示的行数
  lineNumber: {
    type: Number,
    default: 1
  }
});
let showTooltip = ref(false);

function onMouseEnter(e) {
  const dom = e.target;
  // 单行会比较 dom.offsetWidth < dom.scrollWidth  或者 当前文本的scrollWidth和其父元素的dom.parentElement.clientWidth
  // 多行会比较 dom.offsetHeight < dom.scrollHeight
  showTooltip.value = !(dom.offsetWidth < dom.scrollWidth || dom.offsetHeight < dom.scrollHeight);
}
</script>

<style lang="scss" scoped>
//单行省略号
.u-line-1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
//多行文本文字超过行数限制后显示省略号
.text-ellipsis-multiple {
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -ms-flexbox;
  display: -moz-box;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-line-clamp: v-bind("props.lineNumber");
}
</style>