首页手记 element el-container 布局容器组件详解

element el-container 布局容器组件详解

标签：

Vue.js

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>