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

Merge pull request #208 from lin-xin/dev 

EventBus折叠改为链式调用
pull/217/head
林鑫 2019-09-05 11:16:24 +08:00 committed by GitHub
parent 5b294b781b 60eeaaf3eb
commit 838a03086e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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>

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

@ -26,15 +26,17 @@
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 => {
@ -43,7 +45,7 @@
msg[i].name && arr.push(msg[i].name); msg[i].name && arr.push(msg[i].name);
} }
this.tagsList = arr; this.tagsList = arr;
}) });
}
} }
};
</script> </script>

56
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>
@ -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,15 +144,14 @@
title: '404页面' title: '404页面'
} }
] ]
} },
,
{ {
icon: 'el-icon-lx-redpacket_fill', icon: 'el-icon-lx-redpacket_fill',
index: '/donate', index: '/donate',
title: '支持作者' title: '支持作者'
} }
] ]
} };
}, },
computed: { computed: {
onRoutes() { onRoutes() {
@ -145,9 +162,10 @@
// 通过 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>