<script setup lang='ts'>
|
import { computed } from 'vue'
|
import type { PopoverPlacement } from 'naive-ui'
|
import { NTooltip } from 'naive-ui'
|
import Button from './Button.vue'
|
|
interface Props {
|
tooltip?: string
|
placement?: PopoverPlacement
|
}
|
|
interface Emit {
|
(e: 'click'): void
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
tooltip: '',
|
placement: 'bottom',
|
})
|
|
const emit = defineEmits<Emit>()
|
|
const showTooltip = computed(() => Boolean(props.tooltip))
|
|
function handleClick() {
|
emit('click')
|
}
|
</script>
|
|
<template>
|
<div v-if="showTooltip">
|
<NTooltip :placement="placement" trigger="hover">
|
<template #trigger>
|
<Button @click="handleClick">
|
<slot />
|
</Button>
|
</template>
|
{{ tooltip }}
|
</NTooltip>
|
</div>
|
<div v-else>
|
<Button @click="handleClick">
|
<slot />
|
</Button>
|
</div>
|
</template>
|
