38 lines
1003 B
Vue
38 lines
1003 B
Vue
|
<template>
|
||
|
|
<div v-if="showTooltip">
|
||
|
|
<n-tooltip :placement="placement" trigger="hover">
|
||
|
|
<template #trigger>
|
||
|
|
<div class="flex-center h-full cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-[#333]" :class="contentClass">
|
||
|
|
<slot></slot>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
{{ tooltipContent }}
|
||
|
|
</n-tooltip>
|
||
|
|
</div>
|
||
|
|
<div v-else class="flex-center cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-[#333]" :class="contentClass">
|
||
|
|
<slot></slot>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { computed } from 'vue';
|
||
|
|
import type { FollowerPlacement } from 'vueuc';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
/** tooltip显示文本 */
|
||
|
|
tooltipContent?: string;
|
||
|
|
/** tooltip的位置 */
|
||
|
|
placement?: FollowerPlacement;
|
||
|
|
/** class类 */
|
||
|
|
contentClass?: string;
|
||
|
|
}
|
||
|
|
const props = withDefaults(defineProps<Props>(), {
|
||
|
|
tooltipContent: '',
|
||
|
|
placement: 'bottom',
|
||
|
|
contentClass: ''
|
||
|
|
});
|
||
|
|
|
||
|
|
const showTooltip = computed(() => Boolean(props.tooltipContent));
|
||
|
|
</script>
|
||
|
|
<style scoped></style>
|