Element-UI 技术揭秘（4）— Container 布局容器组件的设计与实现。

前言

上一篇文章咱们分析了 Layout 布局组件的设计和实现，它的应用场景一般是局部布局。对于整个页面的布局，element-ui 提供了 Container 布局容器组件，专门用于 PC 管理后台页面的总体布局。

需求分析

咱们先经过几幅图看一下页面的常见布局。

这两张图的布局在后台系统中很常见，经过简单的 CSS 就能够实现。不过咱们更喜欢用组件化的开发方式，把这些 CSS 的细节封装到组件里，以下：

<el-container>
  <el-header>Header</el-header>
  <el-main>Main</el-main>
  <el-footer>Footer</el-footer>
</el-container>

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-container>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
</el-container>
复制代码

咱们使用了 <el-container>、<el-header>、<el-main>、<el-footer>、<el-aside> 5 种组件，来看一下它们各自的做用：

• <el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，所有子元素会垂直上下排列，不然会水平左右排列。

• <el-header>：顶栏容器。

• <el-aside>：侧边栏容器。

• <el-main>：主要区域容器。

• <el-footer>：底栏容器。

这几个组件须要遵循以下约束：

<el-container> 的子元素只能是后四者，后四者的父元素也只能是 <el-container>。

了解了 element-ui Container 布局容器组件的需求后，咱们来分析它的设计和实现。​

设计和实现

针对图示的布局，咱们能够经过 flex 的布局方式轻松实现，element-ui 也是基于 flex 布局实现的，接下来咱们来分析各个组件的实现。

ElContainer 组件

先来看模板部分：

<template>
  <section class="el-container">
    <slot></slot>
  </section>
</template>
复制代码

<el-container> 组件会渲染成一个 <section> 标签，并经过 slot 作内容分发。

再来看一下 CSS 部分：

@include b(container) {
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  box-sizing: border-box;
  min-width: 0;
}
复制代码

重点看一下 CSS 部分，display:flex 建立了一个 flex 容器，flex-direction:row 指定了内部元素是在水平方向排列。这里为何还有 flex:1 呢，由于 <el-container> 容器是支持嵌套的，而且咱们知道 flex:1 至关于 flex-grow:1;flex-shrink:1;flex-basis:0，也就是当 <el-container> 被嵌套的时候，它会占满剩余空间。flex-basis:auto 表示分配空间以前会先跟父容器预定自身内容大小的空间，而后剩下的才会纳入到剩余空间。

<el-container> 容器默认是水平排列，固然也须要支持垂直排列，咱们能够给组件提供一个 direction 的 prop，若是传入的 direction 是 vertical，添加对应的 CSS。

<template>
  <section class="el-container" :class="{ 'is-vertical': isVertical }">
    <slot></slot>
  </section>
</template>
复制代码

export default {
  name: 'ElContainer',

  componentName: 'ElContainer',

  props: {
    direction: String
  },

  computed: {
    isVertical() {
      if (this.direction === 'vertical') {
        return true;
      } else if (this.direction === 'horizontal') {
        return false;
      }
    }
  }
};
复制代码

@include when(vertical) {
  flex-direction: column;
}
复制代码

若是传入的 direction 为 vertical，则添加 is-vertical 的 CSS，最终经过修改 flex-direction:column 实现内部元素是在垂直方向排列。

回顾前面的一个需求：当 <el-container> 容器的子元素中包含 <el-header> 或 <el-footer> 时，所有子元素会垂直上下排列，不然会水平左右排列。

实现它也很容易，扩展计算属性 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; 
  }
}
复制代码

这里用了一个小技巧，this.$slots.default 获取的是默认插槽中的全部 vnodes 节点，而后对他们遍历，经过 vnode.componentOptions.tag 来判断这个 vnode 是否是 <el-header> 或者是 <el-footer>。vnode.componentOptions 并不在官网 API 里，可是对于熟读 Vue 源码的人来讲并不陌生。

ElHeader 组件

先来看一下模板部分：

<template>
  <header class="el-header">
    <slot></slot>
  </header>
</template>
复制代码

<el-header> 组件会渲染成一个 <header> 标签，并经过 slot 作内容分发。

再来看一下 CSS 部分：

@include b(header) {
  padding: $--header-padding;
  box-sizing: border-box;
  flex-shrink: 0;
}
复制代码

其中 $--header-padding 是一个变量，在 packages/theme-chalk/src/common/var.scss 文件中定义。flex-shrink: 0 表示即便空间不够，也不会缩小 <el-header> 所占空间。

一般来讲头部都会有一个固定高度，所以 <el-header> 容许你传入一个 height 的 props 来指定高度，若是不指定的话提供一个默认高度。

<template>
  <header class="el-header" :style="{ height }">
    <slot></slot>
  </header>
</template>
复制代码

export default {
  name: 'ElHeader',

  componentName: 'ElHeader',

  props: {
    height: {
      type: String,
      default: '60px'
    }
  }
};
复制代码

因为直接经过 :style 设置的样式，因此这里传入高度的时候必定要携带单位。

ElMain 组件

先来看一下模板部分：

<template>
  <main class="el-main">
    <slot></slot>
  </main>
</template>
复制代码

<el-main> 组件会渲染成一个 <main> 标签，并经过 slot 作内容分发。

再来看一下 CSS 部分：

@include b(main) {
  // IE11 supports the <main> element partially https://caniuse.com/#search=main
  display: block;
  flex: 1;
  flex-basis: auto;
  overflow: auto;
  box-sizing: border-box;
  padding: $--main-padding;
}
复制代码

注意，<main> 标签在 IE11 中是部分支持的。一般 <main> 中包裹的内容彻底由它的子元素来决定，因此并不会设置高和宽，只是经过 flex:1 来分配 <el-container> 容器的剩余空间。

ElFooter 组件

先来看一下模板部分：

<template>
  <footer class="el-footer">
    <slot></slot>
  </footer>
</template>
复制代码

<el-footer> 组件会渲染成一个 <footer> 标签，并经过 slot 作内容分发。

再来看一下 CSS 部分：

@include b(footer) {
  padding: $--footer-padding;
  box-sizing: border-box;
  flex-shrink: 0;
}
复制代码

和头部同样，一般底部也会有一个固定高度，所以 <el-footer> 容许你传入一个 height 的 props 来指定高度，若是不指定的话提供一个默认高度。

<template>
  <footer class="el-footer" :style="{ height }">
    <slot></slot>
  </footer>
</template>
复制代码

export default {
  name: 'ElFooter',

  componentName: 'ElFooter',

  props: {
    height: {
      type: String,
      default: '60px'
    }
  }
};
复制代码

ElAside 组件

先来看一下模板部分：

<template>
  <aside class="el-aside">
    <slot></slot>
  </aside>
</template>
复制代码

<el-aside> 组件会渲染成一个 <aside> 标签，并经过 slot 作内容分发。

再来看一下 CSS 部分：

@include b(aside) {
  overflow: auto;
  box-sizing: border-box;
  flex-shrink: 0;
}
复制代码

<el-aside> 组件用来渲染侧边栏，而侧边栏一般会有宽度，所以 <el-aside>，容许你传入一个 width 的 props 来指定宽度，若是不指定的话提供一个默认宽度。

<template>
  <aside class="el-aside" :style="{ width }">
    <slot></slot>
  </aside>
</template>
复制代码

export default {
  name: 'ElAside',

  componentName: 'ElAside',

  props: {
    width: {
      type: String,
      default: '300px'
    }
  }
};
复制代码

总结

element-ui 的 Container 布局容器组件的实现仍是很简单的：建立了一些语义化的标签，利用插槽作内容分发，经过 flex 实现布局效果。

学习完这篇文章，你能够顺便对 flex 布局、HTML5 的语义化标签作一下复习，加深理解，并了解到 Vue 源码中的一些小技巧。

把不会的东西学会了，那么你就进步了，若是你以为这类文章有帮助，也欢迎把它推荐给你身边的小伙伴。

下一篇预告 ：Element-UI 技术揭秘（5）色彩、字体、边框与图标。

另外，我最近刚开了公众号「老黄的前端私房菜」，《Element-UI 技术揭秘》系列文章会第一时间在公众号更新和发布，除此以外，我还会常常分享一些前端进阶知识，干货，也会偶尔分享一些软素质技能，欢迎你们关注喔~