|
|
@ -3,13 +3,13 @@ |
|
|
|
<el-menu |
|
|
|
<el-menu |
|
|
|
class="sidebar-el-menu" |
|
|
|
class="sidebar-el-menu" |
|
|
|
:default-active="onRoutes" |
|
|
|
:default-active="onRoutes" |
|
|
|
:collapse="collapse" |
|
|
|
|
|
|
|
background-color="#324157" |
|
|
|
background-color="#324157" |
|
|
|
text-color="#bfcbd9" |
|
|
|
text-color="#bfcbd9" |
|
|
|
active-text-color="#9278FF" |
|
|
|
active-text-color="#9278FF" |
|
|
|
unique-opened |
|
|
|
unique-opened |
|
|
|
mode="horizontal" |
|
|
|
mode="horizontal" |
|
|
|
router |
|
|
|
router |
|
|
|
|
|
|
|
@select="handleSelect" |
|
|
|
> |
|
|
|
> |
|
|
|
<template v-for="item in items"> |
|
|
|
<template v-for="item in items"> |
|
|
|
<template v-if="item.subs"> |
|
|
|
<template v-if="item.subs"> |
|
|
@ -51,11 +51,9 @@ |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
<script> |
|
|
|
import bus from '../common/bus'; |
|
|
|
|
|
|
|
export default { |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
return { |
|
|
|
collapse: false, |
|
|
|
|
|
|
|
items: [ |
|
|
|
items: [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
icon: 'el-icon-lx-home', |
|
|
|
icon: 'el-icon-lx-home', |
|
|
@ -90,17 +88,26 @@ export default { |
|
|
|
] |
|
|
|
] |
|
|
|
}; |
|
|
|
}; |
|
|
|
}, |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
watch:{ |
|
|
|
onRoutes() { |
|
|
|
"$route.path":function(val){ |
|
|
|
return this.$route.path.replace('/', ''); |
|
|
|
this.items.map(e=>{ |
|
|
|
|
|
|
|
if(val.replace('/', '')===e.index){ |
|
|
|
|
|
|
|
this.handleSelect(val.replace('/', '')) |
|
|
|
|
|
|
|
this.$forceUpdate(); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
methods:{ |
|
|
|
|
|
|
|
handleSelect(index){ |
|
|
|
|
|
|
|
this.onRoutes = index |
|
|
|
|
|
|
|
sessionStorage.setItem('sideBar',index) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
created() { |
|
|
|
created() { |
|
|
|
// 通过 Event Bus 进行组件间通信,来折叠侧边栏 |
|
|
|
if(sessionStorage.getItem('sideBar')){ |
|
|
|
bus.$on('collapse', msg => { |
|
|
|
this.handleSelect(sessionStorage.getItem('sideBar')) |
|
|
|
this.collapse = msg; |
|
|
|
} |
|
|
|
bus.$emit('collapse-content', msg); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
</script> |
|
|
|
</script> |
|
|
|