fix: 修复菜单项外部链接跳转问题
- 引入 isHttpUrl 工具函数用于判断 URL 类型 - 添加 isHttp 计算属性检测父路径是否为 HTTP 链接 - 修改菜单项渲染逻辑,对外部链接直接使用原地址跳转 - 调整 HTML 结构,将链接属性移到正确位置 - 确保内部路由和外部链接都能正常工作pull/337/head^2
parent
da3580cbd7
commit
e2fb3602f1
|
|
@ -5,6 +5,7 @@ import { computed, onBeforeUnmount, onMounted, reactive, useSlots } from 'vue';
|
||||||
|
|
||||||
import { useNamespace } from '@vben-core/composables';
|
import { useNamespace } from '@vben-core/composables';
|
||||||
import { VbenIcon, VbenTooltip } from '@vben-core/shadcn-ui';
|
import { VbenIcon, VbenTooltip } from '@vben-core/shadcn-ui';
|
||||||
|
import { isHttpUrl } from '@vben-core/shared/utils';
|
||||||
|
|
||||||
import qs from 'qs';
|
import qs from 'qs';
|
||||||
|
|
||||||
|
|
@ -33,6 +34,8 @@ const menuIcon = computed(() =>
|
||||||
active.value ? props.activeIcon || props.icon : props.icon,
|
active.value ? props.activeIcon || props.icon : props.icon,
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const isHttp = computed(() => isHttpUrl(item.parentPaths.at(-1)));
|
||||||
|
|
||||||
const isTopLevelMenuItem = computed(
|
const isTopLevelMenuItem = computed(
|
||||||
() => parentMenu.value?.type.name === 'Menu',
|
() => parentMenu.value?.type.name === 'Menu',
|
||||||
);
|
);
|
||||||
|
|
@ -92,45 +95,44 @@ onBeforeUnmount(() => {
|
||||||
(item?.query ? `?${qs.stringify(item?.query)}` : '')
|
(item?.query ? `?${qs.stringify(item?.query)}` : '')
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<a :href="href" @click.prevent.stop="handleClick">
|
<a
|
||||||
<li
|
:href="isHttp ? item.parentPaths.at(-1) : href"
|
||||||
:class="[
|
:class="[
|
||||||
rootMenu.theme,
|
rootMenu.theme,
|
||||||
b(),
|
b(),
|
||||||
is('active', active),
|
is('active', active),
|
||||||
is('disabled', disabled),
|
is('disabled', disabled),
|
||||||
is('collapse-show-title', collapseShowTitle),
|
is('collapse-show-title', collapseShowTitle),
|
||||||
]"
|
]"
|
||||||
role="menuitem"
|
role="menuitem"
|
||||||
|
@click.prevent.stop="handleClick"
|
||||||
|
>
|
||||||
|
<VbenTooltip
|
||||||
|
v-if="showTooltip"
|
||||||
|
:content-class="[rootMenu.theme]"
|
||||||
|
side="right"
|
||||||
>
|
>
|
||||||
<!-- -->
|
<template #trigger>
|
||||||
<VbenTooltip
|
<div :class="[nsMenu.be('tooltip', 'trigger')]">
|
||||||
v-if="showTooltip"
|
<VbenIcon :class="nsMenu.e('icon')" :icon="menuIcon" fallback />
|
||||||
:content-class="[rootMenu.theme]"
|
<slot></slot>
|
||||||
side="right"
|
<span v-if="collapseShowTitle" :class="nsMenu.e('name')">
|
||||||
>
|
<slot name="title"></slot>
|
||||||
<template #trigger>
|
</span>
|
||||||
<div :class="[nsMenu.be('tooltip', 'trigger')]">
|
</div>
|
||||||
<VbenIcon :class="nsMenu.e('icon')" :icon="menuIcon" fallback />
|
</template>
|
||||||
<slot></slot>
|
<slot name="title"></slot>
|
||||||
<span v-if="collapseShowTitle" :class="nsMenu.e('name')">
|
</VbenTooltip>
|
||||||
<slot name="title"></slot>
|
<div v-show="!showTooltip" :class="[e('content')]">
|
||||||
</span>
|
<MenuBadge
|
||||||
</div>
|
v-if="rootMenu.props.mode !== 'horizontal'"
|
||||||
</template>
|
class="right-2"
|
||||||
<slot name="title"></slot>
|
v-bind="props"
|
||||||
</VbenTooltip>
|
/>
|
||||||
<div v-show="!showTooltip" :class="[e('content')]">
|
<VbenIcon :class="nsMenu.e('icon')" :icon="menuIcon" />
|
||||||
<MenuBadge
|
<slot></slot>
|
||||||
v-if="rootMenu.props.mode !== 'horizontal'"
|
<slot name="title"></slot>
|
||||||
class="right-2"
|
</div>
|
||||||
v-bind="props"
|
|
||||||
/>
|
|
||||||
<VbenIcon :class="nsMenu.e('icon')" :icon="menuIcon" />
|
|
||||||
<slot></slot>
|
|
||||||
<slot name="title"></slot>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</a>
|
</a>
|
||||||
</router-link>
|
</router-link>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue