Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
jxf111348
vue-vben-admin
提交
1e5fcd2c
V
vue-vben-admin
项目概览
jxf111348
/
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,发现更多精彩内容 >>
提交
1e5fcd2c
编写于
1月 06, 2021
作者:
V
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: added mixSide trigger
上级
0e7c57bd
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
43 addition
and
12 deletion
+43
-12
src/hooks/setting/useMenuSetting.ts
src/hooks/setting/useMenuSetting.ts
+4
-2
src/layouts/default/sider/MixSider.vue
src/layouts/default/sider/MixSider.vue
+39
-10
未找到文件。
src/hooks/setting/useMenuSetting.ts
浏览文件 @
1e5fcd2c
...
...
@@ -93,8 +93,10 @@ const getCalcContentWidth = computed(() => {
unref
(
getIsTopMenu
)
||
!
unref
(
getShowMenu
)
||
(
unref
(
getSplit
)
&&
unref
(
getMenuHidden
))
?
0
:
unref
(
getIsMixSidebar
)
?
SIDE_BAR_SHOW_TIT_MINI_WIDTH
+
(
unref
(
getMixSideFixed
)
&&
unref
(
mixSideHasChildren
)
?
unref
(
getRealWidth
)
:
0
)
?
unref
(
getCollapsed
)
?
SIDE_BAR_MINI_WIDTH
:
SIDE_BAR_SHOW_TIT_MINI_WIDTH
+
(
unref
(
getMixSideFixed
)
&&
unref
(
mixSideHasChildren
)
?
unref
(
getRealWidth
)
:
0
)
:
unref
(
getRealWidth
);
return
`calc(100% -
${
unref
(
width
)}
px)`
;
});
...
...
src/layouts/default/sider/MixSider.vue
浏览文件 @
1e5fcd2c
...
...
@@ -15,6 +15,9 @@
v-bind="getMenuEvents"
>
<AppLogo
:showTitle=
"false"
:class=
"`$
{prefixCls}-logo`" />
<Trigger
:class=
"`$
{prefixCls}-trigger`" />
<ScrollContainer>
<ul
:class=
"`$
{prefixCls}-module`">
<li
...
...
@@ -76,25 +79,30 @@
</div>
</
template
>
<
script
lang=
"ts"
>
import
{
defineComponent
,
onMounted
,
ref
,
computed
,
CSSProperties
,
unref
}
from
'
vue
'
;
import
type
{
Menu
}
from
'
/@/router/types
'
;
import
{
RouteLocationNormalized
}
from
'
vue-router
'
;
import
{
useDesign
}
from
'
/@/hooks/web/useDesign
'
;
import
{
getShallowMenus
,
getChildrenMenus
,
getCurrentParentPath
}
from
'
/@/router/menus
'
;
import
{
useI18n
}
from
'
/@/hooks/web/useI18n
'
;
import
type
{
CSSProperties
}
from
'
vue
'
;
import
type
{
RouteLocationNormalized
}
from
'
vue-router
'
;
import
{
defineComponent
,
onMounted
,
ref
,
computed
,
unref
}
from
'
vue
'
;
import
{
BasicMenu
,
MenuTag
}
from
'
/@/components/Menu
'
;
import
{
ScrollContainer
}
from
'
/@/components/Container
'
;
import
Icon
from
'
/@/components/Icon
'
;
import
{
AppLogo
}
from
'
/@/components/Application
'
;
import
{
useGo
}
from
'
/@/hooks/web/usePage
'
;
import
{
BasicMenu
,
MenuTag
}
from
'
/@/components/Menu
'
;
import
{
listenerLastChangeTab
}
from
'
/@/logics/mitt/tabChange
'
;
import
Trigger
from
'
../trigger/HeaderTrigger.vue
'
;
import
{
useMenuSetting
}
from
'
/@/hooks/setting/useMenuSetting
'
;
import
{
useDragLine
}
from
'
./useLayoutSider
'
;
import
{
useGlobSetting
}
from
'
/@/hooks/setting
'
;
import
{
useDesign
}
from
'
/@/hooks/web/useDesign
'
;
import
{
useI18n
}
from
'
/@/hooks/web/useI18n
'
;
import
{
useGo
}
from
'
/@/hooks/web/usePage
'
;
import
{
SIDE_BAR_SHOW_TIT_MINI_WIDTH
,
SIDE_BAR_MINI_WIDTH
}
from
'
/@/enums/appEnum
'
;
import
clickOutside
from
'
/@/directives/clickOutside
'
;
import
{
getShallowMenus
,
getChildrenMenus
,
getCurrentParentPath
}
from
'
/@/router/menus
'
;
import
{
listenerLastChangeTab
}
from
'
/@/logics/mitt/tabChange
'
;
export
default
defineComponent
({
name
:
'
LayoutMixSider
'
,
...
...
@@ -104,6 +112,7 @@
BasicMenu
,
MenuTag
,
Icon
,
Trigger
,
},
directives
:
{
clickOutside
,
...
...
@@ -419,7 +428,7 @@
}
> .scrollbar {
height: calc(100% - @header-height
) !important
;
height: calc(100% - @header-height
- 38px)
;
}
&.mini &-module {
...
...
@@ -468,14 +477,34 @@
&__icon {
margin-bottom: 8px;
font-size: 24px;
transition: all 0.2s;
}
&__name {
margin-bottom: 0;
font-size: 12px;
transition: all 0.2s;
}
}
&-trigger {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 6px;
padding-left: 12px;
font-size: 18px;
color: rgba(255, 255, 255, 0.65);
cursor: pointer;
background: @sider-dark-bg-color;
}
&.light &-trigger {
color: rgba(0, 0, 0, 0.65);
background: #fff;
}
&-menu-list {
position: fixed;
top: 0;
...
...
@@ -483,7 +512,7 @@
width: 200px;
height: calc(100%);
background: #fff;
transition:
width
0.2s;
transition:
all
0.2s;
.@{tag-prefix-cls} {
position: absolute;
top: 10px;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录