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']
 | 
					    IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin')['default']
 | 
				
			||||||
    IconMdiKeyboardEsc: typeof import('~icons/mdi/keyboard-esc')['default']
 | 
					    IconMdiKeyboardEsc: typeof import('~icons/mdi/keyboard-esc')['default']
 | 
				
			||||||
    IconMdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return')['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']
 | 
					    IconUilSearch: typeof import('~icons/uil/search')['default']
 | 
				
			||||||
    LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
 | 
					    LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
 | 
				
			||||||
    LookForward: typeof import('./../components/custom/look-forward.vue')['default']
 | 
					    LookForward: typeof import('./../components/custom/look-forward.vue')['default']
 | 
				
			||||||
@@ -56,6 +57,7 @@ declare module 'vue' {
 | 
				
			|||||||
    NMessageProvider: typeof import('naive-ui')['NMessageProvider']
 | 
					    NMessageProvider: typeof import('naive-ui')['NMessageProvider']
 | 
				
			||||||
    NModal: typeof import('naive-ui')['NModal']
 | 
					    NModal: typeof import('naive-ui')['NModal']
 | 
				
			||||||
    NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
 | 
					    NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
 | 
				
			||||||
 | 
					    NPopover: typeof import('naive-ui')['NPopover']
 | 
				
			||||||
    NScrollbar: typeof import('naive-ui')['NScrollbar']
 | 
					    NScrollbar: typeof import('naive-ui')['NScrollbar']
 | 
				
			||||||
    NSelect: typeof import('naive-ui')['NSelect']
 | 
					    NSelect: typeof import('naive-ui')['NSelect']
 | 
				
			||||||
    NSpace: typeof import('naive-ui')['NSpace']
 | 
					    NSpace: typeof import('naive-ui')['NSpace']
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user