vuejs 3.x 通过js 判断文本超长一出后出现省略号 ... 并动态设置显示element plus tooltip弹框

组件 newTooltipText.vue

<template>
  <el-tooltip
    effect="dark"
    placement="top"
    :enterable="false"
    :show-after="200"
    :offset="10"
    :popper-class="props.textTooltipPopperClass"
    :content="props.content"
    :disabled="disabledTooltip"
  >
    <slot :mouseoverSelf="handleHover"></slot>
  </el-tooltip>
</template>

<script lang="ts" setup>
import { ref } from "vue"

const props = defineProps({
  content: {
    type: String,
    default: ""
  },
  line: {
    type: Number,
    default: 1
  },
  textTooltipPopperClass: {
    type: String,
    default: ""
  }
})

function handleHover(event: MouseEvent) {
  console.log(event)
  disabledTooltip.value = !isTextEllipsis(event.target as HTMLElement)
}
const isTextEllipsis = (el: HTMLElement) => {
  if (props.line === 1) {
    // 单行省略判断
    console.log(el.scrollWidth, el.clientWidth)

    return el.scrollWidth > el.clientWidth
  } else {
    // 多行省略判断
    return el.scrollHeight > el.clientHeight
  }
}
const disabledTooltip = ref(true)
</script>

使用

多行

注意：需要换行

<newTooltipText
   content="xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
   :line="2"
   textTooltipPopperClass="table_tooltip"
   v-slot="slotProps"
 >
   <span
     class="line_ellipsis_2"
     @mouseover.self="slotProps.mouseoverSelf"
     >xxxxxxxxxxxxxxxxxxxxxxxxxxxx</span
   >
 </newTooltipText>


.line_ellipsis_2 {
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.table_tooltip {
  max-width: 300px;
  white-space: pre-wrap;
}

单行

注意：包裹的父级一定有实际的width

<newTooltipText
 :content="xxxxxxxxxxxxxxxxxxxxxx"
  :line="1"
  textTooltipPopperClass="table_tooltip"
  v-slot="slotProps"
>
  <span class="line_ellipsis_1" @mouseover.self="slotProps.mouseoverSelf">xxxxxxxxxxxxxxxxxxxxxx</span>
</newTooltipText>

.line_ellipsis_1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}