新增：固定 Sider/侧边栏功能；

5 years ago · 9072bc93d7
parent 6ef4680adb
commit 9072bc93d7
6 changed files with 38 additions and 25 deletions
--- a/public/index.html
+++ b/public/index.html
@ -7,7 +7,7 @@
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
-  <body>
+  <body class="beauty-scroll">
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
--- a/src/components/setting/Setting.vue
+++ b/src/components/setting/Setting.vue
@ -33,7 +33,7 @@
        </a-list-item>
        <a-list-item>
          固定Siderbar
-          <a-switch slot="actions" size="small" />
+          <a-switch :checked="fixedSider" slot="actions" size="small" @change="setFixedSider" />
        </a-list-item>
      </a-list>
    </setting-item>
@ -114,7 +114,7 @@ export default {
    directions() {
      return this.animates.find(item => item.name == this.animate).directions
    },
-    ...mapState('setting', ['animates', 'multiPage', 'weekMode', 'fixedHeader'])
+    ...mapState('setting', ['animates', 'multiPage', 'weekMode', 'fixedHeader', 'fixedSider'])
  },
  methods: {
    onColorChange (values, colors) {
@ -156,6 +156,9 @@ export default {
    },
    setFixedHeader(checked) {
      this.$store.commit('setting/setFixedHeader', checked)
+    },
+    setFixedSider(checked) {
+      this.$store.commit('setting/setFixedSider', checked)
    }
  }
 }
--- a/src/config/index.js
+++ b/src/config/index.js
@ -4,6 +4,7 @@ module.exports = {
  theme: 'dark',
  layout: 'side',
  fixedHeader: false,
+  fixedSider: true,
  weekMode: false,
  multiPage: false,
  systemName: 'Vue Antd Admin',
--- a/src/layouts/GlobalLayout.vue
+++ b/src/layouts/GlobalLayout.vue
@ -1,5 +1,5 @@
 <template>
-  <a-layout class="global-layout">
+  <a-layout :class="['global-layout', fixedSider ? 'fixed-sider' : '']">
    <drawer v-if="isMobile" :openDrawer="collapsed" @change="onDrawerChange">
      <sider-menu :theme="theme" :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/>
    </drawer>
@ -10,7 +10,7 @@
      </div>
      <setting />
    </drawer>
-    <a-layout class="global-layout-main">
+    <a-layout class="global-layout-main beauty-scroll">
      <global-header :style="headerStyle" :menuData="menuData" :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
      <a-layout-header v-if="fixedHeader"></a-layout-header>
      <a-layout-content class="global-layout-content">
@ -54,7 +54,7 @@ export default {
    }
  },
  computed: {
-    ...mapState('setting', ['isMobile', 'theme', 'layout', 'footerLinks', 'copyright', 'fixedHeader']),
+    ...mapState('setting', ['isMobile', 'theme', 'layout', 'footerLinks', 'copyright', 'fixedHeader', 'fixedSider']),
    sideMenuWidth() {
      return this.collapsed ? '80px' : '256px'
    },
@ -87,26 +87,13 @@ export default {

 <style lang="less" scoped>
  .global-layout{
-    height: 100vh;
-    .global-layout-main{
-      overflow: scroll;
-      scrollbar-color: @primary-color @primary-2;
-      scrollbar-width: thin;
-      -ms-overflow-style:none;
-      position: relative;
-      &::-webkit-scrollbar{
-        width: 3px;
-        height: 1px;
-      }
-      &::-webkit-scrollbar-thumb {
-        border-radius: 3px;
-        background: @primary;
-      }
-      &::-webkit-scrollbar-track {
-        -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
-        border-radius: 3px;
-        background: @primary-3;
+    &.fixed-sider{
+      height: 100vh;
+      .global-layout-main{
+        overflow: scroll;
      }
+    }
+    .global-layout-main{
      .global-header{
        top: 0;
        right: 0;
--- a/src/store/modules/setting.js
+++ b/src/store/modules/setting.js
@ -30,6 +30,9 @@ export default {
    },
    setFixedHeader(state, fixedHeader) {
      state.fixedHeader = fixedHeader
+    },
+    setFixedSider(state, fixedSider) {
+      state.fixedSider = fixedSider
    }
  }
 }
--- a/src/theme/default/style.less
+++ b/src/theme/default/style.less
@ -2,3 +2,22 @@
  overflow: hidden;
  filter: invert(80%);
 }
+.beauty-scroll{
+  scrollbar-color: @primary-color @primary-2;
+  scrollbar-width: thin;
+  -ms-overflow-style:none;
+  position: relative;
+  &::-webkit-scrollbar{
+    width: 3px;
+    height: 1px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    background: @primary;
+  }
+  &::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
+    border-radius: 3px;
+    background: @primary-3;
+  }
+}