优化

Former-commit-id: 45a79fe05a14769c1a31a3342133013c181d6459 [formerly 45a79fe05a14769c1a31a3342133013c181d6459 [formerly 45a79fe05a14769c1a31a3342133013c181d6459 [formerly 45a79fe05a14769c1a31a3342133013c181d6459 [formerly 95caeef047c0671c5888416269f14b02f1901efe [formerly b07d79ab403f2d54110a4f2b0517f84f31a3e626]]]]] Former-commit-id: 0bdb267c08ca3fa5724ac191da95e328780f9631 Former-commit-id: a55782f9bd52e1db4add37c141fd8aee863cf436 Former-commit-id: f9f1180a18246208a8c268689f7b3316dcb1cc54 [formerly b5c2f9ae7d07b86e84d87f13ec40dfa37d5e876c] Former-commit-id: b1b9ecb9d12c8520c02f2ce10a0a7feb30a10f04 Former-commit-id: 5c344f906ccdc1bb33537959621a6f7e864b3ea4 Former-commit-id: 19bb1c83218a59143ab0563bd427bda85d7aede9 Former-commit-id: e75d98106a692cb9926921abeae6e424a2a6cef7 Former-commit-id: 718eb8c888c8c2518dee4ed6c909d1928c2217f4
2018-07-21 09:51:06 +08:00
parent 07dc8bf834
commit 9fe6f4d3a1
5 changed files with 30 additions and 30 deletions
--- a/src/layout/header-aside/components/menu-side/index.vue
+++ b/src/layout/header-aside/components/menu-side/index.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="d2-layout-header-aside-menu-side">
    <el-menu
-      :collapse="collapse"
+      :collapse="isMenuAsideCollapse"
      :unique-opened="true"
      :default-active="active"
      ref="menu"
@@ -11,7 +11,7 @@
        <d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
      </template>
    </el-menu>
-    <div v-if="menusAside.length === 0 && !collapse" class="d2-layout-header-aside-menu-empty">
+    <div v-if="menusAside.length === 0 && !isMenuAsideCollapse" class="d2-layout-header-aside-menu-empty">
      <d2-icon name="hdd-o"/>
      <span>当前目录没有菜单</span>
    </div>
@@ -33,13 +33,6 @@ export default {
    'd2-layout-header-aside-menu-item': d2LayoutMainMenuItem,
    'd2-layout-header-aside-menu-sub': d2LayoutMainMenuSub
  },
-  props: {
-    collapse: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
  data () {
    return {
      active: '',
@@ -49,12 +42,13 @@ export default {
  },
  computed: {
    ...mapState({
-      menusAside: state => state.d2admin.menusAside
+      menusAside: state => state.d2admin.menusAside,
+      isMenuAsideCollapse: state => state.d2admin.isMenuAsideCollapse
    })
  },
  watch: {
    // 折叠和展开菜单的时候销毁 better scroll
-    collapse (val) {
+    isMenuAsideCollapse (val) {
      this.scrollDestroy()
      setTimeout(() => {
        this.scrollInit()
--- a/src/layout/header-aside/layout.vue
+++ b/src/layout/header-aside/layout.vue
@@ -9,11 +9,11 @@
    <div class="d2-layout-header-aside-content">
      <!-- 顶栏 -->
      <div class="d2-theme-header">
-        <div class="logo-group" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
-          <img v-if="collapse" :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/icon-only.png`">
+        <div class="logo-group" :style="{width: isMenuAsideCollapse ? asideWidthCollapse : asideWidth}">
+          <img v-if="isMenuAsideCollapse" :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/icon-only.png`">
          <img v-else :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/all.png`">
        </div>
-        <div class="toggle-aside-btn" @click="collapse = !collapse">
+        <div class="toggle-aside-btn" @click="handleToggleAside">
          <d2-icon name="bars"/>
        </div>
        <d2-menu-header/>
@@ -28,8 +28,8 @@
      <!-- 下面 主体 -->
      <div class="d2-theme-container">
        <!-- 主体 侧边栏 -->
-        <div ref="aside" class="d2-theme-container-aside" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
-          <d2-menu-side :collapse="collapse"/>
+        <div ref="aside" class="d2-theme-container-aside" :style="{width: isMenuAsideCollapse ? asideWidthCollapse : asideWidth}">
+          <d2-menu-side/>
        </div>
        <!-- 主体 -->
        <div class="d2-theme-container-main">
@@ -38,7 +38,7 @@
          </div>
          <div class="d2-theme-container-main-body">
            <transition name="fade-transverse">
-              <keep-alive :include="keepAliveList">
+              <keep-alive :include="d2adminKeepAliveList">
                <router-view/>
              </keep-alive>
            </transition>
@@ -50,7 +50,7 @@
 </template>

 <script>
-import { mapState, mapGetters } from 'vuex'
+import { mapState, mapGetters, mapMutations } from 'vuex'

 import menuSide from './components/menu-side'
 import menuHeader from './components/menu-header'
@@ -73,7 +73,6 @@ export default {
  },
  data () {
    return {
-      collapse: false,
      // [侧边栏宽度] 正常状态
      asideWidth: '200px',
      // [侧边栏宽度] 折叠状态
@@ -83,17 +82,13 @@ export default {
  computed: {
    ...mapState({
      isGrayMode: state => state.d2admin.isGrayMode,
-      pageOpenedList: state => state.d2admin.pageOpenedList
+      pageOpenedList: state => state.d2admin.pageOpenedList,
+      isMenuAsideCollapse: state => state.d2admin.isMenuAsideCollapse
    }),
    ...mapGetters([
-      'themeActiveSetting'
+      'themeActiveSetting',
+      'd2adminKeepAliveList'
    ]),
-    /**
-     * @description 返回现在需要缓存的页面 name 数组
-     */
-    keepAliveList () {
-      return this.pageOpenedList.filter(item => !(item.meta && item.meta.notCache)).map(e => e.name)
-    },
    /**
     * @description 最外层容器的背景图片样式
     */
@@ -104,6 +99,17 @@ export default {
        } : {}
      }
    }
+  },
+  methods: {
+    ...mapMutations([
+      'd2adminMenuAsideCollapseToggle'
+    ]),
+    /**
+     * 接收点击切换侧边栏的按钮
+     */
+    handleToggleAside () {
+      this.d2adminMenuAsideCollapseToggle()
+    }
  }
 }
 </script>
--- a/src/pages/demo/playground/page-cache/off.vue
+++ b/src/pages/demo/playground/page-cache/off.vue
@@ -1,5 +1,5 @@
 <template>
-  <d2-container type="card">
+  <d2-container>
    <template slot="header">这个页面不会被 keep-alive</template>
    <p class="d2-mt-0">在下面的输入框输入任意字符后，切换到其它页面，再回到此页时输入框文字消失，证明没有被缓存</p>
    <el-input v-model="value" placeholder="input here"></el-input>
--- a/src/pages/demo/playground/page-cache/on.vue
+++ b/src/pages/demo/playground/page-cache/on.vue
@@ -1,5 +1,5 @@
 <template>
-  <d2-container type="card">
+  <d2-container>
    <template slot="header">这个页面会被 keep-alive</template>
    <p class="d2-mt-0">在下面的输入框输入任意字符后，切换到其它页面，再回到此页时输入框文字保留，证明被缓存</p>
    <el-input v-model="value" placeholder="input here"></el-input>
--- a/src/store/modules/d2admin.js.REMOVED.git-id
+++ b/src/store/modules/d2admin.js.REMOVED.git-id
@@ -1 +1 @@
-e771f2f57cedfc8d2e3e0a07a9b4f1f0ada4f152
+036efa02a01b2165111fbf85c475eb625e962c2c