关于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>