Element UI

Element-UI（https://github.com/ElemeFE/element）是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是 Mint UI（https://github.com/ElemeFE/mint-ui）。

一、npm 安装
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
npm i element-ui -S

二、CDN
目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

三、引用
项目中 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 布局
- 通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。
  
  Row 组件提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0
  
  通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。
  
  将 type 属性赋值为 'flex'，可以启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。
  
  参照了 Bootstrap 的响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。

Layout 布局
- 通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。
  
  Row 组件提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0
  
  通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。
  
  将 type 属性赋值为 'flex'，可以启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。
  
  参照了 Bootstrap 的响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。

参数	说明	类型	可选值	默认值
value / v-model	绑定值	number	—	0
max	最大分值	number	—	5
disabled	是否为只读	boolean	—	false
allow-half	是否允许半选	boolean	—	false
low-threshold	低分和中等分数的界限值，值本身被划分在低分中	number	—	2
high-threshold	高分和中等分数的界限值，值本身被划分在高分中	number	—	4
colors	icon 的颜色数组，共有 3 个元素，为 3 个分段所对应的颜色	array	—	['#F7BA2A', '#F7BA2A', '#F7BA2A']
void-color	未选中 icon 的颜色	string	—	#C6D1DE
disabled-void-color	只读时未选中 icon 的颜色	string	—	#EFF2F7
icon-classes	icon 的类名数组，共有 3 个元素，为 3 个分段所对应的类名	array	—	['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']
void-icon-class	未选中 icon 的类名	string	—	el-icon-star-off
disabled-void-icon-class	只读时未选中 icon 的类名	string	—	el-icon-star-on
show-text	是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容	boolean	—	false
show-score	是否显示当前分数，show-score 和 show-text 不能同时为真	boolean	—	false
text-color	辅助文字的颜色	string	—	#1F2D3D
texts	辅助文字数组	array	—	['极差', '失望', '一般', '满意', '惊喜']
score-template	分数显示模板	string	—	{value}

事件名称	说明	回调参数
change	分值改变时触发	改变后的分值

参数	说明	类型	可选值	默认值
percentage	百分比（必填）	number	0-100	0
type	进度条类型	string	line/circle	line
stroke-width	进度条的宽度，单位 px	number	—	6
text-inside	进度条显示文字内置在进度条内（只在 type=line 时可用）	boolean	—	false
status	进度条当前状态	string	success/exception/text	—
color	进度条背景色（会覆盖 status 状态颜色）	string	—	—
width	环形进度条画布宽度（只在 type=circle 时可用）	number		126
show-text	是否显示进度条文字内容	boolean	—	true

参数	说明	类型	可选值	默认值
value	显示值	string, number	—	—
max	最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型	number	—	—
is-dot	小圆点	boolean	—	false
hidden	隐藏 badge	boolean	—	false
type	类型	string	primary / success / warning / danger / info	—

参数	说明	类型	可选值	默认值
mode	模式	string	horizontal / vertical	vertical
collapse	是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）	boolean	—	false
background-color	菜单的背景色（仅支持 hex 格式）	string	—	#ffffff
text-color	菜单的文字颜色（仅支持 hex 格式）	string	—	#303133
active-text-color	当前激活菜单的文字颜色（仅支持 hex 格式）	string	—	#409EFF
default-active	当前激活菜单的 index	string	—	—
default-openeds	当前打开的 sub-menu 的 index 的数组	Array	—	—
unique-opened	是否只保持一个子菜单的展开	boolean	—	false
menu-trigger	子菜单打开的触发方式(只在 mode 为 horizontal 时有效)	string	hover / click	hover
router	是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转	boolean	—	false
collapse-transition	是否开启折叠动画	boolean	—	true

参数	说明	类型	可选值	默认值
timestamp	时间戳	string	-	—
hide-timestamp	是否隐藏时间戳	boolean	—	false
placement	时间戳位置	string	top / bottom	bottom
type	节点类型	string	primary / success / warning / danger / info	-
color	节点颜色	string	hsl / hsv / hex / rgb	-
size	节点尺寸	string	normal / large	normal
icon	节点图标	string	—	-