在使用ElementUI实现后台管理首页布局是比较常见的一个需求,下面潘老师就带大家来实现简单的后台管理布局。我这里使用的是vue-cli
脚手架整合ElementUI来搭建的环境,如果你还不会整合请参考博文:
ElmentUI入门(1)——使用vue-cli集成ElementUI环境搭建步骤
一、初识ElmentUI 1、介绍 Element-UI 是饿了么前端团队推出的一款基于Vue.js 2.0 […]
1)首先我们在components
文件夹中新建一个Home.vue
组件,作为我们的后台管理首页组件,我们参考ElementUI官方文档中的Container
布局容器,来实现该布局,此时Home.vue
代码如下:
<template> <el-container> <!-- 头部高度设为50px(默认60px) --> <el-header height="50px">Header</el-header> <el-container> <!-- 菜单栏宽度设为230px --> <el-aside width="230px">Aside</el-aside> <el-main>Main</el-main> </el-container> </el-container> </template> <script> export default { } </script> <style scoped> /*占满全屏*/ .el-container{ position: absolute; width: 100%; top: 0; left: 0; bottom: 0; } /*上外边距50px,防止挡住Header*/ .el-aside,.el-main{ margin-top: 50px; } /*设置背景色,方便观察效果*/ .el-header{ background-color: #0074D9; } .el-aside{ background-color: #545c64; } .el-main{ background-color: #eee; } </style>
2)接着我们将Home.vue
导入App.vue
并注册使用,App.vue
代码如下:
<template> <div id="app"> <!-- 后期整合vue-router可以替换为router-view,根据路由去展示是首页还是登录、注册页 --> <Home></Home> </div> </template> <script> import Home from "./components/Home.vue" export default { methods: { }, components:{ Home } } </script> <style> /* 去除浏览器默认边距 */ *{ margin:0; padding: 0; } </style>
1)参考官方文档NavMenu 导航菜单中自定义颜色和可折叠菜单的代码,我们稍作修改将Home.vue
中的el-aside
内代码修改如下:
<!-- 菜单栏宽度设为自动 --> <el-aside width="auto"> <el-radio-group v-model="isCollapse"> <el-radio-button :label="false">展开</el-radio-button> <el-radio-button :label="true">收起</el-radio-button> </el-radio-group> <el-menu default-active="2" class="el-menu-vertical" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :collapse="isCollapse"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span>导航一</span> </template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="1-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">选项4</template> <el-menu-item index="1-4-1">选项1</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="2"> <i class="el-icon-menu"></i> <span slot="title">导航二</span> </el-menu-item> <el-menu-item index="3" disabled> <i class="el-icon-document"></i> <span slot="title">导航三</span> </el-menu-item> <el-menu-item index="4"> <i class="el-icon-setting"></i> <span slot="title">导航四</span> </el-menu-item> </el-menu> </el-aside>
2)将菜单的右侧边框宽度去除以及设置展开时菜单宽度,所以添加如下样式:
/* 去除菜单右侧边框 */ .el-menu{ border-right: none; } /* 设置展开时菜单宽度 */ .el-menu-vertical:not(.el-menu--collapse) { width: 230px; }
3)定义isCollapse
属性,脚本如下:
<script> export default { data() { return { isCollapse: false }; } } </script>
头部我这里将其划分为3块,最左侧为logo区域,其右侧有一个可折叠菜单按钮(优化可折叠样式),最右侧可以放在一些头部菜单,我们这里最右侧只放置用户信息即可。
1)设置el-header
的z-index
为最上层,否则会被Main和Aside遮挡,因此在修改.el-header
样式如下:
/*设置背景色,方便观察效果*/ .el-header{ background-color: #0074D9; /* 上层显示,避免被Main和Aside遮挡 */ z-index: 999; }
2)删除Aside
中el-radio-group
展开收起组件,我们将其放到Header
中,el-header
整体代码如下:
<!-- 头部高度设为50px(默认60px) --> <el-header height="50px"> <!-- logo --> <a class="logo" href="/">商城管理系统</a> <!-- 折叠菜单按钮 --> <div class="toggle" @click="isCollapse = !isCollapse"> <i class="el-icon-s-unfold" v-if="isCollapse"></i> <i class="el-icon-s-fold" v-if="!isCollapse"></i> </div> <!-- 下拉菜单 --> <el-dropdown> <span class="el-dropdown-link"> <i class="el-icon-user el-icon--left"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item icon="el-icon-switch-button">注销</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-header>
3)新增对应的样式如下:
/* logo */ .logo{ color: #fff; text-align: center; font-size: 26px; line-height: 50px; padding: 0 15px; font-weight: 400; text-decoration: none; } /* 折叠按钮 */ .toggle{ color: #fff; text-align: center; font-size: 26px; line-height: 50px; display: inline-block; padding: 0 15px; border-left: solid 1px #ccc; position: absolute; left:230px; cursor: pointer; } .toggle:hover{ background-color: #ffd04b; } /* 下拉菜单 */ .el-dropdown{ color: #fff; text-align: center; font-size: 26px; line-height: 50px; float: right; }
el-main
组件中可以结合vue-router
路由嵌套实现页面的跳转与显示,至此我们整个基于ElementUI的简单后台布局就完成了。
PS:以下附上
Home.vue
的完整代码:<template> <el-container> <!-- 头部高度设为50px(默认60px) --> <el-header height="50px"> <!-- logo --> <a class="logo" href="/">商城管理系统</a> <!-- 折叠菜单按钮 --> <div class="toggle" @click="isCollapse = !isCollapse"> <i class="el-icon-s-unfold" v-if="isCollapse"></i> <i class="el-icon-s-fold" v-if="!isCollapse"></i> </div> <!-- 下拉菜单 --> <el-dropdown> <span class="el-dropdown-link"> <i class="el-icon-user el-icon--left"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item icon="el-icon-switch-button">注销</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-header> <el-container> <!-- 菜单栏宽度设为自动 --> <el-aside width="auto"> <el-menu default-active="2" class="el-menu-vertical" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :collapse="isCollapse"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span>导航一</span> </template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="1-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">选项4</template> <el-menu-item index="1-4-1">选项1</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="2"> <i class="el-icon-menu"></i> <span slot="title">导航二</span> </el-menu-item> <el-menu-item index="3" disabled> <i class="el-icon-document"></i> <span slot="title">导航三</span> </el-menu-item> <el-menu-item index="4"> <i class="el-icon-setting"></i> <span slot="title">导航四</span> </el-menu-item> </el-menu> </el-aside> <!-- 可以结合vue-router路由嵌套实现页面的跳转与显示 --> <el-main>Main</el-main> </el-container> </el-container> </template> <script> export default { data() { return { isCollapse: false }; } } </script> <style scoped> /*占满全屏*/ .el-container{ position: absolute; width: 100%; top: 0; left: 0; bottom: 0; } /*上外边距50px,防止挡住Header*/ .el-aside,.el-main{ margin-top: 50px; } /*设置背景色,方便观察效果*/ .el-header{ background-color: #0074D9; /* 上层显示,避免被Main和Aside遮挡 */ z-index: 999; } .el-aside{ background-color: #545c64; } .el-main{ background-color: #eee; } /* 去除菜单右侧边框 */ .el-menu{ border-right: none; } /* 设置展开时菜单宽度 */ .el-menu-vertical:not(.el-menu--collapse) { width: 230px; } /* logo */ .logo{ color: #fff; text-align: center; font-size: 26px; line-height: 50px; padding: 0 15px; font-weight: 400; text-decoration: none; } /* 折叠按钮 */ .toggle{ color: #fff; text-align: center; font-size: 26px; line-height: 50px; display: inline-block; padding: 0 15px; border-left: solid 1px #ccc; position: absolute; left:230px; cursor: pointer; } .toggle:hover{ background-color: #ffd04b; } /* 下拉菜单 */ .el-dropdown{ color: #fff; text-align: center; font-size: 26px; line-height: 50px; float: right; } </style>