reactor:优化菜单中名字过长;

src/components/TextTooltip/index.vue

@@ -0,0 +1,45 @@
+<template>
+	<el-tooltip :content="props.tooltipContent ? props.tooltipContent : props.content" placement="right" :disabled="isShow" effect="light">
+		<template #content>
+			<!-- 此处的默认值先看tooltipContent有没有，没有就给默认content -->
+			<slot name="tooltipContent">{{ props.tooltipContent ? props.tooltipContent : props.content }}</slot>
+		</template>
+		<div class="content" @mouseover="isShowTooltip">
+			<span ref="contentRef">
+				<!-- 给一个没有写插槽的默认值，兼容纯文本的情况 -->
+				<slot name="content">{{ props.content }}</slot>
+			</span>
+		</div>
+	</el-tooltip>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+// 使用withDefaults来给props赋默认值
+const props = defineProps({
+	content: {
+		type: String,
+		default: '',
+	},
+	tooltipContent: {
+		type: String,
+		default: '',
+	},
+});
+// 使用isShow来控制tooltip是否显示
+let isShow = ref<boolean>(true);
+// 在span标签上定义一个ref
+const contentRef = ref();
+const isShowTooltip = function (): void {
+	// 计算span标签的offsetWidth与盒子元素的offsetWidth，给isShow赋值
+	isShow.value = contentRef.value.parentNode.offsetWidth >= contentRef.value.offsetWidth;
+};
+</script>
+<style>
+.content {
+	display: inline-block;
+	max-width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+</style>

src/layout/navMenu/horizontal.vue

@@ -6,8 +6,8 @@
 				<template v-for="val in menuLists">
 					<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
 						<template #title>
-							<SvgIcon :name="val.meta.icon" />
-							<span>{{ val.meta.title }}</span>
+							<SvgIcon :name="val.meta.icon" />\
+              <TextTooltip :content="val.meta.title" />
 						</template>
 						<SubItem :chil="val.children" />
 					</el-sub-menu>
@@ -15,12 +15,12 @@
 						<el-menu-item :index="val.path" :key="val.path">
 							<template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
 								<SvgIcon :name="val.meta.icon" />
-								{{ val.meta.title }}
+                <TextTooltip :content="val.meta.title" />
 							</template>
 							<template #title v-else>
 								<a class="w100" @click.prevent="onALinkClick(val)">
 									<SvgIcon :name="val.meta.icon" />
-									{{ val.meta.title }}
+                  <TextTooltip :content="val.meta.title" />
 								</a>
 							</template>
 						</el-menu-item>
@@ -42,6 +42,7 @@ import mittBus from '@/utils/mitt';
 
 // 引入组件
 const SubItem = defineAsyncComponent(() => import('@/layout/navMenu/subItem.vue'));
+const TextTooltip = defineAsyncComponent(() => import('@/components/TextTooltip/index.vue'));
 // 定义父组件传过来的值
 const props = defineProps({
 	// 菜单列表

src/layout/navMenu/subItem.vue

@@ -18,7 +18,7 @@
      <el-sub-menu :index="val.path" :key="val.path" v-if="val.children && val.children.length > 0">
 			<template #title>
 				<SvgIcon :name="val.meta.icon" />
-				<span>{{ val.meta.title }}</span>
+        <TextTooltip :content="val.meta.title" />
 			</template>
 			<sub-item :chil="val.children" />
 		</el-sub-menu>
@@ -26,12 +26,12 @@
 			<el-menu-item :index="val.path" :key="val.path">
 				<template v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
 					<SvgIcon :name="val.meta.icon" />
-					<span>{{ val.meta.title }}</span>
+          <TextTooltip :content="val.meta.title" />
 				</template>
 				<template v-else>
 					<a class="w100" @click.prevent="onALinkClick(val)">
 						<SvgIcon :name="val.meta.icon" />
-						{{ val.meta.title }}
+            <TextTooltip :content="val.meta.title" />
 					</a>
 				</template>
 			</el-menu-item>
@@ -46,6 +46,7 @@ import { verifyUrl } from '@/utils/toolsValidate';
 import other from '@/utils/other';
 // 引入组件
 const SubThreeItem = defineAsyncComponent(() => import('@/layout/navMenu/subThreeItem.vue'));
+const TextTooltip = defineAsyncComponent(() => import('@/components/TextTooltip/index.vue'));
 // 定义父组件传过来的值
 const props = defineProps({
 	chil: {

src/layout/navMenu/subThreeItem.vue

@@ -18,13 +18,13 @@
 				<template v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
 					<div @click="pushRouter(val)" class="path-inner">
 						<SvgIcon :name="val.meta.icon" v-if="val.meta?.icon" class="icons" />
-						<span :title="val.meta.title" class="text-no-wrap">{{ val.meta.title }}</span>
+            <TextTooltip :content="val.meta.title" />
 					</div>
 				</template>
 				<template v-else>
 					<a class="w100 path-inner" @click.prevent="onALinkClick(val)">
 						<SvgIcon :name="val.meta.icon" />
-						{{ val.meta.title }}
+            <TextTooltip :content="val.meta.title" />
 					</a>
 				</template>
 			</div>
@@ -33,12 +33,13 @@
 </template>
 
 <script setup lang="ts" name="navMenuSubItemThree">
-import { computed, ref, watch } from 'vue';
+import { computed, defineAsyncComponent, ref, watch } from "vue";
 import { useRouter, useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '@/stores/themeConfig';
 import { verifyUrl } from '@/utils/toolsValidate';
 
+const TextTooltip = defineAsyncComponent(() => import('@/components/TextTooltip/index.vue'));
 // 定义父组件传过来的值
 const props = defineProps({
 	chil: {

src/layout/navMenu/vertical.vue

@@ -11,7 +11,7 @@
 			<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
 				<template #title>
 					<SvgIcon :name="val.meta.icon" />
-					<span>{{ val.meta.title }}</span>
+          <TextTooltip :content="val.meta.title" />
 				</template>
 				<SubItem :chil="val.children" />
 			</el-sub-menu>
@@ -19,7 +19,7 @@
 				<el-menu-item :index="val.path" :key="val.path">
 					<SvgIcon :name="val.meta.icon" />
 					<template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
-						<span>{{ val.meta.title }}</span>
+            <TextTooltip :content="val.meta.title" />
 					</template>
 					<template #title v-else>
 						<a class="w100" @click.prevent="onALinkClick(val)">{{ val.meta.title }}</a>
@@ -39,6 +39,7 @@ import { verifyUrl } from '@/utils/toolsValidate';
 
 // 引入组件
 const SubItem = defineAsyncComponent(() => import('@/layout/navMenu/subItem.vue'));
+const TextTooltip = defineAsyncComponent(() => import('@/components/TextTooltip/index.vue'));
 
 // 定义父组件传过来的值
 const props = defineProps({