js单行文本溢出显示省略号时才展示el-tooltip

 主要使用：
windicss的w-100限制宽度，并使用truncate溢出显示省略号
el-tooltip的:disabled属性控制el-tooltip气泡的显示隐藏

            <el-checkbox  v-model="item.checked">
              <div class="w-100 flex items-center">
                <el-tooltip effect="dark" :content="item.label" placement="top" enterable :disabled="isDisableTooltip">
                  <div class="truncate" @mouseover="toolTipVisibleChange($event)">{{ item.label }}div>
                el-tooltip>
              div>
            el-checkbox>

 使用mouseover绑定事件toolTipVisibleChange

// 文本溢出展示el-tooltip
const isDisableTooltip = ref(true)
const toolTipVisibleChange = event => {
  const ev = event.target
  const evWeight = ev.scrollWidth
 
  const contentWeight = ev.clientWidth
 
  if (evWeight > contentWeight) {
    // 实际宽度 > 可视宽度  文字溢出
    isDisableTooltip.value = false
  } else {
    // 否则为不溢出
    isDisableTooltip.value = true
  }
}