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

fantastic-admin · Jan 25, 2024 · 95a1b28 · 95a1b28
1 parent 7006084
commit 95a1b28
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 41 deletions.
diff --git a/src/layouts/components/Menu/item.vue b/src/layouts/components/Menu/item.vue
@@ -44,48 +44,50 @@ defineExpose({
     }"
   >
     <router-link v-slot="{ href, navigate }" custom :to="uniqueKey.at(-1) ?? ''">
-      <component
-        :is="subMenu ? 'div' : 'a'" v-bind="{
-          ...(!subMenu && {
-            href: item.meta?.link ? item.meta.link : href,
-            target: item.meta?.link ? '_blank' : '_self',
-            class: 'no-underline',
-          }),
-        }" 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.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" v-on="{
-          ...(!subMenu && {
-            click: navigate,
-          }),
-        }"
-      >
-        <div
-          class="inline-flex flex-1 items-center justify-center gap-[12px]" :class="{
-            'flex-col': rootMenu.isMenuPopup && level === 0 && rootMenu.props.mode === 'vertical',
-            'gap-1!': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
-            'w-full': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'vertical',
-          }" :style="indentStyle"
+      <HTooltip :enable="rootMenu.isMenuPopup && level === 0 && !subMenu" :text="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" placement="right" class="w-full">
+        <component
+          :is="subMenu ? 'div' : 'a'" v-bind="{
+            ...(!subMenu && {
+              href: item.meta?.link ? item.meta.link : href,
+              target: item.meta?.link ? '_blank' : '_self',
+              class: 'no-underline',
+            }),
+          }" 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.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" v-on="{
+            ...(!subMenu && {
+              click: navigate,
+            }),
+          }"
         >
-          <SvgIcon v-if="props.item.meta?.icon" :name="props.item.meta.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': rootMenu.isMenuPopup && level === 0 && rootMenu.props.mode === 'vertical',
+              'gap-1!': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
+              'w-full': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'vertical',
+            }" :style="indentStyle"
           >
-            {{ typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.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]',
-          ]"
-        />
-      </component>
+            <SvgIcon v-if="props.item.meta?.icon" :name="props.item.meta.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,
+              }"
+            >
+              {{ typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.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]',
+            ]"
+          />
+        </component>
+      </HTooltip>
     </router-link>
   </div>
 </template>
diff --git a/src/layouts/ui-kit/HTooltip.vue b/src/layouts/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>