1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import menuData from "@/router/modules/menu";
import { mapState } from "vuex";
import createMenu from "./components/menuItem";
export default {
data() {
return {
selectData: [],
openKeys: [],
};
},
computed: {
...mapState({
menuStack: (state) => state.common.menuStack,
}),
// 访问下级页的时候记录当前根菜单高亮
currentSelectKey: function () {
const path = this.$route.path;
const dfs = (data) => {
for (let i = 0; i < data.length; i++) {
const item = data[i];
if (item.children && item.children.length) {
const a = dfs(item.children);
if (a) {
this.openKeys = [item.path];
break;
}
} else if (item.path && path.indexOf(item.path) > -1) {
return true;
}
}
};
dfs(menuData);
return [path];
},
},
mounted() {
const path = this.$route.path;
this.menuClick({ key: path });
},
methods: {
subMenuClick(openKeys) {
this.openKeys = openKeys.splice(-1, 1);
},
menuClick({ key }) {
let menuStack = this.menuStack;
let isHere = false;
for (let i = 0; i < this.menuStack.length; i++) {
if (menuStack[i].path === key) {
isHere = true;
}
}
if (!isHere) {
const dfs = (data) => {
for (let i = 0; i < data.length; i++) {
const item = data[i];
if (item.children && item.children.length) {
const a = dfs(item.children);
if (a) {
break;
}
} else if (item.path && item.path === key) {
console.log(item, key);
menuStack.unshift(item);
this.$store.commit("common/setMenuStack", menuStack);
return true;
}
}
};
dfs(menuData);
}
},
},
render(h) {
const selectMenu = [...this.currentSelectKey, ...this.openKeys];
return (
<div class="menu">
<a-menu
mode="inline"
openKeys={this.openKeys}
defaultSelectedKeys={this.currentSelectKey}
onopenChange={this.subMenuClick}
onclick={this.menuClick}
selectedKeys={this.currentSelectKey}
>
{menuData.map((item) => {
return createMenu.call(this, h, item, selectMenu);
})}
</a-menu>
</div>
);
},
};