zuaa
/
vue-vben-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: added mixSide trigger

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

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

@ -93,7 +93,9 @@ const getCalcContentWidth = computed(() => {
unref(getIsTopMenu) || !unref(getShowMenu) || (unref(getSplit) && unref(getMenuHidden)) unref(getIsTopMenu) || !unref(getShowMenu) || (unref(getSplit) && unref(getMenuHidden))
? 0 ? 0
: unref(getIsMixSidebar) : unref(getIsMixSidebar)
? SIDE_BAR_SHOW_TIT_MINI_WIDTH + ? unref(getCollapsed)
? SIDE_BAR_MINI_WIDTH
: SIDE_BAR_SHOW_TIT_MINI_WIDTH +
(unref(getMixSideFixed) && unref(mixSideHasChildren) ? unref(getRealWidth) : 0) (unref(getMixSideFixed) && unref(mixSideHasChildren) ? unref(getRealWidth) : 0)
: unref(getRealWidth); : unref(getRealWidth);
return `calc(100% - ${unref(width)}px)`; return `calc(100% - ${unref(width)}px)`;

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

@ -15,6 +15,9 @@
v-bind="getMenuEvents" v-bind="getMenuEvents"
> >
<AppLogo :showTitle="false" :class="`${prefixCls}-logo`" /> <AppLogo :showTitle="false" :class="`${prefixCls}-logo`" />
<Trigger :class="`${prefixCls}-trigger`" />
<ScrollContainer> <ScrollContainer>
<ul :class="`${prefixCls}-module`"> <ul :class="`${prefixCls}-module`">
<li <li
@ -76,25 +79,30 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, onMounted, ref, computed, CSSProperties, unref } from 'vue';
import type { Menu } from '/@/router/types'; import type { Menu } from '/@/router/types';
import { RouteLocationNormalized } from 'vue-router'; import type { CSSProperties } from 'vue';
import { useDesign } from '/@/hooks/web/useDesign'; import type { RouteLocationNormalized } from 'vue-router';
import { getShallowMenus, getChildrenMenus, getCurrentParentPath } from '/@/router/menus';
import { useI18n } from '/@/hooks/web/useI18n'; import { defineComponent, onMounted, ref, computed, unref } from 'vue';
import { BasicMenu, MenuTag } from '/@/components/Menu';
import { ScrollContainer } from '/@/components/Container'; import { ScrollContainer } from '/@/components/Container';
import Icon from '/@/components/Icon'; import Icon from '/@/components/Icon';
import { AppLogo } from '/@/components/Application'; import { AppLogo } from '/@/components/Application';
import { useGo } from '/@/hooks/web/usePage'; import Trigger from '../trigger/HeaderTrigger.vue';
import { BasicMenu, MenuTag } from '/@/components/Menu';
import { listenerLastChangeTab } from '/@/logics/mitt/tabChange';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useDragLine } from './useLayoutSider'; import { useDragLine } from './useLayoutSider';
import { useGlobSetting } from '/@/hooks/setting'; 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 { SIDE_BAR_SHOW_TIT_MINI_WIDTH, SIDE_BAR_MINI_WIDTH } from '/@/enums/appEnum';
import clickOutside from '/@/directives/clickOutside'; import clickOutside from '/@/directives/clickOutside';
import { getShallowMenus, getChildrenMenus, getCurrentParentPath } from '/@/router/menus';
import { listenerLastChangeTab } from '/@/logics/mitt/tabChange';
export default defineComponent({ export default defineComponent({
name: 'LayoutMixSider', name: 'LayoutMixSider',
@ -104,6 +112,7 @@
BasicMenu, BasicMenu,
MenuTag, MenuTag,
Icon, Icon,
Trigger,
}, },
directives: { directives: {
clickOutside, clickOutside,
@ -419,7 +428,7 @@
} }
> .scrollbar { > .scrollbar {
height: calc(100% - @header-height) !important; height: calc(100% - @header-height - 38px);
} }
&.mini &-module { &.mini &-module {
@ -468,14 +477,34 @@
&__icon { &__icon {
margin-bottom: 8px; margin-bottom: 8px;
font-size: 24px; font-size: 24px;
transition: all 0.2s;
} }
&__name { &__name {
margin-bottom: 0; margin-bottom: 0;
font-size: 12px; 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 { &-menu-list {
position: fixed; position: fixed;
top: 0; top: 0;
@ -483,7 +512,7 @@
width: 200px; width: 200px;
height: calc(100%); height: calc(100%);
background: #fff; background: #fff;
transition: width 0.2s; transition: all 0.2s;
.@{tag-prefix-cls} { .@{tag-prefix-cls} {
position: absolute; position: absolute;
top: 10px; top: 10px;