ElementUI 布局Layout

最新推荐文章于 2024-05-28 15:05:16 发布

爱喝水的qdy

最新推荐文章于 2024-05-28 15:05:16 发布

阅读量4.5k

点赞数 3

分类专栏： Vue.js 文章标签： Vue ElementUI 布局 Layout

本文链接：https://blog.csdn.net/qq_32617703/article/details/103119866

版权

Vue.js 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

官方地址

https://element.eleme.io/#/zh-CN/component/layout

布局特性

总共24列
组件el-row声明行，默认渲染为div，通过tag属性来声明渲染成的标签
组件el-col声明列，默认渲染为div，通过tag属性来声明渲染成的标签
通过组件el-col中的span属性来指定列数
- :span="24"
通过组件el-row中的gutter属性来指定列之间的间隔
- :gutter: "50"，表示padding-left: 25px; padding-right: 25px;
通过组件el-col中的offset属性来指定列偏移量
- :offset="8"
通过组件el-col中的push | pull属性来指定列排序，存在覆盖现象
- :push="6"，表示往右移动6列
- :pull="6"，表示往左移动6列
通过组件el-row中的type属性来开启flex弹性布局，type="flex"
- 并且通过justify属性来指定子元素排版方式
  - justify="start | end | center | space-between | space-around"
- 以及通过align属性来指定子元素的垂直排版方式
  - align="top | bottom | middle"
通过组件el-col中的xs | sm | md | lg | xl属性进行响应式布局
- xs < 768px
- sm >= 768px
- md >= 992px
- lg >= 1200px
- xl >= 1920px
通过引入import 'element-ui/lib/theme-chalk/display.css';可在某些条件下隐藏元素
- 这些类名可以添加在任何 DOM 元素或自定义组件上
  - .hidden-xs-only 当视口在xs时隐藏
  - .hidden-sm-only 当视口在sm时隐藏
  - .hidden-md-only 当视口在md时隐藏
  - .hidden-lg-only 当视口在lg时隐藏
  - .hidden-xl-only 当视口在xl时隐藏
  - .hidden-sm-and-down 当视口在sm及以下尺寸时隐藏
  - .hidden-sm-and-up 当视口在sm及以上尺寸时隐藏
  - .hidden-md-and-down 当视口在md及以下尺寸时隐藏
  - .hidden-md-and-up 当视口在md及以上尺寸时隐藏
  - .hidden-lg-and-down 当视口在lg及以下尺寸时隐藏
  - .hidden-lg-and-up 当视口在lg及以上尺寸时隐藏

测试用的CSS代码


 .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

基础布局

通过el-row和el-col 组件，并通过el-col 组件的 span属性我们就可以自由地组合布局。

<el-row tag="section">
  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

分栏间隔(gutter)

el-ow 组件提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。

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

混合布局

通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。

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

分栏偏移

通过制定 el-col 组件的 offset 属性可以指定分栏偏移的栏数。

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

分栏排序

通过组件el-col中的push| pull属性来指定列排序，存在覆盖现象

<h1>列排序</h1>
<el-row :gutter="20">
  <el-col :span="6" :push="6"><div class="grid-content bg-purple">push 6</div></el-col>
  <el-col :span="6" :pull="6"><div class="grid-content bg-purple">pull 6</div></el-col>
</el-row>

flex布局

将type属性赋值为'flex'，可以启用flex布局，并可通过justify属性来指定start, center,end, space-between, space-around 其中的值来定义子元素的排版方式。

<el-row type="flex" class="row-bg">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="center">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="end">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-between">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-around">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

响应式布局

<h1>响应式布局</h1>
<el-row :gutter="10">
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="{span: 4, offset: 4}" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

el-row组件属性

参数	说明	类型	可选值	默认值
gutter	栅格间隔	number	—	0
type	布局模式，可选 flex，现代浏览器下有效	string	—	—
justify	flex 布局下的水平排列方式	string	start/end/center/space-around/space-between	start
align	flex 布局下的垂直排列方式	string	top/middle/bottom	top
tag	自定义元素标签	string	*	div

el-col组件属性

参数	说明	类型	可选值	默认值
span	栅格占据的列数	number	—	24
offset	栅格左侧的间隔格数	number	—	0
push	栅格向右移动格数	number	—	0
pull	栅格向左移动格数	number	—	0
xs	`<768px` 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—
sm	`≥768px` 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—
md	`≥992px` 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—
lg	`≥1200px` 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—
xl	`≥1920px` 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—
tag	自定义元素标签	string	*	div

爱喝水的qdy

关注

3
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
ElementUI 布局Layout

目录官方地址布局特性测试用的CSS代码基础布局分栏间隔(gutter)混合布局分栏偏移分栏排序flex布局响应式布局el-row组件属性el-col组件属性官方地址https://element.eleme.io/#/zh-CN/component/layout布局特性总共24列组件el-row声明行，默认渲染为div，通过tag属性来声明渲染成的标签组件el-col声明列...
复制链接

扫一扫