Skip to content

Commit 3291706

Browse files
kuangshpkuangshp
committed
配置菜单
1 parent a459d1c commit 3291706

File tree

5 files changed

+101
-77
lines changed

5 files changed

+101
-77
lines changed

‎src/components/menus/MenuItem.vue

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,23 @@
11
<template>
2-
<div>
3-
<el-submenu
4-
v-if="item.children && item.children.length"
5-
:index="item.url"
6-
>
7-
<template slot="title">{{ item.title }}</template>
8-
<!-- 递归使用该组件 -->
9-
<template v-for="(m, i) in item.children">
10-
<MenuItem
11-
:item="m"
12-
:key="i"
13-
/>
14-
</template>
15-
</el-submenu>
16-
<el-menu-item
17-
v-else
18-
:index="item.index"
19-
>
20-
<li>{{ item.title }}</li>
21-
</el-menu-item>
22-
</div>
2+
<el-submenu
3+
v-if="item.children && item.children.length"
4+
:index="item.url"
5+
>
6+
<template slot="title">{{ item.title }}</template>
7+
<!-- 递归使用该组件 -->
8+
<template v-for="(m, i) in item.children">
9+
<MenuItem
10+
:item="m"
11+
:key="i"
12+
/>
13+
</template>
14+
</el-submenu>
15+
<el-menu-item
16+
v-else
17+
:index="item.index"
18+
>
19+
<li>{{ item.title }}</li>
20+
</el-menu-item>
2321
</template>
2422

2523
<script>

‎src/components/menus/Menus.vue

Lines changed: 73 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,91 @@
11
<template>
2-
<el-row class="tac">
3-
<el-col :span="24">
4-
<el-menu
5-
class="sidebar-el-menu"
6-
:default-active="onRoutes"
7-
:collapse="isCollapse"
8-
background-color="#324157"
9-
text-color="#bfcbd9"
10-
active-text-color="#20a0ff"
11-
unique-opened
12-
router
13-
>
14-
<template v-for="(item, index) in menuList">
15-
<MenuItem
16-
:key="index"
17-
:item="item"
18-
/>
2+
<div class="sidebae">
3+
<el-menu
4+
class="sidebar-el-menu"
5+
:default-active="onRoutes"
6+
:collapse="isCollapse"
7+
background-color="#324157"
8+
text-color="#bfcbd9"
9+
active-text-color="#20a0ff"
10+
unique-opened
11+
router
12+
>
13+
<!-- <template v-for="(item, index) in menuList">
14+
<MenuItem
15+
:key="index"
16+
:item="item"
17+
/>
18+
</template> -->
19+
<template v-for="item in menuList">
20+
<template v-if="item.subs">
21+
<el-submenu
22+
:index="item.index"
23+
:key="item.index"
24+
>
25+
<template slot="title">
26+
<i :class="item.icon"></i>
27+
<span slot="title">{{ item.title }}</span>
28+
</template>
29+
<template v-for="subItem in item.subs">
30+
<el-submenu
31+
v-if="subItem.subs"
32+
:index="subItem.index"
33+
:key="subItem.index"
34+
>
35+
<template slot="title">{{ subItem.title }}</template>
36+
<el-menu-item
37+
v-for="(threeItem,i) in subItem.subs"
38+
:key="i"
39+
:index="threeItem.index"
40+
>{{ threeItem.title }}</el-menu-item>
41+
</el-submenu>
42+
<el-menu-item
43+
v-else
44+
:index="subItem.index"
45+
:key="subItem.index"
46+
>{{ subItem.title }}</el-menu-item>
47+
</template>
48+
</el-submenu>
1949
</template>
20-
</el-menu>
21-
</el-col>
22-
</el-row>
50+
<template v-else>
51+
<el-menu-item
52+
:index="item.index"
53+
:key="item.index"
54+
>
55+
<i :class="item.icon"></i>
56+
<span slot="title">{{ item.title }}</span>
57+
</el-menu-item>
58+
</template>
59+
</template>
60+
</el-menu>
61+
</div>
2362
</template>
2463

25-
<script lang="ts">
26-
import MenuItem from './MenuItem.vue';
64+
<script>
65+
// import MenuItem from './MenuItem.vue';
2766
import { mapState } from 'vuex';
2867
2968
export default {
3069
props: {},
31-
data() {
70+
data () {
3271
return {
33-
isCollapse: false,
34-
}
35-
},
36-
methods: {
37-
handleOpen(key, keyPath) {
38-
console.log(key, keyPath);
39-
},
40-
handleClose(key, keyPath) {
41-
console.log(key, keyPath);
72+
// isCollapse: false,
4273
}
4374
},
4475
computed: {
4576
...mapState({
4677
menuList: state => state.view.menuList,
78+
isCollapse: state => state.view.sidebarOpened,
4779
}),
48-
onRoutes() {
80+
onRoutes () {
4981
return this.$route.path.replace('/', '');
5082
}
5183
},
52-
mounted() {
53-
console.log(this.menuList, '===')
84+
mounted () {
85+
console.log(this.menuList, '==aa=')
5486
},
5587
components: {
56-
MenuItem,
88+
// MenuItem,
5789
},
5890
}
5991
</script>
@@ -79,4 +111,9 @@ export default {
79111
.sidebar > ul {
80112
height: 100%;
81113
}
114+
115+
[class*=" el-icon-lx"],
116+
[class^="el-icon-lx"] {
117+
font-family: lx-iconfont !important;
118+
}
82119
</style>

‎src/layout/Layout.vue

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,17 @@
77
class="content"
88
:class="{'sidebar-close': !sidebarOpened}"
99
>
10-
<div class="sidebar">
11-
<sidebar></sidebar>
12-
</div>
10+
<!-- 左侧导航 -->
11+
<sidebar></sidebar>
12+
<!-- 右侧视图 -->
1313
<div class="view">
1414
<router-view></router-view>
1515
</div>
1616
</div>
1717
</div>
1818
</template>
1919

20-
<script lang="ts">
21-
// import { IViewState } from '@/store/view';
20+
<script>
2221
2322
import AppHeader from './header/Index.vue';
2423
import Sidebar from './sidebar/Index.vue';

‎src/layout/sidebar/Index.vue

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
<template>
2-
<div class="app-sidebar">
3-
<menus />
4-
</div>
2+
<menus />
53
</template>
64

75
<script>
@@ -10,17 +8,8 @@ export default {
108
data () {
119
return {
1210
menus,
13-
isCollapse: false,
1411
}
1512
},
16-
methods: {
17-
handleOpen (key, keyPath) {
18-
console.log(key, keyPath);
19-
},
20-
handleClose (key, keyPath) {
21-
console.log(key, keyPath);
22-
}
23-
}
2413
}
2514
</script>
2615

‎src/main.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,12 @@ Vue.prototype.$axios = axios;
1414

1515
/******************************** 引入elementUi组件库 start ********************************/
1616
import ElementUI from 'element-ui';
17-
import 'element-ui/lib/theme-chalk/index.css';
18-
Vue.use(ElementUI);
17+
import 'element-ui/lib/theme-chalk/index.css'; // 默认主题
18+
Vue.use(ElementUI, {
19+
size: 'small',
20+
});
1921
/******************************** 引入elementUi组件库 end ********************************/
2022

21-
// 配置自定义组件
2223
// 使用自己定义的组件
2324
import components from '@/components';
2425
Vue.use(components);

0 commit comments

Comments
 (0)