9.后台管理系统主页面布局以及左侧导航栏设计
1.首页布局
步骤:
在views
目录下新建Main.vue
文件,作为登录之后的布局
参考:element-ui
使用此模块的目的是,当中间内容部分有超出时,可以固定左侧以及头部不动,中间内容进行滚动
- 代码
<template>
<el-container style="height: 100%;">
<el-aside width="200px" style="background-color:blue">
左侧导航栏
</el-aside>
<el-container>
<el-header style="background:red;">
中间头部
</el-header>
<el-main style="background:yellow;">
内容区域
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped></style>
- 效果
2.导航栏的制作
- 在
components
目录下新建common
目录,在该目录下新建CommonAside.vue
组件
内容为:
<template>
<el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
<!-- 没有儿子的导航栏 -->
<el-menu-item :index="item.path" v-for="item in noChildren" :key="item.path">
<i :class="'el-icon-' + item.icon"></i>
<span slot="title">{{ item.label }}</span>
</el-menu-item>
<!-- 有儿子的导航栏 -->
<el-submenu index="index" v-for="(item, index) in hasChildren" :key="index">
<template slot="title">
<i :class="'el-icon-' + item.icon"></i>
<span>{{ item.label }}</span>
</template>
<el-menu-item-group>
<el-menu-item :index="subItem.path" v-for="(subItem, subIndex) in item.children" :key="subIndex">
<i :class="'el-icon-' + subItem.icon"></i>
<span slot="title">{{ subItem.label }}</span>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</template>
<script>
export default {
data() {
return {
asideMenu: [
{
path: '/',
name: 'home',
label: '首页',
icon: 'info'
},
{
path: '/video',
name: 'video',
label: '视频管理页',
icon: 'video-play'
},
{
path: '/user',
name: 'user',
label: '用户管理页',
icon: 'user'
},
{
path: '/other',
name: 'other',
label: '其他',
icon: 'phone',
children: [
{
path: '/page1',
name: 'page1',
label: '其他1',
icon: 'phone'
},
{
path: '/page2',
name: 'page2',
label: '其他2',
icon: 'phone'
}
]
}
]
}
},
computed: {
// 判断导航栏是否有子节点
noChildren() {
return this.asideMenu.filter(item => !item.children)
},
hasChildren() {
return this.asideMenu.filter(item => item.children)
}
}
}
</script>
<style lang="scss" scoped>
.el-menu {
height: 100%;
border: none;
}
</style>
在views目录下的Main.vue 中导入组件
代码如下
<template>
<el-container style="height: 100%;">
<el-aside width="200px">
<!-- <div>logo</div> -->
<common-aside></common-aside>
</el-aside>
<el-container>
<el-header style="background:#6699ff;">
中间头部
</el-header>
<el-main style="background:#fff;">
内容区域
</el-main>
</el-container>
</el-container>
</template>
<script>
// 导入导航栏组件
import CommonAside from '@/components/common/CommonAside.vue'
export default {
// 组件注册
components: {
CommonAside
}
}
</script>
<style lang="scss" scoped></style>