vue vue-element-ui組件 layout佈局系列學習

layout佈局系列學習

row 行概念

<el-row></el-row>

col 列概念

<el-col></el-col>

col組件的:span屬性的佈局調整,一共分爲24欄:

代碼示例:

<el-row>
  <el-col :span="24"><div class="grid-content"></div></el-col>
</el-row>           

效果展示:

代碼示例：

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

效果展示:

row組件的:gutter屬性來調整佈局之間的寬度—分欄間隔

代碼示例:

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

效果:

Col組件的:offset屬性調整方塊的偏移位置（每次1格/24格）

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

效果:

對齊方式:

row組件的type="flex"啓動flex佈局，再通過row組件的justify屬性調整排版方式，屬性值分別有:

• justify=center 居中對齊
• justify=start 左對齊
• justify=end 右對齊
• justify=space-between 空格間距在中間對齊
• justify=space-around 左右各佔半格空格對齊 

 <el-row type="flex" class="row-bg" justify="center">
   <el-col :span="6"><div class="grid-content"></div></el-col>
 </el-row>

效果:

 

響應式佈局:

參考bootstrap的響應式，預設四個尺寸

• xs <768px
• sm ≥768px
• md ≥992
• lg ≥12使用方式:

使用方式

<el-row :gutter="10">
  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

練習示例:

        <span class="field-label">方塊選擇:</span>
        <!-- 選擇屏幕框 -->
          <select v-model="selected" @change="selectbj(selected)">
            <option v-for="option in layouts" :value="option.value">
                {
  
  { option.name }}
            </option>
          </select>

data默認初始化數據:

      selected: 0,
      layouts: [
        { 'name': '1x1模式', 'value': '0' },
        { 'name': '2x1模式', 'value': '1' },
        { 'name': '2x2模式', 'value': '2' },
        { 'name': '3x2模式', 'value': '3' },
        { 'name': '3x3模式', 'value': '4' },
        { 'name': '1+5模式', 'value': '5' }
      ],

佈局代碼:

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

樣式(從裏面對應取一下):

<style scoped>
  .box-card{
    width: 400px;
    margin: 20px auto;
  }
  .block{
    padding: 30px 24px;
    background-color: rgb(27, 16, 16);
  }
  .alert-item{
    margin-bottom: 10px;
  }
  .tag-item{
    margin-right: 15px;
  }
  .link-title{
    margin-left:35px;
  }
  .components-container {
		position: relative;
		height: 100vh;
	}
 
	.left-container {
		background-color: #F38181;
		height: 100%;
	}
 
	.right-container {
		background-color: #FCE38A;
		height: 200px;
	}
 
	.top-container {
		background-color: #FCE38A;
		width: 100%;
		height: 100%;
	}
 
	.bottom-container {
		width: 100%;
		background-color: #95E1D3;
		height: 100%;
	}
 
  .left-container-twoOne {
		background-color: rgb(110, 75, 75);
    height: 100%;
  }
 
  .container-onetoOne {
      background-color: rgb(47, 80, 74);
      height: 100%;
      width: 50%;
  }
 
  .container-onetoTwo {
      background-color: rgb(61, 19, 56);
      height: 100%;
      width: 50%;
  }
 
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #57926b;
  }
  .bg-purple {
    background: #7e2970;
  }
  .bg-purple-light {
    background: #071c4d;
  }
  .grid-content {
    background-color: rgb(44, 143, 121);
    border-radius: 4px;
    min-height: 150px;
    min-width: 100px;
  }
  .grid-contentB {
    background-color: rgb(64, 56, 134);
    border-radius: 4px;
    min-height: 150px;
    min-width: 100px;
  }
  .grid-a-contentWidth {    
    background-color: rgb(44, 143, 121);
    border-radius: 4px;
    min-height: 100px;
  }
  .grid-a-content-a-Width {    
    background-color: rgb(44, 143, 121);
    border-radius: 4px;
    min-height: 220px;
  }
 
  .grid-one-contentheight {    
    background-color: rgb(44, 143, 121);
    border-radius: 4px;
    min-height: 100%;
  }
 
.el-row-two {
    margin-bottom: 80px;
    margin-top: 80px;
  
  }
</style>

效果:

css 柵格佈局el-row（xs，sm，md，lg，xl）

: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");

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

.com_item {
	width: 100%;
	height: 220px;
	background: #bfa;
}

實現效果：