Handle redirect to sub menu when click parent menu (#876)
* Handle redirect to sub menu when click parent menu
* renamed the function
* allow click on menu for desktop
* reset cache path when click menu item without submenu
* Fixes click parent menu with full expanded
* removed the expand submenu block segment
diff --git a/src/components/menu/menu.js b/src/components/menu/menu.js
index b86c8a7..7cb1a01 100644
--- a/src/components/menu/menu.js
+++ b/src/components/menu/menu.js
@@ -47,7 +47,8 @@
return {
openKeys: [],
selectedKeys: [],
- cachedOpenKeys: []
+ cachedOpenKeys: [],
+ cachedPath: null
}
},
computed: {
@@ -104,6 +105,7 @@
})
}
+ this.cachedPath = this.selectedKeys[0]
this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
},
@@ -123,7 +125,7 @@
return (
<Item {...{ key: menu.path }}>
<router-link {...{ props }}>
- {this.renderIcon(menu.meta.icon)}
+ {this.renderIcon(menu.meta.icon, menu)}
<span>{this.$t(menu.meta.title)}</span>
</router-link>
</Item>
@@ -131,28 +133,47 @@
},
renderSubMenu (menu) {
const itemArr = []
+ const on = {
+ click: () => {
+ this.handleClickParentMenu(menu)
+ }
+ }
if (!menu.hideChildrenInMenu) {
menu.children.forEach(item => itemArr.push(this.renderItem(item)))
}
return (
<SubMenu {...{ key: menu.path }}>
<span slot="title">
- {this.renderIcon(menu.meta.icon)}
- <span>{this.$t(menu.meta.title)}</span>
+ {this.renderIcon(menu.meta.icon, menu)}
+ <span {...{ on: on }}>{this.$t(menu.meta.title)}</span>
</span>
{itemArr}
</SubMenu>
)
},
- renderIcon (icon) {
+ renderIcon (icon, menuItem) {
if (icon === 'none' || icon === undefined) {
return null
}
const props = {}
+ const on = {
+ click: () => {
+ this.handleClickParentMenu(menuItem)
+ }
+ }
typeof (icon) === 'object' ? props.component = icon : props.type = icon
return (
- <Icon {... { props } }/>
+ <Icon {... { props, on } } />
)
+ },
+ handleClickParentMenu (menuItem) {
+ if (this.cachedPath === menuItem.redirect) {
+ return
+ }
+ if (menuItem.redirect) {
+ this.cachedPath = menuItem.redirect
+ setTimeout(() => this.$router.push({ path: menuItem.path }))
+ }
}
},
render () {
