|
|
@@ -6,6 +6,8 @@ import { computed, onBeforeUnmount, onMounted, reactive, useSlots } from 'vue';
|
|
|
import { useNamespace } from '@vben-core/composables';
|
|
|
import { VbenIcon, VbenTooltip } from '@vben-core/shadcn-ui';
|
|
|
|
|
|
+import qs from 'qs';
|
|
|
+
|
|
|
import { MenuBadge } from '../components';
|
|
|
import { useMenu, useMenuContext, useSubMenuContext } from '../hooks';
|
|
|
|
|
|
@@ -54,6 +56,7 @@ const item: MenuItemRegistered = reactive({
|
|
|
active,
|
|
|
parentPaths: parentPaths.value,
|
|
|
path: props.path || '',
|
|
|
+ query: props.query,
|
|
|
});
|
|
|
|
|
|
/**
|
|
|
@@ -81,42 +84,50 @@ onBeforeUnmount(() => {
|
|
|
});
|
|
|
</script>
|
|
|
<template>
|
|
|
- <li
|
|
|
- :class="[
|
|
|
- rootMenu.theme,
|
|
|
- b(),
|
|
|
- is('active', active),
|
|
|
- is('disabled', disabled),
|
|
|
- is('collapse-show-title', collapseShowTitle),
|
|
|
- ]"
|
|
|
- role="menuitem"
|
|
|
- @click.stop="handleClick"
|
|
|
+ <a
|
|
|
+ :href="
|
|
|
+ (item.parentPaths.at(-1) ?? '') +
|
|
|
+ (item?.query ? `?${qs.stringify(item?.query)}` : '')
|
|
|
+ "
|
|
|
+ @click.prevent.stop="handleClick"
|
|
|
>
|
|
|
- <VbenTooltip
|
|
|
- v-if="showTooltip"
|
|
|
- :content-class="[rootMenu.theme]"
|
|
|
- side="right"
|
|
|
+ <li
|
|
|
+ :class="[
|
|
|
+ rootMenu.theme,
|
|
|
+ b(),
|
|
|
+ is('active', active),
|
|
|
+ is('disabled', disabled),
|
|
|
+ is('collapse-show-title', collapseShowTitle),
|
|
|
+ ]"
|
|
|
+ role="menuitem"
|
|
|
>
|
|
|
- <template #trigger>
|
|
|
- <div :class="[nsMenu.be('tooltip', 'trigger')]">
|
|
|
- <VbenIcon :class="nsMenu.e('icon')" :icon="menuIcon" fallback />
|
|
|
- <slot></slot>
|
|
|
- <span v-if="collapseShowTitle" :class="nsMenu.e('name')">
|
|
|
- <slot name="title"></slot>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <slot name="title"></slot>
|
|
|
- </VbenTooltip>
|
|
|
- <div v-show="!showTooltip" :class="[e('content')]">
|
|
|
- <MenuBadge
|
|
|
- v-if="rootMenu.props.mode !== 'horizontal'"
|
|
|
- class="right-2"
|
|
|
- v-bind="props"
|
|
|
- />
|
|
|
- <VbenIcon :class="nsMenu.e('icon')" :icon="menuIcon" />
|
|
|
- <slot></slot>
|
|
|
- <slot name="title"></slot>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
+ <!-- -->
|
|
|
+ <VbenTooltip
|
|
|
+ v-if="showTooltip"
|
|
|
+ :content-class="[rootMenu.theme]"
|
|
|
+ side="right"
|
|
|
+ >
|
|
|
+ <template #trigger>
|
|
|
+ <div :class="[nsMenu.be('tooltip', 'trigger')]">
|
|
|
+ <VbenIcon :class="nsMenu.e('icon')" :icon="menuIcon" fallback />
|
|
|
+ <slot></slot>
|
|
|
+ <span v-if="collapseShowTitle" :class="nsMenu.e('name')">
|
|
|
+ <slot name="title"></slot>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <slot name="title"></slot>
|
|
|
+ </VbenTooltip>
|
|
|
+ <div v-show="!showTooltip" :class="[e('content')]">
|
|
|
+ <MenuBadge
|
|
|
+ v-if="rootMenu.props.mode !== 'horizontal'"
|
|
|
+ class="right-2"
|
|
|
+ v-bind="props"
|
|
|
+ />
|
|
|
+ <VbenIcon :class="nsMenu.e('icon')" :icon="menuIcon" />
|
|
|
+ <slot></slot>
|
|
|
+ <slot name="title"></slot>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </a>
|
|
|
</template>
|