feat: 导航菜单收起时，无二级的一级导航增加 tooltip 展示

one-step-admin · Jan 25, 2024 · 5e61c84 · 5e61c84
1 parent 4bccda4
commit 5e61c84
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 30 deletions.
diff --git a/src/views/components/Menu/item.vue b/src/views/components/Menu/item.vue
@@ -51,38 +51,40 @@ defineExpose({
       active: isItemActive,
     }"
   >
-    <div
-      class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-5 py-4 text-[var(--g-sub-sidebar-menu-color)] transition-all hover:(bg-[var(--g-sub-sidebar-menu-hover-bg)] text-[var(--g-sub-sidebar-menu-hover-color)])" :class="{
-        'text-[var(--g-sub-sidebar-menu-active-color)]! bg-[var(--g-sub-sidebar-menu-active-bg)]!': isItemActive,
-        'px-3!': rootMenu.isMenuPopup && level === 0,
-      }" :title="typeof item?.title === 'function' ? item?.title() : item?.title"
-    >
+    <HTooltip :enable="rootMenu.isMenuPopup && level === 0 && !subMenu" :text="typeof item?.title === 'function' ? item?.title() : item?.title" placement="right" class="w-full">
       <div
-        class="inline-flex flex-1 items-center justify-center gap-[12px]" :class="{
-          'flex-col gap-none': rootMenu.isMenuPopup && level === 0,
-          'flex-col gap-[2px]!': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
-          'w-full': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'vertical',
-          'w-[50px]': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'horizontal',
-        }" :style="indentStyle"
+        class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-5 py-4 text-[var(--g-sub-sidebar-menu-color)] transition-all hover:(bg-[var(--g-sub-sidebar-menu-hover-bg)] text-[var(--g-sub-sidebar-menu-hover-color)])" :class="{
+          'text-[var(--g-sub-sidebar-menu-active-color)]! bg-[var(--g-sub-sidebar-menu-active-bg)]!': isItemActive,
+          'px-3!': rootMenu.isMenuPopup && level === 0,
+        }" :title="typeof item?.title === 'function' ? item?.title() : item?.title"
       >
-        <SvgIcon v-if="icon" :name="icon" :size="20" class="menu-item-container-icon transition-transform group-hover:scale-120" async />
-        <span
-          v-if="!(rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName)" class="w-0 flex-1 truncate text-sm transition-height transition-opacity transition-width"
-          :class="{
-            'opacity-0 w-0 h-0': rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName,
-            'w-full text-center': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
-          }"
+        <div
+          class="inline-flex flex-1 items-center justify-center gap-[12px]" :class="{
+            'flex-col gap-none': rootMenu.isMenuPopup && level === 0,
+            'flex-col gap-[2px]!': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
+            'w-full': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'vertical',
+            'w-[50px]': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'horizontal',
+          }" :style="indentStyle"
         >
-          {{ item?.title }}
-        </span>
+          <SvgIcon v-if="icon" :name="icon" :size="20" class="menu-item-container-icon transition-transform group-hover:scale-120" async />
+          <span
+            v-if="!(rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName)" class="w-0 flex-1 truncate text-sm transition-height transition-opacity transition-width"
+            :class="{
+              'opacity-0 w-0 h-0': rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName,
+              'w-full text-center': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
+            }"
+          >
+            {{ item?.title }}
+          </span>
+        </div>
+        <i
+          v-if="subMenu && !(rootMenu.isMenuPopup && level === 0)" class="relative ml-1 w-[10px] after:(absolute h-[1.5px] w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px]) before:(absolute h-[1.5px] w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px])" :class="[
+            expand ? 'before:(-rotate-45 -translate-x-[2px]) after:(rotate-45 translate-x-[2px])' : 'before:(rotate-45 -translate-x-[2px]) after:(-rotate-45 translate-x-[2px])',
+            rootMenu.isMenuPopup && level === 0 && 'opacity-0',
+            rootMenu.isMenuPopup && level !== 0 && '-rotate-90 -top-[1.5px]',
+          ]"
+        />
       </div>
-      <i
-        v-if="subMenu && !(rootMenu.isMenuPopup && level === 0)" class="relative ml-1 w-[10px] after:(absolute h-[1.5px] w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px]) before:(absolute h-[1.5px] w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px])" :class="[
-          expand ? 'before:(-rotate-45 -translate-x-[2px]) after:(rotate-45 translate-x-[2px])' : 'before:(rotate-45 -translate-x-[2px]) after:(-rotate-45 translate-x-[2px])',
-          rootMenu.isMenuPopup && level === 0 && 'opacity-0',
-          rootMenu.isMenuPopup && level !== 0 && '-rotate-90 -top-[1.5px]',
-        ]"
-      />
-    </div>
+    </HTooltip>
   </div>
 </template>
diff --git a/src/views/ui-kit/HTooltip.vue b/src/views/ui-kit/HTooltip.vue
@@ -2,20 +2,23 @@
 withDefaults(
   defineProps<{
     text: string
+    enable: boolean
   }>(),
   {
     text: '',
+    enable: true,
   },
 )
 </script>
 
 <template>
-  <VTooltip :popper-triggers="['hover']" v-bind="$attrs">
+  <VTooltip v-if="enable" :popper-triggers="['hover']" v-bind="$attrs">
     <slot />
     <template #popper>
       <slot name="text">
         {{ text }}
       </slot>
     </template>
   </VTooltip>
+  <slot v-else />
 </template>