From eb4103265850c3d9cb71d97cd62bec1b946974e0 Mon Sep 17 00:00:00 2001
From: SkyAo <csvwolf@qq.com>
Date: Wed, 7 Nov 2018 19:05:46 +0800
Subject: [PATCH] Menu: clickoutside hide submenu (#13296)

* Menu:(fix) clickoutside hide submenu

* fix: optimize code
---
 packages/menu/src/submenu.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/menu/src/submenu.vue b/packages/menu/src/submenu.vue
index 375966933..437533f9e 100644
--- a/packages/menu/src/submenu.vue
+++ b/packages/menu/src/submenu.vue
@@ -3,6 +3,7 @@
   import menuMixin from './menu-mixin';
   import Emitter from 'element-ui/src/mixins/emitter';
   import Popper from 'element-ui/src/utils/vue-popper';
+  import Clickoutside from 'element-ui/src/utils/clickoutside';
 
   const poperMixins = {
     props: {
@@ -29,6 +30,8 @@
 
     components: { ElCollapseTransition },
 
+    directives: { Clickoutside },
+
     props: {
       index: {
         type: String,
@@ -226,6 +229,11 @@
         this.referenceElm = this.$el;
         this.popperElm = this.$refs.menu;
         this.updatePlacement();
+      },
+      close() {
+        this.$nextTick(() => {
+          if (this.opened) this.rootMenu.closeMenu(this.index);
+        });
       }
     },
     created() {
@@ -315,6 +323,7 @@
           on-mouseenter={this.handleMouseenter}
           on-mouseleave={this.handleMouseleave}
           on-focus={this.handleMouseenter}
+          v-clickoutside={this.close}
         >
           <div
             class="el-submenu__title"