jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(projects): 修复页面滚动和页面100%视高占比

Browse Source
This commit is contained in:
Soybean
2021-09-22 22:27:05 +08:00
parent fa0a907941
commit fa2cc78937
5 changed files with 384 additions and 587 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/layouts/BasicLayout/components/GlobalContent/index.vue
View File

@ -1,22 +1,26 @@
<template>
<n-layout-content class="flex-auto p-10px" :class="{ 'bg-[#f5f7f9]': !theme.darkMode }">
<div
class="flex-1 flex-col-stretch p-10px"
:class="{ 'bg-[#f5f7f9]': !theme.darkMode, 'overflow-hidden': routeProps.fullPage }"
>
<router-view v-slot="{ Component, route }">
<transition :name="theme.pageStyle.animateType" mode="out-in" appear>
<keep-alive :include="cacheRoutes">
<component :is="Component" v-if="reload" :key="route.fullPath" />
<component :is="Component" v-if="reload" :key="route.fullPath" class="flex-1" />
</keep-alive>
</transition>
</router-view>
</n-layout-content>
</div>
</template>
<script lang="ts" setup>
import { NLayoutContent } from 'naive-ui';
import { useThemeStore } from '@/store';
import { useReloadInject } from '@/context';
import { cacheRoutes } from '@/router';
import { useRouteProps } from '@/hooks';
const theme = useThemeStore();
const { reload } = useReloadInject();
const routeProps = useRouteProps();
</script>
<style scoped></style>

9
src/layouts/BlankLayout/index.vue
View File

@ -1,10 +1,15 @@
<template>
<n-scrollbar ref="scrollbar" class="h-full" :x-scrollable="true" :content-class="routeProps.fullPage ? 'h-full' : ''">
<div class="inline-block w-full" :class="[routeProps.fullPage ? 'h-full' : 'min-h-100vh']">
<div class="inline-block w-full h-full">
<router-view v-slot="{ Component, route: itemRoute }">
<transition :name="theme.pageStyle.animateType" mode="out-in" appear>
<keep-alive :include="cacheRoutes">
<component :is="Component" v-if="reload" :key="itemRoute.fullPath" />
<component
:is="Component"
v-if="reload"
:key="itemRoute.fullPath"
:class="{ 'min-h-100vh': !routeProps.fullPage }"
/>
</keep-alive>
</transition>
</router-view>