1. 背景
由于一般的网页布局,也就是分个侧边导航栏,顶部标题栏,中间内容区域,以及底部版权信心栏。
element为了方便开发人员使用,直接提供了布局容器组件,可以很方便的直接生成上述的布局栏。
2. 全局样式
为了让网页的布局占满屏幕,一般在开始布局之前,设定下全局样式,修改index.html,添加全局样式代码如下。
<style> html,body,#app{ height:100%; margin: 0px; padding: 0px; } </style>
3. 布局代码
通过如下几个标签设置布局即可:
<el-container>:外层容器。当子元素中包含<el-header>或<el-footer>时,内部子元素会垂直排列。针对其他元素,则会水平排列。
<el-header>:顶部栏容器。
<el-aside>:侧边栏容器。
<el-main>:内容区域容器。
<el-footer>:底部栏容器。
我们开发一个页面如下:
<template> <el-container> <el-aside style="width:180px;"> </el-aside> <el-container> <el-header>XX管理系统</el-header> <el-main>内容区域</el-main> <el-footer>版权所有</el-footer> </el-container> </el-container> </template> 为了便于区分各个区域,我们设置样式如下: <style scoped> .el-container { height: 100%; } .el-header, .el-footer { background-color: #b3c0d1; color: #333; text-align: center; line-height: 60px; } .el-aside { background-color: #d3dce6; color: #333; text-align: center; line-height: 200px; } .el-main { background-color: #e9eef3; color: #333; text-align: center; line-height: 160px; } .el-menu { background-color: #d3dce6; } </style>
4. 增加导航菜单
左侧内容区域可以添加导航菜单,由于导航菜单不是本节讲解内容,所以只是给出示例:
<el-aside style="width:180px;"> <el-menu> <el-submenu index="1"> <template slot="title"><i class="el-icon-message"></i>导航一</template> <el-menu-item index="1-1">菜单1</el-menu-item> <el-menu-item index="1-2">菜单2</el-menu-item> <el-menu-item index="1-3">菜单3</el-menu-item> </el-submenu> <el-submenu index="2"> <template slot="title"><i class="el-icon-menu"></i>导航二</template> </el-submenu> <el-submenu index="3"> <template slot="title"><i class="el-icon-setting"></i>导航三</template> </el-submenu> </el-menu> </el-aside>
5. 小结
element封装的布局容器足够简单了,说实话感觉没法更简单了。
如果在使用element时,建议直接采用官方提供的布局容器组件,这样兼容性和稳定性会比较好。