|
1
2
3
|
import { computed, defineComponent, nextTick, onMounted, ref, unref } from 'vue';
import { Layout } from 'ant-design-vue';
|
vben
authored
|
4
|
import LayoutTrigger from './LayoutTrigger';
|
vben
authored
|
5
|
import LayoutMenu from '/@/layouts/default/menu/LayoutMenu';
|
|
6
|
|
vben
authored
|
7
|
import { menuStore } from '/@/store/modules/menu';
|
|
8
|
import { appStore } from '/@/store/modules/app';
|
vben
authored
|
9
|
|
vben
authored
|
10
|
import { MenuModeEnum, MenuSplitTyeEnum, TriggerEnum } from '/@/enums/menuEnum';
|
vben
authored
|
11
|
import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/enums/appEnum';
|
vben
authored
|
12
|
|
|
13
|
import { useDebounce } from '/@/hooks/core/useDebounce';
|
vben
authored
|
14
|
|
|
15
16
17
18
19
20
21
22
23
24
25
26
27
|
export default defineComponent({
name: 'DefaultLayoutSideBar',
setup() {
const initRef = ref(false);
const brokenRef = ref(false);
const collapseRef = ref(true);
const dragBarRef = ref<Nullable<HTMLDivElement>>(null);
const sideRef = ref<any>(null);
const getProjectConfigRef = computed(() => {
return appStore.getProjectConfig;
});
|
vben
authored
|
28
29
30
31
32
33
34
|
const getMiniWidth = computed(() => {
const {
menuSetting: { collapsedShowTitle },
} = unref(getProjectConfigRef);
return collapsedShowTitle ? SIDE_BAR_SHOW_TIT_MINI_WIDTH : SIDE_BAR_MINI_WIDTH;
});
|
|
35
36
37
38
39
40
41
42
43
44
45
|
function onCollapseChange(val: boolean) {
if (initRef.value) {
collapseRef.value = val;
menuStore.commitCollapsedState(val);
} else {
const collapsed = appStore.getProjectConfig.menuSetting.collapsed;
!collapsed && menuStore.commitCollapsedState(val);
}
initRef.value = true;
}
|
vben
authored
|
46
|
// Menu area drag and drop-mouse movement
|
|
47
48
49
50
51
52
|
function handleMouseMove(ele: any, wrap: any, clientX: number) {
document.onmousemove = function (innerE) {
let iT = ele.left + ((innerE || event).clientX - clientX);
innerE = innerE || window.event;
// let tarnameb = innerE.target || innerE.srcElement;
const maxT = 600;
|
vben
authored
|
53
|
const minT = unref(getMiniWidth);
|
|
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
iT < 0 && (iT = 0);
iT > maxT && (iT = maxT);
iT < minT && (iT = minT);
ele.style.left = wrap.style.width = iT + 'px';
return false;
};
}
// 菜单区域拖拽 - 鼠标松开
function removeMouseup(ele: any) {
const wrap = unref(sideRef).$el;
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
const width = parseInt(wrap.style.width);
menuStore.commitDragStartState(false);
if (!menuStore.getCollapsedState) {
|
vben
authored
|
71
|
if (width > unref(getMiniWidth) + 20) {
|
|
72
73
74
75
76
|
setMenuWidth(width);
} else {
menuStore.commitCollapsedState(true);
}
} else {
|
vben
authored
|
77
|
if (width > unref(getMiniWidth)) {
|
|
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
|
setMenuWidth(width);
menuStore.commitCollapsedState(false);
}
}
ele.releaseCapture && ele.releaseCapture();
};
}
function setMenuWidth(width: number) {
appStore.commitProjectConfigState({
menuSetting: {
menuWidth: width,
},
});
}
function changeWrapWidth() {
const ele = unref(dragBarRef) as any;
const side = unref(sideRef);
const wrap = (side || {}).$el;
ele &&
(ele.onmousedown = (e: any) => {
menuStore.commitDragStartState(true);
wrap.style.transition = 'unset';
const clientX = (e || event).clientX;
ele.left = ele.offsetLeft;
handleMouseMove(ele, wrap, clientX);
removeMouseup(ele);
ele.setCapture && ele.setCapture();
return false;
});
}
function handleBreakpoint(broken: boolean) {
brokenRef.value = broken;
}
const getDragBarStyle = computed(() => {
if (menuStore.getCollapsedState) {
|
vben
authored
|
118
|
return { left: `${unref(getMiniWidth)}px` };
|
|
119
120
121
122
123
|
}
return {};
});
const getCollapsedWidth = computed(() => {
|
vben
authored
|
124
|
return unref(brokenRef) ? 0 : unref(getMiniWidth);
|
|
125
126
|
});
|
vben
authored
|
127
128
129
130
131
132
133
|
const showTrigger = computed(() => {
const {
menuSetting: { trigger },
} = unref(getProjectConfigRef);
return trigger !== TriggerEnum.NONE && trigger === TriggerEnum.FOOTER;
});
|
vben
authored
|
134
135
136
137
138
139
140
|
onMounted(() => {
nextTick(() => {
const [exec] = useDebounce(changeWrapWidth, 20);
exec();
});
});
|
vben
authored
|
141
142
143
144
145
146
147
148
149
150
151
152
|
function handleSiderClick(e: ChangeEvent) {
if (!e || !e.target || e.target.className !== 'basic-menu__content') return;
const { collapsed, show } = appStore.getProjectConfig.menuSetting;
if (!collapsed || !show) return;
appStore.commitProjectConfigState({
menuSetting: {
collapsed: false,
},
});
}
|
|
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
|
function renderDragLine() {
const { menuSetting: { hasDrag = true } = {} } = unref(getProjectConfigRef);
return (
<div
class={[`layout-sidebar__dargbar`, !hasDrag ? 'hide' : '']}
style={unref(getDragBarStyle)}
ref={dragBarRef}
/>
);
}
return () => {
const {
menuSetting: { theme, split: splitMenu },
} = unref(getProjectConfigRef);
const { getCollapsedState, getMenuWidthState } = menuStore;
|
vben
authored
|
169
170
171
172
173
174
175
176
177
178
179
180
181
|
const triggerDom = unref(showTrigger)
? {
trigger: () => <LayoutTrigger />,
}
: {};
const triggerAttr = unref(showTrigger)
? {}
: {
trigger: null,
};
|
|
182
183
|
return (
<Layout.Sider
|
vben
authored
|
184
|
onClick={handleSiderClick}
|
|
185
186
187
188
189
190
191
192
193
194
|
onCollapse={onCollapseChange}
breakpoint="md"
width={getMenuWidthState}
collapsed={getCollapsedState}
collapsible
collapsedWidth={unref(getCollapsedWidth)}
theme={theme}
class="layout-sidebar"
ref={sideRef}
onBreakpoint={handleBreakpoint}
|
vben
authored
|
195
|
{...triggerAttr}
|
|
196
197
|
>
{{
|
vben
authored
|
198
|
...triggerDom,
|
|
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
|
default: () => (
<>
<LayoutMenu
theme={theme}
menuMode={splitMenu ? MenuModeEnum.INLINE : null}
splitType={splitMenu ? MenuSplitTyeEnum.LEFT : MenuSplitTyeEnum.NONE}
/>
{renderDragLine()}
</>
),
}}
</Layout.Sider>
);
};
},
});
|