bootstrap左右布局模板_ElementUI 技术揭秘（3）— Layout 布局组件的设计与实现

前言

当我们拿到一个 PC 端页面的设计稿的时候，往往会发现页面的布局并不是随意的，而是遵循的一定的规律：行与行之间会以某种方式对齐。对于这样的设计稿，我们可以使用栅格布局来实现。

早在 Bootstrap 一统江湖的时代，栅格布局的概念就已深入人心，整个布局就是一个二维结构，包括列和行， Bootstrap 会把屏幕分成 12 列，还提供了一些非常方便的 CSS 名让我们来指定每列占的宽度百分比，并且还通过媒体查询做了不同屏幕尺寸的适应。

element-ui 也实现了类似 Bootstrap 的栅格布局系统，那么基于 Vue 技术栈，它是如何实现的呢？

需求分析

和 Bootstrap 12 分栏不同的是，element-ui 目标是提供的是更细粒度的 24 分栏，迅速简便地创建布局，写法大致如下：

<el-row>
  <el-col>aaael-col>
  <el-col>bbbel-col>
el-row>
<el-row>
  ...
el-row>

这就是二维布局的雏形，我们会把每个列的内容写在 之间，除此之外，我们还需要支持控制每个  所占的宽度自由组合布局；支持分栏之间存在间隔；支持偏移指定的栏数；支持分栏不同的对齐方式等。

了解了 element-ui Layout 布局组件的需求后，我们来分析它的设计和实现。

设计和实现

组件的渲染

回顾前面的例子，从写法上看，我们需要设计 2 个组件，el-row 和 el-col 组件，分别代表行和列；从 Vue 的语法上看，这俩组件都要支持插槽(因为在自定义组件标签内部的内容都分发到组件的 slot 中了)；从 HTML 的渲染结果上看，我们希望模板会渲染成：

<div class="el-row">
  <div class="el-col">aaadiv>
  <div class="el-col">bbbdiv>
div>
<div class="el-row">
  ...
div>

想达到上述需求，组件的模板可以非常简单。

el-row 组件模板代码如下：

<div class="el-row">
  <slot>slot>
div>

el-col 组件代码如下：

<div class="el-col">
  <slot>slot>
div>

这个时候，新需求来了，我希望 el-row 和 el-col 组件不仅能渲染成 div，还可以渲染成任意我想指定的标签。
那么除了我们要支持一个 tag 的 prop 之外，仅用模板是难以实现了。

我们知道 Vue 的模板最终会编译成 render 函数，Vue 的组件也支持直接手写 render 函数，那这个需求用 render 函数实现就非常简单了。

el-row 组件：

render(h) {
    
  return h(this.tag, {
    
    class: [
      'el-row',
    ]
  }, this.$slots.default);
}

el-col 组件：

render(h) {
    
  return h(this.tag, {
    
    class: [
      'el-col',
    ]
  }, this.$slots.default);
}

其中，tag 是定义在 props 中的，h 是 Vue 内部实现的 $createElement 函数，如果对 render 函数语法还不太懂的同学，建议去看 Vue 的官网文档 render 函数部分。

了解了组件是如何渲染之后，我们来给 Layout 组件扩展一些 feature 。

分栏布局

Layout 布局的主要目标是支持 24 分栏，即一行能被切成 24 份，那么对于每一个 el-col ，我们想要知道它的占比，只需要指定它在 24 份中分配的份数即可。

于是我们给刚才的示例加上一些配置：

<el-row>
  <el-col :span="8">aaael-col>
  <el-col :span="16">bbbel-col>
el-row>
<el-row>
  ...
el-row>

来看第一行，第一列 aaa 占 8 份，第二列 bbb 占 16 份。总共宽度是 24 份，经过简单的数学公式计算，aaa 占总宽度的 1/3，而 bbb 占总宽度的 2/3，进而推导出每一列指定 span 份就是占总宽度的 span/24。

默认情况下 div 的宽度是 100% 独占一行的，为了让多个 el-col 在一行显示，我们只需要让每个 el-col 的宽占一定的百分比，即实现了分栏效果。设置不同的宽度百分比只需要设置不同的 CSS 即可实现，比如当某列占 12 份的时候，那么它对应的 CSS 如下：

.el-col-12 {
    
  width: 50%
}

为了满足 24 种情况，element-ui 使用了 sass 的控制指令，配合基本的计算公式：

.el-col-0 {
    
  display: none;
}

@for $i from 0 through 24 {
    
  .el-col-#{$i} {
    
    width: (1 / 24 * $i * 100) * 1%;
  }
}

所以当我们给 el-col 组件传入了 span 属性的时候，只需要给对应的节点渲染生成对应的 CSS 即可，于是我们可以扩展 render 函数：

render(h) {
    
  let classList = [];
  classList.push(`el-col-${
    this.span}`);

  return h(this.tag, {
    
    class: [
      'el-col',
       classList
    ]
  }, this.$