基于Element-ui的单行溢出提示tooltip的组件

组件功能介绍

最近工作中遇见一个功能，当文字过多隐藏并且增加tooltip提示功能，本着代码复用的原则试着封装一个组件，下次可以直接拿来用。

组件代码

<template>
  <el-tooltip
    ref="tlp"
    :content="text"
    effect="dark"
    :disabled="!tooltipFlag"
    :placement="placement"
    class="tooltip"
    :open-delay="openDelay"
  >
    <span
      @mouseenter="visibilityChange($event)"
      class="tooltip-wrap"
      :style="{ width: textWidth }"
      >{{ text }}</span
    >
  </el-tooltip>
</template>

<script>
export default {
  name: "EllipsisTooltip",
  props: {
    text: { type: String, default: "" }, // 字符内容
    placement: { type: String, default: "top-start" },
    openDelay: { type: Number, default: 200 }, // class,
    textWidth: {
      default: "100%",
      type: String,
    },
  },
  data() {
    return {
      tooltipFlag: false,
    };
  },
  methods: {
    visibilityChange(event) {
      if (event.target.scrollWidth > event.target.clientWidth) {
        this.tooltipFlag = true;
      } else {
        this.tooltipFlag = false;
      }
    },
  },
};
</script>
<style  scoped>
.tooltip-wrap {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

页面引入

  <div style='width:100px'>
      <ellipsisTooltip text='窗外下起了雨，嘀哒哒'/>
      <ellipsisTooltip text='润物细无声'/>
  </div>

最终效果

这样就实现了超出文字溢出并提示tooltip功能