mirror of https://github.com/ElemeFE/element
fix menu auto collapse after router change
parent
42921e247f
commit
01b5cf53b2
|
@ -27,12 +27,7 @@
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
defaultOpeneds: {
|
defaultOpeneds: Array,
|
||||||
type: Array,
|
|
||||||
default() {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
theme: {
|
theme: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'light'
|
default: 'light'
|
||||||
|
@ -43,7 +38,7 @@
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
activeIndex: this.defaultActive,
|
activeIndex: this.defaultActive,
|
||||||
openedMenus: this.defaultOpeneds.slice(0),
|
openedMenus: (this.defaultOpeneds || []).slice(0),
|
||||||
menuItems: {},
|
menuItems: {},
|
||||||
submenus: {}
|
submenus: {}
|
||||||
};
|
};
|
||||||
|
@ -55,14 +50,18 @@
|
||||||
|
|
||||||
this.handleSelect(value, indexPath);
|
this.handleSelect(value, indexPath);
|
||||||
},
|
},
|
||||||
defaultOpeneds(value) {
|
defaultOpeneds: {
|
||||||
this.openedMenus = value;
|
deep: true,
|
||||||
|
handler(value) {
|
||||||
|
this.openedMenus = value;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
openMenu(index, indexPath) {
|
openMenu(index, indexPath) {
|
||||||
let openedMenus = this.openedMenus;
|
let openedMenus = this.openedMenus;
|
||||||
if (openedMenus.indexOf(index) !== -1) return;
|
if (openedMenus.indexOf(index) !== -1) return;
|
||||||
|
// 将不在该菜单路径下的其余菜单收起
|
||||||
if (this.uniqueOpened) {
|
if (this.uniqueOpened) {
|
||||||
this.openedMenus = openedMenus.filter(index => {
|
this.openedMenus = openedMenus.filter(index => {
|
||||||
return indexPath.indexOf(index) !== -1;
|
return indexPath.indexOf(index) !== -1;
|
||||||
|
@ -92,29 +91,28 @@
|
||||||
this.broadcast('submenu', 'item-select', [index, indexPath]);
|
this.broadcast('submenu', 'item-select', [index, indexPath]);
|
||||||
this.openedMenus = [];
|
this.openedMenus = [];
|
||||||
} else {
|
} else {
|
||||||
|
this.openActiveItemMenus();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.router && route) {
|
||||||
|
this.$router.push(route);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
openActiveItemMenus() {
|
||||||
|
let index = this.activeIndex;
|
||||||
|
if (index && this.mode === 'vertical') {
|
||||||
|
let indexPath = this.menuItems[index].indexPath;
|
||||||
|
|
||||||
// 展开该菜单项的路径上所有子菜单
|
// 展开该菜单项的路径上所有子菜单
|
||||||
indexPath.forEach(index => {
|
indexPath.forEach(index => {
|
||||||
let submenu = this.submenus[index];
|
let submenu = this.submenus[index];
|
||||||
submenu && this.openMenu(index, submenu.indexPath);
|
submenu && this.openMenu(index, submenu.indexPath);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.router && route) {
|
|
||||||
this.$router.push(route);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
let index = this.activeIndex;
|
this.openActiveItemMenus();
|
||||||
if (index && this.mode === 'vertical') {
|
|
||||||
let indexPath = this.menuItems[index].indexPath;
|
|
||||||
|
|
||||||
// 展开该菜单项的路径上所有子菜单
|
|
||||||
indexPath.forEach(index => {
|
|
||||||
let submenu = this.submenus[index];
|
|
||||||
submenu && this.openMenu(index, submenu.indexPath);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue