el-popover 文字超出展示省略号，并且有悬浮展示效果

<template>
  <basic-popover
    :content="content"
    :disabled="isShowPopover"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <slot />
    <p
      slot="reference"
      class="over-flow"
      @mouseover="onMouseOver"
    >
      <span class="over-span">
        <slot name="reference">{{ content }}</slot>
      </span>
    </p>
  </basic-popover>
</template>

<script lang='ts'>
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import BasicPopover from './BasicPopover.vue';

@Component({
  components: {
    BasicPopover
  }
})
export default class TextPopover extends Vue {
  @Prop(String)
  private content !: string;

  private isShowPopover = true;

  private onMouseOver () {
    const spanObj = this.$el.querySelector('.over-span') as any;
    const parentWidth = spanObj.parentNode.offsetWidth;
    const contentWidth = spanObj.offsetWidth;
    // 判断是否开启popover功能
    this.isShowPopover = !(contentWidth > parentWidth);
  }
}
</script>

<style lang='scss' scoped>
.over-flow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
<style lang='scss'>
.el-popover--plain {
  padding: 12px;
}
</style>