判断文本溢出省略...，气泡显示el-tooltip

<template>
  <el-tooltip :content="props.text" :disabled="!isShowTooltip" placement="top">
    <p class="tooltip--p" @mouseenter.self="(e) => handelMouseenter(e)">
      {{ props.text }}
    </p>
  </el-tooltip>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const props = defineProps({
  text: {
    type: String,
    default: '-'
  }
});
const isShowTooltip = ref(true);
const handelMouseenter = (e: any) => {
  const target = e.target;
  const target_weight = target.scrollWidth; //文本长度
  const target_content_weight = target.offsetWidth; //标签长度
  isShowTooltip.value = target_weight > target_content_weight;
};
</script>

<style lang="scss" scoped>
/**
溢出隐藏
一行
*/
@mixin --mix-one-txt-cut {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tooltip--p {
  width: 100%;
  overflow-y: auto;
  @include --mix-one-txt-cut;
  &::-webkit-scrollbar {
    width: 0;
    display: none;
  }
}
</style>