iview 页面中判断溢出才使用Tooltip组件

 使用方法

<TextTooltip :content="contentValue"></TextTooltip>

给Tooltip再包装一下  多行的时候需要传row

<template>
  <Tooltip transfer :content="content" :theme="theme" :disabled="!showTooltip" :max-width="maxWidth" :placement="placement"
    class="cell-tooltip">
    <span ref="content" :class="[className, row > 1 ? 'ellipsis-two-lines' : 'cell-tooltip-content']" @mouseenter="handleTooltipIn" 
      @mouseleave="handleTooltipOut" :style="{'-webkit-line-clamp': row}">{{ content }}</span>
  </Tooltip>
</template>
<script>
export default {
  name: 'TextTooltip',
  props: {
    content: {},
    className: String,
    theme: {
      type: String,
      default: () => {
        return 'dark';
      }
    },
    placement: {
      type: String,
      default: () => {
        return 'bottom';
      }
    },
    maxWidth:  {
      type: [String, Number],
      default: () => {
        return 300;
      }
    },
    row: {
      type: [String, Number],
      default: () => {
        return 1;
      }
    }
  },
  data() {
    return {
      showTooltip: false // 是否需要禁止提示
    };
  },
  methods: {
    handleTooltipIn() {
      const $content = this.$refs.content;
      if (this.row > 1) {
        this.showTooltip = $content.scrollHeight > $content.clientHeight || $content.scrollWidth > $content.clientWidth;
      } else {
        this.showTooltip = $content.scrollWidth > $content.offsetWidth;
      }
    },
    handleTooltipOut() {
      this.showTooltip = false;
    }
  }
};
</script>
<style lang="less" scoped>
.cell-tooltip {
  width: 100%;
  display: flex;
  align-items: center;
  word-break: normal;
  white-space: normal;

  .cell-tooltip-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ellipsis-two-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>