Element-ui?Layout布局(Row和Col組件)的實現(xiàn)
我們在實際開發(fā)中遇到一些布局的時候會用到Layout布局，這個布局只要配置一些參數(shù)就能夠達到很好的布局效果甚至可以響應式，那里面的具體是怎么實現(xiàn)的呢，讓我們?nèi)テ书_Element-UI的源碼，學習里面的一些細節(jié)吧。
基本說明以及用法
Element-UI的Layout布局是通過基礎的24分欄，迅速簡便地創(chuàng)建布局。根據(jù)不同的組合，很快的就能夠生成一個很美觀的響應式布局。具體的用法如下：
<el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> </el-row>
由上述的示例代碼可以看出Row組件主要是創(chuàng)建每行分欄的布局方式，比如之間的一些間隔、對齊方式等。而Col則創(chuàng)建每個分欄，分欄的長度、偏移量等。我們可以進行自由組合每個分欄，從而達到一種響應式效果。
Row組件的分析
render函數(shù)
我們都知道vue除了可以使用template模板編寫組件外，有時候我們還可以直接使用render函數(shù)去編寫一個組件。因為template模板最終也是編譯成了render函數(shù)。
為什么會有render函數(shù)的寫法？比如現(xiàn)在有個需求：根據(jù)動態(tài)的level生成從h1-h6字體大小的標題的時候，我們?nèi)绻褂胻emplate去實現(xiàn)的話我們頁面中可能會出現(xiàn)很多類似這樣的偽代碼：
<template>
<h1 v-if="level === 1">
<slot></slot>
</h1>
<h2 v-else-if="level === 2">
<slot></slot>
</h2>
<h3 v-else-if="level === 3">
<slot></slot>
</h3>
<h4 v-else-if="level === 4">
<slot></slot>
</h4>
<h5 v-else-if="level === 5">
<slot></slot>
</h5>
<h6 v-else-if="level === 6">
<slot></slot>
</h6>
</template>
但是如果是使用render函數(shù)則是比較簡單：
Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level, // 標簽名稱
this.$slots.default // 子節(jié)點數(shù)組
)
},
props: {
level: {
type: Number,
required: true
}
}
})
這里還有一個代碼優(yōu)化點是。this.$slots.default存儲的就是插槽內(nèi)容，不需要寫那么多遍。
源碼分析
Row組件的源碼比較簡單，因為我們可以通過tag這個prop對其指定一個渲染標簽,所以組件是直接使用render渲染函數(shù)進行編寫。 render函數(shù)部分如下：
render(h) {
return h(this.tag, {
class: [
'el-row',
this.justify !== 'start' ? `is-justify-${this.justify}` : '',
this.align !== 'top' ? `is-align-${this.align}` : '',
{ 'el-row--flex': this.type === 'flex' }
],
style: this.style
}, this.$slots.default);
}
如上的源碼可以得出Row主要是控制class名來進行控制內(nèi)容布局的。這里有gutter屬性能夠控制行內(nèi)列的間隔數(shù)。如果說我們設置為gutter=20,那么每個列項都進行左右間距10px，那么就會出現(xiàn)個問題：第一個列項跟最后一個列項會出現(xiàn)左右的間距。那該如何讓第一個跟最后一個左右間隔去掉這個10px呢？Row的處理方案是這個行左右各偏-10px,所以用了一個計算屬性來設置樣式：
computed: {
style() {
const ret = {};
if (this.gutter) {
ret.marginLeft = `-${this.gutter / 2}px`;
ret.marginRight = ret.marginLeft;
}
return ret;
}
},
Col組件的分析
組件分析
Col主要是為了設置每一列的長度以及偏移量。主要的屬性是span、offset；同樣這個組件也是采用render函數(shù)去編寫，首先我們看如何通過span、offset去控制列的，源碼如下：
render(h) {
let classList = [];
let style = {};
...
['span', 'offset', 'pull', 'push'].forEach(prop => {
if (this[prop] || this[prop] === 0) {
classList.push(
prop !== 'span'
? `el-col-${prop}-${this[prop]}`
: `el-col-${this[prop]}`
);
}
});
...
return h(this.tag, {
class: ['el-col', classList],
style
}, this.$slots.default);
}
從這可以看出，col的列寬是通過不同class名去做控制的。我們找到對應的.scss文件，發(fā)現(xiàn)他使用了sass@for循環(huán)語句去計算不同格子的寬度：
@for $i from 0 through 24 {
.el-col-#{$i} {
width: (1 / 24 * $i * 100) * 1%;
}
.el-col-offset-#{$i} {
margin-left: (1 / 24 * $i * 100) * 1%;
}
.el-col-pull-#{$i} {
position: relative;
right: (1 / 24 * $i * 100) * 1%;
}
.el-col-push-#{$i} {
position: relative;
left: (1 / 24 * $i * 100) * 1%;
}
}
同理offset也是使用相同的邏輯。這樣我們就可以根據(jù)不同的span、跟offset混合組合不同風布局了，是不是感覺背后的邏輯是如此的簡單呢。我們再思考一個問題就是如果我們要控制一組相同的列寬間隔，需要一個個的去做設置么？答案是不用的，我們可以借助上述的Row組件中的gutter屬性去做統(tǒng)一設置。那怎么實現(xiàn)的呢？源碼如下：
computed: {
gutter() {
let parent = this.$parent;
while (parent && parent.$options.componentName !== 'ElRow') {
parent = parent.$parent;
}
return parent ? parent.gutter : 0;
}
}
我們通過往上遍歷父組件，如果父組件的組件名為ElRow,則取到gutter值，然后讓組件左右內(nèi)邊距設置對應的值就好了:
if (this.gutter) {
style.paddingLeft = this.gutter / 2 + 'px';
style.paddingRight = style.paddingLeft;
}
這樣我們就解決了統(tǒng)一列寬設置的問題；
響應式布局
這里我們用到了css3中的媒體查詢來進行響應式布局，相應尺寸分別是xs、sm、md、lg 和 xl。使用代碼如下：
<el-row :gutter="10"> <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col> <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col> <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col> <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col> </el-row>
說明：xs:<768px 響應式柵格數(shù)或者柵格屬性對象,sm:≥768px 響應式柵格數(shù)或者柵格屬性對象,md:≥992px 響應式柵格數(shù)或者柵格屬性對象,lg:≥1200px 響應式柵格數(shù)或者柵格屬性對象,xl:≥1920px 響應式柵格數(shù)或者柵格屬性對象.
背后的邏輯就是不同屏幕尺寸所展示的格子數(shù)是不一樣的，而且是根據(jù)屏幕寬度進行響應式。首先，我們看是如何進行不同的class綁定的：
['xs', 'sm', 'md', 'lg', 'xl'].forEach(size => {
if (typeof this[size] === 'number') {
classList.push(`el-col-${size}-${this[size]}`);
} else if (typeof this[size] === 'object') {
let props = this[size];
Object.keys(props).forEach(prop => {
classList.push(
prop !== 'span'
? `el-col-${size}-${prop}-${props[prop]}`
: `el-col-${size}-${props[prop]}`
);
});
}
});
這里面xs等屬性也是可以使用對象。所以會有個處理對象的邏輯；以上的js處理的邏輯比較簡單，我們再看一下css是怎么處理這個媒體查詢的邏輯的。
在分析css的時候，我們先了解一個概念，那就是sass中的內(nèi)置方法map-get。map-get($map,$key)函數(shù)的作用就是可以通過$key取到對應的value值，可以理解為就是一個映射關系。如果不存在則不會編譯對應的css。舉個??：
$social-colors: (
dribble: #ea4c89,
facebook: #3b5998,
github: #171515,
google: #db4437,
twitter: #55acee
);
.btn-dribble{
color: map-get($social-colors,facebook);
}
// 編譯后
.btn-dribble {
color: #3b5998;
}
第二個是sass內(nèi)置方法inspect(value),這個方法就是一個返回一個字符串的表示形式，value是一個sass表達式。舉個??：
$--sm: 768px !default;
$--md: 992px !default;
$--lg: 1200px !default;
$--xl: 1920px !default;
$--breakpoints: (
'xs' : (max-width: $--sm - 1),
'sm' : (min-width: $--sm),
'md' : (min-width: $--md),
'lg' : (min-width: $--lg),
'xl' : (min-width: $--xl)
);
@mixin res($breakpoint){
$query:map-get($--breakpoints,$breakpoint)
@if not $query {
@error 'No value found for `#{$breakpoint}`. Please make sure it is
defined in `$breakpoints` map.';
}
@media #{inspect($query)}
{
@content;
}
}
.element {
color: #000;
@include res(sm) {
color: #333;
}
}
// 編譯后的css
.element {
color: #000;
}
@media (min-width: 768px) {
.element {
color: #333;
}
}
好了，我相信聰明的你已經(jīng)很好的掌握了這兩個方法，那我們?nèi)タ匆幌耬lement是怎么去實現(xiàn)的吧。
其實上述的第二個例子已經(jīng)道出一二,我們看一下源碼：
$--sm: 768px !default;
$--md: 992px !default;
$--lg: 1200px !default;
$--xl: 1920px !default;
$--breakpoints: (
'xs' : (max-width: $--sm - 1),
'sm' : (min-width: $--sm),
'md' : (min-width: $--md),
'lg' : (min-width: $--lg),
'xl' : (min-width: $--xl)
);
/* Break-points
-------------------------- */
@mixin res($key, $map: $--breakpoints) {
// 循環(huán)斷點Map，如果存在則返回
@if map-has-key($map, $key) {
@media only screen and #{inspect(map-get($map, $key))} {
@content;
}
} @else {
@warn "Undefeined points: `#{$map}`";
}
}
@include res(xs) {
@for $i from 0 through 24 {
.el-col-xs-#{$i} {
width: (1 / 24 * $i * 100) * 1%;
}
.el-col-xs-offset-#{$i} {
margin-left: (1 / 24 * $i * 100) * 1%;
}
}
}
@include res(sm) {
...
}
@include res(md) {
...
}
@include res(lg) {
...
}
@include res(xl) {
...
}
這樣我們就會在不同的屏幕尺寸下進行不同的長度以及間隔的展示了，這樣去寫我們的媒體查詢是不是很棒呢？
到此這篇關于Element-ui Layout布局(Row和Col組件)的實現(xiàn)的文章就介紹到這了,更多相關Element Layout布局內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
計算屬性就是模板內(nèi)的表達式非常便利，但是設計它們的初衷是用于簡單運算的。這篇文章主要介紹了vue計算屬性詳解,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了vue攔截器及請求封裝代碼,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
在現(xiàn)代前端開發(fā)的世界中,Vue 3 已然成為了一個備受喜愛的框架,而 Vite 作為一個新興的構建工具,以其極高的效率和簡捷的配置方式席卷了開發(fā)者圈,本文我們將一步一步展示如何使用 Vite 構建一個 Vue 3 項目,從創(chuàng)建項目到最后的構建階段,需要的朋友可以參考下2024-07-07
這篇文章主要為大家介紹了Vue中使用Swiper簡單封裝組件示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
這篇文章主要介紹了vue路由打開一個新的窗口的方法,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
這篇文章主要給大家介紹了關于vue3使用ref獲取dom結果為'null'的原因詳析,ref是Vue3中一個非常重要的功能,它可以用來獲取DOM節(jié)點,從而實現(xiàn)對DOM節(jié)點的操作,需要的朋友可以參考下2023-07-07
前端登錄退出處理Token問題(獲取、緩存、失效處理)及代碼實現(xiàn)方法
token是一個用戶信息的表示,在登錄中將會從后端拿到token,然后用戶才可以進行往后的一系列操作,這篇文章主要給大家介紹了關于前端登錄退出處理Token問題(獲取、緩存、失效處理)及代碼實現(xiàn)的相關資料,需要的朋友可以參考下2024-01-01
在本篇文章里小編給大家分享了關于VUE中使用MUI方法和步驟，有需要的朋友們可以學習參考下。2019-02-02
這篇文章主要為大家介紹了Vue3源碼分析組件掛載初始化props與slots實例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
vue2+elementUI實現(xiàn)下拉樹形多選框效果實例
這篇文章主要給大家介紹了關于vue2+elementUI實現(xiàn)下拉樹形多選框效果的相關資料,這是最近的工作中遇到的一個需求,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07