dromara/RuoYi-Cloud-Plus
1
0
Fork 0
mirror of https://gitee.com/dromara/RuoYi-Cloud-Plus.git synced 2025-09-11 06:39:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

update 优化固定头部页签滚动条被隐藏的问题(I6ORT1)

Browse Source
This commit is contained in:
疯狂的狮子li
2023-04-06 12:56:15 +08:00
parent 15178e12aa
commit b99321f08d
1 changed files with 123 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
ruoyi-ui/src/layout/index.vue
View File

@@ -1,111 +1,123 @@
<template> <template>
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}"> <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
<sidebar v-if="!sidebar.hide" class="sidebar-container" /> <sidebar v-if="!sidebar.hide" class="sidebar-container" />
<div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container"> <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
<div :class="{'fixed-header':fixedHeader}"> <div :class="{'fixed-header':fixedHeader}">
<navbar /> <navbar />
<tags-view v-if="needTagsView" /> <tags-view v-if="needTagsView" />
</div> </div>
<app-main /> <app-main />
<right-panel> <right-panel>
<settings /> <settings />
</right-panel> </right-panel>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import RightPanel from '@/components/RightPanel' import RightPanel from '@/components/RightPanel'
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components' import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler' import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import variables from '@/assets/styles/variables.scss' import variables from '@/assets/styles/variables.scss'
export default { export default {
name: 'Layout', name: 'Layout',
components: { components: {
AppMain, AppMain,
Navbar, Navbar,
RightPanel, RightPanel,
Settings, Settings,
Sidebar, Sidebar,
TagsView TagsView
}, },
mixins: [ResizeMixin], mixins: [ResizeMixin],
computed: { computed: {
...mapState({ ...mapState({
theme: state => state.settings.theme, theme: state => state.settings.theme,
sideTheme: state => state.settings.sideTheme, sideTheme: state => state.settings.sideTheme,
sidebar: state => state.app.sidebar, sidebar: state => state.app.sidebar,
device: state => state.app.device, device: state => state.app.device,
needTagsView: state => state.settings.tagsView, needTagsView: state => state.settings.tagsView,
fixedHeader: state => state.settings.fixedHeader fixedHeader: state => state.settings.fixedHeader
}), }),
classObj() { classObj() {
return { return {
hideSidebar: !this.sidebar.opened, hideSidebar: !this.sidebar.opened,
openSidebar: this.sidebar.opened, openSidebar: this.sidebar.opened,
withoutAnimation: this.sidebar.withoutAnimation, withoutAnimation: this.sidebar.withoutAnimation,
mobile: this.device === 'mobile' mobile: this.device === 'mobile'
} }
}, },
variables() { variables() {
return variables; return variables;
} }
}, },
methods: { methods: {
handleClickOutside() { handleClickOutside() {
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false }) this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss"; @import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss"; @import "~@/assets/styles/variables.scss";
.app-wrapper { .app-wrapper {
@include clearfix; @include clearfix;
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
&.mobile.openSidebar { .el-scrollbar{
position: fixed; height: 100%;
top: 0; }
}
} ::v-deep .el-scrollbar__bar.is-vertical {
z-index: 10;
.drawer-bg { }
background: #000;
opacity: 0.3; ::v-deep .el-scrollbar__wrap {
width: 100%; overflow-x: hidden;
top: 0; }
height: 100%;
position: absolute; &.mobile.openSidebar {
z-index: 999; position: fixed;
} top: 0;
}
.fixed-header { }
position: fixed;
top: 0; .drawer-bg {
right: 0; background: #000;
z-index: 9; opacity: 0.3;
width: calc(100% - #{$base-sidebar-width}); width: 100%;
transition: width 0.28s; top: 0;
} height: 100%;
position: absolute;
.hideSidebar .fixed-header { z-index: 999;
width: calc(100% - 54px); }
}
.fixed-header {
.sidebarHide .fixed-header { position: fixed;
width: 100%; top: 0;
} right: 0;
z-index: 9;
.mobile .fixed-header { width: calc(100% - #{$base-sidebar-width});
width: 100%; transition: width 0.28s;
} }
</style>
.hideSidebar .fixed-header {
width: calc(100% - 54px);
}
.sidebarHide .fixed-header {
width: 100%;
}
.mobile .fixed-header {
width: 100%;
}
</style>