多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

48 lines
1.1 KiB

<script lang="ts" setup>
import { computed, ref } from '#imports'
interface Props {
placement?:
| 'top'
| 'left'
| 'right'
| 'bottom'
| 'topLeft'
| 'topRight'
| 'bottomLeft'
| 'bottomRight'
| 'leftTop'
| 'leftBottom'
| 'rightTop'
| 'rightBottom'
length?: number
}
const { placement = 'bottom', length = 20 } = defineProps<Props>()
const text = ref<HTMLDivElement>()
const enableTooltip = computed(() => text.value?.textContent?.length && text.value?.textContent?.length > length)
const shortName = computed(() =>
text.value?.textContent?.length && text.value?.textContent.length > length
? `${text.value?.textContent?.substr(0, length - 3)}...`
: text.value?.textContent,
)
</script>
<template>
<a-tooltip v-if="enableTooltip" :placement="placement">
<template #title>
<slot />
</template>
<div class="w-full">{{ shortName }}</div>
</a-tooltip>
<div v-else class="w-full" data-nc="truncate-label">
<slot />
</div>
<div ref="text" class="hidden">
<slot />
</div>
</template>