fix:[Sidebar]: fixed bug in iOS

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)
+ }
+ }
+ }
+ }
+}

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: {