二次封装Element UI el-Tooltip：解决在内容宽度未超出容器时也会显示提示框的问题

导言：

在Vue.js开发中，我们经常使用Element UI提供的el-tooltip组件来实现文字提示的功能。然而，el-tooltip默认在内容宽度未超出容器时也会显示提示框，这可能导致用户界面上的混淆。本文将介绍如何通过二次封装Vue组件来优化el-tooltip，使其在内容宽度未超出容器时不显示提示框。

1. 问题背景

在Vue应用中，我们常使用el-tooltip组件来提供信息提示，但默认情况下，即使内容宽度未超出容器，el-tooltip也会显示提示框。这可能会导致用户感到困扰，因为并没有额外的信息需要提示。为了解决这个问题，我们将通过二次封装Vue组件来进行优化。

2. 二次封装的组件

我们创建了一个名为CustomTooltip的Vue组件，该组件对el-tooltip进行了封装，通过添加逻辑判断，实现了内容宽度未超出容器时不显示提示框的效果。以下是组件的代码：

CustomTooltip.vue 复制代码

<template>
  <div class="custom-tooltip">
    <!-- Element UI Tooltip 组件 -->
    <el-tooltip effect="dark" :disabled="isShowTooltip" :content="content" placement="top">
      <!-- 带有溢出处理的文本容器 -->
      <p class="over-flow" :class="className" @mouseover="onMouseOver(refName)" @focusin="onMouseOver(refName)">
        <!-- 包含文本的 span 元素，带有用于测量宽度的 ref -->
        <span :ref="refName">{{ content || '-' }}</span>
      </p>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: 'CustomTooltip',
  props: {
    // 显示的文字内容
    content: {
      type: String,
      default: ''
    },
    // 外层框的样式，在传入的这个类名中设置文字显示的宽度
    className: {
      type: String,
      default: ''
    },
    // 为页面文字标识（如在同一页面中调用多次组件，此参数不可重复）
    refName: {
      type: String,
      default: ''
    },
    // 根据需要配置更多el-tooltip属性，参考https://element.eleme.io/#/zh-CN/component/tooltip
  },
  data() {
    // 控制提示框可见性的数据属性
    return {
      isShowTooltip: true
    };
  },
  methods: {
    // 鼠标悬停或聚焦时触发的方法，用于检查并设置提示框可见性
    onMouseOver(refName) {
      // 获取父容器和内容的宽度
      const parentWidth = this.$refs[refName].parentNode.offsetWidth;
      const contentWidth = this.$refs[refName].offsetWidth;
      // 根据宽度比较确定是否启用提示框
      this.isShowTooltip = contentWidth < parentWidth;
    }
  }
};
</script>

<style lang="scss" scoped>
/* 主容器的样式 */
.custom-tooltip {
  width: 100%;
  overflow: hidden;
}

/* 文本溢出处理的样式 */
.over-flow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 重置段落元素的边距 */
p {
  margin: 0;
}
</style>

3. 使用优化后的Tooltip组件

现在，我们可以演示如何在Vue应用中使用这个自定义的Tooltip组件，实现内容宽度未超出容器时不显示提示框的效果：

test.vue 复制代码

<template>
  <div>
    <custom-tooltip
      :content="tooltipContent"
      :className="tooltipClass"
      refName="myTooltip"
    ></custom-tooltip>
  </div>
</template>

<script>
import CustomTooltip from '@/components/CustomTooltip.vue';

export default {
  data() {
    return {
      tooltipContent: '这是一条提示文字',
      tooltipClass: 'custom-tooltip-class',
    };
  },
  components: {
    CustomTooltip,
  },
};
</script>

<style lang="scss" scoped>
/* 自定义Tooltip的样式 */
.custom-tooltip-class {
  // 添加自定义样式
}
</style>

通过这个优化后的Tooltip组件，我们确保了在内容宽度未超出容器时不显示提示框，提升了用户界面的清晰度和易用性。

4. 结论

通过二次封装Vue组件，我们成功地解决了el-tooltip默认显示提示框的问题。这个优化不仅提高了用户体验，还使得我们能够更好地控制提示框的显示行为。在Vue开发中，通过巧妙的组件封装，我们能够更灵活地应对UI框架的默认行为，从而为用户提供更好的应用体验。