index.tsx
3.18 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
113
114
115
116
117
118
119
120
import './index.less';
import { computed, defineComponent, ref, unref, CSSProperties } from 'vue';
import { Layout } from 'ant-design-vue';
import LayoutMenu from '../menu';
import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useTrigger, useDragLine, useSiderEvent } from './useLayoutSider';
import { useAppInject } from '/@/hooks/web/useAppInject';
import { useDesign } from '/@/hooks/web/useDesign';
export default defineComponent({
name: 'LayoutSideBar',
setup() {
const dragBarRef = ref<ElRef>(null);
const sideRef = ref<ElRef>(null);
const {
getCollapsed,
getMenuWidth,
getSplit,
getMenuTheme,
getRealWidth,
getMenuHidden,
getMenuFixed,
getIsMixMode,
} = useMenuSetting();
const { prefixCls } = useDesign('layout-sideBar');
const { getTriggerAttr, getTriggerSlot } = useTrigger();
const { getIsMobile } = useAppInject();
const { renderDragLine } = useDragLine(sideRef, dragBarRef);
const { getCollapsedWidth, onBreakpointChange, onCollapseChange } = useSiderEvent();
const getMode = computed(() => {
return unref(getSplit) ? MenuModeEnum.INLINE : null;
});
const getSplitType = computed(() => {
return unref(getSplit) ? MenuSplitTyeEnum.LEFT : MenuSplitTyeEnum.NONE;
});
const showClassSideBarRef = computed(() => {
return unref(getSplit) ? unref(getMenuHidden) : true;
});
const getSiderClass = computed(() => {
return [
prefixCls,
{
[`${prefixCls}--fixed`]: unref(getMenuFixed),
hidden: !unref(showClassSideBarRef),
[`${prefixCls}--mix`]: unref(getIsMixMode),
},
];
});
const getHiddenDomStyle = computed(
(): CSSProperties => {
const width = `${unref(getRealWidth)}px`;
return {
width: width,
overflow: 'hidden',
flex: `0 0 ${width}`,
maxWidth: width,
minWidth: width,
transition: 'all 0.2s',
};
}
);
function renderDefault() {
return (
<>
<LayoutMenu
theme={unref(getMenuTheme)}
menuMode={unref(getMode)}
splitType={unref(getSplitType)}
/>
{renderDragLine()}
</>
);
}
return () => {
return (
<>
{unref(getMenuFixed) && !unref(getIsMobile) && (
<div style={unref(getHiddenDomStyle)} class={{ hidden: !unref(showClassSideBarRef) }} />
)}
<Layout.Sider
ref={sideRef}
breakpoint="lg"
collapsible
class={unref(getSiderClass)}
width={unref(getMenuWidth)}
collapsed={unref(getCollapsed)}
collapsedWidth={unref(getCollapsedWidth)}
theme={unref(getMenuTheme)}
onCollapse={onCollapseChange}
onBreakpoint={onBreakpointChange}
{...unref(getTriggerAttr)}
>
{{
...unref(getTriggerSlot),
default: () => renderDefault(),
}}
</Layout.Sider>
</>
);
};
},
});