element-plus文档解析之Layout布局(el-row,el-col)

前言

这是element-plus提供的响应式布局组件。可以非常方便的实现响应式布局以及快速按比例分块。

例如实现下面的效果：
第一行：宽度占100%
第二行：宽度1：1
第三行：1：1：1
第四行：1：1：1：1
第五行：1：1：1：1：1：1

这里文档给的例子都是等比例平分。实际上，你想怎么分都可以。例如1：2：1。

基础功能

就是前言里面这个例子。

代码非常的多，我们拿前面两个举例。默认情况下，每一行被分成24块。可以根据比例调节每个el-col的span的数量来实现按比例分配。

  <el-row>
    <el-col :span="24">
      <div class="grid-content ep-bg-purple-dark" />
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="12">
      <div class="grid-content ep-bg-purple" />
    </el-col>
    <el-col :span="12">
      <div class="grid-content ep-bg-purple-light" />
    </el-col>
  </el-row>

这里需要注意的是ep-bg-purple这样的颜色是伪代码，并没有实现，需要自己实现颜色。这是文档写的不好的地方。

<style>
// 通过.el-row直接控制属性
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  // 宽度可以动态计算，只需要设置高度就行
  min-height: 36px;
}
// 颜色需要自己写
.ep-bg-purple {
  background-color: #d1d2d3;
}

.ep-bg-purple-dark {
  background-color: #99a9bf;
}

.ep-bg-purple-light {
  background-color: #d3dce6;
}
</style>

关于span参数

默认情况下，每一行被分成24块。我们可以通过设置el-col的span参数来使所有el-col的span参数的总和等于24。

• 总和可以小于24，例如6：12，剩下的部分留白。
• 总和可以大于24，超出的部分自带换行。

24这个值是固定的，不可以随便改，虽然你可以通过修改源码的方式修改这个值，但是不建议这样做。

那么这就引出一个关键问题——为什么默认值是24？

主要原因是栅格化系统来源于纸张排版系统。24可以排成1/1，1/2，1/3，1/4，1/6，1/8，1/12。也就是1，2，3，4，6，8，12等分。一般情况下，我们就用到2，3等分比较多。

如果你想要5等分，可以利用小于24留白的技巧。4：4：4：4：4就可以实现平均分成5分。空白的地方想办法居中使之左右平摊。这个通过el-row的justify属性就可以实现居中。

小于24的情况：12：6
右边留白。

超过24的情况：12：16
超过的那个元素直接移到第二行。

分栏间隔gutter

通过gutter这个属性可以实现元素之间的间距。只有一个的时候gutter无效。两个或者以上，就是下图的效果，最左边和最右边是没有空白的。

    <el-row :gutter="20">
      <el-col :span="24">
        <div class="grid-content ep-bg-purple-dark"></div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content ep-bg-purple" />
      </el-col>
      <el-col :span="12">
        <div class="grid-content ep-bg-purple-light" />
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content ep-bg-purple" />
      </el-col>
      <el-col :span="8">
        <div class="grid-content ep-bg-purple-light" />
      </el-col>
      <el-col :span="8">
        <div class="grid-content ep-bg-purple" />
      </el-col>
    </el-row>

混合布局

没什么好说的，自己控制比例实现布局。

  <el-row :gutter="20">
    <el-col :span="16"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="16"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
  </el-row>

列偏移

这个还是有点用处的。比如我就是想实现偏移几个位置后绘制，特定场景还是比较实用的。

  <el-row :gutter="20">
    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="6" :offset="6">
      <div class="grid-content ep-bg-purple" />
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="6" :offset="6">
      <div class="grid-content ep-bg-purple" />
    </el-col>
    <el-col :span="6" :offset="6">
      <div class="grid-content ep-bg-purple" />
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="12" :offset="6">
      <div class="grid-content ep-bg-purple" />
    </el-col>
  </el-row>

对齐方式

这个和flex的对其方式是非常类似的，主要的区别可能就是在element-plus里面有响应式，有栅格化系统的概念。使用起来是没什么区别的。

可以利用这个特性和留白的特性，实现5等分。也就是4:4:4:4:4,并且居中，这样就巧妙的实现了五等分的效果。

我们知道将24进行5等分是不可能的，但是可以通过这个技巧实现。

    <el-row justify="space-between">
      <el-col :span="4">
        <div class="grid-content ep-bg-purple" />
      </el-col>
      <el-col :span="4">
        <div class="grid-content ep-bg-purple-light" />
      </el-col>
      <el-col :span="4">
        <div class="grid-content ep-bg-purple" />
      </el-col>
      <el-col :span="4">
        <div class="grid-content ep-bg-purple-light" />
      </el-col>
      <el-col :span="4">
        <div class="grid-content ep-bg-purple" />
      </el-col>
    </el-row>

响应式布局

这个是非常重要的一个功能，也是实现响应式的主要功能。 但是效果不好演示，需要自己浏览器调试看下效果，也非常的简单。
参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。
主要就是下面这几个属性：

下面的代码在浏览器的不同分辨率下，会动态的改变元素占用的比例。可以打开控制台拖动分辨率来查看效果。

    <el-row :gutter="10">
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
        <div class="grid-content ep-bg-purple" />
      </el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
        <div class="grid-content ep-bg-purple-light" />
      </el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
        <div class="grid-content ep-bg-purple" />
      </el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
        <div class="grid-content ep-bg-purple-light" />
      </el-col>
    </el-row>