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>
</span>
<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">
<el-dropdown-item>项目仓库</el-dropdown-item>
</a>

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

@ -26,15 +26,17 @@
return {
tagsList: [],
collapse: false
}
};
},
components: {
vHead, vSidebar, vTags
vHead,
vSidebar,
vTags
},
created() {
bus.$on('collapse', msg => {
bus.$on('collapse-content', msg => {
this.collapse = msg;
})
});
// 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
bus.$on('tags', msg => {
@ -43,7 +45,7 @@
msg[i].name && arr.push(msg[i].name);
}
this.tagsList = arr;
})
}
});
}
};
</script>

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

@ -1,29 +1,47 @@
<template>
<div class="sidebar">
<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"
text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
<el-menu
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-if="item.subs">
<el-submenu :index="item.index" :key="item.index">
<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 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>
<el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index">
{{ threeItem.title }}
</el-menu-item>
<el-menu-item
v-for="(threeItem,i) in subItem.subs"
:key="i"
:index="threeItem.index"
>{{ threeItem.title }}</el-menu-item>
</el-submenu>
<el-menu-item v-else :index="subItem.index" :key="subItem.index">
{{ subItem.title }}
</el-menu-item>
<el-menu-item
v-else
:index="subItem.index"
:key="subItem.index"
>{{ subItem.title }}</el-menu-item>
</template>
</el-submenu>
</template>
<template v-else>
<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>
</template>
</template>
@ -73,7 +91,7 @@
{
index: 'markdown',
title: 'markdown编辑器'
},
}
]
},
{
@ -99,11 +117,11 @@
subs: [
{
index: 'drag',
title: '拖拽列表',
title: '拖拽列表'
},
{
index: 'dialog',
title: '拖拽弹框',
title: '拖拽弹框'
}
]
},
@ -126,15 +144,14 @@
title: '404页面'
}
]
}
,
},
{
icon: 'el-icon-lx-redpacket_fill',
index: '/donate',
title: '支持作者'
}
]
}
};
},
computed: {
onRoutes() {
@ -145,9 +162,10 @@
// 通过 Event Bus 进行组件间通信，来折叠侧边栏
bus.$on('collapse', msg => {
this.collapse = msg;
})
}
bus.$emit('collapse-content', msg);
});
}
};
</script>
<style scoped>