字数超出限制提示

<script setup lang="ts">
import type { ElTooltipProps } from "element-plus";
import { useResizeObserver } from "@vueuse/core";
import { ref } from "vue";

interface Props {
    placement?: ElTooltipProps["placement"];
}

interface Slots {
    default(): any;
    tooltipSuffix(): any;
}

const spanRef = ref<HTMLSpanElement | null>(null);
const overflown = ref<boolean>(false);
const props = defineProps<Props>();
const slots = defineSlots<Slots>();

useResizeObserver(spanRef, function (entries) {
    for (const entry of entries) {
        overflown.value = entry.target.scrollWidth > entry.target.clientWidth;
    }
});
</script>

<template>
    <el-tooltip :disabled="!overflown && !slots.tooltipSuffix" :placement="props.placement">
        <template #default>
            <span class="ellipsis-span" ref="spanRef">
                <slot></slot>
            </span>
        </template>
        <template #content>
            <span class="ellipsis-span__tooltip">
                <slot v-if="overflown"></slot>
                <slot name="tooltipSuffix"></slot>
            </span>
        </template>
    </el-tooltip>
</template>

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

<style lang="scss">
.ellipsis-span__tooltip {
    display: inline-flex;
    flex-direction: row;
    gap: 4px;
}
</style>

<ellipsis-span placement="top">
    <template #default>{{ node.label }}</template>
    <template v-if="data.status === 'offline'" #tooltipSuffix>
        <span>设备已离线</span>
    </template>
</ellipsis-span>