实现内容未超出盒子宽度时正常展示，超出后省略展示，hover展示全部

项目种有许多内容需要展示，要适配不同分辨率下数据展示完整，且不想在数据内容宽度较短时就hover展示，封装一个内容未超出盒子宽度时正常展示，超出后省略展示，hover展示全部的组件来进行数据展示。

在component文件夹下创建 OverflowTooltip/index.vue：

<template>
  <div :id="id" class="overflow-tooltip" :style="{maxWidth:maxWidth}">
    <el-tooltip :content="content" placement="bottom-start" v-if="title.length>0">
      <span>{{ content }}</span>
    </el-tooltip>
    <span v-if="title.length == 0">{{ content }}</span>
    
  </div>
</template>
 
<script setup name="OverflowTooltip">
  const props = defineProps({
     content: [String, Number, Boolean],
      maxWidth: {
      	type: String
      }
  })
  const title = ref('')
  const id = ref(Math.random().toString(36).slice(2))
  onMounted(()=> {
    const el = document.getElementById(id.value)
    const elComputed = document.defaultView.getComputedStyle(el, '')
    const padding =
      parseInt(elComputed.paddingLeft.replace('px', '')) +
      parseInt(elComputed.paddingRight.replace('px', ''))
 
    const range = document.createRange()
    range.setStart(el, 0)
    range.setEnd(el, el.childNodes.length)
    const rangeWidth = range.getBoundingClientRect().width
 
    if (
      rangeWidth + padding > el.offsetWidth ||
      el.scrollWidth > el.offsetWidth
    ) {
      title.value = props.content
    }
  })
</script>
 
<style lang="scss" scoped>
.overflow-tooltip {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1;
  vertical-align: middle;
  .el-tooltip__trigger{
  display: inline-block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
}
</style>

在页面使用该组件：

<OverflowTooltip :content="name" max-width="calc(100% - 180px)" />