二次封装el-tooltip,在文字超出范围使用...，同时hover显示全部内容。未超出范围不展示tooltip

二次封装el-tooltip,在文字超出范围使用...，同时hover显示全部内容。未超出范围不展示tooltip

如果hover下边一个数据，就没得tooltip效果

<template>
  <div ref="deviceTooltip" class="deal-long-words device-tooltip-wrap">
    <el-tooltip v-if="isEllipsis===true" :content="content">
      <span>
        <slot />
      </span>
    </el-tooltip>
    <span v-else class="aaa">
      <slot />
    </span>
  </div>
</template>

<script>
// 判断样式是否存在省略号。
 function checkEllipsis(box) {
  const range = document.createRange()
  range.setStart(box, 0)
  range.setEnd(box, box.childNodes.length)
  const rangeWidth = range.getBoundingClientRect().width
  const rangeHeight = range.getBoundingClientRect().height
  const contentWidth = rangeWidth - Math.floor(rangeWidth)
  const { pLeft, pRight } = getPadding(box)
  const horizontalPadding = pLeft + pRight
  if (rangeWidth + horizontalPadding > box.clientWidth) {
    return true
  }
  return false

}
export default {
  props: {
    content: {
      default: '',
    },
  },
  data() {
    return {
      isEllipsis: false,
    }
  },
  watch: {
  
  },
  mounted() {
    this.isEllipsis = checkEllipsis(this.$refs.deviceTooltip)

 

  },
}
</script>

<style lang="scss" scoped>

.device-tooltip-wrap{
display: inline-block;
width: 100%;
}
</style>