Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Simoje丶
vue-vben-admin
提交
de25557f
V
vue-vben-admin
项目概览
Simoje丶
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-vben-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
de25557f
编写于
12月 17, 2020
作者:
V
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix(menu): fix scrillbar not work
上级
689425e4
变更
11
隐藏空白更改
内联
并排
Showing
11 changed file
with
204 addition
and
157 deletion
+204
-157
CHANGELOG.zh_CN.md
CHANGELOG.zh_CN.md
+6
-0
src/components/Menu/src/BasicMenu.vue
src/components/Menu/src/BasicMenu.vue
+2
-1
src/layouts/default/header/index.vue
src/layouts/default/header/index.vue
+17
-1
src/layouts/default/menu/index.tsx
src/layouts/default/menu/index.tsx
+7
-1
src/layouts/default/setting/SettingDrawer.tsx
src/layouts/default/setting/SettingDrawer.tsx
+15
-5
src/layouts/default/setting/enum.ts
src/layouts/default/setting/enum.ts
+20
-14
src/layouts/default/setting/handler.ts
src/layouts/default/setting/handler.ts
+1
-0
src/layouts/default/sider/LayoutSider.tsx
src/layouts/default/sider/LayoutSider.tsx
+0
-121
src/layouts/default/sider/LayoutSider.vue
src/layouts/default/sider/LayoutSider.vue
+132
-0
src/layouts/default/sider/index.vue
src/layouts/default/sider/index.vue
+1
-1
src/layouts/default/sider/useLayoutSider.ts
src/layouts/default/sider/useLayoutSider.ts
+3
-13
未找到文件。
CHANGELOG.zh_CN.md
浏览文件 @
de25557f
## Wip
### 🐛 Bug Fixes
-
修复混合模式下滚动条丢失问题
## 2.0.0-rc.14 (2020-12-15)
### ✨ Features
...
...
src/components/Menu/src/BasicMenu.vue
浏览文件 @
de25557f
...
...
@@ -90,9 +90,10 @@
});
const
getMenuClass
=
computed
(()
=>
{
const
align
=
props
.
isHorizontal
&&
unref
(
getSplit
)
?
'
start
'
:
unref
(
getTopMenuAlign
);
return
[
prefixCls
,
`justify-
${
unref
(
getTopMenuAlign
)
}
`
,
`justify-
${
align
}
`
,
{
[
`
${
prefixCls
}
--hide-title`
]:
!
unref
(
showTitle
),
[
`
${
prefixCls
}
--collapsed-show-title`
]:
props
.
collapsedShowTitle
,
...
...
src/layouts/default/header/index.vue
浏览文件 @
de25557f
...
...
@@ -7,6 +7,7 @@
v-if=
"getShowHeaderLogo || getIsMobile"
:class=
"`$
{prefixCls}-logo`"
:theme="getHeaderTheme"
:style="getLogoWidth"
/>
<LayoutTrigger
v-if=
"(getShowContent && getShowHeaderTrigger && !getSplit) || getIsMobile"
...
...
@@ -103,7 +104,13 @@
},
setup
(
props
)
{
const
{
prefixCls
}
=
useDesign
(
'
layout-header
'
);
const
{
getShowTopMenu
,
getShowHeaderTrigger
,
getSplit
}
=
useMenuSetting
();
const
{
getShowTopMenu
,
getShowHeaderTrigger
,
getSplit
,
getIsMixMode
,
getMenuWidth
,
}
=
useMenuSetting
();
const
{
getShowLocale
}
=
useLocaleSetting
();
const
{
getUseErrorHandle
}
=
useRootSetting
();
...
...
@@ -131,6 +138,14 @@
];
});
const
getLogoWidth
=
computed
(()
=>
{
if
(
!
unref
(
getIsMixMode
))
{
return
{};
}
const
width
=
unref
(
getMenuWidth
)
<
180
?
180
:
unref
(
getMenuWidth
);
return
{
width
:
`
${
width
}
px`
};
});
const
getSplitType
=
computed
(()
=>
{
return
unref
(
getSplit
)
?
MenuSplitTyeEnum
.
TOP
:
MenuSplitTyeEnum
.
NONE
;
});
...
...
@@ -157,6 +172,7 @@
getShowNotice
,
getUseLockPage
,
getUseErrorHandle
,
getLogoWidth
,
};
},
});
...
...
src/layouts/default/menu/index.tsx
浏览文件 @
de25557f
...
...
@@ -47,6 +47,7 @@ export default defineComponent({
getMenuTheme
,
getCollapsed
,
getAccordion
,
getIsHorizontal
,
getIsSidebarType
,
}
=
useMenuSetting
();
const
{
getShowLogo
}
=
useRootSetting
();
...
...
@@ -66,7 +67,12 @@ export default defineComponent({
const
getIsShowLogo
=
computed
(()
=>
unref
(
getShowLogo
)
&&
unref
(
getIsSidebarType
));
const
getUseScroll
=
computed
(()
=>
{
return
unref
(
getIsSidebarType
)
||
props
.
splitType
===
MenuSplitTyeEnum
.
LEFT
;
return
(
!
unref
(
getIsHorizontal
)
&&
(
unref
(
getIsSidebarType
)
||
props
.
splitType
===
MenuSplitTyeEnum
.
LEFT
||
props
.
splitType
===
MenuSplitTyeEnum
.
NONE
)
);
});
const
getWrapperStyle
=
computed
(
...
...
src/layouts/default/setting/SettingDrawer.tsx
浏览文件 @
de25557f
...
...
@@ -10,7 +10,7 @@ import {
InputNumberItem
,
}
from
'
./components
'
;
import
{
MenuTypeEnum
}
from
'
/@/enums/menuEnum
'
;
import
{
MenuTypeEnum
,
TriggerEnum
}
from
'
/@/enums/menuEnum
'
;
import
{
useRootSetting
}
from
'
/@/hooks/setting/useRootSetting
'
;
import
{
useMenuSetting
}
from
'
/@/hooks/setting/useMenuSetting
'
;
...
...
@@ -25,7 +25,7 @@ import {
HandlerEnum
,
contentModeOptions
,
topMenuAlignOptions
,
m
enuTriggerOptions
,
getM
enuTriggerOptions
,
routerTransitionOptions
,
menuTypeList
,
}
from
'
./enum
'
;
...
...
@@ -134,6 +134,14 @@ export default defineComponent({
* @description:
*/
function
renderFeatures
()
{
let
triggerDef
=
unref
(
getTrigger
);
const
triggerOptions
=
getMenuTriggerOptions
(
unref
(
getSplit
));
const
some
=
triggerOptions
.
some
((
item
)
=>
item
.
value
===
triggerDef
);
if
(
!
some
)
{
triggerDef
=
TriggerEnum
.
FOOTER
;
}
return
(
<>
<
SwitchItem
...
...
@@ -183,13 +191,15 @@ export default defineComponent({
event
=
{
HandlerEnum
.
MENU_TOP_ALIGN
}
def
=
{
unref
(
getTopMenuAlign
)
}
options
=
{
topMenuAlignOptions
}
disabled
=
{
!
unref
(
getShowHeader
)
||
(
!
unref
(
getIsTopMenu
)
&&
!
unref
(
getSplit
))
}
disabled
=
{
!
unref
(
getShowHeader
)
||
unref
(
getSplit
)
||
(
!
unref
(
getIsTopMenu
)
&&
!
unref
(
getSplit
))
}
/>
<
SelectItem
title
=
{
t
(
'
layout.setting.menuCollapseButton
'
)
}
event
=
{
HandlerEnum
.
MENU_TRIGGER
}
def
=
{
unref
(
getTrigger
)
}
options
=
{
menuT
riggerOptions
}
def
=
{
triggerDef
}
options
=
{
t
riggerOptions
}
disabled
=
{
!
unref
(
getShowMenuRef
)
}
/>
<
SelectItem
...
...
src/layouts/default/setting/enum.ts
浏览文件 @
de25557f
...
...
@@ -76,20 +76,26 @@ export const topMenuAlignOptions = [
},
];
export
const
menuTriggerOptions
=
[
{
value
:
TriggerEnum
.
NONE
,
label
:
t
(
'
layout.setting.menuTriggerNone
'
),
},
{
value
:
TriggerEnum
.
FOOTER
,
label
:
t
(
'
layout.setting.menuTriggerBottom
'
),
},
{
value
:
TriggerEnum
.
HEADER
,
label
:
t
(
'
layout.setting.menuTriggerTop
'
),
},
];
export
const
getMenuTriggerOptions
=
(
hideTop
:
boolean
)
=>
{
return
[
{
value
:
TriggerEnum
.
NONE
,
label
:
t
(
'
layout.setting.menuTriggerNone
'
),
},
{
value
:
TriggerEnum
.
FOOTER
,
label
:
t
(
'
layout.setting.menuTriggerBottom
'
),
},
...(
hideTop
?
[]
:
[
{
value
:
TriggerEnum
.
HEADER
,
label
:
t
(
'
layout.setting.menuTriggerTop
'
),
},
]),
];
};
export
const
routerTransitionOptions
=
[
RouterTransitionEnum
.
ZOOM_FADE
,
...
...
src/layouts/default/setting/handler.ts
浏览文件 @
de25557f
...
...
@@ -25,6 +25,7 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConf
type
,
collapsed
:
false
,
show
:
true
,
hidden
:
false
,
...
splitOpt
,
},
};
...
...
src/layouts/default/sider/LayoutSider.tsx
已删除
100644 → 0
浏览文件 @
689425e4
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
'
;
import
DragBar
from
'
./DragBar.vue
'
;
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
{
getIsMobile
}
=
useAppInject
();
const
{
getTriggerAttr
,
getTriggerSlot
}
=
useTrigger
(
getIsMobile
);
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
)
&&
!
unref
(
getIsMobile
),
},
];
});
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
)
}
/>
<
DragBar
ref
=
{
dragBarRef
}
/>
</>
);
}
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
(
getIsMobile
)
?
false
:
unref
(
getCollapsed
)
}
collapsedWidth
=
{
unref
(
getCollapsedWidth
)
}
theme
=
{
unref
(
getMenuTheme
)
}
onCollapse
=
{
onCollapseChange
}
onBreakpoint
=
{
onBreakpointChange
}
{
...
unref
(
getTriggerAttr
)
}
>
{
{
...
unref
(
getTriggerSlot
),
default
:
()
=>
renderDefault
(),
}
}
</
Layout
.
Sider
>
</>
);
};
},
});
src/layouts/default/sider/LayoutSider.vue
0 → 100644
浏览文件 @
de25557f
<
template
>
<div
v-if=
"getMenuFixed && !getIsMobile"
:style=
"getHiddenDomStyle"
:class=
"
{ hidden: !showClassSideBarRef }"
/>
<Sider
ref=
"sideRef"
breakpoint=
"lg"
collapsible
:class=
"getSiderClass"
:width=
"getMenuWidth"
:collapsed=
"getIsMobile ? false : getCollapsed"
:collapsedWidth=
"getCollapsedWidth"
:theme=
"getMenuTheme"
@
collapse=
"onCollapseChange"
@
breakpoint=
"onBreakpointChange"
v-bind=
"getTriggerAttr"
>
<template
#trigger
v-if=
"getShowTrigger"
>
<LayoutTrigger
/>
</
template
>
<LayoutMenu
:theme=
"getMenuTheme"
:menuMode=
"getMode"
:splitType=
"getSplitType"
/>
<DragBar
ref=
"dragBarRef"
/>
</Sider>
</template>
<
script
lang=
"ts"
>
import
{
computed
,
defineComponent
,
ref
,
unref
,
CSSProperties
}
from
'
vue
'
;
import
{
Layout
}
from
'
ant-design-vue
'
;
import
LayoutMenu
from
'
../menu
'
;
import
LayoutTrigger
from
'
/@/layouts/default/trigger/index.vue
'
;
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
'
;
import
DragBar
from
'
./DragBar.vue
'
;
export
default
defineComponent
({
name
:
'
LayoutSideBar
'
,
components
:
{
Sider
:
Layout
.
Sider
,
LayoutMenu
,
DragBar
,
LayoutTrigger
},
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
{
getIsMobile
}
=
useAppInject
();
const
{
getTriggerAttr
,
getShowTrigger
}
=
useTrigger
(
getIsMobile
);
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
)
&&
!
unref
(
getIsMobile
),
},
];
});
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
'
,
};
}
);
return
{
prefixCls
,
sideRef
,
dragBarRef
,
getIsMobile
,
getHiddenDomStyle
,
getSiderClass
,
getTriggerAttr
,
getCollapsedWidth
,
getMenuFixed
,
showClassSideBarRef
,
getMenuWidth
,
getCollapsed
,
getMenuTheme
,
onBreakpointChange
,
getMode
,
getSplitType
,
onCollapseChange
,
getShowTrigger
,
};
},
});
</
script
>
<
style
lang=
"less"
>
@import './index.less';
</
style
>
src/layouts/default/sider/index.vue
浏览文件 @
de25557f
...
...
@@ -15,7 +15,7 @@
<
script
lang=
"ts"
>
import
{
defineComponent
}
from
'
vue
'
;
import
Sider
from
'
./LayoutSider
'
;
import
Sider
from
'
./LayoutSider
.vue
'
;
import
{
Drawer
}
from
'
ant-design-vue
'
;
import
{
useAppInject
}
from
'
/@/hooks/web/useAppInject
'
;
import
{
useMenuSetting
}
from
'
/@/hooks/setting/useMenuSetting
'
;
...
...
src/layouts/default/sider/useLayoutSider.ts
x
→
src/layouts/default/sider/useLayoutSider.ts
浏览文件 @
de25557f
import
type
{
Ref
}
from
'
vue
'
;
import
{
computed
,
unref
,
onMounted
,
nextTick
,
ref
}
from
'
vue
'
;
import
LayoutTrigger
from
'
/@/layouts/default/trigger/index.vue
'
;
import
{
TriggerEnum
}
from
'
/@/enums/menuEnum
'
;
...
...
@@ -45,7 +44,7 @@ export function useSiderEvent() {
export
function
useTrigger
(
getIsMobile
:
Ref
<
boolean
>
)
{
const
{
getTrigger
,
getSplit
}
=
useMenuSetting
();
const
s
howTrigger
=
computed
(()
=>
{
const
getS
howTrigger
=
computed
(()
=>
{
const
trigger
=
unref
(
getTrigger
);
return
(
...
...
@@ -56,7 +55,7 @@ export function useTrigger(getIsMobile: Ref<boolean>) {
});
const
getTriggerAttr
=
computed
(()
=>
{
if
(
unref
(
s
howTrigger
))
{
if
(
unref
(
getS
howTrigger
))
{
return
{};
}
return
{
...
...
@@ -64,16 +63,7 @@ export function useTrigger(getIsMobile: Ref<boolean>) {
};
});
const
getTriggerSlot
=
computed
(()
=>
{
if
(
unref
(
showTrigger
))
{
return
{
trigger
:
()
=>
<
LayoutTrigger
/>,
};
}
return
{};
});
return
{
getTriggerAttr
,
getTriggerSlot
};
return
{
getTriggerAttr
,
getShowTrigger
};
}
/**
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录