3.13 Layout 布局

0x00 简介

组件提供了布局的栅格化(Grid Layout)系统，通过基础的 24 分栏，迅速简便地创建布局。该系统使用Row 和 Col 栅格组件进行创建。本文将深入分析源码，剖析其实现原理，耐心读完，相信会对您有所帮助。

🔗 组件文档 Layout 🔗 gitee 源码行组件 row.js 🔗 gitee 源码列组件 col.js

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

0x01 Grid Layout

栅格化提高了页面布局的一致性跟复用性，提升了整个设计开发流程的效率。同时使得网页的布局更加规范和简洁，提升用户体验。

网页栅格化神器 Grid.Guide ，可以自由设置最大宽度、列数以及留白边界自动动生成多种最佳栅格方案以供选择。

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。

element 2 采用 Ant Design 的设计理念:在 12 栅格系统的基础上，将整个设计建议区域按照 24 等分的原则进行划分，解决在设计区域内大量信息收纳的问题。

栅格化布局系统 通过一系列的行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面就介绍一下栅格系统的工作原理：

通过 row 在水平方向建立一组 column（简写 col）。
内容应当放置于 col 内，并且只有 col 可以作为 row 的直接元素。
栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用 <col :span="8" /> 来创建。
如果一个 row 中的 col 总和超过 24，那么多余的 col 会作为一个整体另起一行排列。

接下来对组件行（row）和列（col）一一进行讲解。

0x02 Row 行组件

packages/row/src/row.js 使用渲染函数构建组件,支持组件渲染成自定义元素标签，主要用来作为col的容器。

render()

组件根据指定自定义元素渲染标签节点，由组件 prop 属性值动态计算添加 class 和自定义样式（计算属性style），内部提供一个匿名插槽用于分发内容。

render(h) {
  return h(this.tag, {
    class: [
      'el-row',
      this.justify !== 'start' ? `is-justify-${this.justify}` : '',
      this.align !== 'top' ? `is-align-${this.align}` : '',
      { 'el-row--flex': this.type === 'flex' }
    ],
    style: this.style
  }, this.$slots.default);
}

在 JSX 语法中，h 作为 createElement 的别名。第二个参数是一个包含模板相关属性的数据对象VNodeData,对象属性如下。

{
  // 与 `v-bind:class` 的 API 相同，
  // 接受一个字符串、对象或字符串和对象组成的数组
  'class': {
    foo: true,
    bar: false
  },
  // 与 `v-bind:style` 的 API 相同，
  // 接受一个字符串、对象，或对象组成的数组
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // ...
}

若自定义元素标签为<div>，等同于如下 template 实现。

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

组件 props

组件定义了 5 个 prop : tag 、gutter、type、justify、align。

tag

支持组件渲染成自定义 html 标签,默认值为 div, 作为 createElement 方法的第一个参数。

props: {
  tag: {
    type: String,
    default: 'div'
  },
},

gutter

栅格间隔设置,用来指定每一栏之间的间隔，默认间隔为 0。col 组件通过获取父组件row的 gutter 计算自己的左右 padding 。

props: {
  gutter: Number,
},

Flex 布局设置

type 设置布局模式，可选 flex，仅在现代浏览器下有效。

props: {
  type: String,
},

当 type 值为flex， { 'el-row--flex': type === 'flex' } 会添加 class el-row--flex,开启 flex 布局。

.el-row--flex {
  display: flex;
}

justify 用于设置 flex 布局下的水平排列方式，可选值start/end/center/space-around/space-between，生成的样式 is-justify-[justify],用于设置 justify-content 属性。其他值生成的样式无效。

align 用于设置 flex 布局下的垂直排列方式，可选值top/middle/bottom，生成的样式 is-align-[align],用于设置 align-items 属性。其他值生成的样式无效。

props: {
  // flex 布局下的水平排列方式  justify-content
  justify: {
    type: String,
    default: 'start'
  },
  // flex 布局下的垂直排列方式  align-items
  align: {
    type: String,
    default: 'top'
  }
},

元素默认布局不会生成 flex 样式 justify !== 'start' ? 'is-justify-' + justify : '', ，align !== 'top' ? 'is-align-' + align : '', 。

系统基于 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。

Flex 布局，可以简便、完整、响应式地实现各种页面布局。其语法本文不做过多赘述，详见 “Flex 布局教程”，阮一峰。

计算属性

计算属性 style 通过为 row 组件设置负值 margin 从而抵消掉为 col 组件设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

computed: {
  style() {
    const ret = {};
    // 通过gutter计算出实际左右 margin
    if (this.gutter) {
      ret.marginLeft = `-${this.gutter / 2}px`;
      ret.marginRight = ret.marginLeft;
    }
    return ret;
  }
},

0x03 Col 列组件

packages/col/src/col.js 使用渲染函数构建组件，支持渲染自定义元素标签。

render()

组件根据指定自定义元素渲染标签节点，由组件 prop 属性值动态计算添加 class 和自定义样式，内部提供一个匿名插槽用于分发内容。

render(h) {
    let classList = [];
    let style = {};

    // sytle 计算
    // class 计算

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

若自定义元素标签为<div>，等同于如下 template 实现。

<template>
  <div :style="style" :class="['el-col', classList]">
    <slot></slot>
  </div>
</template>

组件 props

定义了 10 个 prop ,具体功能详见中文注释。 span 默认值 24，对应栅格系统 24 分栏。

props: {
  // 自定义元素标签
  tag: {
    type: String,
    default: 'div'
  },
  // 栅格占据的列数，总共24列，如果设置为0，则不渲染
  span: {
    type: Number,
    default: 24
  },
  // 栅格左侧的间隔格数
  offset: Number,
  // 栅格向右移动格数
  pull: Number,
  // 栅格向左移动格数
  push: Number,
  // 响应式布局设置
  // 响应式栅格数或者栅格属性对象 number/object (例如： {span: 4, offset: 4})
  // xs <768px  sm ≥768px  md ≥992px  lg ≥1200px  xl ≥1920px
  xs: [Number, Object],
  sm: [Number, Object],
  md: [Number, Object],
  lg: [Number, Object],
  xl: [Number, Object]
},

计算属性

计算属性gutter 获取父组件 row 的 gutter值。通过 row 组件的自定义 property 进行判断parent.$options.componentName !== 'ElRow'。

computed: {
  gutter() {
    // 获取父实例 根据 compontName 属性 判断是组件 row
    let parent = this.$parent;
    while (parent && parent.$options.componentName !== 'ElRow') {
      parent = parent.$parent;
    }
    return parent ? parent.gutter : 0;
  }
},

// packages\row\src\row.js
export default {
  name: 'ElRow',
  // 自定义 property
  componentName: 'ElRow',
}

组件 padding

若计算属性gutter值不为 0，计算 col 的左右 padding。

render(h) {
    let style = {};
    // sytle 计算
    if (this.gutter) {
      style.paddingLeft = this.gutter / 2 + 'px';
      style.paddingRight = style.paddingLeft;
    }
  }

组件 class

分栏、间隔、左右偏移

栅格、间隔、左右偏移的样式动态计算。

// span 栅格占据的列数，通过 width 来实现
// offset 栅格左侧的间隔格数，通过 margin-left 实现
// push 栅格向右移动格数，通过 left 实现
// pull 栅格向左移动格数，通过 right 实现
["span", "offset", "pull", "push"].forEach((prop) => {
  if (this[prop] || this[prop] === 0) {
    classList.push(
      prop !== "span" ? `el-col-${prop}-${this[prop]}` : `el-col-${this[prop]}`
    );
  }
});

col组件样式 scss 实现。由.el-col-0可知，当 span 设置为 0 时,组件 display 值为none ，不会被渲染。

[class*="el-col-"] {
  float: left;
  // 如何计算一个元素的总宽度和总高度
  box-sizing: border-box;
}
// 组件不渲染
.el-col-0 {
  display: none;
}

@for $i from 0 through 24 {
  // 生成 .el-col-0,.el-col-1, ... ,el-col-24
  .el-col-#{$i} {
    width: (1 / 24 * $i * 100) * 1%;
  }
  // 生成 .el-col-offset-0,.el-col-offset-1, ... ,el-col-offset-24
  .el-col-offset-#{$i} {
    margin-left: (1 / 24 * $i * 100) * 1%;
  }
  // 生成 .el-col-pull-0,.el-col-pull-1, ... ,el-col-pull-24
  .el-col-pull-#{$i} {
    position: relative;
    right: (1 / 24 * $i * 100) * 1%;
  }
  // 生成 .el-col-push-0,.el-col-push-1, ... ,el-col-push-24
  .el-col-push-#{$i} {
    position: relative;
    left: (1 / 24 * $i * 100) * 1%;
  }
}

响应式布局

响应式布局样式动态计算。预设四个响应尺寸：xs sm md lg。传入数字的话只会影响 span，还可以传入对象{span: 4, offset: 4} ,属性可选范围 span/offset/pull/push。

// xs <768px 响应式栅格数或者栅格属性对象
// sm ≥768px 响应式栅格数或者栅格属性对象
// md ≥992px 响应式栅格数或者栅格属性对象
// lg ≥1200px 响应式栅格数或者栅格属性对象
// xl ≥1920px 响应式栅格数或者栅格属性对象
["xs", "sm", "md", "lg", "xl"].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]}`
      );
    });
  }
});

使用指令 res 生成 @media 媒体查询样式，其 scss 实现如下：

// 'xs', 'sm', 'md', 'lg', 'xl'
// 生成 @media only screen and (min-width: xxx px)
@include res(sm) {
  // 生成  .el-col-sm-0
  .el-col-sm-0 {
    display: none;
  }
  @for $i from 0 through 24 {
    // 生成 .el-col-sm-0,.el-col-sm-1, ... ,el-col-sm-24
    .el-col-sm-#{$i} {
      width: (1 / 24 * $i * 100) * 1%;
    }
    // 生成 .el-col-sm-offset-0,.el-col-sm-offset-1, ... ,el-col-sm-offset-24
    .el-col-sm-offset-#{$i} {
      margin-left: (1 / 24 * $i * 100) * 1%;
    }
    // 生成 .el-col-sm-pull-0,.el-col-sm-pull-1, ... ,el-col-sm-pull-24
    .el-col-sm-pull-#{$i} {
      position: relative;
      right: (1 / 24 * $i * 100) * 1%;
    }
    // 生成 .el-col-sm-push-0,.el-col-sm-push-1, ... ,el-col-sm-push-24
    .el-col-sm-push-#{$i} {
      position: relative;
      left: (1 / 24 * $i * 100) * 1%;
    }
  }
}

0x04 Column Gutter 实现原理

通过 row 和 col 组件，并通过 col 组件的 span 属性可以自由地组合布局。使用 <el-col :span="12" /> 来创建二个等宽的列。使用 row 组件提供 gutter 属性来指定每一栏之间的间隔，默认单位为 px 。

以下代码创建一个包含二个等宽的列的行，间隔为 24px。

<el-row :gutter="24">
  <el-col :span="12"><div>col</div></el-col>
  <el-col :span="12"><div>col</div></el-col>
</el-row>

页面渲染后效果如下 👇：

列与列的间隔距离等于属性值 gutter，首列左侧和尾列的右侧间隔值为 gutter/2。布局如下 👇：

组件col中的计算属性 gutter获取父组件 row 的 gutter 值，并在 render() 中基于计算属性 gutter的值计算列的 padding-left padding-right,值为 gutter / 2 + 'px'。

// packages\col\src\col.js
computed: {
  // 获取 el-row 的gutter值
  gutter() {
    // 父实例 根据 compontName 属性 判断是组件 el-row
    let parent = this.$parent;
    while (parent && parent.$options.componentName !== 'ElRow') {
      parent = parent.$parent;
    }
    return parent ? parent.gutter : 0;
  }
},
render(h) {
  let classList = [];
  let style = {};

  // 通过gutter计算自己的左右2个padding，用于分隔col
  if (this.gutter) {
    style.paddingLeft = this.gutter / 2 + 'px';
    style.paddingRight = style.paddingLeft;
  }

  // class 计算

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

列与列的间隔距离等于属性值 gutter 等于左列的 padding-right值加上右列的 padding-left值；首列左侧间隔值为 padding-left ；尾列的右侧间隔值为 padding-right。效果如下 👇：

其它 3 等列、4 等列、……、24 等列依次类推，感觉是不是很好理解！ 那组件row的计算属性 style 设置 margin-left margin-right负值用意何在？

// packages\row\src\row.js
computed: {
  style() {
    const ret = {};
    if (this.gutter) {
      ret.marginLeft = `-${this.gutter / 2}px`;
      ret.marginRight = ret.marginLeft;
    }
    return ret;
  }
},

前文中提到，组件 row 的计算属性 style 通过为组件设置负值 margin 从而抵消掉为 col 组件设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

接下来通过示例、图解的方式对其进行阐释。

在之前的示例中第一行第一列中插入一行（该行中包含两等宽列）,代码如下 👇：

<!-- row1 -->
<el-row :gutter="24">
  <!-- col1 -->
  <el-col :span="12">
    <el-row :gutter="24">
      <el-col :span="12"><div>col</div></el-col>
      <el-col :span="12"><div>col</div></el-col>
    </el-row>
  </el-col>
  <!-- col2 -->
  <el-col :span="12"><div>col</div></el-col>
</el-row>

假设组件 row 没有设置负值， margin值为 0 。此时第一行第一列中嵌套的两列的间隔比默认的设置多出来一个 padding 值（gutter/2）。中间两列的间隔就 gutter/2 * 3。多嵌套一层，间隔就会增大 gutter/2。实现效果如下 👇：

若组件 row 的计算属性 style 通过为组件设置负值 margin，绝对值为 gutter/2。嵌套中的 row宽度会增加gutter,抵消掉为 col 组件设置的 padding，相当于此列没有设置 padding值。实现效果如下 👇：

基于此逻辑，不管进行多少层级的嵌套，都能保证列与列之间的间隔一致。代码实际渲染效果如下 👇：

0x05 样式实现

Row 组件

组件样式源码 packages\theme-chalk\src\row.scss 使用混合指令 b、m、utils-clearfix嵌套生成组件样式。

// 生成 .el-row
@include b(row) {
  position: relative;
  box-sizing: border-box;
  // 使用清除浮动指令 生成 .el-row::after, .el-row::before
  @include utils-clearfix;

  // flex布局 生成 .el-row--flex
  @include m(flex) {
    display: flex;
    // 生成 .el-row--flex:after, .el-row--flex:before
    &:before,
    &:after {
      display: none;
    }
    // 对齐方式
    // 生成 .el-row--flex.is-justify-center
    @include when(justify-center) {
      justify-content: center;
    }
    // 生成 // 生成 .el-row--flex.is-justify-end
    @include when(justify-end) {
      justify-content: flex-end;
    }
    // 生成 .el-row--flex.is-justify-space-between
    @include when(justify-space-between) {
      justify-content: space-between;
    }
    // 生成 .el-row--flex.is-justify-space-around
    @include when(justify-space-around) {
      justify-content: space-around;
    }
    // 生成 .el-row--flex.is-align-middle
    @include when(align-middle) {
      align-items: center;
    }
    // 生成 .el-row--flex.is-align-bottom
    @include when(align-bottom) {
      align-items: flex-end;
    }
  }
}

使用 gulpfile.js编译 scss 文件转换为CSS,经过浏览器兼容、格式压缩，最后生成 packages\theme-chalk\lib\row.css，内容格式如下。

.el-row {
  /*...*/
}
/*...clearfix...*/
.el-row::after,
.el-row::before {
  /*...*/
}
.el-row::after {
  /*...*/
}
/*...flex...*/
.el-row--flex {
  /*...*/
}
.el-row--flex:after,
.el-row--flex:before {
  /*...*/
}
/*...justify-content...*/
.el-row--flex.is-justify-center {
  /*...*/
}
.el-row--flex.is-justify-end {
  /*...*/
}
.el-row--flex.is-justify-space-between {
  /*...*/
}
.el-row--flex.is-justify-space-around {
  /*...*/
}
/*...align-items...*/
.el-row--flex.is-align-middle {
  /*...*/
}
.el-row--flex.is-align-bottom {
  /*...*/
}

Col 组件

组件样式源码 packages\theme-chalk\src\col.scss 生成组件样式实现分栏、间隔、偏移、响应式功能。

分栏、间隔、偏移

使用@for循环生成 0 至 24 对应样式：

span 栅格占据的列数，通过 width 来实现 ,对应样式 .el-col-[n] 。
offset 栅格左侧的间隔格数，通过 margin-left 实现 ,对应样式 .el-col-offset-[n] 。
push 栅格向右移动格数，通过 left 实现 ,对应样式 .el-col-push-[n] 。
pull 栅格向左移动格数，通过 right 实现,对应样式 .el-col-pull-[n] 。

组件栅格系统使用 24 分栏，所有每分栏宽度基准为 (1 / 24 * 100) * 1%。

[class*="el-col-"] {
  float: left;
  // 如何计算一个元素的总宽度和总高度
  box-sizing: border-box;
}
// 组件不渲染
.el-col-0 {
  display: none;
}

@for $i from 0 through 24 {
  // 生成 .el-col-[0-24]
  .el-col-#{$i} {
    width: (1 / 24 * $i * 100) * 1%;
  }
  // 生成 .el-col-offset-[0-24]
  .el-col-offset-#{$i} {
    margin-left: (1 / 24 * $i * 100) * 1%;
  }
  // 生成 .el-col-pull-[0-24]
  .el-col-pull-#{$i} {
    position: relative;
    right: (1 / 24 * $i * 100) * 1%;
  }
  // 生成 .el-col-push-[0-24]
  .el-col-push-#{$i} {
    position: relative;
    left: (1 / 24 * $i * 100) * 1%;
  }
}

响应式布局

系统预设五个响应尺寸：xs sm md lg xl。使用指令 res 生成媒体查询，从而实现响应式设计。

// 'xs', 'sm', 'md', 'lg', 'xl'
// 生成  @media only screen and (max-width: 767px) { ... }
@include res(xs) {
  // 生成  .el-col-xs-0
  .el-col-xs-0 {
    display: none;
  }
  @for $i from 0 through 24 {
    // 生成 .el-col-xs-[0-24]
    .el-col-xs-#{$i} {
      width: (1 / 24 * $i * 100) * 1%;
    }
    // 生成 .el-col-xs-offset-[0-24]
    .el-col-xs-offset-#{$i} {
      margin-left: (1 / 24 * $i * 100) * 1%;
    }
    // 生成 .el-col-xs-pull-[0-24]
    .el-col-xs-pull-#{$i} {
      position: relative;
      right: (1 / 24 * $i * 100) * 1%;
    }
    // 生成 .el-col-xs-push-[0-24]
    .el-col-xs-push-#{$i} {
      position: relative;
      left: (1 / 24 * $i * 100) * 1%;
    }
  }
}

// 生成 @media only screen and (min-width: 768px) { ... }
@include res(sm) { /*...*/ }
// 生成 @media only screen and (min-width: 992px) { ... }
@include res(md) { /*...*/ }
// 生成 @media only screen and (min-width: 1200px) { ... }
@include res(lg) { /*...*/ }
// 生成 @media only screen and (min-width: 1920px) { ... }
@include res(xl) { /*...*/ }

0x06 📚 参考

“渲染函数 & JSX”，vuejs.org "媒体查询",MDN “@media”，MDN

上一页3.12 Breadcrumb 面包屑下一页媒体查询

最后更新于3年前