feat: 添加目录、菜单文字超出显示 Tooltip 文字提示demo

locales/en.yaml

@@ -101,6 +101,8 @@ menus:
   hsPureTableBase: Base Usage
   hsPureTableHigh: High Usage
   hsTree: Big Data Tree
+  hsMenuoverflow: Menu Overflow Show Tooltip Text
+  hsChildMenuoverflow: Child Menu Overflow Show Tooltip Text
 status:
   hsLoad: Loading...
 login:

locales/zh-CN.yaml

@@ -101,6 +101,8 @@ menus:
   hsPureTableBase: 基础用法（23个示例）
   hsPureTableHigh: 高级用法（8个示例）
   hsTree: 大数据树业务组件
+  hsMenuoverflow: 目录超出显示 Tooltip 文字提示
+  hsChildMenuoverflow: 菜单超出显示 Tooltip 文字提示
 status:
   hsLoad: 加载中...
 login:

src/layout/components/sidebar/sidebarItem.vue

@@ -203,7 +203,7 @@ function resolvePath(routePath) {
             placement="top"
             :effect="tooltipEffect"
             :offset="-10"
-            :disabled="!onlyOneChild.showTooltip"
+            :disabled="!isCollapse && !onlyOneChild.showTooltip"
           >
             <template #content>
               {{ transformI18n(onlyOneChild.meta.title) }}
@@ -249,7 +249,7 @@ function resolvePath(routePath) {
         placement="top"
         :effect="tooltipEffect"
         :offset="-10"
-        :disabled="!isCollapse || !props.item.showTooltip"
+        :disabled="!props.item.showTooltip"
       >
         <template #content>
           {{ transformI18n(props.item.meta.title) }}

src/layout/components/sidebar/vertical.vue

@@ -15,15 +15,8 @@ const showLogo = ref(
   storageLocal.getItem<StorageConfigs>("responsive-configure")?.showLogo ?? true
 );
 
-const {
+const { routers, device, pureApp, isCollapse, menuSelect, toggleSideBar } =
-  routers,
+  useNav();
-  device,
-  pureApp,
-  isCollapse,
-  tooltipEffect,
-  menuSelect,
-  toggleSideBar
-} = useNav();
 
 const subMenuData = ref([]);
 
@@ -76,7 +69,6 @@ watch(
         router
         unique-opened
         mode="vertical"
-        :popper-effect="tooltipEffect"
         class="outer-most select-none"
         :collapse="isCollapse"
         :default-active="route.path"

src/router/enums.ts

@@ -13,13 +13,14 @@ const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ，所以
   list = 10,
   permission = 11,
   system = 12,
-  tabs = 13,
+  menuoverflow = 13,
-  formdesign = 14,
+  tabs = 14,
-  flowchart = 15,
+  formdesign = 15,
-  ppt = 16,
+  flowchart = 16,
-  editor = 17,
+  ppt = 17,
-  guide = 18,
+  editor = 18,
-  about = 19;
+  guide = 19,
+  about = 20;
 
 export {
   home,
@@ -35,6 +36,7 @@ export {
   list,
   permission,
   system,
+  menuoverflow,
   tabs,
   formdesign,
   flowchart,

src/router/modules/menuoverflow.ts

@@ -0,0 +1,22 @@
+import { $t } from "@/plugins/i18n";
+import { menuoverflow } from "@/router/enums";
+
+export default {
+  path: "/menuoverflow",
+  redirect: "/menuoverflow/index",
+  meta: {
+    title: $t("menus.hsMenuoverflow"),
+    rank: menuoverflow
+  },
+  children: [
+    {
+      path: "/menuoverflow/index",
+      name: "MenuOverflow",
+      component: () => import("@/views/menuoverflow/index.vue"),
+      meta: {
+        title: $t("menus.hsChildMenuoverflow"),
+        showParent: true
+      }
+    }
+  ]
+} as RouteConfigsTable;

src/views/menuoverflow/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineOptions({
+  name: "MenuOverflow"
+});
+</script>
+
+<template>
+  <div>目录、菜单文字超出显示 Tooltip 文字提示</div>
+</template>