优化弹窗后导航栏偏移的问题

刘元博

2023-03-11 dcb9cb3d135c5adc62931e2076bdabd2e9f22f70

优化弹窗后导航栏偏移的问题

 ruoyi-ui/src/layout/components/AppMain.vue

@@ -1,61 +1,52 @@
<template>

  <section class="app-main">

    <transition name="fade-transform" mode="out-in">

      <keep-alive :include="cachedViews">

        <router-view v-if="!$route.meta.link" :key="key" />

      </keep-alive>

    </transition>

    <iframe-toggle />

  </section>

</template>



<script>

import iframeToggle from "./IframeToggle/index"



export default {

  name: 'AppMain',

  components: { iframeToggle },

  computed: {

    cachedViews() {

      return this.$store.state.tagsView.cachedViews

    },

    key() {

      return this.$route.path

    }

  }

}

</script>



<style lang="scss" scoped>

.app-main {

  /* 50= navbar  50  */

  min-height: calc(100vh - 50px);

  width: 100%;

  position: relative;

  overflow: hidden;

}



.fixed-header + .app-main {

  padding-top: 50px;

}



.hasTagsView {

  .app-main {

    /* 84 = navbar + tags-view = 50 + 34 */

    min-height: calc(100vh - 84px);

  }



  .fixed-header + .app-main {

    padding-top: 84px;

  }

}

</style>



<style lang="scss">

// fix css style bug in open el-dialog

.el-popup-parent--hidden {

  .fixed-header {

    padding-right: 17px;

  }

}

</style>

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="cachedViews">
        <router-view v-if="!$route.meta.link" :key="key" />
      </keep-alive>
    </transition>
    <iframe-toggle />
  </section>
</template>

<script>
import iframeToggle from "./IframeToggle/index"

export default {
  name: 'AppMain',
  components: { iframeToggle },
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.path
    }
  }
}
</script>

<style lang="scss" scoped>
.app-main {
  /* 50= navbar  50  */
  min-height: calc(100vh - 50px);
  width: 100%;
  position: relative;
  overflow: hidden;
}

.fixed-header + .app-main {
  padding-top: 50px;
}

.hasTagsView {
  .app-main {
    /* 84 = navbar + tags-view = 50 + 34 */
    min-height: calc(100vh - 84px);
  }

  .fixed-header + .app-main {
    padding-top: 84px;
  }
}
</style>

 ruoyi-ui/src/layout/index.vue

@@ -1,111 +1,121 @@
<template>

  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">

    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>

    <sidebar v-if="!sidebar.hide" class="sidebar-container" />

    <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">

      <div :class="{'fixed-header':fixedHeader}">

        <navbar />

        <tags-view v-if="needTagsView" />

      </div>

      <app-main />

      <right-panel>

        <settings />

      </right-panel>

    </div>

  </div>

</template>



<script>

import RightPanel from '@/components/RightPanel'

import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'

import ResizeMixin from './mixin/ResizeHandler'

import { mapState } from 'vuex'

import variables from '@/assets/styles/variables.scss'



export default {

  name: 'Layout',

  components: {

    AppMain,

    Navbar,

    RightPanel,

    Settings,

    Sidebar,

    TagsView

  },

  mixins: [ResizeMixin],

  computed: {

    ...mapState({

      theme: state => state.settings.theme,

      sideTheme: state => state.settings.sideTheme,

      sidebar: state => state.app.sidebar,

      device: state => state.app.device,

      needTagsView: state => state.settings.tagsView,

      fixedHeader: state => state.settings.fixedHeader

    }),

    classObj() {

      return {

        hideSidebar: !this.sidebar.opened,

        openSidebar: this.sidebar.opened,

        withoutAnimation: this.sidebar.withoutAnimation,

        mobile: this.device === 'mobile'

      }

    },

    variables() {

      return variables;

    }

  },

  methods: {

    handleClickOutside() {

      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })

    }

  }

}

</script>



<style lang="scss" scoped>

  @import "~@/assets/styles/mixin.scss";

  @import "~@/assets/styles/variables.scss";



  .app-wrapper {

    @include clearfix;

    position: relative;

    height: 100%;

    width: 100%;



    &.mobile.openSidebar {

      position: fixed;

      top: 0;

    }

  }



  .drawer-bg {

    background: #000;

    opacity: 0.3;

    width: 100%;

    top: 0;

    height: 100%;

    position: absolute;

    z-index: 999;

  }



  .fixed-header {

    position: fixed;

    top: 0;

    right: 0;

    z-index: 9;

    width: calc(100% - #{$base-sidebar-width});

    transition: width 0.28s;

  }



  .hideSidebar .fixed-header {

    width: calc(100% - 54px);

  }



  .sidebarHide .fixed-header {

    width: 100%;

  }



  .mobile .fixed-header {

    width: 100%;

  }

</style>

<template>
  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
    <el-scrollbar>
      <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
      <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
      <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
        <div :class="{'fixed-header':fixedHeader}">
          <navbar/>
          <tags-view v-if="needTagsView"/>
        </div>
        <app-main/>
        <right-panel>
          <settings/>
        </right-panel>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import RightPanel from '@/components/RightPanel'
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex'
import variables from '@/assets/styles/variables.scss'

export default {
  name: 'Layout',
  components: {
    AppMain,
    Navbar,
    RightPanel,
    Settings,
    Sidebar,
    TagsView
  },
  mixins: [ResizeMixin],
  computed: {
    ...mapState({
      theme: state => state.settings.theme,
      sideTheme: state => state.settings.sideTheme,
      sidebar: state => state.app.sidebar,
      device: state => state.app.device,
      needTagsView: state => state.settings.tagsView,
      fixedHeader: state => state.settings.fixedHeader
    }),
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    },
    variables() {
      return variables;
    }
  },
  methods: {
    handleClickOutside() {
      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "~@/assets/styles/mixin.scss";
  @import "~@/assets/styles/variables.scss";

  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;

    .el-scrollbar{
      height: 100%;
    }

    ::v-deep .el-scrollbar__wrap {
      overflow-x: hidden;
    }

    &.mobile.openSidebar {
      position: fixed;
      top: 0;
    }
  }

  .drawer-bg {
    background: #000;
    opacity: 0.3;
    width: 100%;
    top: 0;
    height: 100%;
    position: absolute;
    z-index: 999;
  }

  .fixed-header {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9;
    width: calc(100% - #{$base-sidebar-width});
    transition: width 0.28s;
  }

  .hideSidebar .fixed-header {
    width: calc(100% - 54px);
  }

  .sidebarHide .fixed-header {
    width: 100%;
  }

  .mobile .fixed-header {
    width: 100%;
  }
</style>