簡介

　　element-ui是一個ui庫,，它不依賴于vue,。但是卻是當(dāng)前和vue配合做項目開發(fā)的一個比較好的ui框架。

　　Layout布局（el-row,、el-col）

　　element-ui借用了bootstrap框架的思想,，使用了柵格布局,。它把單一的分欄分為24列,。基本的使用方式如下

　　span屬性：表示col所要占領(lǐng)的柵格占比個數(shù),。

　　offset屬性：表示col相對偏移的個數(shù),。

　　Container布局容器

　　這些布局容器，一般充當(dāng)div來使用,。

　　el-container：外層容器,。當(dāng)子元素中包含 el-header 或 el-footer 時，全部子元素會垂直上下排列,，否則會水平左右排列,。

　　el-header：頂欄容器

　　el-footer：底部欄容器

　　el-aside：側(cè)邊欄容器

　　el-main：頁面主視圖

　　icons的使用

　　在element-ui 中，圖標是用class就可以搞定的,。

　　比如一個編輯的圖標就可以如下表示：

　　按鈕（el-button）

　　按鈕是el-button來表示的

　　按鈕是分類的,，每一種類型就對應(yīng)不同的button。

　　按鈕的類型type可取值：’primary’,、’success’,、’warning’、’info’,、’danger’

　　plain：決定了按鈕是否使用素色系列,。

　　round：決定了按鈕是不是圓角展示。

各種button

　　默認按鈕

　　主要按鈕

　　成功按鈕

　　警告按鈕

　　默認按鈕

　　默認按鈕

　　級聯(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 時間選擇器

　　picker-options是一個對象,。

　　這個對象的屬性有start,、step、end,、selectableRange等,。

　　當(dāng)設(shè)置selectableRange屬性時，它提供了一個時間選擇的點,。

　　<el-time-select< p="">

　　v-model="value1"

　　:picker-options="{

　　start:'08:30',

　　step:'00:15',

　　end:'18:30'

　　}"

　　placeholder="選擇時間"

　　>

　　日期選擇器

　　日期選擇器的type屬性,，決定選擇的類型，這個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 日期時間選擇器

　　本質(zhì)就是把type改為datetime,。

　　<el-date-picker< p="">

　　v-model="value1"

　　type="datetime"

　　placeholder="選擇日期時間">

　　form表單

　　element-ui的form表單組件：el-form

　　element-ui的formItem組件：el-form-item

　　一個簡單的form表單的實現(xiàn)如下：

　　form表單還有驗證：游戲出售平臺form的rules就是用來驗證使用,。

　　Table 表格

　　el-table：element-ui的表格。

　　el-table-column：element-ui的表格所對應(yīng)的列,。

　　table屬性中：stripe屬性可以創(chuàng)建帶斑馬紋的表格,。

　　table屬性中：border屬性可以創(chuàng)建帶斑馬紋的表格。

　　table屬性中：height屬性可實現(xiàn)固定表頭的表格,。

　　<el-table< p="">

　　:data="tableData"

　　style="width: 100%"

　　height="200"

　　>

　　Carousel 走馬燈

　　其實就相當(dāng)于一個輪播

　　type屬性：可以讓輪播卡片化

　　interval屬性：定義輪播切換的周期

{{ item }}

　　Collapse 折疊面板

　　折疊面板的el-collapse-item需要title屬性,。

與現(xiàn)實生活一致：與現(xiàn)實生活的流程、邏輯保持一致,，遵循用戶習(xí)慣的語言和概念,；

在界面中一致：所有的元素和結(jié)構(gòu)需保持一致，比如：設(shè)計樣式,、圖標和文本,、元素的位置等。

　　Navigation 導(dǎo)航

　　el-menu

　　el-menu：表示導(dǎo)航菜單的盒子,。

　　el-submenu：表示導(dǎo)航菜單的子盒子選項,。

　　el-menu-item：表示導(dǎo)航菜單的每一項。

　　其中submenu和munuitem都是用于屬性index,。

　　處理中心

　　選項1

　　選項2

　　選項3

　　訂單管理

　　el-tabs

　　用戶管理

　　Tree 樹形控件

　　data屬性：代表著樹形組件的渲染,。

　　Vue學(xué)習(xí)示例demo

　　在Vue的學(xué)習(xí)中，這個體系非常大,，包括Vue生命周期,、Vue的指令和事件、Vue的組件傳值,、Vuex,、Vue-router等的使用。

　　一個Vue學(xué)習(xí)的基礎(chǔ)示例的筆記：

　　github/liwudi/Vue.git

　　Vue學(xué)習(xí)的項目演練

　　一個基于Vue,、vuex,、axios、vue-router的電商項目模板：

　　github/liwudi/VueProject.git

　　github/liwudi/manage-platform.git