devbox
码创造者
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue vue-element-ui组件 layout布局系列学习

作者：码创造者 | 2024-08-10 16:54:47

赞

踩

vue vue-element-ui组件 layout布局系列学习

vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]-腾讯云开发者社区-腾讯云

css 栅格布局el-row（xs，sm，md，lg，xl）_el-row布局-CSDN博客

layout布局系列学习

row 行概念

<el-row></el-row>

复制

col 列概念

<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>

复制

效果展示:

vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]

vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]

代码示例：

  1. <el-row>
  2.   <el-col :span="12"><div class="grid-content"></div></el-col>
  3. </el-row>

复制

效果展示:

vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]

vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]

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>

复制

效果:

vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]

vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]

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>

复制

效果:

vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]

vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]

对齐方式:

row组件的type="flex"启动flex布局，再通过row组件的justify属性调整排版方式，属性值分别有:

  1. justify=center 居中对齐
  2. justify=start 左对齐
  3. justify=end 右对齐
  4. justify=space-between 空格间距在中间对齐
  5. 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>

复制

效果:

vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]

vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]

响应式布局:

参考bootstrap的响应式，预设四个尺寸

  1. xs <768px
  2. sm ≥768px
  3. md ≥992
  4. 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.                 {
  6.   
  7.   { option.name }}
  8.             </option>
  9.           </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.       ],

复制

布局代码:

  1.     <el-main v-model="selected" >
  2.       <div class="block" style="height:400px">
  3.             <!-- {
  4.   
  5.   {selected}} -->
  6.             <div style="height:100%;width:100%" v-if="selected==0">
  7.             <!-- 1*1布局 -->
  8.                 <el-row :gutter="10" type="flex" class="grid-one-contentheight" justify="center">
  9.                   <el-col :span="24"></el-col>
  10.                 </el-row>
  11.             </div>
  12.             <!-- 2*1布局 -->
  13.             <div style="height:100%;width:100%" v-else-if="selected==1">
  14.                 <el-row :gutter="10" type="flex" class="row-bg el-row-two" justify="space-between">
  15.                   <el-col :span="12"><div class="grid-content "></div></el-col>
  16.                   <el-col :span="12"><div class="grid-content "></div></el-col>
  17.                 </el-row>
  18.             </div>
  19.             <!-- 2*2 -->
  20.             <div style="height:100%;width:100%" v-else-if="selected==2">
  21.               <el-row :gutter="10" type="flex" class="row-bg" justify="center">
  22.                   <el-col :span="12"><div class="grid-content "></div></el-col>
  23.                   <el-col :span="12"><div class="grid-content "></div></el-col>
  24.                 </el-row>
  25.                 <br>
  26.                 <el-row :gutter="10" type="flex" class="row-bg" justify="center">
  27.                   <el-col :span="12"><div class="grid-content "></div></el-col>
  28.                   <el-col :span="12"><div class="grid-content "></div></el-col>
  29.                 </el-row>
  30.             </div>
  31.             <!-- 3*2布局 -->
  32.             <div style="height:100%;width:100%" v-else-if="selected==3">
  33.               <el-row :gutter="10" type="flex" class="row-bg" justify="center">
  34.                   <el-col :span="12"><div class="grid-content "></div></el-col>
  35.                   <el-col :span="12"><div class="grid-content "></div></el-col>
  36.                   <el-col :span="12"><div class="grid-content "></div></el-col>
  37.                 </el-row>
  38.                 <br>
  39.                 <el-row :gutter="10" type="flex" class="row-bg" justify="center">
  40.                   <el-col :span="12"><div class="grid-content "></div></el-col>
  41.                   <el-col :span="12"><div class="grid-content "></div></el-col>
  42.                   <el-col :span="12"><div class="grid-content "></div></el-col>
  43.                 </el-row>
  44.             </div>
  45.             <!-- 3*3模式 -->
  46.             <div style="height:100%;width:100%" v-else-if="selected==4">
  47.                 <el-row :gutter="10" type="flex" class="row-bg" justify="center">
  48.                   <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
  49.                   <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
  50.                   <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
  51.                 </el-row>
  52.                 <br>
  53.                 <el-row :gutter="10" type="flex" class="row-bg" justify="center">
  54.                   <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
  55.                   <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
  56.                   <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
  57.                 </el-row>
  58.                 <br>
  59.                 <el-row :gutter="10" type="flex" class="row-bg" justify="center">
  60.                   <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
  61.                   <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
  62.                   <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
  63.                 </el-row>
  64.             </div>
  65.             <!-- 模式 -->
  66.             <div style="height:100%;width:100%" v-else>
  67.                <el-row :gutter="10" type="flex" class="row-bg" justify="start">
  68.                   <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
  69.                   <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
  70.                   <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
  71.                 </el-row>
  72.                 <br>
  73.                 <el-row :gutter="10" type="flex" class="row-bg" justify="start">
  74.                     <el-col :span="8">
  75.                       <div class="grid-a-contentWidth"></div>
  76.                       <br>
  77.                       <div class="grid-a-contentWidth"></div>
  78.                       </el-col>
  79.                     <el-col :span="16"><div class="grid-a-content-a-Width" ></div></el-col>
  80.                 </el-row>  
  81.             </div>
  82.           </div>
  83.     </el-main>

复制

样式(从里面对应取一下):

  1. <style scoped>
  2.   .box-card{
  3.     width: 400px;
  4.     margin: 20px auto;
  5.   }
  6.   .block{
  7.     padding: 30px 24px;
  8.     background-color: rgb(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. 		background-color: rgb(110, 75, 75);
  48.     height: 100%;
  49.   }
  50.  
  51.   .container-onetoOne {
  52.       background-color: rgb(47, 80, 74);
  53.       height: 100%;
  54.       width: 50%;
  55.   }
  56.  
  57.   .container-onetoTwo {
  58.       background-color: rgb(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.     background-color: rgb(44, 143, 121);
  77.     border-radius: 4px;
  78.     min-height: 150px;
  79.     min-width: 100px;
  80.   }
  81.   .grid-contentB {
  82.     background-color: rgb(64, 56, 134);
  83.     border-radius: 4px;
  84.     min-height: 150px;
  85.     min-width: 100px;
  86.   }
  87.   .grid-a-contentWidth {    
  88.     background-color: rgb(44, 143, 121);
  89.     border-radius: 4px;
  90.     min-height: 100px;
  91.   }
  92.   .grid-a-content-a-Width {    
  93.     background-color: rgb(44, 143, 121);
  94.     border-radius: 4px;
  95.     min-height: 220px;
  96.   }
  97.  
  98.   .grid-one-contentheight {    
  99.     background-color: rgb(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>

复制

效果:

vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]

css 栅格布局el-row（xs，sm，md，lg，xl）

qq_46302247

已于 2023-03-09 15:22:06 修改

阅读量1.7k
 收藏 5

点赞数
分类专栏： css 文章标签： css 前端 javascript
版权

css
专栏收录该内容
5 篇文章1 订阅
订阅专栏


:xs="12" , 24/12=2 , 所以当屏幕尺寸<768px时(手机)，每行展示2个div(class="com_item");

:sm="8" , 24/8=3 , 所以当屏幕尺寸>=768px时(平板)，每行展示3个div(class="com_item");

:md="6" , 24/6=4 , 所以当屏幕尺寸>=992px时(桌面显示器)，每行展示4个div(class="com_item");

:lg="4" , 24/4=6 , 所以当屏幕尺寸>=1200px时(大桌面显示器)，每行展示6个div(class="com_item");

:xl="4" , 24/4=6 , 所以当屏幕尺寸>=1920px时(2k屏)，每行展示6个div(class="com_item");
1
2
3
4
5
6
7
8
9
<div>
  <el-row :gutter="10">
    <el-col
      v-for="(item, index) in list"
      :key="index"
      :xs="12"
      :sm="8"
      :md="6"
      :lg="4"
      :xl="4"
      style="margin-bottom: 20px;"
    >
      <div class="com_item":item="item" />
    </el-col>
  </el-row>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.com_item {
    width: 100%;
    height: 220px;
    background: #bfa;
}
1
2
3
4
5
实现效果：

————————————————
版权声明：本文为CSDN博主「qq_46302247」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_46302247/article/details/128248001

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/码创造者/article/detail/959452
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号