vue2 二次封装el-tooltip

前言 

我们在使用 element-ui 组件库里的 el-tooltip 实现文本提示功能时，发现只要用了这个组件，不管文本有没有超出鼠标移动上去时都会显示其提示，但是很多时候我们更想要的是只有当文本超出并且显示省略号后，此时鼠标移动上去才会显示全部

那么接下来我们就来实现一下

大致思路

• 鼠标悬停或聚焦时触发的方法，用于检查并设置提示框可见性 
• 此时去获取父容器和内容的宽度分别通过 `parentNode.offsetWidth` 和 `offsetWidth`
• 最后根据宽度比较确定是否启用提示框

组件封装 

CustomTooltip.vue 

<template>
  <div class="custom-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>

使用 

<template>
  <div style="width: 200px">
    <custom-tooltip
        :content="'文字文字'"
        :className="tooltipClass"
        refName="myTooltip"
    ></custom-tooltip>

    <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>