欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Element-Plus?el-col、el-row快速布局及使用方法

 更新時(shí)間：2023年07月14日 10:11:50   作者：三月  
這篇文章主要介紹了Element-Plus?el-col、el-row快速布局及使用方法,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

Element UI組件中el-col、el-row布局學(xué)習(xí)總結(jié)

一、簡(jiǎn)介

el-col：列。是Element UI布局中的核心組件，他的作用的將一行分成24個(gè)網(wǎng)格，為了方便我們?cè)诓煌脑O(shè)備上適配不同的屏幕大小。我們可以通過指定span屬性來確定一行中所占的網(wǎng)格數(shù)。

el-row：行。包裹在el-col外層，其中可以有無數(shù)個(gè)el-col。

    <el-row style="border:1px solid #333;width:300px;height:102px">
      <el-col :span="24">
        <div style="background:red;height:100px"></div>
      </el-col>
    </el-row>

在正常形態(tài)下，:span默認(rèn)為24。假如:span為12，那么就是原本列數(shù)的一半。

    <el-row style="border:1px solid #333;width:300px;height:102px">
      <el-col :span="12">
        <div style="background:red;height:100px"></div>
      </el-col>
    </el-row>

二、el-row的屬性：

:gutter  調(diào)整布局之間的寬度---分欄間隔。（也就是兩列之間的間隔距離）

原代碼：

    <el-row style="border:1px solid #333;width:300px;height:102px">
      <el-col :span="12">
        <div style="background:red;height:100px"></div>
      </el-col>
      <el-col :span="12">
        <div style="background:yellow;height:100px"></div>
      </el-col>
    </el-row>

 如果兩個(gè)div間需要間隔以示區(qū)分。就用:gutter屬性。

    <el-row :gutter="20" style="border:1px solid #333;width:300px;height:102px">
      <el-col :span="12">
        <div style="background:red;height:100px"></div>
      </el-col>
      <el-col :span="12">
        <div style="background:yellow;height:100px"></div>
      </el-col>
    </el-row>

 然而在網(wǎng)頁頁面代碼中，其代碼顯示為：

 也就是說，:gutter屬性其實(shí)是設(shè)置了div的padding屬性。

三、el-col屬性

（1）:offset  調(diào)整方塊的位置（每次1格/24格）

    <el-row :gutter="20" style="border:1px solid #333;width:300px;height:102px">
      <el-col :offset="6" :span="12">
        <div style="background:red;height:100px"></div>
      </el-col>
    </el-row>

（2） :push 向右移動(dòng)格數(shù)，值為1-24之間整數(shù)

    <el-row style="border:1px solid #333;width:300px;height:102px">
      <el-col :span="12" :push="2">
        <div style="background:red;height:100px"></div>
      </el-col>
    </el-row>

（3）:pull 向左移動(dòng)格數(shù)，值為1-24之間整數(shù)

    <el-row style="border:1px solid #333;width:300px;height:102px">
      <el-col :span="12" :pull="2">
        <div style="background:red;height:100px"></div>
      </el-col>
    </el-row>

 （4）Element UI響應(yīng)式布局

xs：<768px 響應(yīng)式柵格數(shù)或者屬性對(duì)象，超小屏，比如手機(jī)。例如：{ span: 4, offset: 8 }

sm：≥768px 響應(yīng)式柵格數(shù)或者屬性對(duì)象，小屏幕，比如平板。例如：{ span: 4, offset: 8 }

md：≥992px 響應(yīng)式柵格數(shù)或者屬性對(duì)象，中等屏幕，比如桌面顯示器。例如：{ span: 4, offset: 8 }

lg：≥1200px 響應(yīng)式柵格數(shù)或者屬性對(duì)象，大屏幕，比如大桌面顯示器。例如：{ span: 4, offset: 8 }

xl：≥1920px 響應(yīng)式柵格數(shù)或者屬性對(duì)象，超大屏幕顯示器，比如2k屏等。例如：{ span: 4, offset: 8 }

<el-col :span="20" :xl="{span:16}"></el-col>

 三、對(duì)齊方式

通過設(shè)置type="flex"，啟動(dòng)flex布局，通過justify的屬性調(diào)整排版方式。

justify都屬性值：center 居中對(duì)齊 start 左對(duì)齊 end 右對(duì)齊 space-between 空格間距在中間對(duì)齊 space-around 左右各占半格空格對(duì)齊

    <el-row type="flex" justify="center" style="border:1px solid #333;width:300px;height:102px">
      <el-col :span="12">
        <div style="background:red;height:100px"></div>
      </el-col>
    </el-row>

Element-Plus el-col、el-row快速布局及使用方法

前言

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

一、el-col

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

在el-row添加

style="flex-direction: column;"

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

span

規(guī)定一個(gè)col占據(jù)24份中的多少份.
倒也不是必加的屬性…
當(dāng)el-row中僅有一個(gè)el-col時(shí), 該el-col默認(rèn)占據(jù)全部的24份, 填滿el-row.
但是如果多個(gè)el-col情況下不加, 效果會(huì)比較糟糕, 第一個(gè)el-col依舊占據(jù)第一行的全部24份, 但是其他el-col會(huì)被擠到換行(倒也不會(huì)擠出el-row), 就像這樣:
黃, 藍(lán), 綠, 分別為第一二三個(gè)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屬性決定的是"這個(gè)el-col在橫向占據(jù)24分之幾個(gè)el-row".

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

push & pull

pull和push控制col的橫向位移, 以份為單位 最大值24超出無效.
push和pull不會(huì)影響“橫向被分為24份”這個(gè)規(guī)則, 比如第一個(gè)el-col被:push=“1”, 最后一個(gè)el-col被:pull=“1”, 中間的三個(gè)el-col還是可以各占8份, 只不過會(huì)有重疊的情況.

<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份, 但是藍(lán)盒子被左右兩側(cè)遮蓋了.

所有el-col沒有發(fā)生尺寸上的變化.

響應(yīng)式

提供一個(gè)專門的屬性, 讓使用者規(guī)定在該屬性對(duì)應(yīng)的分辨率下, col要怎樣進(jìn)行排列.
響應(yīng)式屬性(xs, lg等)接受傳入對(duì)象類型和數(shù)字類型;
對(duì)象類型可用于規(guī)定offset和span等屬性, 針對(duì)每個(gè)分辨率范圍定制一套合適的樣式:

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

來寫個(gè)栗子看一下, 規(guī)定小于768, 大于992, 大于1200時(shí)的排列:
這個(gè)例子有一些缺陷, 請(qǐng)讀完例子下面的部分.

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

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

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

<!-- 這里pull無效, 所以沒寫... -->
<!-- 因?yàn)樗{(lán)色塊出的問題, 所以只放個(gè)藍(lán)色塊 -->
<el-col
  :md="{ span: 16, push: 2 }"
  :lg="{ span: 8 }"
  class="blue"
>
  <div></div>
</el-col>

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

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

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

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

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

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

也不是因?yàn)闆]有多余空間可以移動(dòng)的問題, 事實(shí)是有多余空間它也無效…
沒能解決這個(gè)問題.

offset

我把這個(gè)放在最后是因?yàn)閷懓咐臅r(shí)候出現(xiàn)了一點(diǎn)小狀況, 我發(fā)現(xiàn)我的offset不能生效, 是那種…怎么改都不生效.
然后一次偶然, 我把css里的:

* {
  margin: 0;
  padding: 0;
  }

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

好吧, 那步入正題
offset規(guī)定col左側(cè)的間隔份數(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來做換行, 用響應(yīng)式或者在el-row添加

style="flex-direction: column;"

會(huì)更好, offset達(dá)成的換行, 左側(cè)會(huì)有空間, 就像上面動(dòng)圖的藍(lán)塊就是offset導(dǎo)致的換行, 不穩(wěn)定而且難看.

二、el-row

“row” 中文即"排, 行"的意思, el-row組件即創(chuàng)建一行.
使用后自動(dòng)占據(jù)頁面橫向全部空間, 并且把橫向空間不可見的分割為24份.
在el-row添加

style="flex-direction: column;"

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

gutter

官方給的解釋是"控制柵格間距", 我理解的是控制el-col之間的橫向間距, 其實(shí)這有點(diǎn)像justify-content,寫在外面控制里面.
但是我寫了一個(gè)demo來測(cè)試的時(shí)候, 發(fā)現(xiàn)它控制的似乎是el-col的子元素與el-col左邊框的間距, 而并非el-col之間的間距.
以下面這段代碼為例, 一個(gè)el-row里裝了三個(gè)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, 但是除去最左邊的組件, 每個(gè)el-col的子元素和它們所在el-col的左邊距都增加了.

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

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

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

justify

el-row中所有el-col的橫向?qū)R方式.
但這是建立在el-row橫向還有空間的前提下, 如果el-row橫向24份已經(jīng)塞得滿滿當(dāng)當(dāng), 那這個(gè)屬性給什么值都不會(huì)有效果的.

屬性可取值
justifystart / end / center / space-around / space-between / space-evenly

那還是用第一段代碼舉例:

<el-row class="dark" justify="center"> <!-- 居中對(duì)齊 -->
  <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都擠到中央了, 其實(shí)這個(gè)挺像justify-content的.(彈性布局)
他們封裝的時(shí)候是不是就拿這個(gè)直接給justify-content傳值的…我猜…

然后space-between情況下:

均勻分布兩側(cè)貼邊.

在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的縱向?qū)R方式, 前提是縱向還有空間, 所以規(guī)定el-col的高度應(yīng)該會(huì)是不錯(cuò)的選擇, 不然縱向默認(rèn)填滿el-row, 這個(gè)屬性就徹底失效了.
三個(gè)可用值:

屬性可用值
aligntop / middle / bottom

默認(rèn)是top, 這個(gè)情況下不給el-col高度, el-col也會(huì)在縱向占滿el-row, 但是另外兩個(gè)屬性…

align="bottom"

align="middle"
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;
}

在這里插入圖片描述

總結(jié)

約到一場(chǎng)15日的面試, 但是封校不得不推掉了, 很難受.

到此這篇關(guān)于Element-Plus el-col、el-row快速布局及使用方法的文章就介紹到這了,更多相關(guān)Element-Plus el-col、el-row布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • VUE+Element UI實(shí)現(xiàn)簡(jiǎn)單的表格行內(nèi)編輯效果的示例的代碼

    VUE+Element UI實(shí)現(xiàn)簡(jiǎn)單的表格行內(nèi)編輯效果的示例的代碼

    這篇文章主要介紹了VUE+Element UI實(shí)現(xiàn)簡(jiǎn)單的表格行內(nèi)編輯效果的示例的代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-10-10
  • Vue實(shí)現(xiàn)自定義字段導(dǎo)出EXCEL的示例代碼

    Vue實(shí)現(xiàn)自定義字段導(dǎo)出EXCEL的示例代碼

    這篇文章主要介紹了Vue實(shí)現(xiàn)自定義字段導(dǎo)出EXCEL的示例代碼,代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2022-08-08
  • VUE插件vue-treeselect的使用及說明

    VUE插件vue-treeselect的使用及說明

    這篇文章主要介紹了VUE插件vue-treeselect的使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。
    2023-07-07
  • Vue + Node.js + MongoDB圖片上傳組件實(shí)現(xiàn)圖片預(yù)覽和刪除功能詳解

    Vue + Node.js + MongoDB圖片上傳組件實(shí)現(xiàn)圖片預(yù)覽和刪除功能詳解

    這篇文章主要介紹了Vue + Node.js + MongoDB圖片上傳組件實(shí)現(xiàn)圖片預(yù)覽和刪除功能,結(jié)合實(shí)例形式詳細(xì)分析了Vue + Node.js + MongoDB基于圖片上傳組件實(shí)現(xiàn)圖片預(yù)覽和刪除功能相關(guān)操作技巧,需要的朋友可以參考下
    2020-04-04
  • vue.js input框之間賦值方法

    vue.js input框之間賦值方法

    今天小編就為大家分享一篇vue.js input框之間賦值方法具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • vue + typescript + video.js實(shí)現(xiàn) 流媒體播放 視頻監(jiān)控功能

    vue + typescript + video.js實(shí)現(xiàn) 流媒體播放 視頻監(jiān)控功能

    視頻才用流媒體，有后臺(tái)實(shí)時(shí)返回?cái)?shù)據(jù)， 要支持flash播放， 所以需安裝對(duì)應(yīng)的flash插件。這篇文章主要介紹了vue + typescript + video.js 流媒體播放 視頻監(jiān)控,需要的朋友可以參考下
    2019-07-07
  • vue實(shí)現(xiàn)瀏覽器桌面通知的示例代碼

    vue實(shí)現(xiàn)瀏覽器桌面通知的示例代碼

    本文主要介紹了vue實(shí)現(xiàn)瀏覽器桌面通知的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-01-01
  • vue打包后顯示空白正確處理方法

    vue打包后顯示空白正確處理方法

    很多朋友遇到這樣的問題當(dāng)vue打包后顯示空白問題，遇到這樣的問題怎么處理呢？下面腳本之家小編給大家分享下vue打包后顯示空白正確處理方法，感興趣的朋友一起看看吧
    2017-11-11
  • vue使用axios上傳文件(FormData)的方法

    vue使用axios上傳文件(FormData)的方法

    這篇文章主要介紹了vue使用axios上傳文件(FormData)的方法,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • Vue項(xiàng)目在IE瀏覽器頁面白屏且報(bào)錯(cuò)SCRIPT1010:缺少標(biāo)識(shí)符問題

    Vue項(xiàng)目在IE瀏覽器頁面白屏且報(bào)錯(cuò)SCRIPT1010:缺少標(biāo)識(shí)符問題

    Vue項(xiàng)目在谷歌瀏覽器中正常運(yùn)行,但在IE瀏覽器中出現(xiàn)問題,如白屏和控制臺(tái)報(bào)錯(cuò),解決過程包括檢查IE設(shè)置、調(diào)整編輯器配置、引入兼容性插件、使用productionSourceMap定位錯(cuò)誤、檢查插件依賴和版本,以及重新構(gòu)建項(xiàng)目
    2024-09-09

最新評(píng)論