腳本之家服務器常用軟件

快捷導航

Element-Plus之el-col與el-row快速布局

更新時間：2022年09月16日 11:00:39 作者：白瑕

el-col是el-row的子元素,下面這篇文章主要給大家介紹了關于Element-Plus之el-col與el-row快速布局的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

前言

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

一、el-col

本來打算先說row的… 寫完看了一遍感覺還是換過來的好(捂臉).

el-col是el-row的子元素.

在el-row添加

style="flex-direction: column;"

可以實現(xiàn)縱向排列el-col, 在需要縱向布局時可以使用, 橫向col現(xiàn)在填滿默認自動換行, 不需要特別規(guī)定;

span

規(guī)定一個col占據(jù)24份中的多少份.

倒也不是必加的屬性…

當el-row中僅有一個el-col時, 該el-col默認占據(jù)全部的24份, 填滿el-row.

但是如果多個el-col情況下不加, 效果會比較糟糕, 第一個el-col依舊占據(jù)第一行的全部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在橫向占據(jù)24分之幾個el-row".

比如這次span分別是8、5、8, 那么剩下3份空間沒用上, 也就是右邊的灰色部分, 暴露出el-row的顏色.

push & pull

pull和push控制col的橫向位移, 以份為單位最大值24超出無效.

push和pull不會影響“橫向被分為24份”這個規(guī)則, 比如第一個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沒有發(fā)生尺寸上的變化.

響應式

提供一個專門的屬性, 讓使用者規(guī)定在該屬性對應的分辨率下, col要怎樣進行排列.

響應式屬性(xs, lg等)接受傳入對象類型和數(shù)字類型;

對象類型可用于規(guī)定offset和span等屬性, 針對每個分辨率范圍定制一套合適的樣式:

屬性	說明
xs	小于768
sm	大等于768
md	大等于992
lg	大等于1200
xl	大等于1920

來寫個栗子看一下, 規(guī)定小于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>

其實寫案例的時候還發(fā)現(xiàn)了一個問題, 響應式方案里的屬性是可以繼承的, 這樣說倒也不準確…

表現(xiàn)出來就是:

設置了md的push, span后, 如果不設置lg的push, 那么lg方案會采用用md方案的push / pull, 而不是默認的pull / push為0, 這個問題會發(fā)生在各組方案之間, 只要有一組方案缺少屬性, 它就從上一組方案里拿屬性:

<!-- 這里pull無效, 所以沒寫... -->
<!-- 因為藍色塊出的問題, 所以只放個藍色塊 -->
<el-col
  :md="{ span: 16, push: 2 }"
  :lg="{ span: 8 }"
  class="blue"
>
  <div></div>
</el-col>

然后lg狀態(tài)就變成這樣了, 你可以看到藍塊左側空出來了一塊, 這就是lg方案從md偷的push:2.

這個時候再規(guī)定lg的push為0:

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

所以用響應式的時候, 規(guī)定方案要把每一項都詳細規(guī)定好, 避免從其他方案繼承到屬性, 出現(xiàn)一些奇怪的效果.

pull在響應式方案里有時會失效, 比如我們現(xiàn)在這個例子, 我給了第三個col一個lg狀態(tài)下的pull:1, 什么效果都沒有:

但是在xs方案中, pull:1生效了:

也不是因為沒有多余空間可以移動的問題, 事實是有多余空間它也無效…

沒能解決這個問題.

offset

我把這個放在最后是因為寫案例的時候出現(xiàn)了一點小狀況, 我發(fā)現(xiàn)我的offset不能生效, 是那種…怎么改都不生效.
然后一次偶然, 我把css里的:

* {
  margin: 0;
  padding: 0;
  }

刪了, 然后解決了, 就挺無語的, 可能是el組件里的樣式優(yōu)先級比較低, 被覆蓋了吧.

好吧, 那步入正題

offset規(guī)定col左側的間隔份數(shù), 它是真的能把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導致的換行, 不穩(wěn)定而且難看.

二、el-row

“row” 中文即"排, 行"的意思, el-row組件即創(chuàng)建一行.

使用后自動占據(jù)頁面橫向全部空間, 并且把橫向空間不可見的分割為24份.

在el-row添加

style="flex-direction: column;"

可以實現(xiàn)縱向排列el-col, 在需要縱向布局時可以使用, 橫向col現(xiàn)在填滿默認自動換行, 不需要特別規(guī)定;

gutter

官方給的解釋是"控制柵格間距", 我理解的是控制el-col之間的橫向間距, 其實這有點像justify-content,寫在外面控制里面.

但是我寫了一個demo來測試的時候, 發(fā)現(xiàn)它控制的似乎是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>

現(xiàn)在把gutter增加到80, 可以看到, el-col之間的距離始終是不變的:0, 但是除去最左邊的組件, 每個el-col的子元素和它們所在el-col的左邊距都增加了.

這次增加是由el-col寬度的雙向擴大和子元素向右位移共同完成的:

那么這是對于一個子元素, 如果對于多個同在一行的子元素, 全部子元素的左邊距也并不會都增加:

這些子元素更像是被看作一個整體.

justify

el-row中所有el-col的橫向對齊方式.

但這是建立在el-row橫向還有空間的前提下, 如果el-row橫向24份已經(jīng)塞得滿滿當當, 那這個屬性給什么值都不會有效果的.

屬性	可取值
justify	start / 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>

那現(xiàn)在可以看到現(xiàn)在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的縱向對齊方式, 前提是縱向還有空間, 所以規(guī)定el-col的高度應該會是不錯的選擇, 不然縱向默認填滿el-row, 這個屬性就徹底失效了.

三個可用值:

屬性	可用值
align	top / 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;
}