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 { useMenu, useMixMenuContext } from '../../../context';
|
||||||
import FirstLevelMenu from '../components/first-level-menu.vue';
|
import FirstLevelMenu from '../components/first-level-menu.vue';
|
||||||
import GlobalLogo from '../../global-logo/index.vue';
|
import GlobalLogo from '../../global-logo/index.vue';
|
||||||
|
import { h } from 'vue';
|
||||||
|
import { NTooltip} from 'naive-ui';
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'VerticalMixMenu'
|
name: 'VerticalMixMenu'
|
||||||
@ -67,6 +69,50 @@ function updateExpandedKeys() {
|
|||||||
expandedKeys.value = routeStore.getSelectedMenuKeyPath(selectedKey.value);
|
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(
|
watch(
|
||||||
() => route.name,
|
() => route.name,
|
||||||
() => {
|
() => {
|
||||||
@ -116,6 +162,7 @@ watch(
|
|||||||
:options="childLevelMenus"
|
:options="childLevelMenus"
|
||||||
:inverted="inverted"
|
:inverted="inverted"
|
||||||
:indent="18"
|
:indent="18"
|
||||||
|
:render-label="renderMenuLabel"
|
||||||
@update:value="routerPushByKeyWithMetaQuery"
|
@update:value="routerPushByKeyWithMetaQuery"
|
||||||
/>
|
/>
|
||||||
</SimpleScrollbar>
|
</SimpleScrollbar>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user