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

2021-11-17 3215

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

容器镜像服务 ACR，镜像仓库100个不限时长

简介： 本文目录1. 背景2. 全局样式3. 布局代码4. 增加导航菜单5. 小结

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>