Skip to content

Commit 23a6535

Browse files
kuangshpkuangshp
committed
菜单
1 parent e429ea2 commit 23a6535

File tree

18 files changed

+470
-87
lines changed

18 files changed

+470
-87
lines changed

‎src/components/HelloWorld.vue

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎src/components/menus/MenuItem.vue

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<div>
3+
<el-submenu
4+
v-if="item.children.length"
5+
:index="item.url"
6+
>
7+
<template slot="title">{{ item.name }}</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.url"
19+
>
20+
<router-link
21+
:to="{ name: item.url }"
22+
class="router"
23+
>
24+
<li>{{ item.name }}</li>
25+
</router-link>
26+
27+
</el-menu-item>
28+
</div>
29+
</template>
30+
31+
<script>
32+
33+
export default {
34+
props: {
35+
item: Object,
36+
default: () => {},
37+
}
38+
}
39+
</script>
40+
41+
<style scoped lang="scss">
42+
.router {
43+
color: #e5e5e5;
44+
text-decoration: none;
45+
}
46+
.active {
47+
color: #f00;
48+
}
49+
</style>

‎src/components/menus/Menus.vue

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<template>
2+
<div class="app-sidebar">
3+
<el-row class="tac">
4+
<el-col :span="24">
5+
<el-menu
6+
default-active="2"
7+
class="el-menu-vertical-demo"
8+
v-if="menuList.length"
9+
background-color="#333"
10+
text-color="#fff"
11+
active-text-color="#f90"
12+
@open="handleOpen"
13+
@close="handleClose"
14+
>
15+
<template v-for="(item, index) in menuList">
16+
<MenuItem
17+
:key="index"
18+
:item="item"
19+
/>
20+
</template>
21+
</el-menu>
22+
</el-col>
23+
</el-row>
24+
</div>
25+
</template>
26+
27+
<script lang="ts">
28+
import MenuItem from './MenuItem.vue';
29+
// import { IViewState } from '@/store/view';
30+
31+
export default {
32+
props: {},
33+
data() {
34+
return {
35+
isCollapse: false,
36+
}
37+
},
38+
methods: {
39+
handleOpen(key, keyPath) {
40+
console.log(key, keyPath);
41+
},
42+
handleClose(key, keyPath) {
43+
console.log(key, keyPath);
44+
}
45+
},
46+
computed: {
47+
menuList() {
48+
return [];
49+
}
50+
},
51+
components: {
52+
MenuItem,
53+
},
54+
}
55+
</script>
56+
57+
<style scoped lang="scss">
58+
.sidebar {
59+
position: relative;
60+
.app-sidebar {
61+
position: absolute;
62+
left: 0;
63+
top: 0;
64+
right: 0;
65+
bottom: 0;
66+
.is-active {
67+
background: rgb(41, 41, 41);
68+
}
69+
}
70+
}
71+
</style>

‎src/components/menus/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import Menus from './Menus.vue';
2+
export default Menus;

‎src/layout/Layout.vue

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<template>
2+
<div class="framement">
3+
<div class="header">
4+
<app-header></app-header>
5+
</div>
6+
<div
7+
class="content"
8+
:class="{'sidebar-close': !sidebarOpened}"
9+
>
10+
<div class="sidebar">
11+
<sidebar></sidebar>
12+
</div>
13+
<div class="view">
14+
<router-view></router-view>
15+
</div>
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script lang="ts">
21+
// import { IViewState } from '@/store/view';
22+
23+
import AppHeader from './header/Index.vue';
24+
import Sidebar from './sidebar/Index.vue';
25+
26+
export default {
27+
components: {
28+
AppHeader,
29+
Sidebar,
30+
}
31+
}
32+
// @Component({
33+
// components: {
34+
// AppHeader,
35+
// Breadcrumb,
36+
// Sidebar,
37+
// },
38+
// })
39+
// export default class Layout extends Vue {
40+
// @Getter('viewStore/sidebarOpened') private sidebarOpened!: IViewState;
41+
// }
42+
</script>
43+
44+
<style lang="scss">
45+
.content {
46+
position: fixed;
47+
left: 0;
48+
top: 50px;
49+
right: 0;
50+
bottom: 0;
51+
> * {
52+
transition: all 1s;
53+
}
54+
.sidebar {
55+
width: 240px;
56+
height: inherit;
57+
background: #fff;
58+
padding: 1rem 0;
59+
box-shadow: 0 0 1.2em rgba(0, 0, 0, 0.12);
60+
margin-right: 10px;
61+
overflow-y: auto;
62+
position: fixed;
63+
left: 0;
64+
bottom: 0;
65+
top: 50px;
66+
right: 0;
67+
transform: translateX(0);
68+
}
69+
.view {
70+
margin-left: 240px;
71+
background: #e5e5e5;
72+
height: 100%;
73+
padding: 2rem;
74+
}
75+
}
76+
.sidebar-close {
77+
> * {
78+
transition: all 1s;
79+
}
80+
.sidebar {
81+
transform: translateX(-100%);
82+
}
83+
.view {
84+
margin-left: 0;
85+
}
86+
}
87+
</style>

‎src/layout/breadcrumb/Index.vue

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<template>
2+
<div class="breadcrumb">
3+
<el-breadcrumb separator-class="el-icon-arrow-right">
4+
<el-breadcrumb-item
5+
v-for="(item, index) of breadcrumbData"
6+
:key="index"
7+
:to="{ path: item.path }"
8+
>{{item.meta.title}}</el-breadcrumb-item>
9+
</el-breadcrumb>
10+
</div>
11+
</template>
12+
13+
<script>
14+
export default {
15+
data () {
16+
return {
17+
breadcrumbData: [],
18+
}
19+
},
20+
methods: {
21+
getRouteMatched () {
22+
const matched = this.$route.matched.filter((item) => item.name);
23+
this.breadcrumbData = this.$route.name === 'home'
24+
? matched
25+
: [
26+
{
27+
name: 'home',
28+
path: '/home',
29+
meta: { title: 'Home' },
30+
},
31+
].concat(matched);
32+
}
33+
},
34+
mounted () {
35+
this.getRouteMatched();
36+
},
37+
watch: {
38+
$route () {
39+
this.getRouteMatched()
40+
}
41+
}
42+
}
43+
</script>
44+
45+
<style lang="scss" scoped>
46+
.breadcrumb {
47+
height: 50px;
48+
line-height: 50px;
49+
color: #fff !important;
50+
.el-breadcrumb {
51+
line-height: 50px;
52+
.el-breadcrumb__item {
53+
.el-breadcrumb__inner.is-link {
54+
color: #fff;
55+
}
56+
}
57+
}
58+
}
59+
</style>

0 commit comments

Comments
 (0)