公共tooltip组件

公共tooltip组件，超出显示

<!-- 公共tooltip组件 -->
<template>
  <el-tooltip
    :disabled="controlElToop"
    :content="name"
    placement="top"
    :enterable="false"
  >
    <div
      class="researcher-name"
      :style="{width: boxWidth, textAlign: textAlign}"
    >
      <div
        ref="empty"
        class="empty"
      >
        {{ name }}
      </div>
      <span ref="contentVal">{{ name }}</span>
    </div>
  </el-tooltip>
</template>

<script>
import { isShowTooltip } from '@/utils/validate'

export default {
  name: 'KToolTip',
  props: {
    name: {
      type: String,
      default: '',
    },
    textAlign: {
      type: String,
      default: 'right',
    },
    boxWidth: {
      type: String,
      default: '57px',
    },
    width: {
      type: Number || String,
      default: 0,
    },
  },
  /** 初始参数 */
  data () {
    return {
      controlElToop: true,
    }
  },
  /**
   * 生命周期
   */
  mounted () {
    this.controlElToop = !isShowTooltip(this, 'empty', this.width)
  },
}
</script>

<style lang='scss' scoped>

.researcher-name {
  font-size: 14px;
  padding-right: 5px;
  color: #3C4455;
  position: relative;

  .empty {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }

  span {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>

isShowTooltip

/** 验证文本内容是否超出容器，显示提示语 */
export function isShowTooltip (that, refValue, width) {
  return that.$refs[refValue].offsetWidth >= width
}