Merge remote-tracking branch 'origin/main'
This commit is contained in:
commit
019797ed8c
@ -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"
|
||||
/>
|
||||
</SimpleScrollbar>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user