github_mirrors/gf-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/gf-vben-admin.git synced 2025-02-03 03:32:59 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: added mixSide trigger

Browse Source
This commit is contained in:
vben 2021-01-06 20:56:03 +08:00
parent 0e7c57bd5e
commit 1e5fcd2cd2
2 changed files with 43 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/hooks/setting/useMenuSetting.ts
View File

@ -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)`;
});

49
src/layouts/default/sider/MixSider.vue
View File

@ -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;