Element-UI（https://github.com/ElemeFE/element）是餓了么前端團(tuán)隊(duì)推出的一款基于Vue.js 2.0 的桌面端UI框架谋减，手機(jī)端有對(duì)應(yīng)框架是 Mint UI（https://github.com/ElemeFE/mint-ui）岂傲。
一麦向、npm 安裝
推薦使用 npm 的方式安裝瓢棒，它能更好地和 webpack 打包工具配合使用浴韭。
npm i element-ui -S
二、CDN
目前可以通過(guò) unpkg.com/element-ui 獲取到最新版本的資源脯宿，在頁(yè)面上引入 js 和 css 文件即可開(kāi)始使用念颈。
<link rel="stylesheet" >
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
三、引用
項(xiàng)目中 main.js 文件中引用
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
el: '#app',
render: h => h(App)
})
四连霉、組件
Basic
- Layout 布局
- 通過(guò) row 和 col 組件榴芳，并通過(guò) col 組件的 span 屬性我們就可以自由地組合布局。
Row 組件 提供 gutter 屬性來(lái)指定每一欄之間的間隔跺撼，默認(rèn)間隔為 0
通過(guò)制定 col 組件的 offset 屬性可以指定分欄偏移的欄數(shù)窟感。
將 type 屬性賦值為 'flex'，可以啟用 flex 布局歉井，并可通過(guò) justify 屬性來(lái)指定 start, center, end, space-between, space-around 其中的值來(lái)定義子元素的排版方式柿祈。
參照了 Bootstrap 的 響應(yīng)式設(shè)計(jì)，預(yù)設(shè)了五個(gè)響應(yīng)尺寸：xs酣难、sm谍夭、md、lg 和 xl憨募。
- 通過(guò) row 和 col 組件榴芳，并通過(guò) col 組件的 span 屬性我們就可以自由地組合布局。
-
-
通過(guò) row 和 col 組件紧索，并通過(guò) col 組件的
span屬性我們就可以自由地組合布局。Row 組件 提供
gutter屬性來(lái)指定每一欄之間的間隔菜谣，默認(rèn)間隔為 0通過(guò)制定 col 組件的
offset屬性可以指定分欄偏移的欄數(shù)珠漂。將
type屬性賦值為 'flex'，可以啟用 flex 布局尾膊，并可通過(guò)justify屬性來(lái)指定 start, center, end, space-between, space-around 其中的值來(lái)定義子元素的排版方式媳危。參照了 Bootstrap 的 響應(yīng)式設(shè)計(jì)，預(yù)設(shè)了五個(gè)響應(yīng)尺寸：
xs冈敛、sm待笑、md、lg和xl抓谴。
-
-
-
通過(guò) row 和 col 組件暮蹂，并通過(guò) col 組件的
span屬性我們就可以自由地組合布局。Row 組件 提供
gutter屬性來(lái)指定每一欄之間的間隔癌压，默認(rèn)間隔為 0通過(guò)制定 col 組件的
offset屬性可以指定分欄偏移的欄數(shù)仰泻。將
type屬性賦值為 'flex'，可以啟用 flex 布局滩届，并可通過(guò)justify屬性來(lái)指定 start, center, end, space-between, space-around 其中的值來(lái)定義子元素的排版方式集侯。參照了 Bootstrap 的 響應(yīng)式設(shè)計(jì)，預(yù)設(shè)了五個(gè)響應(yīng)尺寸：
xs、sm棠枉、md浓体、lg和xl。
-
-
-
通過(guò) row 和 col 組件辈讶，并通過(guò) col 組件的
span屬性我們就可以自由地組合布局汹碱。Row 組件 提供
gutter屬性來(lái)指定每一欄之間的間隔，默認(rèn)間隔為 0通過(guò)制定 col 組件的
offset屬性可以指定分欄偏移的欄數(shù)荞估。將
type屬性賦值為 'flex'咳促，可以啟用 flex 布局，并可通過(guò)justify屬性來(lái)指定 start, center, end, space-between, space-around 其中的值來(lái)定義子元素的排版方式勘伺。參照了 Bootstrap 的 響應(yīng)式設(shè)計(jì)跪腹，預(yù)設(shè)了五個(gè)響應(yīng)尺寸：
xs、sm飞醉、md冲茸、lg和xl。
-
-
-
<el-container>：外層容器缅帘。當(dāng)子元素中包含<el-header>或<el-footer>時(shí)轴术，全部子元素會(huì)垂直上下排列，否則會(huì)水平左右排列钦无。<el-header>：頂欄容器逗栽。<el-aside>：側(cè)邊欄容器。<el-main>：主要區(qū)域容器失暂。<el-footer>：底欄容器彼宠。
-
Form
-
Radio 單選框
有兩種觸發(fā)子菜單的方式：click觸發(fā)子菜單、hover觸發(fā)子菜單
| 參數(shù) | 說(shuō)明 | 類(lèi)型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| value / v-model | 綁定值 | number | — | 0 |
| max | 最大分值 | number | — | 5 |
| disabled | 是否為只讀 | boolean | — | false |
| allow-half | 是否允許半選 | boolean | — | false |
| low-threshold | 低分和中等分?jǐn)?shù)的界限值弟塞，值本身被劃分在低分中 | number | — | 2 |
| high-threshold | 高分和中等分?jǐn)?shù)的界限值凭峡，值本身被劃分在高分中 | number | — | 4 |
| colors | icon 的顏色數(shù)組，共有 3 個(gè)元素决记，為 3 個(gè)分段所對(duì)應(yīng)的顏色 | array | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
| void-color | 未選中 icon 的顏色 | string | — | #C6D1DE |
| disabled-void-color | 只讀時(shí)未選中 icon 的顏色 | string | — | #EFF2F7 |
| icon-classes | icon 的類(lèi)名數(shù)組摧冀，共有 3 個(gè)元素，為 3 個(gè)分段所對(duì)應(yīng)的類(lèi)名 | array | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
| void-icon-class | 未選中 icon 的類(lèi)名 | string | — | el-icon-star-off |
| disabled-void-icon-class | 只讀時(shí)未選中 icon 的類(lèi)名 | string | — | el-icon-star-on |
| show-text | 是否顯示輔助文字系宫，若為真索昂，則會(huì)從 texts 數(shù)組中選取當(dāng)前分?jǐn)?shù)對(duì)應(yīng)的文字內(nèi)容 | boolean | — | false |
| show-score | 是否顯示當(dāng)前分?jǐn)?shù)，show-score 和 show-text 不能同時(shí)為真 | boolean | — | false |
| text-color | 輔助文字的顏色 | string | — | #1F2D3D |
| texts | 輔助文字?jǐn)?shù)組 | array | — | ['極差', '失望', '一般', '滿(mǎn)意', '驚喜'] |
| score-template | 分?jǐn)?shù)顯示模板 | string | — | {value} |
| 事件名稱(chēng) | 說(shuō)明 | 回調(diào)參數(shù) |
|---|---|---|
| change | 分值改變時(shí)觸發(fā) | 改變后的分值 |
Data
-
參數(shù) 說(shuō)明 類(lèi)型 可選值 默認(rèn)值 percentage 百分比（必填） number 0-100 0 type 進(jìn)度條類(lèi)型 string line/circle line stroke-width 進(jìn)度條的寬度笙瑟，單位 px number — 6 text-inside 進(jìn)度條顯示文字內(nèi)置在進(jìn)度條內(nèi)（只在 type=line 時(shí)可用） boolean — false status 進(jìn)度條當(dāng)前狀態(tài) string success/exception/text — color 進(jìn)度條背景色（會(huì)覆蓋 status 狀態(tài)顏色） string — — width 環(huán)形進(jìn)度條畫(huà)布寬度（只在 type=circle 時(shí)可用） number 126 show-text 是否顯示進(jìn)度條文字內(nèi)容 boolean — true -
參數(shù) 說(shuō)明 類(lèi)型 可選值 默認(rèn)值 value 顯示值 string, number — — max 最大值楼镐，超過(guò)最大值會(huì)顯示 '{max}+'癞志，要求 value 是 Number 類(lèi)型 number — — is-dot 小圓點(diǎn) boolean — false hidden 隱藏 badge boolean — false type 類(lèi)型 string primary / success / warning / danger / info —
Notice
Navigation
-
參數(shù) 說(shuō)明 類(lèi)型 可選值 默認(rèn)值 mode 模式 string horizontal / vertical vertical collapse 是否水平折疊收起菜單（僅在 mode 為 vertical 時(shí)可用） boolean — false background-color 菜單的背景色（僅支持 hex 格式） string — #ffffff text-color 菜單的文字顏色（僅支持 hex 格式） string — #303133 active-text-color 當(dāng)前激活菜單的文字顏色（僅支持 hex 格式） string — #409EFF default-active 當(dāng)前激活菜單的 index string — — default-openeds 當(dāng)前打開(kāi)的 sub-menu 的 index 的數(shù)組 Array — — unique-opened 是否只保持一個(gè)子菜單的展開(kāi) boolean — false menu-trigger 子菜單打開(kāi)的觸發(fā)方式(只在 mode 為 horizontal 時(shí)有效) string hover / click hover router 是否使用 vue-router 的模式往枷，啟用該模式會(huì)在激活導(dǎo)航時(shí)以 index 作為 path 進(jìn)行路由跳轉(zhuǎn) boolean — false collapse-transition 是否開(kāi)啟折疊動(dòng)畫(huà) boolean — true
Others
-
參數(shù) 說(shuō)明 類(lèi)型 可選值 默認(rèn)值 timestamp 時(shí)間戳 string - — hide-timestamp 是否隱藏時(shí)間戳 boolean — false placement 時(shí)間戳位置 string top / bottom bottom type 節(jié)點(diǎn)類(lèi)型 string primary / success / warning / danger / info - color 節(jié)點(diǎn)顏色 string hsl / hsv / hex / rgb - size 節(jié)點(diǎn)尺寸 string normal / large normal icon 節(jié)點(diǎn)圖標(biāo) string — -
