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的数量来实现按比例分配。

bash 复制代码
  <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这样的颜色是伪代码,并没有实现,需要自己实现颜色。这是文档写的不好的地方。

css 复制代码
<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无效。两个或者以上,就是下图的效果,最左边和最右边是没有空白的。

bash 复制代码
    <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>

混合布局

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

bash 复制代码
  <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>

列偏移

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

bash 复制代码
  <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等分是不可能的,但是可以通过这个技巧实现。

bash 复制代码
    <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。

主要就是下面这几个属性:

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

bash 复制代码
    <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>
相关推荐
JosieBook41 分钟前
【SpringBoot】21-Spring Boot中Web页面抽取公共页面的完整实践
前端·spring boot·python
吃饭睡觉打豆豆嘛1 小时前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript
前端端2 小时前
claude code 原理分析
前端
GalaxyMeteor2 小时前
Elpis 开发框架搭建第二期 - Webpack5 实现工程化建设
前端
Spider_Man2 小时前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试
我的写法有点潮2 小时前
最全Scss语法,赶紧收藏起来吧
前端·css
小高0072 小时前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
Mo_jon2 小时前
css 遮盖滚动条,鼠标移上显示
前端·css
EveryPossible2 小时前
终止异步操作
前端·javascript·vue.js
Stringzhua2 小时前
setup函数相关【3】
前端·javascript·vue.js