github
/
vue-manage-system
mirror of https://github.com/lin-xin/vue-manage-system
1
0
Fork 0
Code Issues Releases Wiki Activity

EventBus折叠改为链式调用

pull/208/head
linxin 2019-08-30 15:02:11 +08:00
parent 3022814f8a
commit 60eeaaf3eb
3 changed files with 189 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/common/Header.vue
View File

@ -38,9 +38,6 @@
<i class="el-icon-caret-bottom"></i> <i class="el-icon-caret-bottom"></i>
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<a href="http://blog.gdfengshuo.com/about/" target="_blank">
<el-dropdown-item>关于作者</el-dropdown-item>
</a>
<a href="https://github.com/lin-xin/vue-manage-system" target="_blank"> <a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
<el-dropdown-item>项目仓库</el-dropdown-item> <el-dropdown-item>项目仓库</el-dropdown-item>
</a> </a>

32
src/components/common/Home.vue
View File

@ -17,33 +17,35 @@
</template> </template>
<script> <script>
import vHead from './Header.vue'; import vHead from './Header.vue';
import vSidebar from './Sidebar.vue'; import vSidebar from './Sidebar.vue';
import vTags from './Tags.vue'; import vTags from './Tags.vue';
import bus from './bus'; import bus from './bus';
export default { export default {
data(){ data() {
return { return {
tagsList: [], tagsList: [],
collapse: false collapse: false
} };
}, },
components:{ components: {
vHead, vSidebar, vTags vHead,
vSidebar,
vTags
}, },
created(){ created() {
bus.$on('collapse', msg => { bus.$on('collapse-content', msg => {
this.collapse = msg; this.collapse = msg;
}) });
// 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。 // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
bus.$on('tags', msg => { bus.$on('tags', msg => {
let arr = []; let arr = [];
for(let i = 0, len = msg.length; i < len; i ++){ for (let i = 0, len = msg.length; i < len; i++) {
msg[i].name && arr.push(msg[i].name); msg[i].name && arr.push(msg[i].name);
} }
this.tagsList = arr; this.tagsList = arr;
}) });
}
} }
};
</script> </script>

90
src/components/common/Sidebar.vue
View File

@ -1,29 +1,47 @@
<template> <template>
<div class="sidebar"> <div class="sidebar">
<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157" <el-menu
text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router> class="sidebar-el-menu"
:default-active="onRoutes"
:collapse="collapse"
background-color="#324157"
text-color="#bfcbd9"
active-text-color="#20a0ff"
unique-opened
router
>
<template v-for="item in items"> <template v-for="item in items">
<template v-if="item.subs"> <template v-if="item.subs">
<el-submenu :index="item.index" :key="item.index"> <el-submenu :index="item.index" :key="item.index">
<template slot="title"> <template slot="title">
<i :class="item.icon"></i><span slot="title">{{ item.title }}</span> <i :class="item.icon"></i>
<span slot="title">{{ item.title }}</span>
</template> </template>
<template v-for="subItem in item.subs"> <template v-for="subItem in item.subs">
<el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index"> <el-submenu
v-if="subItem.subs"
:index="subItem.index"
:key="subItem.index"
>
<template slot="title">{{ subItem.title }}</template> <template slot="title">{{ subItem.title }}</template>
<el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index"> <el-menu-item
{{ threeItem.title }} v-for="(threeItem,i) in subItem.subs"
</el-menu-item> :key="i"
:index="threeItem.index"
>{{ threeItem.title }}</el-menu-item>
</el-submenu> </el-submenu>
<el-menu-item v-else :index="subItem.index" :key="subItem.index"> <el-menu-item
{{ subItem.title }} v-else
</el-menu-item> :index="subItem.index"
:key="subItem.index"
>{{ subItem.title }}</el-menu-item>
</template> </template>
</el-submenu> </el-submenu>
</template> </template>
<template v-else> <template v-else>
<el-menu-item :index="item.index" :key="item.index"> <el-menu-item :index="item.index" :key="item.index">
<i :class="item.icon"></i><span slot="title">{{ item.title }}</span> <i :class="item.icon"></i>
<span slot="title">{{ item.title }}</span>
</el-menu-item> </el-menu-item>
</template> </template>
</template> </template>
@ -32,8 +50,8 @@
</template> </template>
<script> <script>
import bus from '../common/bus'; import bus from '../common/bus';
export default { export default {
data() { data() {
return { return {
collapse: false, collapse: false,
@ -73,7 +91,7 @@
{ {
index: 'markdown', index: 'markdown',
title: 'markdown编辑器' title: 'markdown编辑器'
}, }
] ]
}, },
{ {
@ -99,11 +117,11 @@
subs: [ subs: [
{ {
index: 'drag', index: 'drag',
title: '拖拽列表', title: '拖拽列表'
}, },
{ {
index: 'dialog', index: 'dialog',
title: '拖拽弹框', title: '拖拽弹框'
} }
] ]
}, },
@ -126,46 +144,46 @@
title: '404页面' title: '404页面'
} }
] ]
} },
,
{ {
icon: 'el-icon-lx-redpacket_fill', icon: 'el-icon-lx-redpacket_fill',
index: '/donate', index: '/donate',
title: '支持作者' title: '支持作者'
} }
] ]
};
},
computed: {
onRoutes() {
return this.$route.path.replace('/', '');
} }
}, },
computed:{ created() {
onRoutes(){
return this.$route.path.replace('/','');
}
},
created(){
// 通过 Event Bus 进行组件间通信，来折叠侧边栏 // 通过 Event Bus 进行组件间通信，来折叠侧边栏
bus.$on('collapse', msg => { bus.$on('collapse', msg => {
this.collapse = msg; this.collapse = msg;
}) bus.$emit('collapse-content', msg);
} });
} }
};
</script> </script>
<style scoped> <style scoped>
.sidebar{ .sidebar {
display: block; display: block;
position: absolute; position: absolute;
left: 0; left: 0;
top: 70px; top: 70px;
bottom:0; bottom: 0;
overflow-y: scroll; overflow-y: scroll;
} }
.sidebar::-webkit-scrollbar{ .sidebar::-webkit-scrollbar {
width: 0; width: 0;
} }
.sidebar-el-menu:not(.el-menu--collapse){ .sidebar-el-menu:not(.el-menu--collapse) {
width: 250px; width: 250px;
} }
.sidebar > ul { .sidebar > ul {
height:100%; height: 100%;
} }
</style> </style>