elementUi——适合于Vue的UI框架
簡介
element-ui是一個ui庫，它不依賴于vue。但是卻是當前和vue配合做項目開發的一個比較好的ui框架。
Layout布局（el-row、el-col）
element-ui借用了bootstrap框架的思想，使用了柵格布局。它把單一的分欄分為24列。基本的使用方式如下
<el-row><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col></el-row>span屬性：表示col所要占領的柵格占比個數。
offset屬性：表示col相對偏移的個數。
Container布局容器
這些布局容器，一般充當div來使用。
el-container：外層容器。當子元素中包含 el-header 或 el-footer 時，全部子元素會垂直上下排列，否則會水平左右排列。
el-header：頂欄容器
el-footer：底部欄容器
el-aside：側邊欄容器
el-main：頁面主視圖
icons的使用
在element-ui 中，圖標是用class就可以搞定的。
比如一個編輯的圖標就可以如下表示：
<i class="el-icon-edit"></i>按鈕（el-button）
按鈕是el-button來表示的
按鈕是分類的，每一種類型就對應不同的button。
按鈕的類型type可取值：’primary’、’success’、’warning’、’info’、’danger’
plain：決定了按鈕是否使用素色系列。
round：決定了按鈕是不是圓角展示。
<div class="flex-box"><h2>各種button</h2><el-row class="flex1 margin-left10"><el-col :span="3"><el-button>默認按鈕</el-button></el-col><el-col :span="3"><el-button type="primary">主要按鈕</el-button></el-col><el-col :span="3"><el-button type="success">成功按鈕</el-button></el-col><el-col :span="3"><el-button type="warning">警告按鈕</el-button></el-col><el-col :span="3"><el-button plain>默認按鈕</el-button></el-col><el-col :span="3"><el-button round>默認按鈕</el-button></el-col></el-row></div>級聯選擇（el-cascader）
//組件 <el-cascader:options="options"v-model="selectedOptions"@change="handleChange"> </el-cascader> //data數據 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等。
當設置selectableRange屬性時，它提供了一個時間選擇的點。
<el-time-selectv-model="value1":picker-options="{start:'08:30',step:'00:15',end:'18:30'}"placeholder="選擇時間" ></el-time-select>日期選擇器
日期選擇器的type屬性，決定選擇的類型，這個type可以是date、week、month、year。
<el-date-pickerv-model="valueDate"type="date"placeholder="選擇日期"> </el-date-picker> <el-date-pickertype='week'v-model='value'placeholder='選擇周' > </el-date-picker>DateTimePicker 日期時間選擇器
本質就是把type改為datetime。
<el-date-pickerv-model="value1"type="datetime"placeholder="選擇日期時間"> </el-date-picker>form表單
element-ui的form表單組件：el-form
element-ui的formItem組件：el-form-item
一個簡單的form表單的實現如下：
<el-form :model=''><el-form-item label='用戶名'><el-input></el-input></el-form-item><el-form-item label='密碼'><el-input></el-input></el-form-item> </el-form>form表單還有驗證：form的rules就是用來驗證使用。
Table 表格
el-table：element-ui的表格。
el-table-column：element-ui的表格所對應的列。
table屬性中：stripe屬性可以創建帶斑馬紋的表格。
table屬性中：border屬性可以創建帶斑馬紋的表格。
table屬性中：height屬性可實現固定表頭的表格。
<el-table:data="tableData"style="width: 100%"height="200"><el-table-column fixed width="120" label="日期" prop="date"></el-table-column><el-table-column width="120" label="姓名" prop="name"></el-table-column><el-table-column width="360" label="地址" prop="address"></el-table-column></el-table>Carousel 走馬燈
其實就相當于一個輪播
type屬性：可以讓輪播卡片化
interval屬性：定義輪播切換的周期
<el-carousel height="150px"><el-carousel-item v-for="item in 4" :key="item"><h3>{{ item }}</h3></el-carousel-item> </el-carousel>Collapse 折疊面板
折疊面板的el-collapse-item需要title屬性。
<el-collapse-item title="一致性 Consistency" name="1"><div>與現實生活一致：與現實生活的流程、邏輯保持一致，遵循用戶習慣的語言和概念；</div><div>在界面中一致：所有的元素和結構需保持一致，比如：設計樣式、圖標和文本、元素的位置等。</div> </el-collapse-item>Navigation 導航
el-menu
el-menu：表示導航菜單的盒子。
el-submenu：表示導航菜單的子盒子選項。
el-menu-item：表示導航菜單的每一項。
其中submenu和munuitem都是用于屬性index。
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"><el-menu-item index="1">處理中心</el-menu-item><el-submenu index="2"><template slot="title">我的工作臺</template><el-menu-item index="2-1">選項1</el-menu-item><el-menu-item index="2-2">選項2</el-menu-item><el-menu-item index="2-3">選項3</el-menu-item></el-submenu><el-menu-item index="3">訂單管理</el-menu-item> </el-menu>el-tabs
<el-tabs v-model="activeName"><el-tab-pane label="用戶管理" name="first">用戶管理</el-tab-pane> </el-tabs>Tree 樹形控件
data屬性：代表著樹形組件的渲染。
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>Vue學習示例demo
在Vue的學習中，這個體系非常大，包括Vue生命周期、Vue的指令和事件、Vue的組件傳值、Vuex、Vue-router等的使用。
一個Vue學習的基礎示例的筆記：https://github.com/liwudi/Vue.git
Vue學習的項目演練
一個基于Vue、vuex、axios、vue-router的電商項目模板：
https://github.com/liwudi/VueProject.git
https://github.com/liwudi/manage-platform.git
總結
以上是生活随笔為你收集整理的elementUi——适合于Vue的UI框架的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java中使用Atomic*实现原子锁线
- 下一篇： 去掉fgets拷贝的回车符