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

0x00 简介

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

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

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

0x01 布局容器

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

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

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

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

  Header
  
    Aside
    
      Main
      Footer
    
  

0x02 代码实现

container 布局容器

组件 container 封装了

// packages\container\src\main.vue

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;
  }
} 

// packages\header\src\main.vue