SZYGM1.0/src/components/OverflowTooltip/index.vue

<template>
  <el-tooltip
    class="my-tooltip"
    :disabled="disabled"
    :content="content"
    :effect="effect"
  >
    <div ref="tooltipBox" class="text-box" @mouseover="checkWidth">
      <span ref="tooltipItem" class="text-item">{{ content }}</span>
    </div>
  </el-tooltip>
</template>

<script setup lang="ts">
import { PropType } from 'vue'
import { Placement } from 'element-plus'
const props = defineProps({
  content: {
    type: String,
    required: true,
  },
  placement: {
    type: String as PropType<Placement>,
    default: 'bottom',
  },
  effect: {
    type: String as PropType<'dark' | 'light'>,
    default: 'dark',
  },
})

const disabled = ref(true)
const tooltipBox = ref<HTMLElement | null>(null)
const tooltipItem = ref<HTMLElement | null>(null)
const checkWidth = () => {
  const boxWidth = tooltipBox.value!.offsetWidth
  const itemWidth = tooltipItem.value!.offsetWidth
  disabled.value = boxWidth > itemWidth
}
</script>

<style lang="scss" scoped>
.text-box {
  overflow: hidden;
  white-space: nowrap;
  .text-item {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 0.7;
  }
}
</style>