顶部菜单栏菜单过长时添加滚动条

src/containers/layout/IconMenu/components/MenuItem.vue

@@ -17,7 +17,7 @@
       <div class="IconMenu-name">{{ menuName }}</div>
     </div>
     <div
-      :class="`SubmenuBox ${showSubMenus?'show':''}`"
+      :class="{SubmenuBox: true, show: showSubMenus, scroll: needScroll}"
       :style="style"
       v-if="menuList && menuList.length"
     >
@@ -78,6 +78,7 @@
 <script>
 import LikeIcon from './LikeIcon';
 
+let timers = null;
 export default {
   name: 'MenuItem',
   components: { LikeIcon },
@@ -101,6 +102,7 @@ export default {
   data() {
     return {
       showSubMenus: false,
+      needScroll: false,
       style: '',
     };
   },
@@ -123,6 +125,19 @@ export default {
   methods: {
     toggleSubmenus(visiable) {
       this.showSubMenus = visiable;
+      if (visiable) {
+        // this.$nextTick(() => {
+        // });
+        timers = setTimeout(() => {
+          this.needScroll = visiable;
+        }, 280);
+      } else {
+        if (timers) {
+          clearTimeout(timers);
+          timers = null;
+        }
+        this.needScroll = visiable;
+      }
     },
     selectHandle() {
       if (typeof this.selectRouteMenu === 'function') {
@@ -173,9 +188,12 @@ export default {
     transition: all 0.28s ease-in-out;
     overflow: hidden;
     &.show {
-      max-height: 1000px;
+      max-height: 600px;
       height: auto;
     }
+    &.scroll {
+      overflow-y: auto;
+    }
     .Submenu-title {
       width: 560px;
       height: 30px;