mirror of https://github.com/nocodb/nocodb
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.
45 lines
968 B
45 lines
968 B
2 years ago
|
<script lang="ts" setup>
|
||
|
|
interface Props {
|
||
|
|
placement?:
|
||
|
|
| 'top'
|
||
|
|
| 'left'
|
||
|
|
| 'right'
|
||
|
|
| 'bottom'
|
||
|
|
| 'topLeft'
|
||
|
|
| 'topRight'
|
||
|
|
| 'bottomLeft'
|
||
|
|
| 'bottomRight'
|
||
|
|
| 'leftTop'
|
||
|
|
| 'leftBottom'
|
||
|
|
| 'rightTop'
|
||
|
|
| 'rightBottom'
|
||
|
|
length?: number
|
||
|
|
}
|
||
|
|
|
||
|
|
const props = withDefaults(defineProps<Props>(), {
|
||
|
|
placement: 'bottom',
|
||
|
|
length: 20,
|
||
|
|
})
|
||
|
|
|
||
|
|
const text = ref()
|
||
|
|
const enableTooltip = computed(() => text?.value?.textContent.length > props.length)
|
||
|
|
const shortName = computed(() =>
|
||
|
|
text?.value?.textContent.length > props.length
|
||
|
|
? `${text?.value?.textContent.substr(0, props.length - 3)}...`
|
||
|
|
: text?.value?.textContent,
|
||
|
|
)
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<a-tooltip v-if="enableTooltip" :placement="props.placement">
|
||
|
|
<template #title>
|
||
|
|
<slot></slot>
|
||
|
|
</template>
|
||
|
|
<div>{{ shortName }}</div>
|
||
|
|
</a-tooltip>
|
||
|
|
<div v-else><slot></slot></div>
|
||
|
|
<div ref="text" class="hidden"><slot></slot></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped></style>
|