js根据文本是否溢出--判断是否显示el-tooltip或title #

<template>
  <div @mouseenter="handleMouseenter" @mouseleave="mouseleave">
    <el-tooltip placement="top" :disabled="disabled" :content="props.content">
      <slot></slot>
    </el-tooltip>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  content: {
    type: String,
    default: '',
  },
})

const disabled = ref(true)

const handleMouseenter = e => {
  if (!props.content) {
    return
  }
  const cellChild = e.target.children[0]
  // range 表示文档的一个区域
  const range = document.createRange()
  range.setStart(cellChild, 0)
  range.setEnd(cellChild, cellChild.childNodes.length)

  const flag = getStyle(cellChild, '-webkit-line-clamp')
  if (flag == 'none') {
    // rangeWidth 表示元素内容的宽度
    const rangeWidth = range.getBoundingClientRect().width
    let padding =
      (parseInt(getStyle(cellChild, 'paddingLeft')) || 0) + (parseInt(getStyle(cellChild, 'paddingRight')) || 0)

    // cellChild.offsetWidth 表示选定区域的宽度
    if (rangeWidth > cellChild.offsetWidth - padding) {
      // 显示tooltip
      disabled.value = false
    }
  } else {
    // rangeHeight 表示元素内容的高度
    const rangeHeight = range.getBoundingClientRect().height
    let padding =
      (parseInt(getStyle(cellChild, 'paddingTop')) || 0) + (parseInt(getStyle(cellChild, 'paddingBottom')) || 0)

    // cellChild.offsetHeight 表示选定区域的高度
    if (rangeHeight > cellChild.offsetHeight - padding) {
      // 显示tooltip
      disabled.value = false
    }
  }
}

const mouseleave = () => {
  disabled.value = true
}

// 获取dom的样式
const getStyle = (dom, attr) => {
  return getComputedStyle(dom, null)[attr]
}
</script>