Vue3 + Element plus 二次封装el-toolt

场景：日常我们当内容过长时，会使用css+el-tooltip组件实现截断文本内容，在鼠标 hover 时展示完整文本信息..

问题：使用el-tooltip后，无论这个文本内容是否超出指定行数或者是否截断，都会在hover时显示tooltip, 这不是我们想要的效果。我们想实现类似于el-table里添加 show-overflow-tooltip时的效果，只有内容进行缩略了，才会展示tooltip

思路： 在鼠标悬浮的时候判断节点高度或者宽度是否超出，如果超出toolTip就显示，否则为disable
主要逻辑：

function onMouseEnter(e) {
//获取元素
  const dom = e.target;
//根据内容判断是否展示tooltip
  showTooltip.value = !(
    dom.offsetWidth < dom.scrollWidth || dom.offsetHeight < dom.scrollHeight
  );
}

主要功能实现了，就可以愉快的封装组件了～

/**
 * desc: 文本超出显示省略号，并且显示tooltip
 * feat：支持自定义多行显示省略
 * usage：
 *  1、<myToolTip>显示文本</myToolTip>
 *  2、<myToolTip text="显示文本"></myToolTip>
 *  3、<myToolTip content="显示文本">显示文本</myToolTip>
 *  4、<myToolTip :lineNumber="3">显示文本</myToolTip>
 */
<template>
  <el-tooltip
    popper-class="popper"
    v-bind="$attrs"
    :disabled="showTooltip"
    :placement="placement"
    :show-arrow="false"
  >
    <template #content>
      <span v-if="content || text">{{ content || text }}</span>
      <span v-else><slot></slot></span>
    </template>
    <div
      class="text-ellipsis-multiple"
      :style="styleObj"
      @mouseenter.stop="onMouseEnter"
      :id="!showTooltip ? 'text' : ''"
    >
      <slot>{{ text }}</slot>
    </div>
  </el-tooltip>
</template>
<script setup>
import { ref, defineProps, computed } from "vue";
const props = defineProps({
  text: String,
  placement: {
    type: String,
    default: "top",
  },
  content: String,
//默认超出一行省略
  lineNumber: {
    type: Number,
    default: 1,
  },
});
let styleObj = computed(() => {
  return { "-webkit-line-clamp": props.lineNumber };
});

let showTooltip = ref(true);

function onMouseEnter(e) {
  const dom = e.target;
  showTooltip.value = !(
    dom.offsetWidth < dom.scrollWidth || dom.offsetHeight < dom.scrollHeight
  );
}
</script>

<style lang="less" scoped>
.text-ellipsis-multiple {
  font-size: 12px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}
#text:hover {
  cursor: pointer;
}
</style>

这样就实现了自定义行数显示是否展示tooltip~

完结撒花🎉..