From 935d9aaba891efe80cccb22d87ac86e9cfe6f39d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= <panfree23@gmail.com>
Date: Sun, 30 Sep 2018 13:46:19 +0800
Subject: [PATCH] fix:[Sidebar]: fixed bug in iOS (#1152)

---
 .../layout/components/Sidebar/FixiOSBug.js    | 26 +++++++++++++++++++
 .../layout/components/Sidebar/SidebarItem.vue |  4 ++-
 2 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 src/views/layout/components/Sidebar/FixiOSBug.js

diff --git a/src/views/layout/components/Sidebar/FixiOSBug.js b/src/views/layout/components/Sidebar/FixiOSBug.js
new file mode 100644
index 00000000..5e0a9262
--- /dev/null
+++ b/src/views/layout/components/Sidebar/FixiOSBug.js
@@ -0,0 +1,26 @@
+export default {
+  computed: {
+    device() {
+      return this.$store.state.app.device
+    }
+  },
+  mounted() {
+    // In order to fix the click on menu on the ios device will trigger the mouseeleave bug
+    // https://github.com/PanJiaChen/vue-element-admin/issues/1135
+    this.fixBugIniOS()
+  },
+  methods: {
+    fixBugIniOS() {
+      const $submenu = this.$refs.submenu
+      if ($submenu) {
+        const handleMouseleave = $submenu.handleMouseleave
+        $submenu.handleMouseleave = (e) => {
+          if (this.device === 'mobile') {
+            return
+          }
+          handleMouseleave(e)
+        }
+      }
+    }
+  }
+}
diff --git a/src/views/layout/components/Sidebar/SidebarItem.vue b/src/views/layout/components/Sidebar/SidebarItem.vue
index 01401b09..e3abbd2d 100644
--- a/src/views/layout/components/Sidebar/SidebarItem.vue
+++ b/src/views/layout/components/Sidebar/SidebarItem.vue
@@ -9,7 +9,7 @@
       </app-link>
     </template>
 
-    <el-submenu v-else :index="item.name||item.path">
+    <el-submenu v-else ref="submenu" :index="item.name||item.path">
       <template slot="title">
         <item v-if="item.meta" :icon="item.meta.icon" :title="generateTitle(item.meta.title)" />
       </template>
@@ -40,10 +40,12 @@ import { generateTitle } from '@/utils/i18n'
 import { validateURL } from '@/utils/validate'
 import Item from './Item'
 import AppLink from './Link'
+import FixiOSBug from './FixiOSBug'
 
 export default {
   name: 'SidebarItem',
   components: { Item, AppLink },
+  mixins: [FixiOSBug],
   props: {
     // route object
     item: {