ElementUI 原始碼簡析 Basic篇

row

布局元件中的父元件，用於控制子元件。很簡單的乙個布局標籤，主要通過 justify 和 align 控制子元素的對齊方式，使用 render 函式通過傳入的 tag 屬性控制生成的標籤。

在這裡推薦學習下 render 函式和 jsx 的寫法，因為之後比較複雜的元件都是通過 render函式 + jsx 的方式來寫的。

// 核心**
render(h) ` : '',
this.align !== 'top' ? `is-align-$` : '',
],style: this.style
}, this.$slots.default);
}

col

布局元件中的子元件，通過傳入的props控制佔據的列數、偏移、大小等，通過 foreach 對每個屬性進行處理，生成包含對應樣式的 classlist。

最後將 classlist 傳入 createelement 函式（h）中的第二個引數（標籤選項）中，如此，就生成了所需要的布局。

// 核心**
render (h) , this.$slots.default);
}

container

父容器元件，根據傳入的direction欄位，決定樣式是水平還是垂直。當沒有傳入direction欄位時，根據插槽中子元件是否含有 header 或 footer元件，如果含有則為垂直，否則為水平。

// 核心**
computed:  else if (this.direction === 'horizontal') 
return this.$slots && this.$slots.default
? this.$slots.default.some(vnode => )
: false;
}}

header

最簡單的元件之一，通過傳入的 height 引數定義 style 高度。

aside

最簡單的元件之一，通過傳入的 width 引數控制 style 寬度。

main

真正意義上的最簡單容器元件，包含插槽的純容器。

el-footer

最簡單的元件之一，通過傳入的 height 引數定義 style 高度。

布局容器總結

何為容器？在我的理解中，容器就是乙個限制大小的盒子。布局容器通過屬性定義 header、aside、footer 的高寬的行內樣式，接下來只需要定義 main 為 flex: 1 即可實現自適應布局。

感覺比較沒有意義的乙個元件，通過傳入的 name 來組成類似於el-icon-name格式的類，然後將這個類定義在 i 標籤內。不過大多數人都不會用這個元件，為什麼？因為連官網推薦寫法都是直接在 i 標籤內新增對應圖示的類。

button 元件是 basic 裡面唯一乙個稍微複雜一點的元件。它與其他 basic 元件的最大區別在於，通過 provide/inject 獲取了祖先元件，然後參照祖先元件的尺寸引數，將 button 元件的尺寸引數設為一致。

button 元件的尺寸由三個因素決定：

直接設定元件的 size 屬性，該因素具有最高優先順序，模擬於樣式中的行內樣式。

當 button 運用在 form 元件中，可以通過配置 form 元件的 size 屬性來決定，當沒有直接設定 button 元件的 size 屬性時，由該因素決定 button 元件的尺寸，模擬於樣式中的樣式繼承。

當前兩種因素都不存在時，由this.$element物件中的 size 屬性決定。what？this.$element什麼鬼？它是接收初始化 elementui 時傳入的尺寸引數的物件，包含兩個屬性：size 以及 zindex，方便全域性定義各種元件的尺寸。模擬於樣式中的 body 樣式繼承。

// 核心**
export default ,
elformitem: 
},// ...
computed: ).elformitemsize;
},buttonsize() ).size;
},//...
},// ...
};

可以通過 disabled 屬性設定禁用，原理是當 disabled 屬性為 false 時，將 a 標籤的 href 屬性置為 null，同時阻止阻止其向上丟擲 click 事件。

靈活運用插槽，看似該元件只有乙個插槽，實則擁有兩個插槽，乙個是匿名插槽，乙個是名為 icon 的具名插槽，通過合理的設定可以快速實現各種需求。

值得一提的是，該元件還使用了乙個通用元件開發的小技巧：通過v-bind="$attrs"進行快速屬性賦值。為什麼要這樣做？因為 a 標籤可以含有各種 html 屬性，而這些屬性我們不可能一一通過 props 接收然後賦值到 a 標籤的屬性上。

因此，我們可以通過v-bind="$attrs"無視傳入的屬性是什麼，一股腦將其賦值到 a 標籤上。這相當於，開發者可以直接像操作 a 標籤一樣操作 link 元件，大大方便了元件的使用。

通讀了 basic 系列的原始碼，可以發現，這一部分的原始碼其實相對比較簡單，但是，卻又很多的小細節點值得學習，比如：通過v-bind=$attrs定義標籤屬性、通過組合插槽方便元件使用、通過多種因素設定屬性以及各種預設設計等等。

ElementUI 原始碼簡析 Basic篇

ElementUI 原始碼簡析原始碼結構篇

Sample BSP原始碼簡析

libc hashtable 原始碼簡析

ElementUI 原始碼簡析 Basic篇

ElementUI 原始碼簡析 原始碼結構篇

Sample BSP原始碼簡析

libc hashtable 原始碼簡析

相關推薦

ElementUI 原始碼簡析原始碼結構篇