关于vue.js:eltooltip组件二次封装超出宽度再展示

文字超出宽度，省略号展现，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>