1. Container布局容器

1.1. Container布局容器是用于布局的容器組件, 方便快速搭建頁面的基本結(jié)構(gòu)。

1.2. <el-container>外層容器。當(dāng)子元素中包含<el-header>或<el-footer>時, 全部子元素會垂直上下排列, 否則會水平左右排列。

1.3. <el-header>頂欄容器。

1.4. <el-aside>側(cè)邊欄容器。

1.5. <el-main>主要區(qū)域容器。

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

1.7. Container布局容器的組件采用了flex布局, 使用前請確定目標(biāo)瀏覽器是否兼容。此外, <el-container>的子元素只能是后四者, 后四者的父元素也只能是<el-container>。

1.8. Container屬性

參數(shù)	說明	類型	可選值	默認(rèn)值
direction	子元素的排列方向	string	horizontal / vertical	子元素中有el-header或el-footer時為vertical, 否則為horizontal

1.9. Header屬性

參數(shù)	說明	類型	默認(rèn)值
height	頂欄高度	string	60px

1.10. Aside屬性

參數(shù)	說明	類型	默認(rèn)值
width	側(cè)邊欄寬度	string	300px

1.11. Footer屬性

參數(shù)	說明	類型	默認(rèn)值
height	底欄高度	string	60px

2. Container布局容器例子

2.1. 使用腳手架新建一個名為element-ui-container的前端項(xiàng)目, 同時安裝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下創(chuàng)建HeaderMainContainer.vue

<template><div><h1>頂欄和主要區(qū)域容器</h1><el-container><el-header>Header</el-header><el-main>Main</el-main></el-container></div> </template>

2.5. 在components下創(chuàng)建HeaderMainFooterContainer.vue

<template><div><h1>頂欄、主要區(qū)域和底欄容器</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下創(chuàng)建AsideMainContainer.vue

<template><div><h1>側(cè)邊欄和主要區(qū)域容器</h1><el-container><el-aside>Aside</el-aside><el-main>Main</el-main></el-container></div> </template>

2.7. 在components下創(chuàng)建HeaderAsideMainContainer.vue

<template><div><h1>頂欄、側(cè)邊欄和主要區(qū)域容器</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下創(chuàng)建HeaderAsideMainFooterContainer.vue

<template><div><h1>頂欄、側(cè)邊欄、主要區(qū)域和底欄容器</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下創(chuàng)建AsideHeaderMainContainer.vue

<template><div><h1>側(cè)邊欄、頂欄和主要區(qū)域容器</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下創(chuàng)建AsideHeaderMainFooterContainer.vue

<template><div><h1>側(cè)邊欄、頂欄、主要區(qū)域和底欄容器</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. 運(yùn)行項(xiàng)目, 訪問http://localhost:8080/#/HeaderMainContainer

2.12. 運(yùn)行項(xiàng)目, 訪問http://localhost:8080/#/HeaderMainFooterContainer?

2.13. 運(yùn)行項(xiàng)目, 訪問http://localhost:8080/#/AsideMainContainer?

2.14. 運(yùn)行項(xiàng)目, 訪問http://localhost:8080/#/HeaderAsideMainContainer?

2.15. 運(yùn)行項(xiàng)目, 訪問http://localhost:8080/#/HeaderAsideMainFooterContainer?

2.16. 運(yùn)行項(xiàng)目, 訪問http://localhost:8080/#/AsideHeaderMainContainer?

2.17. 運(yùn)行項(xiàng)目, 訪問http://localhost:8080/#/AsideHeaderMainFooterContainer?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。