Menu: close menus on collapse change

packages/menu/src/menu.vue

@@ -13,71 +13,9 @@
   </el-menu-collapse-transition>
 </template>
 <script>
-  import Vue from 'vue';
   import emitter from 'element-ui/src/mixins/emitter';
   import { addClass, removeClass, hasClass } from 'element-ui/src/utils/dom';
 
-  Vue.component('el-menu-collapse-transition', {
-    functional: true,
-    render(createElement, context) {
-      const data = {
-        props: {
-          mode: 'out-in'
-        },
-        on: {
-          beforeEnter(el) {
-            el.style.opacity = 0.2;
-          },
-
-          enter(el) {
-            addClass(el, 'el-opacity-transition');
-            el.style.opacity = 1;
-          },
-
-          afterEnter(el) {
-            removeClass(el, 'el-opacity-transition');
-            el.style.opacity = '';
-          },
-
-          beforeLeave(el) {
-            if (!el.dataset) el.dataset = {};
-
-            if (hasClass(el, 'el-menu--collapse')) {
-              removeClass(el, 'el-menu--collapse');
-              el.dataset.oldOverflow = el.style.overflow;
-              el.dataset.scrollWidth = el.scrollWidth;
-              addClass(el, 'el-menu--collapse');
-            }
-
-            el.style.width = el.scrollWidth + 'px';
-            el.style.overflow = 'hidden';
-          },
-
-          leave(el) {
-            if (!hasClass(el, 'el-menu--collapse')) {
-              addClass(el, 'horizontal-collapse-transition');
-              el.style.width = '64px';
-            } else {
-              addClass(el, 'horizontal-collapse-transition');
-              el.style.width = el.dataset.scrollWidth + 'px';
-            }
-          },
-
-          afterLeave(el) {
-            removeClass(el, 'horizontal-collapse-transition');
-            if (hasClass(el, 'el-menu--collapse')) {
-              el.style.width = el.dataset.scrollWidth + 'px';
-            } else {
-              el.style.width = '64px';
-            }
-            el.style.overflow = el.dataset.oldOverflow;
-          }
-        }
-      };
-      return createElement('transition', data, context.children);
-    }
-  });
-
   export default {
     name: 'ElMenu',
 
@@ -91,6 +29,69 @@
       };
     },
 
+    components: {
+      'el-menu-collapse-transition': {
+        functional: true,
+        render(createElement, context) {
+          const data = {
+            props: {
+              mode: 'out-in'
+            },
+            on: {
+              beforeEnter(el) {
+                el.style.opacity = 0.2;
+              },
+
+              enter(el) {
+                addClass(el, 'el-opacity-transition');
+                el.style.opacity = 1;
+              },
+
+              afterEnter(el) {
+                removeClass(el, 'el-opacity-transition');
+                el.style.opacity = '';
+              },
+
+              beforeLeave(el) {
+                if (!el.dataset) el.dataset = {};
+
+                if (hasClass(el, 'el-menu--collapse')) {
+                  removeClass(el, 'el-menu--collapse');
+                  el.dataset.oldOverflow = el.style.overflow;
+                  el.dataset.scrollWidth = el.scrollWidth;
+                  addClass(el, 'el-menu--collapse');
+                }
+
+                el.style.width = el.scrollWidth + 'px';
+                el.style.overflow = 'hidden';
+              },
+
+              leave(el) {
+                if (!hasClass(el, 'el-menu--collapse')) {
+                  addClass(el, 'horizontal-collapse-transition');
+                  el.style.width = '64px';
+                } else {
+                  addClass(el, 'horizontal-collapse-transition');
+                  el.style.width = el.dataset.scrollWidth + 'px';
+                }
+              },
+
+              afterLeave(el) {
+                removeClass(el, 'horizontal-collapse-transition');
+                if (hasClass(el, 'el-menu--collapse')) {
+                  el.style.width = el.dataset.scrollWidth + 'px';
+                } else {
+                  el.style.width = '64px';
+                }
+                el.style.overflow = el.dataset.oldOverflow;
+              }
+            }
+          };
+          return createElement('transition', data, context.children);
+        }
+      }
+    },
+
     props: {
       mode: {
         type: String,
@@ -134,6 +135,9 @@
       },
       defaultOpeneds(value) {
         this.openedMenus = value;
+      },
+      collapse(value) {
+        if (value) this.openedMenus = [];
       }
     },
     methods: {