增加侧边栏菜单折叠动画效果切换与设置

src/assets/style/theme/theme-base.scss

@@ -74,13 +74,15 @@
     }
     .d2-theme-container {
       .d2-theme-container-aside {
-        transition: width .3s;
         position: relative;
         .d2-layout-header-aside-menu-side {
           @extend %full;
           overflow: hidden;
         }
       }
+      .d2-theme-container-transition {
+        transition: width .3s;
+      }
       .d2-theme-container-main {
         padding: 0px;
         position: relative;
@@ -116,13 +118,15 @@
     .d2-theme-header {
       // logo区域
       .logo-group {
-        transition: width .3s;
         float: left;
         text-align: center;
         img {
           height: 60px;
         }
       }
+      .logo-transition {
+        transition: width .3s;
+      }
       // 折叠侧边栏切换按钮
       .toggle-aside-btn {
         float: left;

src/layout/header-aside/components/menu-side/index.js

@@ -11,7 +11,7 @@ export default {
   render (h) {
     return h('div', { attrs: { class: 'd2-layout-header-aside-menu-side' } }, [
       h('el-menu', {
-        props: { collapse: this.asideCollapse, uniqueOpened: true, defaultActive: this.$route.fullPath },
+        props: { collapse: this.asideCollapse, collapseTransition: this.asideTransition, uniqueOpened: true, defaultActive: this.$route.fullPath },
         ref: 'menu',
         on: { select: this.handleMenuSelect }
       }, this.aside.map(menu => (menu.children === undefined ? elMenuItem : elSubmenu).call(this, h, menu))),
@@ -32,7 +32,8 @@ export default {
   computed: {
     ...mapState('d2admin/menu', [
       'aside',
-      'asideCollapse'
+      'asideCollapse',
+      'asideTransition'
     ])
   },
   watch: {

src/layout/header-aside/layout.vue

@@ -6,7 +6,11 @@
     <div class="d2-layout-header-aside-content" flex="dir:top">
       <!-- 顶栏 -->
       <div class="d2-theme-header" :style="{ opacity: this.searchActive ? 0.5 : 1 }" flex-box="0" flex>
-        <router-link to="/index" class="logo-group" :style="{width: asideCollapse ? asideWidthCollapse : asideWidth}" flex-box="0">
+        <router-link
+          to="/index"
+          :class="{'logo-group': true, 'logo-transition': asideTransition}"
+          :style="{width: asideCollapse ? asideWidthCollapse : asideWidth}"
+          flex-box="0">
           <img v-if="asideCollapse" :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/icon-only.png`">
           <img v-else :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/all.png`">
         </router-link>
@@ -30,7 +34,14 @@
       <!-- 下面 主体 -->
       <div class="d2-theme-container" flex-box="1" flex>
         <!-- 主体 侧边栏 -->
-        <div flex-box="0" ref="aside" class="d2-theme-container-aside" :style="{ width: asideCollapse ? asideWidthCollapse : asideWidth, opacity: this.searchActive ? 0.5 : 1 }">
+        <div
+          flex-box="0"
+          ref="aside"
+          :class="{'d2-theme-container-aside': true, 'd2-theme-container-transition': asideTransition}"
+          :style="{
+            width: asideCollapse ? asideWidthCollapse : asideWidth,
+            opacity: this.searchActive ? 0.5 : 1
+          }">
           <d2-menu-side/>
         </div>
         <!-- 主体 -->
@@ -109,7 +120,8 @@ export default {
       keepAlive: state => state.page.keepAlive,
       grayActive: state => state.gray.active,
       transitionActive: state => state.transition.active,
-      asideCollapse: state => state.menu.asideCollapse
+      asideCollapse: state => state.menu.asideCollapse,
+      asideTransition: state => state.menu.asideTransition
     }),
     ...mapGetters('d2admin', {
       themeActiveSetting: 'theme/activeSetting'

src/setting.js

@@ -7,9 +7,10 @@ export default {
       close: 'esc'
     }
   },
-  // 侧边栏默认折叠状态
+  // 侧边栏默认配置
   menu: {
-    asideCollapse: false
+    asideCollapse: false,
+    asideTransition: true
   },
   // 在读取持久化数据失败时默认页面
   page: {

src/store/modules/d2admin/modules/account.js

@@ -77,8 +77,8 @@ export default {
       await dispatch('d2admin/transition/load', null, { root: true })
       // 持久化数据加载上次退出时的多页列表
       await dispatch('d2admin/page/openedLoad', null, { root: true })
-      // 持久化数据加载侧边栏折叠状态
+      // 持久化数据加载侧边栏配置
-      await dispatch('d2admin/menu/asideCollapseLoad', null, { root: true })
+      await dispatch('d2admin/menu/asideLoad', null, { root: true })
       // 持久化数据加载全局尺寸
       await dispatch('d2admin/size/load', null, { root: true })
       // 持久化数据加载颜色设置

src/store/modules/d2admin/modules/menu.js

@@ -9,7 +9,9 @@ export default {
     // 侧栏菜单
     aside: [],
     // 侧边栏收缩
-    asideCollapse: setting.menu.asideCollapse
+    asideCollapse: setting.menu.asideCollapse,
+    // 侧边栏折叠动画
+    asideTransition: setting.menu.asideTransition
   },
   actions: {
     /**
@@ -44,17 +46,51 @@ export default {
       }, { root: true })
     },
     /**
-     * 从持久化数据读取侧边栏展开或者收缩
+     * 设置侧边栏折叠动画
      * @param {Object} context
+     * @param {Boolean} transition is transition
      */
-    async asideCollapseLoad ({ state, dispatch }) {
+    async asideTransitionSet ({ state, dispatch }, transition) {
       // store 赋值
-      state.asideCollapse = await dispatch('d2admin/db/get', {
+      state.asideTransition = transition
+      // 持久化
+      await dispatch('d2admin/db/set', {
         dbName: 'sys',
-        path: 'menu.asideCollapse',
+        path: 'menu.asideTransition',
-        defaultValue: setting.menu.asideCollapse,
+        value: state.asideTransition,
         user: true
       }, { root: true })
+    },
+    /**
+     * 切换侧边栏折叠动画
+     * @param {Object} context
+     */
+    async asideTransitionToggle ({ state, dispatch }) {
+      // store 赋值
+      state.asideTransition = !state.asideTransition
+      // 持久化
+      await dispatch('d2admin/db/set', {
+        dbName: 'sys',
+        path: 'menu.asideTransition',
+        value: state.asideTransition,
+        user: true
+      }, { root: true })
+    },
+    /**
+     * 持久化数据加载侧边栏设置
+     * @param {Object} context
+     */
+    async asideLoad ({ state, dispatch }) {
+      // store 赋值
+      const menu = await dispatch('d2admin/db/get', {
+        dbName: 'sys',
+        path: 'menu',
+        defaultValue: setting.menu,
+        user: true
+      }, { root: true })
+
+      state.asideCollapse = menu.asideCollapse
+      state.asideTransition = menu.asideTransition
     }
   },
   mutations: {

src/views/demo/playground/store/menu/index.vue

@@ -12,6 +12,7 @@
         <el-button-group class="d2-mb">
           <el-button @click="handleAsideSet">设置侧栏空菜单</el-button>
           <el-button @click="asideReset">恢复侧栏菜单</el-button>
+          <el-button @click="asideTransitionToggle()">{{`${asideTransition ? '关闭' : '开启'}侧栏动画效果`}}</el-button>
         </el-button-group>
         <d2-highlight :code="JSON.stringify(aside, null, 2)"/>
       </el-tab-pane>
@@ -21,7 +22,7 @@
 
 <script>
 import { cloneDeep } from 'lodash'
-import { mapState, mapMutations } from 'vuex'
+import { mapState, mapMutations, mapActions } from 'vuex'
 export default {
   data () {
     return {
@@ -51,7 +52,8 @@ export default {
   computed: {
     ...mapState('d2admin/menu', [
       'header',
-      'aside'
+      'aside',
+      'asideTransition'
     ])
   },
   created () {
@@ -92,6 +94,9 @@ export default {
       'headerSet',
       'asideSet'
     ]),
+    ...mapActions('d2admin/menu', [
+      'asideTransitionToggle'
+    ]),
     /**
      * 修改顶栏菜单
      */