el-tooltip组件二次封装，超出宽度再展示

文字超出宽度，省略号展示，hover文字，用el-tooltip展示全部。
文字未超出，el-tooltip不展示。
注意disabled属性。

<template>
  <el-tooltip
    :effect="dark"
    :content="text"
    :disabled="disableTip"
    :placement="placement"
  >
    <div class="ellipsis" 
        :class="className"
        @mouseover="onMouseOver">
      <span ref="ellipsis">{{text}}</span>
    </div>
  </el-tooltip>
</template>

<script>
export default {
  name: 'EllipsisTooltip',
  props: {
    text: { type: String, default: '' },
    placement: { type: String, default: 'top-start' },
    effect: { type: String, default: 'dark' },
    className: { type: String, default: '' },
  },
  data() {
    return {
      disableTip: false,
    }
  },
  methods: {
    onMouseOver() {
      let parentWidth = this.$refs['ellipsis'].parentNode.offsetWidth
      let contentWidth = this.$refs['ellipsis'].offsetWidth
      this.disableTip = contentWidth <= parentWidth
    },
  },
}
</script>

<style scoped lang="scss">
.ellipsis {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>

使用：

 <ellipsis-tooltip
    :text="测试test测试test测试test测试test测试test测试test"
    :placement="'left'"
>
</ellipsis-tooltip>