From ae72cccbb94df40acdff49920bdabe6055b92bb7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=80=E4=B8=87?=
 <52823142+Ten-K@users.noreply.github.com>
Date: Fri, 29 Oct 2021 18:41:57 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=8F=9C=E5=8D=95=E5=90=8D=E7=A7=B0?=
 =?UTF-8?q?=E8=BF=87=E9=95=BF=E6=B7=BB=E5=8A=A0tooltip=20(#78)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 菜单名称过长添加tooltip
---
 src/layout/components/sidebar/sidebarItem.vue | 71 +++++++++++++++++--
 src/layout/types.ts                           |  1 +
 2 files changed, 68 insertions(+), 4 deletions(-)

diff --git a/src/layout/components/sidebar/sidebarItem.vue b/src/layout/components/sidebar/sidebarItem.vue
index 160ddb417..7e698ca42 100644
--- a/src/layout/components/sidebar/sidebarItem.vue
+++ b/src/layout/components/sidebar/sidebarItem.vue
@@ -1,8 +1,13 @@
 <script setup lang="ts">
 import path from "path";
-import { PropType, ref } from "vue";
+import { storageLocal } from "/@/utils/storage";
+import { PropType, ref, nextTick } from "vue";
 import { childrenType } from "../../types";
 import Icon from "/@/components/ReIcon/src/Icon.vue";
+const layout = ref(
+  storageLocal.getItem("responsive-layout") || "vertical-dark"
+);
+const menuMode = layout.value.layout.split("-")[0] === "vertical";
 
 const props = defineProps({
   item: {
@@ -19,6 +24,28 @@ const props = defineProps({
 });
 
 const onlyOneChild: childrenType = ref(null);
+// 存放菜单是否存在showTooltip属性标识
+const hoverMenuMap = new WeakMap();
+// 存储菜单文本dom元素
+const menuTextRef = ref(null);
+
+function hoverMenu(key) {
+  // 如果当前菜单showTooltip属性已存在，退出计算
+  if (hoverMenuMap.get(key)) return;
+
+  nextTick(() => {
+    // 如果文本内容的整体宽度大于其可视宽度，则文本溢出
+    menuTextRef.value?.scrollWidth > menuTextRef.value?.clientWidth
+      ? Object.assign(key, {
+          showTooltip: true
+        })
+      : Object.assign(key, {
+          showTooltip: false
+        });
+
+    hoverMenuMap.set(key, true);
+  });
+}
 
 function hasOneShowingChild(
   children: childrenType[] = [],
@@ -64,8 +91,23 @@ function resolvePath(routePath) {
         "
       />
       <template #title>
-        <div style="display: flex; align-items: center">
-          <span>{{ $t(onlyOneChild.meta.title) }}</span>
+        <div style="display: flex; align-items: center; overflow: hidden">
+          <span v-if="!menuMode">{{ $t(onlyOneChild.meta.title) }}</span>
+          <el-tooltip
+            v-else
+            placement="top"
+            :offset="-10"
+            :disabled="!onlyOneChild.showTooltip"
+          >
+            <template #content> {{ $t(onlyOneChild.meta.title) }} </template>
+            <span
+              ref="menuTextRef"
+              style="overflow: hidden; text-overflow: ellipsis"
+              @mouseover="hoverMenu(onlyOneChild)"
+            >
+              {{ $t(onlyOneChild.meta.title) }}
+            </span>
+          </el-tooltip>
           <Icon
             v-if="onlyOneChild.meta.extraIcon"
             :svg="onlyOneChild.meta.extraIcon.svg ? true : false"
@@ -84,7 +126,28 @@ function resolvePath(routePath) {
   >
     <template #title>
       <i v-show="props.item.meta.icon" :class="props.item.meta.icon"></i>
-      <span>{{ $t(props.item.meta.title) }}</span>
+      <span v-if="!menuMode">{{ $t(props.item.meta.title) }}</span>
+
+      <el-tooltip
+        v-else
+        placement="top"
+        :offset="-10"
+        :disabled="!props.item.showTooltip"
+      >
+        <template #content> {{ $t(props.item.meta.title) }} </template>
+        <div
+          ref="menuTextRef"
+          style="
+            display: inline-block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            width: 125px;
+          "
+          @mouseover="hoverMenu(props.item)"
+        >
+          {{ $t(props.item.meta.title) }}
+        </div>
+      </el-tooltip>
       <Icon
         v-if="props.item.meta.extraIcon"
         :svg="props.item.meta.extraIcon.svg ? true : false"
diff --git a/src/layout/types.ts b/src/layout/types.ts
index 949e4cdd6..aff3667f8 100644
--- a/src/layout/types.ts
+++ b/src/layout/types.ts
@@ -62,4 +62,5 @@ export type childrenType = {
       name?: string;
     };
   };
+  showTooltip?: boolean;
 };