twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-07 17:07:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: 页面内全屏效果

Browse Source
This commit is contained in:
xiaoxian521 2021-10-19 10:45:41 +08:00
parent b75eecabd2
commit a322b8497e
1 changed files with 8 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/layout/index.vue
View File

@ -33,14 +33,12 @@ import {
computed, computed,
onMounted, onMounted,
watchEffect, watchEffect,
useCssModule,
onBeforeMount, onBeforeMount,
getCurrentInstance getCurrentInstance
} from "vue"; } from "vue";
import { setType } from "./types"; import { setType } from "./types";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { emitter } from "/@/utils/mitt"; import { emitter } from "/@/utils/mitt";
import { toggleClass } from "/@/utils/operate";
import { useEventListener } from "@vueuse/core"; import { useEventListener } from "@vueuse/core";
import { storageLocal } from "/@/utils/storage"; import { storageLocal } from "/@/utils/storage";
import { useAppStoreHook } from "/@/store/modules/app"; import { useAppStoreHook } from "/@/store/modules/app";
@ -56,7 +54,6 @@ import Vertical from "./components/sidebar/vertical.vue";
import Horizontal from "./components/sidebar/horizontal.vue"; import Horizontal from "./components/sidebar/horizontal.vue";
const pureSetting = useSettingStoreHook(); const pureSetting = useSettingStoreHook();
const { hiddenMainContainer } = useCssModule();
const instance = const instance =
getCurrentInstance().appContext.app.config.globalProperties.$storage; getCurrentInstance().appContext.app.config.globalProperties.$storage;
@ -128,21 +125,9 @@ const $_resizeHandler = () => {
}; };
function onFullScreen() { function onFullScreen() {
if (unref(hiddenSideBar)) { unref(hiddenSideBar)
hiddenSideBar.value = false; ? (hiddenSideBar.value = false)
toggleClass( : (hiddenSideBar.value = true);
false,
hiddenMainContainer,
document.querySelector(".main-container")
);
} else {
hiddenSideBar.value = true;
toggleClass(
true,
hiddenMainContainer,
document.querySelector(".main-container")
);
}
} }
onMounted(() => { onMounted(() => {
@ -151,11 +136,6 @@ onMounted(() => {
useAppStoreHook().toggleDevice("mobile"); useAppStoreHook().toggleDevice("mobile");
handleClickOutside(true); handleClickOutside(true);
} }
toggleClass(
unref(hiddenSideBar),
hiddenMainContainer,
document.querySelector(".main-container")
);
}); });
onBeforeMount(() => { onBeforeMount(() => {
@ -175,7 +155,7 @@ onBeforeMount(() => {
@click="handleClickOutside(false)" @click="handleClickOutside(false)"
/> />
<Vertical v-show="!hiddenSideBar && layout.includes('vertical')" /> <Vertical v-show="!hiddenSideBar && layout.includes('vertical')" />
<div class="main-container"> <div :class="['main-container', hiddenSideBar ? 'main-hidden' : '']">
<div :class="{ 'fixed-header': set.fixedHeader }"> <div :class="{ 'fixed-header': set.fixedHeader }">
<!-- 顶部导航栏 --> <!-- 顶部导航栏 -->
<navbar v-show="!hiddenSideBar && layout.includes('vertical')" /> <navbar v-show="!hiddenSideBar && layout.includes('vertical')" />
@ -196,12 +176,6 @@ onBeforeMount(() => {
</div> </div>
</template> </template>
<style scoped module>
.hiddenMainContainer {
margin-left: 0 !important;
}
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
@mixin clearfix { @mixin clearfix {
&::after { &::after {
@ -224,6 +198,10 @@ onBeforeMount(() => {
} }
} }
.main-hidden {
margin-left: 0 !important;
}
.drawer-bg { .drawer-bg {
background: #000; background: #000;
opacity: 0.3; opacity: 0.3;