Element UI 布局容器 Container 完全指南el-container 系列组件源码解析与实战布局方案【免费下载链接】elementA Vue.js 2.0 UI Toolkit for Web项目地址: https://gitcode.com/gh_mirrors/eleme/element本篇指南围绕 Vue.js 2.0 组件库 Element UI当前仓库eleme/element中的布局容器组件展开系统讲解el-container、el-header、el-aside、el-main、el-footer五个组件的职责划分、flex 布局原理、direction自动判定逻辑以及七种经典页面骨架与一个完整后台管理实例的写法。读完本文你将掌握用这几行组件快速搭建页头、侧边栏、主内容区、底栏任意组合的页面结构并能结合源码理解其内部实现与属性默认值在开发中做到即拿即用、心中有数。组件总览五个容器各司其职Container 系列是 Element UI 中专门用于搭建页面基本结构的容器组件。官方文档见 examples/docs/en-US/container.md将其划分为五类组件语义职责el-container外层容器包裹其余四个组件决定子元素排列方向el-header顶栏容器承载页面头部、工具栏、用户信息等el-aside侧边栏容器承载侧边导航、次要信息栏el-main主要区域容器承载页面主体内容el-footer底栏容器承载版权信息、页脚工具等在仓库中五个组件分别位于独立包内实现非常轻量均只包含一个根元素与一个插槽slotpackages/container/src/main.vue渲染section classel-containerpackages/header/src/main.vue渲染header classel-headerpackages/aside/src/main.vue渲染aside classel-asidepackages/main/src/main.vue渲染main classel-mainpackages/footer/src/main.vue渲染footer classel-footer每个包入口如 packages/container/index.js都会注册install方法通过Vue.component(Component.name, Component)完成全局注册因此五个组件在引入 Element UI 后即可直接使用。布局原理flex 与 is-vertical 的自动判定Container 系列采用 CSS flex 布局实现。从 packages/theme-chalk/src/container.scss 可以看到.el-container的完整样式include b(container) { display: flex; flex-direction: row; flex: 1; flex-basis: auto; box-sizing: border-box; min-width: 0; include when(vertical) { flex-direction: column; } }核心逻辑是.el-container默认为水平方向flex-direction: row一旦加上is-vertical修饰类则切换为垂直方向flex-direction: column。is-vertical由 packages/container/src/main.vue 中的计算属性isVertical决定其判定优先级如下显式传入directionvertical→ 强制垂直显式传入directionhorizontal→ 强制水平未传direction时遍历默认插槽中的 VNode只要存在el-header或el-footer子组件就自动判定为垂直排列否则为水平排列。对应源码片段computed: { isVertical() { if (this.direction vertical) { return true; } else if (this.direction horizontal) { return false; } return this.$slots this.$slots.default ? this.$slots.default.some(vnode { const tag vnode.componentOptions vnode.componentOptions.tag; return tag el-header || tag el-footer; }) : false; } }这正是官方文档所述规则「子元素中有el-header或el-footer时为垂直否则为水平」的源码依据。理解这一点后你就能预判任意嵌套组合的排列方向而不必记忆模板。需要特别留意官方文档中的使用限制el-container的子元素只能是el-header、el-aside、el-main、el-footer这四者反过来后四者的父元素也只能是el-container。此外因为整套方案依赖 flex使用前请确认目标浏览器支持 flex 布局。常见页面布局七种骨架一键套用下面这七种布局是官方文档给出的最常见页面骨架原样继承自 examples/docs/en-US/container.md可以直接复制到项目中按需使用。配套 CSS 为演示样式用于区分各区域背景与文字居中。el-container el-headerHeader/el-header el-mainMain/el-main /el-container el-container el-headerHeader/el-header el-mainMain/el-main el-footerFooter/el-footer /el-container el-container el-aside width200pxAside/el-aside el-mainMain/el-main /el-container el-container el-headerHeader/el-header el-container el-aside width200pxAside/el-aside el-mainMain/el-main /el-container /el-container el-container el-headerHeader/el-header el-container el-aside width200pxAside/el-aside el-container el-mainMain/el-main el-footerFooter/el-footer /el-container /el-container /el-container el-container el-aside width200pxAside/el-aside el-container el-headerHeader/el-header el-mainMain/el-main /el-container /el-container el-container el-aside width200pxAside/el-aside el-container el-headerHeader/el-header el-mainMain/el-main el-footerFooter/el-footer /el-container /el-container style .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; } body .el-container { margin-bottom: 40px; } .el-container:nth-child(5) .el-aside, .el-container:nth-child(6) .el-aside { line-height: 260px; } .el-container:nth-child(7) .el-aside { line-height: 320px; } /style这七种布局覆盖了最常见的组合需求顶栏 内容区最简洁的单列结构顶栏 内容区 底栏完整的上下三段式侧边栏 内容区经典左右两栏顶栏 侧边栏 内容区嵌套容器实现「顶部通栏 下部左右分栏」顶栏 侧边栏 内容区 底栏三段式中仅主区域下方带底栏侧边栏 顶栏 内容区侧栏通高、右侧上下分栏侧边栏 顶栏 内容区 底栏最完整的后台管理骨架。注意第 47 种布局都体现了「容器内嵌套容器」的用法嵌套时内层el-container会自动根据其直接子元素是否含el-header/el-footer决定自己的排列方向无需手动指定。实战实例完整的后台管理页布局官方文档还给出了一个完整的「后台管理系统」示例左侧为多级侧边导航el-menu右上为带下拉菜单的工具区el-dropdown中间主区域为数据表格el-table。该示例综合运用了 Container 系列与 Element UI 其他组件的组合能力可直接改造为实际业务页面。el-container styleheight: 500px; border: 1px solid #eee el-aside width200px stylebackground-color: rgb(238, 241, 246) el-menu :default-openeds[1, 3] el-submenu index1 template slottitlei classel-icon-message/iNavigator One/template el-menu-item-group template slottitleGroup 1/template el-menu-item index1-1Option 1/el-menu-item el-menu-item index1-2Option 2/el-menu-item /el-menu-item-group el-menu-item-group titleGroup 2 el-menu-item index1-3Option 3/el-menu-item /el-menu-item-group el-submenu index1-4 template slottitleOption4/template el-menu-item index1-4-1Option 4-1/el-menu-item /el-submenu /el-submenu el-submenu index2 template slottitlei classel-icon-menu/iNavigator Two/template el-menu-item-group template slottitleGroup 1/template el-menu-item index2-1Option 1/el-menu-item el-menu-item index2-2Option 2/el-menu-item /el-menu-item-group el-menu-item-group titleGroup 2 el-menu-item index2-3Option 3/el-menu-item /el-menu-item-group el-submenu index2-4 template slottitleOption 4/template el-menu-item index2-4-1Option 4-1/el-menu-item /el-submenu /el-submenu el-submenu index3 template slottitlei classel-icon-setting/iNavigator Three/template el-menu-item-group template slottitleGroup 1/template el-menu-item index3-1Option 1/el-menu-item el-menu-item index3-2Option 2/el-menu-item /el-menu-item-group el-menu-item-group titleGroup 2 el-menu-item index3-3Option 3/el-menu-item /el-menu-item-group el-submenu index3-4 template slottitleOption 4/template el-menu-item index3-4-1Option 4-1/el-menu-item /el-submenu /el-submenu /el-menu /el-aside el-container el-header styletext-align: right; font-size: 12px el-dropdown i classel-icon-setting stylemargin-right: 15px/i el-dropdown-menu slotdropdown el-dropdown-itemView/el-dropdown-item el-dropdown-itemAdd/el-dropdown-item el-dropdown-itemDelete/el-dropdown-item /el-dropdown-menu /el-dropdown spanTom/span /el-header el-main el-table :datatableData el-table-column propdate labelDate width140 /el-table-column el-table-column propname labelName width120 /el-table-column el-table-column propaddress labelAddress /el-table-column /el-table /el-main /el-container /el-container style .el-header { background-color: #B3C0D1; color: #333; line-height: 60px; } .el-aside { color: #333; } /style script export default { data() { const item { date: 2016-05-02, name: Tom, address: No. 189, Grove St, Los Angeles }; return { tableData: Array(20).fill(item) } } }; /script该实例的结构要点外层el-container只含el-aside与内层el-container无el-header/el-footer直接子元素因此外层水平排列内层容器直接子元素含el-header因此自动垂直排列。用户信息展示、下拉菜单、数据表格分别放在header与main区域中aside通过width200px控制侧栏宽度。属性 API 详解四个组件各自暴露的属性非常精简官方文档examples/docs/en-US/container.md给出的参数表如下Container Attributes属性说明类型可选值默认值direction子元素的排列方向stringhorizontal / vertical子元素中有el-header或el-footer时为 vertical否则为 horizontaldirection对应源码 packages/container/src/main.vue 中的props.direction其作用是强制覆盖自动判定逻辑传入vertical强制垂直、horizontal强制水平不传则由isVertical计算属性按插槽内容推断。这在需要「包含 header/footer 却仍想水平排列」或反之的特殊场景下非常有用。Header Attributes属性说明类型可选值默认值height顶栏高度string—60px源码中height类型为String默认60px通过内联样式:style{ height }绑定到header元素见 packages/header/src/main.vue。传入任何合法 CSS 长度值如80px、4rem都会被原样应用。Aside Attributes属性说明类型可选值默认值width侧边栏宽度string—300px源码中width类型为String默认300px通过内联样式:style{ width }绑定到aside元素见 packages/aside/src/main.vue。注意文档示例中普遍使用width200px而默认值是300px不传该属性时侧栏会按 300px 渲染。Footer Attributes属性说明类型可选值默认值height底栏高度string—60px与Header的height完全对称默认60px见 packages/footer/src/main.vue。至于el-main官方文档未列出任何属性其源码 packages/main/src/main.vue 也确认它只声明了组件名、没有 props纯粹作为内容承载区使用。源码与测试验证仓库单元测试 test/unit/specs/container.spec.js 对上述行为做了完整覆盖可作为实现事实的印证vertical用例渲染包含el-header的容器后断言根元素包含is-verticalclassdirection用例先传directionhorizontal断言不含is-vertical再动态改为vertical并在$nextTick后断言 class 更新——验证了direction的响应式覆盖能力height/width用例分别给el-header height100px、el-aside width200px、el-footer height100px传参断言最终el.style.height/el.style.width等于传入值——验证了属性通过内联样式生效各组件create用例验证组件可正常创建渲染。从源码结构还可以推断is-vertical依赖$slots.default中 VNode 的componentOptions.tag来识别子组件类型因此判定发生在渲染阶段这也意味着嵌套容器时每一层都独立计算自己的方向外层是否垂直不影响内层判定。使用注意事项与最佳实践方向判定规则要牢记direction显式值 插槽内容推断推断只看直接子元素中是否出现el-header/el-footer。想要不受插槽影响地控制方向务必显式传direction。嵌套层级按需拆分复杂页面建议将「顶部通栏」「侧栏通高」「主区上下分栏」拆成独立的内层el-container代码可读性更好也避免一个容器内堆叠过多子元素导致方向推断出错。宽度高度用 CSS 长度字符串width/height接受任何 CSS 长度值如200px、20%、10rem需响应式侧栏时可在aside外层再套一层控制宽度的容器。配合其他布局组件使用Container 系列负责整体骨架内部单元格的栅格划分可交给el-row/el-col见 packages/row/src/row.js 与 packages/col/src/col.js两者组合即可覆盖从页面骨架到内容栅格的全链路布局需求。浏览器兼容性整体基于 flex旧浏览器如 IE9 及以下不适用现代浏览器均可放心使用。综上Element UI 的 Container 系列以极少的 API 和清晰的 flex 实现提供了搭建任何常见页面骨架所需的全部能力。只要掌握了「外层容器 四种子容器」「direction 自动推断 显式覆盖」「嵌套容器独立判定」三个核心规律就可以自由组合出任意形态的页面结构。【免费下载链接】elementA Vue.js 2.0 UI Toolkit for Web项目地址: https://gitcode.com/gh_mirrors/eleme/element创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考