<!--
* @FileDescription: 文本超出显示 类似于原生的title
* @Author: 黄琪勇
* @Date:2023-05-11 16:02:51
-->
<template>
   <el-tooltip :placement="props.placement" :disabled="disabled">
      <template #content>
         <div :style="{ width: `${props.maxWidth}px` }">{{ props.title }}</div>
      </template>
      <div ref="tooltipDom" class="tooltipAutoShow">{{ props.title }}</div>
   </el-tooltip>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue"

const props = withDefaults(
   defineProps<{
      title: string
      placement?:
         | "top"
         | "top-start"
         | "top-end"
         | "bottom"
         | "bottom-start"
         | "bottom-end"
         | "left"
         | "left-start"
         | "left-end"
         | "right"
         | "right-start"
         | "right-end"
      maxWidth?: number
   }>(),
   {
      placement: "top",
      maxWidth: 250
   }
)
const tooltipDom = ref<HTMLElement>()
const disabled = ref(false)

onMounted(() => {
   tooltipDom.value?.addEventListener("mouseenter", handleDisabled)
})
onUnmounted(() => {
   tooltipDom.value?.removeEventListener("mouseenter", handleDisabled)
})

function handleDisabled(e: MouseEvent) {
   const target = e.target as HTMLElement
   if (target.clientWidth < target.scrollWidth) {
      disabled.value = false
   } else {
      disabled.value = true
   }
}
</script>

<style lang="scss" scoped>
.tooltipAutoShow {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}
</style>
