新增菜单溢出滑动模块

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

src/layout/header-aside/components/menu-header/index.vue

@@ -1,10 +1,22 @@
 <template>
-  <el-menu mode="horizontal" :default-active="active" @select="handleMenuSelect">
+  <div class="d2admin_menu_header-page" ref="page" :class="{'is-scrollable': isScroll}" flex="cross:center">
-    <template v-for="(menu, menuIndex) in header">
+    <div class="d2admin_menu_header-content" ref="content" flex-box="1" flex>
-      <d2-layout-header-aside-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
+      <div class="d2admin_menu_header-scroll" ref="scroll" flex-box="0" :style="'transform: translateX(' + currentTranslateX + 'px);'">
-      <d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
+        <el-menu mode="horizontal" :default-active="active" @select="handleMenuSelect">
-    </template>
+          <template v-for="(menu, menuIndex) in header">
-  </el-menu>
+            <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>

src/layout/header-aside/layout.vue

@@ -13,17 +13,18 @@
         :style="{
           opacity: this.searchActive ? 0.5 : 1
         }"
-        flex-box="0">
+        flex-box="0"
-        <div class="logo-group" :style="{width: asideCollapse ? asideWidthCollapse : asideWidth}">
+        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/>