Element 布局容器组件Container完全指南从五件套到弹性布局原理【免费下载链接】elementA Vue.js 2.0 UI Toolkit for Web项目地址: https://gitcode.com/gh_mirrors/eleme/elementElementA Vue.js 2.0 UI Toolkit for Web提供了一组用于页面结构布局的容器组件el-container、el-header、el-aside、el-main与el-footer它们基于 CSS Flexbox 实现可在不写任何布局 CSS 的情况下快速搭建顶部栏、侧边栏、主内容区与底栏组合的标准后台页面骨架。本文以 examples/docs/fr-FR/container.md对应的中文版为 examples/docs/zh-CN/container.md为核心骨架结合 packages/container、packages/header、packages/aside、packages/main、packages/footer 的源码实现与 test/unit/specs/container.spec.js 单元测试帮助你彻底掌握每个组件的职责、属性、默认值与底层 Flexbox 工作方式读完即可组合出任意常见的后台管理页面布局。一、五个容器组件与各自职责Element 的布局容器由五个组件构成各司其职组件渲染标签职责el-containersection classel-container外层容器负责编排子元素的排列方向垂直或水平el-headerheader classel-header顶栏容器一般放 Logo、面包屑、用户信息、操作按钮el-asideaside classel-aside侧边栏容器一般放导航菜单el-mainmain classel-main主要区域容器承载页面核心内容el-footerfooter classel-footer底栏容器一般放版权信息、备案号等从源码看五个组件都只是极简的壳没有引入任何业务逻辑packages/container/src/main.vue 仅渲染section classel-container并透传默认插槽核心逻辑在于根据子组件自动推断is-verticalpackages/header/src/main.vue 渲染header通过heightprop 内联设置高度packages/aside/src/main.vue 渲染aside通过widthprop 内联设置宽度packages/main/src/main.vue 渲染main没有任何 props是一个纯插槽容器packages/footer/src/main.vue 渲染footer通过heightprop 内联设置高度。关于排列方向Element 的规则是当el-container的子元素中包含el-header或el-footer时所有子元素垂直上下排列否则水平左右排列。这一规则在 packages/container/src/main.vue 的isVertical计算属性中实现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; } }可以看到判断顺序是显式传入的direction优先未指定direction时遍历默认插槽中的 VNode只要存在el-header或el-footer就判定为垂直排列。对应的单元测试 test/unit/specs/container.spec.js 验证了容器内含el-header时会自动加上is-vertical类这一行为。flexbox 兼容性提示以上组件全部采用 flex 布局使用前请确认目标浏览器是否兼容 Flexbox对 IE 等老旧浏览器尤其需要评估。另外el-container的直接子元素只能是后四个组件后四个组件的父元素也只能是el-container请勿在其中混入其他元素破坏布局语义。二、常见页面布局七种标准骨架一次看懂原文档给出了 7 种最常用的页面布局组合几乎覆盖了后台系统 90% 的骨架需求。下面逐一展示为便于观察区域划分demo 使用背景色区分各区块样式仅用于演示实际项目中可自行覆盖1. 顶栏 主内容el-container el-headerHeader/el-header el-mainMain/el-main /el-container2. 顶栏 主内容 底栏el-container el-headerHeader/el-header el-mainMain/el-main el-footerFooter/el-footer /el-container3. 侧边栏 主内容el-container el-aside width200pxAside/el-aside el-mainMain/el-main /el-container4. 顶栏 侧边栏 主内容el-container el-headerHeader/el-header el-container el-aside width200pxAside/el-aside el-mainMain/el-main /el-container /el-container5. 顶栏 侧边栏 主内容 底栏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-container6. 侧边栏 顶栏 主内容el-container el-aside width200pxAside/el-aside el-container el-headerHeader/el-header el-mainMain/el-main /el-container /el-container7. 侧边栏 顶栏 主内容 底栏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以上 demo 在演示时可配合如下样式让各区域边界清晰可见与 examples/docs/zh-CN/container.md 中的示例样式一致.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实现如布局 4、5、6、7每层嵌套都会独立判断自身的排列方向因此内层容器是否需要纵向取决于其内部是否直接包含el-header/el-footer。三、综合实例搭建一个带侧边导航的后台页面原文档提供了一个完整的后台页面示例将el-container与el-menu导航菜单、el-dropdown用户下拉菜单、el-table数据表格组合在一起是布局组件在真实业务中最典型的用法。核心结构如下完整代码见 examples/docs/zh-CN/container.md 的实例一节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/i导航一/template el-menu-item-group template slottitle分组一/template el-menu-item index1-1选项1/el-menu-item el-menu-item index1-2选项2/el-menu-item /el-menu-item-group el-submenu index1-4 template slottitle选项4/template el-menu-item index1-4-1选项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-item查看/el-dropdown-item el-dropdown-item新增/el-dropdown-item el-dropdown-item删除/el-dropdown-item /el-dropdown-menu /el-dropdown span王小虎/span /el-header el-main el-table :datatableData el-table-column propdate label日期 width140/el-table-column el-table-column propname label姓名 width120/el-table-column el-table-column propaddress label地址/el-table-column /el-table /el-main /el-container /el-container示例中的tableData用 20 条相同记录填充以模拟列表数据export default { data() { const item { date: 2016-05-02, name: 王小虎, address: 上海市普陀区金沙江路 1518 弄 }; return { tableData: Array(20).fill(item) }; } };这个实例的要点在于外层容器横向排列左侧el-aside 右侧内层el-container内层容器因直接包含el-header而自动纵向排列顶部el-header 内容el-main通过给外层容器设置height与边框即可得到固定高度的页面卡壳效果是后台管理系统中主框架的通用写法。四、组件属性详解Attributes4.1 Container 属性参数说明类型可选值默认值direction子元素的排列方向stringhorizontal / vertical子元素中有el-header或el-footer时为 vertical否则为 horizontal源码级说明direction是el-container唯一的 proppackages/container/src/main.vue。从前面贴出的isVertical实现可以看到显式传入direction会覆盖自动推断逻辑而vertical/horizontal最终通过.is-vertical类作用到样式上——packages/theme-chalk/src/container.scss 中默认flex-direction: row横向命中.is-vertical时切换为flex-direction: column纵向。单元测试 test/unit/specs/container.spec.js 验证了direction从horizontal切换为vertical时is-vertical类会随之变化。4.2 Header 属性参数说明类型可选值默认值height顶栏高度string—60px源码级说明height以字符串形式内联绑定到header的style.heightpackages/header/src/main.vue因此既可以传60px这类带单位的字符串也可以传10vh、5rem等任意合法 CSS 长度值。样式层面packages/theme-chalk/src/header.scss 为顶栏设置了padding: 0 20px对应变量$--header-padding见 packages/theme-chalk/src/common/var.scss以及flex-shrink: 0保证顶栏在容器空间不足时不会被压缩。测试 test/unit/specs/container.spec.js 验证传入height100px后el.style.height为100px。4.3 Aside 属性参数说明类型可选值默认值width侧边栏宽度string—300px源码级说明width内联绑定到aside的style.widthpackages/aside/src/main.vue同样支持任意 CSS 长度字符串如200px、20%、16rem等。注意默认值为300px——文档示例中常用 200px若未显式指定宽度请记得默认值。样式层面 packages/theme-chalk/src/aside.scss 为侧边栏设置了overflow: auto与flex-shrink: 0当侧边栏内容超出时会滚动且宽度不会被挤压。测试 test/unit/specs/container.spec.js 验证传入width200px后el.style.width为200px。4.4 Main 属性el-main没有任何 propspackages/main/src/main.vue它只是渲染main并透传插槽。样式层面 packages/theme-chalk/src/main.scss 为其设置了display: block、flex: 1、flex-basis: auto、overflow: auto与padding: 20px变量$--main-padding见 packages/theme-chalk/src/common/var.scss。这意味着主内容区会自动占据剩余空间并且内容溢出时可滚动——这正是后台页面内容区最需要的行为。源码注释特别提到 IE11 对main元素支持不完整这也是其设置display: block的原因之一。4.5 Footer 属性参数说明类型可选值默认值height底栏高度string—60px源码级说明与 Header 完全对称height内联绑定style.heightpackages/footer/src/main.vue样式 packages/theme-chalk/src/footer.scss 设置padding: 0 20px$--footer-padding与flex-shrink: 0。测试 test/unit/specs/container.spec.js 验证传入height100px后el.style.height为100px。五、底层原理Flexbox 如何撑起这套布局整个 Container 体系本质上是一层组件化封装的 Flexbox容器编排packages/theme-chalk/src/container.scss 中.el-container的核心是display: flex; flex-direction: row命中.is-vertical时切换为column同时设置了flex: 1; min-width: 0使嵌套容器也能正确参与外层 flex 分配固定区域防压缩el-header、el-aside、el-footer均设置flex-shrink: 0保证顶栏/底栏/侧边栏的高度或宽度不会被其他内容挤压主区域弹性伸展el-main设置flex: 1自动吸收所有剩余空间内容溢出时通过overflow: auto滚动方向自动推断框架层通过扫描默认插槽 VNode 的componentOptions.tag是否为el-header/el-footer来决定容器方向开发者无需手动声明大部分场景下的排列方向。也就是说只要按照el-container内只放后四者、需要分栏就嵌套el-container的约束组织结构浏览器会自行完成所有空间分配页面高度由内容或显式 height 驱动宽度则由侧边栏宽度与主区域弹性伸缩共同决定。六、单元测试行为即契约test/unit/specs/container.spec.js 完整覆盖了五个组件的行为契约可作为使用时的行为说明书Container默认可正常创建包含el-header时自动添加is-vertical类direction显式切换时类名同步变化Headerheight100px会原样写入元素内联样式Asidewidth200px会原样写入元素内联样式Main可正常创建无 props 可测Footerheight100px会原样写入元素内联样式。这些断言同时印证了属性均为字符串类型、以内联样式方式生效、方向自动推断依赖is-vertical类——与本文前述源码分析完全一致。结语Element 的布局容器组件用极小的 API 表面五个组件、四个属性封装了后台系统最常用的页面骨架能力。掌握三条核心规则即可灵活运用其一el-container的子元素只能是el-header/el-aside/el-main/el-footer其二是否纵向排列取决于子元素中是否含顶栏或底栏或显式direction其三复杂布局靠嵌套el-container组合。需要自定义尺寸时记住el-header/el-footer默认60px、el-aside默认300px这几个默认值即可。进一步深入可阅读 packages/theme-chalk/src/container.scss 等五个样式文件了解 Flexbox 细节或运行 test/unit/specs/container.spec.js 中的测试用例验证各行为契约。【免费下载链接】elementA Vue.js 2.0 UI Toolkit for Web项目地址: https://gitcode.com/gh_mirrors/eleme/element创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Element 布局容器组件（Container）完全指南：从五件套到弹性布局原理
Element 布局容器组件Container完全指南从五件套到弹性布局原理【免费下载链接】elementA Vue.js 2.0 UI Toolkit for Web项目地址: https://gitcode.com/gh_mirrors/eleme/elementElementA Vue.js 2.0 UI Toolkit for Web提供了一组用于页面结构布局的容器组件el-container、el-header、el-aside、el-main与el-footer它们基于 CSS Flexbox 实现可在不写任何布局 CSS 的情况下快速搭建顶部栏、侧边栏、主内容区与底栏组合的标准后台页面骨架。本文以 examples/docs/fr-FR/container.md对应的中文版为 examples/docs/zh-CN/container.md为核心骨架结合 packages/container、packages/header、packages/aside、packages/main、packages/footer 的源码实现与 test/unit/specs/container.spec.js 单元测试帮助你彻底掌握每个组件的职责、属性、默认值与底层 Flexbox 工作方式读完即可组合出任意常见的后台管理页面布局。一、五个容器组件与各自职责Element 的布局容器由五个组件构成各司其职组件渲染标签职责el-containersection classel-container外层容器负责编排子元素的排列方向垂直或水平el-headerheader classel-header顶栏容器一般放 Logo、面包屑、用户信息、操作按钮el-asideaside classel-aside侧边栏容器一般放导航菜单el-mainmain classel-main主要区域容器承载页面核心内容el-footerfooter classel-footer底栏容器一般放版权信息、备案号等从源码看五个组件都只是极简的壳没有引入任何业务逻辑packages/container/src/main.vue 仅渲染section classel-container并透传默认插槽核心逻辑在于根据子组件自动推断is-verticalpackages/header/src/main.vue 渲染header通过heightprop 内联设置高度packages/aside/src/main.vue 渲染aside通过widthprop 内联设置宽度packages/main/src/main.vue 渲染main没有任何 props是一个纯插槽容器packages/footer/src/main.vue 渲染footer通过heightprop 内联设置高度。关于排列方向Element 的规则是当el-container的子元素中包含el-header或el-footer时所有子元素垂直上下排列否则水平左右排列。这一规则在 packages/container/src/main.vue 的isVertical计算属性中实现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; } }可以看到判断顺序是显式传入的direction优先未指定direction时遍历默认插槽中的 VNode只要存在el-header或el-footer就判定为垂直排列。对应的单元测试 test/unit/specs/container.spec.js 验证了容器内含el-header时会自动加上is-vertical类这一行为。flexbox 兼容性提示以上组件全部采用 flex 布局使用前请确认目标浏览器是否兼容 Flexbox对 IE 等老旧浏览器尤其需要评估。另外el-container的直接子元素只能是后四个组件后四个组件的父元素也只能是el-container请勿在其中混入其他元素破坏布局语义。二、常见页面布局七种标准骨架一次看懂原文档给出了 7 种最常用的页面布局组合几乎覆盖了后台系统 90% 的骨架需求。下面逐一展示为便于观察区域划分demo 使用背景色区分各区块样式仅用于演示实际项目中可自行覆盖1. 顶栏 主内容el-container el-headerHeader/el-header el-mainMain/el-main /el-container2. 顶栏 主内容 底栏el-container el-headerHeader/el-header el-mainMain/el-main el-footerFooter/el-footer /el-container3. 侧边栏 主内容el-container el-aside width200pxAside/el-aside el-mainMain/el-main /el-container4. 顶栏 侧边栏 主内容el-container el-headerHeader/el-header el-container el-aside width200pxAside/el-aside el-mainMain/el-main /el-container /el-container5. 顶栏 侧边栏 主内容 底栏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-container6. 侧边栏 顶栏 主内容el-container el-aside width200pxAside/el-aside el-container el-headerHeader/el-header el-mainMain/el-main /el-container /el-container7. 侧边栏 顶栏 主内容 底栏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以上 demo 在演示时可配合如下样式让各区域边界清晰可见与 examples/docs/zh-CN/container.md 中的示例样式一致.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实现如布局 4、5、6、7每层嵌套都会独立判断自身的排列方向因此内层容器是否需要纵向取决于其内部是否直接包含el-header/el-footer。三、综合实例搭建一个带侧边导航的后台页面原文档提供了一个完整的后台页面示例将el-container与el-menu导航菜单、el-dropdown用户下拉菜单、el-table数据表格组合在一起是布局组件在真实业务中最典型的用法。核心结构如下完整代码见 examples/docs/zh-CN/container.md 的实例一节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/i导航一/template el-menu-item-group template slottitle分组一/template el-menu-item index1-1选项1/el-menu-item el-menu-item index1-2选项2/el-menu-item /el-menu-item-group el-submenu index1-4 template slottitle选项4/template el-menu-item index1-4-1选项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-item查看/el-dropdown-item el-dropdown-item新增/el-dropdown-item el-dropdown-item删除/el-dropdown-item /el-dropdown-menu /el-dropdown span王小虎/span /el-header el-main el-table :datatableData el-table-column propdate label日期 width140/el-table-column el-table-column propname label姓名 width120/el-table-column el-table-column propaddress label地址/el-table-column /el-table /el-main /el-container /el-container示例中的tableData用 20 条相同记录填充以模拟列表数据export default { data() { const item { date: 2016-05-02, name: 王小虎, address: 上海市普陀区金沙江路 1518 弄 }; return { tableData: Array(20).fill(item) }; } };这个实例的要点在于外层容器横向排列左侧el-aside 右侧内层el-container内层容器因直接包含el-header而自动纵向排列顶部el-header 内容el-main通过给外层容器设置height与边框即可得到固定高度的页面卡壳效果是后台管理系统中主框架的通用写法。四、组件属性详解Attributes4.1 Container 属性参数说明类型可选值默认值direction子元素的排列方向stringhorizontal / vertical子元素中有el-header或el-footer时为 vertical否则为 horizontal源码级说明direction是el-container唯一的 proppackages/container/src/main.vue。从前面贴出的isVertical实现可以看到显式传入direction会覆盖自动推断逻辑而vertical/horizontal最终通过.is-vertical类作用到样式上——packages/theme-chalk/src/container.scss 中默认flex-direction: row横向命中.is-vertical时切换为flex-direction: column纵向。单元测试 test/unit/specs/container.spec.js 验证了direction从horizontal切换为vertical时is-vertical类会随之变化。4.2 Header 属性参数说明类型可选值默认值height顶栏高度string—60px源码级说明height以字符串形式内联绑定到header的style.heightpackages/header/src/main.vue因此既可以传60px这类带单位的字符串也可以传10vh、5rem等任意合法 CSS 长度值。样式层面packages/theme-chalk/src/header.scss 为顶栏设置了padding: 0 20px对应变量$--header-padding见 packages/theme-chalk/src/common/var.scss以及flex-shrink: 0保证顶栏在容器空间不足时不会被压缩。测试 test/unit/specs/container.spec.js 验证传入height100px后el.style.height为100px。4.3 Aside 属性参数说明类型可选值默认值width侧边栏宽度string—300px源码级说明width内联绑定到aside的style.widthpackages/aside/src/main.vue同样支持任意 CSS 长度字符串如200px、20%、16rem等。注意默认值为300px——文档示例中常用 200px若未显式指定宽度请记得默认值。样式层面 packages/theme-chalk/src/aside.scss 为侧边栏设置了overflow: auto与flex-shrink: 0当侧边栏内容超出时会滚动且宽度不会被挤压。测试 test/unit/specs/container.spec.js 验证传入width200px后el.style.width为200px。4.4 Main 属性el-main没有任何 propspackages/main/src/main.vue它只是渲染main并透传插槽。样式层面 packages/theme-chalk/src/main.scss 为其设置了display: block、flex: 1、flex-basis: auto、overflow: auto与padding: 20px变量$--main-padding见 packages/theme-chalk/src/common/var.scss。这意味着主内容区会自动占据剩余空间并且内容溢出时可滚动——这正是后台页面内容区最需要的行为。源码注释特别提到 IE11 对main元素支持不完整这也是其设置display: block的原因之一。4.5 Footer 属性参数说明类型可选值默认值height底栏高度string—60px源码级说明与 Header 完全对称height内联绑定style.heightpackages/footer/src/main.vue样式 packages/theme-chalk/src/footer.scss 设置padding: 0 20px$--footer-padding与flex-shrink: 0。测试 test/unit/specs/container.spec.js 验证传入height100px后el.style.height为100px。五、底层原理Flexbox 如何撑起这套布局整个 Container 体系本质上是一层组件化封装的 Flexbox容器编排packages/theme-chalk/src/container.scss 中.el-container的核心是display: flex; flex-direction: row命中.is-vertical时切换为column同时设置了flex: 1; min-width: 0使嵌套容器也能正确参与外层 flex 分配固定区域防压缩el-header、el-aside、el-footer均设置flex-shrink: 0保证顶栏/底栏/侧边栏的高度或宽度不会被其他内容挤压主区域弹性伸展el-main设置flex: 1自动吸收所有剩余空间内容溢出时通过overflow: auto滚动方向自动推断框架层通过扫描默认插槽 VNode 的componentOptions.tag是否为el-header/el-footer来决定容器方向开发者无需手动声明大部分场景下的排列方向。也就是说只要按照el-container内只放后四者、需要分栏就嵌套el-container的约束组织结构浏览器会自行完成所有空间分配页面高度由内容或显式 height 驱动宽度则由侧边栏宽度与主区域弹性伸缩共同决定。六、单元测试行为即契约test/unit/specs/container.spec.js 完整覆盖了五个组件的行为契约可作为使用时的行为说明书Container默认可正常创建包含el-header时自动添加is-vertical类direction显式切换时类名同步变化Headerheight100px会原样写入元素内联样式Asidewidth200px会原样写入元素内联样式Main可正常创建无 props 可测Footerheight100px会原样写入元素内联样式。这些断言同时印证了属性均为字符串类型、以内联样式方式生效、方向自动推断依赖is-vertical类——与本文前述源码分析完全一致。结语Element 的布局容器组件用极小的 API 表面五个组件、四个属性封装了后台系统最常用的页面骨架能力。掌握三条核心规则即可灵活运用其一el-container的子元素只能是el-header/el-aside/el-main/el-footer其二是否纵向排列取决于子元素中是否含顶栏或底栏或显式direction其三复杂布局靠嵌套el-container组合。需要自定义尺寸时记住el-header/el-footer默认60px、el-aside默认300px这几个默认值即可。进一步深入可阅读 packages/theme-chalk/src/container.scss 等五个样式文件了解 Flexbox 细节或运行 test/unit/specs/container.spec.js 中的测试用例验证各行为契约。【免费下载链接】elementA Vue.js 2.0 UI Toolkit for Web项目地址: https://gitcode.com/gh_mirrors/eleme/element创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
