多维表格

49 lines
932 B

<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()
const enableTooltip = computed(() => text.value?.textContent.length > length)
const shortName = computed(() =>
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>{{ shortName }}</div>
</a-tooltip>
<div v-else>
<slot />
</div>
<div ref="text" class="hidden">
<slot />
</div>
</template>