mirror of
				https://github.com/soybeanjs/soybean-admin.git
				synced 2025-11-04 15:53:43 +08:00 
			
		
		
		
	feat(components): add the IconTooltip component.
This commit is contained in:
		
							
								
								
									
										42
									
								
								src/components/common/icon-tooltip.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										42
									
								
								src/components/common/icon-tooltip.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,42 @@
 | 
			
		||||
<script lang="ts" setup>
 | 
			
		||||
import { computed, useSlots } from 'vue';
 | 
			
		||||
import type { PopoverPlacement } from 'naive-ui';
 | 
			
		||||
 | 
			
		||||
defineOptions({ name: 'IconTooltip' });
 | 
			
		||||
 | 
			
		||||
interface Props {
 | 
			
		||||
  icon?: string;
 | 
			
		||||
  localIcon?: string;
 | 
			
		||||
  desc?: string;
 | 
			
		||||
  placement?: PopoverPlacement;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const props = withDefaults(defineProps<Props>(), {
 | 
			
		||||
  icon: 'mdi-help-circle',
 | 
			
		||||
  localIcon: '',
 | 
			
		||||
  desc: '',
 | 
			
		||||
  placement: 'top'
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
const slots = useSlots();
 | 
			
		||||
const hasCustomTrigger = computed(() => Boolean(slots.trigger));
 | 
			
		||||
 | 
			
		||||
if (!hasCustomTrigger.value && !props.icon && !props.localIcon) {
 | 
			
		||||
  throw new Error('icon or localIcon is required when no custom trigger slot is provided');
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <NTooltip :placement="placement">
 | 
			
		||||
    <template #trigger>
 | 
			
		||||
      <slot name="trigger">
 | 
			
		||||
        <div class="cursor-pointer">
 | 
			
		||||
          <SvgIcon :icon="icon" :local-icon="localIcon" />
 | 
			
		||||
        </div>
 | 
			
		||||
      </slot>
 | 
			
		||||
    </template>
 | 
			
		||||
    <slot>
 | 
			
		||||
      <span>{{ desc }}</span>
 | 
			
		||||
    </slot>
 | 
			
		||||
  </NTooltip>
 | 
			
		||||
</template>
 | 
			
		||||
							
								
								
									
										2
									
								
								src/typings/components.d.ts
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										2
									
								
								src/typings/components.d.ts
									
									
									
									
										vendored
									
									
								
							@@ -25,6 +25,7 @@ declare module 'vue' {
 | 
			
		||||
    IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin')['default']
 | 
			
		||||
    IconMdiKeyboardEsc: typeof import('~icons/mdi/keyboard-esc')['default']
 | 
			
		||||
    IconMdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return')['default']
 | 
			
		||||
    IconTooltip: typeof import('./../components/common/icon-tooltip.vue')['default']
 | 
			
		||||
    IconUilSearch: typeof import('~icons/uil/search')['default']
 | 
			
		||||
    LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
 | 
			
		||||
    LookForward: typeof import('./../components/custom/look-forward.vue')['default']
 | 
			
		||||
@@ -56,6 +57,7 @@ declare module 'vue' {
 | 
			
		||||
    NMessageProvider: typeof import('naive-ui')['NMessageProvider']
 | 
			
		||||
    NModal: typeof import('naive-ui')['NModal']
 | 
			
		||||
    NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
 | 
			
		||||
    NPopover: typeof import('naive-ui')['NPopover']
 | 
			
		||||
    NScrollbar: typeof import('naive-ui')['NScrollbar']
 | 
			
		||||
    NSelect: typeof import('naive-ui')['NSelect']
 | 
			
		||||
    NSpace: typeof import('naive-ui')['NSpace']
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user