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): 修复页面滚动行为

Browse Source
This commit is contained in:
Soybean
2021-09-14 19:10:10 +08:00
parent ab77d58e46
commit 57e00e6417
12 changed files with 189 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/layouts/BasicLayout/index.vue
View File

@ -4,7 +4,7 @@
<global-header v-if="isHorizontalMix" :z-index="2" />
<div class="flex-1-hidden flex h-full">
<global-sider v-if="isHorizontalMix" class="sider-margin" :z-index="1" />
<n-scrollbar class="h-full" :x-scrollable="true" :content-class="fullPage ? 'h-full' : ''">
<n-scrollbar ref="scrollbar" class="h-full" :x-scrollable="true" :content-class="fullPage ? 'h-full' : ''">
<div
class="inline-flex-col-stretch w-full"
:class="[{ 'content-padding': isHorizontalMix }, fullPage ? 'h-full' : 'min-h-100vh']"
@ -26,10 +26,12 @@ import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { NLayout, NScrollbar, NLayoutContent } from 'naive-ui';
import { useThemeStore } from '@/store';
import { useScrollBehavior } from '@/hooks';
import { GlobalSider, GlobalHeader, GlobalFooter, SettingDrawer } from './components';
const route = useRoute();
const theme = useThemeStore();
const { scrollbar, resetScrollWatcher } = useScrollBehavior();
const isHorizontalMix = computed(() => theme.navStyle.mode === 'horizontal-mix');
const headerHeight = computed(() => {
@ -38,6 +40,9 @@ const headerHeight = computed(() => {
});
/** 100%视高 */
const fullPage = computed(() => Boolean(route.meta?.fullPage));
// 路由切换，重置滚动行为
resetScrollWatcher();
</script>
<style scoped>
:deep(.n-scrollbar-rail) {

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

@ -1,5 +1,5 @@
<template>
<n-scrollbar class="h-full" :x-scrollable="true" :content-class="fullPage ? 'h-full' : ''">
<n-scrollbar ref="scrollbar" class="h-full" :x-scrollable="true" :content-class="fullPage ? 'h-full' : ''">
<div class="inline-block w-full" :class="[fullPage ? 'h-full' : 'min-h-100vh']">
<router-view />
</div>
@ -10,9 +10,14 @@
import { useRoute } from 'vue-router';
import { NScrollbar } from 'naive-ui';
import { computed } from 'vue';
import { useScrollBehavior } from '@/hooks';
const route = useRoute();
const { scrollbar, resetScrollWatcher } = useScrollBehavior();
/** 100%视高 */
const fullPage = computed(() => Boolean(route.meta?.fullPage));
resetScrollWatcher();
</script>
<style scoped></style>