Test Layout

src/layout/index2.vue

@@ -0,0 +1,101 @@
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <div class="header-container" />
+    <div class="sidebar-container" />
+    <div :class="{hasTagsView:needTagsView}" class="main-container">
+      <div :class="{'fixed-header':fixedHeader}">
+        <!-- <navbar /> -->
+        <div id="tags-view-container" class="tags-view-container">
+          <scroll-pane ref="scrollPane" class="tags-view-wrapper" />
+        </div>
+      </div>
+      <app-main />
+    </div>
+  </div>
+</template>
+
+<script>
+import { AppMain } from './components'
+import ScrollPane from './components/TagsView/ScrollPane.vue'
+// 不适配移动端
+// import ResizeMixin from './mixin/ResizeHandler'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    AppMain,
+    ScrollPane
+  },
+  // mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      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'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  @import "~@/styles/mixin.scss";
+  @import "~@/styles/variables.scss";
+  .tags-view-container {
+    height: $tagHeight;
+  }
+  .main-container{
+    padding-left: calc(64px - #{$siderBarCollapseWidth}) !important;
+  }
+
+  .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: $headerHeight;
+    right: 0;
+    z-index: 9;
+    width: calc(100% - #{$sideBarWidth});
+    transition: width 0.28s;
+  }
+
+  .hideSidebar .fixed-header {
+    width: calc(100% - #{$siderBarCollapseWidth})
+  }
+
+  .mobile .fixed-header {
+    width: 100%;
+  }
+</style>