You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
156 lines
4.9 KiB
156 lines
4.9 KiB
<template> |
|
<div> |
|
|
|
<el-menu |
|
class="sidebar-el-menu" |
|
:default-active="onRoutes" |
|
:collapse="collapse" |
|
background-color="#324157" |
|
text-color="#bfcbd9" |
|
active-text-color="#cb221c" |
|
unique-opened |
|
mode="horizontal" |
|
router |
|
> |
|
<template v-for="item in menus"> |
|
<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> |
|
</template> |
|
<template v-for="subItem in item.subs"> |
|
<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-submenu> |
|
<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> |
|
</el-menu-item> |
|
</template> |
|
</template> |
|
</el-menu> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import { mapState } from 'vuex' |
|
import bus from '@/libs/bus'; |
|
import Setting from '@/setting'; |
|
export default { |
|
data() { |
|
return { |
|
collapse: false, |
|
defaultMenus: [ |
|
{ |
|
icon: 'el-icon-folder-checked', |
|
index: '/index/list', |
|
title: '我的首页' |
|
}, |
|
{ |
|
icon: 'el-icon-notebook-1', |
|
index: '/quesBank/list', |
|
title: '题库管理' |
|
}, |
|
{ |
|
icon: 'el-icon-receiving', |
|
index: '/testPaper/list', |
|
title: '试卷管理' |
|
}, |
|
{ |
|
icon: 'el-icon-s-order', |
|
index: '/practice/list', |
|
title: '练习管理' |
|
}, |
|
{ |
|
icon: 'el-icon-data-analysis', |
|
index: '/assessment/list', |
|
title: '考核管理' |
|
}, |
|
{ |
|
icon: 'el-icon-suitcase-1', |
|
index: '/achievement/list', |
|
title: '成绩管理' |
|
}, |
|
{ |
|
icon: 'el-icon-chat-dot-round', |
|
index: '/messageBoard/list', |
|
title: '交流互动' |
|
}, |
|
{ |
|
icon: 'el-icon-user', |
|
index: '/student/list', |
|
title: '学生管理' |
|
}, |
|
{ |
|
icon: 'el-icon-setting', |
|
index: '/system/list', |
|
title: '系统设置' |
|
} |
|
], |
|
menus: [] |
|
}; |
|
}, |
|
computed: { |
|
onRoutes() { |
|
return this.$route.path |
|
}, |
|
...mapState('auth', [ |
|
'routes' |
|
]) |
|
}, |
|
created() { |
|
this.initMenu() |
|
// 通过 Event Bus 进行组件间通信，来折叠侧边栏 |
|
bus.$on('collapse', msg => { |
|
this.collapse = msg; |
|
bus.$emit('collapse-content', msg) |
|
}) |
|
}, |
|
methods: { |
|
initMenu(){ |
|
if(Setting.dynamicRoute){ |
|
let routes = this.routes |
|
let menus = [] |
|
this.defaultMenus.map(e => { |
|
routes.find(n => n.path == e.index) && menus.push(e) |
|
}) |
|
this.menus = menus |
|
this.active = menus[0].index |
|
}else{ |
|
this.menus = this.defaultMenus |
|
} |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.sidebar::-webkit-scrollbar { |
|
width: 0; |
|
} |
|
.sidebar-el-menu:not(.el-menu--collapse) { |
|
width: 100%; |
|
} |
|
.sidebar > ul { |
|
height: 100%; |
|
} |
|
</style>
|
|
|