diff --git a/cds-fontend-2025.V1/src/layouts/modules/global-menu/modules/vertical-mix-menu.vue b/cds-fontend-2025.V1/src/layouts/modules/global-menu/modules/vertical-mix-menu.vue index 3cfe230..b44245d 100644 --- a/cds-fontend-2025.V1/src/layouts/modules/global-menu/modules/vertical-mix-menu.vue +++ b/cds-fontend-2025.V1/src/layouts/modules/global-menu/modules/vertical-mix-menu.vue @@ -12,6 +12,8 @@ import { $t } from '@/locales'; import { useMenu, useMixMenuContext } from '../../../context'; import FirstLevelMenu from '../components/first-level-menu.vue'; import GlobalLogo from '../../global-logo/index.vue'; +import { h } from 'vue'; +import { NTooltip} from 'naive-ui'; defineOptions({ name: 'VerticalMixMenu' @@ -67,6 +69,50 @@ function updateExpandedKeys() { expandedKeys.value = routeStore.getSelectedMenuKeyPath(selectedKey.value); } +//菜单文本超长时显示 Tooltip +const renderMenuLabel = (option: any) => { + if (option.children) { + return h('span', option.label); + } + + const MAX_LENGTH = 8; // 菜单宽度超长阈值,超过8个字符显示Tooltip + const needsTooltip = option.label && option.label.length > MAX_LENGTH; + + if (!needsTooltip) { + return h('span', { + style: { + display: 'inline-block', + maxWidth: '100%', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap' + } + }, option.label); + } + + return h( + NTooltip, + { + placement: 'right',// 显示在菜单右侧,防止遮挡 + trigger: 'hover', + style: { maxWidth: '300px' } + }, + { + trigger: () => h('span', { + style: { + display: 'inline-block', + maxWidth: '100%', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + verticalAlign: 'bottom' + } + }, option.label), + default: () => option.label + } + ); +}; + watch( () => route.name, () => { @@ -116,6 +162,7 @@ watch( :options="childLevelMenus" :inverted="inverted" :indent="18" + :render-label="renderMenuLabel" @update:value="routerPushByKeyWithMetaQuery" />