动态处理Tooltip组件与文本溢出

问题描述

在前端开发中处理文本省略是非常常见的需求，使用单纯的CSS实现也非常容易，基本代码如下：

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

这样，在文本超出容器的情况下会以省略号忽略后面的文本信息。如果想让用户看到省略的内容的话我们可以使用现有的组件库来实现，这里用element-plus的tooltip组件实现如下：

<el-tooltip
  effect="dark"
  :content="我是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本"
  placement="top"
>
  <div class="truncate">
   我是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本
  </div>
</el-tooltip>

上面的代码在文本超长的情况下运行良好，但是如果文本的宽度小于容器的宽度时，tooltip组件仍然会弹出提示，这就不太友好，能不能动态的实现提示功能呢？即文本宽度小于容器宽度时，不展示tooltip提示，只有在文本宽度超过容器宽度时才展示tooltip提示。

实现思路

要实现这个功能，我们首先需要几个前提：

需要监视容器尺寸的变化
需要获取容器的宽度
需要获取文本内容的宽度

ResizeObserver

我们一个一个的来看，首先是如何监控元素尺寸的变化？这里我们可以使用ResizeObserver API来实现，

ResizeObserver 接口监视 Element 内容盒或边框盒或者 SVGElement 边界尺寸的变化。

点击查看文档

ResizeObserver构造函数创建并返回一个新的 ResizeObserver 对象。

const resizeObserver = new ResizeObserver((entries) => {

  // 监听方法参数是一个数组，每个数组对象为大小发生变化的元素
  console.log("Size changed");
});

每个对象都有target和contentRect属性，其中contentRect属性又包括width, height, x, y, top, right, bottom, left。这和getBoundingClientRect非常类似。

方法

1
2
3

ResizeObserver.disconnect() // 取消特定观察者目标上所有对 Element 的监听。
ResizeObserver.observe() // 开始对指定 Element 的监听。
ResizeObserver.unobserve() // 结束对指定 Element 的监听。

有了ResizeObserver，我们就可以实现在容器宽度变化的时候动态的计算我们需要的数据了，那如何获取文本宽度和容器宽度呢？我们知道，每一个 HTML 元素都具有：clientHeight(clientWidth)、offsetHeight(offsetWidth)、scrollHeight(scrollWidth)、offsetTop(offsetLeft)、scrollTop(scrollLeft) 五种类型的属性，他们分别表示：

clientHeight(clientWidth): 对象内容的可视区的高度（宽度）。包括 padding 但不包括 border、水平滚动条、margin 的元素的高度(宽度）。对于 inline 的元素这个属性一直是 0
offsetHeight(offsetWidth): 对象整体的实际高度（宽度）。包括 padding、border、水平滚动条，但不包括 margin 的元素的高度（宽度）。对于inline的元素这个属性一直是 0，单位 px。
scrollHeight(scrollWidth): 对象的实际内容的高度（宽度）。当实际内容超出可视区时会通过出现滚动条，通过滚动条可以调节实际内容在可视区的显示部分。
scrollTop(scrollLeft): 在有滚动条时，滚动条向下（向右）滚动的距离也就是元素顶部（左侧）被遮住部分的高度（宽度）。
offsetTop(offsetLeft): 当前元素顶部（左侧边框）距离最近的定位父元素顶部（左侧边框）的距离。

仔细研读这个五个属性我们就会发现对于单行省略而言：当文本所在的块元素的实际宽度超过了可视区的宽度（即 scrollWidth 超过了 clientWidth)，那么就会被判定为文本超出，我们就可以看见熟悉的…了。

代码实现

最后，我们来用vue实现一下:

<template>
  <div class="truncate">
    <el-tooltip
      effect="dark"
      :content="text"
      placement="top"
      :disabled="!showTooltip"
    >
      <div ref="textTarget" class="truncate">
        {{ text }}
      </div>
    </el-tooltip>
  </div>
</template>

<script setup lang='ts'>
import { onMounted, onUnmounted, ref } from 'vue'

defineProps({
  text: {
    type: String,
    required: true,
    default: ''
  }
})

// 是否展示tooltip
const showTooltip = ref(false)

const textTarget = ref<HTMLElement>()

const observer = ref()

const checkNeedTooltip = ():boolean => {
  if (!textTarget.value) return false
  return textTarget.value?.scrollWidth > textTarget.value?.offsetWidth
}

onMounted(() => {
  showTooltip.value = checkNeedTooltip()
  observer.value = new ResizeObserver(() => {
    showTooltip.value = checkNeedTooltip()
  })
  if (textTarget.value) {
    observer.value.observe(textTarget.value)
  }
})

// 清理监听（避免内存泄漏）
onUnmounted(() => {
  if (observer.value && textTarget.value) {
    observer.value.unobserve(textTarget.value)
    observer.value.disconnect()
  }
})

</script>