簡(jiǎn)介
element-ui是一個(gè)ui庫，它不依賴于vue。但是卻是當(dāng)前和vue配合做項(xiàng)目開發(fā)的一個(gè)比較好的ui框架。
Layout布局（el-row、el-col）
element-ui借用了bootstrap框架的思想，使用了柵格布局。它把單一的分欄分為24列?；镜氖褂梅绞饺缦?/p>
span屬性：表示col所要占領(lǐng)的柵格占比個(gè)數(shù)。
offset屬性：表示col相對(duì)偏移的個(gè)數(shù)。
Container布局容器
這些布局容器，一般充當(dāng)div來使用。
el-container：外層容器。當(dāng)子元素中包含 el-header 或 el-footer 時(shí)，全部子元素會(huì)垂直上下排列，否則會(huì)水平左右排列。
el-header：頂欄容器
el-footer：底部欄容器
el-aside：側(cè)邊欄容器
el-main：頁面主視圖
icons的使用
在element-ui 中，圖標(biāo)是用class就可以搞定的。
比如一個(gè)編輯的圖標(biāo)就可以如下表示：
按鈕（el-button）
按鈕是el-button來表示的
按鈕是分類的，每一種類型就對(duì)應(yīng)不同的button。
按鈕的類型type可取值：’primary’、’success’、’warning’、’info’、’danger’
plain：決定了按鈕是否使用素色系列。
round：決定了按鈕是不是圓角展示。
默認(rèn)按鈕
主要按鈕
成功按鈕
警告按鈕
默認(rèn)按鈕
默認(rèn)按鈕
級(jí)聯(lián)選擇（el-cascader）
//組件
<el-cascader< p="">
:options="options"
v-model="selectedOptions"
@change="handleChange">
//data數(shù)據(jù)
options: [{
value:'1',
label:'components',
children: [{
label:'input'
},{
label:'swiper'
}]
},{
value:'1',
label:'views'
},{
value:'1',
label:'actions'
}]
TimePicker 時(shí)間選擇器
picker-options是一個(gè)對(duì)象。
這個(gè)對(duì)象的屬性有start、step、end、selectableRange等。
當(dāng)設(shè)置selectableRange屬性時(shí)，它提供了一個(gè)時(shí)間選擇的點(diǎn)。
<el-time-select< p="">
v-model="value1"
:picker-options="{
start:'08:30',
step:'00:15',
end:'18:30'
}"
placeholder="選擇時(shí)間"
>
日期選擇器
日期選擇器的type屬性，決定選擇的類型，這個(gè)type可以是date、week、month、year。
<el-date-picker< p="">
v-model="valueDate"
type="date"
placeholder="選擇日期">
<el-date-picker< p="">
type='week'
v-model='value'
placeholder='選擇周'
>
DateTimePicker 日期時(shí)間選擇器
本質(zhì)就是把type改為datetime。
<el-date-picker< p="">
v-model="value1"
type="datetime"
placeholder="選擇日期時(shí)間">
form表單
element-ui的form表單組件：el-form
element-ui的formItem組件：el-form-item
一個(gè)簡(jiǎn)單的form表單的實(shí)現(xiàn)如下：
form表單還有驗(yàn)證：游戲出售平臺(tái)form的rules就是用來驗(yàn)證使用。
Table 表格
el-table：element-ui的表格。
el-table-column：element-ui的表格所對(duì)應(yīng)的列。
table屬性中：stripe屬性可以創(chuàng)建帶斑馬紋的表格。
table屬性中：border屬性可以創(chuàng)建帶斑馬紋的表格。
table屬性中：height屬性可實(shí)現(xiàn)固定表頭的表格。
<el-table< p="">
:data="tableData"
style="width: 100%"
height="200"
>
Carousel 走馬燈
其實(shí)就相當(dāng)于一個(gè)輪播
type屬性：可以讓輪播卡片化
interval屬性：定義輪播切換的周期
Collapse 折疊面板
折疊面板的el-collapse-item需要title屬性。
與現(xiàn)實(shí)生活一致：與現(xiàn)實(shí)生活的流程、邏輯保持一致，遵循用戶習(xí)慣的語言和概念；
在界面中一致：所有的元素和結(jié)構(gòu)需保持一致，比如：設(shè)計(jì)樣式、圖標(biāo)和文本、元素的位置等。
Navigation 導(dǎo)航
el-menu
el-menu：表示導(dǎo)航菜單的盒子。
el-submenu：表示導(dǎo)航菜單的子盒子選項(xiàng)。
el-menu-item：表示導(dǎo)航菜單的每一項(xiàng)。
其中submenu和munuitem都是用于屬性index。
處理中心
選項(xiàng)1
選項(xiàng)2
選項(xiàng)3
訂單管理
el-tabs
用戶管理
Tree 樹形控件
data屬性：代表著樹形組件的渲染。
Vue學(xué)習(xí)示例demo
在Vue的學(xué)習(xí)中，這個(gè)體系非常大，包括Vue生命周期、Vue的指令和事件、Vue的組件傳值、Vuex、Vue-router等的使用。
一個(gè)Vue學(xué)習(xí)的基礎(chǔ)示例的筆記：
github/liwudi/Vue.git
Vue學(xué)習(xí)的項(xiàng)目演練
一個(gè)基于Vue、vuex、axios、vue-router的電商項(xiàng)目模板：
github/liwudi/VueProject.git
github/liwudi/manage-platform.git
聯(lián)系客服
