index.tsx
2.92 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import './index.less';
import { PropType, toRef } from 'vue';
import { computed, defineComponent, unref } from 'vue';
import { BasicMenu } from '/@/components/Menu';
import { AppLogo } from '/@/components/Application';
import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useGo } from '/@/hooks/web/usePage';
import { useSplitMenu } from './useLayoutMenu';
import { openWindow } from '/@/utils';
import { propTypes } from '/@/utils/propTypes';
import { isUrl } from '/@/utils/is';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
export default defineComponent({
name: 'LayoutMenu',
props: {
theme: propTypes.oneOf(['light', 'dark']),
splitType: {
type: Number as PropType<MenuSplitTyeEnum>,
default: MenuSplitTyeEnum.NONE,
},
isHorizontal: propTypes.bool,
// menu Mode
menuMode: {
type: [String] as PropType<Nullable<MenuModeEnum>>,
default: '',
},
},
setup(props) {
const go = useGo();
const {
getMenuMode,
getMenuType,
getCollapsedShowTitle,
getMenuTheme,
getCollapsed,
getAccordion,
getIsSidebarType,
} = useMenuSetting();
const { getShowLogo } = useRootSetting();
const { menusRef } = useSplitMenu(toRef(props, 'splitType'));
const getComputedMenuMode = computed(() => props.menuMode || unref(getMenuMode));
const getComputedMenuTheme = computed(() => props.theme || unref(getMenuTheme));
const showLogo = computed(() => unref(getShowLogo) && unref(getIsSidebarType));
const appendClass = computed(() => props.splitType === MenuSplitTyeEnum.TOP);
/**
* click menu
* @param menu
*/
function handleMenuClick(path: string) {
go(path);
}
/**
* before click menu
* @param menu
*/
async function beforeMenuClickFn(path: string) {
if (!isUrl(path)) {
return true;
}
openWindow(path);
return false;
}
function renderHeader() {
if (!unref(showLogo)) return null;
return (
<AppLogo
showTitle={!unref(getCollapsed)}
class={[`layout-menu__logo`, unref(getComputedMenuTheme)]}
theme={unref(getComputedMenuTheme)}
/>
);
}
return () => {
return (
<BasicMenu
beforeClickFn={beforeMenuClickFn}
isHorizontal={props.isHorizontal}
type={unref(getMenuType)}
mode={unref(getComputedMenuMode)}
collapsedShowTitle={unref(getCollapsedShowTitle)}
theme={unref(getComputedMenuTheme)}
items={unref(menusRef)}
accordion={unref(getAccordion)}
onMenuClick={handleMenuClick}
appendClass={unref(appendClass)}
showLogo={unref(showLogo)}
>
{{
header: () => renderHeader(),
}}
</BasicMenu>
);
};
},
});