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?

總結

以上是生活随笔為你收集整理的002_Container布局容器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。