布局一共有兩個(gè)組件岛琼，一個(gè)是row视卢，另一個(gè)是col雏逾，后者是通過render函數(shù)來創(chuàng)建的嘉裤，我們一一進(jìn)行講解。

Row

row類似于bootstrap中的container校套，用來作為col的容器价脾，上面有一些動(dòng)態(tài)的class、style笛匙，以及一個(gè)slot用來放置col侨把，相對(duì)較為簡(jiǎn)單。

<template>
  <div
    class="el-row"
    :style="style"
    :class="[
      justify !== 'start' ? 'is-justify-' + justify : '',
      align !== 'top' ? 'is-align-' + align : '',
      {
        'el-row--flex': type === 'flex'
      }
    ]"
  >
    <slot></slot>
  </div>
</template>

其中妹孙，style是一個(gè)計(jì)算屬性秋柄，會(huì)根據(jù)gutter這一prop來改變，欄目之間的間隔蠢正，用來抵消col造成的兩邊的padding骇笔。

computed: {
  style() {
    var ret = {};

    if (this.gutter) {
      ret.marginLeft = `-${this.gutter / 2}px`;
      ret.marginRight = ret.marginLeft;
    }

    return ret;
  }
}

其他三個(gè)屬性都是prop：

props: {
  type: String,  // 可以使用flex，這樣會(huì)采用flex布局
  justify: {  // flex 布局下的水平排列方式
    type: String,
    default: 'start'
  },
  align: {  // flex 布局下的垂直排列方式
    type: String,
    default: 'top'
  }
},

Col

列的實(shí)現(xiàn)只有一個(gè)col.js嚣崭，因?yàn)榫唧w的組件是通過render來生成的笨触，因此，我們從render入手雹舀，來解析col組件芦劣。

render(h) {
  let { style } = this;  // style 是一個(gè)計(jì)算屬性，將在下面的計(jì)算屬性中講解
  let classList = [];

  // span 柵格占據(jù)的列數(shù)说榆，通過 width 來實(shí)現(xiàn)
  // offset 柵格左側(cè)的間隔格數(shù)虚吟，通過 margin-left 實(shí)現(xiàn)
  // push 柵格向右移動(dòng)格數(shù)，通過 left 實(shí)現(xiàn)
  // pull 柵格向左移動(dòng)格數(shù)签财，通過 right 實(shí)現(xiàn)
  ['span', 'offset', 'pull', 'push'].forEach(prop => {
    if (this[prop]) {
      classList.push(
        prop !== 'span'
        ? `el-col-${prop}-${this[prop]}`
        : `el-col-${this[prop]}`
      );
    }
  });

  // 不同屏幕大小下的適配串慰，傳入數(shù)字的話只會(huì)影響 span，還可以通過傳入對(duì)象進(jìn)行更多的控制
  // xs <768px 響應(yīng)式柵格數(shù)或者柵格屬性對(duì)象
  // sm ≥768px 響應(yīng)式柵格數(shù)或者柵格屬性對(duì)象
  // md ≥992px 響應(yīng)式柵格數(shù)或者柵格屬性對(duì)象
  // lg ≥1200px 響應(yīng)式柵格數(shù)或者柵格屬性對(duì)象
  ['xs', 'sm', 'md', 'lg'].forEach(size => {
    if (typeof this[size] === 'number') {
      classList.push(`el-col-${size}-${this[size]}`);
    } else if (typeof this[size] === 'object') {
      let props = this[size];
      Object.keys(props).forEach(prop => {
        classList.push(
          prop !== 'span'
          ? `el-col-${size}-${prop}-${props[prop]}`
          : `el-col-${size}-${props[prop]}`
        );
      });
    }
  });

  return (
    <div
      class={['el-col', classList]}
      style={style}>
      {this.$slots.default}
    </div>
  );
}

注：筆者目前對(duì)render的使用還沒有太深入的研究唱蒸，還流于表面邦鲫，因此不評(píng)價(jià)這段的好壞。

計(jì)算屬性

gutter和style都是計(jì)算屬性油宜。

computed: {
  gutter() {
    return this.$parent.gutter;  // 返回父組件的 gutter 設(shè)置
  },

  style() {
    var ret = {};

    if (this.gutter) {  // 如果有間隔掂碱，則改變 padding 值
      ret.paddingLeft = this.gutter / 2 + 'px';
      ret.paddingRight = ret.paddingLeft;
    }

    return ret;
  }
}