vue vue-element-ui组件 <el-row> <el-col>
首先你要掌握的基础知识:
row 行概念
|
1
|
<el-row></el-row> |
col 列概念
|
1
|
<el-col></el-col> |
col组件的:span属性的布局调整,一共分为24栏:
代码示例:
1 <el-row> 2 <el-col :span="24"><div class="grid-content"></div></el-col> 3 </el-row>
效果展示:
代码示例：
1 <el-row> 2 <el-col :span="12"><div class="grid-content"></div></el-col> 3 </el-row>
效果展示:
row组件的:gutter属性来调整布局之间的宽度---分栏间隔
代码示例:
1 <el-row :gutter="20"> 2 <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> 3 <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> 4 </el-row>
效果:
Col组件的:offset属性调整方块的偏移位置（每次1格/24格）
1 <el-row :gutter="20"> 2 <el-col :span="6" :offset="6"><div class="grid-content"></div></el-col> 3 <el-col :span="6" :offset="6"><div class="grid-content"></div></el-col> 4 </el-row>
效果:
对齐方式:
row组件的type="flex"启动flex布局，再通过row组件的justify属性调整排版方式，属性值分别有:
- justify=center 居中对齐
- justify=start 左对齐
- justify=end 右对齐
- justify=space-between 空格间距在中间对齐
- justify=space-around 左右各占半格空格对齐
1 <el-row type="flex" class="row-bg" justify="center"> 2 <el-col :span="6"><div class="grid-content"></div></el-col> 3 </el-row>
效果:
响应式布局:
参考bootstrap的响应式，预设四个尺寸
- xs <768px
- sm ≥768px
- md ≥992
- lg ≥120
使用方式:
1 <el-row :gutter="10"> 2 <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col> 3 <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col> 4 <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col> 5 <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col> 6 </el-row>
练习示例:
1 <span class="field-label">方块选择:</span>
2 <!-- 选择屏幕框 -->
3 <select v-model="selected" @change="selectbj(selected)">
4 <option v-for="option in layouts" :value="option.value">
5 {{ option.name }}
6 </option>
7 </select>
data默认初始化数据:
1 selected: 0,
2 layouts: [
3 { 'name': '1x1模式', 'value': '0' },
4 { 'name': '2x1模式', 'value': '1' },
5 { 'name': '2x2模式', 'value': '2' },
6 { 'name': '3x2模式', 'value': '3' },
7 { 'name': '3x3模式', 'value': '4' },
8 { 'name': '1+5模式', 'value': '5' }
9 ],
布局代码:
<el-main v-model="selected" >
<div class="block" style="height:400px">
<!-- {{selected}} -->
<div style="height:100%;width:100%" v-if="selected==0">
<!-- 1*1布局 -->
<el-row :gutter="10" type="flex" class="grid-one-contentheight" justify="center">
<el-col :span="24"></el-col>
</el-row>
</div>
<!-- 2*1布局 -->
<div style="height:100%;width:100%" v-else-if="selected==1">
<el-row :gutter="10" type="flex" class="row-bg el-row-two" justify="space-between">
<el-col :span="12"><div class="grid-content "></div></el-col>
<el-col :span="12"><div class="grid-content "></div></el-col>
</el-row>
</div>
<!-- 2*2 -->
<div style="height:100%;width:100%" v-else-if="selected==2">
<el-row :gutter="10" type="flex" class="row-bg" justify="center">
<el-col :span="12"><div class="grid-content "></div></el-col>
<el-col :span="12"><div class="grid-content "></div></el-col>
</el-row>
<br>
<el-row :gutter="10" type="flex" class="row-bg" justify="center">
<el-col :span="12"><div class="grid-content "></div></el-col>
<el-col :span="12"><div class="grid-content "></div></el-col>
</el-row>
</div>
<!-- 3*2布局 -->
<div style="height:100%;width:100%" v-else-if="selected==3">
<el-row :gutter="10" type="flex" class="row-bg" justify="center">
<el-col :span="12"><div class="grid-content "></div></el-col>
<el-col :span="12"><div class="grid-content "></div></el-col>
<el-col :span="12"><div class="grid-content "></div></el-col>
</el-row>
<br>
<el-row :gutter="10" type="flex" class="row-bg" justify="center">
<el-col :span="12"><div class="grid-content "></div></el-col>
<el-col :span="12"><div class="grid-content "></div></el-col>
<el-col :span="12"><div class="grid-content "></div></el-col>
</el-row>
</div>
<!-- 3*3模式 -->
<div style="height:100%;width:100%" v-else-if="selected==4">
<el-row :gutter="10" type="flex" class="row-bg" justify="center">
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
</el-row>
<br>
<el-row :gutter="10" type="flex" class="row-bg" justify="center">
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
</el-row>
<br>
<el-row :gutter="10" type="flex" class="row-bg" justify="center">
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
</el-row>
</div>
<!-- 模式 -->
<div style="height:100%;width:100%" v-else>
<el-row :gutter="10" type="flex" class="row-bg" justify="start">
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
<el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
</el-row>
<br>
<el-row :gutter="10" type="flex" class="row-bg" justify="start">
<el-col :span="8">
<div class="grid-a-contentWidth"></div>
<br>
<div class="grid-a-contentWidth"></div>
</el-col>
<el-col :span="16"><div class="grid-a-content-a-Width" ></div></el-col>
</el-row>
</div>
</div>
</el-main>
样式(从里面对应取一下):
1 <style scoped>
2 .box-card{
3 width: 400px;
4 margin: 20px auto;
5 }
6 .block{
7 padding: 30px 24px;
8 color: rgb(128, 0, 128);">27, 16, 16);
9 }
10 .alert-item{
11 margin-bottom: 10px;
12 }
13 .tag-item{
14 margin-right: 15px;
15 }
16 .link-title{
17 margin-left:35px;
18 }
19 .components-container {
20 position: relative;
21 height: 100vh;
22 }
23
24 .left-container {
25 background-color: #F38181;
26 height: 100%;
27 }
28
29 .right-container {
30 background-color: #FCE38A;
31 height: 200px;
32 }
33
34 .top-container {
35 background-color: #FCE38A;
36 width: 100%;
37 height: 100%;
38 }
39
40 .bottom-container {
41 width: 100%;
42 background-color: #95E1D3;
43 height: 100%;
44 }
45
46 .left-container-twoOne {
47 color: rgb(128, 0, 128);">110, 75, 75);
48 height: 100%;
49 }
50
51 .container-onetoOne {
52 color: rgb(128, 0, 128);">47, 80, 74);
53 height: 100%;
54 width: 50%;
55 }
56
57 .container-onetoTwo {
58 color: rgb(128, 0, 128);">61, 19, 56);
59 height: 100%;
60 width: 50%;
61 }
62
63 .el-col {
64 border-radius: 4px;
65 }
66 .bg-purple-dark {
67 background: #57926b;
68 }
69 .bg-purple {
70 background: #7e2970;
71 }
72 .bg-purple-light {
73 background: #071c4d;
74 }
75 .grid-content {
76 color: rgb(128, 0, 128);">44, 143, 121);
77 border-radius: 4px;
78 min-height: 150px;
79 min-width: 100px;
80 }
81 .grid-contentB {
82 color: rgb(128, 0, 128);">64, 56, 134);
83 border-radius: 4px;
84 min-height: 150px;
85 min-width: 100px;
86 }
87 .grid-a-contentWidth {
88 color: rgb(128, 0, 128);">44, 143, 121);
89 border-radius: 4px;
90 min-height: 100px;
91 }
92 .grid-a-content-a-Width {
93 color: rgb(128, 0, 128);">44, 143, 121);
94 border-radius: 4px;
95 min-height: 220px;
96 }
97
98 .grid-one-contentheight {
99 color: rgb(128, 0, 128);">44, 143, 121);
100 border-radius: 4px;
101 min-height: 100%;
102 }
103
104 .el-row-two {
105 margin-bottom: 80px;
106 margin-top: 80px;
107
108 }
109 </style>
效果:
侵删，原文链接：https://blog.csdn.net/jack_bob/article/details/79813114
浙公网安备 33010602011771号