From 3639afb511fe54719453a8eb3b43a184194bec22 Mon Sep 17 00:00:00 2001
From: Lu Chaohai <luchaohai@cn.ibm.com>
Date: Wed, 19 Sep 2018 11:16:49 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E6=BA=A2=E5=87=BA=E6=BB=91=E5=8A=A8=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 532709fa1a5511922eedc0d13bfed69d162e852f [formerly 532709fa1a5511922eedc0d13bfed69d162e852f [formerly 532709fa1a5511922eedc0d13bfed69d162e852f [formerly 532709fa1a5511922eedc0d13bfed69d162e852f [formerly f57575206fac486e57778c5ec91d500214ad3b27 [formerly d1aad9533b98e643188d037d0e6930f1f27d9c51]]]]]
Former-commit-id: 45a4b69ca308f0b51ea9a914536919e17ab6923b
Former-commit-id: 0734a857ac8c807713183527daa06ba849521a6a
Former-commit-id: 2b0f3d1b0a9e8532286633458cebb7f01f5dc233 [formerly 03eeb7848f8dbedab0da78ad773aa00d48ee2298]
Former-commit-id: 86fdf964739a469c11d0d1774e8ed286aa99d7ab
Former-commit-id: 5cd3b8a1919240c6502ad6510a07cd8052c54ad9
Former-commit-id: d71609fb4d80126f2d836017cc87b415c2e67dbc
Former-commit-id: 02738477cd3bb4f0c6435d780769e6fab7111d0d
Former-commit-id: df6bc33556ae3db3a473017b97dd2e4482ee41ee
---
 .../components/menu-header/index.vue          | 133 +++++++++++++++++-
 src/layout/header-aside/layout.vue            |  11 +-
 2 files changed, 132 insertions(+), 12 deletions(-)

diff --git a/src/layout/header-aside/components/menu-header/index.vue b/src/layout/header-aside/components/menu-header/index.vue
index 940aaf63..39d68273 100644
--- a/src/layout/header-aside/components/menu-header/index.vue
+++ b/src/layout/header-aside/components/menu-header/index.vue
@@ -1,10 +1,22 @@
 <template>
-  <el-menu mode="horizontal" :default-active="active" @select="handleMenuSelect">
-    <template v-for="(menu, menuIndex) in header">
-      <d2-layout-header-aside-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
-      <d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
-    </template>
-  </el-menu>
+  <div class="d2admin_menu_header-page" ref="page" :class="{'is-scrollable': isScroll}" flex="cross:center">
+    <div class="d2admin_menu_header-content" ref="content" flex-box="1" flex>
+      <div class="d2admin_menu_header-scroll" ref="scroll" flex-box="0" :style="'transform: translateX(' + currentTranslateX + 'px);'">
+        <el-menu mode="horizontal" :default-active="active" @select="handleMenuSelect">
+          <template v-for="(menu, menuIndex) in header">
+            <d2-layout-header-aside-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
+            <d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
+          </template>
+        </el-menu>
+      </div>
+    </div>
+    <div v-if="isScroll" class="d2admin_menu_header-prev" flex-box="0" @click="scroll('left')" flex="main:center cross:center">
+      <i class="el-icon-arrow-left"></i>
+    </div>
+    <div v-if="isScroll" class="d2admin_menu_header-next" flex-box="0" @click="scroll('right')" flex="cross:center">
+      <i class="el-icon-arrow-right"></i>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -28,7 +40,11 @@ export default {
   },
   data () {
     return {
-      active: ''
+      active: '',
+      isScroll: false,
+      scrollWidth: 0,
+      contentWidth: 0,
+      currentTranslateX: 0
     }
   },
   watch: {
@@ -38,6 +54,109 @@ export default {
       },
       immediate: true
     }
+  },
+  methods: {
+    scroll (direction) {
+      if (direction === 'left') {
+        // 向右滚动
+        this.currentTranslateX = 0
+      } else {
+        // 向左滚动
+        if (this.contentWidth * 2 - this.currentTranslateX <= this.scrollWidth) {
+          this.currentTranslateX -= this.contentWidth
+        } else {
+          this.currentTranslateX = this.contentWidth - this.scrollWidth
+        }
+      }
+    }
+  },
+  mounted () {
+    const checkScroll = () => {
+      let contentWidth = this.$refs.content.clientWidth
+      let scrollWidth = this.$refs.scroll.clientWidth
+      if (this.isScroll) {
+        // 页面依旧允许滚动的情况，需要更新width
+        if (this.contentWidth - this.scrollWidth === this.currentTranslateX) {
+          // currentTranslateX 也需要相应变化【在右端到头的情况时】
+          this.currentTranslateX = contentWidth - scrollWidth
+          // 快速的滑动依旧存在判断和计算时对应的contentWidth变成正数，所以需要限制一下
+          if (this.currentTranslateX > 0) {
+            this.currentTranslateX = 0
+          }
+        }
+        // 更新元素数据
+        this.contentWidth = contentWidth
+        this.scrollWidth = scrollWidth
+        // 判断何时滚动消失: 当page > content + btns(40)
+        if (contentWidth > scrollWidth + 40) {
+          this.isScroll = false
+        }
+      }
+      // 判断何时滚动出现: 当page < content
+      if (!this.isScroll && contentWidth < scrollWidth) {
+        this.isScroll = true
+        // 注意，当isScroll变为true，对应的元素盒子大小会发生变化
+        this.$nextTick(() => {
+          contentWidth = this.$refs.content.clientWidth
+          scrollWidth = this.$refs.scroll.clientWidth
+          this.contentWidth = contentWidth
+          this.scrollWidth = scrollWidth
+          this.currentTranslateX = 0
+        })
+      }
+    }
+    // 初始化判断
+    checkScroll()
+
+    // 默认判断父元素和子元素的大小，以确定初始情况是否显示滚动
+    // 全局窗口变化监听，判断父元素和子元素的大小，从而控制isScroll的开关
+    window.onresize = () => {
+      checkScroll()
+    }
   }
 }
 </script>
+<style lang="scss">
+  $prefix: "d2admin_menu_header";
+  .#{$prefix}-page {
+    overflow: hidden;
+    &.is-scrollable {
+      position: relative;
+      padding: 0 20px;
+      .#{$prefix}-prev, .#{$prefix}-next {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+      }
+    }
+    .#{$prefix}-content {
+      overflow: hidden;
+      .#{$prefix}-scroll {
+        white-space: nowrap;
+        position: relative;
+        -webkit-transition: -webkit-transform .3s;
+        transition: -webkit-transform .3s;
+        transition: transform .3s;
+        transition: transform .3s, -webkit-transform .3s;
+        transition: transform .3s,-webkit-transform .3s;
+        float: left;
+      }
+    }
+    .#{$prefix}-prev, .#{$prefix}-next {
+      height: 60px;
+      position: absolute;
+      top: 0;
+      font-size: 20px;
+      color: #cfd7e5;
+      cursor: pointer;
+      background: white;
+      display: none;
+    }
+    .#{$prefix}-prev {
+      left: 0;
+    }
+    .#{$prefix}-next {
+      right: 0;
+    }
+  }
+</style>
diff --git a/src/layout/header-aside/layout.vue b/src/layout/header-aside/layout.vue
index abaf4afc..b3d75c12 100644
--- a/src/layout/header-aside/layout.vue
+++ b/src/layout/header-aside/layout.vue
@@ -13,17 +13,18 @@
         :style="{
           opacity: this.searchActive ? 0.5 : 1
         }"
-        flex-box="0">
-        <div class="logo-group" :style="{width: asideCollapse ? asideWidthCollapse : asideWidth}">
+        flex-box="0"
+        flex>
+        <div class="logo-group" :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`">
         </div>
-        <div class="toggle-aside-btn" @click="handleToggleAside">
+        <div class="toggle-aside-btn" @click="handleToggleAside" flex-box="0">
           <d2-icon name="bars"/>
         </div>
-        <d2-menu-header/>
+        <d2-menu-header flex-box="1"/>
         <!-- 顶栏右侧 -->
-        <div class="d2-header-right">
+        <div class="d2-header-right" flex-box="0">
           <!-- 如果你只想在开发环境显示这个按钮请添加 v-if="$env === 'development'" -->
           <d2-header-search @click="handleSearchClick"/>
           <d2-header-error-log/>

From cc524035ec58836e005995eadecae0d3e1ab44e7 Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Wed, 19 Sep 2018 15:16:56 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: d30826af20bd7e79a8f0276cde532c2c2e2c115b [formerly 216f197dd5724f8b53dd17305817cdba13fefdef] [formerly d30826af20bd7e79a8f0276cde532c2c2e2c115b [formerly 216f197dd5724f8b53dd17305817cdba13fefdef] [formerly d30826af20bd7e79a8f0276cde532c2c2e2c115b [formerly 216f197dd5724f8b53dd17305817cdba13fefdef] [formerly 216f197dd5724f8b53dd17305817cdba13fefdef [formerly e021295fabe3798737bc267bab2875af1788a8d3 [formerly 5dc00107272218a8e490ed792847b1b44587e551]]]]]
Former-commit-id: 40493cf718ee3efd124ed096c446631d5f9da5d4
Former-commit-id: 10d1e5dd096227d644a1231196d42d213f1b801f
Former-commit-id: 43fdd834622256ed04f9ae2f8382f4488f8c1222 [formerly d9f9f7cf59ae621438afc7ef82121a72066a4e1e]
Former-commit-id: cfac13dc4110999c71d83be1c6b9a7dfa4595719
Former-commit-id: 8cf63db9d880a277446d3c1795ec51a4af223024
Former-commit-id: 9af99bd48bbfe6dd784db17388505ff1888e1c52
Former-commit-id: 00b426bb14a99716d3f06ebbde1c7c4c6b42b834
Former-commit-id: 345b95e833a29e552ad68a41accd4aef8e39c600
---
 .../theme/theme-base.scss.REMOVED.git-id      |  2 +-
 .../style/theme/theme.scss.REMOVED.git-id     |  2 +-
 .../components/menu-header/index.vue          | 54 ++-----------------
 3 files changed, 7 insertions(+), 51 deletions(-)

diff --git a/src/assets/style/theme/theme-base.scss.REMOVED.git-id b/src/assets/style/theme/theme-base.scss.REMOVED.git-id
index fcd48ec1..2db84ab2 100644
--- a/src/assets/style/theme/theme-base.scss.REMOVED.git-id
+++ b/src/assets/style/theme/theme-base.scss.REMOVED.git-id
@@ -1 +1 @@
-134f6af0a62409abc3a59f2e23a1a00817f44b4c
\ No newline at end of file
+35339c248c50cb38d1ef2787c8bd7b86f24b4e30
\ No newline at end of file
diff --git a/src/assets/style/theme/theme.scss.REMOVED.git-id b/src/assets/style/theme/theme.scss.REMOVED.git-id
index 276f4bb5..4990c2ce 100644
--- a/src/assets/style/theme/theme.scss.REMOVED.git-id
+++ b/src/assets/style/theme/theme.scss.REMOVED.git-id
@@ -1 +1 @@
-5e28075542c22533bf13f61de9a2eaf52bf18157
\ No newline at end of file
+12a8c966ed20571d09f5e912f7a83bc86264bf83
\ No newline at end of file
diff --git a/src/layout/header-aside/components/menu-header/index.vue b/src/layout/header-aside/components/menu-header/index.vue
index 39d68273..90884efd 100644
--- a/src/layout/header-aside/components/menu-header/index.vue
+++ b/src/layout/header-aside/components/menu-header/index.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="d2admin_menu_header-page" ref="page" :class="{'is-scrollable': isScroll}" flex="cross:center">
-    <div class="d2admin_menu_header-content" ref="content" flex-box="1" flex>
-      <div class="d2admin_menu_header-scroll" ref="scroll" flex-box="0" :style="'transform: translateX(' + currentTranslateX + 'px);'">
+  <div class="d2-theme-header-menu" ref="page" :class="{'is-scrollable': isScroll}" flex="cross:center">
+    <div class="d2-theme-header-menu__content" ref="content" flex-box="1" flex>
+      <div class="d2-theme-header-menu__scroll" ref="scroll" flex-box="0" :style="'transform: translateX(' + currentTranslateX + 'px);'">
         <el-menu mode="horizontal" :default-active="active" @select="handleMenuSelect">
           <template v-for="(menu, menuIndex) in header">
             <d2-layout-header-aside-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
@@ -10,10 +10,10 @@
         </el-menu>
       </div>
     </div>
-    <div v-if="isScroll" class="d2admin_menu_header-prev" flex-box="0" @click="scroll('left')" flex="main:center cross:center">
+    <div v-if="isScroll" class="d2-theme-header-menu__prev" flex-box="0" @click="scroll('left')" flex="main:center cross:center">
       <i class="el-icon-arrow-left"></i>
     </div>
-    <div v-if="isScroll" class="d2admin_menu_header-next" flex-box="0" @click="scroll('right')" flex="cross:center">
+    <div v-if="isScroll" class="d2-theme-header-menu__next" flex-box="0" @click="scroll('right')" flex="cross:center">
       <i class="el-icon-arrow-right"></i>
     </div>
   </div>
@@ -116,47 +116,3 @@ export default {
   }
 }
 </script>
-<style lang="scss">
-  $prefix: "d2admin_menu_header";
-  .#{$prefix}-page {
-    overflow: hidden;
-    &.is-scrollable {
-      position: relative;
-      padding: 0 20px;
-      .#{$prefix}-prev, .#{$prefix}-next {
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-      }
-    }
-    .#{$prefix}-content {
-      overflow: hidden;
-      .#{$prefix}-scroll {
-        white-space: nowrap;
-        position: relative;
-        -webkit-transition: -webkit-transform .3s;
-        transition: -webkit-transform .3s;
-        transition: transform .3s;
-        transition: transform .3s, -webkit-transform .3s;
-        transition: transform .3s,-webkit-transform .3s;
-        float: left;
-      }
-    }
-    .#{$prefix}-prev, .#{$prefix}-next {
-      height: 60px;
-      position: absolute;
-      top: 0;
-      font-size: 20px;
-      color: #cfd7e5;
-      cursor: pointer;
-      background: white;
-      display: none;
-    }
-    .#{$prefix}-prev {
-      left: 0;
-    }
-    .#{$prefix}-next {
-      right: 0;
-    }
-  }
-</style>