二次封装el-tooltip 内容超过一定宽度时鼠标悬停提示

背景：一些特殊的场景需要根据一定的宽度来控制文字内容是否溢出显示省略号显示并且在鼠标悬浮时有提示，内容未超过时正常显示内容。

这里是对element ui的tooltip组件做二次封装,效果见下图：

 封装代码如下：

<template>
  <el-tooltip
    v-bind="$attrs"
    ref="tooltipRef"
    :disabled="isDisabled"
    @mouseenter.native="handleMouseEnter"
  >
    <slot />
  </el-tooltip>
</template>

<script>
export default {
  name: 'Tooltip',
  data () {
    return {
      isDisabled: false
    }
  },
  methods: {
    handleMouseEnter () {
      let elm = this.$slots.default[0].elm
      if (!elm) return
      let tagList = elm.getElementsByTagName('*')
      let maxWidth
      if (tagList.length > 0) {
        maxWidth = Math.max(...Array.from(elm.getElementsByTagName('*')).map(o => o.scrollWidth || 0))
      } else {
        maxWidth = elm.scrollWidth
      }
      const padding = (parseInt(this.getStyle(elm, 'paddingLeft'), 10) || 0) +
        (parseInt(this.getStyle(elm, 'paddingRight'), 10) || 0)
      if ((maxWidth + padding > elm.offsetWidth || elm.scrollWidth > elm.offsetWidth)) {
        this.isDisabled = false
      } else {
        this.isDisabled = true
      }
    },
    // 经过计算机/浏览器计算后的样式
    getStyle (obj,attr) {
      return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr]
    },
  }

}
</script>

使用方法同el-tooltip,需要注意的是要设置宽度后才生效，在项目中实际使用及样式设置如下：

<tooltip placement="top" :content="row.ruleName+' '+row.typeList.join(';')">
   <div class="right-box">
     <div class="table-alarm alarm-title">{{ row.ruleName }}</div>
     <div class="alarm-rule-content" >{{row.typeList.join(';')}}</div>
   </div>
</tooltip>

 .right-box{
    width: 160px;
    line-height: initial;
    .item-name{
      display: inline-block;
      max-width: 130px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      position: relative;
    }
  }