| | |
| | | <template> |
| | | <Menu |
| | | v-bind="getBindValues" |
| | | @select="handleSelect" |
| | | :activeName="activeName" |
| | | :openNames="getOpenKeys" |
| | | :class="prefixCls" |
| | | :activeSubMenuNames="activeSubMenuNames" |
| | | @select="handleSelect" |
| | | > |
| | | <template v-for="item in items" :key="item.path"> |
| | | <SimpleSubMenu |
| | |
| | | </Menu> |
| | | </template> |
| | | <script lang="ts"> |
| | | import type { PropType } from 'vue'; |
| | | import type { MenuState } from './types'; |
| | | import type { Menu as MenuType } from '/@/router/types'; |
| | | |
| | | import type { RouteLocationNormalizedLoaded } from 'vue-router'; |
| | | import { defineComponent, computed, ref, unref, reactive, toRefs, watch } from 'vue'; |
| | | import { useDesign } from '/@/hooks/web/useDesign'; |
| | | |
| | | import Menu from './components/Menu.vue'; |
| | | import SimpleSubMenu from './SimpleSubMenu.vue'; |
| | | import { listenerLastChangeTab } from '/@/logics/mitt/tabChange'; |
| | | import { listenerRouteChange } from '/@/logics/mitt/routeChange'; |
| | | import { propTypes } from '/@/utils/propTypes'; |
| | | import { REDIRECT_NAME } from '/@/router/constant'; |
| | | import { RouteLocationNormalizedLoaded, useRouter } from 'vue-router'; |
| | | import { isFunction } from '/@/utils/is'; |
| | | import { useRouter } from 'vue-router'; |
| | | import { isFunction, isUrl } from '/@/utils/is'; |
| | | import { openWindow } from '/@/utils'; |
| | | |
| | | import { useOpenKeys } from './useOpenKeys'; |
| | | export default defineComponent({ |
| | |
| | | beforeClickFn: { |
| | | type: Function as PropType<(key: string) => Promise<boolean>>, |
| | | }, |
| | | isSplitMenu: propTypes.bool, |
| | | }, |
| | | emits: ['menuClick'], |
| | | setup(props, { attrs, emit }) { |
| | |
| | | const { currentRoute } = useRouter(); |
| | | const { prefixCls } = useDesign('simple-menu'); |
| | | const { items, accordion, mixSider, collapse } = toRefs(props); |
| | | |
| | | const { setOpenKeys, getOpenKeys } = useOpenKeys( |
| | | menuState, |
| | | items, |
| | | accordion, |
| | | mixSider, |
| | | collapse |
| | | collapse, |
| | | ); |
| | | |
| | | const getBindValues = computed(() => ({ ...attrs, ...props })); |
| | |
| | | setOpenKeys(currentRoute.value.path); |
| | | } |
| | | }, |
| | | { immediate: true } |
| | | { immediate: true }, |
| | | ); |
| | | |
| | | listenerLastChangeTab((route) => { |
| | | watch( |
| | | () => props.items, |
| | | () => { |
| | | if (!props.isSplitMenu) { |
| | | return; |
| | | } |
| | | setOpenKeys(currentRoute.value.path); |
| | | }, |
| | | { flush: 'post' }, |
| | | ); |
| | | |
| | | listenerRouteChange((route) => { |
| | | if (route.name === REDIRECT_NAME) return; |
| | | |
| | | currentActiveMenu.value = route.meta?.currentActiveMenu as string; |
| | |
| | | return; |
| | | } |
| | | const path = (route || unref(currentRoute)).path; |
| | | |
| | | menuState.activeName = path; |
| | | |
| | | setOpenKeys(path); |
| | | // if (unref(currentActiveMenu)) return; |
| | | } |
| | | |
| | | async function handleSelect(key: string) { |
| | | if (isUrl(key)) { |
| | | openWindow(key); |
| | | return; |
| | | } |
| | | const { beforeClickFn } = props; |
| | | if (beforeClickFn && isFunction(beforeClickFn)) { |
| | | const flag = await beforeClickFn(key); |
| | | if (!flag) return; |
| | | } |
| | | |
| | | emit('menuClick', key); |
| | | |
| | | isClickGo.value = true; |