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