结合el-tooltips组件二次封装只针对溢出的文字省略号并tooltips

• 效果图

  
  

只针对溢出的文字触发文字提示组件

<template>
  <div id="ellipsis">
    <div class="contentCls" :style="{ width: width }">
      <el-tooltip
        :effect="effect"
        :disabled="isElTooltipShow"
        :content="contentText"
        :placement="placement"
      >
        <span @mouseenter="hanldeElTooltip">{{ contentText }}</span>
      </el-tooltip>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
@Component
export default class Ellipsis extends Vue {
  // Tooltip 出现位置。位置汇总：top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end
  @Prop({
    type: String,
    default: "top-start"
  })
  placement!: string;
  // Tooltip 外层壳的宽度,default自定义设置
  @Prop({
    type: String,
    default: 1
  })
  outerShellWidth!: string | number;
  // 文本内容
  @Prop({
    type: String,
    default: ""
  })
  contentText!: string;
  // 文字提示主题
  @Prop({
    type: String,
    default: "dark"
  })
  effect!: string;

  get width() {
    // Tooltip 外层壳宽度自动填充px
    return this.outerShellWidth + "px";
  }

  isElTooltipShow = true;
  hanldeElTooltip(val: any) {
    this.isElTooltipShow =
      val.target.offsetWidth > this.outerShellWidth ? false : true;
  }
}
</script>

<style scoped lang="scss">
#ellipsis {
  width: 100%;
  .contentCls {
    // 外层壳已做单行文本溢出显示省略号处理
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }
}
</style>