002_Container布局容器

1. Container布局容器

1.1. Container布局容器是用于布局的容器组件, 方便快速搭建页面的基本结构。

1.2. <el-container>外层容器。当子元素中包含<el-header>或<el-footer>时, 全部子元素会垂直上下排列, 否则会水平左右排列。

1.3. <el-header>顶栏容器。

1.4. <el-aside>侧边栏容器。

1.5. <el-main>主要区域容器。

1.6. <el-footer>底栏容器。

1.7. Container布局容器的组件采用了flex布局, 使用前请确定目标浏览器是否兼容。此外, <el-container>的子元素只能是后四者, 后四者的父元素也只能是<el-container>。

1.8. Container属性

参数	说明	类型	可选值	默认值
direction	子元素的排列方向	string	horizontal / vertical	子元素中有el-header或el-footer时为vertical, 否则为horizontal

1.9. Header属性

参数	说明	类型	默认值
height	顶栏高度	string	60px

1.10. Aside属性

参数	说明	类型	默认值
width	侧边栏宽度	string	300px

1.11. Footer属性

参数	说明	类型	默认值
height	底栏高度	string	60px

2. Container布局容器例子

2.1. 使用脚手架新建一个名为element-ui-container的前端项目, 同时安装Element插件。

2.2. 编写App.vue 

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  width: 80%;
  margin: 0 auto;
}
.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;
}
</style>

2.3. 编写index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HeaderMainContainer from '../components/HeaderMainContainer.vue'
import HeaderMainFooterContainer from '../components/HeaderMainFooterContainer.vue'
import AsideMainContainer from '../components/AsideMainContainer.vue'
import HeaderAsideMainContainer from '../components/HeaderAsideMainContainer.vue'
import HeaderAsideMainFooterContainer from '../components/HeaderAsideMainFooterContainer.vue'
import AsideHeaderMainContainer from '../components/AsideHeaderMainContainer.vue'
import AsideHeaderMainFooterContainer from '../components/AsideHeaderMainFooterContainer.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/HeaderMainContainer' },
  { path: '/HeaderMainContainer', component: HeaderMainContainer },
  { path: '/HeaderMainFooterContainer', component: HeaderMainFooterContainer },
  { path: '/AsideMainContainer', component: AsideMainContainer },
  { path: '/HeaderAsideMainContainer', component: HeaderAsideMainContainer },
  { path: '/HeaderAsideMainFooterContainer', component: HeaderAsideMainFooterContainer },
  { path: '/AsideHeaderMainContainer', component: AsideHeaderMainContainer },
  { path: '/AsideHeaderMainFooterContainer', component: AsideHeaderMainFooterContainer }
]

const router = new VueRouter({
  routes
})

export default router

2.4. 在components下创建HeaderMainContainer.vue

<template>
  <div>
    <h1>顶栏和主要区域容器</h1>
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
    </el-container>
  </div>
</template>

2.5. 在components下创建HeaderMainFooterContainer.vue

<template>
  <div>
    <h1>顶栏、主要区域和底栏容器</h1>
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

2.6. 在components下创建AsideMainContainer.vue

<template>
  <div>
    <h1>侧边栏和主要区域容器</h1>
    <el-container>
      <el-aside>Aside</el-aside>
      <el-main>Main</el-main>
    </el-container>
  </div>
</template>

2.7. 在components下创建HeaderAsideMainContainer.vue

<template>
  <div>
    <h1>顶栏、侧边栏和主要区域容器</h1>
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

2.8. 在components下创建HeaderAsideMainFooterContainer.vue

<template>
  <div>
    <h1>顶栏、侧边栏、主要区域和底栏容器</h1>
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside>Aside</el-aside>
        <el-container>
          <el-main>Main</el-main>
          <el-footer height="200px">Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

2.9. 在components下创建AsideHeaderMainContainer.vue

<template>
  <div>
    <h1>侧边栏、顶栏和主要区域容器</h1>
    <el-container>
      <el-aside>Aside</el-aside>
      <el-container>
        <el-header height="200px">Header</el-header>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

2.10. 在components下创建AsideHeaderMainFooterContainer.vue

<template>
  <div>
    <h1>侧边栏、顶栏、主要区域和底栏容器</h1>
    <el-container>
      <el-aside>Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

2.11. 运行项目, 访问http://localhost:8080/#/HeaderMainContainer

2.12. 运行项目, 访问http://localhost:8080/#/HeaderMainFooterContainer 

2.13. 运行项目, 访问http://localhost:8080/#/AsideMainContainer 

2.14. 运行项目, 访问http://localhost:8080/#/HeaderAsideMainContainer 

2.15. 运行项目, 访问http://localhost:8080/#/HeaderAsideMainFooterContainer 

2.16. 运行项目, 访问http://localhost:8080/#/AsideHeaderMainContainer 

2.17. 运行项目, 访问http://localhost:8080/#/AsideHeaderMainFooterContainer