Element-Plus el-col、el-row快速布局

news2024/11/18 3:41:21

文章目录

  • 前言
  • 一、el-col
    • span
    • push & pull
    • 响应式
    • offset
  • 二、el-row
    • gutter
    • justify
    • align
  • 总结

前言

拖拉了一晚, 总结了一些Layout布局工具的使用方法.

一、el-col

本来打算先说row的… 写完看了一遍感觉还是换过来的好(捂脸).
el-col是el-row的子元素.

在el-row添加

style="flex-direction: column;"

可以实现纵向排列el-col, 在需要纵向布局时可以使用, 横向col现在填满默认自动换行, 不需要特别规定;

span

规定一个col占据24份中的多少份.
倒也不是必加的属性…
当el-row中仅有一个el-col时, 该el-col默认占据全部的24份, 填满el-row.
但是如果多个el-col情况下不加, 效果会比较糟糕, 第一个el-col依旧占据第一行的全部24份, 但是其他el-col会被挤到换行(倒也不会挤出el-row), 就像这样:
黄, 蓝, 绿, 分别为第一二三个el-col, 都不传span值.
在这里插入图片描述

  <el-row class="dark">
    <el-col class="yellow">
      <sy-author-1></sy-author-1>
    </el-col>
    <!-- 分隔 -->
    <el-col class="blue">
      <div></div>
    </el-col>
    <!-- 分隔 -->
    <el-col class="green" >
      <div></div>
    </el-col>
  </el-row>

* {
  transition: 1s;
}

.dark {
  background-color: rgb(137, 133, 133);
}

.yellow {
  background-color: rgb(176, 170, 80);
}

.green {
  background-color: rgb(85, 144, 135);
}

.blue {
  background-color: rgb(65, 115, 153);
}

就说正常加span的情况下, 页面使用el-row后, 横向距离被等量的分为24份, el-col的span属性决定的是"这个el-col在横向占据24分之几个el-row".
在这里插入图片描述
比如这次span分别是8、5、8, 那么剩下3份空间没用上, 也就是右边的灰色部分, 暴露出el-row的颜色.

push & pull

pull和push控制col的横向位移, 以份为单位 最大值24超出无效.
push和pull不会影响“横向被分为24份”这个规则, 比如第一个el-col被:push=“1”, 最后一个el-col被:pull=“1”, 中间的三个el-col还是可以各占8份, 只不过会有重叠的情况.

<el-row class="dark">
  <el-col :span="8" class="yellow" :push="2"> <!-- 左边push两份 -->
    <sy-author-1></sy-author-1>
  </el-col>
    <!-- 分隔 -->
  <el-col class="blue" :span="8">
    <div></div>
  </el-col>
    <!-- 分隔 -->
  <el-col class="green" :span="8" :pull="2"> <!-- 右边pull两份 -->
    <div></div>
  </el-col>
</el-row>

虽然依旧各占8份, 但是蓝盒子被左右两侧遮盖了.
在这里插入图片描述
所有el-col没有发生尺寸上的变化.

响应式

提供一个专门的属性, 让使用者规定在该属性对应的分辨率下, col要怎样进行排列.
响应式属性(xs, lg等)接受传入对象类型和数字类型;
对象类型可用于规定offset和span等属性, 针对每个分辨率范围定制一套合适的样式:

属性说明
xs小于768
sm大等于768
md大等于992
lg大等于1200
xl大等于1920

来写个栗子看一下, 规定小于768, 大于992, 大于1200时的排列:
这个例子有一些缺陷, 请读完例子下面的部分.

<el-row class="dark">
  <el-col
    :xs="{ span: 22, push: 1, pull: 1 }"
    :md="{ span: 18, push: 3 }"
    :lg="{ span: 8, push: 1 }"
    class="yellow"
  >
    <div></div>
  </el-col>
    <!-- 分隔 -->
  <el-col
    :xs="{ span: 22, pull: 1, push: 1 }"
    :md="{ span: 16, push: 2 }"
    :lg="{ span: 8, push: 0 }"
    class="blue"
  >
    <div></div>
  </el-col>
    <!-- 分隔 -->
  <el-col
    class="green"
    :xs="{ push: 1, pull: 1, span: 22 }"
    :md="{ span: 14, push: 1 }"
    :lg="{ span: 7, pull: 1, push: 0 }"
  >
    <div
    ></div>
  </el-col>
</el-row>

在这里插入图片描述

其实写案例的时候还发现了一个问题, 响应式方案里的属性是可以继承的, 这样说倒也不准确…

表现出来就是:
设置了md的push, span后, 如果不设置lg的push, 那么lg方案会采用用md方案的push / pull, 而不是默认的pull / push为0, 这个问题会发生在各组方案之间, 只要有一组方案缺少属性, 它就从上一组方案里拿属性:

<!-- 这里pull无效, 所以没写... -->
<!-- 因为蓝色块出的问题, 所以只放个蓝色块 -->
<el-col
  :md="{ span: 16, push: 2 }"
  :lg="{ span: 8 }"
  class="blue"
>
  <div></div>
</el-col>

然后lg状态就变成这样了, 你可以看到蓝块左侧空出来了一块, 这就是lg方案从md偷的push:2.
在这里插入图片描述
这个时候再规定lg的push为0:

<el-col
  :md="{ span: 16, push: 2 }"
  :lg="{ span: 8, push:0 }"
  class="blue"
>
  <div></div>
</el-col>

在这里插入图片描述
所以用响应式的时候, 规定方案要把每一项都详细规定好, 避免从其他方案继承到属性, 出现一些奇怪的效果.

pull在响应式方案里有时会失效, 比如我们现在这个例子, 我给了第三个col一个lg状态下的pull:1, 什么效果都没有:
在这里插入图片描述
但是在xs方案中, pull:1生效了:
在这里插入图片描述
也不是因为没有多余空间可以移动的问题, 事实是有多余空间它也无效…
没能解决这个问题.

offset

我把这个放在最后是因为写案例的时候出现了一点小状况, 我发现我的offset不能生效, 是那种…怎么改都不生效.
然后一次偶然, 我把css里的:

* {
  margin: 0;
  padding: 0;
  }

删了, 然后解决了, 就挺无语的, 可能是el组件里的样式优先级比较低, 被覆盖了吧.

好吧, 那步入正题
offset规定col左侧的间隔份数, 它是真的能把col给挤到下一行的

<el-row class="dark">
  <el-col
    :lg="{ span: 8, push: 0 }"
    class="yellow"
  >
    <div></div>
  </el-col>
    <!-- 分隔 -->
  <el-col
    :lg="{ span: 8, push: 0, pull: 0, offset: 9}"
    class="blue"
  >
    <div></div>
  </el-col>
    <!-- 分隔 -->
  <el-col
    class="green"
    :lg="{ span: 8, pull: 0, push: 0 }"
  >
    <div></div>
  </el-col>
</el-row>

效果:
在这里插入图片描述
不要offset来做换行, 用响应式或者在el-row添加

style="flex-direction: column;"

会更好, offset达成的换行, 左侧会有空间, 就像上面动图的蓝块就是offset导致的换行, 不稳定而且难看.

二、el-row

“row” 中文即"排, 行"的意思, el-row组件即创建一行.
使用后自动占据页面横向全部空间, 并且把横向空间不可见的分割为24份.
在el-row添加

style="flex-direction: column;"

可以实现纵向排列el-col, 在需要纵向布局时可以使用, 横向col现在填满默认自动换行, 不需要特别规定;

gutter

官方给的解释是"控制栅格间距", 我理解的是控制el-col之间的横向间距, 其实这有点像justify-content,写在外面控制里面.
但是我写了一个demo来测试的时候, 发现它控制的似乎是el-col的子元素与el-col左边框的间距, 而并非el-col之间的间距.
以下面这段代码为例, 一个el-row里装了三个el-col, 初始gutter为0.

<el-row class="dark" :gutter="0">

  <el-col :span="8" class="yellow">
    <sy-author-1></sy-author-1>
  </el-col>
    <!-- 分隔 -->
  <el-col class="blue" :span="8">
    <div></div>
  </el-col>
    <!-- 分隔 -->
  <el-col class="green" :span="8">
    <div></div>
  </el-col>

</el-row>

在这里插入图片描述

现在把gutter增加到80, 可以看到, el-col之间的距离始终是不变的:0, 但是除去最左边的组件, 每个el-col的子元素和它们所在el-col的左边距都增加了.

这次增加是由el-col宽度的双向扩大和子元素向右位移共同完成的:
在这里插入图片描述
那么这是对于一个子元素, 如果对于多个同在一行的子元素, 全部子元素的左边距也并不会都增加:
在这里插入图片描述
这些子元素更像是被看作一个整体.

justify

el-row中所有el-col的横向对齐方式.
但这是建立在el-row横向还有空间的前提下, 如果el-row横向24份已经塞得满满当当, 那这个属性给什么值都不会有效果的.

属性可取值
justifystart / end / center / space-around / space-between / space-evenly

那还是用第一段代码举例:

<el-row class="dark" justify="center"> <!-- 居中对齐 -->
  <el-col :span="8" class="yellow">
    <sy-author-1></sy-author-1>
  </el-col>
    <!-- 分隔 -->
  <el-col class="blue" :span="5"> <!-- 注意这里改成5了, 我们不能把el-row填满 -->
    <div></div>
    <span>哦哦哦</span>
  </el-col>
    <!-- 分隔 -->
  <el-col class="green" :span="8">
    <div></div>
  </el-col>
</el-row>

那现在可以看到现在el-col都挤到中央了, 其实这个挺像justify-content的.(弹性布局)
他们封装的时候是不是就拿这个直接给justify-content传值的…我猜…
在这里插入图片描述
然后space-between情况下:
在这里插入图片描述
均匀分布两侧贴边.

在el-col分多行的情况下:justify=“end”:

<el-row class="dark" justify="end">
  <el-col
    :lg="{ span: 8, push: 0 }"
    class="yellow"
  >
    <div></div>
  </el-col>
    <!-- 分隔 -->
  <el-col
    :lg="{ span: 8, push: 0, pull: 0, offset: 9}"
    class="blue"
  >
    <div></div>
  </el-col>
    <!-- 分隔 -->
  <el-col
    class="green"
    :lg="{ span: 8, pull: 0, push: 0 }"
  >
    <div></div>
  </el-col>
</el-row>

效果:
在这里插入图片描述

align

el-row中所有el-col的纵向对齐方式, 前提是纵向还有空间, 所以规定el-col的高度应该会是不错的选择, 不然纵向默认填满el-row, 这个属性就彻底失效了.
三个可用值:

属性可用值
aligntop / middle / bottom

默认是top, 这个情况下不给el-col高度, el-col也会在纵向占满el-row, 但是另外两个属性…

align="bottom"

在这里插入图片描述

align="middle"

在这里插入图片描述
多行情况:

<el-row class="dark" align="middle">
  <el-col
    :lg="{ span: 8, push: 0 }"
    class="yellow"
  >
    <div></div>
  </el-col>
    <!-- 分隔 -->
  <el-col
    :lg="{ span: 8, push: 0, pull: 0, offset: 9 }"
    class="blue"
  >
    <div></div>
  </el-col>
    <!-- 分隔 -->
  <el-col
    class="green"
    :lg="{ span: 8, pull: 0, push: 0 }"
  >
    <div></div>
  </el-col>
</el-row>

* {
  transition: 1s;
}

.dark {
  height: 500px;
  background-color: rgb(137, 133, 133);
}

.yellow {
  background-color: rgb(176, 170, 80);
  height: 100px;
}
.green {
  background-color: rgb(85, 144, 135);
  height: 100px;
}

.blue {
  background-color: rgb(65, 115, 153);
  height: 100px;
}

在这里插入图片描述

总结

约到一场15日的面试, 但是封校不得不推掉了, 很难受.

如果这篇文章帮到你, 我很荣幸.

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/409642.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

学会在Vue项目中插入高德地图JS API与地图的相关设置，看这一篇就够了~（保姆级精简教学）

学会在Vue项目中插入高德地图JS API与地图的相关设置，看这一篇就够了~（保姆级精简教学）

高德地图API官网&#xff1a;高德开放平台 | 高德地图API。由于博主是基于前端 Vue 框架进行开发的&#xff0c;所以针对地图 JavaScript API 结合 Vue 展开介绍。 目录 一、案例效果 二、开发准备 1. 注册高德开放平台账号 2. 创建应用添加 key 值 三、项目中使用地图组件…
阅读更多...
Echart地图组件的使用

Echart地图组件的使用

1、基本应用&#xff08;中国地图世界地图&#xff09; ​ echarts中想要使用地图首先需要准备地图对应的js文件&#xff0c;js文件可以到github上克隆下来&#xff0c;地址为&#xff1a; https://github.com/Luna829/incubator-echarts &#xff0c;地图的js文件存放在 map/…
阅读更多...
vue2实现可拖拽甘特图（结合element-ui的gantt图）

vue2实现可拖拽甘特图（结合element-ui的gantt图）

一、前言 接到公司需求&#xff0c;要做一个可拖拽的甘特图来实现排期需求&#xff0c;官方的插件要付费还没有中文的官方文档可以看&#xff0c;就去找了各种开源的demo来看&#xff0c;功能上都不是很齐全&#xff0c;于是总结了很多demo&#xff0c;合在一起组成了一版较为完…
阅读更多...
【前端工程化】配置package.json中scripts命令脚本，新手必学

【前端工程化】配置package.json中scripts命令脚本，新手必学

每日鸡汤&#xff1a;你总要努力追上那个曾经被赋予众望的自己吧 目录 前言 一、运行npm run 命令之后会干啥&#xff1f; 1. scripts里面写啥 2. node_modules/.bin 二进制可执行文件 二、运行插件配置 1. 运行某个npm包的命令 2. 多个命令一起运行 总结 前言 配置pac…
阅读更多...
JavaScript工具库——Lodash.js介绍安装及使用

JavaScript工具库——Lodash.js介绍安装及使用

前言&#xff1a; 本文主要介绍-JavaScript工具库——Lodash.js介绍安装及使用&#xff01; 作为初入职场、或者对 JavaScript 很多原理掌握的还不是那么透彻的时候&#xff0c;Lodash 这个工具库绝对是一把“杀手锏”&#xff0c;让我们一起来看看这把 “杀手锏” 的厉害之处。…
阅读更多...
【前端八股文】浏览器系列：性能优化——HTML、CSS、JS、渲染优化

【前端八股文】浏览器系列：性能优化——HTML、CSS、JS、渲染优化

文章目录HTMLCSSCSS加载会造成阻塞吗JavaScript渲染优化参考本系列目录&#xff1a;【前端八股文】目录总结 是以《代码随想录》八股文为主的笔记。详情参考在文末。 代码随想录的博客_CSDN博客-leecode题解,ACM题目讲解,代码随想录领域博主 性能优化&#xff0c;从以下几个方…
阅读更多...
学前端没这些工具怎么行

学前端没这些工具怎么行

目录 前端工具 1.编译软件 2.网上编辑软件 3.参考文档 4.扩展 5.学习软件 6.优秀的教育机构 7.转化工具 8.记录笔记程序 ☀️作者简介&#xff1a;大家好我是言不及行yyds &#x1f40b;个人主页&#xff1a;言不及行yyds的CSDN博客 &#x1f381;系列专栏&#xff1a;…
阅读更多...
前端vue3项目中百度地图的使用api及实例

前端vue3项目中百度地图的使用api及实例

目录 一、使用百度地图的准备工作&#xff1f; 二、百度地图的简单Demo 三、百度地图的常用api有哪些&#xff1f; 1、百度地图的类型&#xff1f; 2、百度地图控件 一、使用百度地图的准备工作&#xff1f; 1、先注册百度账号 --> 申请成为百度开发者 --> 获取服务…
阅读更多...
React--》状态管理工具—Mobx的讲解与使用

React--》状态管理工具—Mobx的讲解与使用

目录 Mobx的讲解与使用 Mobx环境配置 Mobx的基本使用 Mobx计算属性的使用 Mobx监听属性的使用 Mobx处理异步的使用 Mobx的模块化 Mobx的讲解与使用 Mobx是一个可以和React良好配合的集中状态管理工具&#xff0c;mobx和react的关系相当于vuex和vue之间的关系&#xff0…
阅读更多...
IntelliJ IDEA【前端必备插件】

IntelliJ IDEA【前端必备插件】

有志者事竟成&#xff0c;破釜沉舟百二秦关终属楚苦心人天不负&#xff0c;卧薪尝胆三千越甲可吞吴。 &#x1f4cc;博主介绍 &#x1f492;首页:水香木鱼 &#x1f6eb;专栏&#xff1a;工欲善其事必先利其器 ✍简介: 博主姓&#xff1a;陈&#xff0c;名&#xff1a;春波。…
阅读更多...
前端开发神器VS Code安装教程

前端开发神器VS Code安装教程

✅作者简介&#xff1a;CSDN一位小博主&#xff0c;正在学习前端 &#x1f4c3;个人主页&#xff1a;白月光777的CSDN博客 &#x1f4ac;个人格言&#xff1a;但行好事&#xff0c;莫问前程 安装VS CodeVS Code简介VS Code安装VS Code汉化结束语&#x1f4a1;&#x1f4a1;&…
阅读更多...
webpack热更新原理-连阿珍都看懂了

webpack热更新原理-连阿珍都看懂了

前言 在旧开发的时代&#xff0c;前端项目在开发的过程中修改代码&#xff0c;很有可能是手动切到浏览器刷新页面来看到改动效果。操作不方便且页面之前的编辑记录也都丢失&#xff0c;体验可以说为0。想象一下一个表达你努力填满了所有输入项&#xff0c;结果因为调了一下样式…
阅读更多...
vue3.0全新文档快速上手学习内容整理

vue3.0全新文档快速上手学习内容整理

目录 ## 1.Vue3简介 ## 2.Vue3带来了什么 ### 1.性能的提升 ### 2.源码的升级 ### 4.新的特性 1. Composition API&#xff08;组合API&#xff09; 2. 新的内置组件 3. 其他改变 # 一、创建Vue3.0工程 ## 1.使用 vue-cli 创建 ## 2.使用 vite 创建 # 二、常用 Com…
阅读更多...
vue3导出表格excel(支持多sheet页)，并自定义导出样式

vue3导出表格excel(支持多sheet页)，并自定义导出样式

前期准备 npm install file-saver npm install xlsx npm install xlsx-js-style 先说一说这里为什么选择用xlsx-js-style插件设置导出excel的样式。因项目需要&#xff0c;我在网上找了很多关于导出excel自定义样式的文章&#xff0c;用的最多最普遍的插件就是xlsx-style&#…
阅读更多...
unipush2.0教程

unipush2.0教程

解释一下名词 透传消息&#xff1a;无论手机app&#xff0c;是否在运行(打开了)&#xff0c;还是清了后台&#xff08;关闭&#xff09;&#xff0c;都可以收到消息 通知消息&#xff1a;只能app打开了&#xff0c;才能收到 1.开通unipush 2.点击上图的unipush2.0下面的配置&am…
阅读更多...
【VSCode】调试器debugger详细使用手册

【VSCode】调试器debugger详细使用手册

Visual Studio Code 的主要功能之一是其出色的调试支持。VS Code 的内置调试器有助于加速您的编辑、编译和调试循环。 调试器扩展 VS Code 具有对Node.js运行时的内置调试支持&#xff0c;并且可以调试 JavaScript、TypeScript 或任何其他转换为 JavaScript 的语言。 开始调…
阅读更多...
【CSS】CSS 特性 ③ ( CSS 优先级 | 权重叠加计算公式 )

【CSS】CSS 特性 ③ ( CSS 优先级 | 权重叠加计算公式 )

文章目录一、权重叠加计算公式1、后代选择器权重计算2、后代选择器权重计算二3、链接伪类选择器权重计算二、代码示例1、标签结构2、后代选择器选择案例 12、后代选择器选择案例 23、后代选择器选择案例 3一、权重叠加计算公式 在使用 多个类型的 基础选择器 进行 组合 时 , 如…
阅读更多...
【JavaScript】手撕前端面试题：手写new操作符 | 手写Object.freeze

【JavaScript】手撕前端面试题：手写new操作符 | 手写Object.freeze

&#x1f5a5;️ NodeJS专栏&#xff1a;Node.js从入门到精通 &#x1f5a5;️ 博主的前端之路&#xff08;源创征文一等奖作品&#xff09;&#xff1a;前端之行&#xff0c;任重道远&#xff08;来自大三学长的万字自述&#xff09; &#x1f5a5;️ TypeScript知识总结&…
阅读更多...
HttpServletRequest 获取参数

HttpServletRequest 获取参数

1　HttpServletRequest获取参数方法 可以使用HttpServletRequest获取客户端的请求参数&#xff0c;相关方法如下&#xff1a; String getParameter(String name)&#xff1a;通过指定名称获取参数值&#xff1b;String[] getParameterValues(String name)&#xff1a;通过指定名…
阅读更多...
new bing 申请加入候补

new bing 申请加入候补

最近Chatgpt非常的火爆&#xff0c; 微软也是把新版必应Chatgpt的测试版已经推出。1.下载安装新必应(new bing)需要下载 Edge新版本 Edge dev下载链接: Microsoft Edge 预览体验成员 (microsoftedgeinsider.com)安装插件在设置中找到扩展-> 获取Microsoft Edge扩展搜索获取 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023