• Element 2 组件源码剖析之布局容器

    🚀 优质资源分享 🚀

    学习路线指引（点击解锁）知识定位人群定位
    🧡 Python实战微信订餐小程序 🧡进阶级本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。
    💛Python量化交易实战💛入门级手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

    0x00 简介

    前文分析过组件的 布局栅格化(Grid Layout) ，通过基础的 24 分栏，迅速简便地创建布局。

    本文将介绍用于布局的容器组件，使用 Flexbox 功能将其所控制区域设定为特定的布局，方便快速搭建页面的基本结构。本文将深入分析组件源码，剖析其实现原理，耐心读完，相信会对您有所帮助。 组件文档

    更多组件剖析详见 👉 📚 Element 2 源码剖析组件总览 。

    0x01 布局容器

    布局容器提供5个组件，支持多层嵌套，方便快速搭建页面的基本结构：

    • ：布局容器，其下可嵌套     或  本身，可以放在任何父容器中。当子元素中包含  或  时，全部子元素会垂直上下排列，否则会水平左右排列。
    • ：顶部容器，其下可嵌套任何元素，只能放在  中。
    • ：侧边栏容器，其下可嵌套任何元素，只能放在  中。
    • ：主要区域容器，其下可嵌套任何元素，只能放在  中。
    • ：底部容器，其下可嵌套任何元素，只能放在  中。

    以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外， 的子元素只能是后四者，后四者的父元素也只能是

    以下代码通过多层嵌套可以实现常用的页面布局， 更多常用布局实现详见 官方文档 。

    
  Headerel-header>
  
    Asideel-aside>
    
      Mainel-main>
      Footerel-footer>
    el-container>
  el-container>
el-container>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PI4JlC23-1658941722013)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/264f2db7f0b240a29831661a73b467df~tplv-k3u1fbpfcp-watermark.image?)]

    0x02 代码实现

    container 布局容器

    组件 container 封装了 元素，包含没有后备内容（默认值）的匿名插槽 。组件定义了direction的 prop 属性，用于子元素的排列方向。

    // packages\container\src\main.vue

 
    
 slot>
 section>