diff --git a/.eslintignore b/.eslintignore
index f3b51f5c5f..aa95173977 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,6 +1,11 @@
 src/utils/popper.js
 src/utils/date.js
+examples/play
 *.sh
 node_modules
 lib
 coverage
+*.md
+*.scss
+*.woff
+*.ttf
diff --git a/.eslintrc b/.eslintrc
index ba8a1b1887..2a84035cf0 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -6,8 +6,11 @@
     "expect": true,
     "sinon": true
   },
-  "plugins": ['vue'],
-  "extends": 'elemefe',
+  "plugins": ["html", "json"],
+  "extends": "elemefe",
+  "rules": {
+    "no-restricted-globals": ["error", "event", "fdescribe"]
+  },
   "parserOptions": {
     "ecmaFeatures": {
       "experimentalObjectRestSpread": true,
diff --git a/.github/CONTRIBUTING.en-US.md b/.github/CONTRIBUTING.en-US.md
index e527744db9..0a8c357e64 100644
--- a/.github/CONTRIBUTING.en-US.md
+++ b/.github/CONTRIBUTING.en-US.md
@@ -8,7 +8,7 @@ We are excited that you are interested in contributing to Element. Before submit
 
 ## Issue Guidelines
 
-- Issues are exclusively for bug reports, feature requests and design-related topics. Other questions may be closed directly. If any questions come up when you are using Element, please hit [Gitter](https://gitter.im/ElemeFE/element) for help.
+- Issues are exclusively for bug reports, feature requests and design-related topics. Other questions may be closed directly. If any questions come up when you are using Element, please hit [Gitter](https://gitter.im/element-en/Lobby) for help.
 
 - Before submitting an issue, please check if similar problems have already been issued.
 
@@ -35,7 +35,7 @@ We are excited that you are interested in contributing to Element. Before submit
 - Merging a PR takes two maintainers: one approves the changes after reviewing, and then the other reviews and merges.
 
 ## Prerequisites
-`Node.js 4+` and `NPM 3+` are required.
+`Node.js 4+`, `yarn` and `npm 3+` are required. Note: we use yarn to lock dependency versions, so you should install dependencies using `yarn` instead of `npm install`.
 ```shell
 git clone git@github.com:ElemeFE/element.git
 npm run dev
@@ -43,16 +43,6 @@ npm run dev
 # open http://localhost:8085
 ```
 
-For Chinese users, [yarn](https://github.com/yarnpkg/yarn) with taobao registry is recommended if the dependency installation is slow.
-```shell
-npm i yarn -g
-yarn config set registry https://registry.npm.taobao.org
-yarn
-npm run dev
-
-# open http://localhost:8085
-```
-
 To build:
 
 ```shell
@@ -60,7 +50,7 @@ npm run dist
 ```
 
 ## Component Developing Guidelines
-- Run `make new <component-name>` to create project directory for a new component. Test codes, entry file, cooking config, documentation and `package.json` are included.
+- Run `make new <component-name>` to create project directory for a new component. Test codes, entry file and documentation are included.
 - Refer to `Button` for nested components.
 - Refer to `Select` for components that depend on other components.
 
diff --git a/.github/CONTRIBUTING.es.md b/.github/CONTRIBUTING.es.md
new file mode 100644
index 0000000000..177e0ca091
--- /dev/null
+++ b/.github/CONTRIBUTING.es.md
@@ -0,0 +1,65 @@
+# Guía para Contribuidores a `Element UI`
+
+¡Hola! Gracias por elegir [Element UI](http://element.eleme.io/#/en-US).
+
+`Element UI` es un archivo de componentes para desarrolladores y para gerentes de productos ‘web’ basado en [Vue 2.0](https://vuejs.org/)
+
+Estamos orgullosos de que usted esta interesado en contribuir al proyecto `Element`. Antes de someter sus contribuciones, por favor tome un momentito para leer estas simples guías para contribuidores.
+
+
+## Guía Para Reportar Problemas (“Issues”)
+
+- [“Issues”]( https://elementui.github.io/issue-generator) son exclusivamente para informar de errores, sugerencias o solicitaciones para funcionalidad adicional referente a diseño. Preguntas de otro tipo corren el riesgo de ser cerradas inmediatamente. Sí tiene preguntas sobre el uso de `Element`, vea [Gitter](https://gitter.im/element-en/Lobby) para más ayuda.
+
+- Antes de someter un informe sobre algún problema, sírvase de revisar  sí ya hubo un informe.
+
+- Por favor especifique que versión de `Element` y `Vue` que esta utilizando, y que versión de sistema operativo y que versión de navegador web que está utilizando. [JSFiddle](https://jsfiddle.net/) esta recomendado para crear un entorno para reproducir el problema claramente.
+
+
+## Guías para un “Pull Request (PR)”
+
+- Crea una bifurcación (“fork”) del repositorio a su propia cuenta en github.com. Por favor no crea ramas nuevas aquí.
+
+- Cuando cometa su cambio, formatea en esta forma: `[Nombre de componente]: Datos sobre el “commit”.` (por ejemplo. `Button: Reparación de xxx error`)
+
+- **DE NINGUNA MANERA** incluya archivos dentro del directorio `lib`.
+
+- Asegúrese de que el comando `npm run dist` produzca los archivos correctos.
+
+- Para asegurar compatibilidad y reducir tamaño de los archivos, nuestra configuración de `babel` solo importa `preset-2015`, así que IPAs como  Array.prototype.find` y `Object.assign` en `ES2015` no son recomendados. Puede importar “polyfills” terceros, sí es necesario.
+
+- “Rebase” antes de crear un “pull request (PR)” para mantener la historia de “commits” limpia.
+
+- Asegúrese que sus PRs se refrieran a la rama `dev`  y no a la rama  `master`.
+
+- Si su PR arregla un error técnico, por favor, haga referencia al error especifico.
+
+- Fusión de un PR requiere dos mantenedores: el primero aprueba los cambios después de revisar, y entonces el segundo mantenedor revisa los cambios y hace la fusión.
+
+
+## Requerimientos Técnicos 
+`Node.js 4+`, `yarn` y `npm 3+` son requisitos. Nota: Usamos yarn para bloquear versiones de dependencias, por lo que debería instalar dependencias usando `yarn` en lugar de `npm install`.
+.
+```shell
+git clone git@github.com:ElemeFE/element.git
+npm run dev
+
+# abra http://localhost:8085
+```
+
+Para armar:
+
+```
+shell
+npm run dist
+```
+
+## Guía Para Desarrollo de Componentes
+- Corra el comando `make new <component-name>` para crear el directorio de su proyecto para un componente nuevo. Verifique su código fuente test, archivo de entrada y documentación están incluidos.
+- Refiérase al `Button` para componentes anidados.
+- Refiérase al `Select` para componentes que dependen de otros componentes.
+
+
+## Estilo de Desarrollo
+Por favor acate a este estilo [ESLint](https://github.com/ElemeFE/eslint-config-elemefe) configuración de [ElemeFE](https://github.com/elemefe).
+
diff --git a/.github/CONTRIBUTING.zh-CN.md b/.github/CONTRIBUTING.zh-CN.md
index 79dbb3dd7c..ce07fd8ea0 100644
--- a/.github/CONTRIBUTING.zh-CN.md
+++ b/.github/CONTRIBUTING.zh-CN.md
@@ -33,7 +33,7 @@ Element UI 的成长离不开大家的支持，如果你愿意为 Element UI 贡
 - 合并代码需要两名维护人员参与：一人进行 review 后 approve，另一人再次 review，通过后即可合并。
 
 ## 开发环境搭建
-首先你需要 Node.js 4+ 和 NPM 3+
+首先你需要 Node.js 4+，yarn 和 npm 3+。注意：我们使用 yarn 进行依赖版本的锁定，所以请不要使用 `npm install` 安装依赖。
 ```shell
 git clone git@github.com:ElemeFE/element.git
 npm run dev
@@ -41,24 +41,14 @@ npm run dev
 # open http://localhost:8085
 ```
 
-如果国内用户觉得安装慢可以使用 [yarn](https://github.com/yarnpkg/yarn) 搭配 taobao registry
-```shell
-npm i yarn -g
-yarn config set registry https://registry.npm.taobao.org
-yarn
-npm run dev
-
-# open http://localhost:8085
-```
-
-To build:
+打包代码：
 
 ```shell
 npm run dist
 ```
 
 ## 组件开发规范
-- 通过 `make new` 创建组件目录结构，包含测试代码、入口文件、cooking 配置、package.json、文档
+- 通过 `make new` 创建组件目录结构，包含测试代码、入口文件、文档
 - 如果包含父子组件，需要更改目录结构，参考 `Button`
 - 组件内如果依赖了其他组件，需要在当前组件内引入，参考 `Select`
 
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
index fe1e339e6c..cc7784513c 100644
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -1,4 +1,12 @@
 <!--
+重要: 请使用以下链接创建新 issue
+
+  https://elementui.github.io/issue-generator
+
+未通过以上链接创建的 issue 会被机器人直接关闭。
+
+########
+
 IMPORTANT: Please use the following link to create a new issue:
 
   https://elementui.github.io/issue-generator
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 52754b56ae..239cdb19b0 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,5 +1,5 @@
 Please make sure these boxes are checked before submitting your PR, thank you!
 
-* [ ] Make sure you follow Element's contributing guide ([中文](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md) | [English](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.en-US.md)).
+* [ ] Make sure you follow Element's contributing guide ([中文](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md) | [English](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.en-US.md) | [Español](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.es.md)).
 * [ ] Make sure you are merging your commits to `dev` branch.
 * [ ] Add some descriptions and refer relative issues for you PR.
diff --git a/.gitignore b/.gitignore
index 7e4e70fe06..25e8964903 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,10 +6,14 @@ npm-debug.log.*
 lerna-debug.log.*
 lib
 .idea
+.vscode
 examples/element-ui
 examples/pages/en-US
 examples/pages/zh-CN
+examples/pages/es
 fe.element/element-ui
 .npmrc
 coverage
 waiter.config.js
+build/bin/algolia-key.js
+.envrc
diff --git a/.travis.yml b/.travis.yml
index bb0371783d..a3ed8239f3 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,7 +1,10 @@
 sudo: false
 language: node_js
-node_js: stable
+node_js: lts/*
 before_install:
+- export CHROME_BIN=chromium-browser
+- export DISPLAY=:99.0
+- sh -e /etc/init.d/xvfb start
 - export TRAVIS_COMMIT_MSG="[deploy] $(git log --format='%h - %B' --no-merges -n 1)"
 - export TRAVIS_COMMIT_USER="$(git log --no-merges -n 1 --format=%an)"
 - export TRAVIS_COMMIT_EMAIL="$(git log --no-merges -n 1 --format=%ae)"
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 34de284480..0bbeacc10a 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,606 +1,717 @@
 ## Changelog
 
-### 1.4.1
+### 2.4.9
+
+*2018-10-26*
+
+- The parameter of Form's  `clearValidate`  supports string, #12990 (by @codinglobster)
+- Added type attribute for Badge, #12991
+- Users can use scoped-slot to customize table column header #13012 (by @ivanseidel)
+- Fixed the input box of Select unable to type text under IE, #13034 (by @GaliMU)
+- Select option does not wrap when space is enough, #12329 (by @akki-jat)
+- When dropdown list of Select is expanded, the arrow icon will also display correctly, #12353 (by @firesh)
+- Fixed that the size attribute of Select does not work, #13070
+- Select multiple values can be cleared, #13049 (by @ZSkycat)
+- Fixed the last TabNav unable be deleted, #13039
+- Fixed that TabNav label is not displayed correctly, #13178
+- Added title slot for Alert, #13082 (by @Kingwl)
+- Fixed an issue where the tooltip content in Table was incorrect, #13159 (by @elfman)
+- Optimize the animation of Upload when file is deleted, #12987
+- Adjusted style of InputNumber when control button is not displayed, #13052
+
+### 2.4.8
+
+- Not displaying outline when Switch is focused, #12771
+- Fixed Dropdown's style in ButtonGroup, #12819 (by @bluejfox)
+- Added opened event for Dialog, #12828
+- Fixed the incorrect display order of TabNav, #12846
+- Fixed the problem that Tabs did not scroll to the selected tab, #12948
+- Fixed the problem that the identifier does not display when the Tree node is dragged, #12854
+- The validate event parameter of Form contains the validation message, #12860 (by @YamenSharaf)
+- Fixed DatePicker not to verify the validity of user input time, #12898
+- Fixed the problem that `render-header` attribute of Table header doesn't work, #12914
+
+### 2.4.7
+
+*2018-09-14*
+
+- Fixed DatePicker not triggering form validation, #12328 #12348 
+- Fixed DatePicker throwing errors in multiple mode, #12347 
+- Fixed incorrect position of DatePicker spinner, #12415 (by @rang-ali)
+- Fixed automatic filling of DatePicker input box, #12521 (by @abdallanayer)
+- Fixed Input not highlighted in Cascader, #12341
+- Fixed wrong order of Tabpane, #12346 
+- Fixed incorrect position of ColorPicker cursor, #12376 (by @cnwhy)
+- Fixed the style of Submenu, #2457
+- Fixed not highlighted after Submenu is selected, #12479
+- Fixed incorrect values selected by Cascader, #12508 (by @huangjinqiang)
+- Fixed incorrect value of Pagination input box, #12525 
+- Fixed order that Pagination triggers events, #12530
+- Fixed Table Filter not displayed, #12539
+- Fixed Tree unable to delete nodes, #12684
+- Fixed height of Select Input changing in single mode, #12719
+- Fixed style of FormItem label in nested Form, #12748
+- Added `autocomplete` attribute for Input, deprecated `auto-complete`, #12514 (by @axetroy)
+- Added slots-scope for Form to display validation information, #12715 (by @YamenSharaf)
+
+### 2.4.6
+
+*2018-08-09*
+
+- Fixed Table not showing filter icon when `filters` is assigned empty array, #12165
+- Fixed Menu not saving active state when `collapse` is changed, #12178 (by @elfman)
+- Fixed Cascader not escaping special characters for Regexp, #12248
+- Fixed disabled RadioButton showing box-shadow when clicked, #12262
+- Fixed arrow key not effect when default value is `undefined`,#12322
+- Fixed query function of Select not debounced in multi mode, #12181
+- Fixed query keyword of Select disappearing in multi mode, #12304
+- Fixed incorrect width of Dialog when it is displayed in full screen, #12203
+- Fixed incorrect display of Main on IE, #12237
+- Fixed Input triggering two form validations, #12260
+- Fixed adding new Tree node causing nodes to disappear, #12256
+- Fixed Tree node not deleted after dragging, #12279
+- Fixed Popover not visible when InputNumber focuses, #12284
+- Added `popper-append-to-body` attribute for Autocomplete, #12241
+- Added `sync` modifier support for Pagination's `page-size` attribute, #12281
+
+### 2.4.5
+
+*2018-07-26*
+
+- Fixed Table setting `class-name` does not work for `expand` column, #12006
+- Added `toggleAllSelection` method for Table, #12047
+- Fixed wrong position of suffix slot when Input contains Select, #12108 
+- Fixed `line-height` of Option unable to set, #12120
+- Fixed TimeSelect with default value of `null` could not be assigned after executing `resetField`, #12010
+- Fixed keydown event which is not arrow key does not work in Tree, #12008
+- Fixed parent node checked in lazy mode, #12106
+- Added `includeHalfChecked` parameter for getCheckedNodes of Tree, #12014
+
+### 2.4.4
+
+*2018-07-13*
+
+- Fixed triggering Select validation after Form resetting, #11837
+- Fixed wrong position of Input `suffix` slot when `suffix` slot with `append` slot, #11951
+- Fixed clearable Input still displaying the clear icon when readonly, #11967
+- Fixed Tree node checked when it's disabled, #11847
+- Fixed Tree's `default-checked-keys` not working, #11971
+- Fixed `empty-text` not visible when Tree node filtered, #11971
+- Fixed the position of oversized `empty-text` in Table, #11965
+- Fixed Table row not be unhighlighted when `current-row-key` is assigned to `null`, #11866
+- Fixed showing filter dropdown when `filters` is an empty array, #11864
+- Fixed Radio's label does not stop event propagation, #11912
+
+### 2.4.3
+
+*2018-07-03*
+
+- Fixed `allow-drop` not working properly when Tree nodes have a custom height, #11797
+- Now you can pass a parameter to the `clearValidate` method of Form, specifying which FormItems' validation results need to be cleared, #11821
+- Added `distinguishCancelAndClose` attribute for MessageBox, #11831
+
+### 2.4.2
+
+*2018-06-26*
+
+- Now `class-name` and `label-class-name` of Table are reactive, #11626
+- Fixed Table still highlighting clicked row when `highlight-current-row` is `false`, #11646
+- Fixed a style bug of ButtonGroup when it has only one `round` or `circle` Button, #11605
+- Fixed style of page size Select of Pagination, #11622
+- Fixed Menu's `open` method error when `collapse` is dynamically changed, #11646
+- Added `activeName` and `oldActiveName` parameters to the before-leave hook of Tabs, #11713
+- Fixed Cascader focused after outside clicked, #11588
+- Fixed Cascader not closing when option is clicked when `change-on-select` is true, #11623
+- Now updating Select's value programmatically will trigger form validation, #11672
+
+### 2.4.1
+
+*2018-06-08*
+
+- Removed Autocomplete's duplicate type declaration, #11388
+- Fixed Select's dropdown arrow style in FireFox when nested in Form, #11427
+- Fixed clear icon of Select still showing when the initial value is `null`, #11460
+- Fixed disabled radio showing box-shadow when clicked, #11462
+- Added `iconClass` attribute for MessageBox, #11499
+- Added `stretch` attribute for Tabs, #11476
+- Fixed rendering order issue of TabPane when Tabs is `lazy`, #11461
+- Fixed Table not retaining current highlight row when expanded, #11464
+- Fixed focusing state when `before-leave` returns a resolved promise, #11386
+- Fixed disabled Popover still creating poppers, #11426
+- Fixed Tree's endless loop when a new node is added in lazy mode, #11430 (by @wangjingf)
+- Added `closed` event for Dialog, #11490
+
+### 2.4.0 Fullerene
+
+*2018-05-28*
+
+#### New features
+- General
+  - Dev tool and bundler is switched to native webpack, #11216
+  - Now you can globally set the initial z-index of popups, #11257
+- Autocomplete
+  - Added `hide-loading` attribute, #11260
+- Button
+  - Now you can use the `size` attribute on circle buttons to control their sizes, #11275
+- InputNumber
+  - Added `precision` attribute, #11281
+- Tabs
+  - Added `before-leave` attribute, #11259
+  - Added `lazy` attribute, #11167（by @Kingwl）
+- Table
+  - Added `sort` method to manually sort the table, #11311
 
-*2017-07-28*
+#### Bug fixes
+- Input
+  - Fixed an issue that causes a re-render when using the Chinese IME to quickly input text, #11235 (by @STLighter)
+- Popover
+  - Fixed the console error when the triggering element is Radio or Checkbox, #11265
+- Breadcrumb
+  - Fixed the `to` attribute not supporting dynamic update, #11286
+- Upload
+  - Fixed the console error when a File is resolved in the returned Promise of the `beforeUpload` method, #11297 (by @qusiba)
+- Tooltip
+  - Fixed arrow not positioned correctly when content is empty, #11335
+- Autocomplete
+  - Fixed incorrect input suggestions after deleting keyword quickly, #11323
+- ColorPicker
+  - Fixed `active-change` event incorrectly triggering when picker dropdown is closed, #11304
+- Table
+  - Fixed style error of oversized filter panel, #11314
+  - Fixed currently selected row not retained when the table is sorted, #11348
+- Checkbox
+  - Fixed single checkbox not supporting validation, #11271
+- Radio
+  - Fixed disabled Radio still being selected when pressing space key, #11303
+- MessageBox
+  - Fixed the `el-popup-parent--hidden` class not removed when opening MessageBox in succession, #11371
 
-- Fixed child nodes expanding when checking parent node in Tree, #6029
-- Fixed checking behavior error of Tree, #6034
-- Fixed FormItem not inheriting `label-width` as a Form's direct child, #6044
-- Fixed Menu incorrectly showing SubMenu in collapse mode, #6111
-- Fixed render order error of `v-if` controlled dynamic TabPanes, #6066
-- Fixed Popover still popping up after mouse leaves within `open-delay`, #6058 (by @laobubu)
-- Fixed delete buttons still rendered in file list of disabled Upload, #6091
-- Fixed background color error on hover of striped Table, #6024 (by @xtongs)
+### 2.3.9
 
-### 1.4.0 Boron
+*2018-05-18*
 
-*2017-07-21*
+- Fixed when the source data does not have the field specified by a TableColumn's `prop` attribute, an error would occur when the mouse moves into that column's cells, #11137
+- The `lockScroll` attribute of pop up components no longer adds an inline style to the parent element, but instead adds a class name, #11114
+- Fixed the icon of Progress not displaying when its `status` is exception, #11172
+- Fixed options' `disabled` attribute not working in filterable Cascader's filter result list, #11185
+- Fixed an issue where Table's expanded row cannot be collapsed if the data source is updated after its expansion, #11186
+- `setCurrentKey` of Tree now accepts `null` as its param to cancel the currently highlighted node, #11205
 
-#### New features:
-- Message
-  - `message` attribute now supports VNode, #5463 (by @egyptik)
-- ColorPicker
-  - Added `active-change` event, #5775
-- Popover
-  - Added `open-delay` attribute, #5842 (by @kaungmyatlwin)
+### 2.3.8
+
+*2018-05-11*
+
+- Fixed DatePicker panel jumping to the current month after picking a date in a non-current month when `type` is dates, #10973
+- Fixed clearable Input still displaying the clear icon when readonly, #10912
+- Fixed closing the DatePicker panel without changing the value incorrectly triggering the `change` event, #11017
+- Fixed keyboard navigation not working properly when Select has grouped options, #11058
+- Added `prefix` named slot for Select, #11063
+- Added 'clearValidate` method for FormItem, #11076
+- Added `checkOnClickNode` attribute for Tree, #11111
+
+### 2.3.7
+
+*2018-04-29*
+
+- Fixed Table not updating its header widths when the scroll bar disappears due to filtering, #10834
+- Fixed clearable Input still showing the clear icon when its initial value is `null`, #10912
+- Fixed incorrect trigger of the `active-change` event after changing ColorPicker's binding value programatically, #10903 (by @zhangbobell)
+- Fixed filterable Select causing an infinite loop when navigating options using keyboard if all options are disabled, #10945
+
+### 2.3.6
+
+*2018-04-21*
+
+- Fixed wrong behavior of Tree's `allow-drop` callback when `type` parameter is used, #10821
+- Now you can properly enter keywords in filterable single Select in IE11, #10822
+- Fixed single Select incorrectly triggering `blur` event after clicking an option, #10822
+
+### 2.3.5
+
+*2018-04-20*
+
+- Fixed incorrect highlights in DatePicker panel when `type` is week, #10712
+- Fixed InputNumber being empty when its initial value is 0, #10714
+- Added `automatic-dropdown` attribute for Select, #10042 (by @Seebiscuit)
+- Fixed disabled Rate's value still being updated by navigation keys, #10726 (by @Richard-Choooou)
+- Now DatePicker's `type` attribute can be `'dates'`, where you can pick multiple dates in one picker, #10650 (by @Mini256)
+- Added `prev-click` and `next-click` events for Pagination, #10755
+- Added `pager-count` attribute for Pagination, #10493 (by @chongjohn716)
+- Added `type` as the 3rd param of Tree's `allow-drop` attribute callback, #10792
+- Now we use ResizeObserver to detect DOM element resizing, #10779
+
+### 2.3.4
+
+*2018-04-12*
+
+- Deleted duplicate `showTimeout` attribute in SubMenu's TypeScript declaration, #10566 (by @kimond)
+- Now you can customize Transfer's data item using scoped slot, #10577
+- Fixed clicking disabled prev and next button of Pagination still triggers `current-change` event, #10628
+- Fixed Textarea displaying `undefined` in SSR when its value is not set, #10630
+- Fixed disabled TabItem style when `type` is border-card, #10640
+- Added `$index` as `formatter`'s fourth param of Table, #10645
+- Fixed CheckboxButton not exported in TypeScript declaration, #10666
+
+### 2.3.3
+
+*2018-04-04*
+
+- Added `shadow` attribute for Card, #10418 (by @YunYouJun)
+- Fixed Badge being hidden when `value` is `0`, #10470
+- Fixed some bugs of draggable Tree, #10474 #10494
+- Added `placement` for Autocomplete, #10475
+- Now `default-time` attribute also works in non-range DateTimePicker, #10321 (by @RickMacTurk)
+- Removed the blue outline of TabItem after the browser blurs or is minimized, #10503
+- Added `popper-append-to-body` attribute for SubMenu, #10515
+- Removed visual feedback when hovering on non-link BreadcrumbItem, #10551
+- Fixed InputNumber's `change` event to ensure the component's binding value is updated in the event handler, #10553
+
+### 2.3.2
+
+*2018-03-29*
+
+- Fixed an Autocomplete regression, #10442
+
+### 2.3.1
+
+*2018-03-29*
+
+- Fixed a regression that `type` of Input is not passed down to the native input element, #10415
+- Added `blur` method for Select, #10416
+
+### 2.3.0 Diamond
+
+*2018-03-28*
+
+#### New features
 - Table
-  - A third parameter `value` is passed to `formatter`, #5709 (by @haledeng)
+  - Now `formatter` of TableColumn can be dynamically updated, #10184 (by @elfman)
+  - Added `select-on-indeterminate` attribute, #9924 (by @syn-zeta)
+- Menu
+  - Added `collapse-transition` attribute, #8809 (by @limichange)
+- Input
+  - Added `select` method, #10229
+  - Added `blur` method, #10356
+- ColorPicker
+  - Added `predefine` attribute, #10170 (by @elfman)
 - Tree
-  - Added `disabled` attribute, #5937
+  - Added `draggable`, `allow-drop` and `allow-drag` attributes, and `node-drag-start`, `node-drag-enter`, `node-drag-leave`, `node-drag-over`, `node-drag-end` and `node-drop` events, #9251 #10372 (by @elfman)
+- Form
+  - `validate` method now has a second parameter, containing information of form items that failed the validation, #10279
+  - Added `validate` event, #10351
+- Progress
+  - Added `color` attribute, #10352 (by @YunYouJun)
+- Button
+  - Added `circle` attribute, #10359 (by @YunYouJun)
+
+#### Bug fixes
+- Form
+  - Fixed label of FormItem not align with mixed Input, #10189
 - Menu
-  - Added `collapse` attribute, #5941
+  - Now collapsed Menu will only show the Tooltip when the `title` slot of MenuItem is set, #10193 (by @PanJiaChen)
+- Pagination
+  - Fixed `current-change` event wrongly triggering without user interaction, #10247
+- DatePicker
+  - Now the date and time value in the dropdown panel are correctly formatted based on the `format` attribute, #10174（by @remizovvv）
+- Upload
+  - Fixed `accept` attribute not working when `drag` is true, #10278
+
+### 2.2.2
+
+*2018-03-14*
+
+- Added `clear` event for Input, #9988 (by @blackmiaool)
+- Now manual input of ColorPicker supports `hsl`, `hsv` and `rgb` modes, #9991
+- Fixed DatePicker not triggering `change` event when its initial value is cleared, #9986
+- Now icon class related attributes of Rate support dynamic updates, #10003
+- Fixed Table with fixed columns not updating its height correctly if `max-height` is set, #10034
+- Now DatePicker's range mode supports reverse selection (clicking the end date, then clicking the start date), #8156 (by @earlymeme)
+- Added `disabled` attribute for Pagination, #10006
+- Added `after-enter` and ` after-leave` events for Popover, #10047
+- Fixed Select not triggering validation when user selects an option after executing `resetFields` of Form, #10105
+- Fixed incorrect widths of fixed columns of Table in some cases, #10130
+- Fixed MessageBox inheriting the `title` attribute of its previous instance when called without `title`, #10126 (by @Pochodaydayup)
+- Added `input-size` attribute for Slider, #10154
+- Added `left-check-change` and `right-check-change` events for Transfer, #10156
+
+### 2.2.1
+
+*2018-03-02*
+
+- Fixed Aside, Header and Footer shrinking in some layout, #9812
+- Fixed Table with a `height` attribute not rendering in SSR, #9876
+- Fixed expandable Table not calculating its height when a row is expanded, #9848
+- Fixed `change` event not trigger when manually typing date in DateTimePicker, #9913
+- Fixed Select showing its options when the input box is right-clicked, #9894 (by @openks)
+- Added `tooltip-class` attribute for Slider, #9957
+- Now Select will stay focused after selection, #9857 (by @Seebiscuit)
+- Added `target-order` attribute for Transfer, #9960
+
+### 2.2.0 Graphite
+
+*2018-02-12*
+
+#### New features
+- Menu
+  - Added `popper-class` and `disabled` attributes for SubMenu, #9604 #9771
+  - Horizontal Menu now supports multi-layered SubMenu, #9741
+- Tree
+  - Added `node-contextmenu` event, #9678
+  - Now you can customize node template using scoped slot, #9686
+  - Added `getNode`, `remove`, `append`, `insertBefore`, `insertAfter`, `getCheckedKeys`, `getHalfCheckedNodes`, `getHalfCheckedKeys` methods and `check` event, #9718 #9730
+- Transfer
+  - Added `clearQuery` method, #9753
 - Select
-  - Added `value-key` attribute, #5897
+  - Added `popper-append-to-body` attribute, #9782
 
-#### Fixes:
-- DatePicker
-  - i18n failure for some texts, #5485
-  - returning a non-zero millisecond value when initial value is empty, #5663
-  - `disabledDate` affecting undesired date, #4946 (by @liyangworld)
-- Steps
-  - style problems when a step is dynamically added or removed, #5456 (by @elfman)
+#### Bug fixes
 - Table
-  - highlight row misplaced when an expandable Table has fixed table columns, #5471 (by @elfman)
-  - `classList` not supported in some browsers, #5613 (by @flynntsc)
-- Select
-  - single Select unable to scroll to the selected item when the dropdown menu pops up, #5564（by @wacky6）
-- Radio
-  - border radius lost in RadioGroups with only one Radio, #5646 (by @YYvanYang)
-- Upload
-  - unable to reselect previously deleted file when `auto-upload` is false, #5706
-  - delete button still visible and functioning when `disabled`, #5841
-  - compatibility issue with Vue 2.4 `key`, #5872
-- MessageBox
-  - clicking cancel buttons getting resolved when not invoked as a `confirm` or `prompt`, #5658
-- Rate
-  - active icons not reflecting decimal part of initial value, #5785
-- Pagination
-  - compatibility issue of total page display with vue-i18n@6.x, #5796 (by @mario56)
-  - apostrophe incorrectly showing up when current page is one page less than total page, #5861 (by @openks)
+  - Fixed clicking expanding icon of an expandable row triggers `row-click` event, #9654
+  - Fixed layout not update when column width is changed by user dragging, #9668
+  - Fixed style issue when summary row co-exists with fixed columns, #9667
+- Container
+  - Fixed container components not stretching in IE11, #9655
 - Loading
-  - style problems when bound to invisible elements, #5649 (by @xiongzixiao)
+  - Fixed Loading not showing when the value of `v-loading` is changed to true in the `mounted` hook, #9722
+- Switch
+  - Fixed two native click events are triggered when Switch is clicked, #9760
+
+### 2.1.0 Charcoal
+
+*2018-01-31*
+
+#### New features
 - Cascader
-  - text in the input box not vertically aligned, #5819 (by @jianzhi92)
-- Tree
-  - `setCheckedKeys` and `setCheckedNodes` in lazy mode, #5937
-  - loading all descendent nodes when a parent node is checked in lazy mode, #5963
+  - Added `focus` and `blur` events, #9184 (by @viewweiwu)
+- Table
+  - The `filter-method` now has a third param `column`, #9196 (by @liyanlong)
+- DatePicker
+  - Added `prefix-icon` and `clear-icon` attributes, #9237 (by @AdamSGit)
+  - Added `default-time` attribute, #9094 (by @nighca)
+  - `value-format` now supports `timestamp`, #9319 (by @wacky6)
+- InputNumber
+  - Now the binding value can be `undefined`, #9361
+- Select
+  - Added `auto-complete` attribute, #9388
 - Form
-  - label named slot not working when `label` is not assigned on FormItem, #5921
-- Tooltip
-  - not working in Vue 2.4.x when the triggering element is a custom component, #5916
+  - Added `disabled` attribute, #9529
+  - Added `validateOnRuleChange` attribute, #8141
+- Notificaition
+  - Added `closeAll` method, #9514
+
+#### Bug fixes
+- InputNumber
+  - Fixed value resetting when typing decimal point, #9116
+- Dropdown
+  - Fixed dropdown menu incorrect positioning when the page only has a horizontal scrollbar in some browsers, #9138 (by @banzhuanmei)
+- Table
+  - Fixed an error in calculating number of fixed columns after the column data changes, #9188（by @kolesoffac）
+  - Fixed the border of the last column of the grouped header not properly displayed, #9326
+  - Fixed incorrect positioning of table header in Safari, #9327
+  - Fixed expanded row collapsing when the table data changes, #9462
+  - Fixed unnecessary multiple renders in some conditions, #9426
+  - Fixed column width calculation error when `width` of TableColumn changes, #9426
+- Loading
+  - Fixed Loading not hiding correctly in some conditions, #9313
+- DatePicker
+  - Fixed `focus` method not working in range mode, #9437
+  - Fixed clicking the "now" button still selecting the current date even if it is disabled, #9470 (by @wacky6)
+  - Fixed date clamping when navigating, #9577 (by @wacky6)
+- Steps
+  - Fixed style error in IE 11, #9454
 
-#### Breaking changes:
-- Select
-  - when value is an object, `value-key` is required as its unique identity key, #5897
+#### Breaking changes
+- Menu
+  - The popup menu in `collapse` mode now appends directly to `body`, so that it is visible when nested in Aside, #9263
+- Table
+  - Now checking the checkboxes in multi-selection Table doesn't trigger `row-click` event, #9467
+- Loading
+  - The `z-index` of non-fullscreen loading mask is changed to 2000. The `z-index` of fullscreen loading mask will update dynamically with the popup components, #9522
+- Dropdown
+  - `show-timeout` and `hide-timeout` attributes now only works when trigger is `hover`, #9573
 
-### 1.3.7
+### 2.0.11
 
-*2017-06-18*
+*2018-01-08*
 
-- Fixed Table with async data not showing summary row, #5318
-- Fixed Pagination's jumper value not sync with current page, #5377
-- Fixed DatePicker's shortcut panel overflow issue, #5297 (by @alashow)
-- Fixed clicking Switch not responding when some text on the page is selected, #5411
-- The red wildcard indicating required field of Form is now responsive, #5403
-- Fixed initial-index of Carousel not working, #5334
-- Fixed Popover enable to be focused when nested in a Dialog, #5336
+- Fixed border color issue of Select when in `prepend` or `append` slot of Input, #9089
+- Fixed `remove-tag` event's parameter of Select, #9090
+- Added `show-timeout` and `hide-timeout` attributes for SubMenu, #8934 (by @HugoLew)
+- Fixed missing Tooltip style of `show-overflow-tooltip` when Table is imported on demand, #9130
+- Fixed Table column's sorting malfunctioning after `clearSort` is executed on that column, #9100 (by @zEmily)
+- i18n config file for Czech is renamed from `cz` to `cs-CZ`, #9164
 
-### 1.3.6
+### 2.0.10
 
-*2017-06-09*
+*2017-12-29*
 
-- Fixed inconsistency of ColorPicker's default value and panel value, #5183 (by @Kingwl)
-- Fixed ColorPicker not able to change hue in the panel when its default value is white, #5184 (by @Kingwl)
-- Fixed Select's dropdown taking multiple clicks to expand when nested in a Dialog after scrolling, #5226
-- Added `props` property for Autocomplete, #5282
-- Fixed dropdown of DatePicker not hiding when Tab key is pressed after manual input, #5149 (by @ChuckFields)
+- Fixed wrong max height calculation of Table when fixed column and summary row co-exist, #9026
+- Fixed uncompiled color style of empty text in Table, #9028
+- Now DatePicker only emits `change` event when value is truly changed, #9029 (by @remizovvv)
+- Added `tabindex` attribute for Input, #9041 (by @dicklwm)
 
-### 1.3.5
+### 2.0.9🎄
 
-*2017-06-03*
+*2017-12-24*
 
-- Fixed `default-first-option` of Select not working in remote filtering, #5084
-- Fixed InputNumber not aligning with other form components, #5127
-- Fixed inline FormItem having no effect on mixed Input, #5151
-- Fixed height of FormItem being different in Firefox from other browsers, #5152
-- Fixed items with a `value` of 0 in Cascader can not be expanded, #5172 (by @Kingwl)
-- Fixed Autocomplete not triggering native `keydown` and `keyup` events, #5129
-- Added `clear` event for Select, #5112
-- Fixed Cascader's dropdown menu not updating its position in some situations, #5064
-- Better accessibility for Dialog and MessageBox, #4786
+- Added `before-remove` hook function for Upload, #8788 (by @firesh)
+- Fixed initial value of `error` not working for FormItem, #8840
+- Now Loading directive supports custom class name by assigning `element-loading-custom-class` attribute, #8826 (by @earlymeme)
+- Fixed CarouselItem becoming invisible when data is asynchronously updated, #8921
+- Added `renderAfterExpand` attribute for Tree, #8972
 
-### 1.3.4
+### 2.0.8
 
-*2017-05-23*
+*2017-12-12*
 
-- Fixed highlight and stripe effects of Table with expandable rows, #4871 (by @mu-yu)
-- Added `default-first-option` for Select, #4838 (by @wacky6)
-- Fixed Select with no options not displaying "No data" text when `allow-create` is true, #4977
+- Added Spanish documentation
+- Fixed `show-timeout` of Dropdown not working when trigger is click, #8734 (by @presidenten)
+- Fixed Form validation timing for rules whose trigger is blur, #8776
+- Fixed blur event of ranged DatePicker, #8784
+- `format` of TimePicker now supports AM/PM, #8620 (by @firesh)
 
-### 1.3.3
+### 2.0.7
 
-*2017-05-14*
+*2017-11-29*
 
-- Added `visible-change` event for Dropdown, #4818 (by @luciy)
-- Added `tag` attribute for Col and Row, #4799
-- Fixed Cascader search functionality regression, #4812
-- Fixed DatePicker triggering watch when `type` is range, #4837 (by @wacky6)
-- Fixed numbers in TimePicker not align vertically, #4847 (by @pengchongfu)
-- Fixed Dialog not triggering `before-close` hook when ESC is pressed, #4819 (by @patriciussanctus)
-- Fixed multiple MessageBox not rendering content correctly when some of the `message` is a VNode
-- Fixed Checkbox not focused when navigating with tab
+- Fixed disabled text button style, #8570
 
-### 1.3.2
+### 2.0.6
 
-*2017-05-10*
+*2017-11-29*
 
-- Fixed undefined custom component `el-collapse-transition` error when importing some components on demand, #4728
-- Fixed vertical alignment issue of Pagination in FireFox, #4756
-- Fixed dropdown panel view not updating after binding value of DatePicker is programmatically changed when `type` is week, #4739
-- Fixed height calculation errors of Table with summary rows, #4736
-- Added `before-filter` attribute for Cascader, #4774
-- Added `debounce` attribute for InputNumber, #4712（by @pengchongfu）
+- Fixed style bug of Table's sorting icons, #8405
+- Fixed trigger mechanism for Popover when its `trigger` is manual, #8467
+- Added `prefix-icon` and `suffix-icon` attributes for Autocomplete, #8446 (by @liyanlong)
+- Added `separator` attribute for Cascader, #8501
+- Added `clearable` attribute for Input, #8509 (by @lbogdan)
+- Added `background` attribute for Pagination, #8553
 
-### 1.3.1
+### 2.0.5
 
-*2017-05-06*
+*2017-11-17*
 
-- Fixed Autocomplete clearing input box when typing Chinese, #4718
-- Fixed async Table's summary row not scroll with Table, #4717
-- Fixed Dialog not closing correctly after pressing ESC when `close-on-press-esc` is true, #4706
-- Fixed wrong parameter in `change` event of Switch when `on-value` and `off-value` are assigned, #4675
+- Fixed Popover, Tree, Breadcrumb and Cascader regression in 2.0.4, #8188 #8217 #8283
+- Fixed memory leak of clickoutside directive, #8168 #8225 (by @badpunman @STLighter)
+- Fixed multiple Select height when its value is cleared, #8317 (by @luciy)
+- Added `collapse-tags` attribute for multiple Select to replace tags with one line of text, #8190
+- Fixed high CPU consumption caused by hidden Table, #8351
+- Now you can use `doLayout` method of Table to update its layout, #8351
 
-### 1.3.0 Beryllium
+### 2.0.4
 
-*2017-05-05*
+*2017-11-10*
 
-#### New features:
-- New component: Transfer
-- Now you can use our pre-defined transitions
-- Vertical mode for Slider, can be activated by the `vertical` attribute, #4410 (by @devange)
-- Button style for CheckboxGroup, #3697 (by @mdartic)
-- Table
-  - Added `setCurrentRow` method, #4390
-  - Added summary row, with three attributes: `show-summary`, `sum-text` and `summary-method`, #4484
-  - Added `filter-placement` attribute for TableColumn, #4491
-- Dialog
-  - Added a `before-close` hook, #4432
-  - Added `visible` attribute, which supports the `.sync` modifier, #4539
-- Upload
-  - Added `disabled` attribute, #4473
-  - `on-change` now also triggers when a file is added, #4447
-  - Added `abort` method
-- Switch now supports `on-value` and `off-value`, so that you can customize its values, #4403
-- DatePicker
-  - Added `default-value` attribute for initially displayed date in the dropdown, #4222 (by @wacky6)
-  - `type` now supports dynamic updates, #4417 (by @coffeedeveloper)
-  - Added `label` attribute for CarouselItem, #4317 (by @paul-blundell)
-- `message` of MessageBox now supports VNode, #4550
-- `current-page` of Pagination `current-page` now supports `.sync`, #4539
-- Added `label` slot for Form, so you can customize label's content, #4634
-
-#### Fixes:
-- Compatibility issues of Select and Table with Vue 2.3.x, #4518
-- `disabledDate` of DatePicker having no effect on typed value in the input box, #4309
-- An issue when the key of a Tree node is number 0, #4415
-- TimePicker number not align when picked, #4425 (by @pengchongfu)
-- Autocomplete frequently triggering searching method when typing Chinese, #4393 (by @qazbnm456)
-- Upload
-  - not able to select the same file multiple times, #4461
-  - not displaying preview image when is `auto-upload` false, #4572
-  - some style errors, #4643
-- Style bug of RadioGroup when nested in a FormItem, #4336
-- ColorPicker not clear the color panel when bound value is emptied, #4668 (by @pengchongfu)
-- `show-overflow-tooltip` of Table not working in Safari, #4157 (by @renxia)
+- Improved accessibility for Cascader, Dropdown, Message, Notification, Popover, Tooltip and Tree
+- Fixed Container resize when the width of viewport decreases, #8042
+- Fixed Tree's `updateKeyChildren` incorrectly deleting child nodes, #8100
+- Fixed bordered CheckboxButton's height when nested in a Form, #8100
+- Fixed Menu's parsing error for custom colors, #8153 (by @zhouyixiang)
+
+### 2.0.3
+
+*2017-11-03*
+
+- Fixed `editable` and `readonly` attributes for ranged DatePicker, #7922
+- Fixed style error of nested Tabs, #7941
+- Fixed style error of the last Step of vertical Steps, #7980
+- Fixed trigger timing of `current-change` event for Pagination, #7995
+- Fixed unregistered Tooltip in Menu, #7995
+
+### 2.0.2
+
+*2017-10-31*
 
-#### Breaking changes:
-- Only compatible with Vue 2.3.0+
+- Now right-clicking the buttons of InputNumber won't change its value, #7817
+- `validate` method of Form can now wait for asynchronous validations before executing its callback, #7774 (by @Allenice)
+- Fixed range selection of DatePicker not working in Chromium 53-57 browsers, #7838
+- Fixed missing preview and delete icons of Upload when its `list-type` is picture-card, #7857
+- Added `sort-by` attribute for TableColumn, #7828 (by @wangfengming)
+- Fixed DatePicker sometimes displaying wrong year number when selecting the first week in week mode, #7860 (by @hh23485)
+- Fixed icon style error of vertical Steps, #7891
+- The hot area for node arrows in Tree is expanded, #7891
 
-### 1.2.9
-
-*2017-04-19*
-
-- Fixed RadioButton not working properly when some texts on the page are selected, #4217
-- Fixed the toggle-all checkbox of Tree not working in some browsers, #4107 (by @pengchongfu)
-- Fixed Cascader clear button not working, #4167 (by @pengchongfu)
-- Fixed router switching error when the page has a Table with Tooltips, #4085
-- Fixed Upload not able to remove selected files, #4233
-- Added `onClick` attribute for Notification, #4221 (by @amouillard)
-- Fixed binding value of DatePicker becoming undefined when cleared, #4186 (by @pengchongfu)
-- Fixed style error of ColorPicker when nested in a FormItem, #4303
-- Added `enterable` attribute for Tooltip, #4210
-
-### 1.2.8
-
-*2017-04-07*
-
-- Fixed `resetFields` of Form reassigning form items, #3840 (by @pengchongfu)
-- Added `max` and `min` attributes for CheckboxGroup, #3700 (by @mdartic)
-- Fixed DatePicker adding one to picked month in some specific days, #3935
-- Added `closeAll` method for Message, #3966 (by @pengchongfu)
-- Added `format-tooltip` attribute for Slider, #3657 (by @liyanlong)
-- Fixed filter panel of Table being when nested in a Dialog, #4023 (by @liyanlong)
-- Fixed single Select unable to create new items in Vue 2.2.x, #3984
-- Fixed Row disappearing in all breakpoints if its `span` is set to 0 in some breakpoints, #4053
-
-### 1.2.7
-
-*2017-03-29*
-
-- Fixed Select not compatible with Vue 2.2.6, #3797
-- Improve performance for rendering tooltip in Table, #3478
-- Add `tooltip-effect` property for Table
-
-### 1.2.6
-
-*2017-03-28*
-
-- Fixed Switch compatible with SSR, #3752
-- Fixed the time of TimePicker calculating incorrectly, #3479
-- Fixed the week of DatePicker formatting incorrectly, #2774
-- Fixed the week of DatePicker initializing incorrectly, #3058
-- Fixed the events of Popover destroying incorrectly, #3555
-- Fixed InputNumber setInterval, #3514 (by @pengchongfu)
-- Fixed RadioButton css files, #3276
-- Fixed hover style on striped Table, #3696 (by @nicoeg)
-- Fixed Slider's button jumping left issue, #3664 (by @gabrielboliveira)
-- Added `delete-tag` event for Select, #3663 (by @pengchongfu)
-- Added `onPick` option for DatePicker, #2921
-- Added `status` for Step, #3722
-- Added full example for on-demand importing, #3302
-
-### 1.2.5
-
-*2017-03-19*
-
-- Added `show-tooltip` property for Slider, #3430 (by @gabrielboliveira)
-- Fixed Slider precision not updating when `step` is updated, #3475 (by @gabrielboliveira)
-- Fixed a bug that when the window is at the criticality of showing the scrollbar, the popup of Tooltip inside a Table will cause the Table to shake horizontally, #3549
-- Fixed Table automatically shrinking vertically in some conditions, #3539
-- Fixed popup components inside a Popover not hiding when blank area is clicked, #3451 (by @nicoeg)
-- Now Col will hide itself if its `xs`, `sm`, `md` or `lg` is set to 0, #3564
-
-### 1.2.4
-
-*2017-03-09*
-
-- Fixed Carousel not responding to dynamic data updates, #3159
-- Fixed `cell-dblclick` of Table not firing issue, #3305
-- Fixed disabled Cascader not displaying initial value, #3297
-- Fixed Slider not correctly displaying initial value when `show-input` is true, #3281
-- Fixed Tooltip error in server-side rendering, #3214
-- Fixed `range-separator` of DatePicker not working issue, #3378
-- Added support for dynamically update loading text of Loading directive, #3345 (by @imyzf)
-- Added `http-request` attribute for Upload, #3387
-- Added support for hiding col if its `span` is 0, #3313
-
-### 1.2.3
-*2017-03-01*
-- Fixed Tooltip, #3152
-
-
-### 1.2.2
-
-*2017-02-28*
-
-- Fixed compatibility issues with Vue 2.2, #3002 #3067 #3097
-- Fixed Cascader's dropdown hiding behind Dialog when nested in a Dialog, #3035
-- Fixed incorrect parameter of `change` event of Cascader, #3014
-- Add `change` event for ColorPicker, #3049 (by @nicoeg)
-- Fixed `setCheckedKeys` method of Tree not working on non-leaf nodes, #2967 (by @rainyLeo)
-- Fixed Tooltip not compatible with `router-link`, #3143
-
-### 1.2.1
+### 2.0.1
 
-*2017-02-23*
-
-- Fixed SSR regression in version 1.2.0, #2982
-- Fixed horizontal scroll buttons not showing in Tabs, #2974
-- Fixed wrong calculation of height after the `height` attribute is updated dynamically in Table, #2979
-- Added `cell-dblclick` and `header-dragend` events for Table, #2983 #2988
-- Fixed form items showing a left padding inside an inline Form with a specified `label-width`, #2990
-- Fixed Cascader's dropdown misplaces in some conditions, #2992
-
-### 1.2.0 Lithium
-
-*2017-02-22*
-
-#### New features:
-- Two brand new components: Cascader and ColorPicker
-- New attributes `editable` and `addable`, and new events `tab-add` and `edit` for Tabs
-- Language config files in UMD format
-- New events `node-expand` and `node-collapse` for Tree, #2507 (by @masterzhang)
-- New attribute `indent` for Tree, #2713
-- Dialog's title now supports named slot, #2657
-- New attribute `range` for Slider, #2751
+*2017-10-28*
+
+- Fixed style error of RadioButton and CheckboxButton, #7793
+- Fixed TimePicker not respond to mouse scroll in some conditions, #7811
+- Fixed incomplete styles of some components when imported on demand, #7811
+
+### 2.0.0 Carbon
+
+*2017-10-27*
+
+#### New features
+- General
+  - A new theme: `theme-chalk`
+  - Accessibility of the following components are improved: Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload
+  - Added TypeScript typings
+  - All existing icons are redesigned. Some new icons are added
+  - Added a series of breakpoint-based utility classes that hide elements when the viewport size meets certain conditions
+  - Added layout components: Container, Header, Aside, Main, Footer
+  - Now you can configure component sizes globally. When importing Element, you can add a global config object with a `size` prop to configure default sizes for all components.
+- Button
+  - Added `round` attribute. It's used for round-cornered Buttons #6643
+- TimeSelect
+  - Now can be navigated by `Up` and `Down`, and hitting `Enter` selects the time #6023
+- TimePicker
+  - Now can be navigated by arrow keys, and hitting `Enter` selects the time #6050
+  - Added `start-placeholder` and `end-placeholder`. They're placeholders for the two input boxes in range mode #7169
+  - Added `arrow-control` attribute to spin the time with arrows #7438
+- Tree
+  - Now child nodes don't render before the first expand #6257
+  - Added `check-descendants` attribute. It determines if child nodes are checked when checking their parent node in `lazy` mode #6235
+- Tag
+  - Added `size` attribute #7203
+- Datepicker
+  - Now `timeFormat` can format the TimePicker when type is set to `datetimerange` #6052
+  - Added `start-placeholder` and `end-placeholder`. They're placeholders for the two input boxes in range mode #7169
+  - Added `value-format` attribute to customize the format of the binding value, #7367
+  - Added `unlink-panels` attribute to unlink the two date panels when selecting a date range
+- MessageBox
+  - Added `closeOnHashChange` attribute #6043
+  - Added `center` attribute so that the content can be centered #7029
+  - Added `roundButton` attribute to display round Buttons #7029
+  - Added `dangerouslyUseHTMLString` attribute. When set to `true`, `message` will be parsed as HTML string<sup>*</sup> #6043
+  - Added `inputType` attribute to assign type for the inner input box, #7651
+- Dialog
+  - Added `width`、`fullscreen`、`append-to-body` attributes. Now Dialog can be nested
+  - Added `center` attribute so that the content can be centered #7042
+  - Added `focus-after-closed`、`focus-after-open` to improve accessibility #6511
+- ColorPicker
+  - Now you can type colors in the input box #6167
+  - Added `size` and `disabled` attributes #7026
+  - Added `popper-class` attribute #7351
+- Message
+  - Now color of the icons can be overridden by CSS #6207
+  - Added `dangerouslyUseHTMLString` attribute. When set to `true`, `message` will be parsed as HTML string<sup>*</sup> #6207
+  - Added `center` attribute so that the content can be centered #6875
+- Notification
+  - Added `position` attribute to configure where Notification pops up #6231
+  - Added `dangerouslyUseHTMLString` attribute. When set to `true`, `message` will be parsed as HTML string<sup>*</sup> #6231
+  - Added `showClose` attribute to hide the close button #6402
+- Rate
+  - Added `show-score` attribute to determine if current score is displayed #6295
+- Tabs
+  - Added `tab-position` attribute #6096
+- Radio
+  - Added `border` and `size` attributes #6690
+- Checkbox
+  - Added `border` and `size` attributes #6690
+- Alert
+  - Added `center` attribute so that the content can be centered #6876
+- Menu
+  - Added `background-color`, `text-color` and `active-text-color` attributes #7064
+  - Added `open` and `close` methods to open and close SubMenu programmatically, #7412
+- Form
+  - Added `inline-message` attribute to determine if the validation message is displayed in inline style #7032
+  - Added `status-icon` attribute to display a feedback icon when validated #7032
+  - Form and FormItem now have a `size` attribute. Inner components will inherit this size if not specified on themselves, #7428
+  - `validate` method will now return a promise if the callback is omitted, #7405
+  - Added `clearValidate` method for clearing validating results for all form items, #7623
+- Input
+  - Added `suffix` and `prefix` named slots, `suffixIcon` and `prefixIcon` attributes to add contents inside the input box #7032
+- Breadcrumb
+  - Added `separator-class` attribute to support icons as item separators #7203
+- Steps
+  - Added `simple` attribute to activate simple-styled Steps #7274
+- Pagination
+  - Added `prev-text` and `next-text` attributes to customize texts of previous page and next page #7005
+- Loading
+  - Now you can customize spinner icon and background color with `spinner` and `background` prop, #7390
+- Autocomplete
+  - Added `debounce` attribute, #7413
 - Upload
-  - Attribute `auto-upload` that controls if files are uploaded immediately after selecting, and its default value is `true`
-  - Event `on-change` that fires when file status changes
-  - Attribute `list-type` that configures the appearance of file list
-- Scroll bars in Autocomplete are made prettier
-
-#### Fixes:
-- Carousel not responding to contents' update, #2775
-- Numbers in TimePicker not align in some conditions, #2948
-- TimePicker only responding to odd clicks in some conditions, #2884 (by @k55k32)
-- Tabs' display order error when tab-pane is dynamically changed, #2898
-- Menu highlighting menu-item when `default-active` is assigned to an non-existent item
-- Collapse's style issue when nested
-
-#### Breaking changes:
-- Tooltip is refactored, no additional HTML tags will be rendered so that the structures of nested component stay unchanged, #2459
-- The backdrop of Dialog now inserts to body element by default, #2556
-- Tabs don't maintain tab instances internally any more, so they should be handled externally via events emitted by Tabs, #2567
-- Upload is refactored
-  - `default-file-list` renamed to `file-list`, and `show-upload-list` renamed to `show-file-list`
-  - `thumbnail-mode` removed
-
-### 1.1.6
-
-*2017-01-23*
-
-- Fixed `customClass` of MessageBox affecting follow-up instances, #2472
-- Fixed style issue of Select after being activated when located in a non-default-activated tab pane inside Tabs, #2466
-- Fixed style missing issue for some components when imported on demand
-- Fixed disabled filterable multiple Select still showing dropdown when clicked on a certain area, #2540
-- Restored returning to original sorting in sortable Table columns, #2491
-- Added `reset.css` in `theme-default`, #2378
-- Added `range-separator` attribute for DatePicker, #2579
-- Published individual component packages: Table, DatePicker, Loading, Upload and Carousel
-- Add Finnish (@groenroos)
-
-### 1.1.5
-
-*2017-01-17*
-
-- Fixed Menu not activating corresponding menu item after router switching in router mode, #2451
-- Fixed `value` attribute of Collapse not supporting `Number` typed value, #2455
-
-### 1.1.4
-
-*2017-01-16*
-
-- Fixed Input Number triggering `change` event when bound value is changed programmatically, #2329
-- Fixed Menu not responding to `$router` changing in router mode, #2391
-- Fixed Menu and Tree expanding state malfunctioning when clicked multiple times quickly, #2354
-- Fixed `change` event triggering mechanism of Input Number and Checkbox Group, now they do not fire when bound value is changed programmatically
-- Added `on-icon-click` attribute for Input, #2414
-- Added `disabled` attribute for Radio Group, #2411
-- Added `accordion` attribute for Tree, #2408
-- Added `show-message` attribute for Form, #2356
-- Fixed sort clicking area of Table, updated default sorting related APIs, #2309 #2405 (by @njleonzhang)
-- Fixed `firstDayOfWeek` not working in ranged typed of DatePicker, #2353
-- Fixed DatePicker displaying 1970 when initial value is null, #2388
-- Fixed `filteredValue` attribute for Table, #2348
-- Fixed scrollable Table's style with empty data, #2396
-- Added `beforeClose` attribute for MessageBox, #2204
-- Fixed filterable Select not showing dropdown when triangle icon is clicked, #2389
-
-Breaking change
-- The `default-sort-prop` and `default-sort-order` attributes added in 1.1.3 are now merged into an object-typed attribute
-
-### 1.1.3
-
-*2017-01-09*
-
-- Fixed DatePicker not firing change event when cleared for the first time upon page load, #2167
-- Fixed DatePicker year calculating error when choosing the next year, #2152
-- Added `default-sort-prop` and `default-sort-order` attributes for Table, #2182 (by @njleonzhang)
-- Fixed filterable Select filtering other options with initial value, #2196
-- Added custom i18n processing, making Element compatible with i18n plugins other than `vue-i18n`, #2129
-- Added `resize` attribute for Input, #2263 (by @Kingwl)
-- Fixed Autocomplete not hiding dropdown when blurred, #2247
-- Fixed style issues with nested Tabs, #2212 (by @Kingwl)
-- Fixed Tabs' tab bar locating error when non-first item is initially activated, #2192
-
-### 1.1.2
-
-*2016-12-30*
-
-- Fixed `sortable` and `fixed` attribute of Table not working in Vue 2.1.7+
-- Fixed Input Number not resetting on blur when input with illegal values, #2098
-- Removed `title` scoped slot of Collapse, and added `title` named slot, #2100
-- Fixed range selection in TimePicker not working issue
-- Fixed Tabs' active tab switching when a non-active tab is removed, #2106
-- Fixed console error reporting when navigating Select with arrow keys, #2120
-- Fixed incorrect validation timing of filterable Select in Form, #2120
-
-### 1.1.1
-
-*2016-12-29*
-
-- Fixed compatibility issue with latest Vue due to compilation
-
-### 1.1.0 Helium
-
-*2016-12-29*
-
-#### New features:
-- Two brand new components: Carousel and Collapse
-- SSR supported
-- Scrollbars' style inside components is upgraded
-- Table now supports custom templates via [scoped slots](http://vuejs.org/v2/guide/components.html#Scoped-Slots); the good old `inline-template` is still compatible, but it's no longer recommended and is likely to be removed in the future
-- Table now supports expandable rows
-- DatePicker now supports specifying the first day of week
-- TimeSelect now supports `maxTime`
-- Autocomplete now supports `popper-class`
-- To customize template of Tab-Pane, now you can use the `slot` named `label`
-
-#### Fixes:
-- `change` event of DatePicker incorrectly triggering multiple times, #2070
-- Width shaking of tab-pane while initializing, #1883
-
-#### Breaking changes:
-- Only compatible with Vue 2.1.6 and beyond
-- Parameters of Form validateField() methods are updated
-- Alert's render-content attribute is removed, and now you can pass your custom template via default slot
-- The box models of Input and Select are updated from `block` to `inline-block`
-- The box model of Tabs is updated from `inline-block` to `block`, and Tab-Pane's `label-content` attribute is removed
-- The dropdown of Autocomplete now inserts directly to `<body>`, not `<el-autocomplete>` any more
-
-### 1.0.9
-
-*2016-12-27*
-
-- Fixed DatePicker incorrectly triggering input event, #1834
-- Fixed Tree reporting `event is undefined` error in Firefox, #1945
-- Added `change` event for DatePicker, whose parameter is the formatted value, #1841
-- Added `header-align` attribute for Table, #1424
-- Fixed single select Table's highlight style not removing when data is removed, #1890
-- Fixed filterable Select lagging issue with more options, #1933
-- Fixed multiple disabled Select not disabling removing selected options issue, #2001
-- Fixed Col style not working in `xs`, #2011
-- Added `value` attribute for Tab, #2008
-- Fixed InputNumber `change` event incorrectly firing multiple times in some conditions, #1999
-- Added `clearable` attribute for DatePicker, #1994
-- Fixed Form always passing validation in async mode, #1936
-
-### 1.0.8
-
-*2016-12-20*
-
-- Fixed nested Popup from event bubbling, #1677
-- Fixed the issue that datetimerange-typed DatePicker can not select time, #1758
-- Fixed `change` event not firing correctly of Slider, #1809
-- Fixed Loading's spinner splitting while animating in some conditions, #1786
-- Added `loading-text`, `no-data-text`, `no-match-text` properties and `visible-change` event for Select, #1849
-- Added `popper-class` property for DatePicker, Select and Tooltip, #1806
-- Added `expand-on-click-node`, `current-node-key` properties and `current-change` event for Tree, #1805 #1807
-- Added the third parameter `column` for Table's `row-click` event, #1808
-- Fixed an error when pages with Checkbox switching routes due to `computed` property being cached, #1860
-- Added the tab instance as a parameter for TabPanel's `label-content` render function, #1857
-- Added infinite submenus support for NavMenu in vertical mode, #1851
-- Updated Checkbox so that it works without a binding value, #1818
-- Added `onProgress` hook for Progress, #1782
-- Fixed Tab not updating active bar with dynamic label, #1761
-- Added `filter-change` event for Table, and `column-key` property for TableColumn, #1876
-- Added `hide-on-click` property for Dropdown, #1879
-
-### 1.0.7
-
-*2016-12-14*
-
-- Fixed DatePicker dropdown appears when hovering on the clear button
-- Fixed DatePicker displays a wrong date when its initial value is null
-- Added `row-contextmenu` event and `max-height` attribute for Table, #1663 #1674
-- Added `customClass` attribute for MessageBox, #1707
-- Added `iconClass` and `customClass` attributes for Message and Notification, #1671
-- Added empty slot for Table, #1737
-- Added old value as a second parameter in change event for InputNumber
-
-### 1.0.6
-
-*2016-12-09*
-
-- Added `disabled` attribute for Tabs, #1620
-- Added `size` attribute for DatePicker input, #1440
-- Fixed `datetimerange` DatePicker's panel not showing correct date if initial value is present, #1129
-- Fixed DatePicker display error when switching year, #1607
-- Fixed DatePicker not triggering clickoutside when its icon is clicked, #1604
-- Fixed TimePicker not refreshing value after clicking the clear button, #1583
-- Fixed remote filterable Select display error when its value is an object, #1593
-- Fixed Select's clear button still working bug when it's `disabled`, #1619
-- Fixed Switch's background color error when its `disabled` attribute is dynamically changed, #1627
-- Fixed some style bugs of Table
-
-### 1.0.5
-
-*2016-12-06*
-
-- Fixed Select with async options and binding value displaying value instead of label, #1537
-- Fixed Select reports an error when initial binding value is an empty object, #1533
-- Fixed remote filtering Select not showing dropdown in some conditions, #1531
-- Fixed Slider sometimes drifting a small distance after releasing dragging, #1546
-- Fixed Steps style in IE9, #1543
-- Added Upload generating URL for all file types, #1530
-- Fixed TimeSelect style, removed flexbox, #1335
-
-### 1.0.4
-
-*2016-12-02*
-
-- Added `controls` attribute for Input Number, #1473
-- Fixed Checkbox Group and Radio Group async issue, #1511 #1514
-- Added `offset` attribute for Notification, #1419
-- Fixed Slider's value not accurate issue when dragging rapidly, #1458
-- Fixed Slider incorrectly showing multiple decimal digits issue, #1450
-- Fixed Select's binding value and displayed value not in sync in some conditions
-- Added `multiple-limit` and `allow-create` attributes for Select
-- Fixed Tree leaf nodes' triangle icon not disappear when expanded, #1438
-- Fixed Tree's view not updating issue after fetching child nodes' data, #1439
-- Fixed some Table's style issues in windows system, #1464 #1507
-- Fixed Table's first column's label not showing issue when grouping table head is used with fixed columns, #1451
-- Added `row-dblclick` event for Table, #1362
-
-### 1.0.3
-
-*2016-11-28*
-
-- Fixed `currentPage` of Pagination not working in some cases, #1336
-- Fixed `month` and `disabledDate` DatePicker's view not refreshing issue when switching year, #1158
-- Fixed `readonly` DatePicker clear button not disabled issue, #1238
-- Fixed Slider not working when binding value is `NaN` or `step` is smaller than 1, #1239 #1282
-- Added multi-header for Table, #1312
-- Added `rowStyle` for Table, #1348
-- Fixed some attributes of TableColumn can not dynamically assigned issue, #1314
-- Added `filter-node-method` attribute and `filter` method for Tree, #1257
-- Added `getCheckedKeys` and `setCheckedKeys` methods for Tree, #1254
-- Added deep nesting support for Checkbox/Radio inside Checkbox/Radio Group, #1152
-- Fixed Popper not triggering destroy issue when keep-alive, #1359
-- Added object deep validation for Form, #1363
-- Added `append` and `prepend` for Autocomplete, #1369
-- Added dynamic `pageSizes` support for Pagination, #1372
-- Added custom style API for checked buttons in Radio Button, #1380
-- Added assigning title via slot for Menu Group, #1382
-- Fixed DatePicker year switching bug, #1385
-- Added uploaded file list API for Upload, #1393
-- Added multi-type support for `label` attribute of Checkbox, #1400
-- Added `setChecked` method for Tree, #1422
-
-### 1.0.2
-
-*2016-11-18*
-
-- Added `context` for Table to specify which context to access inside of table columns, #1161
-- Added multiple languages
-- Fixed language's dynamic switching issue, #1160
-- Added `render-content` for Alert, #568
-- Added styles for focused Button, #982
-- Fixed `change` triggering timing in Switch, #1162
-- Fixed TimeSelect being disabled when start time is set to `00:00`, #676
-- Added `show-header` attribute and `header-click` method for Table, #1195
-- Improved `height` attribute for Table when set to a string, #1195
-- Fixed `selection-change` of Table not triggering in some cases, #1198
-- Fixed Table's fixed columns not disappear when `fixed` attribute is dynamically changed, #1182
-
-### 1.0.1
-
-*2016-11-16*
-
-- Fixed Pagination improperly triggering multiple `current-change` events
-- Fixed Switch style when nested in a Form, #967
-- Fixed Loading locks scroll of `body` in specific scenarios, #968
-- `span` of Col is no longer a required attribute, and its default value is `24` if omitted
-- Added `disabled` and `editable` attribute for DatePicker, #976
-- Fixed DatePicker readonly with native behavior, #976
-- Added `close` method for Message and Notification to manually close an instance
-- Added clear value feature for DatePicker, #759
-- Fixed Form reports an error when resetting a Date typed field, #937
-- Fixed Table render error using vue-loader 9.9.0
-- Added `align-center` attribute for Step, #994
-- Fixed Upload missing Progress component, #1013
-- Layout now supports responsive layout
-- Added `show-close` for Dialog
-- Fixed an error when `vue-i18n` is imported but not configured, #973
-- Fixed DatePicker not refresh view with an initial value, #1050
-- Fixed DiatePicker not refresh year when switched in month picker, #1070
-- Added $loading service
-- Added `manual` trigger in Popover
-- Added props: `nodeKey`, `emptyText`, `checkStrictly`, `defaultExpandAll`, `autoExpandParent`, `defaultCheckedKeys`, `defaultExpandedKeys` and method: `setCheckedNodes` for Tree
-
-### 1.0.0
-
-*2016-11-9*
-
-Element 1.0.0 released.
+  - Added `limit` and `on-exceed` attributes to limit the amount of files, #7405
+- DateTimePicker
+  - Added `time-arrow-control` attribute to activate `arrow-control` of the nesting TimePicker, #7438
+- Layout
+  - Added a new breakpoint `xl` for viewport wider than 1920px
+- Table
+  - Added `span-method` attribute for merging cells
+  - Added `clearSort` method to clear sorting programmatically
+  - Added `clearFilter` method to clear filter programmatically
+  - For expandable rows, when a row is expanded, a `.expanded` class will be added to its class list, so that you can customize its style
+  - Added `size` attribute
+  - Added `toggleRowExpansion` method to expand or collapse expandable rows programmatically
+  - Added `cell-class-name` attribute to assign class name for cells
+  - Added `cell-style` attribute to style cells
+  - Added `header-row-class-name` attribute to assign class name for header rows
+  - Added `header-row-style` attribute to style header rows
+  - Added `header-cell-class-name` attribute to assign class name for header cells
+  - Added `header-cell-style` attribute to style header cells
+  - TableColumn's `prop` attribute now accepts `object[key]` notations
+  - Added `index` attribute for TableColumn to customize row indices
+- Select
+  - Added `reserve-keyword` attribute for reserving current search keyword after selecting an option
+
+#### Bug fixes
+- DatePicker
+  - Fixed `v-model` returning the second day of the selected week in week mode #6038
+  - Fixed the first input being cleared in `daterange` type #6021
+- DateTimePicker
+  - Fixed DateTimePicker and TimePicker affecting each other when picked #6090
+  - Fixed hour and second can be beyond limit when selecting time #6076
+- TimePicker
+  - Fixed `v-model` not update correctly when blurred #6023
+- Dialog
+  - Fixed texts having blurry edges when opening and closing nesting dropdowns #6088
+- Select
+  - Improved performance. Now Vue dev-tool won't crash when a large number of Selects are destroyed #6151
+- Table
+  - Fixed a bug that Table remains hiding when its parent element appears from `display: none`
+  - Fixed Table expanding its width when its parent element has `display: flex`
+  - Fixed a bug that fixed columns of a Table with `append` slot would disappear when data is dynamically fetched
+  - Fixed `expand-row-keys` attribute not working with initial value
+  - Fixed filter failing when `data` updates
+  - Fixed a calculation error of fixed columns layout with grouped headers
+  - Fixed a dynamic `max-height` bug
+  - Fixed some style calculation errors
+
+#### Breaking changes
+- General
+  - Removed `theme-default`
+  - Compatible with Vue 2.5.2+ and IE 10+
+  - `change` event of form components and `current-change` event of Pagination now only trigger on user interaction
+  - `size` attribute of Button and form components now accept `medium`, `small` and `mini`
+  - To facilitate the use of third-party icons, `icon` attribute of Button and Steps, `prefix-icon` and `suffix-icon` attributes of Input now require a full class name
+- Dialog
+  - Removed `size` attribute. Now the size of Dialog can be configured by `width` and `fullscreen`
+  - Now the visibility of Dialog cannot be controlled by `v-model`
+- Rate
+  - `text-template` is renamed to `score-template`
+- Dropdown
+  - `menu-align` is renamed to `placement`. Now it supports more positions
+- Transfer
+  - `footer-format` is renamed to `format`
+- Switch
+  - Attributes starting with `on-*` will be parsed to events in JSX, making all `on-*` attributes of Switch not
+  able to work in JSX. So `on-*` attributes are renamed to `active-*`, and accordingly `off-*` attributes are renamed to `inactive-*`. This change affects the following attributes: `on-icon-class`, `off-icon-class`, `on-text`, `off-text`, `on-color`, `off-color`, `on-value`, `off-value`
+  - `active-text` and `inactive-text` attributes now don't have default values
+- Tag
+  - `type` attribute now accepts `success`, `info`, `warning` and `danger`
+- Menu
+  - Removed `theme` attribute. The color of Menu can be configured using `background-color`, `text-color` and `active-text-color`
+- Input
+  - Removed `icon` attribute. Now the suffix icon can be configured using `suffix-icon` attribute or `suffix` named slot
+  - Removed `on-icon-click` attribute and `click` event. Now to add click handler on icons, please use named slots
+  - `change` event now behaves like the native input element, which triggers only on blur or pressing enter. If you need to respond to user input in real time, you can use `input` event.
+- Autocomplete
+  - Removed `custom-item` attribute. Now the template of input suggestions can be customized using `scoped slot`
+  - Removed `props` attribute. Now you can use `value-key` attribute to designate key name of the input suggestion object for display
+- Steps
+  - Removed `center` attribute
+  - Now the Steps will fill its parent container by default
+- DatePicker
+  - The params of DatePicker's `change` event is now the binding value itself. Its format is controlled by `value-format`
+- Table
+  - Removed support for customizing column template using `inline-template`
+  - `sort-method` now aligns with `Array.sort`. It should return a number instead of a boolean
+  - `append` slot is moved outside the `tbody` element to avoid multiple rendering
+  - `expand` event is renamed to `expand-change`
+  - The params of `row-class-name` and `row-style` method is now an object
+
+##
+<i><sup>*</sup> Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.</i>
diff --git a/CHANGELOG.es.md b/CHANGELOG.es.md
new file mode 100644
index 0000000000..f154318e96
--- /dev/null
+++ b/CHANGELOG.es.md
@@ -0,0 +1,724 @@
+## Changelog
+
+### 2.4.9
+
+*2018-10-26*
+
+- The parameter of Form's  `clearValidate`  supports string, #12990 (by @codinglobster)
+- Added type attribute for Badge, #12991
+- Users can use scoped-slot to customize table column header #13012 (by @ivanseidel)
+- Fixed the input box of Select unable to type text under IE, #13034 (by @GaliMU)
+- Select option does not wrap when space is enough, #12329 (by @akki-jat)
+- When dropdown list of Select is expanded, the arrow icon will also display correctly, #12353 (by @firesh)
+- Fixed that the size attribute of Select does not work, #13070
+- Select multiple values can be cleared, #13049 (by @ZSkycat)
+- Fixed the last TabNav unable be deleted, #13039
+- Fixed that TabNav label is not displayed correctly, #13178
+- Added title slot for Alert, #13082 (by @Kingwl)
+- Fixed an issue where the tooltip content in Table was incorrect, #13159 (by @elfman)
+- Optimize the animation of Upload when file is deleted, #12987
+- Adjusted style of InputNumber when control button is not displayed, #13052
+
+### 2.4.8
+
+- No se muestra el contorno cuando Switch está enfocado, #12771
+- Arreglado el estilo del Dropdown en ButtonGroup, #12819 (por @bluejfox)
+- Añadido evento opened para Dialog, #12828
+- Corregido el orden incorrecto de visualización de TabNav, #12846
+- Corregido el problema de que Tabs no se desplazaba a la pestaña seleccionada, #12948
+- Corregido el problema de que el identificador no se mostraba cuando se arrastraba el Tree node, #12854
+- El parámetro validar evento de Form contiene el mensaje de validación, #12860 (por @YamenSharaf)
+- Se ha corregido el DatePicker que no verificaba la validez de la hora de entrada del usuario, #12898
+- Arreglado el problema de que el atributo `render-header` del encabezado de Table no funcionaba, #12914
+
+### 2.4.7
+
+*2018-09-14*
+
+- Corregido que DatePicker no activaba la validación del Form, #12328 #12348 
+- Corregidos el lanzamiento de errores del DatePicker en modo múltiple, #12347 
+- Corregida la posición incorrecta del spinner del DatePicker, #12415 (por @rang-ali)
+- Se ha corregido el llenado automático del input del DatePicker, #12521 (por @abdallanayer)
+- Corregida el input no resaltada en Cascader, #12341
+- Corregido el orden incorrecto de Tabpane, #12346 
+- Corregida la posición incorrecta del cursor de ColorPicker, #12376 (por @cnwhy)
+- Corregido el estilo del Submenú, #2457
+- Corregido el resaltado después de seleccionar el Submenú, #12479
+- Corregidos los valores incorrectos seleccionados por Cascader, #12508 (por @huangjinqiang)
+- Corregido el valor incorrecto del input de Paginación, #12525 
+- Se ha corregido el orden en que la paginación desencadena los eventos, #12530
+- Corregido que no se mostraba el Table Filter, #12539
+- Corregido Tree que era incapaz de borrar nodos, #12684
+- Corregida la altura de los Select Input que cambiaba en modo simple, #12719
+- Arreglado el estilo de la etiqueta FormItem en Form anidado, #12748
+- Añadido el atributo `autocomplete` para Input, obsoleto `auto-complete`, #12514 (por @axetroy)
+- Añadido el slots-scope de Form para mostrar la información de validación, #12715 (por @YamenSharaf)
+
+### 2.4.6
+
+*2018-08-09*
+
+- Arreglada la tabla que no mostraba el ícono del filtro cuando a  `filter` se les asignaba un array vacío, #12165
+- Arreglado Menu que no guardaba el estado activo cuando cambiaba `collapse` #12178 (por @elfman)
+- Se ha corregido que Cascader no escapaba a los caracteres especiales para Regexp, #12248
+- Se ha corregido que el RadioBotón deshabilitado mostraba la sombra de la caja cuando se hacía clic, #12262
+- Arreglado el efecto de la tecla de flecha en Select cuando el valor por defecto es `undefined`,#12322
+- Corregida la función de consulta de Select not debounced en modo multi, #12181
+- Corregida que la palabra clave de consulta de Select desaparecía en modo multi, #12304
+- Corregido el ancho incorrecto de Dialog cuando se muestra a pantalla completa, #12203
+- Corregida la visualización incorrecta de Main en IE, #12237
+- Corregido el trigger de Input con dos validaciones de Form, #12260
+- Arreglado el añadir un nuevo nodo de árbol que causaba que los nodos desaparecieran, #12256
+- Arreglado el nodo Tree no se borraba después de arrastrar, #12279
+- Popover corregido porque no era visible cuando InputNumber no enfocaba, #12284
+- Añadido el atributo `popper-append-to-body` para Autocompletar, #12241
+- Añadido el modificador `sync` para el atributo `page-size` de Pagination, #12281
+
+### 2.4.5
+
+*2018-07-26*
+
+- Se ha corregido en Table que `class-name` no funcionaba para las columnas `expand`, #12006
+- Se ha añadido el método `toggleAllSelection` para Table, #12047
+- Corregida la posición incorrecta del `suffix slot` cuando Input contiene Select, #12108 
+- Corregido que el `line-height` de Option no se establecia, #12120
+- Corregido que TimeSelect con valor por defecto `null` no podia ser asignado después de ejecutar `resetField`, #12010
+- Arreglado el evento `keydown` que cuando no era una tecla de flecha no funciona en Tree, #12008
+- Corregido nodo padre checked en modo lazy, #12106
+- Añadido el parámetro `includeHalfChecked` para getCheckedNodes de Tree, #12014
+
+### 2.4.4
+
+*2018-07-13*
+
+- Corregido que se disparaba la validacion del Select después de reajustar el formulario, #11837
+- Corregida la posición incorrecta del slot Input `suffix`  cuando se usaba el slot `suffix` con el slot  `append`  , #11951
+- Corregido el clearable Input que muestraba el icono de borrado cuando era readonly, #11967
+- Arreglado el nodo Tree checked cuando estaba disabled, #11847
+- Corregido que  `default-checked-keys`  no funcionaba en Tree, #11971
+- Corregido que el `empty-text` no era visible cuando el nodo Tree se filtraba, #11971
+- Arreglada la posición de texto vacío sobredimensionado en Table, #11965
+- Corregido que la fila de la tabla no se modificado el resaltado cuando `current-row-key` era asignada a null, #11866
+- Arreglado que mostraba el filtro del dropdown cuando los filtros eran un array vacío, #11864
+- Corregido que el cambio de label de Radio no detenia propagacion de eventos, #11912
+
+### 2.4.3
+
+*2018-07-03*
+
+- Corregido `allow-drop` que no funcionaba correctamente cuando los nodos de árbol tenian una altura personalizada, #11797
+- Ahora puede pasar un parámetro al método `clearValidate` de Form, especificando qué resultados de validación de `FormItems` necesita borrar, #11821
+- Añadido el atributo `distinguishCancelAndClose` para MessageBox, #11831
+
+### 2.4.2
+
+*2018-06-26*
+
+- Ahora el `class-name` y el `label-class-name` de la tabla son reactivos, #11626
+- Arreglado que Table seguia resaltando la fila en la que se había hecho clic cuando  `highlight-current-row` era `false`, #11646
+- Corregido un error de estilo de ButtonGroup cuando sólo habia un botón `round` o `circle`, #11605
+- Arreglado estilo del tamaño de página del Select de Pagination, #11622
+- Corregido un error del método `open`  de los Menús cuando se cambiaba dinámicamente `collapse`, #11646
+- Añadidos los parámetros `activeName` y `oldActiveName` al gancho before-leave de Tabs, #11713
+- Arreglado el focus en Cascader después de hacer clic fuera, #11588
+- Arreglado que Cascader no se cerraba cuando se hacia clic en la opción estando `change-on-select` como `true`, #11623
+- Ahora la actualización del valor de Select programáticamente activará la validación de formulario, #11672
+
+### 2.4.1
+
+*2018-06-08*
+
+- Removida la declaración duplicada de type en Autocompletar, #11388
+- Corregido el estilo de flecha en el dropdown de Select en FireFox cuando se anidaba en el formulario, #11427
+- Corregido que el ícono `clear` de Select seguia apareciendo cuando el valor inicial era `null`, #11460
+- Arreglado que cuando el radio estaba `disabled` mostraba el box-shadow al hacer click, #11462
+- Añadido el atributo `iconClass` para MessageBox, #11499
+- Añadido el atributo `stretch` para Tabs, #11476
+- Arreglado el problema de orden de renderizado de TabPane cuando Tabs es `lazy`, #11461
+- Arreglado que Table no retenia la fila actual de resaltados cuando se expandia, #11464
+- Arreglado que  focusing state cuando `before-leave` devolvia una promesa resuelta, #11386
+- Arreglado que Popover deshabilitado seguia creando poppers, #11426
+- Arreglado el bucle sin fin de Tree cuando se añadia un nuevo nodo en modo `lazy`, #11430 (por @wangjingf)
+- Añadido el evento `closed` para Dialog, #11490
+
+### 2.4.0 Fullerene
+
+*2018-05-28*
+
+#### Nuevas características
+- Generalidades
+  - La herramienta de desarrollo y el empaquetador se cambiaron a webpack nativo, #11216
+  - Ahora puede configurar globalmente el z-index inicial de los popups, #11257
+- Autocomplete
+  - Añadido el atributo `hide-loading`, #11260
+- Button
+  - Ahora se puede usar el atributo `size` en los botones circulares para controlar sus tamaños, #11275
+- InputNumber
+  - Añadido el atributo `precision`, #11281
+- Tabs
+  - Añadido el atributo `before-leave`, #11259
+  - Añadido el atributo `lazy`, #11167（by @Kingwl）
+- Table
+  - Añadido el método `sort` para ordenar manualmente la tabla, #11311
+
+#### Corrección de errores
+- Input
+  - Se ha corregido un problema que provocaba que se volviera a procesar al utilizar el IME chino para introducir texto rápidamente, #11235 (por @STLighter).
+- Popover
+  - Corregido el error de la consola cuando el elemento disparador es Radio o Checkbox, #11265
+- Breadcrumb
+  - Arreglado el atributo `to` que no soportaba la actualización dinámica, #11286
+- Upload
+  - Corregido el error de la consola cuando se resolvia el Archivo en la Promesa devuelta del método `beforeUpload`, #11297 (por @qusiba)
+- Tooltip
+  - Solucionado que la flecha no se  posicionaba correctamente cuando el contenido estaba vacío, #11335
+- Autocompletar
+  - Corregido que  las sugerencias de entrada eran  incorrectas después de eliminar la palabra clave rápidamente, #11323
+- ColorPicker
+  - Corregido el evento `active-change` que se disparaba incorrectamente cuando el menú desplegable del picker estaba cerrado, #11304
+- Table
+  - Corregido el error de estilo del panel de filtro cuando se sobredimensionaba, #11314
+  - Corregida que la fila seleccionada actualmente no se retenia cuando se ordenaba la tabla, #11348
+- CheckBox
+  - Arreglado que cuando el checkbox era único no soportaba validación, #11271
+- Radio
+  - Arreglado que el Radio desactivado seguia estando seleccionada cuando se pulsaba la tecla espaciadora, #11303
+- MessageBox
+  - Corregida la clase `el-popup-parent--hidden` que no se eliminaba al abrir MessageBox sucesivamente, #11371
+
+### 2.3.9
+
+*2018-05-18*
+
+- Corregido que cuando los datos de origen no tenian el campo especificado por el atributo `prop` de una TableColumn, se producía un error al moverse el ratón dentro de las celdas de esa columna, #11137.
+- El atributo `lockScroll` de los componentes pop-up ya no añade un inline style al elemento padre, sino que añade un nombre de clase, #1111114.
+- Arreglado el icono de Progreso que no se mostraba cuando su `status` era `exception`, #11172
+- El atributo `disabled` no funcionaba en la lista de resultados del filtro de Cascader, #11185
+- Se ha corregido un problema por el que la fila expandida de la Tabla no se podía contraer si los datos de origen se actualizaban después de su expansión, #11186.
+- `setCurrentKey` de Tree ahora acepta `null` como parámetro para cancelar el nodo actualmente resaltado, #11205
+
+### 2.3.8
+
+*2018-05-11*
+
+- Corregido que el panel DatePicker saltaba al mes actual después de escoger una fecha en un mes diferente cuando el tipo era `dates`, #10973
+- Arreglado que el `clearable Input` seguía mostrando el icono de borrado cuando era sólo de lectura, #10912
+- Arreglado que al cerrar el panel DatePicker sin modificar el valor se desencadenaba incorrectamente el evento `change`, #11017
+- Arreglado que la navegación por el teclado no funcionaba correctamente cuando Select tenia opciones agrupadas, #11058
+- Agregado el `slot named` `prefix` para Select, #11063
+- Agregado  el metodo `clearValidate` para FormItem, #11076
+- Agregado el atributo `checkOnClickNode` para Tree, #11111
+
+### 2.3.7
+
+*2018-04-29*
+
+- Corregido que Table no actualizaba el ancho de encabezado cuando la barra de desplazamiento desaparecia debido al filtrado, #10834
+- Corregido input borrable que mostraba el icono de borrado cuando su valor inicial era `nulo`, #10912
+- Corregido el disparador incorrecto del evento `active-change` después de cambiar el valor enlazado de ColorPicker programáticamente, #10903 (por @zhangbobell)
+- Corregido filterable Select que causaba un bucle infinito al navegar por las opciones usando el teclado si todas las opciones estában deshabilitadas, #10945
+
+### 2.3.6
+
+*2018-04-21*
+
+- Corregido el comportamiento incorrecto del callback  `allow-drop` de Tree cuando se usaba el parámetro `type`, #10821
+- Ahora puede introducir correctamente las palabras clave en filterable Single Select en IE11, #10822
+- Corregido Single Select activaba incorrectamente el evento `blur` después de hacer clic en una opción, #10822
+
+### 2.3.5
+
+*2018-04-20*
+
+- Arreglado los incorrectos realces en el panel de DatePicker cuando `type` es week, #10712
+- Arreglado que InputNumber comenzaba vacio cuando el valor inicial era 0, #10714
+- Agregado el atributo  `automatic-dropdown` para Select, #10042 (by @Seebiscuit)
+- Arreglado que el valor del Rate pasaba a `disabled` cuando se comenzaba a actualizar con las teclas de navegacion, #10726 (by @Richard-Choooou)
+- Ahora el atributo `type` de DatePicker's puede ser  `'dates'`, donde puede elegir varias fechas en un solo picker, #10650 (by @Mini256)
+- Agregados los eventos  `prev-click` y `next-click` para Pagination, #10755
+- Agregado el atributo `pager-count` para Pagination, #10493 (by @chongjohn716)
+- Agregado `type` como 3rd parametro del atributo  `allow-drop`  de Tree, #10792
+- Ahora usamos ResizeObserver para detectar el redimensionamiento de elementos DOM, #10779
+
+### 2.3.4
+
+*2018-04-12*
+
+- Eliminado el atributo duplicado  `showTimeout` en SubMenu's en la declaracion TypeScript, #10566 (by @kimond)
+- Ahora se puede personalizar los datos de los items de Transfer usando scoped slot, #10577
+- Arreglado que los click de los botones `next` y `prev`  en Pagination se deshabilitaban cuando se disparaba el evento  `current-change`, #10628
+- Arreglado que Textarea mostraba `undefined` en SSR cuando el valor no era asignado, #10630
+- Arreglado que se deshabilitaba el estilo del TabItem cuando  `type` era border-card, #10640
+- Agregado `$index` como cuarto parametro en el atributo de las columnas de Table  `formatter` , #10645
+- Arreglado que CheckboxButton no se exportaba en la declaracion de TypeScript, #10666
+
+### 2.3.3
+
+*2018-04-04*
+
+- Agregar atributo `shadow` para Card, #10418 (by @YunYouJun)
+- Se ha corregido el error de ocultar Badge cuando `value` es `0`, #10470
+- Arreglados algunos bugs del draggable Tree, #10474 #10494
+- Agregado `placement` para Autocomplete, #10475
+- Ahora el atributo `default-time` también funciona en un rango que no es el rango DateTimePicker, #10321 (by @RickMacTurk)
+- Eliminado el contorno azul de TabItem después de que el navegador se desdibuja o se minimiza, #10503
+- Agregado el atributo `popper-append-to-body` para SubMenu, #10515
+- Eliminado el feedback visual cuando se desplaza sobre non-link BreadcrumbItem, #10551
+- Se ha corregido el evento `change` de InputNumber para garantizar que el valor de ligado del componente se actualiza en el control de eventos, #10553
+
+### 2.3.2
+
+*2018-03-29*
+
+- Arreglada una regresión de Autocompletar, #10442
+
+### 2.3.1
+
+*2018-03-29*
+
+- Se ha corregido una regresión por la que el `type` de input no se transmitia al elemento de entrada nativo, #10415
+- Agregado el metodo `blur` para Select, #10416
+
+### 2.3.0 Diamond
+
+*2018-03-28*
+
+#### Nuevas características
+- Table
+  - Ahora `formatter` de TableColumn puede ser actualizado dinámicamente, #10184 (by @elfman)
+  - Agregado el atributo  `select-on-indeterminate`, #9924 (by @syn-zeta)
+- Menu
+  - Agregado el atributo `collapse-transition`, #8809 (by @limichange)
+- Input
+  - Agregado el metodo `select` , #10229
+  - Agregado el metodo `blur`, #10356
+- ColorPicker
+  - Agregado el atributo `predefine`, #10170 (by @elfman)
+- Tree
+  - Agregados los atributos `draggable`, `allow-drop` y `allow-drag`, y los eventos `node-drag-start`, `node-drag-enter`, `node-drag-leave`, `node-drag-over`, `node-drag-end` y `node-drop`, #9251 #10372 (by @elfman)
+- Form
+  - El metodo `validate` ahora acepta un segundo parametro, que contiene información de los ítems  del formulario que no superaron la validación, #10279
+  - Agregado el evento  `validate`, #10351
+- Progress
+  - Agregado el atributo `color`, #10352 (by @YunYouJun)
+- Button
+  - Agregado el atributo `circle`, #10359 (by @YunYouJun)
+
+#### Bug's arreglados
+- Form
+  - Solucionado: Label del FormItem no se alineaba adecuadamente con Input mixto, #10189
+- Menu
+  - Ahora collapsed Menu sólo mostrará el Tooltip cuando el slot `title` de MenuItem esté configurado, #10193 (by @PanJiaChen)
+- Pagination
+  - Corregido el evento  `current-change`  que se disparaba erróneamente sin interacción del usuario, #10247
+- DatePicker
+  - Ahora la fecha y la hora en el panel desplegable están correctamente formateadas según el atributo `format`, #10174（by @remizovvv）
+- Upload
+  - Solucionado el atributo `accept` no trabajaba cuando `drag` era true, #10278
+
+### 2.2.2
+
+*2018-03-14*
+
+- Agregado el evento `clear` para Input, #9988 (by @blackmiaool)
+- Ahora la entrada manual de ColorPicker soporta los modos `hsl`, `hsv` y `rgb`, #9991
+- Arreglado DatePicker no desencadenaba el evento `change` cuando se borraba su valor inicial, #9986
+- Ahora la clase de iconos relacionadas con los atributos de Rate soporta actualizaciones dinamicas, #10003
+- Arreglado Table que con columnas `fixed` no actualizaban correctamente su altura si se fijaba `max-height`, #10034
+- Ahora DatePicker en modo rango admite la selección inversa (haciendo clic en la fecha final y, a continuación, haciendo clic en la fecha de inicio), #8156 (by @earlymeme)
+- Agregado el atributo `disabled` para Pagination, #10006
+- Agregados los eventos `after-enter` y ` after-leave` para Popover, #10047
+- Arreglado Select no disparaba validación cuando el usuario seleccionaba una opción después de ejecutar `resetFields` de Form, #10105
+- Arreglado anchos incorrectos de columnas fijas de Table en algunos casos, #10130
+- Corregido MessageBox heredaba el atributo `title` de su instancia anterior cuando se llamaba sin `title`, #10126 (by @Pochodaydayup)
+- Agregado el atributo `input-size` para Slider, #10154
+- Agregados los eventos  `left-check-change` y `right-check-change` para Transfer, #10156
+
+### 2.2.1
+
+*2018-03-02*
+
+- Corregido Aside, Header y Footer que se contraia en algunos layout, #9812
+- Corregido Table con un atributo `height`  no renderizaba en SSR, #9876
+- Corregido Table con fila expandible no calculaba la altura cuando la fila era expandida, #9484
+- Corregido que cuando se escribia la fecha de forma manual en DateTimePicker no se disparaba el evento  `change`, #9913
+- Corregido que Select mostraba sus opciones cuando se hacia click con el botón derecho del mouse en el Input, #9894 (by @openks)
+- Agregado el atributo `tooltip-class` para Slider, #9957 
+- Ahora Select permanecera enfocado despues de la selección, #9857 (by @Seebiscuit)
+- Agregado el atributo `target-order` para Transfer, #9960
+
+### 2.2.0 Graphite
+
+*2018-02-12*
+
+#### New features
+- Menu
+  - Agregados los atributos  `popper-class` y `disabled` para SubMenu, #9604 #9771
+  - Menu Horizontal ahora soporta SubMenu multi-capas, #9741
+- Tree
+  - Agregado el evento `node-contextmenu`, #9678
+  - Ahora se puede personalizar el template del nodo usando scoped slot, #9686
+  - Agregados los metodos  `getNode`, `remove`, `append`, `insertBefore`, `insertAfter`, `getCheckedKeys`, `getHalfCheckedNodes`, `getHalfCheckedKeys` y el evento `check`, #9718 #9730
+- Transfer
+  - Agregado el metodo `clearQuery`, #9753
+- Select
+  - Agregado el atributo `popper-append-to-body`, #9782
+
+#### Bug fixes
+- Table
+  - Corregido el icono de expansión de una fila expandible que al hacer click activaba el evento `row-click`, #9654
+  - Corregido el layout que no se actualizaba cuando el ancho de columna era cambiado por el usuario arrastrando, #9668
+  - Corregido problema de estilo cuando la fila de resumen coexistia con columnas fijas, #9667
+- Container
+
+  - Corregido componentes del Container que no se estiraban en IE11, #9655
+- Loading
+
+  - Corregido Loading no se mostraba cuando el valor de `v-loading` era cambiado a true en el `hook`  `mounted`, #9722
+- Switch
+  - Corregido se disparaban los dos eventos nativos de click cuando se hacia click en el Switch, #9760
+
+    ​
+
+### 2.1.0 Charcoal
+
+*2018-01-31*
+
+#### New features
+- Cascader
+  - Agregados los eventos `focus` y `blur`, #9184 (by @viewweiwu)
+- Table
+  - El `filter-method` ahora tiene un tercer parámetro `column`, #9196 (by @liyanlong)
+- DatePicker
+  - Agregados los atributos `prefix-icon` y `clear-icon`, #9237 (by @AdamSGit)
+  - Agregado el atributo `default-time`, #9094 (by @nighca)
+  - `value-format` ahora soporta `timestamp`, #9319 (by @wacky6)
+- InputNumber
+  - Ahora el valor vinculado puede ser `undefined`, #9361
+- Select
+  - Agregado el atributo `auto-complete`, #9388
+- Form
+  - Agregado el atributo `disabled`, #9529
+  - Agregado el atributo `validateOnRuleChange`, #8141
+- Notification
+  - Agregado el metodo `closeAll`, #9514
+
+#### Bug fixes
+- InputNumber
+  - Arreglado el reseteo del valor cuando tiene punto decimal, #9116
+- Dropdown
+  - Arreglado el dropdown menu que tenia un posicionamiento incorrecto cuando la página sólo tiene una barra de desplazamiento horizontal en algunos navegadores, #9138 (by @banzhuanmei)
+- Table
+  - Corregido un error en el cálculo del número de columnas fijas después de que los datos de la columna cambian, #9188（by @kolesoffac）
+  - Corregido el borde de la última columna de la cabecera agrupada que no se visualizaba correctamente., #9326
+  - Corregido el posicionamiento incorrecto del header de la tabla en Safari, #9327
+  - Corregido fila expandida colapsaba cuando cambiaban los datos de la tabla, #9462
+  - Corregido renders múltiples innecesarios en algunas condiciones, #9426
+  - Corregido un error de calculo en el ancho de la columna cuando `width` cambiaba en TableColumn, #9426
+- Loading
+  - Corregido que en algunas ocasiones el loading no se ocultaba correctamente, #9313
+- DatePicker
+  - Corregido el metodo `focus` que no funcionaba en modo `range`, #9437
+  - Corregido si se hacia clic en el botón "now" seguia seleccionando la fecha actual aunque estuviera desactivado, #9470 (by @wacky6)
+  - Corregido fijación de fechas al navegar, #9577 (by @wacky6)
+- Steps
+  - Corregido error de estilos en IE 11, #9454
+
+#### Breaking changes
+- Menu
+  - El menú desplegable en modo `collapse` ahora se agrega directamente al `body`, de modo que es visible cuando está anidado en Aside, #9263
+- Table
+  - Ahora, al marcar los checkboxes en la Tabla de selección múltiple no se activa el evento `row-click`, #9467
+- Loading
+  - El `z-index` de la máscara de carga non-fullscreen se cambia a 2000. El `z-index` de la máscara de carga fullscreen se actualiza dinámicamente con los componentes emergentes, #9522
+- Dropdown
+  - Los atributos `show-timeout` y `hide-timeout` ahora solo trabajan si se dispara `hover`, #9573
+
+### 2.0.11
+
+*2018-01-08*
+
+- Corregido el problema de color del borde del Select cuando está el slot `prepend` o `append`  del Input, #9089
+- Corregido el parámetro  `remove-tag` de Select, #9090
+- Añadido los atributos `show-timeout` y `hide-timeout` para SubMenu, #8934 (por @HugoLew)
+- Corregido el estilo de Tooltip de  `show-overflow-tooltip`  que faltaba cuando Table era importada bajo demanda, #9130
+- Se ha corregido el mal funcionamiento de ordenación de la columna de Table despues que  `clearSort`  era ejecutado en esa columna, #9100 (por @zEmily)
+- El fichero de configuración i18n para el checo se renombra de `cz` a `cs-CZ`, #9164
+
+### 2.0.10
+
+*2017-12-29*
+
+- Corregido el calculo incorrecto de la altura máxima de Table cuando fixed column y summary row coexisten, #9026
+- Solucionado el estilo de color que no lo compilaba para textos vacíos en Table, #9028
+- Ahora DatePicker sólo emite el evento `change` cuando el valor cambia verdaderamente, #9029 (by @remizovvv)
+- Añadido atributo `tabindex` para Input, #9041 (by @dicklwm)
+
+### 2.0.9🎄
+
+*2017-12-24*
+
+- Añadida la función de enganche (hook) `before-remove`  para Upload, #8788 (by @firesh)
+- Arreglado el valor inicial de error que no funcionaba para FormItem, #8840
+- Ahora la directiva Loading soporta nombre de clase personalizado asignando el atributo `element-loading-custom-class`, #8826 (por @earlymeme)
+- Arreglado CarouselItem que se ponía invisible cuando los datos eran actualizados asincrónicamente, #8921
+- Añadido el atributo `renderAfterExpand` para Tree, #8972
+
+### 2.0.8
+
+*2017-12-12*
+
+- Agregada la documentacion en español
+- Arreglado `show-timeout` de Dropdown que no funcionaba cuando se disparaba el click, #8734 (por @presidenten)
+- Arreglado el tiempo de validacion del Form cuando se disparaba el blur, #8776
+- Arreglado el evento de perdida de foco (blur) del DatePicker por rangos, #8784
+- `format` de TimePicker ahora soporta AM/PM, #8620 (por @firesh)
+
+### 2.0.7
+
+*2017-11-29*
+
+- Solucionado el estilo disabled en el texto de button, #8570
+
+### 2.0.6
+
+*2017-11-29*
+
+- Corregido error de estilo de los iconos de ordenación de Table, #8405
+- Corregido activacion para Popover cuando `trigger` es manual, #8467
+- Añadidos los atributos `prefix-icon` y `suffix-icon`  para Autocomplete, #8446 (por @liyanlong)
+- Añadido el atributo `separator` para Cascader, #8501
+- Añadido atributo `clearable` para Input, #8509 (por @lbogdan)
+- Añadido atributo `background` para Pagination, #8553
+
+### 2.0.5
+
+*2017-11-17*
+
+- Solucionado regresion en 2.0.4 de Popover, Tree, Breadcrumb and Cascader, #8188 #8217 #8283
+- Solucionado Fuga de memoria de la directiva clickoutside, #8168 #8225 (por @badpunman @STLighter)
+- Solucionada la altura en multiple Select cuando se borra su valor, #8317 (por @luciy)
+- Añadido el atributo `collapse-tags` para multiple Select  para reemplazar las tags con una línea de texto, #8190
+- Solucionado el alto consumo de CPU causado por Table cuando esta oculta, #8351
+- Ahora puede usar el método `doLayout` de Table para actualizar su diseño, #8351
+
+### 2.0.4
+
+*2017-11-10*
+
+- Accesibilidad mejorada para Cascader, Dropdown, Message, Notification, Popover, Tooltip y Tree
+- Arreglado el cambio de tamaño del Container cuando el ancho de la vista disminuye, #8042
+- Arreglado Tree's `updateKeyChildren` borraba incorrectamente los nodos hijos, #8100
+- Arreglado la altura de los bordes de CheckboxBotón's cuando esta anidado en un Form, #8100
+- Arreglado error de análisis de los Menu's para los colores personalizados, #8153 (por @zhouyixiang)
+
+### 2.0.3
+
+*2017-11-03*
+
+- Solucionado atributos `editable` and `readonly` de DatePicker de los rangos, #7922
+- Corregido error de estilo de los Tabs anidados, #7941
+- Corregido error de estilo del último Step de Steps verticales, #7980
+- Corregido el tiempo de activación del evento `current-change`  para Pagination, #7995
+- Corregido Tooltip no registrado en el Menu, #7995
+
+### 2.0.2
+
+*2017-10-31*
+
+- Ahora haciendo clic con el botón derecho del ratón en los botones de InputNumber no cambiará su valor, #7817
+- El metodo `validate` de Form ahora puede esperar por validaciones asíncronas antes de ejecutar su devolución de llamada, #7774 (por @Allenice)
+- Corregido la selección de rango de DatePicker no funcionaba en los navegadores Chromium 53-57, #7838
+- Corregido la perdida de previsualización e iconos de eliminar de Upload cuando su `list-type` es picture-card, #7857
+- Añadido el atributo `sort-by` para TableColumn, #7828 (por @wangfengming)
+- Corregido que a veces DatePicker muestra un número de año incorrecto al seleccionar la primera semana en modo week, #7860 (por @hh23485)
+- Corregido error de estilo de icono de Step vertical, #7891
+- El área hot para las flechas de nodo en Tree se expandia, #7891
+
+### 2.0.1
+
+*2017-10-28*
+
+- Corregido error de estilo de RadioButton y CheckboxButton, #7793
+- Corregido TimePicker no responde al desplazamiento del ratón en algunas condiciones, #7811
+- Corregido estilos incompletos de algunos componentes cuando se importan bajo demanda, #7811
+
+### 2.0.0 Carbon
+
+*2017-10-27*
+
+#### New features
+
+- General
+  - Un nuevo tema:  `theme-chalk`
+  - Se ha mejorado la accesibilidad de los siguientes componentes: Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload
+  - Añadido tipografías TypeScript
+  - Todos los iconos existentes son rediseñados. Se han añadido algunos iconos nuevos
+  - Añadida una serie de clases de utilidades basadas en puntos de ruptura que ocultan elementos cuando el tamaño del viewport cumple ciertas condiciones
+  - Componentes de diseño añadidos: Container, Header, Aside, Main, Footer.
+  - Ahora puede configurar los tamaños de componentes a nivel global. Al importar Element, puede añadir un objeto de configuración global con un prop `size` para configurar tamaños predeterminados para todos los componentes.
+- Button
+  - Atributo `round` añadido. Se usa para botones de esquinas redondas #6643
+- TimeSelect
+  - Ahora puede ser navegado por  `Up` y `Down`, y presionando `Enter` selecciona la hora #6023
+- TimePicker
+  - Ahora puede ser navegado por  `Up` y `Down`, y presionando `Enter` selecciona la hora #6050
+  - Añadido `start-placeholder` y `end-placeholder`. Son placeholder's para las dos casillas de input en modo range #7169
+  - Añadido el atributo `arrow-control` para hacer girar el tiempo con las flechas #7438
+- Tree
+  - Ahora los nodos hijo no se renderizan antes de la primera expansión #6257
+  - Añadido el atributo `check-descendants`. Determina si los nodos hijo se seleccionan al seleccionar su nodo padre en modo `lazy` #6235
+- Tag
+  - Atributo `size` añadido #7203
+- Datepicker
+  - Ahora `timeFormat` puede dar formato al TimePicker cuando type está configurado en `datetimerange` #6052
+  - Añadido `start-placeholder` y `end-placeholder`. Son placeholder's para las dos casillas de input en modo range #7169
+  - Atributo `value-format` añadido para personalizar el formato del valor enlazado, #7367
+  - Añadido el atributo `unlink-panels` para desacoplar los dos paneles de fechas al seleccionar un rango.
+- MessageBox
+  - Añadido el atributo `closeOnHashChange` #6043
+  - Atributo `center` agregado para que el contenido pueda ser centrado #7029
+  - Añadido atributo `roundButton` para mostrar Botones redondeados #7029
+  - Añadido atributo  `dangerouslyUseHTMLString`. Cuando está configurado en true, el mensaje será analizado como cadena HTML<sup>*</sup> #6043
+  - Añadido atributo `inputType` para asignar el tipo para el input interno, #7651
+- Dialog
+  - Añadidos los atributos `width`, `fullscreen`, `append-to-body`. Ahora Dialog puede ser anidado
+  - Atributo `center` agregado para que el contenido pueda ser centrado #7042
+  - Añadidos  `focus-after-closed`, `focus-after-open`  para mejorar la accesibilidad #6511
+- ColorPicker
+  - Ahora puede escribir colores en el input #6167
+  - Añadidos atributos `size` y `disabled` #7026
+  - Añadido atributo `popper-class` #7351
+- Message
+  - Ahora el color de los iconos puede ser sustituido por CSS #6207
+  - Añadido atributo  `dangerouslyUseHTMLString`. Cuando está configurado en true, el mensaje será analizado como cadena HTML<sup>*</sup> #6207
+  - Atributo `center` agregado para que el contenido pueda ser centrado #6875
+- Notification
+  - Añadido atributo `position` para configurar donde aparece Notification #6231
+  - Añadido atributo `dangerouslyUseHTMLString` . Cuando está configurado en true, el mensaje será analizado como cadena HTML<sup>*</sup> #6231
+  - Añadido el atributo `showClose` para ocultar el botón de cierre #6402
+- Rate
+  - Añadido el atributo `show-score` para determinar si la puntuación actual se muestra #6295
+- Tabs
+  - Añadido el atributo `tab-position`  #6096
+- Radio
+  - Añadidos los atributos `border` y `size`  #6690
+- Checkbox
+  - Añadidos los atributos `border` y `size`  #6690
+- Alert
+  - Atributo `center` agregado para que el contenido pueda ser centrado #6876
+- Menu
+  - Añadidos los atributos  `background-color`, `text-color` y `active-text-color` #7064
+  - Añadidos los methods  `open` and `close` para abrir y cerrar los SubMenu con programación, #7412
+- Form
+  - Añadido el atributo  `inline-message`  para determinar si el mensaje de validación se muestra inline #7032
+  - Añadido el atributo `status-icon` para mostrar un icono de retroalimentación cuando se valida #7032
+  - Form y FormItem ahora tienen un atributo `size`. Los componentes internos heredarán este tamaño si no se especifica en ellos mismos, #7428
+  - Método `validate` devolverá ahora una promesa si se omite la llamada de retorno, #7405
+  - Añadido método `clearValidate` para limpiar los resultados de las validaciones de todos los form items, #7623
+- Input
+  - Añadido slots con nombres `suffix` y `prefix` y atributos `suffixIcon` y `prefixIcon`  para añadir contenido dentro del input #7032
+- Breadcrumb
+  - Añadido el atributo `separator-class` para dar soporte a los iconos como separadores de items #7203
+- Steps
+  - Añadido atributo `simple` para activar Steps de estilo sencillo #7274
+- Pagination
+  - Añadidos los atributos `prev-text` y `next-text` para personalizar los textos de la página anterior y de la página siguiente #7005
+- Loading
+  - Ahora usted puede personalizar el ícono del spinner y el color de fondo con los props  `spinner` y `background` , #7390
+- Autocomplete
+  - Añadido atributo `debounce`, #7413
+- Upload
+  - Añadidos los atributos `limit` and `on-exceed` para limitar la cantidad de archivos, #7405
+- DateTimePicker
+  - Añadido el atributo `time-arrow-control` para activar `arrow-control` del TimePicker anidado, #7438
+- Layout
+  - Añadido un nuevo breakpoint `xl` para viewport más ancho que 1920px
+- Table
+  - Añadido el atributo `span-method` para combinar celdas
+  - Añadido el método `clearSort` para borrar la clasificación programáticamente
+  - Añadido el método `clearFilter` para limpiar el filtro de forma programática
+  - Para las filas ampliables, cuando se amplía una fila, se añadirá una clase `.expanded` a su lista de clases, para que pueda personalizar su estilo.
+  - Atributo de `size` añadido
+  - Añadido el método `toggleRowExpansion` para expandir o contraer filas expandibles programáticamente.
+  - Añadido el atributo `cell-class-name` para asignar el nombre de la clase para las celdas
+  - Añadido atributo `cell-style` para dar estilo a las celdas
+  - Añadido atributo `header-row-class-name` para asignar el nombre de clase para las filas de encabezado.
+  - Añadido un atributo `header-row-style` para el estilo de encabezado
+  - Añadido el atributo `header-cell-class-name` para asignar el nombre de la clase para las celdas de encabezado.
+  - Añadido el atributo `header-cell-style` a las celdas de encabezado de estilo
+  - El atributo prop de TableColumn ahora acepta las notaciones  `object[key]`
+  - Atributo de `index` añadido para TableColumn para personalizar índices de filas
+- Select
+  - Añadido el atributo `reserve-keyword` para reservar la palabra clave de búsqueda actual después de seleccionar una opción.
+
+#### Bug fixes
+
+- DatePicker
+  -  Arreglado  `v-model`  que devolvia el segundo día de la semana seleccionada en modo week #6038
+  -  Arreglado el primer input comenzaba borrado con el type `daterange`  #6021
+- DateTimePicker
+  - Arreglado DateTimePicker y TimePicker que se afectaban entre sí cuando se seleccionaban #6090
+  - Arreglado la hora y el segundo podian estar más allá del límite al seleccionar el tiempo #6076
+- TimePicker
+  - Arreglado `v-model` que no se actualizaba correctamente cuando no tenia el foco #6023
+- Dialog
+  - Arreglado textos que tenian bordes borrosos al abrir y cerrar dropdowns anidados #6088
+- Select
+  - Rendimiento mejorado. Ahora Vue dev-tool no se bloqueará cuando un gran número de Selects sean destruidos #6151
+- Table
+  - Corregido un bug de Table permanecía oculto cuando su elemento padre tenia el atributo   `display: none`
+  - Arreglado Table ahora amplia su ancho cuando el elemento padre tiene `display: flex`
+  - Arreglado un bug que corregía las columnas de una tabla con slot con nombre  `append`   que  desaparecia cuando los datos eran recuperados dinámicamente.
+  - Arreglado el atributo `expand-row-keys` que no funcionan con el valor inicial
+  - Fallo del filtro corregido al actualizar los datos
+  - Se ha corregido un error de cálculo de la disposición de columnas fijas con cabeceras agrupadas.
+  - Corregido un error de `max-height` dinámico
+  - Corregidos algunos errores de cálculo de estilo
+
+#### Breaking changes
+
+- General
+  - Eliminado `theme-default`
+  - Compatible con Vue 2.5.2+ e IE 10+
+  - Evento `change`  de componentes del formulario y evento `current-change` de Pagination ahora sólo se activa en la interacción del usuario.
+  - El atributo `size` del botón y los componentes del formulario aceptan ahora los tamaños `medium`, `small` y `mini`.
+  - Para facilitar el uso de iconos de terceros, los atributos `icon` de Button y Steps y los atributos  `prefix-icon` y `suffix-icon`  del input ahora requieren un nombre de clase completo.
+- Dialog
+  - Atributo `size` eliminado. Ahora el tamaño de Dialog se puede configurar con  `width` y `fullscreen`
+  - Ahora la visibilidad del Diálogo no puede ser controlada por `v-model`
+- Rate
+  - `text-template` a sido renombrado a `score-template`
+- Dropdown
+  - `menu-align` a sido renombrado a `placement`. Ahora soporta más posiciones
+- Transfer
+  - `footer-format` a sido renombrado a `format`
+- Switch
+  - Los atributos que comienzan con `on*` serán analizados en eventos en JSX, haciendo que todos los atributos `on*` de Switch no puedan trabajar en JSX. Por lo tanto, los atributos `on*` se renombran a `active-*`, y por consiguiente los atributos `off-*` se renombran a `inactivado-*`. Este cambio afecta a los siguientes atributos:  `on-icon-class`, `off-icon-class`, `on-text`, `off-text`, `on-color`, `off-color`, `on-value`, `off-value`.
+  - Los atributos `active-text` y `inactive-text`  ahora no tienen valores por defecto.
+- Tag
+  - El atributo type acepta ahora  `success`, `info`, `warning` y `danger`
+- Menu
+  - Atributo `theme` eliminado. El color de Menu se puede configurar utilizando  `background-color`, `text-color` y `active-text-color`
+- Input
+  - Atributo `icon` eliminado. Ahora el icono del sufijo puede configurarse usando el atributo  `suffix-icon`  o el slot con nombre `suffix`.
+  - Eliminado el atributo `on-icon-click` y el evento `click`. Ahora para añadir el manejador de clics en los iconos, por favor use los slots con nombre. 
+  - El evento `change` se comporta ahora como el nativo, que se activa sólo en la perdida del foco o presionando enter. Si necesita responder a las entradas de usuario en tiempo real, puede utilizar el evento `input`.
+- Autocomplete
+  - Atributo `custom-item` eliminado. Ahora la plantilla de sugerencias del input se puede personalizar utilizando `scoped slot`
+  - Atributo  `props`  eliminado. Ahora puede utilizar el atributo `value-key` para designar el nombre de la clave del objeto de sugerencia del input para su visualización.
+- Steps
+  - Atributo `center` eliminado
+  - Ahora Steps llenara su contenedor padre por defecto
+- DatePicker
+  - Los parámetros del evento `change` de DatePicker son ahora el valor vinculante en sí mismo. Su formato es controlado por `value-format`
+- Table
+  - Soporte eliminado para personalizar la plantilla de columnas mediante `inline-template`
+  - `sort-method` ahora se alinea con `Array.sort`. Debería devolver un número en lugar de un booleano
+  - El slot `append`  se desplazo fuera del elemento `tbody` para evitar múltiples renderizados.
+  - Evento `expand` se renombro a `expand-change`
+  - Los parametros de los métodos  `row-class-name` y `row-style` son ahora un objeto
+
+# #
+
+<i><sup>*</sup> El procesamiento dinámico de HTML arbitrario en su sitio web puede ser muy peligroso porque puede conducir fácilmente a [ataques XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Por lo tanto, cuando `dangerouslyUseHTMLString` está encendido, por favor asegúrese de que el contenido de `message` es confiable, y **nunca** asigne el `message` al contenido proporcionado por el usuario.</i>
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 4f8ec3dcf3..11c16c5861 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -1,745 +1,717 @@
 ## 更新日志
 
-### 1.4.1
-*2017-07-28*
-
-- 修复 Tree 勾选父节点会弹出子节点的问题，#6029
-- 修复 Tree 勾选逻辑错误，#6034
-- 修复作为 Form 直接子元素的 FormItem 不继承 `label-width` 的问题，#6044
-- 修复 collapse 模式下的 Menu 自动弹出子菜单的问题，#6111
-- 修复使用 `v-if` 的动态 TabPane 顺序错误的问题，#6066
-- 修复鼠标在 `open-delay` 时间内移开元素后，仍然会弹出 Popover 的问题，#6058（by @laobubu）
-- 修复禁用的 Upload 的文件列表仍然显示删除按钮并可操作的问题，#6091
-- 修复斑马纹的 Table 的背景色在 hover 时不正确的问题，#6024（by @xtongs）
-
-### 1.4.0 Boron
-*2017-07-21*
-
-#### 新特性：
-- Message
-  - `message` 属性支持 VNode，#5463（by @egyptik）
-- ColorPicker
-  - 新增 `active-change` 事件，#5775
+### 2.4.9
+
+*2018-10-26*
+
+- Form 组件 clearValidate 方法参数支持字符串，#12990 （by @codinglobster）
+- Badge 新增 type 属性，#12991
+- 用户可以使用 scoped-slot 来自定义表头，#13012（by @ivanseidel）
+- 修复 IE 下 Select 输入框不能输入的问题，#13034（by @GaliMU）
+- Select 多选时，选项不换行，#12329 （by @akki-jat）
+- Select 下拉列表展开后，箭头图标也可以正确显示，#12353（by @firesh） 
+- 修复 Select 的 size 属性不生效的问题，#13070
+- 多选时可以清除 Select 已选中的值，#13049（by @ZSkycat）
+- 修复最后一个 TabNav 不能删除的问题，#13039
+- 修复 TabNav 中 label 显示不正确的问题，#13178
+- Alert 新增 title slot，#13082（by @Kingwl）
+- 修复 Table 中的 tooltip 内容不正确的问题，#13159（by @elfman）
+- 优化 Upload 文件列表删除时的动画，#12987
+- 当 InputNumber 控制按钮不显示时，调整了边距，#13052
+
+### 2.4.8
+
+- Switch 聚焦时不显示轮廓，#12771
+- 修复 Dropdown 在 ButtonGroup 中样式问题，#12819 （by @bluejfox）
+- Dialog 新增 opened 事件，#12828
+- 修复 TabNav 显示顺序不正确的问题，#12846
+- 修复 Tabs 没有滑动到选中 tab 的问题，#12948
+- 修复 Tree 节点在拖拽时标识符不显示的问题，#12854
+- Form 的 validate 事件参数中包含了校验的信息，#12860 （by @YamenSharaf）
+- 修复 DatePicker 没有校验用户输入时间的合法性问题，#12898
+- 修复 Table 表头的 `render-header`属性不生效的问题，#12914
+
+### 2.4.7
+
+*2018-09-14*
+
+- 修复 DatePicker 未触发表单检验的问题，#12328，#12348
+- 修复 DatePicker 多选时报错的问题，#12347
+- 修复 DatePicker 选择时间时 spinner 位置不正确的问题，#12415 （by @rang-ali）
+- 修复 Datepicker 输入框自动填充的问题，#12521 （by @abdallanayer）
+- 修复 Cascader 中 Input 未高亮的问题，#12341
+- 修复 Tabpane 顺序不正确的问题，#12346
+- 修复 ColorPicker 取色光标位置不正确的问题，#12376 （by @cnwhy）
+- 调整 Submenu 的样式，#12457
+- 修复 Submenu 选中后没有高亮的问题，#12479
+- 修复 Cascader 选择值不正确的问题，#12508 （by @huangjinqiang）
+- 修复 Pagination 输入框值不正确的问题，#12525
+- 调整 Pagination 触发事件的顺序，#12530
+- 修复 Table 的 filter 不显示的问题，#12539
+- 修复 Tree 无法删除节点的问题，#12684
+- 修复 Select 在单选时 Input 高度变化的问题，#12719
+- 修复 Form 在嵌套时 label 显示不正确的问题，#12748
+- 新增 Input 的 autocomplete 属性，废弃 auto-complete 属性，#12514 （by @axetroy）
+- 新增 Form 的 slot-scope 展示表单校验信息，#12715 （by @YamenSharaf）
+
+### 2.4.6
+
+*2018-08-09*
+
+- 修复 Table 的 filter 初始值为空数组时不显示筛选图标的问题，#12165
+- 修复 Menu 在更改 `collapse` 时不保存菜单激活状态的问题，#12178 (by @elfman)
+- 修复 Cascader 未转义特殊字符的问题，#12248
+- 修复禁用的 RadioButton 在点击时显示 box-shadow 的问题，#12262
+- 修复 Select 初始值为 `undefined` 时方向键失效的问题，#12322
+- 修复 Select 多选时输入的关键字消失的问题，#12304
+- 修复 Select 多选时查询函数没有去抖的问题，#12181
+- 修复 Dialog 在全屏显示时宽度不正确的问题，#12203
+- 修复 Main 在 IE 下的显示不正确的问题，#12237
+- 修复 Input 触发两次表单校验的问题，#12260
+- 修复 Tree 在懒加载时添加节点导致节点消失的问题，#12256
+- 修复 Tree 节点在拖拽后无法删除的问题，#12279
+- 修复 Popover 在 InputNumber 聚焦时不显示的问题，#12284
+- 添加 Autocomplete 的 popper-append-to-body 属性，#12241
+- 添加 Pagination 的 `page-size` 属性 `sync` 修饰符的支持，#12281
+
+### 2.4.5
+
+*2018-07-26*
+
+- 修复 Table 设置 `class-name` 对 `expand` 列不生效的问题，#12006
+- 新增 Table 的 `toggleAllSelection` 方法，#12047
+- 修复 Input 包含 Select 时，suffix 插槽位置显示不正确的问题，#12108
+- 修复 Option 的 `line-height` 无法设置的问题，#12120
+- 修复初始值为 `null` 的 TimeSelect 在执行 `resetField` 后无法再赋值的问题，#12010
+- 修复 Tree 组件中不响应方向键以外 keydown 事件的问题，#12008
+- 修复 Tree 在懒加载情况下选中父节点的问题，#12106
+- Tree 的 `getCheckedNodes` 方法新增 `includeHalfChecked` 参数，#12014
+
+### 2.4.4
+
+*2018-07-13*
+
+- 修复重置表单后触发 Select 组件校验问题，#11837
+- 修复 Input 组件 `suffix` 与 `append` 共存时样式错乱问题，#11951
+- 修复可清空的只读 Input 仍会显示清空图标的问题，#11967
+- 修复 Tree 节点禁用时仍可以选中的问题，#11847
+- 修复 Tree `default-checked-keys` 属性不生效的问题，#11971
+- 修复 Tree 在过滤节点时下 `empty-text` 不显示的问题，#11971
+- 修复 Table 的 `empty-text` 过长时的位置样式问题，#11965
+- 修复 Table 的 `current-row-key` 设置为 `null` 时高亮行不清除的问题，#11866
+- 修复当 `filters` 为空数组时显示过滤器下拉列表的问题，#11864
+- 修复 Radio 的 label 不阻止事件冒泡的问题，#11912
+
+### 2.4.3
+
+*2018-07-03*
+
+- 修复当自定义 Tree 节点高度时，`allow-drop` 不能正常工作的问题，#11797
+- 现在 Form 的 `clearValidate` 方法支持传入参数，指定需要清空校验结果的 FormItem，#11821
+- 新增 MessageBox 的 `distinguishCancelAndClose` 属性，#11831
+
+### 2.4.2
+
+*2018-06-26*
+
+- 修复 Table 的 `class-name` 和 `label-class-name` 属性不支持动态更新的问题，#11626
+- 修复 Table 在 `highlight-current-row` 为 `false` 时点击行也会触发高亮的问题，#11691 #11563
+- 修复 ButtonGroup 中只有一个 `round` 或 `circle` 的 Button 时的样式错误，#11605
+- 修复在某些情况下 Pagination 的条目数选择器的样式错误，#11622
+- 修复 Menu 的 `collapse` 属性变化后无法使用 `open` 方法的问题，#11646
+- Tabs 的 `before-leave` 钩子添加了 `activeName` 和 `oldActiveName` 参数，#11713
+- 修复 Cascader 关闭后的聚焦问题，#11588
+- 修复 Cascader 在 `change-on-select` 状态下点击选项不关闭的问题，#11623
+- 现在通过代码改变 Select 的值后会触发表单校验，与 Input 行为一致，#11672
+
+### 2.4.1
+
+*2018-06-08*
+
+- 移除 Autocomplete 的重复类型声明，#11388
+- 修复嵌套在 Form 内的 Select 在 FireFox 浏览器中下拉箭头错位的问题，#11427
+- 修复 Select 的初始值为 `null` 时仍然显示清除图标的问题，#11460
+- 修复禁用的 Radio 在点击时显示 box-shadow 的问题，#11462
+- 新增 MessageBox 的 `iconClass` 属性，#11499
+- 新增 Tabs 的 `stretch` 属性，#11476
+- 修复 Tabs 开启 `lazy` 时渲染顺序异常的问题，#11461
+- 修复 Table 展开行时无法保留选中行样式的问题，#11464
+- 修复 Tabs 调用 `before-leave` 并返回 Promise 的时候，Tabs 会存在 focus 状态的问题，#11386
+- 修复 Popover 禁用状态下创建弹出框的问题，#11426
+- 修复 Tree 在懒加载状态下添加新节点造成无限循环的问题，#11430 （by @wangjingf）
+- 新增 Dialog 的 `closed` 事件，#11490
+
+### 2.4.0 Fullerene
+
+*2018-05-28*
+
+#### 新特性
+- 综合
+  - 使用原生 webpack 作为构建和打包工具，#11216
+  - 可以全局配置弹出层的初始 z-index，#11257
+- Autocomplete
+  - 新增 `hide-loading` 属性，#11260
+- Button
+  - 现在圆形按钮也支持通过 `size` 属性改变其尺寸了，#11275
+- InputNumber
+  - 新增 `precision` 属性，#11281
+- Tabs
+  - 新增 `before-leave` 钩子，#11259
+  - 新增 `lazy` 属性，#11167（by @Kingwl）
+- Table
+  - 新增 `sort` 方法，支持手动排序，#11311
+
+#### 修复
+- Input
+  - 修复使用中文输入法快速输入文字时会导致视图重新渲染的问题，#11235（by @STLighter）
 - Popover
-  - 新增 `open-delay` 属性，#5842（by @kaungmyatlwin）
+  - 修复当触发元素为 Radio 或 Checkbox 时控制台报错的问题，#11265
+- Breadcrumb
+  - 修复 `to` 属性不支持动态更新的问题，#11286
+- Upload
+  - 修复在 `beforeUpload` 方法返回的 Promise 中 resolve 一个 File 时控制台报错的问题，#11297（by @qusiba）
+- Tooltip
+  - 修复内容为空时箭头错位的问题，#11335
+- Autocomplete
+  - 修复在快速删除搜索内容后输入建议不正确的问题，#11323
+- ColorPicker
+  - 修复关闭选色器时触发 `active-change` 事件的问题，#11304
+- Table
+  - 修复筛选列表过长导致样式超出的问题，#11314
+  - 修复排序后导致无法正常显示选中行样式的问题，#11348
+- Checkbox
+  - 修复单个 Checkbox 不支持表单验证的问题，#11271
+- Radio
+  - 修复通过空格可以选中被禁用的 Radio 的问题，#11303
+- MessageBox
+  - 修复连续打开两个 MessageBox 时 `el-popup-parent--hidden` 无法移除的问题，#11371
+
+### 2.3.9
+
+*2018-05-18*
+
+- 修复当 TableColumn 的 `prop` 属性指定的字段在数据源中不存在时，鼠标移入该列单元格会报错的问题，#11137
+- 弹出类组件的 `lockScroll` 属性不再为父元素添加内联样式，而是添加相应类名，#11114
+- 修复 Progress 在 `status` 为 exception 时图标不显示的问题，#11172
+- 修复可搜索的 Cascader 在输入关键词后，选项的 `disabled` 属性失效的问题，#11185
+- 修复可展开的 Table 在展开某一行后更新数据源会造成该行无法收起的问题，#11186
+- Tree 的 `setCurrentKey` 方法支持传入 `null`，可取消当前高亮的节点，#11205
+
+### 2.3.8
+
+*2018-05-11*
+
+- 修复 `type` 为 dates 的 DatePicker 在选择非当前月的日期后，面板会跳转至当前月的问题，#10973
+- 修复可清空的只读 Input 仍会显示清空图标的问题，#10912
+- 修复范围选择的 DatePicker 在未改变值的情况下关闭下拉面板仍会触发 `change` 事件的问题，#11017
+- 修复 Select 在有分组选项时不能正确通过键盘导航的问题，#11058
+- 新增 Select 的 `prefix` 具名 slot，#11063
+- 新增 FormItem 的 `clearValidate` 方法，#11076
+- 新增 Tree 的 `checkOnClickNode` 属性，#11111
+
+### 2.3.7
+
+*2018-04-29*
+
+- 修复 Table 在由于筛选而使原有的滚动条消失后表头各列宽度未及时更新的问题，#10834
+- 修复可清空的 Input 在初始值为 `null` 时仍然显示清空图标的问题，#10912
+- 修复在通过代码改变 ColorPicker 的绑定值后错误地触发 `active-change` 事件的问题，#10903（by @zhangbobell）
+- 修复可搜索的 Select 在备选项均被禁用时，通过键盘导航会造成无限循环的问题，#10945
+
+### 2.3.6
+
+*2018-04-21*
+
+- 修复 Tree 的 `allow-drop` 回调在使用 `type` 参数后的错误行为，#10821
+- 修复可搜索的单选 Select 在 IE11 中无法输入搜索关键词的问题，#10822
+- 修复单选 Select 在使用鼠标选中某个选项后错误地触发 `blur` 事件的问题，#10822
+
+### 2.3.5
+
+*2018-04-20*
+
+- 修复 DatePicker 的 `type` 为 week 时面板错误高亮的问题，#10712
+- 修复 InputNumber 初始值为 0 时输入框为空的问题，#10714
+- 新增 Select 的 `automatic-dropdown` 属性，#10042（by @Seebiscuit）
+- 修复 `disabled` 的 Rate 仍能通过键盘左右键改变组件值的问题，#10726（by @Richard-Choooou）
+- 现在 DatePicker 的 `type` 属性可以接收 `'dates'`，用于选择多个日期，#10650（by @Mini256）
+- 新增 Pagination 的 `prev-click` 和 `next-click` 事件，#10755
+- 新增 Pagination 的 `pager-count` 属性，#10493（by @chongjohn716）
+- 新增 `type` 作为 Tree 的 `allow-drop` 属性回调的第三个参数，#10792
+- 改用 ResizeObserver 对元素的尺寸变化进行监测，#10779
+
+### 2.3.4
+
+*2018-04-12*
+
+- 删除 SubMenu 在 TypeScript 类型声明中重复的 `showTimeout` 属性，#10566（by @kimond）
+- 现在 Transfer 数据项的渲染支持通过 scoped slot 自定义，#10577
+- 修复点击 Pagination 禁用的上一页、下一页按钮仍会触发 `current-change` 事件的问题，#10628
+- 修复未绑定值的 Textarea 在 SSR 中会显示 `undefined` 的问题，#10630
+- 修复 `type` 为 border-card 的 Tabs 中被禁用标签项的样式，#10640
+- 新增 `$index` 作为 Table 的 `formatter` 属性回调的第四个参数，#10645
+- 修复 TypeScript 类型声明未导出 CheckboxButton 的问题，#10666
+
+### 2.3.3
+
+*2018-04-04*
+
+- 新增 Card 的 `shadow` 属性，#10418（by @YunYouJun）
+- 修复 Badge 在 `value` 属性为 `0` 时不显示上标的问题，#10470
+- 修复 Tree 节点拖拽相关的问题，#10474 #10494
+- 新增 Autocomplete 的 `placement` 属性，#10475
+- 现在 `default-time` 属性也可用于非范围选择的 DateTimePicker 了，#10321（by @RickMacTurk）
+- 修复 TabItem 在浏览器失焦和隐藏后出现蓝色边框的问题，#10503
+- 新增 SubMenu 的 `popper-append-to-body` 属性，#10515
+- 现在非链接的 BreadcrumbItem 在 hover 时不再具有视觉反馈，#10551
+- 调整 InputNumber `change` 事件的触发时机，使得在回调中能够取得最新的组件绑定值，#10553
+
+### 2.3.2
+
+*2018-03-29*
+
+- 修复 Autocomplete 报错的问题，#10442
+
+### 2.3.1
+
+*2018-03-29*
+
+- 修复 Input 的 `type` 属性未传递至原生 input 元素的问题，#10415
+- 新增 Select 的 `blur` 方法，#10416
+
+### 2.3.0 Diamond
+
+*2018-03-28*
+
+#### 新特性
 - Table
-  - `formatter` 新增 `value` 参数，#5709（by @haledeng）
+  - 现在 TableColumn 的 `formatter` 属性可以是动态的，#10184（by @elfman）
+  - 新增 `select-on-indeterminate` 属性，#9924（by @syn-zeta）
+- Menu
+  - 新增 `collapse-transition` 属性，#8809（by @limichange）
+- Input
+  - 新增 `select` 方法，#10229
+  - 新增 `blur` 方法，#10356
+- ColorPicker
+  - 新增 `predefine` 属性，#10170（by @elfman）
 - Tree
-  - 新增 `disabled` 属性，#5937
+  - 新增 `draggable`、`allow-drop` 和 `allow-drag` 属性，以及 `node-drag-start`、`node-drag-enter`、`node-drag-leave`、`node-drag-over`、`node-drag-end` 和 `node-drop` 事件，#9251 #10372（by @elfman）
+- Form
+  - `validate` 方法新增第二个参数，包含未通过本次校验的表单项信息，#10279
+  - 新增 `validate` 事件，#10351
+- Progress
+  - 新增 `color` 属性，#10352（by @YunYouJun）
+- Button
+  - 新增 `circle` 属性，#10359（by @YunYouJun）
+
+#### 修复
+- Form
+  - 修复嵌套复合型 Input 时，FormItem 标签与输入框未对齐的问题，#10189
 - Menu
-  - 新增 `collapse` 属性，#5941
+  - 现在折叠状态的菜单项仅在传入 `title` slot 时才显示 Tooltip，#10193（by @PanJiaChen）
+- Pagination
+  - 修复 `current-change` 在未发生用户交互时错误触发的问题，#10247
+- DatePicker
+  - 现在时间日期选择器下拉面板中的值能够正确地从 `format` 属性中获取对应格式了，#10174（by @remizovvv）
+- Upload
+  - 现在拖拽上传会拦截不在 `accept` 属性范围内的文件，#10278
+
+### 2.2.2
+
+*2018-03-14*
+
+- 新增 Input 的 `clear` 事件，#9988（by @blackmiaool）
+- 现在 ColorPicker 的手动输入支持 `hsl`、`hsv` 和 `rgb` 格式了，#9991
+- 修复 DatePicker 在清除初始值时不触发 `change` 事件的问题，#9986
+- 现在 Rate 的图标类相关属性支持动态更新了，#10003
+- 修复含有固定列的 Table 在设置 `max-height` 属性后有时不能及时更新布局高度的问题，#10034
+- 现在 DatePicker 的范围选择支持先点选结束日期，再点选开始日期了，#8156（by @earlymeme）
+- 新增 Pagination 的 `disabled` 属性，#10006
+- 新增 Popover 的 `after-enter` 和 `after-leave` 事件，#10047
+- 修复重置表单后，用户第一次改变 Select 的值时不触发校验的问题，#10105
+- 修复 Table 的固定列在某些情况下宽度不正确的问题，#10130
+- 修复调用 MessageBox 未传入 `title` 时，打开的 MessageBox 会继承上一个实例的 `title` 属性的问题，#10126（by @Pochodaydayup）
+- 新增 Slider 的 `input-size` 属性，#10154
+- 新增 Transfer 的 `left-check-change` 和 `right-check-change` 事件，#10156
+
+### 2.2.1
+
+*2018-03-02*
+
+- 修复 Aside、Header 和 Footer 在某些布局中被压缩的问题，#9812
+- 修复设置了 `height` 属性的 Table 在服务端渲染时无法加载的问题，#9876
+- 修复可展开的 Table 在展开某一行后高度未重新计算的问题，#9848
+- 修复在 DateTimePicker 中手动输入日期后不能正确触发 `change` 事件的问题，#9913
+- 修复鼠标右键点击 Select 的输入框会展开选项的问题，#9894（by @openks）
+- 新增 Slider 的 `tooltip-class` 属性，#9957
+- 现在的 Select 在选中选项后仍然处于 focus 状态，#9857（by @Seebiscuit）
+- 新增 Transfer 的 `target-order` 属性，#9960
+
+### 2.2.0 Graphite
+
+*2018-02-12*
+
+#### 新特性
+- Menu
+  - SubMenu 新增 `popper-class` 和 `disabled` 属性，#9604 #9771
+  - 现在水平模式下的 Menu 支持多级 SubMenu 了，#9741
+- Tree
+  - 新增 `node-contextmenu` 事件，#9678
+  - 现在可以使用 scoped slot 自定义树节点的模板了，#9686
+  - 新增 `getNode`、`remove`、`append`、`insertBefore`、`insertAfter`、`getCheckedKeys`、`getHalfCheckedNodes`、`getHalfCheckedKeys` 方法和 `check` 事件，#9718 #9730
+- Transfer
+  - 新增 `clearQuery` 方法，#9753
 - Select
-  - 新增 `value-key` 属性，#5897
+  - 新增 `popper-append-to-body` 属性，#9782
 
-#### 修复：
-- DatePicker
-  - 部分内部文案不受 i18n 控制的问题，#5485
-  - 初始值为空时，选择时间后的返回值毫秒部分不为零的问题，#5663
-  - `disabledDate` 范围被扩大的问题，#4946（by @liyangworld）
-- Steps
-  - 动态增减步骤后的样式错误，#5456（by @elfman）
+#### 修复
 - Table
-  - 带有固定列且可展开时，鼠标 hover 高亮行错位的问题，#5471（by @elfman）
-  - 部分浏览器不支持 `classList` 的问题，#5613（by @flynntsc）
-- Select
-  - 单选时打开下拉框有时无法定位到已选中项的问题，#5564（by @wacky6）
-  - 多选时 Vue 2.4.x 报错的问题，#5897
-- Radio
-  - RadioGroup 内只有一个 Radio 时的圆角丢失问题，#5646（by @YYvanYang）
-- Upload
-  - `auto-upload` 为 false 时，无法选择之前删除的文件的问题，#5706
-  - `disabled` 时删除按钮仍可见并可操作的问题，#5841
-  - 兼容 Vue 2.4 `key` 不能是对象的问题，#5872
-- MessageBox
-  - 非 `confirm` 或 `prompt` 情况下点击取消按钮仍然被 resolve 的问题，#5658
-- Rate
-  - 初始值带有小数时，激活的 icon 不显示小数部分的问题，#5785
-- Pagination
-  - 总页数的 i18n 不与 vue-i18n@6.x 兼容的问题，#5796（by @mario56）
-  - 当前页为最大页数减一时，错误地显示省略号的问题，#5861（by @openks）
+  - 修复点击可展开行的展开图标会触发 `row-click` 事件的问题，#9654
+  - 修复某些情况下通过拖动改变列宽后，布局没有同步更新的问题，#9668
+  - 修复合计行与固定列并存时的样式问题，#9667
+- Container
+  - 修复布局组件在 IE11 中无法自动填充可用空间的问题，#9655
 - Loading
-  - 不可见元素绑定 Loading 时的样式错误，#5649（by @xiongzixiao）
-- Cascader
-  - 输入框中的文字未垂直居中的问题，#5819（by @jianzhi92）
-- Tree
-  - 在 lazy 模式下 `setCheckedKeys` 和 `setCheckedNodes` 方法的 bug，#5937
-  - 在 lazy 模式下勾选父级节点会一次性加载全部后代节点的问题，#5963
-- Form
-  - 未在 FormItem 上指定 `label` 时，label 的具名 slot 失效的问题，#5921
-- Tooltip
-  - Vue 2.4.x 下触发元素为自定义组件时不工作的问题，#5916
+  - 修复在 `mounted` 中修改 `v-loading` 的值为 true 时不能正确显示 Loading 的问题，#9722
+- Switch
+  - 修复点击时会触发两次原生 click 事件的问题，#9760
+
+### 2.1.0 Charcoal
 
-#### 非兼容性更新:
+*2018-01-31*
+
+#### 新特性
+- Cascader
+  - 新增 `focus` 和 `blur` 事件，#9184（by @viewweiwu）
+- Table
+  - `filter-method` 方法加入第三个参数 `column`，#9196（by @liyanlong）
+- DatePicker
+  - 新增 `prefix-icon` 和 `clear-icon` 属性，#9237（by @AdamSGit）
+  - 新增 `default-time` 属性，#9094（by @nighca）
+  - `value-format` 属性增加对 `timestamp` 的支持，#9319（by @wacky6）
+- InputNumber
+  - 组件绑定变量的值支持 `undefined`，#9361
 - Select
-  - 值为对象类型时，需要提供一个 `value-key` 作为唯一性标识，#5897
-
-### 1.3.7
-*2017-06-18*
-
-- 修复异步加载数据的 Table 不显示合计行的问题，#5318
-- 修复 Pagination 的输入框数值与当前页不同步的问题，#5377
-- 修复 DatePicker 的 shortcut 面板过长时的溢出问题，#5297（by @alashow）
-- 修复当页面上有被选中的文本时点击 Switch 无效的问题，#5411
-- Form 中表示必填项的小红点现在可以动态更新了，#5403
-- 修复 Carousel 的 initial-index 属性无效的问题，#5334
-- 修复嵌套于 Dialog 中的 Popover 无法被 focus 的问题，#5336
-
-### 1.3.6
-*2017-06-09*
-
-- 修复 ColorPicker 的默认值有时与面板中的值不一致的问题，#5183（by @Kingwl）
-- 修复默认值为白色的 ColorPicker 无法通过面板改变 hue 的问题，#5184（by @Kingwl）
-- 修复 Dialog 在滚动后，其嵌套的 Select 需多次点击才能呼出的问题，#5226
-- 新增 Autocomplete 的 `props` 属性，#5282
-- 修复 DatePicker 在手动输入值后按 Tab 切换焦点时下拉框不消失的问题，#5149（by @ChuckFields）
-
-### 1.3.5
-*2017-06-03*
-
-- 修复 Select 的 `default-first-option` 属性在远程搜索时不生效的问题，#5084
-- 修复 InputNumber 与其他表单组件同行显示时不能对齐的问题，#5127
-- 修复行内 FormItem 对复合型 Input 失效的问题，#5151
-- 修复 FormItem 在 Firefox 中的高度与其他浏览器不一致的问题，#5152
-- 修复 Cascader 中 `value` 为 0 的数据不能展开下一级的问题，#5172（by @Kingwl）
-- 修复 Autocomplete 无法触发原生 `keydown` 和 `keyup` 事件的问题，#5129
-- 新增 Select 的 `clear` 事件，#5112
-- 修复 Cascader 在某些情况下下拉框的位置没有及时更新的问题，#5064
-- 提升 Dialog 和 MessageBox 的可访问性，#4786
-
-### 1.3.4
-*2017-05-23*
-
-- 修复带展开行的 Table 在高亮和斑马纹效果下的问题，#4871（by @mu-yu）
-- 新增 Select 的 `default-first-option` 属性，#4838（by @wacky6）
-- 修复可创建选项的 Select 在没有选项数据时不显示「无数据」文本的问题，#4977
-
-### 1.3.3
-*2017-05-14*
-
-- 新增 Dropdown 的 `visible-change` 事件，#4818（by @luciy）
-- 新增 Col 和 Row 的 `tag` 属性，#4799
-- 修复上个版本中 Cascader 搜索功能不可用的问题，#4812
-- 修复 `type` 为 range 的 DatePicker 错误地触发 watch 的问题，#4837（by @wacky6）
-- 修复 TimePicker 在某些浏览器上数字不居中的问题，#4847（by @pengchongfu）
-- 修复当按下 ESC 关闭 Dialog 时不触发 `before-close` 钩子的问题，#4819（by @patriciussanctus）
-- 修复当多个 MessageBox 中存在 VNode 格式的 `message` 时渲染不正确的问题
-- 修复按下 tab 键无法使 Checkbox 获得焦点的问题
-
-### 1.3.2
-*2017-05-10*
-
-- 修复在按需引入某些组件时，报 `el-collapse-transition` 未找到的错，#4728
-- 修复 Pagination 在 FireFox 中的垂直居中问题，#4756
-- 修复 `type` 为 week 时的 DatePicker 在更新绑定值后面板视图不更新的问题，#4739
-- 修复 `show-summary` 的 Table 的一些高度计算错误，#4736
-- 新增 Cascader 的 `before-filter` 属性，#4774
-- 新增 InputNumber 的 `debounce` 属性，#4712（by @pengchongfu）
-
-### 1.3.1
-*2017-05-06*
-
-- 修复 Autocomplete 输入中文时会清空输入框的问题，#4718
-- 修复异步获取数据的 Table 的合计行不随表格其余部分滚动的问题，#4717
-- 修复 `close-on-press-esc` 为 true 的 Dialog 在按下 ESC 时无法正确关闭的问题，#4706
-- 修复设置了 `on-value` 和 `off-value` 的 Switch `change` 事件参数不正确的问题，#4675
-
-### 1.3.0 Beryllium
-*2017-05-05*
-
-#### 新特性：
-- 新增 Transfer 组件
-- 新增 transition 的文档，现在用户可以使用内置 transition 了
-- Slider 新增垂直模式，使用 `vertical` 属性即可打开，#4410（by @devange）
-- CheckboxGroup 新增按钮模式，#3697（by @mdartic）
+  - 新增 `auto-complete` 属性，#9388
+- Form
+  - 新增 `disabled` 属性，#9529
+  - 新增 `validateOnRuleChange` 属性，#8141
+- Notificaition
+  - 新增 `closeAll` 方法，#9514
+
+#### 修复
+- InputNumber
+  - 修复初始输入小数点时被重置的问题，#9116
+- Dropdown
+  - 修复当页面仅有水平滚动条时，某些浏览器下拉菜单定位错误的问题，#9138（by @banzhuanmei）
 - Table
-  - 新增 `setCurrentRow` 方法，#4390
-  - 新增表尾合计行的功能，提供 `show-summary`、`sum-text` 和 `summary-method`，#4484
-  - TableColumn 新增 `filter-placement` 属性，#4491
-- Dialog
-  - 新增 `before-close` 属性，#4432
-  - 新增 `visible` 属性，且支持 `.sync` 修饰符，#4539
-- Upload
-  - 新增 `disabled` 属性，#4473
-  - `on-change` 事件现在也会在添加文件后触发，#4447
-  - 新增 `abort` 方法，#4575
-- Switch 新增 `on-value` 和 `off-value` 属性，支持自定义两种状态的值，#4403
+  - 修复带有固定列的 Table 在列数据变化后固定列的个数计算错误的问题，#9188（by @kolesoffac）
+  - 修复多级表头最后一列的边框不能正确显示的问题，#9326
+  - 修复在 Safari 浏览器中表头错位的问题，#9327
+  - 修复带有展开行的表格在展开某一行后，当表格数据更新但 `row-key` 值不变时，该行会自动收起的问题，#9462
+  - 修复在一些情况下不必要的多次渲染问题，#9426
+  - 修复动态改变 TableColumn 的 `width` 属性时，其宽度计算错误的问题，#9426
+- Loading
+  - 修复某些情况下 Loading 不能被正确隐藏的问题，#9313
 - DatePicker
-  - 新增 `default-value` 属性，用于设定下拉框初次弹出时显示的日期，#4222（by @wacky6）
-  - 支持动态改变 `type`，#4417（by @coffeedeveloper）
-- CarouselItem 新增 `label` 属性，#4317（by @paul-blundell）
-- MessageBox 的 `message` 属性增加对 VNode 的支持，#4550
-- Pagination 的 `current-page` 增加对 `.sync` 的支持，#4539
-- Form 新增名为 label 的 slot，用于自定义标签文本的内容，#4634
-
-#### 修复：
-- Select 和 Table 的某些功能与 Vue 2.3.x 不兼容的问题，#4518
-- DatePicker 的 `disabledDate` 对手动在输入框中输入的值无效的问题，#4309
-- Tree 的树节点 ID 为数字 0 时的一些问题，#4415
-- TimePicker 在完成选择后数字不居中显示的问题，#4425（by @pengchongfu）
-- Autocomplete 在输入中文时频繁触发搜索方法的问题，#4393（by @qazbnm456）
-- Upload
-  - 不能选择同一个文件的问题，#4461
-  - `auto-upload` 为 false 时不显示预览图片的问题，#4572
-  - 一些样式问题，#4643
-- 嵌套在 FormItem 中的按钮样式的 RadioGroup 的样式问题，#4336
-- ColorPicker 修复将绑定值赋值为空不会清空颜色面板的问题，#4668（by @pengchongfu）
-- Table 修复在 Safari 下 `show-overflow-tooltip` 无效的问题，#4157（by @renxia）
-
-#### 非兼容性更新:
-- 最低兼容 Vue 2.3.0
-
-### 1.2.9
-*2017-04-19*
-
-- 修复在有文本选中的情况下，RadioButton 需要多次点击才能生效的问题，#4217
-- 修复 Tree 的多选框在某些浏览器下不能全选的问题，#4107（by @pengchongfu）
-- 修复可清空的 Cascader 清空按钮无效的问题，#4167（by @pengchongfu）
-- 修复带有 Tooltip 的 Table 在路由切换时有时会报错的问题，#4085
-- 修复 Upload 无法移除待上传的文件的问题，#4233
-- 新增 Notification 的 `onClick` 属性，#4221（by @amouillard）
-- 修复 DatePicker 在清空后值变为 undefined 的问题，#4186（by @pengchongfu）
-- 修复 FormItem 中 ColorPicker 的样式错误，#4303
-- 新增 Tooltip 的 `enterable` 属性，#4210
-
-### 1.2.8
-*2017-04-07*
-
-- 修复 Form 的 `resetFields` 会给表单项重新赋值的问题，#3840（by @pengchongfu）
-- 新增 CheckboxGroup 的 `max` 和 `min` 属性，#3700（by @mdartic）
-- 修复 DatePicker 在一些特定的日期会导致月份 +1 的问题，#3935
-- 新增 Message 的 `closeAll` 方法，#3966（by @pengchongfu）
-- 新增 Slider 的 `format-tooltip` 属性，#3657（by @liyanlong）
-- 修复内嵌于 Dialog 中的 Table 的筛选面板被遮挡的问题，#4023（by @liyanlong）
-- 修复单选的 Select 在 Vue 2.2.x 下无法创建条目的问题，#3984
-- 修复某些断点下 `span` 为 0 的 Row 在其他断点下也会消失的问题，#4053
-
-### 1.2.7
-*2017-03-29*
-
-- 修复 Select 不兼容 Vue 2.2.6 的问题，#3797
-- 优化 Table 的 Tooltip 渲染性能，#3478
-- 新增 Table `tooltip-effect` 属性
-
-### 1.2.6
-*2017-03-28*
-
-- 修复 Switch 样式不兼容 vue SSR，#3752
-- 修复 TimePicker 日期计算错误，#3479
-- 修复 DatePicker 格式化 week 类型错误，#2774
-- 修复 DatePicker 周选择器默认值，#3058
-- 修复 Popover 销毁时未正确清除事件，#3555
-- 修复 InputNumber 鼠标左右键一起按下会导致值一直自增加，#3514（by @pengchongfu）
-- 修复 RadioButton 样式文件引入但无样式，#3276
-- 修复 Table 的 hover 样式，#3696（by @nicoeg）
-- 修复 Slider 跳动问题，#3664（by @gabrielboliveira）
-- 新增 Select `delete-tag` 事件 #3663（by @pengchongfu）
-- 新增 DatePicker 的 `onPick` 选项，#2921
-- 新增 Steps 可分别设置 step 的状态（status）和样式调整，#3722
-- 新增完整的按需引入组件的文档，#3302
-
-### 1.2.5
-*2017-03-19*
-
-- 新增 Slider 的 `show-tooltip` 属性，#3430（by @gabrielboliveira）
-- 修复动态改变 Slider `step` 的精度时，其值的精度不随之改变的问题，#3475（by @gabrielboliveira）
-- 修复含有 Tooltip 的 Table 在当前窗口高度临界于出现滚动条时，弹出 Tooltip 会导致 Table 宽度抖动的问题，#3549
-- 修复 Table 在某些情况下高度自动往复变小的问题，#3539
-- 修复 Popover 中的弹出类组件在点击 Popover 的空白区域时不隐藏的问题，#3451（by @nicoeg）
-- 现在 `xs`、`sm`、`md`、`lg` 值为 0 的 Col 会被正确隐藏，#3564
-
-### 1.2.4
-*2017-03-09*
-
-- 修复 Carousel 有时不响应数据动态更新的问题，#3159
-- 修复 Table 的 `cell-dblclick` 事件无法触发的问题，#3305
-- 修复禁用的 Cascader 不显示默认值的问题，#3297
-- 修复 Slider 在 `show-input` 时初始值不正确的问题，#3281
-- 修复 Tooltip 在服务端渲染时报错的问题，#3214
-- 修复 DatePicker 的 `range-separator` 属性有时无效的问题，#3378
-- 新增指令式调用 Loading 时响应动态加载文案的功能，#3345（by @imyzf）
-- 新增 Upload 的 `http-request` 参数，用于实现覆盖默认的上传行为，#3387
-- 新增 Col 支持将 `span` 值设为 0 时隐藏该列的功能，#3313
-
-### 1.2.3
-*2017-03-01*
-- 修复 Tooltip, #3152
-
-### 1.2.2
-*2017-02-28*
-
-- 修复若干组件与 Vue 2.2 不兼容的问题，#3002 #3067 #3097
-- 修复嵌套在 Dialog 内的 Cascader 下拉框有时出现在 Dialog 之后的问题，#3035
-- 修复 Cascader 的 `change` 事件参数在某些情况下不正确的问题，#3014
-- 新增 ColorPicker 的 `change` 事件，#3049（by @nicoeg）
-- 修复 Tree 的 `setCheckedKeys` 方法对非叶子节点无效的问题，#2967（by @rainyLeo）
-- 修复 Tooltip 和 `router-link` 共用报错的问题，#3143
-
-### 1.2.1
-*2017-02-23*
-
-- 修复用于 SSR 时报错的问题，#2982
-- 修复 Tabs 左右滚动按钮无法出现的问题，#2974
-- 修复 Table 在动态改变 `height` 属性后高度计算错误的问题，#2979
-- 新增 Table 的 `cell-dblclick` 和 `header-dragend` 事件，#2983 #2988
-- 修复行内表单在指定 `label-width` 时表单元素出现左边距的问题，#2990
-- 修复 Cascader 在某些情况下弹出框位置不正确的问题，#2992
-
-### 1.2.0 Lithium
-*2017-02-22*
-
-#### 新特性：
-- 新增 Cascader、ColorPicker 组件
-- Tabs 新增 `editable` 和 `addable` 属性以及 `tab-add` 和 `edit` 事件
-- 新增 UMD 格式的语言包文件
-- Tree 新增 `node-expand` 和 `node-collapse` 事件，#2507（by @masterzhang）
-- Tree 新增 `indent` 属性，#2713
-- Dialog 的标题支持以具名 slot 的方式传入，#2657
-- Slider 新增 `range` 属性，支持范围选择，#2751
-- Upload
-  - 新增 `auto-upload` 属性，用以控制是否在选择图片后自动上传，默认为开启
-  - 新增 `on-change` 钩子函数在文件状态改变时会调用
-  - 新增 `list-type` 设置文件列表展示外观
-- Autocomplete 滚动条使用 el-scrollbar
-
-#### 修复：
-- Carousel 不响应内容动态更新的问题，#2775
-- TimePicker 在某些情况下数字位置不居中的问题，#2948
-- TimePicker 在某些情况下范围选择时仅响应偶数次点击的问题，#2884（by @k55k32）
-- Tab 修复 tab-pane 动态显示时插入顺序问题, #2898
-- Menu 修复将 `default-active` 设置为不存在的 index 时 menu-item 还会高亮的问题
-- Collapse 修复嵌套使用时的样式问题
-
-#### 非兼容性更新:
-- 重构 Tooltip，不再生成额外的 HTML 标签，确保被 tooltip 包裹的组件的结构不变，#2459
-- Dialog 的遮罩层现在默认插入至 body 元素上，#2556
-- Tabs 现在内部不再维护 tab 实例，需要在外部通过相关事件去处理, #2567
-- Upload 重构升级
-  - `default-file-list` 属性更名为 `file-list`, `show-upload-list` 属性更名为 `show-file-list`
-  - `thumbnail-mode` 属性被移除
-
-### 1.1.6
-*2017-01-23*
-
-- 修复 MessageBox 的 `customClass` 会影响后续实例的问题，#2472
-- 修复位于 Tabs 非默认激活页中的 Select 在激活后样式不正确的问题，#2466
-- 修复一些组件在单独引入时样式缺失的问题
-- 修复被禁用的可搜索多选 Select 点击特定区域仍能打开下拉框的问题，#2540
-- 修复 Table 排序支持返回原始顺序，#2491
-- 新增 `reset.css` 在 `theme-default` 内，#2378
-- 新增 DatePicker 的 `range-separator` 属性，#2579
-- 发布单独组件包：Table，DatePicker，Loading，Upload，Carousel
-- 新增芬兰语（@groenroos）
-
-### 1.1.5
-*2017-01-17*
-
-- 修复 Menu 在启用 router 模式下点击菜单跳转后没有激活对应菜单项的问题，#2451
-- 新增 Collapse `value` 属性增加对 `Number` 类型的支持，#2455
-
-### 1.1.4
-*2017-01-16*
-
-- 修复 Input Number 在主动改变绑定值时也会触发 change 事件的问题，#2329
-- 修复 Menu 在启用 router 模式后没有对 `$route` 变化进行响应的问题，#2391
-- 修复 Menu、Tree 在快速点击时出现展开状态错误的问题，#2354
-- 修复 Input Number 和 Checkbox Group 的 change 事件触发时机，现在主动改变绑定值时不触发该事件。
-- 新增 Input 增加点击图标后的钩子函数属性，#2414
-- 新增 Radio Group 的 `disabled` 属性，#2411
-- 新增 Tree 增加 `accordion` 属性，#2408
-- 新增 Form 增加 `show-message` 属性，#2356
-- 修复 Table 排序点击区域，调整默认排序的 API，#2309 #2405（by @njleonzhang）
-- 修复 DatePicker firstDayOfWeek 在范围类型中无法使用，#2353
-- 修复 DatePicker 初始值为 null 显示 1970，#2388
-- 修复 Table 缺少 filteredValue 属性，#2348
-- 修复 Table 空数据时且存在滚动条时的样式，#2396
-- 新增 MessageBox 的 `beforeClose` 属性，#2204
-- 修复可过滤的 Select 点击三角图标不显示下拉框的问题，#2389
-
-非兼容性更新
-- 1.1.3 新增的 `default-sort-prop` 和 `default-sort-order` 属性现在合并为一个对象类型属性
-
-### 1.1.3
-*2017-01-09*
-
-- 修复 DatePicker 页面加载后首次清空不会触发 `change` 事件，#2167
-- 修复 DatePicker 选择下一年时，年份计算错误，#2152
-- 新增 Table 的 `default-sort-prop` 和 `default-sort-order` 属性，#2182（by @njleonzhang）
-- 修复有默认值的可搜索 Select 其他数据被过滤的问题，#2196
-- 新增自定义 i18n 处理方法，方便和除了 `vue-i18n` 之外的插件使用，#2129
-- 新增 Input `resize` 属性，#2263（by @Kingwl）
-- 修复 Autocomplete 在 blur 事件触发时没有隐藏下拉列表的问题，#2247
-- 修复 Tabs 嵌套使用时的样式问题，#2212（by @Kingwl）
-- 修复 Tabs 默认激活非第一项时 tabBar 的显示位置不正确的问题，#2192
-
-### 1.1.2
-*2016-12-30*
-
-- 修复 Vue 2.1.7 升级导致的 Table `sortable` 和 `fixed` 无法使用的问题
-- 修正 Input Number 在手动输入越界值时，blur 触发时没有重置为原来的值的问题，#2098
-- 移除 Collapse 的 `title` scoped slot, 并新增 `title` named slot，#2100
-- 修复 TimePicker 范围选择无法使用的问题
-- 修复 Tabs 删除非当前激活的 tab 后，当前激活的 tab 变化的问题，#2106
-- 修复 Select 在使用方向键导航时控制台报错的问题，#2120
-- 修复 Form 中可搜索的 Select 验证时机错误的问题，#2120
-
-### 1.1.1
-*2016-12-29*
-
-- 修复由于编译而出现的不兼容新版 Vue 的问题
-
-### 1.1.0 Helium
-*2016-12-29*
-
-#### 新特性：
-- 新增 Carousel、Collapse 组件
-- 支持 SSR
-- 组件内的滚动条样式优化
-- Table 支持通过 [Scoped Slots](http://vuejs.org/v2/guide/components.html#Scoped-Slots) 传入模板；原来的 `inline-template` 仍然兼容，但是不再推荐使用，未来可能会被移除
-- Table 支持展开行功能(Expandable rows)
-- DatePicker 支持指定周起始日(first day of week)
-- TimeSelect 支持设置 `maxTime`
-- Autocomplete 新增 `popper-class`属性
-- Tab-Pane 新增 name 为 label 的具名 `slot`，用于实现自定义标签内容
-
-#### 修复：
-- DatePicker 的 `change` 事件错误地触发多次的问题，#2070
-- Tabs 组件内 tab-pane 初始化时宽度抖动的问题，#1883
-
-#### 非兼容性更新：
-- 最低兼容 Vue 2.1.6
-- Form validateField() 方法回调的参数更新
-- Alert 取消了 render-content 属性，现在自定义模板需要通过默认 slot 传入
-- Input 和 Select 盒模型从 `block` 修改为 `inline-block`
-- Tabs 盒模型从 `inline-block` 修改为 `block`，Tab-Pane 移除 `label-content` 属性
-- Autocomplete 下拉列表现在直接插入到 `<body>` 标签下，而不是 `<el-autocomplete>` 下
-
-### 1.0.9
-*2016-12-27*
-
-- 修复 DatePicker 不能正确触发 input 事件的问题，现在只有当日期改变时才触发，#1834
-- 修复 Tree 在 Firefox 下会提示 event is undefined 的问题，#1945
-- 新增 DatePicker 的 `change` 事件，返回和输入框一致的格式化后的值，#1841
-- 新增 Table 的 `header-align` 属性，#1424
-- 修复单选的 Table 在数据移除时，高亮状态仍然存在的问题，#1890
-- 修复可搜索的 Select 在选项较多时的卡顿问题，#1933
-- 修复多选的 Select 在禁用状态下仍然能够手动删除选中项的问题，#2001
-- 修复 Col `xs` 分辨率下样式无效的问题，#2011
-- 新增 Tab 组件的 `value` 属性并支持 `v-model` 用法，#2008
-- 修复 Input Number 在某些条件下 change 事件被触发多次的问题，#1999
-- 新增 DatePicker 的 `clearable` 属性，#1994
-- 修复 Form 异步验证时某些条件下总是验证通过的问题，#1936
-
-### 1.0.8
-*2016-12-20*
-
-- 修复 Popup 在叠加使用时阻止事件冒泡，#1677
-- 修复 DatePicker 类型为 datetimerange 时无法选择时间的问题，#1758
-- 修复 Slider 的 `change` 事件不能正确触发的问题，#1809
-- 修复 Loading 的 spinner 在某些情况下转动时出现碎片的问题，#1786
-- 新增 Select 的 `loading-text`、`no-data-text`、`no-match-text` 属性和 `visible-change` 事件，#1849
-- 新增 DatePicker、Select 和 Tooltip 的 `popper-class` 属性，#1806
-- 新增 Tree 的 `expand-on-click-node`、`current-node-key` 属性和 `current-change` 事件，#1805 #1807
-- 新增 Table `row-click` 事件的第三个参数 `column`，#1808
-- 修复 Checkbox 的在路由切换时因为 computed 属性被缓存导致的bug，#1860
-- 新增 TabPanel `label-content` 渲染钩子方法中增加 tab 实例的参数，#1857
-- 新增 NavMenu 组件增加无限级子菜单（vertical模式）的支持，#1851
-- 新增 Checkbox 现在支持不绑定 value 也可以正常使用，#1818
-- 新增 Progress 的 `onProgress` 钩子函数，#1782
-- 修复 Tab 组件 active bar 在动态 label 下没有更新的问题，#1761
-- 新增 Table 的 `filter-change` 事件和 TableColumn 的 `column-key` 属性，#1876
-- 新增 Dropdown `hide-on-click` 属性，#1879
-
-### 1.0.7
-*2016-12-14*
-
-- 修复 DatePicker 在有值的情况下 hover 清空按钮时会错误地显示弹框
-- 修复 DatePicker 设置默认值为 null 会错误地显示时间值
-- 新增 Table 的 `row-contextmenu` 事件和 `max-height` 属性，#1663 #1674
-- 新增 MessageBox 的 `customClass` 属性，#1707
-- 新增 Message 和 Notification 的 `iconClass` 和 `customClass` 属性，#1671
-- 新增 Table 支持 empty slot，#1737
-- 改进 InputNumber change 事件增加 old value 的参数
-
-### 1.0.6
-*2016-12-09*
-
-- 新增 Tabs 组件的 `disabled` 属性，#1620
-- 新增 DatePicker 的 input 支持 `size`，#1440
-- 修复 DatePicker 为 `datetimerange` 类型并设置初始值时，面板未显示正确日期的问题，#1129
-- 修复 DatePicker 切换年份时显示异常的问题，#1607
-- 修复 DatePicker 点击 icon 未触发 clickoutside 的问题，#1604
-- 修复 TimePicker 点击清空按钮后再次点击不会更新初始值的问题，#1583
-- 修复 Select 远程搜索且 value 为对象类型时的显示问题，#1593
-- 修复 Select 为 `disabled` 时，`clearable` 仍然可以工作的问题，#1619
-- 修复 自定义背景颜色的 Switch 在动态切换 `disabled` 时，背景颜色错误的问题，#1627
-- 修复 Table 的一些样式问题
-
-### 1.0.5
-*2016-12-06*
-
-- 修复 Select 异步获取选项和绑定值时，输入框中显示 value 而不是 label 的问题，#1537
-- 修复 Select 的初始值为一个空对象时会报错的问题，#1533
-- 修复 Select 远程搜索有时不显示下拉框的问题，#1531
-- 修复 Slider 拖动释放后，滑块有几率产生一小段位移的问题，#1546
-- 修复 IE9 下 Steps 的样式问题，#1543
-- 新增 Upload 对所有文件类型生成 URL 的功能，#1530
-- 修复 TimeSelect 的样式，移除 flexbox, #1335
-
-### 1.0.4
-*2016-12-02*
-
-- 新增 Input Number 的 `controls` 属性，#1473
-- 修复 Checkbox Group、Radio Group 在异步赋值时出现的问题，#1511 #1514
-- 增加 Notification 的 `offset` 属性，#1419
-- 修复 Slider 在快速拖动时取值不准确的问题，#1458
-- 修复 Slider 在某些情况下绑定值为多位小数的问题，#1450
-- 修复 Select 在某些情况下绑定值和显示值不同步的问题
-- 新增 Select 的 `multiple-limit` 和 `allow-create` 属性
-- 修复 Tree 的叶子节点在点击展开后三角图标不消失的问题，#1438
-- 修复 Tree 有时在获取子级数据后视图不更新的问题，#1439
-- 修复 Table 在 windows 系统下的若干样式问题，#1464 #1507
-- 修复 Table 多级表头与固定列同时使用时，多级表头第一列 label 不显示的问题，#1451
-- 新增 Table 的 `row-dblclick` 事件，#1362
-
-### 1.0.3
-*2016-11-28*
-
-- 修复 Pagination 的 `currentPage` 在某些情况下设置无效的情况，#1336
-- 修复 DatePicker 为 `month` 且设置了 `disabledDate` 的情况下切换年份时界面未更新的问题，#1158
-- 修复 DatePicker readonly 时未禁用清除按钮的问题，#1238
-- 修复 Slider 绑定值为 `NaN` 以及 `step` 小于 1 时无法正常工作的问题，#1239 #1282
-- 增加 Table 的多表头功能，#1312
-- 增加 Table 的 `rowStyle` 属性，#1348
-- 修复 TableColumn 的某些属性无法动态设置的问题，#1314
-- 增加 Tree 的 `filter-node-method` 属性和 `filter` 方法，#1257
-- 增加 Tree 的 `getCheckedKeys` 和 `setCheckedKeys` 方法，#1254
-- 重构 Checkbox/Radio 支持嵌套 Group 绑定值，#1152
-- 修复 Popper 在 keep-alive 下无法触发销毁的问题，#1359
-- 增加 Form 中深对象验证的支持，#1363
-- 增加 Autocomplete 里的 `append` 和 `prepend` API，#1369
-- 增加 Pagination `pageSizes` 属性的动态支持，#1372
-- 增加 Radio Button 自定义选中按钮样式的 API，#1380
-- 增加 Menu Group 支持通过 slot 来设置 title，#1382
-- 修复 DatePicker 选择年的 bug，#1385
-- 新增 Upload 默认已上传的文件列表 API，#1393
-- 增加 Checkbox `label` 属性绑定的多类型支持，#1400
-- 增加 Tree 的 `setChecked` 方法，#1422
-
-### 1.0.2
-*2016-11-18*
-
-- 新增 Table `context` 属性，可以指定自定义 column 内部可获取的上下文，#1161
-- 新增 多种语言支持
-- 修复 没有正确动态渲染语言的问题，#1160
-- 新增 Alert 的 `render-content` 属性，#568
-- 新增 Button 的 focus 样式，#982
-- 修复 Switch 的 `change` 事件触发时机错误的问题，#1162
-- 修复 TimeSelect 开始时间设置 `00:00` 后会被禁用的问题，#676
-- 新增 Table `show-header` 属性，`header-click` 事件。#1195
-- 完善 Table 的 `height` 属性，当 `height` 属性为字符串的时候，表示 Table 的高度受外部样式控制，#1195
-- 修复 Table 的 `selection-change` 在某些情况下不触发的问题，#1198
-- 修复 Table 动态修改 `fixed` 属性可能会造成锁定列不消失的问题，#1182
-
-### 1.0.1
-*2016-11-16*
-
-- 修复 Pagination 错误地多次触发 `current-change` 事件的问题
-- 修复 Switch 在 Form 中的样式错误，#967
-- 修复 Loading 在某些情况下错误地锁定 `body` 滚动的问题，#968
-- Col 组件的 `span` 属性不再是必填属性，在省略的情况下其默认值为 `24`
-- 新增 DatePicker `disabled` 和 `editable` 属性，#976
-- 修复 DatePicker 的 `readonly` 与原生行为一致，现在通过设置 editable=false 禁止输入但是可通过弹框选日期，#976
-- 新增 Message 和 Notification 的 `close` 方法，用于手动关闭实例
-- 新增 DatePicker 清除功能，#759
-- 修复 Form 重置日期报错，#937
-- 修复 Tab 设置active-name不是首个tab时的样式问题，#1034
-- 修复 Table 的 inline-template 在 vue-loader 9.9.0 渲染报错
-- 新增 Step 支持内容居中对齐，#994
-- 修复 Upload 单独引入时提示 Progress 组件不存在，#1013
-- Layout 支持响应式布局
-- 新增 Dialog `show-close` 属性
-- 修复 和 `vue-i18n` 一起使用时，未初始化 i18n 会报错，#973
-- 修复 DatePicker 设置初始值后界面未更新 #1050
-- 修复 DatePicker 月份选择器直接切换年份并未更新年份数据 #1070
-- 新增 $loading 服务，用以调用 Loading
-- 新增 Popover 可手动控制显示隐藏，将 trigger 设置为 `manual`
-- 新增 Tree 的 `nodeKey`、`emptyText`、`checkStrictly`、`defaultExpandAll`、`autoExpandParent`、`defaultCheckedKeys`、`defaultExpandedKeys` 属性，`setCheckedNodes` 方法。
-
-
-### 1.0.0
-
-*2016-11-9*
-
-- 修复 TimePicker 选择范围时结束时间小于开始时间会重置开始时间, #894
-- 修复结合 `vue-i18n` 使用时会提示不能覆盖 `$t` 方法的问题
-- 新增 Loading 自定义加载文案的功能，并优化了视觉表现
-- 修复 Input blur 事件的参数不是 event 对象的问题
-- `window.ELEMENT.locale.use` 改成 `window.ELEMENT.locale`
-
-### 1.0.0-rc.9
-
-*2016-11-07*
-
-- 新增 MessageBox 确定按钮自动获取焦点, #721
-- 修复 Popover focus 失效, #734
-- 修复 Clickoutside 报错, #729
-- 修复 DatePicker 选择日期范围时当选中同一天再调整时间会出错
-- 更新 TimePicker 滚动条在 IE10+ 下隐藏
-- 新增 Dropdown 的 command api #432
-- 修复 Slider 在 Form 中的显示问题
-- 修复 Upload 在 onSuccess、onError 钩子无法拿到服务端返回信息的问题
-- 改善 tabs 现在支持动态更新
-- Table 新增 highlightCurrentRow 属性、新增 current-change 事件
-- TableColumn 的 showTooltipWhenOverflow 更名为 showOverflowTooltip（两个属性均可用）
-- TableColumn 新增属性 render-header
-- Pagination 新增属性 pageCount
-- DatePicker 修复重置 value 后默认选中日期没有重置, #878
+  - 修复 `focus` 方法在范围选择时无效的问题，#9437
+  - 修复当目前时刻处于不可选择的范围内时，点击面板上的「此刻」按钮仍能选中目前时刻的问题，#9470（by @wacky6）
+  - 修复当在月选择面板中选中天数较少的月份时，日期面板呈现下一个月的问题，#9577（by @wacky6）
+- Steps
+  - 修复在 IE 11 中的样式问题，#9454
 
 #### 非兼容性更新
+- Menu
+  - `collapse` 状态下的弹出菜单现在会插入至 body 元素，修复其位于 Aside 内时弹出菜单不可见的问题，#9263
+- Table
+  - 勾选多选表格的 checkbox 时不再同时触发 `row-click` 事件，#9467
+- Loading
+  - 非全屏 Loading 遮罩层的 `z-index` 修改为 2000；全屏 Loading 遮罩层的 `z-index` 值会随页面上的弹出组件动态更新，#9522
+- Dropdown
+  - `show-timeout` 和 `hide-timeout` 属性现在仅在 trigger 为 `hover` 时生效，#9573
 
-- Upload on-error 钩子函数参数变更为 function(err, response, file), on-success 钩子函数参数变更为 function(response, file, fileList)
-
-### 1.0.0-rc.8
-
-*2016-10-28*
-
-- 修复 Form reset method 对日期控件不起效的问题
-- 修复 Dialog/Message Box/Tooltip/Popover/... 等若干组件的样式错误
-- 修复 Message Box 的 prompt 在打开时会携带之前的验证状态的问题
-- 修复 Autocomplete 的弹出框不会消失 #439
-- 新增 Input 图标的点击事件 #444
-- 修复 Loading 关闭后有几率滚动失效的问题
-- 修复 远程搜索的 Select 不能正确渲染默认初始值的问题
-- 修复 Switch 的 width 属性无效的问题
-- Table 增加 rowClassName 属性
-- TableColumn 增加 fixed 属性，可选值：true, false, left, right
-- TableColumn 增加属性：filters、filterMultiple、filterMethod、filteredValue
-- TableColumn[type="selection"] 增加 selectable 属性
-- 修复 Input textarea 在动态赋值时 autosize 没有触发的问题
-- 修复 Input Number min max 属性设置后点击加减出现的崩溃的bug
-- 优化 TimePicker/DatePicker 输入日期行为
-- 修复 DatePicker 输入禁用状态的日期却生效的问题 #484
-- 新增 Slider 的 disabled 属性
-- 新增 Menu 的 menu-trigger 属性
-- 新增 i18n 的支持
+### 2.0.11
 
-#### 非兼容性更新
+*2018-01-08*
 
-- Tabs 组件的 click 和 remove 事件回调参数从 name 改为事件对应的 tab 组件实例
-- 全屏 Loading 现在默认不再锁定屏幕滚动。如果需要的话，可添加 `lock` 修饰符
-- Table 删除属性 fixedColumnCount、customCriteria、customBackgroundColors、selectionMode
-- Table 的 selectionchange、cellmouseenter、cellmouseleave、cellclick 事件更名为 selection-change、cell-mouse-enter、cell-mouse-leave、cell-click。
-- Pagination 的 currentchange、sizechange 事件更名为 current-change、size-change
-
-### 1.0.0-rc.7
-
-*2016-10-13*
-
-- Upload 新增 Data 属性支持额外数据的传输
-- DatePicker 修复 `$t` 报错
-- Popper 重构 vue-popper
-- Pagination 修复输入后再点击切换，输入框的值不更新
-- Step: 修复自定义 icon 的样式
-- 修复 Tree 组件 checkbox 点击失效的问题
-- Breadcrumb 增加路由跳转的功能
-- 修复 可清空的 Select 中清空按钮的不恰当动画
-- DatePicker 修复使用 Tab 键切换时弹出框未隐藏
-
-### 1.0.0-rc.6
-
-*2016-10-11*
-
-- 修复 Tabs 切换后 Tab-panel 被销毁的问题
-- 修复 TimePicker 错误的隐藏面板
-- 修复 Table Cell 的样式, #204
-- 修复 Menu default-active 属性不能为空的问题, #200
-- 修复 Menu unique-opened 开启后无法展开子菜单的问题, #200
-- 为 Notification 和 Message 的不同 type 添加独立的调用方法
-- 为 Message Box 和 Dialog 添加 lockScroll 属性，用于定义是否在弹框出现时将 body 滚动锁定
-- 新增 Input textarea 类型的 rows, autosize 属性
-- 为 Tree 添加 getCheckedNodes 方法和 node-click、check-change 回调
-- 新增 DatePicker 禁用日期功能 #253
-- 修复 多选可搜索的 Select 下拉选项自动展开的问题
-- 为 Dialog 添加 top 属性
-- 修复 Menu 组件垂直模式下开启 router 属性会立刻跳转的问题 #295
-- Checkbox change 事件现在只能被人为的交互操作所触发
-- 新增 Checkbox checked 属性
-- 修复 Select 远程搜索时使用键盘选择选项无法更新 v-model 的问题
+- 修复 Input 的 `prepend` 或 `append` slot 中 Select 的边框颜色错误，#9089
+- 修复 Select 的 `remove-tag` 事件参数与文档不符的问题，#9090
+- 新增 SubMenu 的 `show-timeout` 和 `hide-timeout` 属性，#8934（by @HugoLew）
+- 修复按需引入 Table 时 `show-overflow-tooltip` 的 Tooltip 样式丢失的问题，#9130
+- 修复 Table 在执行 `clearSort` 后点击对应列的排序图标无法正常排序的问题，#9100（by @zEmily）
+- 捷克语的 i18n 配置文件由 `cz` 重命名为 `cs-CZ`，#9164
 
-#### 非兼容性更新
+### 2.0.10
 
-- Dropdown 组件重构，现在可以以更加的灵活方便的形式来自定义触发下拉的元素，以及可以定义下菜单的样式
+*2017-12-29*
 
-### 1.0.0-rc.5
+- 修复了 Table 在固定列和合计行并存时的高度计算错误的问题，#9026
+- 修复了 Table 样式 SCSS 文件错误编译的问题，#9028
+- 现在 DatePicker 的 `change` 事件只会在 `value` 真正改变的时候触发，#9029（by @remizovvv）
+- 新增 Input 的 `tabindex` 属性，#9041（by @dicklwm）
 
-*2016-09-30*
+### 2.0.9🎄
 
-- 修复 Table 头部不同步的问题
-- 修复 Menu 组件 default-active 绑定动态值无法更新的问题
-- 新增特性 Menu 组件中若选中子菜单项现在会自动展开所有父级菜单
-- 修复 vue-popper 引入 popper 路径错误
-- 修复 DatePicker 初始值是合法时间类型但无法设置成功的问题
-- 修复 Pagination 的图标没有正确切换样式, #163
-- 修复 Row 组件 align 属性不生效的问题
-- 修复 Tabs 关闭标签页时对应 Tab-panel 没有移除的问题
-- 新增 Menu 组件中 MenuItem 的 route 属性
+*2017-12-24*
 
-#### 非兼容性更新
-- Menu 组件的 `unique-opend` 属性修正为 `unique-opened`
+- 新增 Upload 的 `before-remove` 钩子方法，#8788（by @firesh）
+- 修复 FormItem 的 `error` 属性初始值无效的问题，#8840
+- 通过指令调用的 Loading 现在支持以 `element-loading-custom-class` 属性的方式设置自定义类名，#8826（by @earlymeme）
+- 修复 CarouselItem 为异步获取时被隐藏的问题，#8921
+- 新增 Tree 的 `renderAfterExpand` 属性，#8972
 
-### 1.0.0-rc.4
+### 2.0.8
 
-*2016-09-21*
+*2017-12-12*
 
-- 修复 Select 多选时选项变为空数组后 placeholder 不出现的问题
-- 修复 Time Picker 时间选择可滚动
-- 修复 Tooltip 有时会错位的问题
-- 修复 丢失的组件 css 文件
-- 修复 Table 在 Safari 下边框没对齐
-- 修复 TimePicker 图标样式被默认图标样式覆盖
-- 修复 在 mounted 钩子函数中改变 Select 绑定值不生效的问题
-- 修复 在多个依次出现的 Dialog 或 Message Box 全部关闭后页面有几率不可滚动的问题
-- 修复 Table 初次渲染时宽度重新计算 #78
-- 新增 时间、日期选择器增加 align 属性，可设置对齐方式
-- 新增 TableColumn 的 align 属性
-- 新增 autocomplete 的 select 事件
+- 新增西班牙语文档
+- 修复 `show-timeout` 对点击触发的 Dropdown 无效的问题，#8734（by @presidenten）
+- 修复 Form 对于 `trigger` 为 blur 的校验规则触发时机有误的问题，#8776
+- 修复 DatePicker 在范围选择时 blur 事件触发时机有误的问题，#8784
+- TimePicker 的 `format` 新增对 AM/PM 的支持，#8620（by @firesh）
 
-#### 非兼容性更新
-- Select 组件样式的 `display` 属性默认值修改为 `block`
+### 2.0.7
 
-### 1.0.0-rc.3
+*2017-11-29*
 
-*2016-09-09*
+- 修复禁用文字按钮的样式问题，#8570
 
-- 修复 Slider 存在输入框时，输入框与 Slider 的值不同步的问题
-- 修复 Steps 样式
-- 修复 无法安装的问题
+### 2.0.6
 
-### 1.0.0-rc.2
+*2017-11-29*
 
-*2016-09-09*
+- 修复 Table 排序图标的样式问题，#8405
+- 修复 `trigger` 为 manual 的 Popover 的触发问题，#8467
+- 新增 Autocomplete 的 `prefix-icon` 和 `suffix-icon` 属性，#8446（by @liyanlong）
+- 新增 Cascader 的 `separator` 属性，#8501
+- 新增 Input 的 `clearable` 属性，#8509（by @lbogdan）
+- 新增 Pagination 的 `background` 属性，#8553
 
-- 修复 Upload 上传的问题，并增加上传成功和失败的钩子函数
-- Button 组件增加 `nativeType` 属性，用于组件内 `<button>` 标签的原生 `type` 属性，默认值为 `button`
-- 修复 Table 自定义模板中渲染静态数据错误
-- 修复 Table 中被固定列的高度不与其他列的高度协调的问题
-- 修复 Time Picker 的 `picker-options` 属性
-- 修复一些组件图标丢失的问题
-- 修复 远程搜索的 Select 在 Form 中的显示问题
-- 修复 Input Number 输入小数和非数字值时的问题
-- 修复 Select 选中 value 为 0 的值时绑定值不更新的问题
-- 修复 Tree 取消选择某节点后，其同级节点均被取消的问题
-- 修复 Upload 的 headers 属性设置无效
-- 修复 Pagination 包含 sizes 子组件时 page-size 无效的问题
-- 优化 增加打包成 commonjs 且不压缩的文件，默认引入 commonjs
+### 2.0.5
 
-#### 非兼容性更新
-- Menu 组件 `mode` 属性默认值修改为 `vertical`
-- Progress 组件升级，增加环形进度条的类型，以及增加了诸多属性，详细请查阅文档
-- Popover 现在可以通过 slot 指定 reference
+*2017-11-17*
+
+- 修复上个版本引入的 Popover、Tree、Breadcrumb、Cascader 的 bug，#8188 #8217 #8283
+- 修复 clickoutside 指令的内存泄露问题，#8168 #8225（by @badpunman @STLighter）
+- 修复默认尺寸的多选 Select 在清空选项后输入框高度不随之更新的问题，#8317（by @luciy）
+- 新增 Select 的 `collapse-tags` 属性，用于在多选时以文字代替 Tag，避免组件高度的增大，#8190
+- 修复被隐藏的 Table 会造成 CPU 占用持续增加的问题，#8351
+- 开放 Table 的 `doLayout` 方法，用于重新计算 Table 的布局，#8351
+
+### 2.0.4
+
+*2017-11-10*
+
+- 提升 Cascader、Dropdown、Message、Notification、Popover、Tooltip、Tree 的可访问性
+- 修复当视口变窄时 Container 无法同步更新其宽度的问题，#8042
+- 修复 Tree 的 `updateKeyChildren` 在删除子节点时的行为错误，#8100
+- 修复带有边框的 CheckboxButton 在 Form 中高度错误的问题，#8100
+- 修复 Menu 在解析自定义颜色时的错误，#8153（by @zhouyixiang）
+
+### 2.0.3
+
+*2017-11-03*
+
+- 修复范围选择的 DatePicker `editable` 和 `readonly` 属性无法正常工作的问题，#7922
+- 修复嵌套的 Tabs 的样式错误，#7941
+- 修复纵向 Steps 中最后一个 Step 的样式错误，#7980
+- 修复 Pagination 的 `current-change` 事件触发时机错误的问题，#7995
+- 修复由于 Menu 使用了未注册的 Tooltip 造成其在按需引入时报错的问题，#7995
+
+### 2.0.2
+
+*2017-10-31*
 
-### 1.0.0-rc.1
+- 在 InputNumber 的加减按钮上单击鼠标右键不再触发值的改变，#7817
+- Form 的 `validate` 方法现在能够正确地在异步校验完成后执行回调了，#7774（by @Allenice）
+- 修复 DatePicker 的范围选择在内核为 Chromium 53-57 的浏览器中无法使用的问题，#7838
+- 修复 `list-type` 为 picture-card 的 Upload 预览和删除图标丢失的问题，#7857
+- 新增 TableColumn 的 `sort-by` 属性，#7828（by @wangfengming）
+- 修复周模式下的 DatePicker 在选择某年第一周可能会显示为前一年第一周的问题，#7860（by @hh23485）
+- 修复垂直模式的 Steps 中图标宽度的样式错误，#7891
+- 增大了 Tree 中展开箭头的点击热区，#7891
 
-*2016-08-30*
+### 2.0.1
 
-Element 1.0.0-rc.1 发布
+*2017-10-28*
+
+- 修复 RadioButton 和 CheckboxButton 的样式问题，#7793
+- 修复 TimePicker 在某些情况下无法滚动的问题，#7811
+- 修复部分组件在按需引入时样式不完整的问题，#7811
+
+### 2.0.0 Carbon
+
+*2017-10-27*
+
+#### 新特性
+- 综合
+  - 新增 `theme-chalk` 主题
+  - 增强以下组件的可访问性：Alert、AutoComplete、Breadcrumb、Button、Checkbox、Collapse、Input、InputNumber、Menu、Progress、Radio、Rate、Slider、Switch 和 Upload
+  - 新增布局组件 Container、Header、Aside、Main 和 Footer
+  - 新增 TypeScript 类型声明
+  - 重绘了全部图标，并新增了部分图标
+  - 新增了一系列基于断点的工具类，用于当视口尺寸满足一定条件时隐藏元素
+  - 新增全局配置组件尺寸的功能。在引入 Element 时，配置 `size` 字段可以改变所有组件的默认尺寸
+- Button
+  - 新增 `round` 属性，用于圆角按钮 #6643
+- TimeSelect
+  - 可以用 `Up`、`Down` 导航，用 `Enter` 选中时间 #6023
+- TimePicker
+  - 可以用方向键导航，用 `Enter` 选中时间 #6050
+  - 新增 `start-placeholder` 和 `end-placeholder`，用于设置范围选择时两个输入框的占位符 #7169
+  - 新增 `arrow-control` 属性，提供另一种交互形式，#7438
+- Tree
+  - 子节点在首次被展开之前不进行渲染 #6257
+  - 新增 `check-descendants` 属性，设置 `lazy` 模式下勾选节点时，是否完全展开整个子树 #6235
+- Tag
+  - 新增 `size` 属性 #7203
+- Datepicker
+  - type 为 `datetimerange` 时可以使用 `timeFormat` 格式化时间选择器 #6052
+  - 新增 `start-placeholder` 和 `end-placeholder`，用于设置范围选择时两个输入框的占位符 #7169
+  - 新增 `value-format` 属性，支持对绑定值的格式进行自定义，#7367
+  - 新增 `unlink-panels` 属性，用于在选择日期范围时取消两个日期面板之间的联动
+- MessageBox
+  - 新增 `closeOnHashChange` 属性 #6043
+  - 新增 `center` 属性，提供居中布局 #7029
+  - 新增 `roundButton` 属性，使得内部按钮为圆角按钮 #7029
+  - 新增 `dangerouslyUseHTMLString` 属性，使得 `message` 支持传入 HTML 字符串<sup>*</sup> #6043
+  - 新增 `inputType` 属性，用户指定内部输入框的类型，#7651
+- Dialog
+  - 新增 `width`、`fullscreen`、`append-to-body` 属性，支持嵌套使用
+  - 新增 `center` 属性，提供居中布局 #7042
+  - 新增 `focus-after-closed`、`focus-after-open`属性，支持无障碍访问 #6511
+- ColorPicker
+  - 增加手动输入色值的支持 #6167
+  - 新增 `size` 属性，用于控制组件的大小 #7026
+  - 新增 `disabled` 属性，用于禁用组件 #7026
+  - 新增 `popper-class` 属性，#7351
+- Message
+  - 图标部分使用 icon 代替图片，从而支持通过 CSS 修改图标背景色 #6207
+  - 新增 `dangerouslyUseHTMLString` 属性，使得 `message` 属性支持传入 HTML 字符串<sup>*</sup> #6207
+  - 新增 `center` 属性，提供居中布局 #6875
+- Notification
+  - 新增 `position` 属性，用于配置 Notification 出现的位置 #6231
+  - 新增 `dangerouslyUseHTMLString` 属性，使得 `message` 属性支持传入 HTML 字符串<sup>*</sup> #6231
+  - 新增 `showClose` 属性，用于隐藏关闭按钮 #6402
+- Rate
+  - 新增 `show-score` 属性，控制是否在右侧显示当前分数 #6295
+- Tabs
+  - 新增 `tab-position` 属性，控制选项面板内容显示的上、下、左、右四个方向 #6096
+- Radio
+  - 增加 `border` 属性和 `size` 属性 #6690
+- Checkbox
+  - 增加 `border` 属性和 `size` 属性 #6690
+- Alert
+  - 新增 `center` 属性，提供居中布局 #6876
+- Menu
+  - 新增 `background-color`、`text-color` 和 `active-text-color` 属性，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色 #7064
+  - 新增 `open` 和 `close` 方法，支持手动打开和关闭 SubMenu，#7412
+- Form
+  - 新增 `inline-message` 属性，设置后校验信息会以行内样式显示 #7032
+  - 新增 `status-icon` 属性，用于在输入框中显示校验结果反馈图标 #7032
+  - Form 和 FormItem 新增 `size` 属性，用于控制表单内组件的尺寸，#7428
+  - `validate` 方法在不传入 callback 的情况下返回 promise，#7405
+  - 新增 `clearValidate` 方法，用于清空所有表单项的验证信息，#7623
+- Input
+  - 新增 `suffix`、`prefix` 的 slot，以及 `suffixIcon`、`prefixIcon` 属性，用于给输入框内部增加前置和后置内容 #7032
+- Breadcrumb
+  - 新增 `separator-class` 属性，可使用图标作为分隔符 #7203
+- Steps
+  - 新增 `simple` 属性，用于开启简洁风格的步骤条 #7274
+- Pagination
+  - 新增 `prev-text` 和 `next-text` 属性，用于自定义上一页和下一页的文本 #7005
+- Loading
+  - 配置对象新增 `spinner` 和 `background` 字段，支持自定义加载图标和背景色，#7390
+- Autocomplete
+  - 新增 `debounce` 属性，#7413
+- Upload
+  - 新增 `limit` 和 `on-exceed` 属性，支持对上传文件的个数进行限制，#7405
+- DateTimePicker
+  - 新增 `time-arrow-control` 属性，用于开启时间选择器的 `arrow-control`，#7438
+- Layout
+  - 新增断点 `xl`，适用于宽度大于 1920px 的视口
+- Table
+  - 新增 `span-method` 属性，用于合并行或列
+  - 新增 `clearSort` 方法，用于清空排序状态
+  - 新增 `clearFilter` 方法，用于清空过滤状态
+  - 对于可展开行，当该行展开时会获得一个 `.expanded` 类名，方便自定义样式
+  - 新增 `size` 属性，用于控制表格尺寸
+  - 新增 `toggleRowExpansion` 方法，用于手动展开或关闭行
+  - 新增 `cell-class-name` 属性，用于指定单元格的类名
+  - 新增 `cell-style` 属性，用于指定单元格的样式
+  - 新增 `header-row-class-name` 属性，用于指定表头行的类名
+  - 新增 `header-row-style` 属性，用于指定表头行的样式
+  - 新增 `header-cell-class-name` 属性，用于指定表头单元格的类名
+  - 新增 `header-cell-style` 属性，用于指定表头单元格的样式
+  - TableColumn 的 `prop` 属性支持 `object[key]` 格式
+  - TableColumn 新增 `index` 属性，用于自定义索引值
+- Select
+  - 新增 `reserve-keyword` 属性，用于在选择某个选项后保留当前的搜索关键词
+
+#### 修复
+- DatePicker
+  - 选择周数时，`v-model` 结果返回该周第二天的问题 #6038
+  - 在 `daterange` 类型中，第一次的输入会被清空的问题 #6021
+- DateTimePicker
+  - 和 TimePicker 相互影响的问题 #6090
+  - 选择时间小时和秒可超出限制的问题 #6076
+- TimePicker
+  - 失去焦点时无法正确改变 `v-model` 值的问题 #6023
+- Dialog
+  - 当含有下拉框时，下拉框的打开和关闭会造成文字虚晃的问题 #6088
+- Select
+  - 提升性能，修复组件销毁时可能导致 Vue dev-tool 卡死的问题 #6151
+- Table
+  - 修复 Table 在父元素从 `display: none` 变成其他状态时会隐藏的问题
+  - 修复 Table 在父元素为 `display: flex` 时可能出现的宽度逐渐变大的问题
+  - 修复 `append` 具名 slot 和固定列并存时，动态获取表格数据会导致固定列消失的问题
+  - 修复 `expand-row-keys` 属性初始化无效的问题
+  - 修复 `data` 改变时过滤条件失效的问题
+  - 修复多级表头时固定列隐藏情况计算错误的问题
+  - 修复 `max-height` 变更后无法恢复的问题
+  - 修复一些样式上的计算错误
+
+#### 非兼容性更新
+- 综合
+  - 移除 `theme-default`
+  - 最低兼容 Vue 2.5.2 和 IE 10
+  - 表单组件的 `change` 事件和 Pagination 的 `current-change` 事件现在仅响应用户交互
+  - Button 和表单组件的 `size` 属性现在可接受 `medium`、`small` 和 `mini`
+  - 为了方便使用第三方图标，Button 的 `icon` 属性、Input 的 `prefix-icon` 和 `suffix-icon` 属性、Steps 的 `icon` 属性现在需要传入完整的图标类名
+- Dialog
+  - 移除 `size` 属性。现在 Dialog 的尺寸由 `width` 和 `fullscreen` 控制
+  - 移除通过 `v-model` 控制 Dialog 显示和隐藏的功能
+- Rate
+  - `text-template` 属性更名为 `score-template`
+- Dropdown
+  - `menu-align` 属性变更为 `placement`，增加更多方位属性
+- Transfer
+  - `footer-format` 属性更名为 `format`
+- Switch
+  - 由于 `on-*` 属性在 JSX 中会被识别为事件，导致 Switch 所有 `on-*` 属性在 JSX 中无法正常工作，所以 `on-*` 属性更名为 `active-*`，对应地，`off-*` 属性更名为 `inactive-*`。受到影响的属性有：`on-icon-class`、`off-icon-class`、`on-text`、`off-text`、`on-color`、`off-color`、`on-value`、`off-value`
+  - `active-text` 和 `inactive-text` 属性不再有默认值
+- Tag
+  - `type` 属性现在支持 `success`、`info`、`warning` 和 `danger` 四个值
+- Menu
+  - 移除 `theme` 属性。现在通过 `background-color`、`text-color` 和 `active-text-color` 属性进行颜色的自定义
+- Input
+  - 移除 `icon` 属性。现在通过 `suffix-icon` 属性或者 `suffix` 具名 slot 来加入尾部图标
+  - 移除 `on-icon-click` 属性和 `click` 事件。现在如果需要为输入框中的图标添加点击事件，请以具名 slot 的方式添加图标
+  - `change` 事件现在仅在输入框失去焦点或用户按下回车时触发，与原生 input 元素一致。如果需要实时响应用户的输入，可以使用 `input` 事件
+- Autocomplete
+  - 移除 `custom-item` 属性。现在通过 `scoped slot` 自定义输入建议列表项的内容
+  - 移除 `props` 属性，现在使用 `value-key` 属性指定输入建议对象中用于显示的键名
+- Steps
+  - 移除 `center` 属性
+  - 现在步骤条将默认充满父容器
+- DatePicker
+  - `change` 事件参数现在为组件的绑定值，格式由 `value-format` 控制
+- Table
+  - 移除通过 `inline-template` 自定义列模板的功能
+  - `sort-method` 现在和 `Array.sort` 保持一致的逻辑，要求返回一个数字
+  - 将 `append` slot 移至 `tbody` 元素以外，以保证其只被渲染一次
+  - `expand` 事件更名为 `expand-change`，以保证 API 的命名一致性
+  - `row-class-name` 和 `row-style` 的函数参数改为对象，以保证 API 的一致性
+
+##
+<i><sup>*</sup> 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此请在 `dangerouslyUseHTMLString` 打开的情况下，确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。</i>
\ No newline at end of file
diff --git a/FAQ.md b/FAQ.md
index a52f03bc72..841d7f0132 100644
--- a/FAQ.md
+++ b/FAQ.md
@@ -1,185 +1,217 @@
 ## 常见问题
 
 <details>
-<summary>给组件绑定的事件为什么无法触发？</summary>
-
-在 Vue 2.0 中，为**自定义**组件绑定**原生**事件必须使用 `.native` 修饰符：
-```html
-<my-component @click.native="handleClick">Click Me</my-component>
-```
-
-从易用性的角度出发，我们对 `Button` 组件进行了处理，使它可以监听 `click` 事件：
-```html
-<el-button @click="handleButtonClick">Click Me</el-button>
-```
-
-但是对于其他组件，还是需要添加 `.native` 修饰符。
-</details>
-
-<details>
-<summary>如何在 Table 组件的每一行添加操作该行数据的按钮？</summary>
-
-使用 [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots) 即可：
-```html
-<el-table-column label="操作">
-  <template scoped="props">
-    <el-button @click.native="showDetail(props.row)">查看详情</el-button>
-  </template>
-</el-table-column>
-```
-参数 `row` 即为对应行的数据。
+  <summary>给组件绑定的事件为什么无法触发？</summary>
+  
+  在 Vue 2.0 中，为**自定义**组件绑定**原生**事件必须使用 `.native` 修饰符：
+  ```html
+  <my-component @click.native="handleClick">Click Me</my-component>
+  ```
+  
+  从易用性的角度出发，我们对 `Button` 组件进行了处理，使它可以监听 `click` 事件：
+  ```html
+  <el-button @click="handleButtonClick">Click Me</el-button>
+  ```
+  
+  但是对于其他组件，还是需要添加 `.native` 修饰符。
 </details>
 
 <details>
-<summary>Tree 组件的 `render-content` 和 Table 组件的 `render-header` 怎么用？</summary>
-
-请阅读 Vue 文档 [Render Function](http://vuejs.org/v2/guide/render-function.html) 的相关内容。注意，使用 JSX 来写 Render Function 的话，需要安装 `babel-plugin-transform-vue-jsx`，并参照其[文档](https://github.com/vuejs/babel-plugin-transform-vue-jsx)进行配置。
+  <summary>如何在 Table 组件的每一行添加操作该行数据的按钮？</summary>
+  
+  使用 [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots) 即可：
+  ```html
+  <el-table-column label="操作">
+    <template slot-scope="props">
+      <el-button @click.native="showDetail(props.row)">查看详情</el-button>
+    </template>
+  </el-table-column>
+  ```
+  参数 `row` 即为对应行的数据。
 </details>
 
 <details>
-<summary>如何使用第三方图标库？</summary>
-
-只要修改第三方图标库的前缀（具体方法参阅第三方库的文档），并编写相应的 CSS，即可在 Element 中像使用内置图标一样使用第三方图标。例如，将第三方库的前缀改为 `el-icon-my`，然后在其 CSS 文件中添加：
-```css
-[class^="el-icon-my"], [class*=" el-icon-my"] {
-  font-family:"your-font-family" !important;
-
-  /* 以下内容参照第三方图标库本身的规则 */
-  font-size: inherit;
-  font-style:normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-```
-具体使用时，和 Element 内置的图标用法一样。比如在 `el-input` 中：
-```html
-<el-input icon="my-xxx" />
-```
+  <summary>Tree 组件的 `render-content` 和 Table 组件的 `render-header` 怎么用？</summary>
+  
+  请阅读 Vue 文档 [Render Function](http://vuejs.org/v2/guide/render-function.html) 的相关内容。注意，使用 JSX 来写 Render Function 的话，需要安装 `babel-plugin-transform-vue-jsx`，并参照其[文档](https://github.com/vuejs/babel-plugin-transform-vue-jsx)进行配置。
 </details>
 
 <details>
-<summary>所有组件的任意属性都支持 `.sync` 修饰符吗？</summary>
+  <summary>所有组件的任意属性都支持 `.sync` 修饰符吗？</summary>
   
-不是。对于支持 `.sync` 修饰符的属性，我们会在文档的 API 表格中注明。更多 `.sync` 的用法请查看 [Vue 文档](https://vuejs.org/v2/guide/components.html#sync-Modifier)。
+  不是。对于支持 `.sync` 修饰符的属性，我们会在文档的 API 表格中注明。更多 `.sync` 的用法请查看 [Vue 文档](https://vuejs.org/v2/guide/components.html#sync-Modifier)。
 </details>
 
 <details>
-<summary>你们的文档怎么偷偷更新了？</summary>
-
-我们只会在 Element 发布新版本时同步更新文档，以体现最新的变化。详细的更新内容可以查看 [changelog](https://github.com/ElemeFE/element/blob/master/CHANGELOG.zh-CN.md)。
+  <summary>你们的文档怎么偷偷更新了？</summary>
+  
+  我们只会在 Element 发布新版本时同步更新文档，以体现最新的变化。详细的更新内容可以查看 [changelog](https://github.com/ElemeFE/element/blob/master/CHANGELOG.zh-CN.md)。
 </details>
 
 <details>
-<summary>在项目中引入 Element，但是 CSS 报错/字体文件报错/组件没有样式是什么原因？</summary>
-
-请参考我们提供的 [starter kit](https://github.com/ElementUI/element-starter)，在 webpack 的 loaders 中正确配置 file-loader、css-loader 和 style-loader。此外，我们还提供了基于 [cooking](https://github.com/ElementUI/element-cooking-starter) 和 [laravel](https://github.com/ElementUI/element-in-laravel-starter) 的项目模板。
+  <summary>在项目中引入 Element，但是 CSS 报错/字体文件报错/组件没有样式是什么原因？</summary>
+  
+  请参考我们提供的 [starter kit](https://github.com/ElementUI/element-starter)，在 webpack 的 loaders 中正确配置 file-loader、css-loader 和 style-loader。此外，我们还提供了基于 [cooking](https://github.com/ElementUI/element-cooking-starter) 和 [laravel](https://github.com/ElementUI/element-in-laravel-starter) 的项目模板。
 </details>
 
 <details>
-<summary>将 Element 克隆至本地，运行时为何会报错/跑不起来？</summary>
-
-首先，确保克隆的是 master 分支的最新代码，并且文件完整。其次，确保本地的 node 版本在 4.0 以上，npm 版本在 3.0 以上。最后，可以启动开发环境：
-
-```bash
-npm run dev
-```
-
-或是直接打包：
-
-```bash
-npm run dist
-```
+  <summary>将 Element 克隆至本地，运行时为何会报错/跑不起来？</summary>
+  
+  首先，确保克隆的是 master 分支的最新代码，并且文件完整。其次，确保本地的 node 版本在 4.0 以上，npm 版本在 3.0 以上。最后，可以启动开发环境：
+  
+  ```bash
+  npm run dev
+  ```
+  
+  或是直接打包：
+  
+  ```bash
+  npm run dist
+  ```
 </details>
 
 ## FAQ
 
 <details>
-<summary>Why are my event listeners not working?</summary>
-
-In Vue 2.0, adding **native** event handlers in **custom** components requires a `.native` modifier:
-```html
-<my-component @click.native="handleClick">Click Me</my-component>
-```
-
-For the sake of usability, we processed `Button` so it can listen to `click` events:
-```html
-<el-button @click="handleButtonClick">Click Me</el-button>
-```
+  <summary>Why are my event listeners not working?</summary>
+  
+  In Vue 2.0, adding **native** event handlers in **custom** components requires a `.native` modifier:
+  ```html
+  <my-component @click.native="handleClick">Click Me</my-component>
+  ```
+  
+  For the sake of usability, we processed `Button` so it can listen to `click` events:
+  ```html
+  <el-button @click="handleButtonClick">Click Me</el-button>
+  ```
+  
+  For other components, the `.native` modifier is still mandatory.
+</details>
 
-For other components, the `.native` modifier is still mandatory.
+<details>
+  <summary>How do I add buttons in each row of Table to operate data of that row?</summary>
+  
+  Just use [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots):
+  ```html
+  <el-table-column label="Operations">
+    <template slot-scope="props">
+      <el-button @click.native="showDetail(props.row)">Details</el-button>
+    </template>
+  </el-table-column>
+  ```
+  The parameter `row` is the data object of corresponding row.
 </details>
 
 <details>
-<summary>How do I add buttons in each row of Table to operate data of that row?</summary>
+  <summary>How do `render-content` of Tree and `render-header` of Table work?</summary>
+  
+  Please refer to [Render Function](http://vuejs.org/v2/guide/render-function.html) in Vue's documentation. In addition, if you are writing render functions with JSX, `babel-plugin-transform-vue-jsx` is required. See [here](https://github.com/vuejs/babel-plugin-transform-vue-jsx) for its configurations.
+</details>
 
-Just use [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots):
-```html
-<el-table-column label="Operations">
-  <template scoped="props">
-    <el-button @click.native="showDetail(props.row)">Details</el-button>
-  </template>
-</el-table-column>
-```
-The parameter `row` is the data object of corresponding row.
+<details>
+  <summary>Can I use `.sync` modifier on every attribute?</summary>
+  
+  No, only a few attributes supports the `.sync` modifier, and we have explicitly marked them on the documentation's API table. For more information about `.sync`, please refer to [Vue documentation](https://vuejs.org/v2/guide/components.html#sync-Modifier).
 </details>
 
 <details>
-<summary>How do `render-content` of Tree and `render-header` of Table work?</summary>
+  <summary>When do you update documentations of Element?</summary>
+  
+  We update documentations only when a new version of Element is published so that it reflects all the changes introduced in that version. Updated changed can be found in the [changelog](https://github.com/ElemeFE/element/blob/master/CHANGELOG.en-US.md)。
+</details>
 
-Please refer to [Render Function](http://vuejs.org/v2/guide/render-function.html) in Vue's documentation. In addition, if you are writing render functions with JSX, `babel-plugin-transform-vue-jsx` is required. See [here](https://github.com/vuejs/babel-plugin-transform-vue-jsx) for its configurations.
+<details>
+  <summary>I imported Element in my project, but why does it report CSS error/font file error/components have no style?</summary>
+  
+  Please refer to our [starter kit](https://github.com/ElementUI/element-starter) and correctly configure file-loader, css-loader and style-loader in webpack config file. Besides, we also provide templated based on [cooking](https://github.com/ElementUI/element-cooking-starter) and [laravel](https://github.com/ElementUI/element-in-laravel-starter).
 </details>
 
 <details>
-<summary>How do I use third-party icon font library with Element?</summary>
+  <summary>I cloned Element's repo, but failed to run it. How do I solve it?</summary>
+  
+  First, please make sure to clone the latest code in master branch and cloned files are intact. Then, note that the version of Nodejs should be 4.0+ and npm 3.0+. Finally, activate development:
+  
+  ```bash
+  npm run dev
+  ```
+  
+  or build it:
+  
+  ```bash
+  npm run dist
+  ```
+</details>
 
-You just need to modify the class name prefix of the third-party library (see their docs for how to do it), and write some CSS, then you can use them just like you use Element built-in icons. For example, change the prefix to `el-icon-my`, and then add the following to its CSS:
-```css
-[class^="el-icon-my"], [class*=" el-icon-my"] {
-  font-family:"your-font-family" !important;
+## Preguntas más frecuentes
 
-  /* The following is based on original CSS rules of third-party library */
-  font-size: inherit;
-  font-style:normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-```
-Now you can use them as you do with built-in icons. For example, in `el-input`:
-```html
-<el-input icon="my-xxx" />
-```
+<details>
+  <summary>¿Porque mis receptores de eventos no funcionan?</summary>
+  
+  En Vue 2.0, agregando **nativos** receptores de evento **a medida** componentes requiere el modificador `.native`:
+  ```
+  html
+  <mi-componente @click.native="handleClick">Haga Clic Aquí</mi-componente>
+  ```
+  
+  Para conveniencia, hemos ya procesado eventos para el componente `Button` para que el interfaz sea consistente con `clic` eventos de otros componentes:
+  
+  ```html
+  <el-button @click="handleButtonClick">Haga Clic Aquí</el-button>
+  ```
+  
+  Para otros componentes el uso del modificador `.native` sigue siendo obligatorio.
 </details>
 
 <details>
-<summary>Can I use `.sync` modifier on every attribute?</summary>
+  <summary>¿Como agrego botones en cada linea de una tabla para que operen en los datos de esa linea?</summary>
   
-No, only a few attributes supports the `.sync` modifier, and we have explicitly marked them on the documentation's API table. For more information about `.sync`, please refer to [Vue documentation](https://vuejs.org/v2/guide/components.html#sync-Modifier).
+  Simplemente agregue [“Scoped slot”](https://vuejs.org/v2/guide/components.html#Scoped-Slots):
+  ```html
+  <el-table-column label="Operaciones">
+    <template slot-scope="props">
+      <el-button @click.native="verDetalles(props.row)">Detalles</el-button>
+    </template>
+  </el-table-column>
+  ```
+  El parámetro `row` contiene los datos de la linea correspondiente de la tabla.
 </details>
 
 <details>
-<summary>When do you update documentations of Element?</summary>
-
-We update documentations only when a new version of Element is published so that it reflects all the changes introduced in that version. Updated changed can be found in the [changelog](https://github.com/ElemeFE/element/blob/master/CHANGELOG.en-US.md)。
+  <summary>¿Como funcionan `render-content` de `Tree` y `render-header` de `Table`?</summary>
+  
+  Por favor refiérase a [Función de representación](http://vuejs.org/v2/guide/render-function.html) en la documentación de `Vue`. Adicionalmente, sí usted está escribiendo funciones de representar con JSX, se requiere el componente `babel-plugin-transform-vue-jsx`. Más información [aquí](https://github.com/vuejs/babel-plugin-transform-vue-jsx) para su uso y configuración.
 </details>
 
 <details>
-<summary>I imported Element in my project, but why does it report CSS error/font file error/components have no style?</summary>
-
-Please refer to our [starter kit](https://github.com/ElementUI/element-starter) and correctly configure file-loader, css-loader and style-loader in webpack config file. Besides, we also provide templated based on [cooking](https://github.com/ElementUI/element-cooking-starter) and [laravel](https://github.com/ElementUI/element-in-laravel-starter).
+  <summary>¿Puedo usar el modificador `.sync` con cada atributo?</summary>
+  
+  No, solamente un grupo pequeño de atributos apoyan el modificador `.sync`, y están anotados claramente en la documentación del IPA. Para información adicional sobre `.sync`, por favor refiérase a [documentación de Vue](https://vuejs.org/v2/guide/components.html#sync-Modifier).
 </details>
 
 <details>
-<summary>I cloned Element's repo, but failed to run it. How do I solve it?</summary>
-
-First, please make sure to clone the latest code in master branch and cloned files are intact. Then, note that the version of Nodejs should be 4.0+ and npm 3.0+. Finally, activate development:
-
-```bash
-npm run dev
-```
+  <summary>¿Cuando añaden a la documentación de `Element`?</summary>
+  
+  Añadamos la documentación con cada versión nueva de `Element` y los cambios reflejan los cambios del software de esa versión. Los cambios actuales y históricos se encuentran [aquí](https://github.com/ElemeFE/element/blob/master/CHANGELOG.en-US.md).
+</details>
 
-or build it:
+<details>
+  <summary>¿Importé `Element` a mi proyecto pero tengo errores con `CSS` y/o fuentes y mis componentes no tienen ningún estilo?</summary>
+  
+  Refiérase a [nuestro ‘kit’ de inicio](https://github.com/ElementUI/element-starter) y configure correctamente `file-loader`, `css-loader` y `style-loader` en el archivo `webpack config`. Además, proveemos un ejemplar para [cooking](https://github.com/ElementUI/element-cooking-starter) y para [laravel](https://github.com/ElementUI/element-in-laravel-starter).
+</details>
 
-```bash
-npm run dist
-```
+<details>
+  <summary>Hice un clon del repositorio de `Element` pero no arranca. ¿Como lo resuelvo?</summary>
+  
+  Primero, pro favor, asegúrese de usar la versión más corriente en la rama  `master` y que los archivos están en orden. Después, revise sí la versión de `Nodejs` es 4.0+ y `npm` debe ser 3.0+. Finalmente active el modo desarrollo:
+  
+  ```bash
+  npm run dev
+  ```
+  
+  O arme su aplicación así:
+  
+  ```bash
+  npm run dist
+  ```
 </details>
diff --git a/LICENSE b/LICENSE
index a764a8670e..cf66100070 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016 ElemeFE
+Copyright (c) 2016-present ElemeFE
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
\ No newline at end of file
+SOFTWARE.
diff --git a/Makefile b/Makefile
index 96c7b3113d..ccedd526a1 100644
--- a/Makefile
+++ b/Makefile
@@ -26,18 +26,12 @@ new-lang:
 dist: install
 	npm run dist
 
-dist-all:
-	npm run dist:all
-
 deploy:
 	@npm run deploy
 
 pub:
 	npm run pub
 
-pub-all:
-	npm run pub:all
-
 test:
 	npm run test:watch
 
@@ -47,8 +41,6 @@ help:
 	@echo "   \033[35mmake new <component-name> [中文名]\033[0m\t---  创建新组件 package. 例如 'make new button 按钮'"
 	@echo "   \033[35mmake dev\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  开发模式"
 	@echo "   \033[35mmake dist\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  编译项目，生成目标文件"
-	@echo "   \033[35mmake dist-all\033[0m\t\033[0m\t\033[0m\t---  分别编译每个组件项目"
 	@echo "   \033[35mmake deploy\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  部署 demo"
 	@echo "   \033[35mmake pub\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  发布到 npm 上"
-	@echo "   \033[35mmake pub-all\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  发布各组件到 npm 上"
 	@echo "   \033[35mmake new-lang <lang>\033[0m\t\033[0m\t\033[0m\t---  为网站添加新语言. 例如 'make new-lang fr'"
diff --git a/README.md b/README.md
index 5f9194e693..d0d228033b 100644
--- a/README.md
+++ b/README.md
@@ -2,48 +2,92 @@
   <img src="https://cdn.rawgit.com/ElemeFE/element/dev/element_logo.svg">
 </p>
 
-# Element
-
-[![Build Status](https://travis-ci.org/ElemeFE/element.svg?branch=master)](https://travis-ci.org/ElemeFE/element)
-[![Coverage Status](https://coveralls.io/repos/github/ElemeFE/element/badge.svg?branch=master)](https://coveralls.io/github/ElemeFE/element?branch=master)
-[![CDNJS](https://img.shields.io/cdnjs/v/element-ui.svg)](https://cdnjs.com/libraries/element-ui)
-[![npm package](https://img.shields.io/npm/v/element-ui.svg)](https://www.npmjs.org/package/element-ui)
-[![NPM downloads](http://img.shields.io/npm/dm/element-ui.svg)](https://npmjs.org/package/element-ui)
-![JS gzip size](http://img.badgesize.io/https://unpkg.com/element-ui/lib/index.js?compression=gzip&label=gzip%20size:%20JS)
-![CSS gzip size](http://img.badgesize.io/https://unpkg.com/element-ui/lib/theme-default/index.css?compression=gzip&label=gzip%20size:%20CSS)
-[![Join the chat at https://gitter.im/ElemeFE/element](https://badges.gitter.im/ElemeFE/element.svg)](https://gitter.im/ElemeFE/element?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)(Chinese)
-[![Join the chat at https://gitter.im/element-en/Lobby](https://badges.gitter.im/element-en/Lobby.svg)](https://gitter.im/element-en/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)(English)
-[![OpenCollective](https://opencollective.com/element/backers/badge.svg)](#backers) 
-[![OpenCollective](https://opencollective.com/element/sponsors/badge.svg)](#sponsors)
-
-> A Vue.js 2.0 UI Toolkit for Web.
+<p align="center">
+  <a href="https://travis-ci.org/ElemeFE/element">
+    <img src="https://travis-ci.org/ElemeFE/element.svg?branch=master">
+  </a>
+  <a href="https://coveralls.io/github/ElemeFE/element?branch=master">
+    <img src="https://coveralls.io/repos/github/ElemeFE/element/badge.svg?branch=master">
+  </a>
+  <a href="https://cdnjs.com/libraries/element-ui">
+    <img src="https://img.shields.io/cdnjs/v/element-ui.svg">
+  </a>
+  <a href="https://www.npmjs.org/package/element-ui">
+    <img src="https://img.shields.io/npm/v/element-ui.svg">
+  </a>
+  <a href="https://npmcharts.com/compare/element-ui?minimal=true">
+    <img src="http://img.shields.io/npm/dm/element-ui.svg">
+  </a>
+  <br>
+  <a href="http://img.badgesize.io/https://unpkg.com/element-ui/lib/index.js?compression=gzip&label=gzip%20size:%20JS">
+    <img src="http://img.badgesize.io/https://unpkg.com/element-ui/lib/index.js?compression=gzip&label=gzip%20size:%20JS">
+  </a>
+  <a href="http://img.badgesize.io/https://unpkg.com/element-ui/lib/theme-chalk/index.css?compression=gzip&label=gzip%20size:%20CSS">
+    <img src="http://img.badgesize.io/https://unpkg.com/element-ui/lib/theme-chalk/index.css?compression=gzip&label=gzip%20size:%20CSS">
+  </a>
+  <a href="#backers">
+    <img src="https://opencollective.com/element/backers/badge.svg">
+  </a>
+  <a href="#sponsors">
+    <img src="https://opencollective.com/element/sponsors/badge.svg">
+  </a>
+  <a href="LICENSE">
+    <img src="https://img.shields.io/badge/License-MIT-yellow.svg">
+  </a>
+</p>
 
 <p align="center">
   <b>Special thanks to the generous sponsorship by:</b>
-  <br><br>
-  <a href="https://laravist.com">
-    <img width="300px" src="https://fuss10.elemecdn.com/4/87/c072c1651b0efd1c5cde39bc8b422png.png">
-  </a>
 </p>
+<table>
+  <tbody>
+    <tr>
+      <td align="center" valign="middle">
+        <a href="https://tipe.io/?ref=element" target="_blank">
+          <img width="150px" src="https://user-images.githubusercontent.com/1016365/34124854-48fafa06-e3e9-11e7-8c04-251055feebee.png">
+        </a>
+      </td>
+      <td align="center" valign="middle">
+        <a href="https://www.duotai.cn/?utm_source=element" target="_blank">
+          <img width="140px" src="https://user-images.githubusercontent.com/10095631/39403151-c42dbcee-4ba5-11e8-9c09-8e5283da4144.png">
+        </a>
+      </td>
+      <td align="center" valign="middle">
+        <a href="https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index" target="_blank">
+          <img width="150px" src="https://user-images.githubusercontent.com/10095631/35603534-bb24470c-0678-11e8-8bcc-17ceaef8cbef.png">
+        </a>
+      </td>
+      <td align="center" valign="middle">
+        <a href="https://bitsrc.io/" target="_blank">
+          <img width="150px" src="https://user-images.githubusercontent.com/10095631/41342907-e44e7196-6f2f-11e8-92f2-47702dc8f059.png">
+        </a>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+> A Vue.js 2.0 UI Toolkit for Web.
 
 ## Links
-- [Home Page](http://element.eleme.io/)
-- [Docs](http://element.eleme.io/#/component)
+- Homepage and documentation
+  - [International users](http://element.eleme.io/#/en-US)
+  - [Chinese users](http://element-cn.eleme.io/#/zh-CN)
+  - [Spanish users](http://element.eleme.io/#/es)
 - [awesome-element](https://github.com/ElementUI/awesome-element)
 - [FAQ](./FAQ.md)
-- [Customize Theme](http://element.eleme.io/#/en-US/component/custom-theme)
-- [Preview and generate theme online](https://elementui.github.io/theme-preview)
-- [Element for React](https://github.com/eleme/element-react)
+- [Customize theme](http://element.eleme.io/#/en-US/component/custom-theme)
+- [Preview and generate theme online](https://elementui.github.io/theme-chalk-preview)
+- [Element for React](https://github.com/elemefe/element-react)
+- [Element for Angular](https://github.com/ElemeFE/element-angular)
 - [Atom helper](https://github.com/ElemeFE/element-helper)
-- Starter Kit
+- [Visual Studio Code helper](https://github.com/ElemeFE/vscode-element-helper)
+- Starter kit
   - [element-starter](https://github.com/ElementUI/element-starter)
-  - [element-cooking-starter](https://github.com/ElementUI/element-cooking-starter)
   - [element-in-laravel-starter](https://github.com/ElementUI/element-in-laravel-starter)
 - [Design resources](https://github.com/ElementUI/Resources)
-- Boilerplate for bug reports
-  - [CodePen](https://codepen.io/anon/pen/ozYpNA)
-  - [JSFiddle](https://jsfiddle.net/gmve9d3p/)
-- [Mint UI](https://github.com/ElemeFE/mint-ui) - Mobile UI elements for Vue.js
+- Gitter
+  - [International users](https://gitter.im/element-en/Lobby)
+  - [Chinese users](https://gitter.im/ElemeFE/element)
 
 ## Install
 ```shell
@@ -70,12 +114,12 @@ Vue.component(Button.name, Button)
 For more information, please refer to [Quick Start](http://element.eleme.io/#/en-US/component/quickstart) in our documentation.
 
 ## Browser Support
-Modern browsers and Internet Explorer 9+.
+Modern browsers and Internet Explorer 10+.
 
 ## Development
 Skip this part if you just want to use Element.
 
-For those who are interested in contributing to Element, please refer to our contributing guide ([中文](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md) | [English](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.en-US.md)) to see how to run this project.
+For those who are interested in contributing to Element, please refer to our contributing guide ([中文](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md) | [English](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.en-US.md) | [Español](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.es.md)) to see how to run this project.
 
 ## Changelog
 Detailed changes for each release are documented in the [release notes](https://github.com/ElemeFE/element/releases).
@@ -84,10 +128,10 @@ Detailed changes for each release are documented in the [release notes](https://
 We have collected some [frequently asked questions](https://github.com/ElemeFE/element/blob/master/FAQ.md). Before reporting an issue, please search if the FAQ has the answer to your problem.
 
 ## Contribution
-Please make sure to read the contributing guide ([中文](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md) | [English](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.en-US.md)) before making a pull request.
+Please make sure to read the contributing guide ([中文](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md) | [English](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.en-US.md) | [Español](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.es.md)) before making a pull request.
 
 ## Special Thanks
-English documentation is brought to you by SwiftGG Translation Team. Our special thanks go to these fellows:
+English documentation is brought to you by SwiftGG Translation Team:
 - [raychenfj](https://github.com/raychenfj)
 - [kevin](http://thekevin.cn/)
 - [曾小涛](https://github.com/zengxiaotao)
@@ -99,9 +143,22 @@ English documentation is brought to you by SwiftGG Translation Team. Our special
 - [Changing](https://github.com/sunzhuo11)
 - [mmoaay](https://github.com/mmoaay)
 
+Spanish documentation is made possible by these community developers:
+- [adavie1](https://github.com/adavie1)
+- [carmencitaqiu](https://github.com/carmencitaqiu)
+- [coderdiaz](https://github.com/coderdiaz)
+- [fedegar33](https://github.com/fedegar33)
+- [Gonzalo2310](https://github.com/Gonzalo2310)
+- [lesterbx](https://github.com/lesterbx)
+- [ProgramerGuy](https://github.com/ProgramerGuy)
+- [SantiagoGdaR](https://github.com/SantiagoGdaR)
+- [sigfriedCub1990](https://github.com/sigfriedCub1990)
+- [thechosenjuan](https://github.com/thechosenjuan)
+
 ## Donation
 If you find Element useful, you can buy us a cup of coffee
-<img width="650" src="http://fuss10.elemecdn.com/2/d0/ab1b8e5a1d96bcdcd6092ce0c66ecjpeg.jpeg?t=2017" alt="">
+
+<img width="650" src="https://user-images.githubusercontent.com/14025786/44833997-5d7c4d80-ac62-11e8-8445-1dffec0eb13c.png" alt="donation">
 
 ## Backers
 
@@ -177,4 +234,4 @@ Become a sponsor and get your logo on our README on Github with a link to your s
 
 
 ## LICENSE
-MIT
+[MIT](LICENSE)
diff --git a/build/bin/build-all.js b/build/bin/build-all.js
deleted file mode 100644
index 65acafb9cc..0000000000
--- a/build/bin/build-all.js
+++ /dev/null
@@ -1,26 +0,0 @@
-'use strict';
-
-const components = require('../../components.json');
-const execSync = require('child_process').execSync;
-const existsSync = require('fs').existsSync;
-const path = require('path');
-
-let componentPaths = [];
-
-delete components.index;
-delete components.font;
-
-Object.keys(components).forEach(key => {
-  const filePath = path.join(__dirname, `../../packages/${key}/cooking.conf.js`);
-
-  if (existsSync(filePath)) {
-    componentPaths.push(`packages/${key}/cooking.conf.js`);
-  }
-});
-
-const paths = componentPaths.join(',');
-const cli = path.join('node_modules', '.bin', 'cooking') + ` build -c ${paths} -p`;
-
-execSync(cli, {
-  stdio: 'inherit'
-});
diff --git a/build/bin/build-entry.js b/build/bin/build-entry.js
index 80db485a9d..4958573e7f 100644
--- a/build/bin/build-entry.js
+++ b/build/bin/build-entry.js
@@ -8,7 +8,7 @@ var endOfLine = require('os').EOL;
 var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');
 var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';
 var INSTALL_COMPONENT_TEMPLATE = '  {{name}}';
-var MAIN_TEMPLATE = `/* Automatic generated by './build/bin/build-entry.js' */
+var MAIN_TEMPLATE = `/* Automatically generated by './build/bin/build-entry.js' */
 
 {{include}}
 import locale from 'element-ui/src/locale';
@@ -20,17 +20,20 @@ const components = [
 ];
 
 const install = function(Vue, opts = {}) {
-  /* istanbul ignore if */
-  if (install.installed) return;
   locale.use(opts.locale);
   locale.i18n(opts.i18n);
 
-  components.map(component => {
+  components.forEach(component => {
     Vue.component(component.name, component);
   });
 
   Vue.use(Loading.directive);
 
+  Vue.prototype.$ELEMENT = {
+    size: opts.size || '',
+    zIndex: opts.zIndex || 2000
+  };
+
   Vue.prototype.$loading = Loading.service;
   Vue.prototype.$msgbox = MessageBox;
   Vue.prototype.$alert = MessageBox.alert;
@@ -38,12 +41,13 @@ const install = function(Vue, opts = {}) {
   Vue.prototype.$prompt = MessageBox.prompt;
   Vue.prototype.$notify = Notification;
   Vue.prototype.$message = Message;
+
 };
 
 /* istanbul ignore if */
 if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);
-};
+}
 
 module.exports = {
   version: '{{version}}',
@@ -54,6 +58,8 @@ module.exports = {
   Loading,
 {{list}}
 };
+
+module.exports.default = module.exports;
 `;
 
 delete Components.font;
diff --git a/build/bin/build-locale.js b/build/bin/build-locale.js
index 211e426ce5..ad66ae3186 100644
--- a/build/bin/build-locale.js
+++ b/build/bin/build-locale.js
@@ -15,21 +15,25 @@ var transform = function(filename, name, cb) {
   }, cb);
 };
 
-fileList.forEach(function(file) {
-  var name = basename(file, '.js');
+fileList
+  .filter(function(file) {
+    return /\.js$/.test(file);
+  })
+  .forEach(function(file) {
+    var name = basename(file, '.js');
 
-  transform(file, name, function(err, result) {
-    if (err) {
-      console.error(err);
-    } else {
-      var code = result.code;
+    transform(file, name, function(err, result) {
+      if (err) {
+        console.error(err);
+      } else {
+        var code = result.code;
 
-      code = code
-        .replace('define(\'', 'define(\'element/locale/')
-        .replace('global.', 'global.ELEMENT.lang = global.ELEMENT.lang || {}; \n    global.ELEMENT.lang.');
-      save(resolve(__dirname, '../../lib/umd/locale', file)).write(code);
+        code = code
+          .replace('define(\'', 'define(\'element/locale/')
+          .replace('global.', 'global.ELEMENT.lang = global.ELEMENT.lang || {}; \n    global.ELEMENT.lang.');
+        save(resolve(__dirname, '../../lib/umd/locale', file)).write(code);
 
-      console.log(file);
-    }
+        console.log(file);
+      }
+    });
   });
-});
diff --git a/build/bin/gen-cssfile.js b/build/bin/gen-cssfile.js
index 84550cac08..d324118500 100644
--- a/build/bin/gen-cssfile.js
+++ b/build/bin/gen-cssfile.js
@@ -2,7 +2,7 @@ var fs = require('fs');
 var path = require('path');
 var Components = require('../../components.json');
 var themes = [
-  'theme-default'
+  'theme-chalk'
 ];
 Components = Object.keys(Components);
 var basepath = path.resolve(__dirname, '../../packages/');
@@ -16,10 +16,11 @@ function fileExists(filePath) {
 }
 
 themes.forEach((theme) => {
-  var indexContent = '@import "./base.css";\n';
+  var isSCSS = theme !== 'theme-default';
+  var indexContent = isSCSS ? '@import "./base.scss";\n' : '@import "./base.css";\n';
   Components.forEach(function(key) {
     if (['icon', 'option', 'option-group'].indexOf(key) > -1) return;
-    var fileName = key + '.css';
+    var fileName = key + (isSCSS ? '.scss' : '.css');
     indexContent += '@import "./' + fileName + '";\n';
     var filePath = path.resolve(basepath, theme, 'src', fileName);
     if (!fileExists(filePath)) {
@@ -27,5 +28,5 @@ themes.forEach((theme) => {
       console.log(theme, ' 创建遗漏的 ', fileName, ' 文件');
     }
   });
-  fs.writeFileSync(path.resolve(basepath, theme, 'src', 'index.css'), indexContent);
+  fs.writeFileSync(path.resolve(basepath, theme, 'src', isSCSS ? 'index.scss' : 'index.css'), indexContent);
 });
diff --git a/build/bin/gen-indices.js b/build/bin/gen-indices.js
new file mode 100644
index 0000000000..3bffdc7b8c
--- /dev/null
+++ b/build/bin/gen-indices.js
@@ -0,0 +1,57 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const algoliasearch = require('algoliasearch');
+const slugify = require('transliteration').slugify;
+const key = require('./algolia-key');
+
+const client = algoliasearch('4C63BTGP6S', key);
+const langs = {
+  'zh-CN': 'element-zh',
+  'en-US': 'element-en',
+  'es': 'element-es'
+};
+
+['zh-CN', 'en-US', 'es'].forEach(lang => {
+  const indexName = langs[lang];
+  const index = client.initIndex(indexName);
+  index.clearIndex(err => {
+    if (err) return;
+    fs.readdir(path.resolve(__dirname, `../../examples/docs/${ lang }`), (err, files) => {
+      if (err) return;
+      let indices = [];
+      files.forEach(file => {
+        const component = file.replace('.md', '');
+        const content = fs.readFileSync(path.resolve(__dirname, `../../examples/docs/${ lang }/${ file }`), 'utf8');
+        const matches = content
+          .replace(/:::[\s\S]*?:::/g, '')
+          .replace(/```[\s\S]*?```/g, '')
+          .match(/#{2,4}[^#]*/g)
+          .map(match => match.replace(/\n+/g, '\n').split('\n').filter(part => !!part))
+          .map(match => {
+            const length = match.length;
+            if (length > 2) {
+              const desc = match.slice(1, length).join('');
+              return [match[0], desc];
+            }
+            return match;
+          });
+
+        indices = indices.concat(matches.map(match => {
+          const isComponent = match[0].indexOf('###') < 0;
+          const title = match[0].replace(/#{2,4}/, '').trim();
+          const index = { component, title };
+          index.ranking = isComponent ? 2 : 1;
+          index.anchor = slugify(title);
+          index.content = (match[1] || title).replace(/<[^>]+>/g, '');
+          return index;
+        }));
+      });
+
+      index.addObjects(indices, (err, res) => {
+        console.log(err, res);
+      });
+    });
+  });
+});
diff --git a/build/bin/iconInit.js b/build/bin/iconInit.js
index 1d23dba822..ea55eff5a1 100644
--- a/build/bin/iconInit.js
+++ b/build/bin/iconInit.js
@@ -3,7 +3,7 @@
 var postcss = require('postcss');
 var fs = require('fs');
 var path = require('path');
-var fontFile = fs.readFileSync(path.resolve(__dirname, '../../packages/theme-default/src/icon.css'), 'utf8');
+var fontFile = fs.readFileSync(path.resolve(__dirname, '../../packages/theme-chalk/src/icon.scss'), 'utf8');
 var nodes = postcss.parse(fontFile).nodes;
 var classList = [];
 
@@ -17,4 +17,4 @@ nodes.forEach((node) => {
   }
 });
 
-fs.writeFile(path.resolve(__dirname, '../../examples/icon.json'), JSON.stringify(classList));
+fs.writeFile(path.resolve(__dirname, '../../examples/icon.json'), JSON.stringify(classList), () => {});
diff --git a/build/bin/new-lang.js b/build/bin/new-lang.js
index 7984509eb8..ca93c2994b 100644
--- a/build/bin/new-lang.js
+++ b/build/bin/new-lang.js
@@ -22,7 +22,7 @@ if (componentFile.some(item => item.lang === lang)) {
   console.error(`${lang} already exists.`);
   process.exit(1);
 }
-let componentNew = Object.assign({}, componentFile.filter(item => item.lang === 'en-us')[0], { lang });
+let componentNew = Object.assign({}, componentFile.filter(item => item.lang === 'en-US')[0], { lang });
 componentFile.push(componentNew);
 fileSave(path.join(__dirname, '../../examples/i18n/component.json'))
   .write(JSON.stringify(componentFile, null, '  '), 'utf8')
@@ -30,7 +30,7 @@ fileSave(path.join(__dirname, '../../examples/i18n/component.json'))
 
 // 添加到 page.json
 const pageFile = require('../../examples/i18n/page.json');
-let pageNew = Object.assign({}, pageFile.filter(item => item.lang === 'en-us')[0], { lang });
+let pageNew = Object.assign({}, pageFile.filter(item => item.lang === 'en-US')[0], { lang });
 pageFile.push(pageNew);
 fileSave(path.join(__dirname, '../../examples/i18n/page.json'))
   .write(JSON.stringify(pageFile, null, '  '), 'utf8')
@@ -45,7 +45,7 @@ fileSave(path.join(__dirname, '../../examples/i18n/route.json'))
 
 // 添加到 nav.config.json
 const navFile = require('../../examples/nav.config.json');
-navFile[lang] = navFile['en-us'];
+navFile[lang] = navFile['en-US'];
 fileSave(path.join(__dirname, '../../examples/nav.config.json'))
   .write(JSON.stringify(navFile, null, '  '), 'utf8')
   .end('\n');
diff --git a/build/bin/new.js b/build/bin/new.js
index d4017af2ed..00d2ffaf84 100644
--- a/build/bin/new.js
+++ b/build/bin/new.js
@@ -28,34 +28,6 @@ ${ComponentName}.install = function(Vue) {
 };
 
 export default ${ComponentName};`
-  },
-  {
-    filename: 'cooking.conf.js',
-    content: `var cooking = require('cooking');
-var gen = require('../../build/gen-single-config');
-
-cooking.set(gen(__dirname, 'El${ComponentName}'));
-
-module.exports = cooking.resolve();
-`
-  },
-  {
-    filename: 'package.json',
-    content: `{
-  "name": "element-${componentname}",
-  "version": "0.0.0",
-  "description": "A ${componentname} component for Vue.js.",
-  "keywords": [
-    "element",
-    "vue",
-    "component"
-  ],
-  "main": "./lib/index.js",
-  "repository": "https://github.com/ElemeFE/element/tree/master/packages/${componentname}",
-  "author": "elemefe",
-  "license": "MIT",
-  "dependencies": {}
-}`
   },
   {
     filename: 'src/main.vue',
@@ -77,6 +49,10 @@ export default {
     filename: path.join('../../examples/docs/en-US', `${componentname}.md`),
     content: `## ${ComponentName}`
   },
+  {
+    filename: path.join('../../examples/docs/es', `${componentname}.md`),
+    content: `## ${ComponentName}`
+  },
   {
     filename: path.join('../../test/unit/specs', `${componentname}.spec.js`),
     content: `import { createTest, destroyVM } from '../util';
@@ -94,6 +70,22 @@ describe('${ComponentName}', () => {
   });
 });
 `
+  },
+  {
+    filename: path.join('../../packages/theme-chalk/src', `${componentname}.scss`),
+    content: `@import "mixins/mixins";
+@import "common/var";
+
+@include b(${componentname}) {
+}`
+  },
+  {
+    filename: path.join('../../types', `${componentname}.d.ts`),
+    content: `import { ElementUIComponent } from './component'
+
+/** ${ComponentName} Component */
+export declare class El${ComponentName} extends ElementUIComponent {
+}`
   }
 ];
 
@@ -111,20 +103,20 @@ fileSave(path.join(__dirname, '../../components.json'))
 // 创建 package
 Files.forEach(file => {
   fileSave(path.join(PackagePath, file.filename))
-  .write(file.content, 'utf8')
-  .end('\n');
+    .write(file.content, 'utf8')
+    .end('\n');
 });
 
 // 添加到 nav.config.json
 const navConfigFile = require('../../examples/nav.config.json');
 
 Object.keys(navConfigFile).forEach(lang => {
-  let groups = navConfigFile[lang][3].groups;
+  let groups = navConfigFile[lang][4].groups;
   groups[groups.length - 1].list.push({
     path: `/${componentname}`,
     title: lang === 'zh-CN' && componentname !== chineseName
-        ? `${ComponentName} ${chineseName}`
-        : ComponentName
+      ? `${ComponentName} ${chineseName}`
+      : ComponentName
   });
 });
 
diff --git a/build/bin/template.js b/build/bin/template.js
new file mode 100644
index 0000000000..0cd2fe164a
--- /dev/null
+++ b/build/bin/template.js
@@ -0,0 +1,16 @@
+const path = require('path');
+const templates = path.resolve(process.cwd(), './examples/pages/template');
+
+const chokidar = require('chokidar');
+let watcher = chokidar.watch([templates]);
+
+watcher.on('ready', function() {
+  watcher
+    .on('change', function() {
+      exec('npm run i18n');
+    });
+});
+
+function exec(cmd) {
+  return require('child_process').execSync(cmd).toString().trim();
+}
diff --git a/build/bin/version.js b/build/bin/version.js
index 7063df4a2c..4a75cde247 100644
--- a/build/bin/version.js
+++ b/build/bin/version.js
@@ -1,6 +1,6 @@
 var fs = require('fs');
 var path = require('path');
 var version = process.env.VERSION || require('../../package.json').version;
-var content = { '1.0.9': '1.0', '1.1.6': '1.1', '1.2.9': '1.2', '1.3.7': '1.3' };
-if (!content[version]) content[version] = '1.4';
+var content = { '1.4.13': '1.4', '2.0.11': '2.0', '2.1.0': '2.1', '2.2.2': '2.2', '2.3.9': '2.3' };
+if (!content[version]) content[version] = '2.4';
 fs.writeFileSync(path.resolve(__dirname, '../../examples/versions.json'), JSON.stringify(content));
diff --git a/build/config.js b/build/config.js
index eaa7cc1153..27b84cea42 100644
--- a/build/config.js
+++ b/build/config.js
@@ -2,7 +2,7 @@ var path = require('path');
 var fs = require('fs');
 var nodeExternals = require('webpack-node-externals');
 var Components = require('../components.json');
-var saladConfig = require('../packages/theme-default/salad.config.json');
+var saladConfig = require('./salad.config.json');
 
 var utilsList = fs.readdirSync(path.resolve(__dirname, '../src/utils'));
 var mixinsList = fs.readdirSync(path.resolve(__dirname, '../src/mixins'));
diff --git a/build/cooking.common.js b/build/cooking.common.js
deleted file mode 100644
index aa9a385e2e..0000000000
--- a/build/cooking.common.js
+++ /dev/null
@@ -1,18 +0,0 @@
-var cooking = require('cooking');
-var config = require('./config');
-
-cooking.set({
-  entry: './src/index.js',
-  dist: './lib',
-  clean: false,
-  format: 'cjs',
-  extends: ['vue2'],
-  minimize: false,
-  alias: config.alias,
-  externals: config.externals
-});
-
-cooking.add('output.filename', 'element-ui.common.js');
-cooking.add('loader.js.exclude', config.jsexclude);
-cooking.add('vue.preserveWhitespace', false);
-module.exports = cooking.resolve();
diff --git a/build/cooking.component.js b/build/cooking.component.js
deleted file mode 100644
index 799e831819..0000000000
--- a/build/cooking.component.js
+++ /dev/null
@@ -1,19 +0,0 @@
-var cooking = require('cooking');
-var Components = require('../components.json');
-var config = require('./config');
-
-cooking.set({
-  entry: Components,
-  dist: './lib',
-  clean: false,
-  format: 'cjs',
-  extends: ['vue2'],
-  minimize: false,
-  externals: config.externals,
-  alias: config.alias
-});
-
-cooking.add('output.filename', '[name].js');
-cooking.add('loader.js.exclude', config.jsexclude);
-cooking.add('vue.preserveWhitespace', false);
-module.exports = cooking.resolve();
diff --git a/build/cooking.conf.js b/build/cooking.conf.js
deleted file mode 100644
index c369d9cd50..0000000000
--- a/build/cooking.conf.js
+++ /dev/null
@@ -1,18 +0,0 @@
-var cooking = require('cooking');
-var config = require('./config');
-
-cooking.set({
-  entry: './src/index.js',
-  dist: './lib',
-  clean: false,
-  format: 'umd',
-  moduleName: 'ELEMENT',
-  extends: ['vue2'],
-  alias: config.alias,
-  externals: { vue: config.vue }
-});
-
-cooking.add('output.filename', 'index.js');
-cooking.add('loader.js.exclude', config.jsexclude);
-cooking.add('vue.preserveWhitespace', false);
-module.exports = cooking.resolve();
diff --git a/build/cooking.demo.js b/build/cooking.demo.js
deleted file mode 100644
index 9be0600d6f..0000000000
--- a/build/cooking.demo.js
+++ /dev/null
@@ -1,127 +0,0 @@
-var cooking = require('cooking');
-var config = require('./config');
-var md = require('markdown-it')();
-var CopyWebpackPlugin = require('copy-webpack-plugin');
-var striptags = require('./strip-tags');
-var slugify = require('transliteration').slugify;
-var isProd = process.env.NODE_ENV === 'production';
-var isPlay = !!process.env.PLAY_ENV;
-
-function convert(str) {
-  str = str.replace(/(&#x)(\w{4});/gi, function($0) {
-    return String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g, '$2'), 16));
-  });
-  return str;
-}
-
-cooking.set({
-  entry: isProd ? {
-    docs: './examples/entry.js',
-    'element-ui': './src/index.js'
-  } : (isPlay ? './examples/play.js' : './examples/entry.js'),
-  dist: './examples/element-ui/',
-  template: [
-    {
-      template: './examples/index.tpl',
-      filename: './index.html',
-      favicon: './examples/favicon.ico'
-    }
-  ],
-  publicPath: process.env.CI_ENV || '',
-  hash: true,
-  devServer: {
-    hostname: '0.0.0.0',
-    port: 8085,
-    log: false,
-    publicPath: '/'
-  },
-  minimize: true,
-  chunk: isProd ? {
-    'common': { name: ['element-ui', 'manifest'] }
-  } : false,
-  extractCSS: true,
-  alias: config.alias,
-  extends: ['vue2', 'lint'],
-  postcss: config.postcss
-});
-
-// fix publicPath
-if (!process.env.CI_ENV) {
-  cooking.add('output.publicPath', '');
-}
-
-cooking.add('loader.md', {
-  test: /\.md$/,
-  loader: 'vue-markdown-loader'
-});
-
-cooking.add(
-  'output.chunkFilename',
-  isProd ? '[name].[chunkhash:7].js' : '[name].js'
-);
-
-cooking.add('vueMarkdown', {
-  use: [
-    [require('markdown-it-anchor'), {
-      level: 2,
-      slugify: slugify,
-      permalink: true,
-      permalinkBefore: true
-    }],
-    [require('markdown-it-container'), 'demo', {
-      validate: function(params) {
-        return params.trim().match(/^demo\s*(.*)$/);
-      },
-
-      render: function(tokens, idx) {
-        var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
-        if (tokens[idx].nesting === 1) {
-          var description = (m && m.length > 1) ? m[1] : '';
-          var content = tokens[idx + 1].content;
-          var html = convert(striptags.strip(content, ['script', 'style'])).replace(/(<[^>]*)=""(?=.*>)/g, '$1');
-          var script = striptags.fetch(content, 'script');
-          var style = striptags.fetch(content, 'style');
-          var jsfiddle = { html: html, script: script, style: style };
-          var descriptionHTML = description
-            ? md.render(description)
-            : '';
-
-          jsfiddle = md.utils.escapeHtml(JSON.stringify(jsfiddle));
-
-          return `<demo-block class="demo-box" :jsfiddle="${jsfiddle}">
-                    <div class="source" slot="source">${html}</div>
-                    ${descriptionHTML}
-                    <div class="highlight" slot="highlight">`;
-        }
-        return '</div></demo-block>\n';
-      }
-    }],
-    [require('markdown-it-container'), 'tip']
-  ],
-  preprocess: function(MarkdownIt, source) {
-    MarkdownIt.renderer.rules.table_open = function() {
-      return '<table class="table">';
-    };
-    MarkdownIt.renderer.rules.fence = wrap(MarkdownIt.renderer.rules.fence);
-    return source;
-  }
-});
-
-var wrap = function(render) {
-  return function() {
-    return render.apply(this, arguments)
-      .replace('<code class="', '<code class="hljs ')
-      .replace('<code>', '<code class="hljs">');
-  };
-};
-
-if (isProd) {
-  cooking.add('externals.vue', 'Vue');
-  cooking.add('externals.vue-router', 'VueRouter');
-}
-
-cooking.add('plugin.CopyWebpackPlugin', new CopyWebpackPlugin([
-  { from: 'examples/versions.json' }
-]));
-cooking.add('vue.preserveWhitespace', false);
-module.exports = cooking.resolve();
diff --git a/build/cooking.test.js b/build/cooking.test.js
deleted file mode 100644
index 2a9b899a98..0000000000
--- a/build/cooking.test.js
+++ /dev/null
@@ -1,52 +0,0 @@
-var cooking = require('cooking');
-var config = require('./config');
-var ProgressBarPlugin = require('progress-bar-webpack-plugin');
-var jsLoader = process.env.CI_ENV ? 'isparta-loader' : 'isparta-loader!eslint-loader';
-
-cooking.set({
-  entry: './src/index.js',
-  extends: process.env.CI_ENV ? ['vue2'] : ['vue2', 'lint'],
-  minimize: false,
-  alias: Object.assign(config.alias, {
-    'vue$': 'vue/dist/vue.common.js'
-  }),
-  postcss: function(webapck) {
-    return [
-      require('postcss-salad')({
-        browsers: ['ie > 8', 'last 2 versions', 'Chrome > 24'],
-        features: {
-          'partialImport': {
-            addDependencyTo: webapck
-          },
-          'bem': {
-            'shortcuts': {
-              'component': 'b',
-              'modifier': 'm',
-              'descendent': 'e'
-            },
-            'separators': {
-              'descendent': '__',
-              'modifier': '--'
-            }
-          }
-        }
-      })
-    ];
-  },
-  sourceMap: '#inline-source-map'
-});
-
-cooking.add('vue.loaders.js', jsLoader);
-cooking.add('loader.js.exclude', config.jsexclude);
-cooking.add('preLoader.0', {
-  test: /\.js$/,
-  loader: 'isparta',
-  exclude: config.jsexclude,
-  include: /src|packages/
-});
-
-if (!process.env.CI_ENV) {
-  cooking.add('plugins.process', new ProgressBarPlugin());
-}
-cooking.add('vue.preserveWhitespace', false);
-module.exports = cooking.resolve();
diff --git a/build/deploy-ci.sh b/build/deploy-ci.sh
index 8450f58133..bfccde8706 100644
--- a/build/deploy-ci.sh
+++ b/build/deploy-ci.sh
@@ -22,11 +22,11 @@ if [ "$TRAVIS_TAG" ]; then
   git push origin master --tags
   cd ../..
 
-  # build theme-default
+  # build theme-chalk
   cd temp_web
-  git clone https://$ROT_TOKEN@github.com/ElementUI/theme-default.git && cd theme-default
+  git clone https://$ROT_TOKEN@github.com/ElementUI/theme-chalk.git && cd theme-chalk
   rm -rf *
-  cp -rf ../../packages/theme-default/** .
+  cp -rf ../../packages/theme-chalk/** .
   git add -A .
   git commit -m "[build] $TRAVIS_TAG"
   git tag $TRAVIS_TAG
@@ -36,13 +36,11 @@ if [ "$TRAVIS_TAG" ]; then
   # build site
   npm run deploy:build
   cd temp_web
-  git clone -b gh-pages https://$ROT_TOKEN@github.com/ElemeFE/element.git && cd element
+  git clone --depth 1 -b gh-pages --single-branch https://$ROT_TOKEN@github.com/ElemeFE/element.git && cd element
   # build sub folder
   echo $TRAVIS_TAG
-  export SUB_FOLDER=$(echo "$TRAVIS_TAG" | grep -o -E "\d+\.\d+")
-  echo $SUB_FOLDER
 
-  SUB_FOLDER='1.4'
+  SUB_FOLDER='2.4'
   mkdir $SUB_FOLDER
   rm -rf *.js *.css *.map static
   rm -rf $SUB_FOLDER/**
@@ -58,7 +56,7 @@ if [ "$TRAVIS_TAG" ]; then
 fi
 
 # build dev site
-npm run build:file && CI_ENV=/dev/$TRAVIS_BRANCH/ node_modules/.bin/cooking build -c build/cooking.demo.js
+npm run build:file && CI_ENV=/dev/$TRAVIS_BRANCH/ node_modules/.bin/cross-env NODE_ENV=production node_modules/.bin/webpack --config build/webpack.demo.js
 cd temp_web
 git clone https://$ROT_TOKEN@github.com/ElementUI/dev.git && cd dev
 mkdir $TRAVIS_BRANCH
@@ -69,11 +67,11 @@ git commit -m "$TRAVIS_COMMIT_MSG"
 git push origin master
 cd ../..
 
-# push dev theme-default
+# push dev theme-chalk
 cd temp_web
-git clone -b $TRAVIS_BRANCH https://$ROT_TOKEN@github.com/ElementUI/theme-default.git && cd theme-default
+git clone -b $TRAVIS_BRANCH https://$ROT_TOKEN@github.com/ElementUI/theme-chalk.git && cd theme-chalk
 rm -rf *
-cp -rf ../../packages/theme-default/** .
+cp -rf ../../packages/theme-chalk/** .
 git add -A .
 git commit -m "$TRAVIS_COMMIT_MSG"
 git push origin $TRAVIS_BRANCH
diff --git a/build/deploy-faas.sh b/build/deploy-faas.sh
new file mode 100644
index 0000000000..ed6e892c49
--- /dev/null
+++ b/build/deploy-faas.sh
@@ -0,0 +1,18 @@
+#! /bin/sh
+mkdir temp_web
+npm run deploy:build
+cd temp_web
+git clone --depth 1 -b gh-pages --single-branch https://github.com/ElemeFE/element.git && cd element
+
+# build sub folder
+SUB_FOLDER='2.4'
+mkdir $SUB_FOLDER
+rm -rf *.js *.css *.map static
+rm -rf $SUB_FOLDER/**
+cp -rf ../../examples/element-ui/** .
+cp -rf ../../examples/element-ui/** $SUB_FOLDER/
+cd ../..
+
+# deploy domestic site
+faas deploy alpha
+rm -rf temp_web
\ No newline at end of file
diff --git a/build/release.sh b/build/release.sh
index 0a38339b34..1f6dccc2ef 100644
--- a/build/release.sh
+++ b/build/release.sh
@@ -16,8 +16,8 @@ then
   VERSION=$VERSION npm run dist
 
   # publish theme
-  echo "Releasing theme-default $VERSION ..."
-  cd packages/theme-default
+  echo "Releasing theme-chalk $VERSION ..."
+  cd packages/theme-chalk
   npm version $VERSION --message "[release] $VERSION"
   if [[ $VERSION =~ "beta" ]]
   then
diff --git a/packages/theme-default/salad.config.json b/build/salad.config.json
similarity index 100%
rename from packages/theme-default/salad.config.json
rename to build/salad.config.json
diff --git a/build/webpack.common.js b/build/webpack.common.js
new file mode 100644
index 0000000000..e9a6085c82
--- /dev/null
+++ b/build/webpack.common.js
@@ -0,0 +1,90 @@
+const path = require('path');
+const webpack = require('webpack');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+
+const config = require('./config');
+
+module.exports = {
+  entry: {
+    app: ['./src/index.js']
+  },
+  output: {
+    path: path.resolve(process.cwd(), './lib'),
+    publicPath: '/dist/',
+    filename: 'element-ui.common.js',
+    chunkFilename: '[id].js',
+    libraryTarget: 'commonjs2'
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: config.alias,
+    modules: ['node_modules']
+  },
+  externals: config.externals,
+  module: {
+    rules: [
+      {
+        test: /\.(jsx?|babel|es6)$/,
+        include: process.cwd(),
+        exclude: config.jsexclude,
+        loader: 'babel-loader'
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          preserveWhitespace: false
+        }
+      },
+      {
+        test: /\.json$/,
+        loader: 'json-loader'
+      },
+      {
+        test: /\.css$/,
+        loaders: ['style-loader', 'css-loader', 'postcss-loader']
+      },
+      {
+        test: /\.scss$/,
+        loaders: ['style-loader', 'css-loader', 'sass-loader']
+      },
+      {
+        test: /\.html$/,
+        loader: 'html-loader?minimize=false'
+      },
+      {
+        test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.svg(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(gif|png|jpe?g)(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  plugins: [
+    new ProgressBarPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true
+    })
+  ]
+};
diff --git a/build/webpack.component.js b/build/webpack.component.js
new file mode 100644
index 0000000000..e4d4fa6b7c
--- /dev/null
+++ b/build/webpack.component.js
@@ -0,0 +1,91 @@
+const path = require('path');
+const webpack = require('webpack');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+
+const Components = require('../components.json');
+const config = require('./config');
+
+const webpackConfig = {
+  entry: Components,
+  output: {
+    path: path.resolve(process.cwd(), './lib'),
+    publicPath: '/dist/',
+    filename: '[name].js',
+    chunkFilename: '[id].js',
+    libraryTarget: 'commonjs2'
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: config.alias,
+    modules: ['node_modules']
+  },
+  externals: config.externals,
+  module: {
+    rules: [
+      {
+        test: /\.(jsx?|babel|es6)$/,
+        include: process.cwd(),
+        exclude: config.jsexclude,
+        loader: 'babel-loader'
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          preserveWhitespace: false
+        }
+      },
+      {
+        test: /\.json$/,
+        loader: 'json-loader'
+      },
+      {
+        test: /\.css$/,
+        loaders: ['style-loader', 'css-loader', 'postcss-loader']
+      },
+      {
+        test: /\.scss$/,
+        loaders: ['style-loader', 'css-loader', 'sass-loader']
+      },
+      {
+        test: /\.html$/,
+        loader: 'html-loader?minimize=false'
+      },
+      {
+        test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.svg(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(gif|png|jpe?g)(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  plugins: [
+    new ProgressBarPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true
+    })
+  ]
+};
+
+module.exports = webpackConfig;
diff --git a/build/webpack.conf.js b/build/webpack.conf.js
new file mode 100644
index 0000000000..1f73001265
--- /dev/null
+++ b/build/webpack.conf.js
@@ -0,0 +1,102 @@
+const path = require('path');
+const webpack = require('webpack');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+
+const config = require('./config');
+
+module.exports = {
+  entry: {
+    app: ['./src/index.js']
+  },
+  output: {
+    path: path.resolve(process.cwd(), './lib'),
+    publicPath: '/dist/',
+    filename: 'index.js',
+    chunkFilename: '[id].js',
+    libraryTarget: 'umd',
+    library: 'ELEMENT',
+    umdNamedDefine: true
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: config.alias
+  },
+  externals: {
+    vue: config.vue
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(jsx?|babel|es6)$/,
+        include: process.cwd(),
+        exclude: config.jsexclude,
+        loader: 'babel-loader'
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          preserveWhitespace: false
+        }
+      },
+      {
+        test: /\.json$/,
+        loader: 'json-loader'
+      },
+      {
+        test: /\.css$/,
+        loaders: ['style-loader', 'css-loader', 'postcss-loader']
+      },
+      {
+        test: /\.scss$/,
+        loaders: ['style-loader', 'css-loader', 'sass-loader']
+      },
+      {
+        test: /\.html$/,
+        loader: 'html-loader?minimize=false'
+      },
+      {
+        test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.svg(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(gif|png|jpe?g)(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  plugins: [
+    new ProgressBarPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      },
+      output: {
+        comments: false
+      },
+      sourceMap: false
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true
+    })
+  ]
+};
diff --git a/build/webpack.demo.js b/build/webpack.demo.js
new file mode 100644
index 0000000000..e341926c2f
--- /dev/null
+++ b/build/webpack.demo.js
@@ -0,0 +1,251 @@
+const path = require('path');
+const webpack = require('webpack');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const md = require('markdown-it')();
+const slugify = require('transliteration').slugify;
+
+const striptags = require('./strip-tags');
+const config = require('./config');
+
+const isProd = process.env.NODE_ENV === 'production';
+const isDev = process.env.NODE_ENV === 'development';
+const isPlay = !!process.env.PLAY_ENV;
+
+function convert(str) {
+  str = str.replace(/(&#x)(\w{4});/gi, function($0) {
+    return String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g, '$2'), 16));
+  });
+  return str;
+}
+
+function wrap(render) {
+  return function() {
+    return render.apply(this, arguments)
+      .replace('<code v-pre class="', '<code class="hljs ')
+      .replace('<code>', '<code class="hljs">');
+  };
+}
+
+const webpackConfig = {
+  entry: isProd ? {
+    docs: './examples/entry.js',
+    'element-ui': './src/index.js'
+  } : (isPlay ? './examples/play.js' : './examples/entry.js'),
+  output: {
+    path: path.resolve(process.cwd(), './examples/element-ui/'),
+    publicPath: process.env.CI_ENV || '',
+    filename: '[name].[hash:7].js',
+    chunkFilename: isProd ? '[name].[hash:7].js' : '[name].js'
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: config.alias,
+    modules: ['node_modules']
+  },
+  devServer: {
+    host: '0.0.0.0',
+    port: 8085,
+    publicPath: '/',
+    noInfo: true
+  },
+  module: {
+    rules: [
+      {
+        enforce: 'pre',
+        test: /\.jsx?$/,
+        exclude: /node_modules|bower_components/,
+        loader: 'eslint-loader'
+      },
+      {
+        enforce: 'pre',
+        test: /\.vue$/,
+        exclude: /node_modules|bower_components/,
+        loader: 'eslint-loader'
+      },
+      {
+        test: /\.(jsx?|babel|es6)$/,
+        include: process.cwd(),
+        exclude: config.jsexclude,
+        loader: 'babel-loader'
+      },
+      {
+        test: /\.md$/,
+        loader: 'vue-markdown-loader',
+        options: {
+          use: [
+            [require('markdown-it-anchor'), {
+              level: 2,
+              slugify: slugify,
+              permalink: true,
+              permalinkBefore: true
+            }],
+            [require('markdown-it-container'), 'demo', {
+              validate: function(params) {
+                return params.trim().match(/^demo\s*(.*)$/);
+              },
+
+              render: function(tokens, idx) {
+                var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
+                if (tokens[idx].nesting === 1) {
+                  var description = (m && m.length > 1) ? m[1] : '';
+                  var content = tokens[idx + 1].content;
+                  var html = convert(striptags.strip(content, ['script', 'style'])).replace(/(<[^>]*)=""(?=.*>)/g, '$1');
+                  var script = striptags.fetch(content, 'script');
+                  var style = striptags.fetch(content, 'style');
+                  var jsfiddle = { html: html, script: script, style: style };
+                  var descriptionHTML = description
+                    ? md.render(description)
+                    : '';
+
+                  jsfiddle = md.utils.escapeHtml(JSON.stringify(jsfiddle));
+
+                  return `<demo-block class="demo-box" :jsfiddle="${jsfiddle}">
+                            <div class="source" slot="source">${html}</div>
+                            ${descriptionHTML}
+                            <div class="highlight" slot="highlight">`;
+                }
+                return '</div></demo-block>\n';
+              }
+            }],
+            [require('markdown-it-container'), 'tip'],
+            [require('markdown-it-container'), 'warning']
+          ],
+          preprocess: function(MarkdownIt, source) {
+            MarkdownIt.renderer.rules.table_open = function() {
+              return '<table class="table">';
+            };
+            MarkdownIt.renderer.rules.fence = wrap(MarkdownIt.renderer.rules.fence);
+            return source;
+          }
+        }
+      },
+      {
+        test: /\.json$/,
+        loader: 'json-loader'
+      },
+      {
+        test: /\.scss$/,
+        loaders: ['style-loader', 'css-loader', 'sass-loader']
+      },
+      {
+        test: /\.html$/,
+        loader: 'html-loader?minimize=false'
+      },
+      {
+        test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.svg(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(gif|png|jpe?g)(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './examples/index.tpl',
+      filename: './index.html',
+      favicon: './examples/favicon.ico'
+    }),
+    new CopyWebpackPlugin([
+      { from: 'examples/versions.json' }
+    ]),
+    new ProgressBarPlugin(),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+      vue: {
+        preserveWhitespace: false
+      }
+    })
+  ]
+};
+
+if (isProd) {
+  webpackConfig.externals = {
+    vue: 'Vue',
+    'vue-router': 'VueRouter'
+  };
+  webpackConfig.module.rules.push(
+    {
+      test: /\.vue$/,
+      loader: 'vue-loader',
+      options: {
+        extractCSS: true,
+        preserveWhitespace: false
+      }
+    },
+    {
+      test: /\.css$/,
+      loader: ExtractTextPlugin.extract({
+        fallback: 'style-loader',
+        use: [
+          { loader: 'css-loader', options: { importLoaders: 1 } },
+          'postcss-loader'
+        ]
+      })
+    }
+  );
+  webpackConfig.plugins.push(
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      },
+      output: {
+        comments: false
+      },
+      sourceMap: false
+    }),
+    new ExtractTextPlugin({
+      filename: '[name].[contenthash:7].css'
+    }),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: ['element-ui', 'manifest']
+    })
+  );
+}
+if (isDev) {
+  webpackConfig.module.rules.push(
+    {
+      test: /\.vue$/,
+      loader: 'vue-loader',
+      options: {
+        preserveWhitespace: false
+      }
+    },
+    {
+      test: /\.css$/,
+      loaders: ['style-loader', 'css-loader', 'postcss-loader']
+    }
+  );
+  webpackConfig.plugins.push(
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('development')
+    })
+  );
+}
+
+module.exports = webpackConfig;
diff --git a/build/webpack.test.js b/build/webpack.test.js
new file mode 100644
index 0000000000..54f4f515c5
--- /dev/null
+++ b/build/webpack.test.js
@@ -0,0 +1,98 @@
+const path = require('path');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+
+const config = require('./config');
+
+const webpackConfig = {
+  entry: {
+    app: ['./src/index.js']
+  },
+  output: {
+    path: path.resolve(process.cwd(), './dist'),
+    publicPath: '/dist/',
+    filename: '[name].js',
+    chunkFilename: '[id].js'
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: Object.assign(config.alias, {
+      'vue$': 'vue/dist/vue.common.js'
+    }),
+    modules: ['node_modules']
+  },
+  devtool: '#inline-source-map',
+  module: {
+    rules: [
+      {
+        enforce: 'post',
+        test: /\.jsx?$/,
+        loader: 'isparta-loader',
+        options: { esModules: true },
+        exclude: config.jsexclude,
+        include: /src|packages/
+      },
+      {
+        test: /\.(jsx?|babel|es6)$/,
+        include: process.cwd(),
+        exclude: config.jsexclude,
+        loader: 'babel-loader'
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            js: process.env.CI_ENV ? 'isparta-loader' : 'isparta-loader!eslint-loader'
+          },
+          preserveWhitespace: false
+        }
+      },
+      {
+        test: /\.json$/,
+        loader: 'json-loader'
+      },
+      {
+        test: /\.css$/,
+        loaders: ['style-loader', 'css-loader', 'postcss-loader']
+      },
+      {
+        test: /\.html$/,
+        loader: 'html-loader?minimize=false'
+      },
+      {
+        test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.svg(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(gif|png|jpe?g)(\?\S*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: path.posix.join('static', '[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  plugins: [
+  ]
+};
+
+if (!process.env.CI_ENV) {
+  webpackConfig.plugins.push(
+    new ProgressBarPlugin()
+  );
+}
+
+module.exports = webpackConfig;
diff --git a/components.json b/components.json
index 4a5ccf80a7..7e8b58a93a 100644
--- a/components.json
+++ b/components.json
@@ -62,5 +62,10 @@
   "collapse-item": "./packages/collapse-item/index.js",
   "cascader": "./packages/cascader/index.js",
   "color-picker": "./packages/color-picker/index.js",
-  "transfer": "./packages/transfer/index.js"
+  "transfer": "./packages/transfer/index.js",
+  "container": "./packages/container/index.js",
+  "header": "./packages/header/index.js",
+  "aside": "./packages/aside/index.js",
+  "main": "./packages/main/index.js",
+  "footer": "./packages/footer/index.js"
 }
diff --git a/examples/app.vue b/examples/app.vue
index dcbfda284d..b74619c2a5 100644
--- a/examples/app.vue
+++ b/examples/app.vue
@@ -7,21 +7,44 @@
     margin: 0;
     padding: 0;
     height: 100%;
+    font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
+    font-weight: 400;
+    -webkit-font-smoothing: antialiased;
+
+    &.is-component {
+      overflow: hidden;
+    }
   }
 
   #app {
     height: 100%;
-  }
+    
+    @when component {
+      overflow-y: hidden;
 
-  body {
-    font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
-    overflow: auto;
-    font-weight: 400;
-    -webkit-font-smoothing: antialiased;
+      .main-cnt {
+        padding: 0;
+        margin-top: 0;
+        height: 100%;
+        min-height: auto;
+      }
+
+      .headerWrapper {
+        position: fixed;
+        width: 100%;
+        left: 0;
+        top: 0;
+        z-index: 1500;
+        
+        .container {
+          padding: 0;
+        }
+      }
+    }
   }
 
   a {
-    color: #4078c0;
+    color: #409EFF;
     text-decoration: none;
   }
 
@@ -44,7 +67,7 @@
     font-family: Menlo, Monaco, Consolas, Courier, monospace;
     font-size: 12px;
     padding: 18px 24px;
-    background-color: #f9fafc;
+    background-color: #fafafa;
     border: solid 1px #eaeefb;
     margin-bottom: 25px;
     border-radius: 4px;
@@ -53,7 +76,7 @@
 
   .main-cnt {
     margin-top: -80px;
-    padding: 80px 0 120px;
+    padding: 80px 0 340px;
     box-sizing: border-box;
     min-height: 100%;
   }
@@ -61,7 +84,7 @@
   .container,
   .page-container {
     width: 1140px;
-    padding: 0 30px;
+    padding: 0;
     margin: 0 auto;
   }
 
@@ -107,10 +130,23 @@
       background-color: #ECF8FF;
       border-radius: 4px;
       border-left: #50bfff 5px solid;
-      margin-top: 20px;
+      margin: 20px 0;
 
       code {
-        background-color: rgba(#fff, .7);
+        background-color: rgba(255, 255, 255, .7);
+        color: #445368;
+      }
+    }
+
+    .warning {
+      padding: 8px 16px;
+      background-color: #fff6f7;
+      border-radius: 4px;
+      border-left: #FE6C6F 5px solid;
+      margin: 20px 0;
+
+      code {
+        background-color: rgba(255, 255, 255, .7);
         color: #445368;
       }
     }
@@ -130,16 +166,20 @@
     .page-container {
       padding: 0 20px;
     }
+  
+    #app.is-component .headerWrapper .container {
+      padding: 0 12px;
+    }
   }
 </style>
 
 <template>
-  <div id="app">
+  <div id="app" :class="{ 'is-component': isComponent }">
     <main-header v-if="lang !== 'play'"></main-header>
     <div class="main-cnt">
       <router-view></router-view>
     </div>
-    <main-footer v-if="lang !== 'play'"></main-footer>
+    <main-footer v-if="lang !== 'play' && !isComponent"></main-footer>
   </div>
 </template>
 
@@ -147,7 +187,22 @@
   import { use } from 'main/locale';
   import zhLocale from 'main/locale/lang/zh-CN';
   import enLocale from 'main/locale/lang/en';
-  use(location.href.indexOf('zh-CN') > -1 ? zhLocale : enLocale);
+  import esLocale from 'main/locale/lang/es';
+
+  const lang = location.hash.replace('#', '').split('/')[1] || 'zh-CN';
+  const localize = lang => {
+    switch (lang) {
+      case 'zh-CN':
+        use(zhLocale);
+        break;
+      case 'es':
+        use(esLocale);
+        break;
+      default:
+        use(enLocale);
+    }
+  };
+  localize(lang);
 
   export default {
     name: 'app',
@@ -155,60 +210,72 @@
     computed: {
       lang() {
         return this.$route.path.split('/')[1] || 'zh-CN';
+      },
+      isComponent() {
+        return /^component-/.test(this.$route.name || '');
       }
     },
 
     watch: {
-      lang() {
-        this.localize();
+      lang(val) {
+        if (val === 'zh-CN') {
+          this.suggestJump();
+        }
+        localize(val);
       }
     },
 
     methods: {
-      localize() {
-        use(this.lang === 'zh-CN' ? zhLocale : enLocale);
-      },
-
-      renderAnchorHref() {
-        if (/changelog/g.test(location.href)) return;
-        const anchors = document.querySelectorAll('h2 a,h3 a');
-        const basePath = location.href.split('#').splice(0, 2).join('#');
-
-        [].slice.call(anchors).forEach(a => {
-          const href = a.getAttribute('href');
-          a.href = basePath + href;
-        });
-      },
-
-      goAnchor() {
-        if (location.href.match(/#/g).length > 1) {
-          const anchor = location.href.match(/#[^#]+$/g);
-          if (!anchor) return;
-          const elm = document.querySelector(anchor[0]);
-          if (!elm) return;
+      suggestJump() {
+        if (process.env.NODE_ENV !== 'production') return;
 
-          setTimeout(_ => {
-            document.documentElement.scrollTop = document.body.scrollTop = elm.offsetTop + 120;
-          }, 50);
-        }
+        const href = location.href;
+        const preferGithub = localStorage.getItem('PREFER_GITHUB');
+        if (href.indexOf('element-cn') > -1 || href.indexOf('element.faas') > -1 || preferGithub) return;
+        setTimeout(() => {
+          if (this.lang !== 'zh-CN') return;
+          this.$confirm('建议大陆用户访问部署在国内的站点，是否跳转？', '提示')
+            .then(() => {
+              location.href = location.href
+                .replace('https:', 'http:')
+                .replace('element.', 'element-cn.');
+            })
+            .catch(() => {
+              localStorage.setItem('PREFER_GITHUB', 'true');
+            });
+        }, 1000);
       }
     },
 
     mounted() {
-      this.localize();
-      this.renderAnchorHref();
-      this.goAnchor();
-    },
-
-    created() {
-      window.addEventListener('hashchange', () => {
-        if (location.href.match(/#/g).length < 2) {
-          document.documentElement.scrollTop = document.body.scrollTop = 0;
-          this.renderAnchorHref();
-        } else {
-          this.goAnchor();
-        }
-      });
+      localize(this.lang);
+      if (this.lang === 'zh-CN') {
+        this.suggestJump();
+      }
+      // setTimeout(() => {
+      //   const notified = localStorage.getItem('ES_NOTIFIED_2');
+      //   if (!notified && this.lang !== 'es') {
+      //     const title = this.lang === 'zh-CN'
+      //       ? '西班牙语文档正式上线'
+      //       : 'Spanish docs now available';
+      //     const message = this.lang === 'zh-CN'
+      //       ? '点击这里进行切换'
+      //       : 'Click here to switch';
+      //     const self = this;
+      //     this.$notify({
+      //       title,
+      //       duration: 0,
+      //       message,
+      //       onClick() {
+      //         self.$router.push('/es');
+      //         localStorage.setItem('ES_NOTIFIED_2', 1);
+      //       },
+      //       onClose() {
+      //         localStorage.setItem('ES_NOTIFIED_2', 1);
+      //       }
+      //     });
+      //   }
+      // }, 3500);
     }
   };
 </script>
diff --git a/examples/assets/images/banner-bg.svg b/examples/assets/images/banner-bg.svg
deleted file mode 100755
index 1963922b97..0000000000
--- a/examples/assets/images/banner-bg.svg
+++ /dev/null
@@ -1,556 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="568px" height="507px" viewBox="0 0 568 507" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
-    <title>landingpage_illustration</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <path d="M0.172590677,23.6485671 L0.42612487,5.77688935 L16.8540329,0.0294293998 C16.8540329,0.0294293998 15.177854,1.93690856 14.7900681,3.04976293 C12.4344075,9.8099545 8.62369332,23.6485672 8.62369332,23.6485672 L12.4503267,50.5104432 L6.77057777,52.869339 L0.172590677,23.6485671 Z" id="path-1"></path>
-        <path d="M0.50165759,9.70533955 C0.50165759,6.98052183 2.76494799,3.85642502 4.24369921,2.10604949 C4.96116228,1.25679927 6.79457103,1.34458247 6.79457103,1.34458247 C6.79457103,1.34458247 14.3103209,-0.421861028 18.1620961,0.730924858 C22.8270631,2.12708837 31.0441705,8.37777304 31.0441705,8.37777304 L31.0441705,12.3253024 L32.4964571,25.8307437 C32.555656,26.3812599 32.1792224,26.7158395 31.6448531,26.5752017 L19.8473817,23.4702876 L3.10426007,18.5661795 C3.10426007,18.5661795 0.50165759,13.752189 0.50165759,9.70533955 Z" id="path-3"></path>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-5">
-            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.0431372549   0 0 0 0 0.325490196   0 0 0 0 0.654901961  0 0 0 0.5 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <path d="M2.19875271,28.4418279 L3.86287255,27.3843007 L6.00303843,26.0242524 L12.3564954,21.9867108 C12.8199515,21.6921903 13.2299841,21.0067545 13.2727227,20.4506211 L14.6860304,2.06005034 C14.7706085,0.959484285 15.6971156,0.305616758 16.7589871,0.600581073 L22.4471523,2.18062709 C22.4471523,2.18062709 19.490047,15.5881641 17.4849039,21.8866814 C17.1024344,23.0880871 10.8227555,24.3985444 10.8227555,24.3985444 C10.2887808,24.518499 10.3004206,24.5815937 10.8442251,24.5911455 C10.8442251,24.5911455 11.4579499,24.2941008 15.9345701,25.5864254 C20.4111904,26.8787501 23.0420277,28.6605191 23.0420277,28.6605191 C23.5152035,28.9490808 23.617099,28.8328455 23.2761666,28.3987505 C23.2761666,28.3987505 19.3560675,23.6520346 20.0569902,22.4715851 C20.8897111,21.0691694 21.9010058,19.2755192 22.9498965,17.3732235 C26.1042698,11.652369 29.5986652,4.94891231 29.5986652,4.94891231 C29.5986652,4.94891231 29.7107135,4.94887078 29.9094828,4.95967229 C30.9942045,5.01861815 34.6615557,5.40047936 36.7953331,7.87421481 C39.3201135,10.8012488 38.2266685,14.5788175 38.2266685,14.5788175 C38.2266685,14.5788175 42.5812294,18.9778511 40.2515442,23.8137714 C37.921859,28.6496917 33.2744095,26.6149704 33.2744095,26.6149704 C33.2744095,26.6149704 30.9601231,25.2560818 29.852942,26.6149701 C28.9073415,27.775544 28.470517,27.5861458 28.4060007,29.1830071 C28.2854326,32.1672236 28.3770127,36.7431881 28.3770127,36.7431881 C28.3930228,37.8450485 27.6523336,38.2394478 26.7260907,37.6446122 C26.7260907,37.6446122 18.8318554,32.2240559 11.6465746,30.2807614 C4.4612938,28.3374669 1.23580654,29.7833552 1.23580654,29.7833552 C0.169460637,30.0580646 0.0653116146,29.7976027 0.988314829,29.2110458 L2.19875271,28.4418279 Z" id="path-6"></path>
-        <path d="M30.7057243,18.9325412 L38.1357241,18.9325412 L38.1357241,27.8766294 C38.1357241,27.8766294 38.5162616,29.2690566 35.2086449,29.8766291 C31.9010282,30.4842017 31.6674262,30.0990066 31.6674262,30.0990066 C31.1362929,29.9761909 30.7057243,29.4340532 30.7057243,28.8666523 L30.7057243,18.9325412 Z" id="path-8"></path>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-9">
-            <feOffset dx="0" dy="0.5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.996078431   0 0 0 0 1   0 0 0 0 1  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <linearGradient x1="64.8554444%" y1="50%" x2="64.8554466%" y2="100%" id="linearGradient-10">
-            <stop stop-color="#1D5A90" offset="0%"></stop>
-            <stop stop-color="#0D4372" offset="100%"></stop>
-        </linearGradient>
-        <polygon id="path-11" points="61 21 335.540789 102.890039 335.540802 506.637756 61 424.528974"></polygon>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-12">
-            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.870588235   0 0 0 0 0.898039216   0 0 0 0 0.956862745  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <path d="M29.0542967,11.0272067 L29.0542967,9.08490097 C29.0542967,7.42437133 28.1752971,4.85294284 26.2967897,4.29647933 L15.2667615,1.03035754 C14.9194148,0.922254756 14.6039673,0.915166049 14.2513042,1.00731924 L2.5,3.82862466 L3.01570344,3.9703988 L14.0457317,7.23652059 C15.9260112,7.7929841 16.8032387,10.3661848 16.8032387,12.0249422 L16.8032387,27.912507 C16.8032387,29.546454 16.0412027,31.6588887 14.0457317,31.0687538 L15.061189,31.0917921 L27.2590817,28.1623839 C27.5018699,28.0968134 27.6719989,28.0188376 27.8350391,27.9071905" id="path-13"></path>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-14">
-            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.596078431   0 0 0 0 0.741176471   0 0 0 0 0.952941176  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <path d="M29.0542967,11.0272067 L29.0542967,9.08490097 C29.0542967,7.42437133 28.1752971,4.85294284 26.2967897,4.29647933 L15.2667615,1.03035754 C14.9194148,0.922254756 14.6039673,0.915166049 14.2513042,1.00731924 L2.5,3.82862466 L3.01570344,3.9703988 L14.0457317,7.23652059 C15.9260112,7.7929841 16.8032387,10.3661848 16.8032387,12.0249422 L16.8032387,27.912507 C16.8032387,29.546454 16.0412027,31.6588887 14.0457317,31.0687538 L15.061189,31.0917921 L27.2590817,28.1623839 L27.312247,28.1482065 C27.5018699,28.0968134 27.6719989,28.0188376 27.8350391,27.9071905" id="path-15"></path>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-16">
-            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.4   0 0 0 0 0.607843137   0 0 0 0 0.91372549  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <path d="M54.5141339,50.0541547 L67.0333492,47.095196 C68.4702488,46.7083104 68.8758546,45.0174768 68.8758546,43.8693579 L68.8758546,19.7839357 C68.8758546,18.1056402 67.9736999,15.5067001 66.0457081,14.944283 L15.1012506,0.0885908995 C14.744754,-0.0224596079 14.4209968,-0.0278330196 14.0590436,0.0653061157 L2,2.91679656 L2.52928834,3.06008754 L53.1967468,18.0347958 C55.0508728,18.571516 55.929142,21.0423924 55.929142,22.7188969 L55.929142,46.8712959 C55.929142,48.5209333 55.5199636,50.6291097 53.471927,50.0308699" id="path-17"></path>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-18">
-            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.0194380412   0 0 0 0 0.303028282   0 0 0 0 0.561410502  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <path d="M54.5141339,50.0541547 L67.0333492,47.095196 L67.0860961,47.0808669 C68.4702488,46.7083104 68.8758546,45.0174768 68.8758546,43.8693579 L68.8758546,19.7839357 C68.8758546,18.1056402 67.9736999,15.5067001 66.0457081,14.944283 L15.1012506,0.0885908995 C14.744754,-0.0224596079 14.4209968,-0.0278330196 14.0590436,0.0653061157 L2,2.91679656 L2.52928834,3.06008754 L53.471927,17.9157796 C55.4017377,18.4781967 56.3020736,21.0789279 56.3020736,22.7554324 L56.3020736,46.8426457 C56.3020736,48.492283 55.5199636,50.6291097 53.471927,50.0308699" id="path-19"></path>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-20">
-            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.4   0 0 0 0 0.607843137   0 0 0 0 0.91372549  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <path d="M6.98591477,5.788899 C3.14429572,8.41812349 1.01086715,13.3604908 1.00181953,17.8179602 L1.00181953,25.9085725 C1.08686715,27.0723276 1.3872481,28.0924092 1.94096239,29.0999194 C2.02239096,29.2489806 1.99886715,29.4303684 1.88667667,29.5596745 C1.43791477,30.0679194 1.15743858,30.6192663 0.99639096,31.2999194 L1.00181953,46.0336337 C1.08686715,47.1973888 1.3872481,48.2174704 1.94096239,49.2267766 C1.43791477,50.1929806 1.15743858,50.7443276 0.99639096,51.4249806 L1.00181953,66.1586949 C1.08686715,67.32245 1.3872481,68.3443276 1.94096239,69.3518378 C1.43791477,70.3180419 1.15743858,70.8693888 0.99639096,71.5500419 L1.00181953,86.2837561 C1.08686715,87.4475112 1.3872481,88.4693888 1.94096239,89.476899 C1.43791477,90.4431031 1.15743858,90.99445 0.99639096,91.676899 L1.00181953,106.408817 C1.08686715,107.572572 1.3872481,108.59445 1.94096239,109.60196 C2.02239096,109.751021 1.99886715,109.932409 1.88667667,110.061715 C1.43791477,110.56996 1.15743858,111.121307 0.99639096,111.80196 L1.00181953,126.535675 C1.08686715,127.69943 1.3872481,128.719511 1.94096239,129.728817 C1.43791477,130.695021 1.15743858,131.246368 0.99639096,131.927021 L1.00181953,146.660736 C1.08686715,147.824491 1.3872481,148.846368 1.94096239,149.853879 C1.43791477,150.820083 1.15743858,151.37143 0.99639096,152.052083 L1.00181953,170.442287 C1.00181953,172.554287 2.42772429,174.529797 4.52315286,174.894368 C4.93210525,174.966205 5.33201001,174.973389 5.74458144,174.915919 C7.91058144,174.619593 9.41791477,172.599185 9.41791477,170.427919 L9.41791477,17.8179602 C9.42877191,16.0992663 10.4041052,12.9186949 12.4452481,12.3386133 C12.4452481,12.3368174 28.9408672,8.40734798 28.9408672,8.40734798 C29.6284862,8.24391941 29.8094386,9.17959288 29.8962957,9.75787859 C29.9198195,9.91591941 29.8962952,10.3005438 29.8962952,10.3005438 L38.420963,12.8788443 L38.4209624,10.9072663 C38.4535338,4.556899 33.8464862,-1.3875908 26.9757243,0.286205122 L10.4819148,4.21567451" id="path-21"></path>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-23">
-            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.399626285   0 0 0 0 0.609381731   0 0 0 0 0.91236182  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <path d="M0.00542857143,23.7750868 L0.00542857143,17.8179602 C0.0144761905,13.3604908 2.14790476,8.41812349 5.98952381,5.788899 L9.48552381,4.21567451 L25.9793333,0.286205122 C32.8500952,-1.3875908 37.4571429,4.556899 37.4245714,10.9072663 L37.424572,13.2903538 L28.8999043,10.7727194 C28.8999043,10.7727194 28.9234286,9.91591941 28.8999048,9.75787859 C28.8130476,9.17959288 28.6320952,8.24391941 27.9444762,8.40734798 C27.9444762,8.40734798 11.4488571,12.3368174 11.4488571,12.3386133 C9.40771429,12.9186949 8.43238095,16.0992663 8.42152381,17.8179602 L8.42152381,170.427919 C8.42152381,172.599185 6.91419048,174.619593 4.74819048,174.915919 C4.33561905,174.973389 3.93571429,174.966205 3.5267619,174.894368 C1.43133333,174.529797 0.00542857143,172.554287 0.00542857143,170.442287 L0.000803798701,154.775087 L0,154.775087 L0,23.7750868 L0.00542857143,23.7750868 Z" id="path-24"></path>
-        <path d="M5.81302995,0.0958621923 C3.27469714,0.704733855 1.63734857,2.10832464 0,3.980959 C1.09038564,5.87483306 2.15244958,7.32975314 4.44473758,7.97756427 L37,17.7389806 L37,16.2489125 C37.4278984,14.8780038 37.8905449,14.8246209 38.0144234,14.2293021 C37.4464569,13.206125 37.3033371,12.7071263 37,11.1946294 L37,9.15459816 L6.78835867,0.0586927013 C6.45557864,-0.0262661355 6.14403988,-0.00679640204 5.81302995,0.0958621923 Z" id="path-26"></path>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-28">
-            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.494117647   0 0 0 0 0.670588235   0 0 0 0 0.929411765  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <path d="M5.81302995,0.0958621923 C3.27469714,0.704733855 1.63734857,2.10832464 0,3.980959 C1.09038564,5.87483306 2.15244958,7.32975314 4.44473758,7.97756427 L37,17.7389806 L37,16.2489125 C37.4278984,14.8780038 37.8905449,14.8246209 38.0144234,14.2293021 C37.4464569,13.206125 37.3033371,12.7071263 37,11.1946294 L37,9.15459816 L6.78835867,0.0586927013 C6.45557864,-0.0262661355 6.14403988,-0.00679640204 5.81302995,0.0958621923 Z" id="path-29"></path>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-31">
-            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.494117647   0 0 0 0 0.670588235   0 0 0 0 0.929411765  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <path d="M5.81302995,0.0958621923 C3.27469714,0.704733855 1.63734857,2.10832464 0,3.980959 C1.09038564,5.87483306 2.15244958,7.32975314 4.44473758,7.97756427 L37,17.7389806 L37,16.2489125 C37.4278984,14.8780038 37.8905449,14.8246209 38.0144234,14.2293021 C37.4464569,13.206125 37.3033371,12.7071263 37,11.1946294 L37,9.15459816 L6.78835867,0.0586927013 C6.45557864,-0.0262661355 6.14403988,-0.00679640204 5.81302995,0.0958621923 Z" id="path-32"></path>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-34">
-            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.494117647   0 0 0 0 0.670588235   0 0 0 0 0.929411765  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <path d="M5.81302995,0.0958621923 C3.27469714,0.704733855 1.63734857,2.10832464 0,3.980959 C1.09038564,5.87483306 2.15244958,7.32975314 4.44473758,7.97756427 L37,17.7389806 L37,16.2489125 C37.4278984,14.8780038 37.8905449,14.8246209 38.0144234,14.2293021 C37.4464569,13.206125 37.3033371,12.7071263 37,11.1946294 L37,9.15459816 L6.78835867,0.0586927013 C6.45557864,-0.0262661355 6.14403988,-0.00679640204 5.81302995,0.0958621923 Z" id="path-35"></path>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-37">
-            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.494117647   0 0 0 0 0.670588235   0 0 0 0 0.929411765  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <path d="M5.81302995,0.0958621923 C3.27469714,0.704733855 1.63734857,2.10832464 0,3.980959 C1.09038564,5.87483306 2.15244958,7.32975314 4.44473758,7.97756427 L37,17.7389806 L37,16.2489125 C37.4278984,14.8780038 37.8905449,14.8246209 38.0144234,14.2293021 C37.4464569,13.206125 37.3033371,12.7071263 37,11.1946294 L37,9.15459816 L6.78835867,0.0586927013 C6.45557864,-0.0262661355 6.14403988,-0.00679640204 5.81302995,0.0958621923 Z" id="path-38"></path>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-40">
-            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.494117647   0 0 0 0 0.670588235   0 0 0 0 0.929411765  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <path d="M5.81302995,0.0958621923 C3.27469714,0.704733855 1.63734857,2.10832464 0,3.980959 C1.09038564,5.87483306 2.15244958,7.32975314 4.44473758,7.97756427 L37,17.7389806 L37,16.2489125 C37.4278984,14.8780038 37.8905449,14.8246209 38.0144234,14.2293021 C37.4464569,13.206125 37.3033371,12.7071263 37,11.1946294 L37,9.15459816 L6.78835867,0.0586927013 C6.45557864,-0.0262661355 6.14403988,-0.00679640204 5.81302995,0.0958621923 Z" id="path-41"></path>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-43">
-            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.494117647   0 0 0 0 0.670588235   0 0 0 0 0.929411765  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <path d="M5.81302995,0.0958621923 C3.27469714,0.704733855 1.63734857,2.10832464 0,3.980959 C1.09038564,5.87483306 2.15244958,7.32975314 4.44473758,7.97756427 L37,17.7389806 L37,16.2489125 C37.4278984,14.8780038 37.8905449,14.8246209 38.0144234,14.2293021 C37.4464569,13.206125 37.3033371,12.7071263 37,11.1946294 L37,9.15459816 L6.78835867,0.0586927013 C6.45557864,-0.0262661355 6.14403988,-0.00679640204 5.81302995,0.0958621923 Z" id="path-44"></path>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-46">
-            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.494117647   0 0 0 0 0.670588235   0 0 0 0 0.929411765  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <polygon id="path-47" points="68 22.9128354 80.3746586 20 80.3746586 44.1524906 68 47.0336895"></polygon>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-48">
-            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.399626285   0 0 0 0 0.609381731   0 0 0 0 0.91236182  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <polygon id="path-49" points="12.4473333 0 79.6014995 19.7749632 67.2320537 22.9228152 0.0375349481 2.96624446"></polygon>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-50">
-            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.4   0 0 0 0 0.607843137   0 0 0 0 0.91372549  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <polygon id="path-51" points="67.155153 22.89922 79.5298116 19.9863847 79.5298116 44.1388753 67.155153 47.0200742"></polygon>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-52">
-            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.399626285   0 0 0 0 0.609381731   0 0 0 0 0.91236182  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <polygon id="path-53" points="12.4473333 0 79.6014995 19.7749632 67.2320537 22.9228152 0.0375349481 2.96624446"></polygon>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-54">
-            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.4   0 0 0 0 0.607843137   0 0 0 0 0.91372549  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <path d="M29.0542967,11.0272067 L29.0542967,9.08490097 C29.0542967,7.42437133 28.1752971,4.85294284 26.2967897,4.29647933 L15.2667615,1.03035754 C14.9194148,0.922254756 14.6039673,0.915166049 14.2513042,1.00731924 L2.5,3.82862466 L3.01570344,3.9703988 L14.0457317,7.23652059 C15.9260112,7.7929841 16.8032387,10.3661848 16.8032387,12.0249422 L16.8032387,27.912507 C16.8032387,29.546454 16.0412027,31.6588887 14.0457317,31.0687538 L15.061189,31.0917921 L27.2590817,28.1623839 L27.312247,28.1482065 C27.5018699,28.0968134 27.6719989,28.0188376 27.8350391,27.9071905" id="path-55"></path>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-56">
-            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.4   0 0 0 0 0.607843137   0 0 0 0 0.91372549  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <path d="M29.0542967,11.0272067 L29.0542967,9.08490097 C29.0542967,7.42437133 28.1752971,4.85294284 26.2967897,4.29647933 L15.2667615,1.03035754 C14.9194148,0.922254756 14.6039673,0.915166049 14.2513042,1.00731924 L2.5,3.82862466 L3.01570344,3.9703988 L14.0457317,7.23652059 C15.9260112,7.7929841 16.8032387,10.3661848 16.8032387,12.0249422 L16.8032387,27.912507 C16.8032387,29.546454 16.0412027,31.6588887 14.0457317,31.0687538 L15.061189,31.0917921 L27.2590817,28.1623839 L27.312247,28.1482065 C27.5018699,28.0968134 27.6719989,28.0188376 27.8350391,27.9071905" id="path-57"></path>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-58">
-            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.4   0 0 0 0 0.607843137   0 0 0 0 0.91372549  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <polygon id="path-59" points="67.155153 22.89922 79.5298116 19.9863847 79.5298116 44.1388753 67.155153 47.0200742"></polygon>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-60">
-            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.399626285   0 0 0 0 0.609381731   0 0 0 0 0.91236182  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <polygon id="path-61" points="12.4473333 0 79.6014995 19.7749632 67.2320537 22.9228152 0.0375349481 2.96624446"></polygon>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-62">
-            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.4   0 0 0 0 0.607843137   0 0 0 0 0.91372549  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <polygon id="path-63" points="67.155153 22.89922 79.5298116 19.9863847 79.5298116 44.1388753 67.155153 47.0200742"></polygon>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-64">
-            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.399626285   0 0 0 0 0.609381731   0 0 0 0 0.91236182  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <polygon id="path-65" points="12.4473333 0 79.6014995 19.7749632 67.2320537 22.9228152 0.0375349481 2.96624446"></polygon>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-66">
-            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.596078431   0 0 0 0 0.741176471   0 0 0 0 0.952941176  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <polygon id="path-67" points="74 426.153107 74 22.0126982 86.2405882 19.0151402 86.2405882 423.355225"></polygon>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-68">
-            <feOffset dx="1" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.0258801644   0 0 0 0 0.257757552   0 0 0 0 0.46917517  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <path d="M11.5087093,3.23523138 L23.4218148,0.533037899 C25.5812324,0.0619139855 27.5285302,0.130506739 29.645906,0.749646594 C39.8276555,3.59805094 45.5434236,15.6577401 46.9843093,24.1524111 C47.8518984,29.257156 47.7926577,33.9611749 46.1148093,38.9684459 C44.5898401,43.5208386 41.3468918,48.2699843 35.8699973,49.5118741 L23.0052192,52.4306763" id="path-69"></path>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-70">
-            <feOffset dx="1" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.0431372549   0 0 0 0 0.309803922   0 0 0 0 0.552941176  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <path d="M11.5087093,3.23523138 L23.4218148,0.533037899 C25.5812324,0.0619139855 27.5285302,0.130506739 29.645906,0.749646594 C39.8276555,3.59805094 45.5434236,15.6577401 46.9843093,24.1524111 C47.8518984,29.257156 47.7926577,33.9611749 46.1148093,38.9684459 C44.5898401,43.5208386 41.3468918,48.2699843 35.8699973,49.5118741 L23.0052192,52.4306763" id="path-71"></path>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-72">
-            <feOffset dx="1" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.0431372549   0 0 0 0 0.309803922   0 0 0 0 0.552941176  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <path d="M0.502950308,30.6485671 C-0.480505421,23.1596051 0.502950301,0 0.502950301,0 L16.2911244,8.0660162 C16.2911244,8.0660162 13.5620575,9.19587032 13.4729521,9.76633142 C13.184641,11.6121269 12.4980011,16.0662639 11.8537478,20.6838739 C11.3498755,24.2953196 10.8719305,28.0067592 10.6307512,30.6485671 C9.9858933,37.7121522 14.3060851,59.0973612 14.3060851,59.0973612 C14.3060851,59.0973612 14.9984979,60.9080209 11.2756091,61.5152334 C7.55272035,62.1224458 6.54182177,59.9181579 6.54182177,59.9181579 C6.54182177,59.9181579 1.48640604,38.137529 0.502950308,30.6485671 Z" id="path-73"></path>
-        <path d="M16.0400649,4.52725302 C9.49659066,2.50714082 2.45854027,1.08555158 2.1308986,0.873127833 C1.29884527,0.333672988 1.45520269,1.46410902 1.24327259,2.65039743 C1.05123062,3.72536106 0.436776451,4.83437071 0.730498906,5.0068793 C1.02138597,5.17772262 8.71912312,7.27225564 15.414447,9.17594001 C22.9404305,11.3158062 27.6226195,12.8946482 28.9166224,13.1268049 C30.2106254,13.3589615 30.7998202,12.0568691 30.7998202,12.0568691 L30.7998202,8.07228044 C30.7998202,8.07228044 30.7387912,9.03862894 29.8405669,9.17594007 C29.4520991,9.23532496 28.844309,9.00429748 28.1212226,8.69753354 C26.9997129,8.22174154 21.8025217,6.3062482 16.0400649,4.52725302 Z" id="path-75"></path>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-77">
-            <feOffset dx="0" dy="0.5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.208583872   0 0 0 0 0.318645032   0 0 0 0 0.451477466  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <path d="M6.99999981,19.2232717 C6.99999981,19.2232717 5.06975199,19.0511389 3.35874473,18.6378029 C2.11803891,18.3380799 0.700774671,18.6378029 0.728358772,16.3886121 C0.735315134,15.8213947 1.28019993,9.67917315 2.83395758,5.56866066 C4.06722125,2.3060246 6.44561296,1.2310278 6.44561296,1.2310278 C7.36973909,0.624436813 8.99503694,0.299150142 10.0867942,0.506565091 L17.0861493,1.83632126 L20.6771876,2.84615544 L24.5986652,3.94891231 L36.852942,7.3949317 L36.8529415,42.8282355 C36.8529415,43.9324216 35.9930002,44.5609098 34.9449571,44.2380744 C34.9449571,44.2380744 26.8215033,41.6983288 19.6362225,39.7550343 C12.4509417,37.8117398 8.40552583,37.201245 8.40552583,37.201245 C7.31979847,37.0100499 6.46820112,35.9564527 6.50337708,34.8496321 L6.99999981,19.2232717 Z" id="path-78"></path>
-        <path d="M36.9899902,15 L44.4199901,15 L44.4199901,23.9440883 C44.4199901,23.9440883 44.8005276,25.3365154 41.4929109,25.944088 C38.1852942,26.5516605 37.9516921,26.1664655 37.9516921,26.1664655 C37.4205588,26.0436498 36.9899902,25.5015121 36.9899902,24.9341111 L36.9899902,15 Z" id="path-80"></path>
-        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-81">
-            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.996078431   0 0 0 0 1   0 0 0 0 1  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-    </defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="landingpage_illustration">
-            <g id="轮子" transform="translate(14.000000, 380.000000)">
-                <path d="M50.6255266,60.8301496 C62.7757911,60.8301496 72.6255266,57.3668702 72.6255266,53.0946984 C72.6255266,48.8225267 62.7757911,45.3592472 50.6255266,45.3592472 C38.4752621,45.3592472 28.6255266,48.8225267 28.6255266,53.0946984 C28.6255266,57.3668702 38.4752621,60.8301496 50.6255266,60.8301496 Z" id="Oval" fill="#E2ECFA" opacity="0.550839552" transform="translate(50.625527, 53.094698) rotate(-10.000000) translate(-50.625527, -53.094698) "></path>
-                <path d="M10.998595,8.9991166 L22.9120756,6.29683803 C25.0715612,5.82569928 27.4583747,5.67767867 29.5758172,6.29683802 C39.7578873,9.14533206 44.9668086,20.7147518 46.4753121,29.916955 C47.3138222,35.032051 47.1205701,38.9292082 45.4426689,43.9366369 C43.9176517,48.489173 40.5736382,53.2647085 35.2620696,54.7021088 L22.4954669,58.1961107" id="Stroke-3" fill="#CCE7FF" transform="translate(28.979037, 32.041110) rotate(-150.000000) translate(-28.979037, -32.041110) "></path>
-                <path d="M21.4710018,39.0199931 C20.9910513,45.1728716 21.6331472,50.2815336 25.2803384,55.5804462 C28.7610603,60.6393836 34.2372519,63.0672411 40.3317581,61.6036084 C51.8030067,58.8492981 58.3839492,45.3739319 59.1925144,35.0052722 C59.6724648,28.8523937 59.0303689,23.7415698 55.3831778,18.4448191 C51.9024559,13.3858817 46.4262643,10.9580242 40.3317581,12.4216569 C28.8605094,15.1759672 22.279567,28.6513334 21.4710018,39.0199931 Z" id="Page-1-Copy" fill="#80A8E1"></path>
-                <path d="M43,16.9550856 C33.3400012,19.2745048 27.7981549,30.6221816 27.1172579,39.3536845 C26.713089,44.5350559 27.2538014,48.837087 30.3251203,53.2993292 C33.2562545,57.559487 37.8677843,59.6039986 43,58.3714658 C52.6599988,56.0520466 58.2018451,44.7043698 58.8827421,35.9728669 C59.286911,30.7914955 58.7461986,26.4876438 55.6748797,22.0272222 C52.7437455,17.7670644 48.1322157,15.7225528 43,16.9550856 L43,16.9550856 Z" id="Page-1" fill="#9BBBE8"></path>
-                <path d="M48.1057253,16.8410994 L46.8257889,16.4738938 C44.6950385,15.8780845 42.7500553,15.845684 40.6007281,16.3676921 C31.7860718,18.4197239 26.2836457,27.8212696 24.806796,35.4875884 C23.3299464,43.1539072 24.9721289,54.5138832 34.3756674,57.212125 L37.2662059,58.0419379 L37.5578605,58.1265392 C37.3877757,58.0825026 37.219039,58.0346482 37.0517099,57.9830279 C34.4831595,57.1906417 32.2462824,55.5108923 30.5562926,53.1314618 C27.4242567,48.7213935 26.8725279,44.4661275 27.2849312,39.3432481 C27.9778431,30.7103144 33.634456,19.4907405 43.4912666,17.197505 C45.3693736,16.7600982 47.1806043,16.7402979 48.867371,17.0895033" id="Page-1" fill="#C0DBF8"></path>
-            </g>
-            <g id="lady" transform="translate(0.000000, 318.000000)">
-                <g id="鞋子" transform="translate(0.000000, 122.000000)">
-                    <path d="M22.5665213,1.52463221 L28.4753678,2.56652127 L27.2451873,9.54322165 C27.2451873,9.54322165 26.2284251,10.9035575 24.0274738,10.5154704 C21.8265224,10.1273833 21.3363408,8.50133258 21.3363408,8.50133258 L22.5665213,1.52463221 Z" id="Combined-Shape" fill="#FFCFC7"></path>
-                    <path d="M3.56652127,0.524632208 L9.47536779,1.56652127 L8.24518728,8.54322165 C8.24518728,8.54322165 7.22842512,9.90355751 5.02747376,9.5154704 C2.82652239,9.12738329 2.29245931,7.75019664 2.29245931,7.75019664 L3.56652127,0.524632208 Z" id="Combined-Shape" fill="#FFBFBA"></path>
-                    <path d="M23.1902933,17.4944426 C22.8936345,17.9555283 23.0418011,18.5447066 23.5473145,18.7725944 C23.5473145,18.7725944 26.5428133,20.8326334 28.7814677,17.319668 C29.8973272,15.5686269 35.1843376,13.6808502 36.6471005,12.8126659 C38.1189549,11.9390857 38.6198239,10.7291535 38.921474,9.67606089 C39.522911,7.57638057 37.2657576,7.62931993 37.2657576,7.62931993 L33.0163855,8.51218889 C33.0163855,8.51218889 33.5978086,11.1422851 32.0651911,11.865543 C30.5325736,12.5888008 28.4769108,12.4323038 28.4769108,12.4323038 L26.399411,13.4531312 C25.9076031,13.6947923 25.2654328,14.2691311 24.9717658,14.7255668 L23.1902933,17.4944426 Z" id="Path-3" fill="#EFF5FD" transform="translate(31.030938, 13.500993) rotate(7.000000) translate(-31.030938, -13.500993) "></path>
-                    <path d="M4.19029329,15.4944426 C3.89363446,15.9555283 4.04180112,16.5447066 4.54731452,16.7725944 C4.54731452,16.7725944 7.54281334,18.8326334 9.78146771,15.319668 C10.8973272,13.5686269 16.1843376,11.6808502 17.6471005,10.8126659 C19.1189549,9.93908573 19.6198239,8.72915347 19.921474,7.67606089 C20.522911,5.57638057 18.2657576,5.62931993 18.2657576,5.62931993 L14.0163855,6.51218889 C14.0163855,6.51218889 14.5978086,9.14228512 13.0651911,9.86554297 C11.5325736,10.5888008 9.47691082,10.4323038 9.47691082,10.4323038 L7.39941096,11.4531312 C6.90760311,11.6947923 6.26543281,12.2691311 5.97176575,12.7255668 L4.19029329,15.4944426 Z" id="Path-3-Copy" fill="#EFF5FD" transform="translate(12.030938, 11.500993) rotate(7.000000) translate(-12.030938, -11.500993) "></path>
-                    <path d="M1.1086333,14.1724794 C1.1086333,14.7243742 1.49150785,15.3865823 1.99143197,15.6177232 C1.99143197,15.6177232 5.09755,17.7503653 7.33620438,14.2373998 C8.45206387,12.4863587 10.8833052,11.9567362 12.3460681,11.088552 C13.8179225,10.2149718 14.3187914,9.00503952 14.6204416,7.95194694 C15.2218786,5.85226663 12.9647252,5.90520598 12.9647252,5.90520598 L8.66936645,6.93947384 C8.66936645,6.93947384 9.29677619,9.41817118 7.76415869,10.141429 C6.97610138,10.5133213 5.80520989,11.2353857 4.04659154,11.0885519 C2.28797318,10.941718 1.89416703,10.335851 1.89416703,10.335851 C1.46032873,9.9976692 1.1086333,10.1693722 1.1086333,10.7228126 L1.1086333,14.1724794 Z" id="Path-3" fill="#3E0F3F" transform="translate(7.915491, 11.082045) rotate(9.000000) translate(-7.915491, -11.082045) "></path>
-                    <path d="M20.218804,16.2536191 C20.218804,16.8070611 20.6074601,17.4711091 21.1129735,17.6989969 C21.1129735,17.6989969 24.1084723,19.7590359 26.3471267,16.2460704 C27.4629862,14.4950293 29.8942275,13.9654068 31.3569904,13.0972226 C32.8288448,12.2236424 33.3297138,11.0137101 33.6313639,9.96061756 C34.2328009,7.86093724 31.9756475,7.9138766 31.9756475,7.9138766 L27.7262754,8.79674556 C27.7262754,8.79674556 28.3076985,11.4268418 26.775081,12.1500996 C25.2424635,12.8733575 23.1868007,12.7168604 23.1868007,12.7168604 L21.1578967,11.937941 C20.6392501,11.7388266 20.218804,12.0229793 20.218804,12.579508 L20.218804,16.2536191 Z" id="Path-3" fill="#613F62" transform="translate(26.976037, 13.016990) rotate(9.000000) translate(-26.976037, -13.016990) "></path>
-                </g>
-                <g id="下半身" transform="translate(2.000000, 52.000000)">
-                    <polygon id="Rectangle-16" fill="#FFBFBA" transform="translate(9.171588, 43.673843) scale(-1, 1) translate(-9.171588, -43.673843) " points="4.91415179 42.0699344 1.32755844 15.336998 14.6157168 18.0169454 12.3098542 42.0699351 14.6770872 57.4907494 17.0156182 72.0106888 10.908393 71.6553877"></polygon>
-                    <g id="Path-10" transform="translate(16.000000, 21.000000)">
-                        <g id="Oval-3">
-                            <mask id="mask-2" fill="white">
-                                <use xlink:href="#path-1"></use>
-                            </mask>
-                            <use id="Mask" fill="#FFCFC7" transform="translate(8.513312, 26.449384) scale(-1, 1) translate(-8.513312, -26.449384) " xlink:href="#path-1"></use>
-                            <circle fill="#FFBFBA" mask="url(#mask-2)" transform="translate(17.067321, 24.067321) rotate(4.000000) translate(-17.067321, -24.067321) " cx="17.0673205" cy="24.0673205" r="2"></circle>
-                        </g>
-                    </g>
-                    <g id="Rectangle-14">
-                        <mask id="mask-4" fill="white">
-                            <use xlink:href="#path-3"></use>
-                        </mask>
-                        <g id="Mask">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-3"></use>
-                            <use fill="#095DBF" fill-rule="evenodd" xlink:href="#path-3"></use>
-                        </g>
-                        <path d="M27.8203145,12.2265229 C27.4718612,8.86521816 31.3954126,8 31.3954126,8 L35,8 L35,29 L30.3264726,29 C30.3264726,29 28.1687678,15.5878277 27.8203145,12.2265229 Z" fill="#0B53A7" mask="url(#mask-4)"></path>
-                    </g>
-                    <path d="M14.5206212,18.6286037 C10.0060034,15.9131904 10.355923,10.6424186 10.355923,10.6424186 C10.355923,10.6424186 8.08724277,16.5302784 12.9309762,19.6571971 C14.3818233,20.5938053 16.7489087,21.734256 20.5422216,20.9799039 C21.8363554,20.7225478 18.2337334,20.8619342 14.5206212,18.6286037 Z" id="Path-11" fill="#0A52A7" transform="translate(15.318103, 15.933838) rotate(27.000000) translate(-15.318103, -15.933838) "></path>
-                </g>
-                <g id="上半身" transform="translate(5.000000, 25.000000)">
-                    <path d="M28.6940497,37.2134314 C27.8012851,36.5593758 26.8072481,35.1783277 26.4691422,34.1140947 L21.7737477,19.3347221 C21.7737477,19.3347221 19.5151125,17.526373 23.264109,17.526373 C27.0131056,17.526373 27.6481859,16.2145894 27.6481859,16.2145894 L31.7944171,32.7133975 L43.3922272,44.2009182 C43.3922272,44.2009182 42.1197446,44.386172 41.4292954,44.594951 C40.902138,44.7543536 39.7394074,45.3054631 39.7394074,45.3054631 L28.6940497,37.2134314 Z" id="Rectangle-1459" fill="#FFCFC7" transform="translate(32.245739, 30.760026) rotate(10.000000) translate(-32.245739, -30.760026) "></path>
-                    <path d="M13.2871095,21.7578122 C15.5668959,18.5509753 18.1942608,10.9301248 18.1942608,10.9301248 L29.8281309,9.34344457 L27.1421856,28.0117575 C27.0636587,28.5575487 26.6134616,29.2125942 26.1184633,29.4848409 L24.8925522,30.159086 L8.88530077,25.6469678 C8.35461119,25.4973772 8.32190919,25.1652874 8.79641286,24.9063039 C8.79641286,24.9063039 12.3374689,23.0936139 13.2871095,21.7578122 Z" id="Rectangle-2" fill="#FFCFC7"></path>
-                    <g id="Path-4">
-                        <mask id="mask-7" fill="white">
-                            <use xlink:href="#path-6"></use>
-                        </mask>
-                        <use id="Mask" fill="#FFFFFF" xlink:href="#path-6"></use>
-                        <path d="M30.3221331,24.6612154 C29.7330509,23.7698271 29.3694036,22.4870451 29.3694036,22.4870451 L29.6520908,25.2753153 L30.3221331,27.1764032 L32.1810322,26.7415488 C32.1810322,26.7415488 30.9112154,25.5526036 30.3221331,24.6612154 Z" fill="#EFF5FD" mask="url(#mask-7)"></path>
-                    </g>
-                    <path d="M36.5653995,36.1204839 C35.687644,35.4474586 34.7057742,34.0510326 34.3676683,32.9867995 L29.6722738,18.2074269 C29.6722738,18.2074269 27.4136386,16.3990778 31.1626351,16.3990778 C34.9116317,16.3990778 35.546712,15.0872942 35.546712,15.0872942 L39.6929432,31.5861024 L51.2907533,43.073623 L48.5984304,45.3468977 L36.5653995,36.1204839 Z" id="Rectangle-1459" fill="#FFCFC7" transform="translate(40.144266, 30.217096) rotate(10.000000) translate(-40.144266, -30.217096) "></path>
-                    <path d="M54.9584948,47.5716106 L53.8492328,48.6876421 C53.5604399,48.9778812 53.2125017,48.9784671 53.0093922,48.7372037 C52.8747397,48.5774047 52.9279322,48.0844166 52.965611,47.7716312 L53.5219297,43.1685118 C53.5716138,42.7573062 53.2805595,42.3599765 52.8718132,42.3100299 C52.4631998,42.2600163 52.0916168,42.5762666 52.041916,42.9874052 L51.4282478,46.6028913 C51.396156,46.6928086 51.3273831,46.7083583 51.3196511,46.5873416 L51.1257341,42.0584408 C51.1257341,41.6441721 50.7771003,41.1380261 50.3653609,41.1380261 C49.9536215,41.1380261 49.6199001,41.4737762 49.6199001,41.8880449 L49.6052177,46.6224415 C49.6090587,46.6771082 49.5625506,46.6927416 49.5541036,46.6303586 L48.7664344,43.2012683 C48.6932385,42.7936111 48.4299763,42.2328671 48.0248548,42.3064981 C47.6196834,42.3801124 47.3505946,42.7937283 47.4237239,43.2012683 L48.0142795,47.5259155 C48.0148614,47.6029443 47.9892712,47.6468819 47.9528894,47.5482107 L47.0718782,45.1772212 C46.9340497,44.7868713 46.5078275,44.5594168 46.1198659,44.6980253 C45.7319709,44.8367007 45.5291774,45.2889482 45.6669559,45.6792312 L47.211386,50.7584667 C47.2194505,50.7865198 47.227964,50.8143051 47.2367269,50.8419565 C47.6686026,52.180036 48.9057496,53.1380261 50.3653609,53.1380261 C51.2998307,53.1380261 52.2704163,52.8064605 53.0092592,52.2361255 C53.8073305,51.7524939 56.363999,48.9856645 56.363999,48.9856645 C56.7520935,48.5951974 56.6941454,47.9972612 56.3059345,47.6067272 C55.9178399,47.216327 55.3465727,47.1811435 54.9584948,47.5716106 Z" id="iconfont-shou" fill="#FFCFC7" transform="translate(51.125734, 47.138026) scale(1, -1) rotate(44.000000) translate(-51.125734, -47.138026) "></path>
-                    <path d="M22.7543392,13.0730385 C21.4492879,15.9068643 20.7248905,19.4136168 19.9677507,20.9096016 C18.2408987,24.3215796 17.3529984,24.8604759 17.3529984,24.8604759" id="Path-12" stroke="#FFBFBA" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" transform="translate(20.053669, 18.966757) rotate(7.000000) translate(-20.053669, -18.966757) "></path>
-                </g>
-                <g id="Rectangle-1456" transform="translate(34.427382, 24.575974) scale(-1, 1) rotate(-20.000000) translate(-34.427382, -24.575974) ">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
-                    <use fill="#FFBFBA" fill-rule="evenodd" xlink:href="#path-8"></use>
-                </g>
-                <g id="头" transform="translate(29.718434, 26.425748) rotate(26.000000) translate(-29.718434, -26.425748) translate(16.718434, 3.425748)">
-                    <path d="M10,8.83136671 C10,4.50622231 13.5121654,1 17.8249998,1 L17.8249998,1 C22.1466279,1 25.6499996,4.50396035 25.6499996,8.83113908 L25.6499996,10.2335106 L25.6499996,12.6313763 C25.6499996,16.9554964 22.1378342,20.4608884 17.8249998,20.4608884 L17.8249998,20.4608884 C13.5033717,20.4608884 10,16.9591955 10,12.6295217 L10,8.83136671 Z" id="Mask" fill="#FFCFC7"></path>
-                    <path d="M8.12616287,6.19131478 L23.3177958,7.57739004 L16.367781,42.5447082 C15.9369056,44.7125533 13.8929387,45.8788479 11.8080253,45.1516434 L3.67107574,42.3135275 C1.58366754,41.5854529 0.305490956,39.2454486 0.812141041,37.1040879 L8.12616287,6.19131478 Z" id="Rectangle-648" fill="url(#linearGradient-10)"></path>
-                    <path d="M11.6812421,18.7463612 C16.6800594,18.7937594 23.7179263,10.3822989 24.7383933,6.77450066 C25.7588603,3.1667024 21.6815672,0.0320439684 16.297012,0.0320439684 C10.9124568,0.0320439684 7.85562995,4.59606619 7.85562995,7.99223472 C7.85562995,8.53856826 9.29379502,18.7237237 11.6812421,18.7463612 Z" id="Oval-24" fill="#1D5A90"></path>
-                    <path d="M20,16 C21.1045695,16 20.3236227,15.9542812 20.3236227,14.5357995 C20.3236227,13.1173178 21.1045695,11 20,11 C18.8954305,11 18,12.1192881 18,13.5 C18,14.8807119 18.8954305,16 20,16 Z" id="Oval-2" fill="#FFBFBA"></path>
-                </g>
-            </g>
-            <g id="白色背景墙" transform="translate(118.000000, 0.000000)">
-                <g id="Rectangle-291">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
-                    <use fill="#FEFFFF" fill-rule="evenodd" xlink:href="#path-11"></use>
-                </g>
-                <path d="M217.324845,66.6102349 C210.394808,69.0648935 212.014476,72.5604878 212.005429,77.0179572 L220.421524,77.0179572 C220.432381,75.2992633 219.347234,71.4116926 223.232513,70.4599518 C219.347234,71.4116926 236.356324,66.0319491 236.443181,66.6102349 C236.466705,66.7682757 226.036481,63.9019464 226.036481,63.9019464" id="Combined-Shape" fill-opacity="0.200000018" fill="#BCC4D1"></path>
-                <path d="M256.324845,78.6102349 C250.384193,79.4679693 251.014476,84.5604878 251.005429,89.0179572 L259.421524,89.0179572 C259.432381,87.2992633 259.063665,83.5528001 261.920947,82.1573828 C258.035667,83.1091237 275.356324,78.0319491 275.443181,78.6102349 C275.466705,78.7682757 265.036481,75.9019464 265.036481,75.9019464" id="Combined-Shape" fill-opacity="0.200000018" fill="#BCC4D1"></path>
-                <g id="Group-21" transform="translate(95.000000, 133.000000)">
-                    <polygon id="Rectangle-3" fill="#BDCEEB" opacity="0.300000012" points="3 1 71 21 71 44 3 24"></polygon>
-                    <polygon id="Rectangle-3-Copy" fill="#C0DBF8" opacity="0.639458955" points="3.37286438 24 71 43.9434662 71 45.7272129 0 24.8664486"></polygon>
-                    <polygon id="Rectangle-4" fill="#CCE7FF" points="0 0 3.4625074 1.0179419 3.4625074 24.0179419 0 24.9070677"></polygon>
-                </g>
-                <polygon id="Rectangle-1553" fill="#E2E9F5" points="11.9000244 0 347.343201 100 335.267925 103 0 2.84565806"></polygon>
-                <polygon id="Combined-Shape" fill="#C3D2EB" points="335 102.866152 347.339966 100 347.341035 503.283905 335 506.174164"></polygon>
-                <polygon id="shadow" fill="#E2ECFA" opacity="0.550839552" points="347 432.887124 449.782707 462.038067 347 502.380069"></polygon>
-            </g>
-            <g id="shadow" transform="translate(211.000000, 226.000000)" fill-opacity="0.200000018">
-                <polygon id="Rectangle-6" fill="#BCC4D1" points="28 7.10542736e-15 95 20.0580158 95 44.2405205 28 24.3199844"></polygon>
-                <polygon id="Rectangle-6" fill="#BBC4D0" points="28 40 95 60.0580158 95 84.2405205 28 64.3199844"></polygon>
-                <polygon id="Rectangle-6" fill="#BCC4D1" points="144 32 211 52.0580158 211 76.2405205 144 56.3199844"></polygon>
-                <polygon id="Rectangle-6" fill="#BCC4D1" points="114 33 134 38.0580158 134 53.2405205 114 48.3199844"></polygon>
-                <polygon id="Rectangle-6" fill="#BCC4D1" points="114 73 134 78.0580158 134 93.2405205 114 88.3199844"></polygon>
-                <polygon id="Rectangle-6" fill="#BCC4D1" points="0 2 18 6.05801582 18 21.2405205 0 15.9945803"></polygon>
-                <polygon id="Rectangle-6" fill="#BCC4D1" points="0 42 18 48.0580158 18 61.5267487 0 56.4029055"></polygon>
-                <polygon id="Rectangle-6" fill="#BBC4D0" points="145 72 212 92.0580158 212 116.24052 145 96.3199844"></polygon>
-                <path d="M55.2,120.028239 C57.107455,120.593277 58,123.206131 58,124.89045 L58,149.089935 C58,150.747262 57.2262211,152.892249 55.2,152.29302 L4.8,137.368085 C2.8907455,136.803046 2,134.190192 2,132.505874 L2,108.306388 C2,106.649061 2.77377892,104.502275 4.8,105.103303 L55.2,120.028239" id="Page-1" fill="#BBC4D0"></path>
-                <path d="M121.2,140.028239 C123.107455,140.593277 124,143.206131 124,144.89045 L124,169.089935 C124,170.747262 123.226221,172.892249 121.2,172.29302 L70.8,157.368085 C68.8907455,156.803046 68,154.190192 68,152.505874 L68,128.306388 C68,126.649061 68.7737789,124.502275 70.8,125.103303 L121.2,140.028239" id="Page-1" fill="#BBC4D0"></path>
-            </g>
-            <g id="checkbox1-1" transform="translate(200.000000, 207.000000)">
-                <g id="Page-1">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
-                    <use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-13"></use>
-                </g>
-                <path d="M16.5564897,28.0604791 L16.5564897,12.161922 C16.5564897,10.5002434 15.6768818,7.92703578 13.7970747,7.37018727 L2.75941494,4.10180569 C0.762563256,3.50948911 0,5.62515879 0,7.25846288 L0,23.1570201 C0,24.8186986 0.879607848,27.3919062 2.75941494,27.9487548 L13.7970747,31.2171363 C15.7939264,31.8094529 16.5564897,29.6955566 16.5564897,28.0604791 L16.5564897,28.0604791 Z" id="Page-1" fill="#DAEDFE"></path>
-            </g>
-            <g id="checkbox3-1" transform="translate(200.000000, 248.000000)">
-                <g id="Page-1">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-16)" xlink:href="#path-15"></use>
-                    <use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-15"></use>
-                </g>
-                <path d="M16.5564897,28.0604791 L16.5564897,12.161922 C16.5564897,10.5002434 15.6768818,7.92703578 13.7970747,7.37018727 L2.75941494,4.10180569 C0.762563256,3.50948911 0,5.62515879 0,7.25846288 L0,23.1570201 C0,24.8186986 0.879607848,27.3919062 2.75941494,27.9487548 L13.7970747,31.2171363 C15.7939264,31.8094529 16.5564897,29.6955566 16.5564897,28.0604791 L16.5564897,28.0604791 Z" id="Page-1" fill="#D9EDFE"></path>
-            </g>
-            <g id="confirmbutton" transform="translate(200.000000, 320.000000)">
-                <g id="Page-1">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-18)" xlink:href="#path-17"></use>
-                    <use fill="#0B66B8" fill-rule="evenodd" xlink:href="#path-17"></use>
-                </g>
-                <path d="M56,22.8904496 L56,47.0899354 C56,48.7472619 55.2262211,50.892249 53.2,50.2930203 L2.8,35.3680845 C0.890745501,34.803046 0,32.1901925 0,30.5058737 L0,6.30638786 C0,4.64906138 0.77377892,2.50227475 2.8,3.10330303 L53.2,18.0282388 C55.107455,18.5932773 56,21.2061308 56,22.8904496 Z" id="Page-1" fill="#157AD6"></path>
-            </g>
-            <g id="cancelbutton" transform="translate(266.000000, 340.000000)">
-                <g id="Page-1">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-20)" xlink:href="#path-19"></use>
-                    <use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-19"></use>
-                </g>
-                <path d="M53.2,18.0282388 C55.107455,18.5932773 56,21.2061308 56,22.8904496 L56,47.0899354 C56,48.7472619 55.2262211,50.892249 53.2,50.2930203 L2.8,35.3680845 C0.890745501,34.803046 0,32.1901925 0,30.5058737 L0,6.30638786 C0,4.64906138 0.77377892,2.50227475 2.8,3.10330303 L53.2,18.0282388" id="Page-1" fill="#DAEDFE"></path>
-            </g>
-            <g id="梯子" transform="translate(315.000000, 53.000000)">
-                <path d="M54.0848059,44.7867802 C54.0577014,44.6570069 54.0296142,44.5190045 54,44.3713422 L54,42.331311 L23.7883587,33.2354055 C23.6638166,33.2036099 23.5422496,33.1864407 23.4215236,33.1827845 L23.4215238,24 L15.0054286,24 L15.0054286,28.1820398 L15,28.1820398 L15,164.18204 L15.0017558,164.18204 L15.0054286,176.624327 C15.0054286,178.736327 16.4313333,180.711837 18.5267619,181.076408 C18.9357143,181.148245 19.335619,181.155429 19.7481905,181.097959 C21.9141905,180.801633 23.4215238,178.781224 23.4215238,176.609959 L23.4215238,162.752326 L54,171.92102 L54,170.430952 L54.0054286,188.624327 C54.0054286,190.736327 55.4313333,192.711837 57.5267619,193.076408 C57.9357143,193.148245 58.335619,193.155429 58.7481905,193.097959 C60.9141905,192.801633 62.4215238,190.781224 62.4215238,188.609959 L62.4215238,36 L54.0054286,36 L54.0054286,44.0906122 C54.022798,44.3282887 54.0491493,44.5599724 54.0848059,44.7867802 Z M54.5064352,46.3500296 C54.5640446,46.5006767 54.6278024,46.6488138 54.7009815,46.8030432 C54.6307598,46.6529087 54.565952,46.5020457 54.5064352,46.3500296 Z M54.9922085,47.4954176 C54.9639742,47.59234 54.9255935,47.6751334 54.8791834,47.7543362 C54.8828727,47.7501259 54.8865734,47.7459186 54.8902857,47.7417143 C54.9519257,47.6706706 54.9868003,47.5839053 54.9922085,47.4954176 Z M54.0829305,49.176864 C54.0552095,49.2546599 54.0275328,49.3374152 54,49.4256254 L54,50.9156935 L23.4215238,41.7469995 L23.4215238,53.1827873 C23.5422496,53.1864407 23.6638166,53.2036099 23.7883587,53.2354055 L54,62.331311 L54,64.3713422 C54.0124132,64.4332368 54.0245581,64.4934341 54.0364747,64.5520395 C54.0240563,64.4412008 54.0137193,64.3291198 54.0054286,64.2156735 L54,49.4819592 C54.0247611,49.3773085 54.0523454,49.2757146 54.0829305,49.176864 Z M54.4527177,68.3795845 C54.3086063,68.6174614 54.1521077,68.9382999 54,69.4256254 L54,70.9156935 L23.4215238,61.7469995 L23.4215238,73.1827873 C23.5422496,73.1864407 23.6638166,73.2036099 23.7883587,73.2354055 L54,82.331311 L54,84.3713422 C54.0043085,84.3928252 54.0085847,84.4141038 54.0128302,84.4351822 C54.0102039,84.4038025 54.0077369,84.3723209 54.0054286,84.3407347 L54,69.6070204 C54.0984366,69.190987 54.2414915,68.8232622 54.4527177,68.3795845 Z M54.6837009,88.0385738 C54.4882145,88.3061196 54.2387006,88.660872 54,89.4256254 L54,90.9156935 L23.4215238,81.7469995 L23.4215238,93.1827873 C23.5422496,93.1864407 23.6638166,93.2036099 23.7883587,93.2354055 L54,102.331311 L54,104.371342 C54.0018069,104.380352 54.0036081,104.389325 54.0054037,104.398263 L54,89.7320816 C54.1307623,89.1794268 54.340259,88.7120182 54.6837009,88.0385738 Z M54.9366579,107.644507 C54.7519518,108.047312 54.3634419,108.261223 54,109.425625 L54,110.915693 L23.4215238,101.747 L23.4215238,113.182787 C23.5422496,113.186441 23.6638166,113.20361 23.7883587,113.235406 L54,122.331311 L54,124.371342 C54.0017914,124.380274 54.0035772,124.389171 54.0053575,124.398033 L54,109.858939 C54.1610476,109.17649 54.4415238,108.625143 54.9445714,107.658939 C54.9419278,107.654129 54.93929,107.649318 54.9366579,107.644507 Z M54.9042222,127.709721 C54.7091069,128.073845 54.3433659,128.325543 54,129.425625 L54,130.915693 L23.4215238,121.747 L23.4215238,133.182787 C23.5422496,133.186441 23.6638166,133.20361 23.7883587,133.235406 L54,142.331311 L54,144.371342 C54.0017757,144.380196 54.0035459,144.389015 54.0053107,144.3978 L54,129.984 C54.1610476,129.303347 54.4415238,128.752 54.8902857,128.243755 C55.0024762,128.114449 55.026,127.933061 54.9445714,127.784 C54.930969,127.75925 54.9175194,127.734491 54.9042222,127.709721 Z M54.8693965,147.770793 C54.6676741,148.105139 54.3238831,148.387963 54,149.425625 L54,150.915693 L23.4215238,141.747 L23.4215238,154.188114 C23.5422496,154.191768 23.6638166,154.208937 23.7883587,154.240732 L54,163.336638 L54,165.376669 C54.2776696,166.761183 54.421089,167.296461 54.8790159,168.161935 C54.9004369,168.120712 54.9222858,168.078722 54.9445714,168.035918 C54.3908571,167.028408 54.0904762,166.006531 54.0054286,164.842776 L54,150.109061 C54.1610476,149.428408 54.4415238,148.877061 54.9445714,147.910857 C54.9189729,147.864196 54.8939159,147.817513 54.8693965,147.770793 Z" id="Combined-Shape" fill-opacity="0.200000018" fill="#BCC4D1"></path>
-                <g id="Stroke-1" transform="translate(38.000000, 12.000000)">
-                    <mask id="mask-22" fill="white">
-                        <use xlink:href="#path-21"></use>
-                    </mask>
-                    <g id="Mask">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-23)" xlink:href="#path-21"></use>
-                        <use fill="#DEEFFF" fill-rule="evenodd" xlink:href="#path-21"></use>
-                    </g>
-                    <path d="M6.66528399,174.019592 C6.91349293,173.22654 7,171.373639 7,171.373639 L7,16.9987958 C7,13.1334676 10.0413722,9.25563755 13.7926382,8.3375317 L27.3522011,5.01888842 C30.569845,4.23138424 33.1782608,6.28199491 33.1782608,9.58720263 L33.1782608,176.999999 L5.23906441,177 C5.23906441,177 6.3265144,175.101994 6.66528399,174.019592 Z" id="Rectangle-18" fill="#C7DAF5" mask="url(#mask-22)"></path>
-                </g>
-                <g id="Rectangle-18">
-                    <mask id="mask-25" fill="white">
-                        <use xlink:href="#path-24"></use>
-                    </mask>
-                    <use id="Mask" stroke="#89B3EF" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round" fill="#D9EDFE" xlink:href="#path-24"></use>
-                    <path d="M5.42621958,174.169083 C5.67442852,173.376031 5.76093559,171.523129 5.76093559,171.523129 L5.76093559,17.1482867 C5.76093559,13.2829584 8.80230779,9.40512837 12.5535738,8.48702253 L26.1131367,5.16837924 C29.3307806,4.38087506 31.9391964,6.43148573 31.9391964,9.73669345 L31.9391964,177.14949 L4,177.14949 C4,177.14949 5.08744999,175.251485 5.42621958,174.169083 Z" fill="#AFCAF1" opacity="0.550314832" mask="url(#mask-25)"></path>
-                </g>
-                <g id="Rectangle-19" transform="translate(2.000000, 27.000000)">
-                    <mask id="mask-27" fill="white">
-                        <use xlink:href="#path-26"></use>
-                    </mask>
-                    <g id="Mask">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-28)" xlink:href="#path-26"></use>
-                        <use fill="#CCE7FF" fill-rule="evenodd" xlink:href="#path-26"></use>
-                    </g>
-                    <polygon fill="#C7DAF5" mask="url(#mask-27)" points="-1 3.74733444 39.3323936 15.4525213 39.3323936 19.3000011 -1 7.38941574"></polygon>
-                </g>
-                <g id="Rectangle-19" transform="translate(2.000000, 47.000000)">
-                    <mask id="mask-30" fill="white">
-                        <use xlink:href="#path-29"></use>
-                    </mask>
-                    <g id="Mask">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-31)" xlink:href="#path-29"></use>
-                        <use fill="#CCE7FF" fill-rule="evenodd" xlink:href="#path-29"></use>
-                    </g>
-                    <polygon fill="#C7DAF5" mask="url(#mask-30)" points="0 4 40.3323936 15.7051868 40.3323936 19.5526667 0 7.6420813"></polygon>
-                </g>
-                <g id="Rectangle-19" transform="translate(2.000000, 67.000000)">
-                    <mask id="mask-33" fill="white">
-                        <use xlink:href="#path-32"></use>
-                    </mask>
-                    <g id="Mask">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-34)" xlink:href="#path-32"></use>
-                        <use fill="#CCE7FF" fill-rule="evenodd" xlink:href="#path-32"></use>
-                    </g>
-                    <polygon fill="#C7DAF5" mask="url(#mask-33)" points="-2 3 38.3323936 14.7051868 38.3323936 18.5526667 -2 6.6420813"></polygon>
-                </g>
-                <g id="Rectangle-19" transform="translate(2.000000, 87.000000)">
-                    <mask id="mask-36" fill="white">
-                        <use xlink:href="#path-35"></use>
-                    </mask>
-                    <g id="Mask">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-37)" xlink:href="#path-35"></use>
-                        <use fill="#CCE7FF" fill-rule="evenodd" xlink:href="#path-35"></use>
-                    </g>
-                    <polygon fill="#C7DAF5" mask="url(#mask-36)" points="-2 3 38.3323936 14.7051868 38.3323936 18.5526667 -2 6.6420813"></polygon>
-                </g>
-                <g id="Rectangle-19" transform="translate(2.000000, 107.000000)">
-                    <mask id="mask-39" fill="white">
-                        <use xlink:href="#path-38"></use>
-                    </mask>
-                    <g id="Mask">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-40)" xlink:href="#path-38"></use>
-                        <use fill="#CCE7FF" fill-rule="evenodd" xlink:href="#path-38"></use>
-                    </g>
-                    <polygon fill="#C7DAF5" mask="url(#mask-39)" points="-2 3 38.3323936 14.7051868 38.3323936 18.5526667 -2 6.6420813"></polygon>
-                </g>
-                <g id="Rectangle-19" transform="translate(2.000000, 127.000000)">
-                    <mask id="mask-42" fill="white">
-                        <use xlink:href="#path-41"></use>
-                    </mask>
-                    <g id="Mask">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-43)" xlink:href="#path-41"></use>
-                        <use fill="#CCE7FF" fill-rule="evenodd" xlink:href="#path-41"></use>
-                    </g>
-                    <polygon fill="#C7DAF5" mask="url(#mask-42)" points="-2 3 38.3323936 14.7051868 38.3323936 18.5526667 -2 6.6420813"></polygon>
-                </g>
-                <g id="Rectangle-19" transform="translate(2.000000, 148.000000)">
-                    <mask id="mask-45" fill="white">
-                        <use xlink:href="#path-44"></use>
-                    </mask>
-                    <g id="Mask">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-46)" xlink:href="#path-44"></use>
-                        <use fill="#CCE7FF" fill-rule="evenodd" xlink:href="#path-44"></use>
-                    </g>
-                    <polygon fill="#C7DAF5" mask="url(#mask-45)" points="-2 3 38.3323936 14.7051868 38.3323936 18.5526667 -2 6.6420813"></polygon>
-                </g>
-            </g>
-            <g id="checkbox1" transform="translate(226.000000, 215.000000)">
-                <g id="Rectangle-3">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-48)" xlink:href="#path-47"></use>
-                    <use fill="#AFCAF1" fill-rule="evenodd" xlink:href="#path-47"></use>
-                </g>
-                <polygon id="Rectangle-6" fill="#DAEDFE" points="0 2.97608068 67.157901 22.9491399 67.157901 47.1316446 0 27.2960651"></polygon>
-                <g id="Rectangle-6">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-50)" xlink:href="#path-49"></use>
-                    <use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-49"></use>
-                </g>
-            </g>
-            <g id="checkbox3" transform="translate(226.000000, 255.000000)">
-                <g id="Rectangle-3">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-52)" xlink:href="#path-51"></use>
-                    <use fill="#AFCAF1" fill-rule="evenodd" xlink:href="#path-51"></use>
-                </g>
-                <polygon id="Rectangle-6" fill="#DAEDFE" points="0 2.97608068 67.157901 22.9491399 67.157901 47.1316446 0 27.2960651"></polygon>
-                <g id="Rectangle-6">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-54)" xlink:href="#path-53"></use>
-                    <use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-53"></use>
-                </g>
-            </g>
-            <g id="checkbox2-1" transform="translate(315.000000, 241.000000)">
-                <g id="Page-1">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-56)" xlink:href="#path-55"></use>
-                    <use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-55"></use>
-                </g>
-                <path d="M16.5564897,28.0604791 L16.5564897,12.161922 C16.5564897,10.5002434 15.6768818,7.92703578 13.7970747,7.37018727 L2.75941494,4.10180569 C0.762563256,3.50948911 0,5.62515879 0,7.25846288 L0,23.1570201 C0,24.8186986 0.879607848,27.3919062 2.75941494,27.9487548 L13.7970747,31.2171363 C15.7939264,31.8094529 16.5564897,29.6955566 16.5564897,28.0604791 L16.5564897,28.0604791 Z" id="Page-1" fill="#DAEDFE"></path>
-            </g>
-            <g id="checked·" transform="translate(197.000000, 218.000000)">
-                <polygon id="Rectangle-1652" fill="#60ACF3" transform="translate(5.036130, 5.821554) rotate(54.000000) translate(-5.036130, -5.821554) " points="3.07150394 5.54011888 8.20628364 5.13832831 8.20628364 6.22543373 4.88010346 6.38887731 1.86597545 6.50478"></polygon>
-                <path d="M4.24655456,10.2765387 L0.490921008,5.4976418 L2.64581298,3.64312744 L6.56137826,8.6085276 L18.3494265,0.114318847 L20.5877398,3.51043594 L6.79989774,13.7333834 L4.24440697,10.2780862 L4.24655456,10.2765387 Z" id="Combined-Shape" fill="#076CC8"></path>
-                <polygon id="Rectangle-1654" fill="#0B4F8D" points="20.5585902 3.48939907 21.7298006 3.48939907 8.38340048 13.2209998 6.85243598 13.6752435"></polygon>
-                <path d="M18.3115339,2.45578123 L21.6731061,0.125966083 L21.7389422,1.33108044 C21.7389422,1.33108044 19.5200657,2.79478353 18.3115339,3.52434255 L18.3115339,2.45578123 Z" id="Rectangle-1652" fill="#60ACF3" transform="translate(20.025238, 1.825154) rotate(90.000000) translate(-20.025238, -1.825154) "></path>
-            </g>
-            <g id="checkbox4-1" transform="translate(315.000000, 280.000000)">
-                <g id="Page-1">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-58)" xlink:href="#path-57"></use>
-                    <use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-57"></use>
-                </g>
-                <path d="M16.5564897,28.0604791 L16.5564897,12.161922 C16.5564897,10.5002434 15.6768818,7.92703578 13.7970747,7.37018727 L2.75941494,4.10180569 C0.762563256,3.50948911 0,5.62515879 0,7.25846288 L0,23.1570201 C0,24.8186986 0.879607848,27.3919062 2.75941494,27.9487548 L13.7970747,31.2171363 C15.7939264,31.8094529 16.5564897,29.6955566 16.5564897,28.0604791 L16.5564897,28.0604791 Z" id="Page-1" fill="#DAEDFE"></path>
-            </g>
-            <g id="checkbox2" transform="translate(342.000000, 247.000000)">
-                <g id="Rectangle-3">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-60)" xlink:href="#path-59"></use>
-                    <use fill="#AFCAF1" fill-rule="evenodd" xlink:href="#path-59"></use>
-                </g>
-                <polygon id="Rectangle-6" fill="#DAEDFE" points="0 2.97608068 67.157901 22.9491399 67.157901 47.1316446 0 27.2960651"></polygon>
-                <g id="Rectangle-6">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-62)" xlink:href="#path-61"></use>
-                    <use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-61"></use>
-                </g>
-            </g>
-            <g id="checkbox4" transform="translate(343.000000, 287.000000)">
-                <g id="Rectangle-3">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-64)" xlink:href="#path-63"></use>
-                    <use fill="#AFCAF1" fill-rule="evenodd" xlink:href="#path-63"></use>
-                </g>
-                <polygon id="Rectangle-6" fill="#DAEDFE" points="0 2.97608068 67.157901 22.9491399 67.157901 47.1316446 0 27.2960651"></polygon>
-                <g id="Rectangle-6">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-66)" xlink:href="#path-65"></use>
-                    <use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-65"></use>
-                </g>
-            </g>
-            <g id="title" transform="translate(198.000000, 71.000000)">
-                <g id="Group">
-                    <polygon id="Rectangle-6" fill-opacity="0.200000018" fill="#BCC4D1" points="12 11 107.310913 39.2488499 107.310913 71.595787 12 43.3839226"></polygon>
-                    <polygon id="Rectangle-3" fill="#AFCAF1" points="95 31.1094727 107.374659 28 107.374659 60.4360677 95 63.4540845"></polygon>
-                    <polygon id="Rectangle-6" fill="#DAEDFE" points="0 3 95.3109131 31.2488499 95.3109131 63.595787 0 35.3839226"></polygon>
-                    <polygon id="Rectangle-6" fill="#C9E1FB" points="12.370682 0 107 27.9739961 94.6952441 31 0 3.02147635"></polygon>
-                </g>
-            </g>
-            <g id="sidebar" transform="translate(93.000000, 2.000000)">
-                <g id="Path-22">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-68)" xlink:href="#path-67"></use>
-                    <use fill="#0B4F8D" fill-rule="evenodd" xlink:href="#path-67"></use>
-                </g>
-                <path d="M12,3.81983503 L74.0416107,22.0342636 L74.0416107,426.169933 L12,407.258429 L12,3.81983503 Z M12,52 L18,54 L18,262 L12,261.898651 L12,52 Z" id="Combined-Shape" fill="#076CC8"></path>
-                <polygon id="Rectangle-8" fill="#0660B3" points="15.1800817 53.0544141 18 54 18 263 15.1800817 262.147026"></polygon>
-                <polygon id="Rectangle-3" fill="#0B4F8D" points="15.375 261 17.9528975 261.998988 17.9528975 263.729858 12 261.875"></polygon>
-                <polygon id="Rectangle-3" fill="#C0DCF9" points="0.016992598 211.191724 9.40315488 209 15.1196044 210.629393 5.82774904 212.878718"></polygon>
-                <polygon id="Rectangle-7" fill="#DAEDFE" points="0 211.185312 6 212.854036 6 261.264052 0 259.560964"></polygon>
-                <polyline id="Rectangle-7" fill="#AFCAF1" points="15.1651854 210.60354 5.87419034 212.834552 5.7527486 261.297634 15.1651854 258.978624 15.1651854 210.60354"></polyline>
-                <path d="M15,212.736487 C16.264979,212.752321 17.1587333,213.134102 18.0419314,214.040172 L18.0419314,213.797381 L18.0419314,226.281791 L18.0419314,225.46017 C17.2467012,226.682924 16.2948881,227.550288 15,228.222363" id="Page-1" fill="#CCE7FF"></path>
-                <path d="M15,240.736487 C16.264979,240.752321 17.1587333,241.134102 18.0419314,242.040172 L18.0419314,241.797381 L18.0419314,254.281791 L18.0419314,253.46017 C17.2467012,254.682924 16.2948881,255.550288 15,256.222363" id="Page-1" fill="#CCE7FF"></path>
-                <polygon id="Rectangle-3" fill="#60ACF3" points="25.0292358 0.841064453 86.2996979 19.0151405 74.0416107 22.1046448 12 3.79017687"></polygon>
-                <g id="icon3" transform="translate(33.000000, 225.000000)">
-                    <path d="M9.18493393,0.0443408139 C6.15016629,0.492401472 3.73393728,3.38098505 2.44598203,6.76562457 C0.474055685,11.9476834 0.968307898,16.8168137 1.34888466,21.5209195 C1.96400292,29.148681 7.51800337,39.667213 16.1503104,42.2235678 C21.0122524,43.6632691 22.8779302,40.5685516 25.2439966,36.4190848 C27.6720173,32.1619354 27.6505094,28.3533338 27.2714078,23.649228 C26.6548144,16.0199915 22.3451313,3.27788498 13.7128242,0.721530203 C12.279888,0.297214142 10.4531232,-0.142897818 9.18493393,0.0443408139 Z" id="Page-1-Copy-3" fill="#03437E" opacity="0.270000011"></path>
-                    <path d="M10.8090772,0.0196748547 C-1.39550678,5.4102888 2.02272427,29.7952213 12.5781463,38.0567878 C14.9287853,39.8965967 17.6382768,42.197747 20.6031094,42.050499 C18.7107461,42.8983063 18.5096436,42.7489281 14.5053225,41.5383186 C12.6629209,40.9813132 10.9920776,40.0197943 9.49551677,38.775724 C3.80358874,34.044103 0.632722716,25.2252658 0.132785637,19.0291617 C-0.25713421,14.2052451 0.11132216,10.0216555 2.60108559,5.65741503 C4.01379078,3.1792618 5.91131063,1.1172399 8.31459427,0.283046871 C9.17926978,-0.0170867751 10.1934691,0.0141976558 11.1560701,0" id="Page-1" fill="#0B4F8D"></path>
-                </g>
-                <g id="icon1" transform="translate(17.000000, 61.000000)">
-                    <g id="Group-5">
-                        <g id="Stroke-3">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-70)" xlink:href="#path-69"></use>
-                            <use fill="#A3C6EC" fill-rule="evenodd" xlink:href="#path-69"></use>
-                        </g>
-                        <path d="M3.12981112,9.80379482 C0.134395046,15.0557819 -0.309639901,20.0893912 0.15987246,25.8927824 C0.918735464,35.3030476 6.38000135,49.3101664 17.0295608,52.4639064 C23.0276722,54.2400462 28.0103267,51.2992246 30.9293105,46.180084 C33.9247266,40.9280968 34.3687615,35.8944876 33.901069,30.0910964 C33.1403862,20.6790114 27.6791203,6.6737124 17.0295608,3.51997239 C11.0314494,1.74383261 6.04879495,4.68465422 3.12981112,9.80379482 Z" id="Page-1" fill="#E2E9F7"></path>
-                    </g>
-                </g>
-            </g>
-            <g id="icon2" transform="translate(110.000000, 144.000000)">
-                <g id="Group-5">
-                    <g id="Stroke-3">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-72)" xlink:href="#path-71"></use>
-                        <use fill="#A3C6EC" fill-rule="evenodd" xlink:href="#path-71"></use>
-                    </g>
-                    <path d="M3.12981112,9.80379482 C0.134395046,15.0557819 -0.309639901,20.0893912 0.15987246,25.8927824 C0.918735464,35.3030476 6.38000135,49.3101664 17.0295608,52.4639064 C23.0276722,54.2400462 28.0103267,51.2992246 30.9293105,46.180084 C33.9247266,40.9280968 34.3687615,35.8944876 33.901069,30.0910964 C33.1403862,20.6790114 27.6791203,6.6737124 17.0295608,3.51997239 C11.0314494,1.74383261 6.04879495,4.68465422 3.12981112,9.80379482 Z" id="Page-1" fill="#E2E9F7"></path>
-                </g>
-            </g>
-            <g id="man" transform="translate(281.000000, 104.000000)">
-                <g id="鞋子" transform="translate(21.000000, 124.000000)">
-                    <path d="M22.7742091,2.98024586 L28.7742091,2.98024586 L28.7742091,10.0645731 C28.7742091,10.0645731 28.0091137,11.5808013 25.7742091,11.5808013 C23.5393046,11.5808013 22.7742091,10.0645731 22.7742091,10.0645731 L22.7742091,2.98024586 Z" id="Rectangle-17" fill="#FFACAD" transform="translate(25.774209, 7.280524) rotate(10.000000) translate(-25.774209, -7.280524) "></path>
-                    <path d="M3.77420915,0.98024586 L9.77420915,0.98024586 L9.77420915,8.06457308 C9.77420915,8.06457308 9.00911373,9.58080128 6.77420915,9.58080128 C4.53930456,9.58080128 3.77420915,8.06457308 3.77420915,8.06457308 L3.77420915,0.98024586 Z" id="Rectangle-17" fill="#FFACAD" transform="translate(6.774209, 5.280524) rotate(10.000000) translate(-6.774209, -5.280524) "></path>
-                    <path d="M23.7700189,18.4959565 C23.7261817,19.0499152 24.0706124,19.7164204 24.5812584,19.9419643 C24.5812584,19.9419643 27.0658469,21.8058508 29.3045013,18.2928854 C30.4203608,16.5418443 32.8516021,16.0122218 34.314365,15.1440376 C35.7862194,14.2704574 36.2870883,13.0605251 36.5887384,12.0074325 C37.1901754,9.90775222 34.9330221,9.96069158 34.9330221,9.96069158 L30.1129777,11.0236574 C30.1129777,11.0236574 30.1948285,11.5007361 30.3320226,12.3101532 C30.3842407,12.6182289 29.8680036,13.2673156 29.0084362,13.8393364 C27.6370402,14.7519664 25.59562,14.1544363 25.59562,14.1544363 C25.59562,14.1544363 25.0759987,14.6130603 24.7061251,14.2128342 C24.3362515,13.812608 24.102315,14.2968164 24.102315,14.2968164 L23.7700189,18.4959565 Z" id="Path-3" fill="#C7DAF5" transform="translate(30.228455, 15.198282) rotate(19.000000) translate(-30.228455, -15.198282) "></path>
-                    <path d="M1.70635126,14.4875264 C1.69860524,15.0405926 2.07229351,15.7063744 2.58293949,15.9319182 C2.58293949,15.9319182 5.06752802,17.7958048 7.30618239,14.2828394 C8.42204189,12.5317983 10.8532832,12.0021758 12.3160461,11.1339915 C13.7879005,10.2604113 14.2887695,9.05047906 14.5904196,7.99738648 C15.1918566,5.89770617 12.9347032,5.95064553 12.9347032,5.95064553 L8.10114981,7.16653886 C8.10114981,7.16653886 8.39708186,9.17988268 6.83873774,9.93129268 C5.28039361,10.6827027 3.530486,10.1119463 3.530486,10.1119463 C3.530486,10.1119463 2.69022362,9.56452146 2.45515389,9.34125176 C2.22008417,9.11798206 2.45515389,9.34125176 2.45515389,9.34125176 C2.08140847,9.34125177 1.77223568,9.78337845 1.76440251,10.3426667 L1.70635126,14.4875264 Z" id="Path-3" fill="#3E0F3F" transform="translate(8.199279, 11.188236) rotate(19.000000) translate(-8.199279, -11.188236) "></path>
-                    <path d="M20.6927047,16.4798039 C20.6927047,17.0358848 21.0726724,17.7041105 21.5833183,17.9296544 C21.5833183,17.9296544 24.0679069,19.7935409 26.3065612,16.2805755 C27.4224207,14.5295344 29.853662,13.9999119 31.316425,13.1317277 C32.7882793,12.2581475 33.2891483,11.0482152 33.5907984,9.99512261 C34.1922354,7.8954423 31.9350821,7.94838166 31.9350821,7.94838166 L27.1150377,9.01134748 C27.1150377,9.01134748 27.1968885,9.48842615 27.3340826,10.2978433 C27.3863007,10.605919 26.8700635,11.2550057 26.0104961,11.8270264 C24.6391001,12.7396564 22.59768,12.1421264 22.59768,12.1421264 C22.59768,12.1421264 21.7524905,11.6552318 21.3826169,11.2550057 C21.0127434,10.8547795 20.6927047,11.5511954 20.6927047,11.5511954 L20.6927047,16.4798039 Z" id="Path-3" fill="#613F62" transform="translate(27.192705, 13.185972) rotate(19.000000) translate(-27.192705, -13.185972) "></path>
-                </g>
-                <g id="下半身" transform="translate(24.000000, 61.000000)">
-                    <path d="M3.97348091,35.8497366 C2.34956432,26.400557 0,7.00925805 0,7.00925805 L13.0321022,11.6503649 C13.0321022,11.6503649 13.7391421,26.8058403 14.1860792,35.2425241 C14.734544,45.595712 17.1722848,65.7984672 17.1722848,65.7984672 C17.1722848,65.7984672 16.4231357,68.2344309 13.444825,68.2344309 C11.2466274,68.2344309 9.91577321,66.9074514 9.36940221,66.2122961 C9.17550188,65.965594 9.08040349,65.7984672 9.08040349,65.7984672 C9.08040349,65.7984672 5.71789227,46.0000461 3.97348091,35.8497366 Z" id="Rectangle-16" fill="#004183" transform="translate(8.586142, 37.621844) scale(-1, 1) translate(-8.586142, -37.621844) "></path>
-                    <path d="M1,5.10374928 C1,1.05689979 2.75070465,0 2.75070465,0 L32.6036467,8.3949317 L31.8340797,20.4593716 L4,11.7047234 C4,11.7047234 1,9.15059876 1,5.10374928 Z" id="Rectangle-14-Copy" fill="#095DBF"></path>
-                    <path d="M14.9038787,6 C14.9038787,6 13.8032567,8.02548415 14.0310389,10.2576733 C14.1250765,11.1792104 14.4455233,12.1359777 15.1632932,13" id="Path-2" stroke="#267BDE" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"></path>
-                    <g id="Path-10" transform="translate(17.000000, 7.000000)">
-                        <mask id="mask-74" fill="white">
-                            <use xlink:href="#path-73"></use>
-                        </mask>
-                        <use id="Mask" fill="#095DBF" transform="translate(8.178492, 30.810524) scale(-1, 1) translate(-8.178492, -30.810524) " xlink:href="#path-73"></use>
-                        <polygon id="Rectangle-5" fill="#0A57B2" mask="url(#mask-74)" points="13.5496529 28.1789711 13.5496529 -1 16.4824928 -0.0527771115 16.4824931 28.7343892 10.4490563 60.4088554 7.75643292 62.2039375"></polygon>
-                        <polyline stroke="#267BDE" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" mask="url(#mask-74)" points="13.4135465 0.875698903 13.597349 28.1937288 7.48305925 61.9805001"></polyline>
-                    </g>
-                </g>
-                <g id="上半身" transform="translate(0.000000, 21.000000)">
-                    <path d="M12.0410227,37.9552057 L22.59781,27.4988081 L26.7440413,11 C26.7440413,11 27.3791216,12.3117836 31.1281182,12.3117836 C34.8771147,12.3117836 34.2606313,12.3117836 34.2606313,12.3117836 L28.6320548,29.3399718 C28.2844569,30.3915632 27.2684431,31.7562232 26.3617752,32.3908971 L14.0131704,41.035008 C14.02288,41.7415503 13.8050846,42.4449476 13.3784498,43.0297345 C13.3779697,43.0304122 13.3776123,43.0311446 13.377078,43.0318616 L13.3705205,43.0406338 C13.3533007,43.0639762 13.3358261,43.0871956 13.3178708,43.1102091 L10.1164762,47.345179 C9.88171485,47.6860467 9.39663987,47.7878077 9.05645015,47.5555054 C8.7162755,47.32311 8.64976284,46.8445946 8.88454903,46.5036471 L10.2848744,44.3972614 C10.3433165,44.3098304 10.2927286,44.3149533 10.230753,44.3607006 L7.0791598,47.3804338 C6.79243741,47.6791427 6.29964865,47.7045626 6.00193968,47.4200415 C5.70424649,47.1355705 5.71437052,46.6489148 6.0011486,46.3500832 L8.60114638,43.6413518 C8.6466503,43.5978502 8.60666579,43.5694134 8.56469718,43.6046532 L4.72585979,46.3755833 C4.39070937,46.6190844 3.92292529,46.5464471 3.68091095,46.2133429 C3.43889662,45.8802388 3.51436766,45.4129035 3.84951808,45.1694025 L7.52858211,42.2382786 C7.62194192,42.1608915 7.56893825,42.1143929 7.4773306,42.1412822 L4.19163573,43.7699435 C3.82980422,43.971396 3.35554137,43.8566662 3.15582627,43.4966939 C2.95597881,43.1366533 3.10634789,42.6676409 3.46822379,42.4661355 L7.51922159,40.2105611 C7.79441733,40.0571932 8.2245189,39.8104558 8.27465218,39.6075921 C8.35045361,39.3014621 8.1454667,39.0203185 7.74091008,38.9572784 L6.18601378,38.7158534 C5.6420128,38.6314026 5.33469446,38.1485574 5.42241854,37.6051108 C5.51018254,37.0614914 5.95986202,36.6631523 6.50387277,36.7476166 C6.50387277,36.7476166 10.2450569,37.1897033 11.1053243,37.5510707 L11.1054176,37.5510851 C11.4283192,37.6457185 11.7438189,37.7829579 12.0410227,37.9552057 Z" id="Combined-Shape" fill="#F0F3F6"></path>
-                    <path d="M9.0410227,32.9552057 L19.59781,22.4988081 L23.7440413,6 C23.7440413,6 24.3791216,7.31178355 28.1281182,7.31178355 C31.8771147,7.31178355 31.2606313,7.31178355 31.2606313,7.31178355 L25.6320548,24.3399718 C25.2844569,25.3915632 24.2684431,26.7562232 23.3617752,27.3908971 L11.0131704,36.035008 C11.02288,36.7415503 10.8050846,37.4449476 10.3784498,38.0297345 C10.3779697,38.0304122 10.3776123,38.0311446 10.377078,38.0318616 L10.3705205,38.0406338 C10.3533007,38.0639762 10.3358261,38.0871956 10.3178708,38.1102091 L7.11647619,42.345179 C6.88171485,42.6860467 6.39663987,42.7878077 6.05645015,42.5555054 C5.7162755,42.32311 5.64976284,41.8445946 5.88454903,41.5036471 L7.28487442,39.3972614 C7.34331648,39.3098304 7.29272862,39.3149533 7.23075303,39.3607006 L4.0791598,42.3804338 C3.79243741,42.6791427 3.29964865,42.7045626 3.00193968,42.4200415 C2.70424649,42.1355705 2.71437052,41.6489148 3.0011486,41.3500832 L5.60114638,38.6413518 C5.6466503,38.5978502 5.60666579,38.5694134 5.56469718,38.6046532 L1.72585979,41.3755833 C1.39070937,41.6190844 0.922925291,41.5464471 0.680910954,41.2133429 C0.438896616,40.8802388 0.51436766,40.4129035 0.849518076,40.1694025 L4.52858211,37.2382786 C4.62194192,37.1608915 4.56893825,37.1143929 4.4773306,37.1412822 L1.19163573,38.7699435 C0.829804215,38.971396 0.35554137,38.8566662 0.155826269,38.4966939 C-0.0440211873,38.1366533 0.106347885,37.6676409 0.468223791,37.4661355 L4.51922159,35.2105611 C4.79441733,35.0571932 5.2245189,34.8104558 5.27465218,34.6075921 C5.35045361,34.3014621 5.1454667,34.0203185 4.74091008,33.9572784 L3.18601378,33.7158534 C2.6420128,33.6314026 2.33469446,33.1485574 2.42241854,32.6051108 C2.51018254,32.0614914 2.95986202,31.6631523 3.50387277,31.7476166 C3.50387277,31.7476166 7.24505686,32.1897033 8.10532429,32.5510707 L8.10541755,32.5510851 C8.42831921,32.6457185 8.74381894,32.7829579 9.0410227,32.9552057 Z" id="Combined-Shape" fill="#FFADAE"></path>
-                    <path d="M79.4187854,11.1021761 L70.8109823,17.3392678 L55.6891321,8.07840842 C55.6891321,8.07840842 55.6398194,8.35807478 54.988813,12.0501156 C54.3378066,15.7421565 53,15.7749743 53,15.7749743 L69.7515272,24.0468342 C70.749787,24.5397723 72.2097055,24.3308544 73.0275442,23.5877077 L82.2493049,15.2081571 C82.2822299,15.2211727 82.3013513,15.2275772 82.3040585,15.2271986 L85.023687,14.2190485 C85.9534804,13.6023712 85.9548168,12.5081181 86.0063196,12.4893921 C86.0063196,12.4893921 86.4107684,10.4982602 85.4152023,9.19157971 C84.4196362,7.88489923 83.7525736,8.03309232 83.7525736,8.03309232 C83.7111586,8.05784814 82.4416163,8.74158976 82.2716101,8.69245976 C81.968593,8.60504069 82.1239261,8.41965901 82.2716101,8.03778267 L82.6614408,7.60665972 C82.8603047,7.09331563 82.8483335,6.52143335 82.333833,6.32568137 C81.8191628,6.12987753 80.7103216,7.10907907 79.9877071,7.97895643 C79.456529,8.61838422 79.5793333,9.95405986 79.5296549,10.346326 C79.4699828,10.5917504 79.433186,10.8455661 79.4187854,11.1021761 Z" id="Combined-Shape" fill="#FFACAD"></path>
-                    <g id="Rectangle-15" transform="translate(26.000000, 35.000000)">
-                        <mask id="mask-76" fill="white">
-                            <use xlink:href="#path-75"></use>
-                        </mask>
-                        <g id="Mask">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-77)" xlink:href="#path-75"></use>
-                            <use fill="#FEFFFF" fill-rule="evenodd" xlink:href="#path-75"></use>
-                        </g>
-                        <rect fill="#EAF1F1" mask="url(#mask-76)" x="28" y="7" width="4" height="8"></rect>
-                    </g>
-                    <g id="Rectangle-25" transform="translate(20.000000, 0.000000)">
-                        <mask id="mask-79" fill="white">
-                            <use xlink:href="#path-78"></use>
-                        </mask>
-                        <use id="Mask" fill="#7C8DA2" xlink:href="#path-78"></use>
-                        <g id="Group-14" mask="url(#mask-79)" fill="#587397" opacity="0.392140858">
-                            <g transform="translate(18.762683, 18.934256) rotate(9.000000) translate(-18.762683, -18.934256) translate(10.762683, 14.934256)">
-                                <polygon id="Fill-1" points="12.43302 7.17390524 15.8898921 3.70061315 12.43302 0.227272727 11.3958333 1.26944564 13.8157753 3.70080649 11.3958333 6.13186122"></polygon>
-                                <polygon id="Fill-2" points="3.45687208 0.227272727 3.69482223e-13 3.7005487 3.45687208 7.17382468 4.49405879 6.13171621 2.07411684 3.70035536 4.49405879 1.26936508"></polygon>
-                                <polygon id="Fill-3" points="10.2916667 0.205618247 6.98740672 7.84705418 5.79166667 7.64150038 9.09595216 -3.49942297e-13"></polygon>
-                            </g>
-                        </g>
-                        <path d="M34,15.0118886 C34,15.0118886 34.9849597,17.2821649 35.4304006,17.6551811 C35.9097756,18.0566141 36.7744477,18.416808 36.7744477,18.416808 L38,46 L34,46 L34,15.0118886 Z" fill="#6B819D" mask="url(#mask-79)"></path>
-                    </g>
-                    <path d="M54.3086113,6.80317972 C54.3086113,6.80317972 56.1500559,6.14752551 57.8128552,7.37989855 C59.4756544,8.6122716 65.0966039,12.5232687 65.0966039,12.5232687 C65.5498581,12.8391496 65.7408275,13.5048742 65.5216636,14.0136474 L62.5495905,20.9131017 C62.3310903,21.4203343 61.7718058,21.5928762 61.3029496,21.300081 L57.0695788,18.6563909 L54.3086113,15.089455 L54.3086113,6.80317972 Z" id="Path-9" fill="#7C8DA2"></path>
-                </g>
-                <g id="Rectangle-1456" transform="translate(40.711648, 20.643433) scale(-1, 1) translate(-40.711648, -20.643433) ">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-81)" xlink:href="#path-80"></use>
-                    <use fill="#FF9EA2" fill-rule="evenodd" xlink:href="#path-80"></use>
-                </g>
-                <g id="头" transform="translate(38.988985, 11.083815) scale(-1, 1) translate(-38.988985, -11.083815) translate(28.988985, 0.583815)">
-                    <path d="M1,8.83136671 C1,4.50622231 4.51216539,1 8.82499981,1 L8.82499981,1 C13.1466279,1 16.6499996,4.50396035 16.6499996,8.83113908 L16.6499996,10.2335106 L16.6499996,12.6313763 C16.6499996,16.9554964 13.1378342,20.4608884 8.82499981,20.4608884 L8.82499981,20.4608884 C4.50337175,20.4608884 1,16.9591955 1,12.6295217 L1,8.83136671 Z" id="Mask" fill="#FFACAD"></path>
-                    <g id="眼镜" transform="translate(15.039748, 10.695366) rotate(-23.000000) translate(-15.039748, -10.695366) translate(11.039748, 8.195366)" stroke="#98B1CA" stroke-width="0.5">
-                        <path d="M6.58972497,-7.54951657e-13 C6.58972497,-7.54951657e-13 7.71474038,0.581779033 7.71474041,2.39983903 C7.71474045,4.21789903 6.41996411,5.17627659 4.9640618,4.30360794" id="Path-5"></path>
-                        <path d="M0.60663877,1.9140498 L7.61773793,2.50485608" id="Path-6" stroke-linecap="round" stroke-linejoin="bevel"></path>
-                    </g>
-                    <path d="M1,6.19138193 C1.30101,6.19138181 3.20160069,3.44330858 3.20160069,3.44330858 L2.23836866,3.20250057 L3.5026107,2.84128856 C3.5026107,2.84128856 7.11919843,-0.530023559 11.2084669,0.0719964876 C15.2977354,0.674016534 16.5619769,3.68411658 16.5619769,3.68411658 L16.7425829,2.48007655 C16.7425829,2.48007655 17.4650072,4.34633848 17.1037949,5.30957063 C16.9321934,5.76717453 16.3872486,6.56759978 14.8996878,7.02071905 C13.2560112,7.52139203 10.4834557,7.58324242 10.4834557,7.58324242 L10.4834561,5.0617077 C10.4834561,5.0617077 9.3498295,6.00075683 7.30296135,6.42217064 C5.25609319,6.84358445 2.23836868,6.6269598 2.23836868,6.6269598" id="Path-7" fill="#375576" transform="translate(9.102467, 3.791621) scale(-1, 1) translate(-9.102467, -3.791621) "></path>
-                    <path d="M7.81226324,4.37166433 C8.92609023,4.60040207 11.3212223,6.31943394 11.3212223,6.31943394 L10.878032,11.1401147 L10.878032,17.2920207 L6.31204298,18.5299749 L5.8991225,17.4749221 L5.8991225,18.5299749 L4.32666901,18.981302 C4.32666901,18.981302 2.38678349,18.2311575 1.27866581,15.3333825 C0.42531037,13.1018217 0.218495667,8.95274544 0.826813149,6.85742976 C2.22505629,2.04125913 1.83665543,4.37166432 1.83665543,4.37166432 C1.83665543,4.37166432 5.76456794,3.95114553 7.81226324,4.37166433 Z" id="Path-8" fill="#375576"></path>
-                    <path d="M11,16 C12.1045695,16 11.3236227,15.9542812 11.3236227,14.5357995 C11.3236227,13.1173178 12.1045695,11 11,11 C9.8954305,11 9,12.1192881 9,13.5 C9,14.8807119 9.8954305,16 11,16 Z" id="Oval-2" fill="#FF9EA2"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/examples/assets/images/button-d-cn.png b/examples/assets/images/button-d-cn.png
new file mode 100644
index 0000000000..a3afa111a8
Binary files /dev/null and b/examples/assets/images/button-d-cn.png differ
diff --git a/examples/assets/images/button-d-en.png b/examples/assets/images/button-d-en.png
new file mode 100644
index 0000000000..5210474187
Binary files /dev/null and b/examples/assets/images/button-d-en.png differ
diff --git a/examples/assets/images/button-l-cn.png b/examples/assets/images/button-l-cn.png
new file mode 100644
index 0000000000..e334448d86
Binary files /dev/null and b/examples/assets/images/button-l-cn.png differ
diff --git a/examples/assets/images/button-l-en.png b/examples/assets/images/button-l-en.png
new file mode 100644
index 0000000000..d368df9ddf
Binary files /dev/null and b/examples/assets/images/button-l-en.png differ
diff --git a/examples/assets/images/cloud-1.png b/examples/assets/images/cloud-1.png
new file mode 100644
index 0000000000..1f221b5d62
Binary files /dev/null and b/examples/assets/images/cloud-1.png differ
diff --git a/examples/assets/images/cloud-2.png b/examples/assets/images/cloud-2.png
new file mode 100644
index 0000000000..651f30ef73
Binary files /dev/null and b/examples/assets/images/cloud-2.png differ
diff --git a/examples/assets/images/compo-1.png b/examples/assets/images/compo-1.png
new file mode 100644
index 0000000000..6264c030f9
Binary files /dev/null and b/examples/assets/images/compo-1.png differ
diff --git a/examples/assets/images/compo-2.png b/examples/assets/images/compo-2.png
new file mode 100644
index 0000000000..202dbdec63
Binary files /dev/null and b/examples/assets/images/compo-2.png differ
diff --git a/examples/assets/images/compo-3.png b/examples/assets/images/compo-3.png
new file mode 100644
index 0000000000..c018f4f87f
Binary files /dev/null and b/examples/assets/images/compo-3.png differ
diff --git a/examples/assets/images/dialog-close.png b/examples/assets/images/dialog-close.png
new file mode 100644
index 0000000000..c810eafe46
Binary files /dev/null and b/examples/assets/images/dialog-close.png differ
diff --git a/examples/assets/images/duohui.svg b/examples/assets/images/duohui.svg
new file mode 100644
index 0000000000..f395bfa965
--- /dev/null
+++ b/examples/assets/images/duohui.svg
@@ -0,0 +1,24 @@
+<svg width="98" height="150" viewBox="0 0 98 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<title>duohui-element</title>
+<desc>Created using Figma</desc>
+<g id="Canvas" transform="translate(-2216 140)">
+<clipPath id="clip-0" clip-rule="evenodd">
+<path d="M 2216 -140L 2314 -140L 2314 10L 2216 10L 2216 -140Z" fill="#FFFFFF"/>
+</clipPath>
+<g id="duohui-element" clip-path="url(#clip-0)">
+<path d="M 2216 -140L 2314 -140L 2314 10L 2216 10L 2216 -140Z" fill="#FFFFFF"/>
+<g id="Duohui Icon 2">
+<g id="Vector">
+<use xlink:href="#path0_fill" transform="matrix(1.26636 0 0 1.21929 2230 -75.7038)" fill="#3A88FD"/>
+</g>
+<g id="Vector">
+<use xlink:href="#path1_fill" transform="matrix(1.41534 0 0 1.21834 2226 -112)" fill="#35AFFB"/>
+</g>
+</g>
+</g>
+</g>
+<defs>
+<path id="path0_fill" fill-rule="evenodd" d="M 25.7722 1.00635C 26.2 0.374983 26.8949 -2.6613e-07 27.6349 -2.6613e-07C 28.3755 -2.6613e-07 29.0699 0.374983 29.4983 1.00635C 34.409 8.24964 47.798 27.9964 54.5986 38.0262C 55.3878 39.1901 55.4896 40.7162 54.8623 41.983C 54.235 43.2498 52.9833 44.0452 51.6178 44.0452C 39.6694 44.0452 15.601 44.0452 3.6521 44.0452C 2.28712 44.0452 1.03545 43.2498 0.408173 41.983C -0.219106 40.7162 -0.117353 39.1901 0.671804 38.0262C 7.47242 27.9964 20.8609 8.24964 25.7722 1.00635Z"/>
+<path id="path1_fill" fill-rule="evenodd" d="M 24.9939 1.44703C 25.6137 0.533117 26.5572 -3.01614e-07 27.5551 -3.01614e-07C 28.5535 -3.01614e-07 29.497 0.533117 30.1168 1.44703C 35.4674 9.33854 47.8725 27.6342 54.4043 37.2681C 55.1825 38.4157 55.3299 39.982 54.7847 41.2999C 54.2389 42.6185 53.096 43.4556 51.8426 43.4556C 39.9023 43.4556 15.2084 43.4556 3.26811 43.4556C 2.01471 43.4556 0.871739 42.6185 0.325978 41.2999C -0.219783 39.982 -0.0717813 38.4157 0.70639 37.2681C 7.23818 27.6342 19.6433 9.33854 24.9939 1.44703Z"/>
+</defs>
+</svg>
diff --git a/examples/assets/images/duotai.svg b/examples/assets/images/duotai.svg
new file mode 100644
index 0000000000..e8735a0f91
--- /dev/null
+++ b/examples/assets/images/duotai.svg
@@ -0,0 +1,16 @@
+<svg width="63" height="59" viewBox="0 0 63 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="Canvas" fill="none">
+<g id="duotai-icon">
+<g id="Rectangle">
+<rect width="41.1402" height="42.1429" transform="translate(21.5987 16.8571)" fill="#FF7262"/>
+</g>
+<g id="Vector 2">
+<path d="M 0 25.2857L 21.5986 0L 43.1972 25.2857L 0 25.2857Z" transform="translate(0 33.7142)" fill="#0ACF83"/>
+</g>
+<g id="Ellipse">
+<ellipse cx="16.4561" cy="16.8572" rx="16.4561" ry="16.8572" transform="translate(5.14249 0)" fill="#1ABCFE"/>
+</g>
+</g>
+</g>
+</svg>
+
diff --git a/examples/assets/images/element-logo-small.svg b/examples/assets/images/element-logo-small.svg
index 6319a87e9b..9e185f5747 100644
--- a/examples/assets/images/element-logo-small.svg
+++ b/examples/assets/images/element-logo-small.svg
@@ -5,7 +5,7 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="v2.2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="首页-默认效果-copy-2" transform="translate(-70.000000, -19.000000)" fill="#FFFFFF">
+        <g id="首页-默认效果-copy-2" transform="translate(-70.000000, -19.000000)" fill="#409EFF">
             <path d="M212.135441,45.1578077 Z M103.416502,46.2175511 C103.407008,47.7945682 102.587841,48.1463474 102.587841,48.1463474 C102.587841,48.1463474 88.4520478,56.3145087 87.5329956,56.8262751 C86.622336,57.2171561 86.0136703,56.8262751 86.0136703,56.8262751 C86.0136703,56.8262751 71.2225706,48.2479572 70.6826962,47.8708444 C70.1426843,47.4937316 70.1301643,46.9063774 70.1301643,46.9063774 C70.1301643,46.9063774 70.1450232,29.9199174 70.1301643,29.1333364 C70.1153053,28.3466177 71.0969576,27.7555461 71.0969576,27.7555461 L85.8755373,19.2134387 C86.7853714,18.7332016 87.6711286,19.2134387 87.6711286,19.2134387 C87.6711286,19.2134387 100.726623,26.8020937 102.173442,27.6177257 C103.591507,28.2919577 103.416502,29.6843424 103.416502,29.6843424 C103.416502,29.6843424 103.425307,44.7519192 103.416502,46.2175511 L103.416502,46.2175511 Z M97.5160105,29.1691339 C94.4900173,27.4274483 87.3615842,23.2971063 87.3615842,23.2971063 C87.3615842,23.2971063 86.6661039,22.9212326 85.9517747,23.2971063 L74.3487406,29.98215 C74.3487406,29.98215 73.5780025,30.4449014 73.589697,31.0604805 C73.6013915,31.6760597 73.589697,44.9698708 73.589697,44.9698708 C73.589697,44.9698708 73.5994654,45.4295932 74.0234951,45.7246472 C74.4473873,46.0197011 86.0601898,52.7332451 86.0601898,52.7332451 C86.0601898,52.7332451 86.538152,53.0391759 87.2530315,52.7332451 C87.9746526,52.3327262 99.0730335,45.9402582 99.0730335,45.9402582 C99.0730335,45.9402582 99.7162325,45.6648929 99.7236619,44.4307056 C99.7257257,44.0747959 99.7265512,42.6932881 99.7266887,40.9575229 L86.6600502,48.8752394 L86.6600502,45.846221 C86.6600502,44.6021205 87.6231289,43.7809811 87.6231289,43.7809811 L99.1807607,36.8165793 C99.6168978,36.3611251 99.7068768,35.6315447 99.7254505,35.3556287 C99.7250378,34.0904627 99.7244874,32.9852841 99.7240747,32.2851678 L86.6600502,40.2012321 L86.6600502,37.034531 C86.6600502,35.7904305 87.4855462,35.2446564 87.4855462,35.2446564 L97.5160105,29.1691339 Z" id="Shape-Copy"></path>
         </g>
     </g>
diff --git a/examples/assets/images/element-logo.svg b/examples/assets/images/element-logo.svg
index 825acba02b..8cd2c6d38b 100644
--- a/examples/assets/images/element-logo.svg
+++ b/examples/assets/images/element-logo.svg
@@ -5,7 +5,7 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="v2.2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="首页-默认效果-copy-2" transform="translate(-70.000000, -19.000000)" fill="#FFFFFF">
+        <g id="首页-默认效果-copy-2" transform="translate(-70.000000, -19.000000)" fill="#409EFF">
             <path d="M212.135441,45.1578077 C212.135441,45.1578077 212.420237,45.1505105 212.960937,45.1578077 C213.501637,45.1651049 213.648851,45.5708556 213.648851,45.5708556 C213.648851,45.5708556 214.733828,47.5665657 215.024677,48.0491434 C215.283608,48.4787133 214.973221,48.4708654 214.901816,48.4638436 C214.902504,48.4628798 214.887095,48.4621914 214.887095,48.4621914 C214.887095,48.4621914 214.893011,48.4630175 214.901816,48.4638436 C214.898652,48.4682495 214.594731,48.4783003 211.447528,48.4621914 C207.058641,47.8665762 206.9073,43.9186638 206.9073,43.9186638 L206.9073,36.8968483 L204.430812,36.8968483 L204.430812,34.2808779 C204.430812,33.9242798 204.84356,33.8678299 204.84356,33.8678299 L206.9073,33.8678299 L206.9073,31.2518594 C206.9073,30.8251809 207.320048,30.7011288 207.320048,30.7011288 C207.320048,30.7011288 208.772646,30.2858779 209.617816,30.0441072 C209.964662,29.9449756 210.071701,30.1503982 210.071701,30.1503982 C210.071701,30.1503982 210.209284,30.0774264 210.209284,30.3927196 L210.209284,34.0055125 L213.786433,34.0055125 C214.134655,34.0055125 214.199181,34.4185605 214.199181,34.4185605 L214.199181,37.034531 L210.209284,37.034531 L210.209284,43.0925678 C210.209284,44.8533913 212.135441,45.1578077 212.135441,45.1578077 L212.135441,45.1578077 Z M201.541576,48.1868261 L199.340253,48.1868261 C198.908381,48.1868261 198.927505,47.6360955 198.927505,47.6360955 L198.927505,37.4475789 C198.927505,36.8286954 198.102009,36.621483 198.102009,36.621483 L193.561781,36.621483 C192.884462,36.621483 192.873868,37.4475789 192.873868,37.4475789 L192.873868,47.7737781 C192.873868,48.1787028 192.46112,48.1868261 192.46112,48.1868261 L190.259797,48.1868261 C189.775782,48.1868261 189.847049,47.6360955 189.847049,47.6360955 L189.847049,34.8316085 C189.847049,33.803119 191.085293,33.5924646 191.085293,33.5924646 L200.71608,33.5924646 C201.677783,33.5924646 201.954324,34.8316085 201.954324,34.8316085 L201.954324,47.4984128 C201.954324,48.2186308 201.541576,48.1868261 201.541576,48.1868261 L201.541576,48.1868261 Z M185.857152,42.4041546 L177.327027,42.4041546 L177.327027,44.4693944 C177.327027,45.2135691 178.290106,45.433173 178.290106,45.433173 L185.169239,45.433173 C185.658758,45.433173 185.994735,45.846221 185.994735,45.846221 C185.994735,45.846221 186.595008,47.0951403 186.820231,47.6360955 C187.045454,48.1770506 186.407483,48.1868261 186.407483,48.1868261 L176.088783,48.1868261 C174.846136,48.1868261 174.575374,46.6723169 174.575374,46.6723169 L174.575374,34.9692911 C174.575374,34.2962983 175.538452,34.0055125 175.538452,34.0055125 L185.857152,34.0055125 C186.894113,34.0055125 187.095396,35.2446564 187.095396,35.2446564 L187.095396,41.1650107 C187.095396,42.1638983 185.857152,42.4041546 185.857152,42.4041546 L185.857152,42.4041546 Z M184.343743,37.4475789 C184.343743,37.4475789 184.257066,36.7591657 183.65583,36.7591657 L178.01494,36.7591657 C178.01494,36.7591657 177.327027,36.9437981 177.327027,37.4475789 L177.327027,38.9620882 C177.327027,38.9620882 177.346839,39.6505014 178.01494,39.6505014 L183.65583,39.6505014 C183.65583,39.6505014 184.343743,39.4804634 184.343743,38.8244055 L184.343743,37.4475789 L184.343743,37.4475789 Z M171.410972,48.1868261 L169.20965,48.1868261 C168.919213,48.1868261 168.796902,47.7737781 168.796902,47.7737781 L168.796902,37.4475789 C168.796902,36.8072169 167.971406,36.621483 167.971406,36.621483 L165.907666,36.621483 C165.331882,36.621483 165.219752,37.4475789 165.219752,37.4475789 L165.219752,47.7737781 C165.219752,48.1163326 164.807004,48.1868261 164.807004,48.1868261 L162.605682,48.1868261 C162.29956,48.1868261 162.192934,47.7737781 162.192934,47.7737781 L162.192934,37.4475789 C162.192934,36.7928979 161.367438,36.621483 161.367438,36.621483 L159.303698,36.621483 C158.673982,36.621483 158.615784,37.4475789 158.615784,37.4475789 L158.615784,47.7737781 C158.615784,48.2157395 158.203036,48.1868261 158.203036,48.1868261 L156.001714,48.1868261 C155.589378,48.1868261 155.588966,47.7737781 155.588966,47.7737781 L155.588966,34.6939258 C155.588966,33.9362582 156.689627,33.5924646 156.689627,33.5924646 L170.447894,33.5924646 C171.55227,33.5924646 171.82372,34.9692911 171.82372,34.9692911 L171.82372,47.7737781 C171.82372,48.249334 171.410972,48.1868261 171.410972,48.1868261 L171.410972,48.1868261 Z M151.461486,42.4041546 L142.93136,42.4041546 L142.93136,44.4693944 C142.93136,45.2135691 143.894439,45.433173 143.894439,45.433173 L150.773572,45.433173 C151.263092,45.433173 151.599068,45.846221 151.599068,45.846221 C151.599068,45.846221 152.199204,47.0951403 152.424564,47.6360955 C152.649787,48.1770506 152.011816,48.1868261 152.011816,48.1868261 L141.693117,48.1868261 C140.45047,48.1868261 140.179707,46.6723169 140.179707,46.6723169 L140.179707,34.9692911 C140.179707,34.2962983 141.142786,34.0055125 141.142786,34.0055125 L151.461486,34.0055125 C152.498446,34.0055125 152.69973,35.2446564 152.69973,35.2446564 L152.69973,41.1650107 C152.69973,42.1638983 151.461486,42.4041546 151.461486,42.4041546 L151.461486,42.4041546 Z M149.948076,37.4475789 C149.948076,37.4475789 149.861399,36.7591657 149.260163,36.7591657 L143.619274,36.7591657 C143.619274,36.7591657 142.93136,36.9437981 142.93136,37.4475789 L142.93136,38.9620882 C142.93136,38.9620882 142.951172,39.6505014 143.619274,39.6505014 L149.260163,39.6505014 C149.260163,39.6505014 149.948076,39.4804634 149.948076,38.8244055 L149.948076,37.4475789 L149.948076,37.4475789 Z M138.115967,48.1868261 L132.887826,48.1868261 C132.887826,48.1868261 129.061927,48.0061865 128.760346,44.1940291 C128.748239,40.2790228 128.760346,28.0851583 128.760346,28.0851583 L131.236834,28.0851583 C131.236834,28.0851583 132.06233,28.0701509 132.06233,28.9112543 L132.06233,43.3679331 C132.06233,43.3679331 132.350015,44.5638447 133.988487,45.020125 C135.8398,45.0107626 136.18981,45.020125 136.18981,45.020125 C136.18981,45.020125 136.907303,44.790195 137.428054,45.7085383 C137.948804,46.6268816 138.528715,47.6360955 138.528715,47.6360955 C138.528715,47.6360955 138.61154,48.1868261 138.115967,48.1868261 L138.115967,48.1868261 Z M111.562513,47.3607302 L111.562513,29.1866196 C111.562513,28.380763 112.250426,28.222841 112.250426,28.222841 L125.183197,28.222841 C125.906469,28.222841 125.595945,29.0489369 125.595945,29.0489369 C125.595945,29.0489369 125.192827,30.166094 124.908031,30.7011288 C124.623235,31.2361636 124.082535,31.2518594 124.082535,31.2518594 L115.689993,31.2518594 C114.908523,31.2518594 114.864497,31.9402727 114.864497,31.9402727 L114.864497,36.4838003 L124.357701,36.4838003 C124.914635,36.4838003 124.632866,37.1722136 124.632866,37.1722136 C124.632866,37.1722136 123.921839,38.6889258 123.669787,39.0997708 C123.417736,39.5106159 122.844291,39.5128188 122.844291,39.5128188 L114.864497,39.5128188 L114.864497,44.3317117 C114.864497,44.988458 115.55241,45.1578077 115.55241,45.1578077 L124.357701,45.1578077 C124.996222,45.1578077 125.183197,45.5708556 125.183197,45.5708556 C125.183197,45.5708556 126.055196,46.9323994 126.421441,47.4984128 C126.787823,48.0644262 126.283858,48.1868261 126.283858,48.1868261 L112.388009,48.1868261 C111.814151,48.1868261 111.562513,47.3607302 111.562513,47.3607302 Z M103.416502,46.2175511 C103.407008,47.7945682 102.587841,48.1463474 102.587841,48.1463474 C102.587841,48.1463474 88.4520478,56.3145087 87.5329956,56.8262751 C86.622336,57.2171561 86.0136703,56.8262751 86.0136703,56.8262751 C86.0136703,56.8262751 71.2225706,48.2479572 70.6826962,47.8708444 C70.1426843,47.4937316 70.1301643,46.9063774 70.1301643,46.9063774 C70.1301643,46.9063774 70.1450232,29.9199174 70.1301643,29.1333364 C70.1153053,28.3466177 71.0969576,27.7555461 71.0969576,27.7555461 L85.8755373,19.2134387 C86.7853714,18.7332016 87.6711286,19.2134387 87.6711286,19.2134387 C87.6711286,19.2134387 100.726623,26.8020937 102.173442,27.6177257 C103.591507,28.2919577 103.416502,29.6843424 103.416502,29.6843424 C103.416502,29.6843424 103.425307,44.7519192 103.416502,46.2175511 L103.416502,46.2175511 Z M97.5160105,29.1691339 C94.4900173,27.4274483 87.3615842,23.2971063 87.3615842,23.2971063 C87.3615842,23.2971063 86.6661039,22.9212326 85.9517747,23.2971063 L74.3487406,29.98215 C74.3487406,29.98215 73.5780025,30.4449014 73.589697,31.0604805 C73.6013915,31.6760597 73.589697,44.9698708 73.589697,44.9698708 C73.589697,44.9698708 73.5994654,45.4295932 74.0234951,45.7246472 C74.4473873,46.0197011 86.0601898,52.7332451 86.0601898,52.7332451 C86.0601898,52.7332451 86.538152,53.0391759 87.2530315,52.7332451 C87.9746526,52.3327262 99.0730335,45.9402582 99.0730335,45.9402582 C99.0730335,45.9402582 99.7162325,45.6648929 99.7236619,44.4307056 C99.7257257,44.0747959 99.7265512,42.6932881 99.7266887,40.9575229 L86.6600502,48.8752394 L86.6600502,45.846221 C86.6600502,44.6021205 87.6231289,43.7809811 87.6231289,43.7809811 L99.1807607,36.8165793 C99.6168978,36.3611251 99.7068768,35.6315447 99.7254505,35.3556287 C99.7250378,34.0904627 99.7244874,32.9852841 99.7240747,32.2851678 L86.6600502,40.2012321 L86.6600502,37.034531 C86.6600502,35.7904305 87.4855462,35.2446564 87.4855462,35.2446564 L97.5160105,29.1691339 Z" id="Shape-Copy"></path>
         </g>
     </g>
diff --git a/examples/assets/images/figure-1.png b/examples/assets/images/figure-1.png
new file mode 100644
index 0000000000..7a8041570d
Binary files /dev/null and b/examples/assets/images/figure-1.png differ
diff --git a/examples/assets/images/figure-2.png b/examples/assets/images/figure-2.png
new file mode 100644
index 0000000000..dc7e482135
Binary files /dev/null and b/examples/assets/images/figure-2.png differ
diff --git a/examples/assets/images/plant-1.png b/examples/assets/images/plant-1.png
new file mode 100644
index 0000000000..458563ae0b
Binary files /dev/null and b/examples/assets/images/plant-1.png differ
diff --git a/examples/assets/images/plant-2.png b/examples/assets/images/plant-2.png
new file mode 100644
index 0000000000..7f58ed6992
Binary files /dev/null and b/examples/assets/images/plant-2.png differ
diff --git a/examples/assets/images/resource-placeholder.svg b/examples/assets/images/resource-placeholder.svg
new file mode 100755
index 0000000000..dd335ee231
--- /dev/null
+++ b/examples/assets/images/resource-placeholder.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="138px" height="120px" viewBox="0 0 138 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>整理中-icon</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="整理中" transform="translate(-358.000000, -341.000000)">
+            <g id="整理中-icon" transform="translate(358.000000, 340.000000)">
+                <rect id="Rectangle-4" fill="#98CAFD" transform="translate(65.506329, 38.430380) rotate(40.000000) translate(-65.506329, -38.430380) " x="44.5443038" y="11.3544304" width="41.9240506" height="54.1518987" rx="2"></rect>
+                <polygon id="Rectangle-5" fill="#FFE59D" transform="translate(104.810127, 28.822785) rotate(20.000000) translate(-104.810127, -28.822785) " points="93.164557 11.3544304 116.455696 11.3544304 125.772152 23.3064624 105.619288 46.2911392 83.8481013 23.3064624"></polygon>
+                <g id="Group" transform="translate(49.784810, 40.613924) rotate(-55.000000) translate(-49.784810, -40.613924) translate(27.075949, 3.493671)">
+                    <path d="M3,0 L42.4177215,0 C44.0745758,-3.04359188e-16 45.4177215,1.34314575 45.4177215,3 L45.4177215,10.7986191 L0,10.7986191 L0,3 L-4.4408921e-16,3 C-6.46995335e-16,1.34314575 1.34314575,3.04359188e-16 3,0 L3,0 Z M39.2243959,8.09896433 C40.3645556,8.09896433 41.2888377,7.19245687 41.2888377,6.07422325 C41.2888377,4.95598962 40.3645556,4.04948216 39.2243959,4.04948216 C38.0842361,4.04948216 37.159954,4.95598962 37.159954,6.07422325 C37.159954,7.19245687 38.0842361,8.09896433 39.2243959,8.09896433 Z M30.9666283,8.09896433 C32.1067881,8.09896433 33.0310702,7.19245687 33.0310702,6.07422325 C33.0310702,4.95598962 32.1067881,4.04948216 30.9666283,4.04948216 C29.8264685,4.04948216 28.9021864,4.95598962 28.9021864,6.07422325 C28.9021864,7.19245687 29.8264685,8.09896433 30.9666283,8.09896433 Z M22.7088608,8.09896433 C23.8490205,8.09896433 24.7733026,7.19245687 24.7733026,6.07422325 C24.7733026,4.95598962 23.8490205,4.04948216 22.7088608,4.04948216 C21.568701,4.04948216 20.6444189,4.95598962 20.6444189,6.07422325 C20.6444189,7.19245687 21.568701,8.09896433 22.7088608,8.09896433 Z" id="Combined-Shape" fill="#FD9FA5"></path>
+                    <rect id="Rectangle-3-Copy" fill="#FFEAEC" x="0" y="10.7986191" width="45.4177215" height="63.4418872"></rect>
+                </g>
+                <path d="M9.60759494,46.2911392 L128.392405,46.2911392 L128.392405,118.531646 L128.392405,118.531646 C128.392405,119.636215 127.496975,120.531646 126.392405,120.531646 L11.6075949,120.531646 L11.6075949,120.531646 C10.5030254,120.531646 9.60759494,119.636215 9.60759494,118.531646 L9.60759494,46.2911392 Z" id="Rectangle" fill="#DAEDFD"></path>
+                <path d="M121.228807,112.318171 C121.228807,112.318171 121.328767,112.315471 121.518548,112.318171 C121.708329,112.320872 121.759999,112.47103 121.759999,112.47103 C121.759999,112.47103 122.140816,113.209593 122.242902,113.388183 C122.333784,113.547156 122.224841,113.544252 122.199778,113.541654 C122.20002,113.541297 122.194611,113.541042 122.194611,113.541042 C122.194611,113.541042 122.196688,113.541348 122.199778,113.541654 C122.198668,113.543284 122.091995,113.547004 120.987356,113.541042 C119.446897,113.32062 119.393778,111.859595 119.393778,111.859595 L119.393778,109.260995 L118.524554,109.260995 L118.524554,108.292889 C118.524554,108.160921 118.669425,108.14003 118.669425,108.14003 L119.393778,108.14003 L119.393778,107.171924 C119.393778,107.014021 119.538649,106.968113 119.538649,106.968113 C119.538649,106.968113 120.048497,106.814438 120.345144,106.724965 C120.466884,106.688279 120.504454,106.764301 120.504454,106.764301 C120.504454,106.764301 120.552744,106.737296 120.552744,106.853978 L120.552744,108.190983 L121.808289,108.190983 C121.930512,108.190983 121.95316,108.343842 121.95316,108.343842 L121.95316,109.311948 L120.552744,109.311948 L120.552744,111.553877 C120.552744,112.205515 121.228807,112.318171 121.228807,112.318171 L121.228807,112.318171 Z M117.51046,113.439136 L116.737816,113.439136 C116.586233,113.439136 116.592945,113.235324 116.592945,113.235324 L116.592945,109.464807 C116.592945,109.235773 116.303204,109.159089 116.303204,109.159089 L114.709627,109.159089 C114.471894,109.159089 114.468176,109.464807 114.468176,109.464807 L114.468176,113.286277 C114.468176,113.43613 114.323305,113.439136 114.323305,113.439136 L113.550661,113.439136 C113.380776,113.439136 113.405791,113.235324 113.405791,113.235324 L113.405791,108.496701 C113.405791,108.116082 113.840403,108.038124 113.840403,108.038124 L117.220718,108.038124 C117.558267,108.038124 117.65533,108.496701 117.65533,108.496701 L117.65533,113.184372 C117.65533,113.450906 117.51046,113.439136 117.51046,113.439136 L117.51046,113.439136 Z M112.005374,111.299113 L109.01138,111.299113 L109.01138,112.063407 C109.01138,112.338807 109.349412,112.420077 109.349412,112.420077 L111.763923,112.420077 C111.93574,112.420077 112.053664,112.572936 112.053664,112.572936 C112.053664,112.572936 112.264355,113.03513 112.343406,113.235324 C112.422457,113.435519 112.198535,113.439136 112.198535,113.439136 L108.576768,113.439136 C108.140611,113.439136 108.045576,112.878654 108.045576,112.878654 L108.045576,108.547654 C108.045576,108.298596 108.383607,108.190983 108.383607,108.190983 L112.005374,108.190983 C112.369338,108.190983 112.439986,108.64956 112.439986,108.64956 L112.439986,110.840536 C112.439986,111.2102 112.005374,111.299113 112.005374,111.299113 L112.005374,111.299113 Z M111.474182,109.464807 C111.474182,109.464807 111.443759,109.210042 111.232731,109.210042 L109.252831,109.210042 C109.252831,109.210042 109.01138,109.27837 109.01138,109.464807 L109.01138,110.025289 C109.01138,110.025289 109.018334,110.280054 109.252831,110.280054 L111.232731,110.280054 C111.232731,110.280054 111.474182,110.217127 111.474182,109.974336 L111.474182,109.464807 L111.474182,109.464807 Z M106.934901,113.439136 L106.162257,113.439136 C106.060316,113.439136 106.017387,113.286277 106.017387,113.286277 L106.017387,109.464807 C106.017387,109.227825 105.727645,109.159089 105.727645,109.159089 L105.003292,109.159089 C104.801197,109.159089 104.761841,109.464807 104.761841,109.464807 L104.761841,113.286277 C104.761841,113.413048 104.61697,113.439136 104.61697,113.439136 L103.844326,113.439136 C103.736881,113.439136 103.699456,113.286277 103.699456,113.286277 L103.699456,109.464807 C103.699456,109.222525 103.409715,109.159089 103.409715,109.159089 L102.685361,109.159089 C102.464337,109.159089 102.44391,109.464807 102.44391,109.464807 L102.44391,113.286277 C102.44391,113.449836 102.299039,113.439136 102.299039,113.439136 L101.526396,113.439136 C101.38167,113.439136 101.381525,113.286277 101.381525,113.286277 L101.381525,108.445748 C101.381525,108.165354 101.767847,108.038124 101.767847,108.038124 L106.596869,108.038124 C106.984495,108.038124 107.079772,108.547654 107.079772,108.547654 L107.079772,113.286277 C107.079772,113.462269 106.934901,113.439136 106.934901,113.439136 L106.934901,113.439136 Z M99.9328184,111.299113 L96.9388246,111.299113 L96.9388246,112.063407 C96.9388246,112.338807 97.2768561,112.420077 97.2768561,112.420077 L99.6913674,112.420077 C99.8631838,112.420077 99.9811086,112.572936 99.9811086,112.572936 C99.9811086,112.572936 100.191751,113.03513 100.27085,113.235324 C100.349901,113.435519 100.125979,113.439136 100.125979,113.439136 L96.5042124,113.439136 C96.0680553,113.439136 95.9730202,112.878654 95.9730202,112.878654 L95.9730202,108.547654 C95.9730202,108.298596 96.3110516,108.190983 96.3110516,108.190983 L99.9328184,108.190983 C100.296782,108.190983 100.367431,108.64956 100.367431,108.64956 L100.367431,110.840536 C100.367431,111.2102 99.9328184,111.299113 99.9328184,111.299113 L99.9328184,111.299113 Z M99.4016261,109.464807 C99.4016261,109.464807 99.3712033,109.210042 99.1601748,109.210042 L97.1802756,109.210042 C97.1802756,109.210042 96.9388246,109.27837 96.9388246,109.464807 L96.9388246,110.025289 C96.9388246,110.025289 96.9457783,110.280054 97.1802756,110.280054 L99.1601748,110.280054 C99.1601748,110.280054 99.4016261,110.217127 99.4016261,109.974336 L99.4016261,109.464807 L99.4016261,109.464807 Z M95.2486667,113.439136 L93.4136382,113.439136 C93.4136382,113.439136 92.0707837,113.372286 91.9649317,111.961501 C91.9606821,110.512654 91.9649317,106.000007 91.9649317,106.000007 L92.8341557,106.000007 C92.8341557,106.000007 93.123897,105.994453 93.123897,106.305724 L93.123897,111.655783 C93.123897,111.655783 93.2248718,112.09836 93.7999602,112.267219 C94.4497533,112.263754 94.5726035,112.267219 94.5726035,112.267219 C94.5726035,112.267219 94.8244373,112.182127 95.0072157,112.521983 C95.1899941,112.861839 95.3935373,113.235324 95.3935373,113.235324 C95.3935373,113.235324 95.422608,113.439136 95.2486667,113.439136 L95.2486667,113.439136 Z M85.9286536,113.133419 L85.9286536,106.40763 C85.9286536,106.109403 86.1701047,106.05096 86.1701047,106.05096 L90.7093857,106.05096 C90.9632474,106.05096 90.8542563,106.356677 90.8542563,106.356677 C90.8542563,106.356677 90.7127662,106.770109 90.6128053,106.968113 C90.5128444,107.166116 90.323064,107.171924 90.323064,107.171924 L87.3773605,107.171924 C87.1030718,107.171924 87.0876189,107.426689 87.0876189,107.426689 L87.0876189,109.108136 L90.4196445,109.108136 C90.6151232,109.108136 90.5162249,109.362901 90.5162249,109.362901 C90.5162249,109.362901 90.2666611,109.924198 90.1781934,110.076242 C90.0897255,110.228286 89.8884519,110.229101 89.8884519,110.229101 L87.0876189,110.229101 L87.0876189,112.012454 C87.0876189,112.255499 87.3290703,112.318171 87.3290703,112.318171 L90.4196445,112.318171 C90.6437594,112.318171 90.7093857,112.47103 90.7093857,112.47103 C90.7093857,112.47103 91.0154494,112.974904 91.1439979,113.184372 C91.2725947,113.393839 91.0957077,113.439136 91.0957077,113.439136 L86.2183949,113.439136 C86.0169764,113.439136 85.9286536,113.133419 85.9286536,113.133419 Z" id="Shape" fill="#A6CDEE" fill-rule="nonzero"></path>
+                <rect id="Rectangle-2" fill="#FFFFFF" x="41.9240506" y="59.3924051" width="54.1518987" height="8.73417722" rx="4.36708861"></rect>
+                <rect id="Rectangle-Copy" fill="#20A0FF" x="0" y="31.443038" width="138" height="14.8481013" rx="3"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/examples/assets/images/search-by-algolia.svg b/examples/assets/images/search-by-algolia.svg
new file mode 100644
index 0000000000..989ed6ab8f
--- /dev/null
+++ b/examples/assets/images/search-by-algolia.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 130 18" xmlns="http://www.w3.org/2000/svg"><title>search-by-algolia</title><defs><linearGradient x1="-36.868%" y1="134.936%" x2="129.432%" y2="-27.7%" id="a"><stop stop-color="#00AEFF" offset="0%"/><stop stop-color="#3369E7" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M59.399.022h13.299a2.372 2.372 0 0 1 2.377 2.364V15.62a2.372 2.372 0 0 1-2.377 2.364H59.399a2.372 2.372 0 0 1-2.377-2.364V2.381A2.368 2.368 0 0 1 59.399.022z" fill="url(#a)"/><path d="M66.257 4.56c-2.815 0-5.1 2.272-5.1 5.078 0 2.806 2.284 5.072 5.1 5.072 2.815 0 5.1-2.272 5.1-5.078 0-2.806-2.279-5.072-5.1-5.072zm0 8.652c-1.983 0-3.593-1.602-3.593-3.574 0-1.972 1.61-3.574 3.593-3.574 1.983 0 3.593 1.602 3.593 3.574a3.582 3.582 0 0 1-3.593 3.574zm0-6.418v2.664c0 .076.082.131.153.093l2.377-1.226c.055-.027.071-.093.044-.147a2.96 2.96 0 0 0-2.465-1.487c-.055 0-.11.044-.11.104l.001-.001zm-3.33-1.956l-.312-.311a.783.783 0 0 0-1.106 0l-.372.37a.773.773 0 0 0 0 1.101l.307.305c.049.049.121.038.164-.011.181-.245.378-.479.597-.697.225-.223.455-.42.707-.599.055-.033.06-.109.016-.158h-.001zm5.001-.806v-.616a.781.781 0 0 0-.783-.779h-1.824a.78.78 0 0 0-.783.779v.632c0 .071.066.12.137.104a5.736 5.736 0 0 1 1.588-.223c.52 0 1.035.071 1.534.207a.106.106 0 0 0 .131-.104z" fill="#FFF"/><path d="M102.162 13.762c0 1.455-.372 2.517-1.123 3.193-.75.676-1.895 1.013-3.44 1.013-.564 0-1.736-.109-2.673-.316l.345-1.689c.783.163 1.819.207 2.361.207.86 0 1.473-.174 1.84-.523.367-.349.548-.866.548-1.553v-.349a6.374 6.374 0 0 1-.838.316 4.151 4.151 0 0 1-1.194.158 4.515 4.515 0 0 1-1.616-.278 3.385 3.385 0 0 1-1.254-.817 3.744 3.744 0 0 1-.811-1.351c-.192-.539-.29-1.504-.29-2.212 0-.665.104-1.498.307-2.054a3.925 3.925 0 0 1 .904-1.433 4.124 4.124 0 0 1 1.441-.926 5.31 5.31 0 0 1 1.945-.365c.696 0 1.337.087 1.961.191a15.86 15.86 0 0 1 1.588.332v8.456h-.001zm-5.954-4.206c0 .893.197 1.885.592 2.299.394.414.904.621 1.528.621.34 0 .663-.049.964-.142a2.75 2.75 0 0 0 .734-.332v-5.29a8.531 8.531 0 0 0-1.413-.18c-.778-.022-1.369.294-1.786.801-.411.507-.619 1.395-.619 2.223zm16.12 0c0 .719-.104 1.264-.318 1.858a4.389 4.389 0 0 1-.904 1.52c-.389.42-.854.746-1.402.975-.548.229-1.391.36-1.813.36-.422-.005-1.26-.125-1.802-.36a4.088 4.088 0 0 1-1.397-.975 4.486 4.486 0 0 1-.909-1.52 5.037 5.037 0 0 1-.329-1.858c0-.719.099-1.411.318-1.999.219-.588.526-1.09.92-1.509.394-.42.865-.741 1.402-.97a4.547 4.547 0 0 1 1.786-.338 4.69 4.69 0 0 1 1.791.338c.548.229 1.019.55 1.402.97.389.42.69.921.909 1.509.23.588.345 1.28.345 1.999h.001zm-2.191.005c0-.921-.203-1.689-.597-2.223-.394-.539-.948-.806-1.654-.806-.707 0-1.26.267-1.654.806-.394.539-.586 1.302-.586 2.223 0 .932.197 1.558.592 2.098.394.545.948.812 1.654.812.707 0 1.26-.272 1.654-.812.394-.545.592-1.166.592-2.098h-.001zm6.962 4.707c-3.511.016-3.511-2.822-3.511-3.274L113.583.926l2.142-.338v10.003c0 .256 0 1.88 1.375 1.885v1.792h-.001zm3.774 0h-2.153V5.072l2.153-.338v9.534zm-1.079-10.542c.718 0 1.304-.578 1.304-1.291 0-.714-.581-1.291-1.304-1.291-.723 0-1.304.578-1.304 1.291 0 .714.586 1.291 1.304 1.291zm6.431 1.013c.707 0 1.304.087 1.786.262.482.174.871.42 1.156.73.285.311.488.735.608 1.182.126.447.186.937.186 1.476v5.481a25.24 25.24 0 0 1-1.495.251c-.668.098-1.419.147-2.251.147a6.829 6.829 0 0 1-1.517-.158 3.213 3.213 0 0 1-1.178-.507 2.455 2.455 0 0 1-.761-.904c-.181-.37-.274-.893-.274-1.438 0-.523.104-.855.307-1.215.208-.36.487-.654.838-.883a3.609 3.609 0 0 1 1.227-.49 7.073 7.073 0 0 1 2.202-.103c.263.027.537.076.833.147v-.349c0-.245-.027-.479-.088-.697a1.486 1.486 0 0 0-.307-.583c-.148-.169-.34-.3-.581-.392a2.536 2.536 0 0 0-.915-.163c-.493 0-.942.06-1.353.131-.411.071-.75.153-1.008.245l-.257-1.749c.268-.093.668-.185 1.183-.278a9.335 9.335 0 0 1 1.66-.142l-.001-.001zm.181 7.731c.657 0 1.145-.038 1.484-.104v-2.168a5.097 5.097 0 0 0-1.978-.104c-.241.033-.46.098-.652.191a1.167 1.167 0 0 0-.466.392c-.121.169-.175.267-.175.523 0 .501.175.79.493.981.323.196.75.289 1.293.289h.001zM84.109 4.794c.707 0 1.304.087 1.786.262.482.174.871.42 1.156.73.29.316.487.735.608 1.182.126.447.186.937.186 1.476v5.481a25.24 25.24 0 0 1-1.495.251c-.668.098-1.419.147-2.251.147a6.829 6.829 0 0 1-1.517-.158 3.213 3.213 0 0 1-1.178-.507 2.455 2.455 0 0 1-.761-.904c-.181-.37-.274-.893-.274-1.438 0-.523.104-.855.307-1.215.208-.36.487-.654.838-.883a3.609 3.609 0 0 1 1.227-.49 7.073 7.073 0 0 1 2.202-.103c.257.027.537.076.833.147v-.349c0-.245-.027-.479-.088-.697a1.486 1.486 0 0 0-.307-.583c-.148-.169-.34-.3-.581-.392a2.536 2.536 0 0 0-.915-.163c-.493 0-.942.06-1.353.131-.411.071-.75.153-1.008.245l-.257-1.749c.268-.093.668-.185 1.183-.278a8.89 8.89 0 0 1 1.66-.142l-.001-.001zm.186 7.736c.657 0 1.145-.038 1.484-.104v-2.168a5.097 5.097 0 0 0-1.978-.104c-.241.033-.46.098-.652.191a1.167 1.167 0 0 0-.466.392c-.121.169-.175.267-.175.523 0 .501.175.79.493.981.318.191.75.289 1.293.289h.001zm8.682 1.738c-3.511.016-3.511-2.822-3.511-3.274L89.461.926l2.142-.338v10.003c0 .256 0 1.88 1.375 1.885v1.792h-.001z" fill="#182359"/><path d="M5.027 11.025c0 .698-.252 1.246-.757 1.644-.505.397-1.201.596-2.089.596-.888 0-1.615-.138-2.181-.414v-1.214c.358.168.739.301 1.141.397.403.097.778.145 1.125.145.508 0 .884-.097 1.125-.29a.945.945 0 0 0 .363-.779.978.978 0 0 0-.333-.747c-.222-.204-.68-.446-1.375-.725-.716-.29-1.221-.621-1.515-.994-.294-.372-.44-.82-.44-1.343 0-.655.233-1.171.698-1.547.466-.376 1.09-.564 1.875-.564.752 0 1.5.165 2.245.494l-.408 1.047c-.698-.294-1.321-.44-1.869-.44-.415 0-.73.09-.945.271a.89.89 0 0 0-.322.717c0 .204.043.379.129.524.086.145.227.282.424.411.197.129.551.299 1.063.51.577.24.999.464 1.268.671.269.208.466.442.591.704.125.261.188.569.188.924l-.001.002zm3.98 2.24c-.924 0-1.646-.269-2.167-.808-.521-.539-.782-1.281-.782-2.226 0-.97.242-1.733.725-2.288.483-.555 1.148-.833 1.993-.833.784 0 1.404.238 1.858.714.455.476.682 1.132.682 1.966v.682H7.357c.018.577.174 1.02.467 1.329.294.31.707.465 1.241.465.351 0 .678-.033.98-.099a5.1 5.1 0 0 0 .975-.33v1.026a3.865 3.865 0 0 1-.935.312 5.723 5.723 0 0 1-1.08.091l.002-.001zm-.231-5.199c-.401 0-.722.127-.964.381s-.386.625-.432 1.112h2.696c-.007-.491-.125-.862-.354-1.115-.229-.252-.544-.379-.945-.379l-.001.001zm7.692 5.092l-.252-.827h-.043c-.286.362-.575.608-.865.739-.29.131-.662.196-1.117.196-.584 0-1.039-.158-1.367-.473-.328-.315-.491-.761-.491-1.337 0-.612.227-1.074.682-1.386.455-.312 1.148-.482 2.079-.51l1.026-.032v-.317c0-.38-.089-.663-.266-.851-.177-.188-.452-.282-.824-.282-.304 0-.596.045-.876.134a6.68 6.68 0 0 0-.806.317l-.408-.902a4.414 4.414 0 0 1 1.058-.384 4.856 4.856 0 0 1 1.085-.132c.756 0 1.326.165 1.711.494.385.329.577.847.577 1.552v4.002h-.902l-.001-.001zm-1.88-.859c.458 0 .826-.128 1.104-.384.278-.256.416-.615.416-1.077v-.516l-.763.032c-.594.021-1.027.121-1.297.298s-.406.448-.406.814c0 .265.079.47.236.615.158.145.394.218.709.218h.001zm7.557-5.189c.254 0 .464.018.628.054l-.124 1.176a2.383 2.383 0 0 0-.559-.064c-.505 0-.914.165-1.227.494-.313.329-.47.757-.47 1.284v3.105h-1.262V7.218h.988l.167 1.047h.064c.197-.354.454-.636.771-.843a1.83 1.83 0 0 1 1.023-.312h.001zm4.125 6.155c-.899 0-1.582-.262-2.049-.787-.467-.525-.701-1.277-.701-2.259 0-.999.244-1.767.733-2.304.489-.537 1.195-.806 2.119-.806.627 0 1.191.116 1.692.349l-.381 1.015c-.534-.208-.974-.312-1.321-.312-1.028 0-1.542.682-1.542 2.046 0 .666.128 1.166.384 1.501.256.335.631.502 1.125.502a3.23 3.23 0 0 0 1.595-.419v1.101a2.53 2.53 0 0 1-.722.285 4.356 4.356 0 0 1-.932.086v.002zm8.277-.107h-1.268V9.506c0-.458-.092-.8-.277-1.026-.184-.226-.477-.338-.878-.338-.53 0-.919.158-1.168.475-.249.317-.373.848-.373 1.593v2.949h-1.262V4.801h1.262v2.122c0 .34-.021.704-.064 1.09h.081a1.76 1.76 0 0 1 .717-.666c.306-.158.663-.236 1.072-.236 1.439 0 2.159.725 2.159 2.175v3.873l-.001-.001zm7.649-6.048c.741 0 1.319.269 1.732.806.414.537.62 1.291.62 2.261 0 .974-.209 1.732-.628 2.275-.419.542-1.001.814-1.746.814-.752 0-1.336-.27-1.751-.811h-.086l-.231.704h-.945V4.801h1.262v1.987l-.021.655-.032.553h.054c.401-.591.992-.886 1.772-.886zm-.328 1.031c-.508 0-.875.149-1.098.448-.224.299-.339.799-.346 1.501v.086c0 .723.115 1.247.344 1.571.229.324.603.486 1.123.486.448 0 .787-.177 1.018-.532.231-.354.346-.867.346-1.536 0-1.35-.462-2.025-1.386-2.025l-.001.001zm3.244-.924h1.375l1.209 3.368c.183.48.304.931.365 1.354h.043c.032-.197.091-.436.177-.717.086-.281.541-1.616 1.364-4.004h1.364l-2.541 6.73c-.462 1.235-1.232 1.853-2.31 1.853-.279 0-.551-.03-.816-.091v-.999c.19.043.406.064.65.064.609 0 1.037-.353 1.284-1.058l.22-.559-2.385-5.941h.001z" fill="#1D3657"/></g></svg>
\ No newline at end of file
diff --git a/examples/assets/images/stars.png b/examples/assets/images/stars.png
deleted file mode 100644
index 19a245bb94..0000000000
Binary files a/examples/assets/images/stars.png and /dev/null differ
diff --git a/examples/assets/images/tipe.svg b/examples/assets/images/tipe.svg
new file mode 100644
index 0000000000..e4026a1c5e
--- /dev/null
+++ b/examples/assets/images/tipe.svg
@@ -0,0 +1,175 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 148.32 226.69">
+  <defs>
+    <style>
+      .cls-1 {
+        isolation: isolate;
+      }
+
+      .cls-2 {
+        fill: url(#radial-gradient);
+      }
+
+      .cls-3 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-4 {
+        fill: url(#linear-gradient-2);
+      }
+
+      .cls-5 {
+        fill: url(#linear-gradient-3);
+      }
+
+      .cls-6 {
+        fill: url(#linear-gradient-4);
+      }
+
+      .cls-7 {
+        fill: url(#linear-gradient-5);
+      }
+
+      .cls-8 {
+        fill: url(#linear-gradient-6);
+      }
+
+      .cls-9 {
+        opacity: 0.7;
+      }
+
+      .cls-11, .cls-9 {
+        mix-blend-mode: multiply;
+      }
+
+      .cls-10 {
+        fill: url(#linear-gradient-7);
+      }
+
+      .cls-12 {
+        fill: url(#linear-gradient-8);
+      }
+
+      .cls-13 {
+        fill: url(#linear-gradient-9);
+      }
+
+      .cls-14 {
+        fill: #3c2e36;
+      }
+
+      .cls-15 {
+        fill: url(#linear-gradient-10);
+      }
+
+      .cls-16 {
+        fill: url(#radial-gradient-2);
+      }
+    </style>
+    <radialGradient id="radial-gradient" cx="74.93" cy="117.87" r="86.39" gradientTransform="translate(0 22.72) scale(1 1.07)" gradientUnits="userSpaceOnUse">
+      <stop offset="0.32" stop-color="#e4dce1"/>
+      <stop offset="0.48" stop-color="#e1dadf"/>
+      <stop offset="0.59" stop-color="#d9d3da"/>
+      <stop offset="0.68" stop-color="#cac7d2"/>
+      <stop offset="0.76" stop-color="#b5b6c6"/>
+      <stop offset="0.79" stop-color="#aaadc0"/>
+      <stop offset="1" stop-color="#6f6f85"/>
+    </radialGradient>
+    <linearGradient id="linear-gradient" x1="38.85" y1="122.53" x2="108.18" y2="108.38" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#e4dce1"/>
+      <stop offset="0.19" stop-color="#d7d0d7"/>
+      <stop offset="0.53" stop-color="#b5b2be"/>
+      <stop offset="0.97" stop-color="#808296"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" x1="32.25" y1="64.7" x2="148.44" y2="64.7" gradientUnits="userSpaceOnUse">
+      <stop offset="0.32" stop-color="#e4dce1"/>
+      <stop offset="0.49" stop-color="#e1dadf"/>
+      <stop offset="0.6" stop-color="#d9d3da"/>
+      <stop offset="0.69" stop-color="#cac7d2"/>
+      <stop offset="0.78" stop-color="#b5b6c6"/>
+      <stop offset="0.81" stop-color="#aaadc0"/>
+      <stop offset="1" stop-color="#6f6f85"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-3" x1="139.11" y1="68.34" x2="139.11" y2="1.17" gradientUnits="userSpaceOnUse">
+      <stop offset="0.12" stop-color="#888aa0"/>
+      <stop offset="0.54" stop-color="#716f8a"/>
+      <stop offset="0.89" stop-color="#635d7c"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-4" x1="111.94" y1="16.05" x2="135.36" y2="16.05" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#3c314b"/>
+      <stop offset="0.54" stop-color="#534a67"/>
+      <stop offset="0.89" stop-color="#635d7c"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-5" x1="6752.04" y1="68.34" x2="6752.04" y2="-3.45" gradientTransform="matrix(-1, 0, 0, 1, 6787.68, 0)" gradientUnits="userSpaceOnUse">
+      <stop offset="0.19" stop-color="#e4dce1"/>
+      <stop offset="0.42" stop-color="#c2bac6"/>
+      <stop offset="0.92" stop-color="#6b6582"/>
+      <stop offset="0.97" stop-color="#635d7c"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-6" x1="39.39" y1="16.05" x2="62.82" y2="16.05" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#3c314b"/>
+      <stop offset="0.02" stop-color="#3d324c"/>
+      <stop offset="0.35" stop-color="#524a66"/>
+      <stop offset="0.65" stop-color="#5f5876"/>
+      <stop offset="0.89" stop-color="#635d7c"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-7" x1="79.66" y1="229.05" x2="79.66" y2="194.82" gradientUnits="userSpaceOnUse">
+      <stop offset="0.03" stop-color="#808296"/>
+      <stop offset="0.31" stop-color="#b7b8c3" stop-opacity="0.78"/>
+      <stop offset="0.79" stop-color="#fff" stop-opacity="0.5"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-8" x1="87.38" y1="117.84" x2="87.38" y2="41.77" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#e3dddf" stop-opacity="0"/>
+      <stop offset="0.04" stop-color="#cbc5cd" stop-opacity="0.12"/>
+      <stop offset="0.15" stop-color="#9d97a9" stop-opacity="0.37"/>
+      <stop offset="0.25" stop-color="#7b758f" stop-opacity="0.54"/>
+      <stop offset="0.35" stop-color="#67617f" stop-opacity="0.65"/>
+      <stop offset="0.45" stop-color="#605a7a" stop-opacity="0.68"/>
+      <stop offset="0.54" stop-color="#575070" stop-opacity="0.75"/>
+      <stop offset="1" stop-color="#382e4a"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-9" x1="11357.22" y1="78.8" x2="11361.46" y2="58.49" gradientTransform="matrix(-1, 0, 0, 1, 11419.34, 0)" gradientUnits="userSpaceOnUse">
+      <stop offset="0.07" stop-color="#28ffff"/>
+      <stop offset="0.41" stop-color="#51d2ff"/>
+      <stop offset="0.8" stop-color="#7ba3ff"/>
+      <stop offset="1" stop-color="#8b91ff"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-10" x1="113" y1="78.8" x2="117.24" y2="58.49" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#linear-gradient-9"/>
+    <radialGradient id="radial-gradient-2" cx="36.09" cy="124.71" r="36.13" gradientUnits="userSpaceOnUse">
+      <stop offset="0.11" stop-color="#635d7c"/>
+      <stop offset="0.35" stop-color="#5f5876"/>
+      <stop offset="0.65" stop-color="#524a66"/>
+      <stop offset="0.98" stop-color="#3d324c"/>
+      <stop offset="1" stop-color="#3c314b"/>
+    </radialGradient>
+  </defs>
+  <title>Asset 3</title>
+  <g class="cls-1">
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <g>
+          <path class="cls-2" d="M138.13,128.27c-4.7-9.78-11.29-21.28-9.75-33.55a15.83,15.83,0,0,1,3.26-8.26A65.12,65.12,0,0,1,114.75,99a64.1,64.1,0,0,1-6.11,2.76,66.61,66.61,0,0,0-14.35,9.42c-13.43,11.7-26.21,44.39-48.51,50.6h0a23.9,23.9,0,0,1-9.81,2c-9.41-.07-20.4-6.21-26.26-15.43C1,134.68,3.58,115.85,9.49,103.81c-.18.37-.37.74-.55,1.13a102.51,102.51,0,0,0-4.2,10.42v0A86.37,86.37,0,0,0,0,143.69c0,45.84,35.49,83,79.27,83,11.19,0,29-3.38,43.66-13.61a57.75,57.75,0,0,0,22.57-32C151.54,158.58,144.94,142.45,138.13,128.27Z"/>
+          <path class="cls-3" d="M51.46,158.37a27,27,0,0,1-5.67,3.38h0c22.3-6.21,35.07-38.9,48.51-50.6a66.61,66.61,0,0,1,14.35-9.42,58.67,58.67,0,0,1-21.26,4.09c-19.75,0-37.75-10.49-48.31-24,1,1.39,13,15.46,22.29,43.72A30,30,0,0,1,51.46,158.37Z"/>
+          <path class="cls-4" d="M145.33,59.56c-2.08,22.29-28.26,46.26-58,46.26-29.95,0-55.88-24.12-58-46.26-1.45-15.6,7.34-36,58-36S146.78,44,145.33,59.56Z"/>
+          <path class="cls-5" d="M135.36,0h0a51.59,51.59,0,0,0-4.68,32.1A37.21,37.21,0,0,1,134,34.24c10,7.23,12.12,17,11.34,25.32a35.2,35.2,0,0,1-1.6,7.61A73.45,73.45,0,0,0,142.08,12,71.18,71.18,0,0,0,135.36,0Z"/>
+          <path class="cls-6" d="M130.68,32.1A51.59,51.59,0,0,1,135.36,0h0a57.92,57.92,0,0,0-9.41,6.87,59.8,59.8,0,0,0-14,18.75q3.35.64,6.29,1.45A53.09,53.09,0,0,1,130.68,32.1Z"/>
+          <path class="cls-7" d="M39.39,0h0a51.59,51.59,0,0,1,4.68,32.1,37.21,37.21,0,0,0-3.31,2.14c-10,7.23-12.12,17-11.34,25.32A35.2,35.2,0,0,0,31,67.17,73.45,73.45,0,0,1,32.67,12,71.18,71.18,0,0,1,39.39,0Z"/>
+          <path class="cls-8" d="M48.81,6.87A57.92,57.92,0,0,0,39.39,0h0a51.59,51.59,0,0,1,4.68,32.1,53.09,53.09,0,0,1,12.45-5q2.94-.82,6.29-1.45A59.8,59.8,0,0,0,48.81,6.87Z"/>
+          <g class="cls-9">
+            <path class="cls-10" d="M84.24,182.6c-26.08,0-49.56,5.42-66,14.08,14.54,18.33,36.47,30,61,30,11.19,0,29-3.38,43.66-13.61A58.81,58.81,0,0,0,141,192.47C125.56,186.3,105.79,182.6,84.24,182.6Z"/>
+          </g>
+          <g>
+            <g class="cls-11">
+              <path class="cls-12" d="M138.51,52.94c-.56-2.94-2-5.19-5-5.88-7.88-1.85-27,9.84-37.8,15.34-4,2.06-6.16,3.05-8.34,3s-4.31-.94-8.34-3c-10.77-5.5-29.92-17.18-37.8-15.34-3,.7-4.44,2.94-5,5.88-1,5.16.35,18,9.89,27.49,7.14,7.11,16.68,10.46,24.69,12.71l.18.08a4.2,4.2,0,0,0-.09.88c0,3.28,3.83,5.94,8.56,5.94,2.34,0,6.35-.65,7.9-1.71h0c1.55,1.06,5.56,1.71,7.9,1.71,4.73,0,8.56-2.66,8.56-5.94a4.2,4.2,0,0,0-.09-.88l.18-.08c8-2.25,17.56-5.6,24.69-12.71C138.16,70.92,139.49,58.1,138.51,52.94Z"/>
+            </g>
+            <path class="cls-13" d="M75.26,75.35C64.56,86.85,47.81,77.09,45,63.28c-1.83-9.07,3.63-7.73,8.71-5.67C60.14,60.2,68.84,66.27,75.26,75.35Z"/>
+            <path class="cls-14" d="M60.43,68.26a15.16,15.16,0,0,1-2.19,8,15.56,15.56,0,0,1,0-15.92A15.16,15.16,0,0,1,60.43,68.26Z"/>
+            <path d="M87.36,86.64a8.15,8.15,0,0,0-6.27,2.49c8.25,5.17,4.31,5.17,12.55,0A8.15,8.15,0,0,0,87.36,86.64Z"/>
+            <path class="cls-15" d="M99.86,75.35c10.69,11.5,27.45,1.74,30.23-12.07,1.83-9.07-3.63-7.73-8.71-5.67C115,60.2,106.28,66.27,99.86,75.35Z"/>
+            <path class="cls-14" d="M114.69,68.26a15.16,15.16,0,0,0,2.19,8,15.56,15.56,0,0,0,0-15.92A15.16,15.16,0,0,0,114.69,68.26Z"/>
+          </g>
+          <path class="cls-16" d="M9.71,148.35c5.86,9.22,16.85,15.37,26.26,15.43a23.7,23.7,0,0,0,8.21-1.41l0,0c-15,4.18-19.32-25.16-10.92-43.06v0c1.09-3.38,2.35-6.34,3.42-8.83.37-.86,2.53-5.15,2.09-9.8-.84-9-14-17.33-24-5.37A44.52,44.52,0,0,0,9.39,104C3.55,116.06,1.08,134.76,9.71,148.35Z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/examples/assets/images/web.png b/examples/assets/images/web.png
new file mode 100644
index 0000000000..8f85521d59
Binary files /dev/null and b/examples/assets/images/web.png differ
diff --git a/examples/bus.js b/examples/bus.js
new file mode 100644
index 0000000000..c17d88ac58
--- /dev/null
+++ b/examples/bus.js
@@ -0,0 +1,2 @@
+import Vue from 'vue';
+export default new Vue();
diff --git a/examples/components/demo-block.vue b/examples/components/demo-block.vue
index 35bd7992b3..ae29f29c5b 100644
--- a/examples/components/demo-block.vue
+++ b/examples/components/demo-block.vue
@@ -5,30 +5,43 @@
     @mouseenter="hovering = true"
     @mouseleave="hovering = false">
     <slot name="source"></slot>
-    <div class="meta">
-      <div class="description">
+    <div class="meta" ref="meta">
+      <div class="description" v-if="$slots.default">
         <slot></slot>
-        <el-tooltip effect="dark" :content="langConfig['tooltip-text']" placement="right">
-          <el-button size="small" type="primary" @click="goJsfiddle">{{ langConfig['button-text'] }}</el-button>
-        </el-tooltip>
       </div>
       <slot name="highlight"></slot>
     </div>
-    <div class="demo-block-control" @click="isExpanded = !isExpanded">
+    <div
+      class="demo-block-control"
+      ref="control"
+      :class="{ 'is-fixed': fixedControl }"
+      @click="isExpanded = !isExpanded">
       <transition name="arrow-slide">
         <i :class="[iconClass, { 'hovering': hovering }]"></i>
       </transition>
       <transition name="text-slide">
         <span v-show="hovering">{{ controlText }}</span>
       </transition>
+      <el-tooltip effect="dark" :content="langConfig['tooltip-text']" placement="right">
+        <transition name="text-slide">
+          <el-button
+            v-show="hovering || isExpanded"
+            size="small"
+            type="text"
+            class="control-button"
+            @click.stop="goJsfiddle">
+            {{ langConfig['button-text'] }}
+          </el-button>
+        </transition>
+      </el-tooltip>
     </div>
   </div>
 </template>
 
 <style>
   .demo-block {
-    border: solid 1px #eaeefb;
-    border-radius: 4px;
+    border: solid 1px #ebebeb;
+    border-radius: 3px;
     transition: .2s;
 
     &.hover {
@@ -48,28 +61,28 @@
     }
 
     .meta {
-      background-color: #f9fafc;
+      background-color: #fafafa;
       border-top: solid 1px #eaeefb;
-      clear: both;
       overflow: hidden;
       height: 0;
       transition: height .2s;
     }
 
     .description {
-      padding: 18px 24px;
-      width: 40%;
+      padding: 20px;
       box-sizing: border-box;
-      border-left: solid 1px #eaeefb;
-      float: right;
+      border: solid 1px #ebebeb;
+      border-radius: 3px;
       font-size: 14px;
-      line-height: 1.8;
-      color: #5e6d82;
+      line-height: 22px;
+      color: #666;
       word-break: break-word;
+      margin: 10px;
+      background-color: #fff;
 
       p {
-        margin: 0 0 12px;
-        line-height: 1.8;
+        margin: 0;
+        line-height: 26px;
       }
 
       code {
@@ -86,9 +99,6 @@
     }
 
     .highlight {
-      width: 60%;
-      border-right: solid 1px #eaeefb;
-
       pre {
         margin: 0;
       }
@@ -107,7 +117,7 @@
 
     .demo-block-control {
       border-top: solid 1px #eaeefb;
-      height: 36px;
+      height: 44px;
       box-sizing: border-box;
       background-color: #fff;
       border-bottom-left-radius: 4px;
@@ -116,29 +126,34 @@
       margin-top: -1px;
       color: #d3dce6;
       cursor: pointer;
-      transition: .2s;
       position: relative;
+    
+      &.is-fixed {
+        position: fixed;
+        bottom: 0;
+        width: 868px;
+      }
 
       i {
-        font-size: 12px;
-        line-height: 36px;
+        font-size: 16px;
+        line-height: 44px;
         transition: .3s;
         &.hovering {
           transform: translateX(-40px);
         }
       }
 
-      span {
+      > span {
         position: absolute;
         transform: translateX(-30px);
         font-size: 14px;
-        line-height: 36px;
+        line-height: 44px;
         transition: .3s;
         display: inline-block;
       }
 
       &:hover {
-        color: #20a0ff;
+        color: #409EFF;
         background-color: #f9fafc;
       }
 
@@ -147,6 +162,16 @@
         opacity: 0;
         transform: translateX(10px);
       }
+      
+      .control-button {
+        line-height: 26px;
+        position: absolute;
+        top: 0;
+        right: 0;
+        font-size: 14px;
+        padding-left: 5px;
+        padding-right: 25px;
+      }
     }
   }
 </style>
@@ -159,7 +184,9 @@
     data() {
       return {
         hovering: false,
-        isExpanded: false
+        isExpanded: false,
+        fixedControl: false,
+        scrollParent: null
       };
     },
 
@@ -177,7 +204,7 @@
         '\n<scr' + `ipt src="//unpkg.com/element-ui@${ version }/lib/index.js"></scr` + 'ipt>';
         let jsTpl = (script || '').replace(/export default/, 'var Main =').trim();
         let htmlTpl = `${resourcesTpl}\n<div id="app">\n${html.trim()}\n</div>`;
-        let cssTpl = `@import url("//unpkg.com/element-ui@${ version }/lib/theme-default/index.css");\n${(style || '').trim()}\n`;
+        let cssTpl = `@import url("//unpkg.com/element-ui@${ version }/lib/theme-chalk/index.css");\n${(style || '').trim()}\n`;
         jsTpl = jsTpl
           ? jsTpl + '\nvar Ctor = Vue.extend(Main)\nnew Ctor().$mount(\'#app\')'
           : 'new Vue().$mount(\'#app\')';
@@ -206,6 +233,17 @@
         document.body.appendChild(form);
 
         form.submit();
+      },
+
+      scrollHandler() {
+        const { top, bottom, left } = this.$refs.meta.getBoundingClientRect();
+        this.fixedControl = bottom > document.documentElement.clientHeight &&
+          top + 44 <= document.documentElement.clientHeight;
+        this.$refs.control.style.left = this.fixedControl ? `${ left }px` : '0';
+      },
+
+      removeScrollHandler() {
+        this.scrollParent && this.scrollParent.removeEventListener('scroll', this.scrollHandler);
       }
     },
 
@@ -236,7 +274,8 @@
 
       codeAreaHeight() {
         if (this.$el.getElementsByClassName('description').length > 0) {
-          return Math.max(this.$el.getElementsByClassName('description')[0].clientHeight, this.$el.getElementsByClassName('highlight')[0].clientHeight);
+          return this.$el.getElementsByClassName('description')[0].clientHeight +
+            this.$el.getElementsByClassName('highlight')[0].clientHeight + 20;
         }
         return this.$el.getElementsByClassName('highlight')[0].clientHeight;
       }
@@ -245,6 +284,17 @@
     watch: {
       isExpanded(val) {
         this.codeArea.style.height = val ? `${ this.codeAreaHeight + 1 }px` : '0';
+        if (!val) {
+          this.fixedControl = false;
+          this.$refs.control.style.left = '0';
+          this.removeScrollHandler();
+          return;
+        }
+        setTimeout(() => {
+          this.scrollParent = document.querySelector('.page-component__scroll > .el-scrollbar__wrap');
+          this.scrollParent && this.scrollParent.addEventListener('scroll', this.scrollHandler);
+          this.scrollHandler();
+        }, 200);
       }
     },
 
@@ -256,6 +306,10 @@
           highlight.borderRight = 'none';
         }
       });
+    },
+
+    beforeDestroy() {
+      this.removeScrollHandler();
     }
   };
 </script>
diff --git a/examples/components/footer-nav.vue b/examples/components/footer-nav.vue
index f43214a68c..45e58123ea 100644
--- a/examples/components/footer-nav.vue
+++ b/examples/components/footer-nav.vue
@@ -19,8 +19,8 @@
 
 <style>
   .footer-nav {
-    padding: 24px 0;
-    color: #99a9bf;
+    padding: 40px 0;
+    color: #333;
     font-size: 14px;
     
     &::after {
@@ -31,7 +31,7 @@
      
     & i {
       transition: .3s;
-      color: #d9def1;
+      color: #999;
       vertical-align: baseline;
     }
   }
@@ -41,10 +41,10 @@
     transition: .3s;
     
     &:hover {
-      color: #20a0ff;
+      color: #409EFF;
      
       & i {
-        color: #20a0ff;
+        color: #409EFF;
       }
     }
   }
@@ -90,8 +90,8 @@
     methods: {
       setNav() {
         let nav = navConfig[this.lang];
-        this.nav = nav[0].children.concat(nav[1]);
-        nav[3].groups.map(group => group.list).forEach(list => {
+        this.nav = [nav[0]].concat(nav[3].children);
+        nav[4].groups.map(group => group.list).forEach(list => {
           this.nav = this.nav.concat(list);
         });
       },
diff --git a/examples/components/footer.vue b/examples/components/footer.vue
index d56773c36b..aa9db81214 100644
--- a/examples/components/footer.vue
+++ b/examples/components/footer.vue
@@ -2,12 +2,26 @@
   <footer class="footer">
     <div class="container">
       <div class="footer-main">
-        <p class="footer-main-title">Element {{ version }} Boron</p>
+        <h4>{{ langConfig.links }}</h4>
+        <a href="https://github.com/ElemeFE/element" class="footer-main-link" target="_blank">{{ langConfig.repo }}</a>
+        <a href="https://github.com/ElemeFE/element/releases" class="footer-main-link" target="_blank">{{ langConfig.changelog }}</a>
+        <a href="https://github.com/ElemeFE/element/blob/dev/FAQ.md" class="footer-main-link" target="_blank">{{ langConfig.faq }}</a>
+        <a href="https://github.com/ElementUI/element-starter" class="footer-main-link" target="_blank">{{ langConfig.starter }}</a>
+        <a href="https://github.com/ElementUI/element-theme" class="footer-main-link" target="_blank">{{ langConfig.theme }}</a>
+        <a href="https://github.com/ElementUI/theme-chalk-preview" class="footer-main-link" target="_blank">{{ langConfig.preview }}</a>
+        <a href="https://github.com/elemefe/element-react" class="footer-main-link" target="_blank">Element-React</a>
+        <a href="https://github.com/ElemeFE/element-angular" class="footer-main-link" target="_blank">Element-Angular</a>
+      </div>
+      <div class="footer-main">
+        <h4>{{ langConfig.community }}</h4>
+        <a :href="gitterLink" class="footer-main-link" target="_blank">{{ langConfig.gitter }}</a>
         <a href="https://github.com/ElemeFE/element/issues" class="footer-main-link" target="_blank">{{ langConfig.feedback }}</a>
         <a :href="`https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.${ lang }.md`" class="footer-main-link" target="_blank">{{ langConfig.contribution }}</a>
-        <a :href="`https://eleme.github.io/element-react/#/${ lang }/quick-start`" class="footer-main-link" target="_blank">Element-React</a>
+        <a href="https://segmentfault.com/t/element-ui" class="footer-main-link" target="_blank">SegmentFault</a>
+        <a href="https://github.com/ElementUI/awesome-element" class="footer-main-link" target="_blank">Awesome Element</a>
       </div>
       <div class="footer-social">
+        <p class="footer-social-title">Element {{ version && version.slice(0, 3) }} Fullerene</p>
         <el-popover
           ref="weixin"
           placement="top"
@@ -18,9 +32,12 @@
           <img src="../assets/images/qrcode.png" alt="">
         </el-popover>
         <i class="doc-icon-weixin elementdoc" v-popover:weixin></i>
-        <a href="//github.com/elemefe" target="_blank">
+        <a href="https://github.com/elemefe" target="_blank">
           <i class="doc-icon-github elementdoc"></i>
         </a>
+        <a :href="gitterLink" target="_blank">
+          <i class="doc-icon-gitter elementdoc"></i>
+        </a>
       </div>
     </div>
   </footer>
@@ -28,83 +45,81 @@
 
 <style>
   .footer {
-    height: 120px;
-    background-color: #324057;
-    color: #a4aebd;
+    background-color: #F7FBFD;
     width: 100%;
-    z-index: 1000;
-    margin-top: -120px;
-
-    * {
-      word-spacing: 0;
-    }
+    padding: 40px 150px;
+    margin-top: -340px;
+    box-sizing: border-box;
+    height: 340px;
 
     .container {
-      height: 100%;
       box-sizing: border-box;
+      width: auto;
     }
 
     .footer-main {
       font-size: 0;
-      padding-top: 40px;
       display: inline-block;
-
-      .footer-main-title {
+      vertical-align: top;
+      margin-right: 110px;
+    
+      h4 {
+        font-size: 18px;
+        color: #333;
         line-height: 1;
-        font-size: 22px;
-        margin: 0;
+        margin: 0 0 15px 0;
       }
 
       .footer-main-link {
-        display: inline-block;
-        margin: 12px 18px 0 0;
-        line-height: 1;
-        font-size: 12px;
-        color: #768193;
+        display: block;
+        margin: 0;
+        line-height: 2;
+        font-size: 14px;
+        color: #666;
 
-        a {
-          color: #768193;
-          text-decoration: none;
+        &:hover {
+          color: #333;
         }
       }
     }
 
     .footer-social {
       float: right;
-      line-height: 120px;
+      text-align: right;
+    
+      .footer-social-title {
+        color: #666;
+        font-size: 18px;
+        line-height: 1;
+        margin: 0 0 20px 0;
+        padding: 0;
+        font-weight: bold;
+      }
 
       .elementdoc {
         transition: .3s;
         display: inline-block;
         line-height: 32px;
         text-align: center;
-        color: #8D99AB;
+        color: #c8d6e8;
         background-color: transparent;
         size: 32px;
         font-size: 32px;
         vertical-align: middle;
+        margin-right: 20px;
         &:hover {
-           transform: scale(1.2);
+          transform: scale(1.2);
+          color: #8D99AB;
         }
       }
 
-      .doc-icon-weixin {
-        margin-right: 36px;
-        &:hover {
-          color: #fff;
-        }
-      }
-
-      .doc-icon-github {
+      .doc-icon-gitter {
         margin-right: 0;
-        &:hover {
-           color: #fff;
-        }
       }
     }
   }
 
-  .footer-popover {
+  .el-popover.footer-popover {
     padding: 0;
     min-width: 120px;
     line-height: normal;
@@ -124,10 +139,22 @@
       margin: 10px;
     }
   }
+  @media (max-width: 1140px) {
+    .footer {
+      height: auto;
+    }
+  }
+  
+  @media (max-width: 1000px) {
+    .footer-social {
+      display: none;
+    }
+  }
+  
   @media (max-width: 768px) {
     .footer {
-      .footer-social {
-        display: none;
+      .footer-main {
+        margin-bottom: 30px;
       }
     }
   }
@@ -151,6 +178,10 @@
 
       langConfig() {
         return compoLang.filter(config => config.lang === this.lang)[0]['footer'];
+      },
+
+      gitterLink() {
+        return this.lang === 'zh-CN' ? 'https://gitter.im/ElemeFE/element' : 'https://gitter.im/element-en/Lobby';
       }
     }
   };
diff --git a/examples/components/header.vue b/examples/components/header.vue
index e66138a8a1..b841620b39 100644
--- a/examples/components/header.vue
+++ b/examples/components/header.vue
@@ -2,9 +2,10 @@
   .headerWrapper {
     height: 80px;
   }
+
   .header {
     height: 80px;
-    background-color: rgba(32, 160, 255, 1);
+    background-color: #fff;
     color: #fff;
     top: 0;
     left: 0;
@@ -18,6 +19,10 @@
       box-sizing: border-box;
     }
 
+    .nav-lang-spe {
+      color: #888;
+    }
+
     h1 {
       margin: 0;
       float: left;
@@ -25,7 +30,7 @@
       font-weight: normal;
 
       a {
-        color: #fff;
+        color: #333;
         text-decoration: none;
         display: block;
       }
@@ -43,6 +48,7 @@
         border-radius: 3px;
       }
     }
+
     .nav {
       float: right;
       height: 100%;
@@ -52,24 +58,48 @@
       padding: 0;
       margin: 0;
     }
+
+    .nav-gap {
+      position: relative;
+      width: 1px;
+      height: 80px;
+      padding: 0 20px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: calc(50% - 8px);
+        width: 1px;
+        height: 16px;
+        background: #ebebeb;
+      }
+    }
+
     .nav-logo,
     .nav-logo-small {
       vertical-align: sub;
     }
+
     .nav-logo-small {
       display: none;
     }
+
     .nav-item {
       margin: 0;
       float: left;
       list-style: none;
       position: relative;
       cursor: pointer;
-      margin-left: 20px;
     
+      &.nav-algolia-search {
+        cursor: default;
+      }
+    
+      &.lang-item,
       &:last-child {
         cursor: default;
         margin-left: 34px;
+
         span {
           opacity: .8;
         }
@@ -78,48 +108,88 @@
           cursor: pointer;
           display: inline-block;
           height: 100%;
+          color: #888;
+
           &:hover {
-            opacity: 1;
+            color: #409EFF;
           }
           &.active {
-            font-weight: 700;
-            opacity: 1;
-          }
+             font-weight: bold;
+             color: #409EFF;
+           }
         }
       }
 
       a {
         text-decoration: none;
-        color: #fff;
+        color: #888;
         display: block;
-        padding: 0 20px;
-        opacity: .8;
+        padding: 0 22px;
+
         &.active,
         &:hover {
-          opacity: 1;
-        }
-         
-        &.active {
-          font-weight: 700;
+          color: #333;
         }
 
-        &.active::before {
+        &.active::after {
           content: '';
-          display: block;
+          display: inline-block;
           position: absolute;
-          bottom: 0;
-          left: 0;
-          width: 100%;
+          bottom: 15px;
+          left: calc(50% - 7px);
+          width: 14px;
           height: 4px;
-          background:#99d2fc;
+          background: #409EFF;
         }
       }
     }
   }
-  .header-home {
-    position: fixed;
-    top: 0;
-    background-color: rgba(32, 160, 255, 0);
+
+  .nav-dropdown {
+    margin-bottom: 6px;
+    padding-left: 18px;
+    width: 100%;
+
+    span {
+      display: block;
+      width: 100%;
+      font-size: 16px;
+      color: #888;
+      line-height: 40px;
+      transition: .2s;
+      padding-bottom: 6px;
+      user-select: none;
+
+      &:hover {
+         cursor: pointer;
+       }
+    }
+
+    i {
+      transition: .2s;
+      font-size: 12px;
+      color: #979797;
+      transform: translateY(-2px);
+    }
+
+    @when active {
+      span, i {
+        color: #409EFF;
+      }
+      i {
+        transform: rotateZ(180deg) translateY(3px);
+      }
+    }
+
+    &:hover {
+      span, i {
+        color: #409EFF;
+      }
+    }
+  }
+  
+  .nav-dropdown-list {
+    width: auto;
   }
 
   @media (max-width: 850px) {
@@ -133,6 +203,7 @@
       .nav-item {
         margin-left: 6px;
 
+        &.lang-item,
         &:last-child {
           margin-left: 10px;
         }
@@ -141,41 +212,75 @@
           padding: 0 5px;
         }
       }
+      .nav-theme-switch, .nav-algolia-search {
+        display: none;
+      }
     }
   }
+
   @media (max-width: 700px) {
     .header {
       .container {
         padding: 0 12px;
       }
-      .nav-item a,
-      .nav-lang {
-        font-size: 12px;
-        vertical-align: top;
+      .nav-item {
+        a {
+          font-size: 12px;
+          vertical-align: top;
+        }
+
+        &.lang-item {
+          height: 100%;
+         
+          .nav-lang {
+            display: flex;
+            align-items: center;
+            
+            span {
+              padding-bottom: 0;
+            }
+          }
+        }
+      }
+      .nav-dropdown {
+        padding: 0;
+        span {
+          font-size: 12px;
+        }
+      }
+      .nav-gap {
+        padding: 0 8px;
+      }
+      .nav-versions {
+        display: none;
       }
     }
   }
 </style>
 <template>
   <div class="headerWrapper">
-    <header class="header"
-    ref="header"
-    :style="headerStyle"
-    :class="{
-      'header-home': isHome
-    }">
+    <header class="header" ref="header">
       <div class="container">
         <h1><router-link :to="`/${ lang }`">
-          <img
-            src="../assets/images/element-logo.svg"
-            alt="element-logo"
-            class="nav-logo">
-          <img
-            src="../assets/images/element-logo-small.svg"
-            alt="element-logo"
-            class="nav-logo-small">
+          <!-- logo -->
+          <slot>
+            <img
+              src="../assets/images/element-logo.svg"
+              alt="element-logo"
+              class="nav-logo">
+            <img
+              src="../assets/images/element-logo-small.svg"
+              alt="element-logo"
+              class="nav-logo-small">
+          </slot>
+
         </router-link></h1>
+
+        <!-- nav -->
         <ul class="nav">
+          <li class="nav-item nav-algolia-search" v-show="isComponentPage">
+            <algolia-search></algolia-search>
+          </li>
           <li class="nav-item">
             <router-link
               active-class="active"
@@ -195,20 +300,63 @@
               exact>{{ langConfig.resource }}
             </router-link>
           </li>
-          <li class="nav-item">
-            <span
-              class="nav-lang"
-              :class="{ 'active': lang === 'zh-CN' }"
-              @click="switchLang('zh-CN')">
-              中文
-            </span>
-            <span> / </span>
-            <span
-              class="nav-lang"
-              :class="{ 'active': lang === 'en-US' }"
-              @click="switchLang('en-US')">
-              En
-            </span>
+
+          <!-- gap -->
+          <li class="nav-item" v-show="isComponentPage">
+            <div class="nav-gap"></div>
+          </li>
+
+          <!-- 版本选择器 -->
+          <li class="nav-item nav-versions" v-show="isComponentPage">
+            <el-dropdown
+              trigger="click"
+              class="nav-dropdown"
+              :class="{ 'is-active': verDropdownVisible }">
+              <span>
+                {{ version }}
+                <i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu
+                slot="dropdown"
+                class="nav-dropdown-list"
+                @input="handleVerDropdownToggle">
+                <el-dropdown-item
+                  v-for="item in Object.keys(versions)"
+                  :key="item"
+                  @click.native="switchVersion(item)">
+                  {{ item }}
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </li>
+
+          <!-- 语言选择器 -->
+          <li class="nav-item lang-item">
+            <el-dropdown
+              trigger="click"
+              class="nav-dropdown nav-lang"
+              :class="{ 'is-active': langDropdownVisible }">
+              <span>
+                {{ displayedLang }}
+                <i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu
+                slot="dropdown"
+                class="nav-dropdown-list"
+                @input="handleLangDropdownToggle">
+                <el-dropdown-item
+                  v-for="(value, key) in langs"
+                  :key="key"
+                  @click.native="switchLang(key)">
+                  {{ value }}
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </li>
+          
+          <!--theme picker-->
+          <li class="nav-item nav-theme-switch" v-show="isComponentPage">
+            <theme-picker></theme-picker>
           </li>
         </ul>
       </div>
@@ -216,53 +364,81 @@
   </div>
 </template>
 <script>
+  import ThemePicker from './theme-picker.vue';
+  import AlgoliaSearch from './search.vue';
   import compoLang from '../i18n/component.json';
+  import { version } from 'main/index.js';
 
   export default {
     data() {
       return {
         active: '',
-        isHome: false,
-        headerStyle: {}
+        versions: [],
+        version,
+        verDropdownVisible: true,
+        langDropdownVisible: true,
+        langs: {
+          'zh-CN': '中文',
+          'en-US': 'English',
+          'es': 'Español'
+        }
       };
     },
-    watch: {
-      '$route.path': {
-        immediate: true,
-        handler() {
-          this.isHome = /^home/.test(this.$route.name);
-          this.headerStyle.backgroundColor = `rgba(32, 160, 255, ${ this.isHome ? '0' : '1' })`;
-        }
-      }
+
+    components: {
+      ThemePicker,
+      AlgoliaSearch
     },
+
     computed: {
       lang() {
         return this.$route.path.split('/')[1] || 'zh-CN';
       },
+      displayedLang() {
+        return this.langs[this.lang] || '中文';
+      },
       langConfig() {
         return compoLang.filter(config => config.lang === this.lang)[0]['header'];
+      },
+      isComponentPage() {
+        return /^component/.test(this.$route.name);
       }
     },
+
     methods: {
+      switchVersion(version) {
+        if (version === this.version) return;
+        location.href = `${ location.origin }/${ this.versions[version] }/${ location.hash } `;
+      },
+
       switchLang(targetLang) {
         if (this.lang === targetLang) return;
         localStorage.setItem('ELEMENT_LANGUAGE', targetLang);
         this.$router.push(this.$route.path.replace(this.lang, targetLang));
+      },
+
+      handleVerDropdownToggle(visible) {
+        this.verDropdownVisible = visible;
+      },
+
+      handleLangDropdownToggle(visible) {
+        this.langDropdownVisible = visible;
       }
     },
-    mounted() {
-      function scroll(fn) {
-        window.addEventListener('scroll', () => {
-          fn();
-        }, false);
-      }
-      scroll(() => {
-        if (this.isHome) {
-          const threshold = 200;
-          let alpha = Math.min((document.documentElement.scrollTop || document.body.scrollTop), threshold) / threshold;
-          this.$refs.header.style.backgroundColor = `rgba(32, 160, 255, ${ alpha })`;
+
+    created() {
+      const xhr = new XMLHttpRequest();
+      xhr.onreadystatechange = _ => {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+          const versions = JSON.parse(xhr.responseText);
+          this.versions = Object.keys(versions).reduce((prev, next) => {
+            prev[next] = versions[next];
+            return prev;
+          }, {});
         }
-      });
+      };
+      xhr.open('GET', '/versions.json');
+      xhr.send();
     }
   };
 </script>
diff --git a/examples/components/search.vue b/examples/components/search.vue
new file mode 100644
index 0000000000..0060b0cc98
--- /dev/null
+++ b/examples/components/search.vue
@@ -0,0 +1,216 @@
+<template>
+  <el-autocomplete
+    v-model="query"
+    size="small"
+    :popper-class="`algolia-search${ isEmpty ? ' is-empty' : '' }`"
+    :fetch-suggestions="querySearch"
+    :placeholder="placeholder"
+    :trigger-on-focus="false"
+    @select="handleSelect">
+    <template slot-scope="props">
+      <p class="algolia-search-title" v-if="props.item.title">
+        <span v-html="props.item.highlightedCompo"></span>
+        <span class="algolia-search-separator">></span>
+        <span v-html="props.item.title"></span>
+      </p>
+      <p
+        class="algolia-search-content"
+        v-if="props.item.content"
+        v-html="props.item.content"></p>
+      <a
+        class="algolia-search-link"
+        v-if="props.item.img"
+        target="_blank"
+        href="https://www.algolia.com/docsearch">
+        <img
+          class="algolia-search-logo"
+          src="../assets/images/search-by-algolia.svg"
+          alt="algolia-logo">
+      </a>
+      <p
+        class="algolia-search-empty"
+        v-if="props.item.isEmpty">{{ emptyText }}</p>
+    </template>
+  </el-autocomplete>
+</template>
+
+<style>
+  .algolia-search {
+    width: 450px !important;
+  
+    &.is-empty {
+      .el-autocomplete-suggestion__list {
+        padding-bottom: 0;
+      }
+    }
+
+    .el-autocomplete-suggestion__list {
+      position: static !important;
+      padding-bottom: 28px;
+    }
+
+    li {
+      border-bottom: solid 1px #ebebeb;
+      
+      &:last-child {
+         border-bottom: none;
+       }
+    }
+    
+    .algolia-highlight {
+      color: #409EFF;
+      font-weight: bold;
+    }
+    
+    .algolia-search-title {
+      font-size: 14px;
+      margin: 6px 0;
+      line-height: 1.8;
+    }
+    
+    .algolia-search-separator {
+      padding: 0 6px;
+    }
+    
+    .algolia-search-content {
+      font-size: 12px;
+      margin: 6px 0;
+      line-height: 2.4;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    
+    .algolia-search-link {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      padding-right: 20px;
+      background-color: #e4e7ed;
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
+      box-sizing: border-box;
+      text-align: right;
+
+      &:hover {
+         background-color: #e4e7ed;
+       }
+    
+      img {
+        display: inline-block;
+        height: 17px;
+        margin-top: 10px;
+      }
+    }
+  
+    .algolia-search-empty {
+      margin: 5px 0;
+      text-align: center;
+      color: #999;
+    }
+  }
+</style>
+
+<script>
+  import algoliasearch from 'algoliasearch';
+
+  export default {
+    data() {
+      return {
+        index: null,
+        query: '',
+        isEmpty: false,
+        langs: {
+          'zh-CN': {
+            search: '搜索文档',
+            empty: '无匹配结果',
+            index: 'zh'
+          },
+          'en-US': {
+            search: 'Search',
+            empty: 'No results',
+            index: 'en'
+          },
+          'es': {
+            search: 'Buscar',
+            empty: 'No hay datos que coincidan',
+            index: 'es'
+          }
+        }
+      };
+    },
+
+    computed: {
+      lang() {
+        return this.$route.meta.lang;
+      },
+
+      placeholder() {
+        return this.lang ? this.langs[this.lang].search : '';
+      },
+
+      emptyText() {
+        return this.lang ? this.langs[this.lang].empty : '';
+      }
+    },
+
+    watch: {
+      lang() {
+        this.initIndex();
+      }
+    },
+
+    methods: {
+      initIndex() {
+        const client = algoliasearch('4C63BTGP6S', '0729c3c7f4dc8db7395ad0b19c0748d2');
+        this.index = client.initIndex(`element-${ this.lang ? this.langs[this.lang].index : 'zh' }`);
+      },
+
+      querySearch(query, cb) {
+        if (!query) return;
+        this.index.search({ query, hitsPerPage: 6 }, (err, res) => {
+          if (err) {
+            console.error(err);
+            return;
+          }
+          if (res.hits.length > 0) {
+            this.isEmpty = false;
+            cb(res.hits.map(hit => {
+              let content = hit._highlightResult.content.value.replace(/\s+/g, ' ');
+              const highlightStart = content.indexOf('<span class="algolia-highlight">');
+              if (highlightStart > -1) {
+                const startEllipsis = highlightStart - 15 > 0;
+                content = (startEllipsis ? '...' : '') +
+                  content.slice(Math.max(0, highlightStart - 15), content.length);
+              } else if (content.indexOf('|') > -1) {
+                content = '';
+              }
+              return {
+                anchor: hit.anchor,
+                component: hit.component,
+                highlightedCompo: hit._highlightResult.component.value,
+                title: hit._highlightResult.title.value,
+                content
+              };
+            }).concat({ img: true }));
+          } else {
+            this.isEmpty = true;
+            cb([{ isEmpty: true }]);
+          }
+        });
+      },
+
+      handleSelect(val) {
+        if (val.img || val.isEmpty) return;
+        const component = val.component || '';
+        const anchor = val.anchor;
+        this.$router.push(`/${ this.lang }/component/${ component }${ anchor ? `#${ anchor }` : '' }`);
+      }
+    },
+
+    mounted() {
+      this.initIndex();
+    }
+  };
+</script>
\ No newline at end of file
diff --git a/examples/components/side-nav.vue b/examples/components/side-nav.vue
index 11a9f4b519..f2d30a09b0 100644
--- a/examples/components/side-nav.vue
+++ b/examples/components/side-nav.vue
@@ -3,56 +3,33 @@
     width: 100%;
     box-sizing: border-box;
     padding-right: 30px;
+    transition: opacity .3s;
+    &.is-fade {
+      transition: opacity 3s;
+    }
 
     li {
       list-style: none;
     }
+
     ul {
       padding: 0;
       margin: 0;
       overflow: hidden;
     }
+    
+    > ul > .nav-item > a {
+      margin-top: 15px;
+    }
 
-    .nav-dropdown {
-      margin-bottom: 6px;
-      width: 100%;
-      span {
-        display: block;
-        width: 100%;
-        font-size: 16px;
-        color: #5e6d82;
-        line-height: 40px;
-        transition: .2s;
-        padding-bottom: 6px;
-        border-bottom: 1px solid #eaeefb;
-        &:hover {
-          cursor: pointer;
-        }
-      }
-      i {
-        transition: .2s;
-        font-size: 12px;
-        color: #d3dce6;
-      }
-      @when active {
-        span, i {
-          color: #20a0ff;
-        }
-        i {
-          transform: rotateZ(180deg) translateY(2px);
-        }
-      }
-      &:hover {
-        span, i {
-          color: #20a0ff;
-        }
-      }
+    > ul > .nav-item:nth-child(-n + 4) > a {
+      margin-top: 0;
     }
 
     .nav-item {
       a {
         font-size: 16px;
-        color: #5e6d82;
+        color: #333;
         line-height: 40px;
         height: 40px;
         margin: 0;
@@ -60,36 +37,74 @@
         text-decoration: none;
         display: block;
         position: relative;
-        transition: all .3s;
+        transition: .15s ease-out;
+        font-weight: bold;
 
         &.active {
-          color: #20a0ff;
+          color: #409EFF;
         }
       }
+
       .nav-item {
         a {
           display: block;
           height: 40px;
+          color: #444;
           line-height: 40px;
-          font-size: 13px;
-          padding-left: 24px;
+          font-size: 14px;
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
+          font-weight: normal;
+
+          &:hover,
+          &.active {
+            color: #409EFF;
+          }
+        }
+      }
+  
+      &.sponsors {
+        & > .sub-nav {
+          margin-top: -10px;
+        }
+        
+        & > a {
+          color: #777;
+          font-weight: 300;
+          font-size: 14px;
+        }
+        
+        .nav-item {
+          display: inline-block;
+        
+          a {
+            height: auto;
+            display: inline-block;
+            vertical-align: middle;
+            margin: 8px 12px 12px 0;
 
+            img {
+              width: 42px;
+            }
+          }
 
-          &:hover {
-            color: #20a0ff;
+          &:first-child a img {
+            width: 36px;
           }
         }
       }
     }
+
     .nav-group__title {
       font-size: 12px;
-      color: #99a9bf;
-      padding-left: 8px;
+      color: #999;
       line-height: 26px;
-      margin-top: 10px;
+      margin-top: 15px;
+    }
+
+    #code-sponsor-widget {
+      margin: 0 0 0 -20px;
     }
   }
   .nav-dropdown-list {
@@ -101,31 +116,36 @@
   }
 </style>
 <template>
-  <div class="side-nav" :style="navStyle">
-    <el-dropdown
-      v-show="isComponentPage"
-      trigger="click"
-      class="nav-dropdown"
-      :class="{ 'is-active': dropdownVisible }">
-      <span>
-        {{ langConfig.dropdown }}{{ version }}
-        <i class="el-icon-caret-bottom el-icon--right"></i>
-      </span>
-      <el-dropdown-menu
-        slot="dropdown"
-        :offset="-80"
-        class="nav-dropdown-list"
-        @input="handleDropdownToggle">
-        <el-dropdown-item
-          v-for="item in Object.keys(versions)"
-          :key="item"
-          @click.native="switchVersion(item)">
-          {{ item }}
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
+  <div
+    class="side-nav"
+    @mouseenter="isFade = false"
+    :class="{ 'is-fade': isFade }"
+    :style="navStyle">
     <ul>
-      <li class="nav-item" v-for="item in data">
+      <li class="nav-item sponsors">
+        <a>{{ lang === 'zh-CN' ? '赞助商' : 'Sponsors' }}</a>
+        <ul class="pure-menu-list sub-nav">
+          <li class="nav-item" v-show="lang !== 'zh-CN'">
+            <a href="https://tipe.io/?ref=element" target="_blank">
+              <img src="~examples/assets/images/tipe.svg" alt="tipe.io">
+            </a>
+          </li>
+          <li class="nav-item">
+            <a class="sponsor" href="https://www.duotai.net/?utm_source=element" target="_blank">
+              <img src="~examples/assets/images/duotai.svg" alt="duotai">
+            </a>
+          </li>
+          <li class="nav-item">
+            <a class="sponsor" href="https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index" target="_blank">
+              <img src="~examples/assets/images/duohui.svg" alt="duohui">
+            </a>
+          </li>
+        </ul>
+      </li>
+      <li
+        class="nav-item"
+        v-for="(item, key) in data"
+        :key="key">
         <a v-if="!item.path && !item.href" @click="expandMenu">{{item.name}}</a>
         <a v-if="item.href" :href="item.href" target="_blank">{{item.name}}</a>
         <router-link
@@ -136,7 +156,10 @@
           v-text="item.title || item.name">
         </router-link>
         <ul class="pure-menu-list sub-nav" v-if="item.children">
-          <li class="nav-item" v-for="navItem in item.children">
+          <li
+            class="nav-item"
+            v-for="(navItem, key) in item.children"
+            :key="key">
             <router-link
               class=""
               active-class="active"
@@ -147,13 +170,18 @@
           </li>
         </ul>
         <template v-if="item.groups">
-          <div class="nav-group" v-for="group in item.groups">
+          <div
+            class="nav-group"
+            v-for="(group, key) in item.groups"
+            :key="key"
+            >
             <div class="nav-group__title" @click="expandMenu">{{group.groupName}}</div>
             <ul class="pure-menu-list">
               <li
                 class="nav-item"
-                v-for="navItem in group.list"
-                v-if="!navItem.disabled">
+                v-for="(navItem, key) in group.list"
+                v-if="!navItem.disabled"
+                :key="key">
                 <router-link
                   active-class="active"
                   :to="base + navItem.path"
@@ -165,11 +193,12 @@
         </template>
       </li>
     </ul>
+    <!--<div id="code-sponsor-widget"></div>-->
   </div>
 </template>
 <script>
+  import bus from '../bus';
   import compoLang from '../i18n/component.json';
-  import { version } from 'main/index.js';
 
   export default {
     props: {
@@ -184,32 +213,34 @@
         highlights: [],
         navState: [],
         isSmallScreen: false,
-        versions: [],
-        version,
-        dropdownVisible: false
+        isFade: false
       };
     },
     watch: {
       '$route.path'() {
         this.handlePathChange();
+      },
+      isFade(val) {
+        bus.$emit('navFade', val);
       }
     },
     computed: {
       navStyle() {
-        return this.isSmallScreen ? { 'padding-bottom': '60px' } : {};
+        const style = {};
+        if (this.isSmallScreen) {
+          style.paddingBottom = '60px';
+        }
+        style.opacity = this.isFade ? '0.5' : '1';
+        return style;
       },
-      isComponentPage() {
-        return /^component-/.test(this.$route.name);
+      lang() {
+        return this.$route.meta.lang;
       },
       langConfig() {
-        return compoLang.filter(config => config.lang === this.$route.meta.lang)[0]['nav'];
+        return compoLang.filter(config => config.lang === this.lang)[0]['nav'];
       }
     },
     methods: {
-      switchVersion(version) {
-        if (version === this.version) return;
-        location.href = `${ location.origin }/${ this.versions[version] }/${ location.hash } `;
-      },
       handleResize() {
         this.isSmallScreen = document.documentElement.clientWidth < 768;
         this.handlePathChange();
@@ -245,20 +276,12 @@
         if (!target.nextElementSibling || target.nextElementSibling.tagName !== 'UL') return;
         this.hideAllMenu();
         event.currentTarget.nextElementSibling.style.height = 'auto';
-      },
-      handleDropdownToggle(visible) {
-        this.dropdownVisible = visible;
       }
     },
     created() {
-      const xhr = new XMLHttpRequest();
-      xhr.onreadystatechange = _ => {
-        if (xhr.readyState === 4 && xhr.status === 200) {
-          this.versions = JSON.parse(xhr.responseText);
-        }
-      };
-      xhr.open('GET', '/versions.json');
-      xhr.send();
+      bus.$on('fadeNav', () => {
+        this.isFade = true;
+      });
     },
     mounted() {
       this.handleResize();
diff --git a/examples/components/theme-picker.vue b/examples/components/theme-picker.vue
new file mode 100644
index 0000000000..c6c4b50058
--- /dev/null
+++ b/examples/components/theme-picker.vue
@@ -0,0 +1,156 @@
+<template>
+  <el-color-picker
+    class="theme-picker"
+    popper-class="theme-picker-dropdown"
+    v-model="theme"></el-color-picker>
+</template>
+
+<style>
+  .theme-picker {
+    height: 80px;
+    display: inline-block;
+    @utils-vertical-center;
+  }
+
+  .theme-picker .el-color-picker__trigger {
+    vertical-align: middle;
+  }
+  
+  .theme-picker-dropdown .el-color-dropdown__link-btn {
+    display: none;
+  }
+</style>
+
+<script>
+  import { version } from 'main/index.js';
+
+  const ORIGINAL_THEME = '#409EFF';
+  export default {
+    data() {
+      return {
+        chalk: '', // content of theme-chalk css
+        docs: '', // content of docs css
+        theme: ORIGINAL_THEME
+      };
+    },
+
+    watch: {
+      theme(val, oldVal) {
+        if (typeof val !== 'string') return;
+        const themeCluster = this.getThemeCluster(val.replace('#', ''));
+        const originalCluster = this.getThemeCluster(oldVal.replace('#', ''));
+        const getHandler = (variable, id) => {
+          return () => {
+            const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''));
+            let newStyle = this.updateStyle(this[variable], originalCluster, themeCluster);
+
+            let styleTag = document.getElementById(id);
+            if (!styleTag) {
+              styleTag = document.createElement('style');
+              styleTag.setAttribute('id', id);
+              document.head.appendChild(styleTag);
+            }
+            styleTag.innerText = newStyle;
+          };
+        };
+
+        const chalkHandler = getHandler('chalk', 'chalk-style');
+        const docsHandler = getHandler('docs', 'docs-style');
+
+        if (!this.chalk) {
+          const url = `https://unpkg.com/element-ui@${ version }/lib/theme-chalk/index.css`;
+          this.getCSSString(url, chalkHandler, 'chalk');
+        } else {
+          chalkHandler();
+        }
+
+        if (!this.docs) {
+          const links = [].filter.call(document.querySelectorAll('link'), link => {
+            return /docs\..+\.css/.test(link.href || '');
+          });
+          links[0] && this.getCSSString(links[0].href, docsHandler, 'docs');
+        } else {
+          docsHandler();
+        }
+
+        const styles = [].slice.call(document.querySelectorAll('style'))
+          .filter(style => {
+            const text = style.innerText;
+            return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text);
+          });
+        styles.forEach(style => {
+          const { innerText } = style;
+          if (typeof innerText !== 'string') return;
+          style.innerText = this.updateStyle(innerText, originalCluster, themeCluster);
+        });
+      }
+    },
+
+    methods: {
+      updateStyle(style, oldCluster, newCluster) {
+        let newStyle = style;
+        oldCluster.forEach((color, index) => {
+          newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index]);
+        });
+        return newStyle;
+      },
+
+      getCSSString(url, callback, variable) {
+        const xhr = new XMLHttpRequest();
+        xhr.onreadystatechange = () => {
+          if (xhr.readyState === 4 && xhr.status === 200) {
+            this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '');
+            callback();
+          }
+        };
+        xhr.open('GET', url);
+        xhr.send();
+      },
+
+      getThemeCluster(theme) {
+        const tintColor = (color, tint) => {
+          let red = parseInt(color.slice(0, 2), 16);
+          let green = parseInt(color.slice(2, 4), 16);
+          let blue = parseInt(color.slice(4, 6), 16);
+
+          if (tint === 0) { // when primary color is in its rgb space
+            return [red, green, blue].join(',');
+          } else {
+            red += Math.round(tint * (255 - red));
+            green += Math.round(tint * (255 - green));
+            blue += Math.round(tint * (255 - blue));
+
+            red = red.toString(16);
+            green = green.toString(16);
+            blue = blue.toString(16);
+
+            return `#${ red }${ green }${ blue }`;
+          }
+        };
+
+        const shadeColor = (color, shade) => {
+          let red = parseInt(color.slice(0, 2), 16);
+          let green = parseInt(color.slice(2, 4), 16);
+          let blue = parseInt(color.slice(4, 6), 16);
+
+          red = Math.round((1 - shade) * red);
+          green = Math.round((1 - shade) * green);
+          blue = Math.round((1 - shade) * blue);
+
+          red = red.toString(16);
+          green = green.toString(16);
+          blue = blue.toString(16);
+
+          return `#${ red }${ green }${ blue }`;
+        };
+
+        const clusters = [theme];
+        for (let i = 0; i <= 9; i++) {
+          clusters.push(tintColor(theme, Number((i / 10).toFixed(2))));
+        }
+        clusters.push(shadeColor(theme, 0.1));
+        return clusters;
+      }
+    }
+  };
+</script>
\ No newline at end of file
diff --git a/examples/docs/en-US/alert.md b/examples/docs/en-US/alert.md
index 7369a72bda..cd1583baf2 100644
--- a/examples/docs/en-US/alert.md
+++ b/examples/docs/en-US/alert.md
@@ -1,186 +1,228 @@
-<script>
-  export default {
-    methods: {
-      hello() {
-        alert('Hello World!');
-      }
-    }
-  }
-</script>
-<style>
-  .demo-box.demo-alert .el-alert {
-    margin: 20px 0 0;
-  }
-
-  .demo-box.demo-alert .el-alert:first-child {
-    margin: 0;
-  }
-</style>
-
-## Alert
-
-Displays important alert messages.
-
-### Basic usage
-
-Alert components are non-overlay elements in the page that does not disappear automatically.
-
-::: demo Alert provides 4 types of themes defined by `type`, whose default value is `info`.
-
-```html
-<template>
-  <el-alert
-    title="success alert"
-    type="success">
-  </el-alert>
-  <el-alert
-    title="info alert"
-    type="info">
-  </el-alert>
-  <el-alert
-    title="warning alert"
-    type="warning">
-  </el-alert>
-  <el-alert
-    title="error alert"
-    type="error">
-  </el-alert>
-</template>
-```
-:::
-
-### Customizable close button
-
-Customize the close button as texts or other symbols.
-
-::: demo Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. `closable` attribute decides if the component can be closed or not. It accepts `boolean`, and the default is `true`. You can set `close-text` attribute to replace the default cross symbol as the close button. Be careful that `close-text` must be a string. `close` event fires when the component is closed.
-
-```html
-<template>
-  <el-alert
-    title="unclosable alert"
-    type="success"
-    :closable="false">
-  </el-alert>
-  <el-alert
-    title="customized close-text"
-    type="info"
-    close-text="Gotcha">
-  </el-alert>
-  <el-alert
-    title="alert with callback"
-    type="warning"
-    @close="hello">
-  </el-alert>
-</template>
-
-<script>
-  export default {
-    methods: {
-      hello() {
-        alert('Hello World!');
-      }
-    }
-  }
-</script>
-```
-:::
-
-### With icon
-
-Displaying an icon improves readability.
-
-::: demo Setting the `show-icon` attribute displays an icon that corresponds with the current Alert type.
-
-```html
-<template>
-  <el-alert
-    title="success alert"
-    type="success"
-    show-icon>
-  </el-alert>
-  <el-alert
-    title="info alert"
-    type="info"
-    show-icon>
-  </el-alert>
-  <el-alert
-    title="warning alert"
-    type="warning"
-    show-icon>
-  </el-alert>
-  <el-alert
-    title="error alert"
-    type="error"
-    show-icon>
-  </el-alert>
-</template>
-```
-:::
-
-### With description
-
-Description includes a message with more detailed information.
-
-::: demo Besides the required `title` attribute, you can add a `description` attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically.
-
-```html
-<template>
-  <el-alert
-    title="with description"
-    type="success"
-    description="This is a description.">
-  </el-alert>
-</template>
-```
-:::
-
-### With icon and description
-
-::: demo At last, this is an example with both icon and description.
-
-```html
-<template>
-  <el-alert
-    title="success alert"
-    type="success"
-    description="more text description"
-    show-icon>
-  </el-alert>
-  <el-alert
-    title="info alert"
-    type="info"
-    description="more text description"
-    show-icon>
-  </el-alert>
-  <el-alert
-    title="warning alert"
-    type="warning"
-    description="more text description"
-    show-icon>
-  </el-alert>
-  <el-alert
-    title="error alert"
-    type="error"
-    description="more text description"
-    show-icon>
-  </el-alert>
-</template>
-```
-:::
-
-### Attributes
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
-|---------- |-------------- |---------- |--------------------------------  |-------- |
-| **title** | title **REQUIRED** | string | — | — |
-| type | component type | string | success/warning/info/error | info |
-| description | descriptive text. Can also be passed with the default slot | string | — | — |
-| closable | if closable or not | boolean | — | true |
-| close-text | customized close button text | string | — | — |
-| show-icon | if a type icon is displayed | boolean | — | false |
-
-
-### Events
-| Event Name | Description | Parameters |
-|---------- |-------- |---------- |
-| close | fires when alert is closed | — |
+<script>
+  export default {
+    methods: {
+      hello() {
+        alert('Hello World!');
+      }
+    }
+  }
+</script>
+<style>
+  .demo-box.demo-alert .el-alert {
+    margin: 20px 0 0;
+  }
+
+  .demo-box.demo-alert .el-alert:first-child {
+    margin: 0;
+  }
+</style>
+
+## Alert
+
+Displays important alert messages.
+
+### Basic usage
+
+Alert components are non-overlay elements in the page that does not disappear automatically.
+
+:::demo Alert provides 4 types of themes defined by `type`, whose default value is `info`.
+
+```html
+<template>
+  <el-alert
+    title="success alert"
+    type="success">
+  </el-alert>
+  <el-alert
+    title="info alert"
+    type="info">
+  </el-alert>
+  <el-alert
+    title="warning alert"
+    type="warning">
+  </el-alert>
+  <el-alert
+    title="error alert"
+    type="error">
+  </el-alert>
+</template>
+```
+:::
+
+### Customizable close button
+
+Customize the close button as texts or other symbols.
+
+:::demo Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. `closable` attribute decides if the component can be closed or not. It accepts `boolean`, and the default is `true`. You can set `close-text` attribute to replace the default cross symbol as the close button. Be careful that `close-text` must be a string. `close` event fires when the component is closed.
+
+```html
+<template>
+  <el-alert
+    title="unclosable alert"
+    type="success"
+    :closable="false">
+  </el-alert>
+  <el-alert
+    title="customized close-text"
+    type="info"
+    close-text="Gotcha">
+  </el-alert>
+  <el-alert
+    title="alert with callback"
+    type="warning"
+    @close="hello">
+  </el-alert>
+</template>
+
+<script>
+  export default {
+    methods: {
+      hello() {
+        alert('Hello World!');
+      }
+    }
+  }
+</script>
+```
+:::
+
+### With icon
+
+Displaying an icon improves readability.
+
+:::demo Setting the `show-icon` attribute displays an icon that corresponds with the current Alert type.
+
+```html
+<template>
+  <el-alert
+    title="success alert"
+    type="success"
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="info alert"
+    type="info"
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="warning alert"
+    type="warning"
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="error alert"
+    type="error"
+    show-icon>
+  </el-alert>
+</template>
+```
+:::
+
+## Centered text
+
+Use the `center` attribute to center the text.
+
+:::demo
+
+```html
+<template>
+  <el-alert
+    title="success alert"
+    type="success"
+    center
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="info alert"
+    type="info"
+    center
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="warning alert"
+    type="warning"
+    center
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="error alert"
+    type="error"
+    center
+    show-icon>
+  </el-alert>
+</template>
+```
+:::
+
+### With description
+
+Description includes a message with more detailed information.
+
+:::demo Besides the required `title` attribute, you can add a `description` attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically.
+
+```html
+<template>
+  <el-alert
+    title="with description"
+    type="success"
+    description="This is a description.">
+  </el-alert>
+</template>
+```
+:::
+
+### With icon and description
+
+:::demo At last, this is an example with both icon and description.
+
+```html
+<template>
+  <el-alert
+    title="success alert"
+    type="success"
+    description="more text description"
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="info alert"
+    type="info"
+    description="more text description"
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="warning alert"
+    type="warning"
+    description="more text description"
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="error alert"
+    type="error"
+    description="more text description"
+    show-icon>
+  </el-alert>
+</template>
+```
+:::
+
+### Attributes
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| **title** | title **REQUIRED** | string | — | — |
+| type | component type | string | success/warning/info/error | info |
+| description | descriptive text. Can also be passed with the default slot | string | — | — |
+| closable | if closable or not | boolean | — | true |
+| center | whether to center the text | boolean | — | false |
+| close-text | customized close button text | string | — | — |
+| show-icon | if a type icon is displayed | boolean | — | false |
+
+### Slot
+
+| Name | Description |
+|------|--------|
+| title | content of the Alert title |
+
+### Events
+| Event Name | Description | Parameters |
+|---------- |-------- |---------- |
+| close | fires when alert is closed | — |
diff --git a/examples/docs/en-US/badge.md b/examples/docs/en-US/badge.md
index 35e645c8db..0636dd0efb 100644
--- a/examples/docs/en-US/badge.md
+++ b/examples/docs/en-US/badge.md
@@ -15,6 +15,12 @@ Displays the amount of new messages.
 <el-badge :value="3" class="item">
   <el-button size="small">replies</el-button>
 </el-badge>
+<el-badge :value="1" class="item" type="primary">
+  <el-button size="small">comments</el-button>
+</el-badge>
+<el-badge :value="2" class="item" type="warning">
+  <el-button size="small">replies</el-button>
+</el-badge>
 
 <el-dropdown trigger="click">
   <span class="el-dropdown-link">
@@ -45,7 +51,7 @@ Displays the amount of new messages.
 
 You can customize the max value.
 
-::: demo The max value is defined by property `max` which is a `Number`. Note that it only works when `value` is also a `Number`.
+:::demo The max value is defined by property `max` which is a `Number`. Note that it only works when `value` is also a `Number`.
 
 ```html
 <el-badge :value="200" :max="99" class="item">
@@ -96,7 +102,7 @@ Use a red dot to mark content that needs to be noticed.
 ```html
 <el-badge is-dot class="item">query</el-badge>
 <el-badge is-dot class="item">
-  <el-button class="share-button" icon="share" type="primary"></el-button>
+  <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
 </el-badge>
 
 <style>
@@ -130,9 +136,10 @@ Use a red dot to mark content that needs to be noticed.
 </style>
 
 ### Attributes
-| Attribute          | Description            | Type            | Accepted Values                 | Default   |
+| Attribute     | Description     | Type            | Accepted Values       | Default |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
-| value          | display value      | string, number          |          —             |    —     |
-| max          |  maximum value, shows '{max}+' when exceeded. Only works if `value` is a `Number`   | number  |         —              |     —    |
-| is-dot       | if a little dot is displayed   | boolean  |  —  |  false |
-| hidden | hidden badge | boolean | — | false |
+| value         | display value   | string, number  |          —            |    —    |
+| max           |  maximum value, shows '{max}+' when exceeded. Only works if `value` is a `Number`   | number  |         —              |     —    |
+| is-dot        | if a little dot is displayed | boolean   |    —           |  false  |
+| hidden        | hidden badge    | boolean         |          —            |  false  |
+| type          | button type     | string          | primary / success / warning / danger / info |   —  |
diff --git a/examples/docs/en-US/breadcrumb.md b/examples/docs/en-US/breadcrumb.md
index a2181fd87c..fc8539a282 100644
--- a/examples/docs/en-US/breadcrumb.md
+++ b/examples/docs/en-US/breadcrumb.md
@@ -9,6 +9,20 @@ Displays the location of the current page, making it easier to browser back.
 
 ```html
 <el-breadcrumb separator="/">
+  <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
+  <el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item>
+  <el-breadcrumb-item>promotion list</el-breadcrumb-item>
+  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
+</el-breadcrumb>
+```
+:::
+
+### Icon separator
+
+:::demo Set `separator-class` to use `iconfont` as the separator，it will cover `separator`
+
+```html
+<el-breadcrumb separator-class="el-icon-arrow-right">
   <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
   <el-breadcrumb-item>promotion management</el-breadcrumb-item>
   <el-breadcrumb-item>promotion list</el-breadcrumb-item>
@@ -21,6 +35,7 @@ Displays the location of the current page, making it easier to browser back.
 | Attribute      | Description          | Type      | Accepted Values            | Default|
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | separator | separator character | string | — | / |
+| separator-class | class name of icon separator | string | — | - |
 
 ### Breadcrumb Item Attributes
 | Attribute      | Description          | Type      | Accepted Values            | Default|
diff --git a/examples/docs/en-US/button.md b/examples/docs/en-US/button.md
index b6e36794f6..6bad26ba80 100644
--- a/examples/docs/en-US/button.md
+++ b/examples/docs/en-US/button.md
@@ -1,38 +1,16 @@
-<script>
-  import { addClass } from 'element-ui/src/utils/dom';
-  export default {
-    data() {
-      return {
-        isLoading: false,
-        isLoading2: false
-      };
-    },
-    methods: {
-      handleClick(event) {
-        console.log(event);
-        alert('button clicked!');
-      }
-    },
-    mounted() {
-      this.$nextTick(() => {
-        let demos = document.querySelectorAll('.source');
-        let thirdDemo = demos[2];
-        addClass(thirdDemo, 'intro-block');
-      });
-    }
-  }
-</script>
 <style>
   .demo-box.demo-button {
     .el-row {
-      margin-bottom: 10px;
+      margin-bottom: 20px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
     .el-button + .el-button {
       margin-left: 10px;
     }
     .el-button-group {
-      margin-bottom: 20px;
-
       .el-button + .el-button {
         margin-left: 0;
       }
@@ -42,30 +20,6 @@
       }
     }
   }
-
-  .demo-box.demo-button .intro-block {
-    padding: 0;
-  }
-
-  .demo-button .intro-block .block {
-    padding: 30px 24px;
-    overflow: hidden;
-    border-bottom: solid 1px #EFF2F6;
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-
-  .demo-button .intro-block .demonstration {
-    font-size: 14px;
-    color: #8492a6;
-    line-height: 44px;
-  }
-
-  .demo-button .intro-block .wrapper {
-    float: right;
-    margin-right: 20px;
-  }
 </style>
 
 ## Button
@@ -74,66 +28,96 @@ Commonly used button.
 
 ### Basic usage
 
-::: demo Button provides 7 themes defined by the `type` attribute.
+:::demo Use `type`, `plain`, `round` and `circle` to define Button's style.
 
 ```html
-<el-button>Default Button</el-button>
-<el-button type="primary">Primary Button</el-button>
-<el-button type="text">Text Button</el-button>
+<el-row>
+  <el-button>Default</el-button>
+  <el-button type="primary">Primary</el-button>
+  <el-button type="success">Success</el-button>
+  <el-button type="info">Info</el-button>
+  <el-button type="warning">Warning</el-button>
+  <el-button type="danger">Danger</el-button>
+</el-row>
+
+<el-row>
+  <el-button plain>Plain</el-button>
+  <el-button type="primary" plain>Primary</el-button>
+  <el-button type="success" plain>Success</el-button>
+  <el-button type="info" plain>Info</el-button>
+  <el-button type="warning" plain>Warning</el-button>
+  <el-button type="danger" plain>Danger</el-button>
+</el-row>
+
+<el-row>
+  <el-button round>Round</el-button>
+  <el-button type="primary" round>Primary</el-button>
+  <el-button type="success" round>Success</el-button>
+  <el-button type="info" round>Info</el-button>
+  <el-button type="warning" round>Warning</el-button>
+  <el-button type="danger" round>Danger</el-button>
+</el-row>
+
+<el-row>
+  <el-button icon="el-icon-search" circle></el-button>
+  <el-button type="primary" icon="el-icon-edit" circle></el-button>
+  <el-button type="success" icon="el-icon-check" circle></el-button>
+  <el-button type="info" icon="el-icon-message" circle></el-button>
+  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
+  <el-button type="danger" icon="el-icon-delete" circle></el-button>
+</el-row>
 ```
 :::
 
 ### Disabled Button
 
-The `disableds` attribute determines if the button is disabled.
+The `disabled` attribute determines if the button is disabled.
 
 :::demo Use `disabled` attribute to determine whether a button is disabled. It accepts a `Boolean` value.
 
 ```html
-<el-button :plain="true" :disabled="true">Default Button</el-button>
-<el-button type="primary" disabled>Primary Button</el-button>
-<el-button type="text" disabled>Text Button</el-button>
+<el-row>
+  <el-button disabled>Default</el-button>
+  <el-button type="primary" disabled>Primary</el-button>
+  <el-button type="success" disabled>Success</el-button>
+  <el-button type="info" disabled>Info</el-button>
+  <el-button type="warning" disabled>Warning</el-button>
+  <el-button type="danger" disabled>Danger</el-button>
+</el-row>
+
+<el-row>
+  <el-button plain disabled>Plain</el-button>
+  <el-button type="primary" plain disabled>Primary</el-button>
+  <el-button type="success" plain disabled>Success</el-button>
+  <el-button type="info" plain disabled>Info</el-button>
+  <el-button type="warning" plain disabled>Warning</el-button>
+  <el-button type="danger" plain disabled>Danger</el-button>
+</el-row>
 ```
 :::
 
-### Color Indication
+### Text Button
 
-Different colors represent different meanings.
+Buttons without border and background.
 
-:::demo Use `plain` attribute to create a plain button, and it accepts a `Boolean` value. You can assign different `type` to a plain button as mentioned above. **Note**: When using the plain button, you still can set `type` to `text`, but it makes no difference. A plain button will be styled like a `text button` by default.
+:::demo
 ```html
-<div class="block">
-  <span class="demonstration">Default</span>
-  <span class="wrapper">
-    <el-button type="success">Success</el-button>
-    <el-button type="warning">Warning</el-button>
-    <el-button type="danger">Danger</el-button>
-    <el-button type="info">Info</el-button>
-  </span>
-</div>
-<div class="block">
-  <span class="demonstration">Hover to display color</span>
-  <span class="wrapper">
-    <el-button :plain="true" type="success">Success</el-button>
-    <el-button :plain="true" type="warning">Warning</el-button>
-    <el-button :plain="true" type="danger">Danger</el-button>
-    <el-button :plain="true" type="info">Info</el-button>
-  </span>
-</div>
+<el-button type="text">Text Button</el-button>
+<el-button type="text" disabled>Text Button</el-button>
 ```
 :::
 
 ### Icon Button
 
-Use icons to add more meaning to Button. You can use icon alone to save some space, or with text together.
+Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text.
 
 :::demo Use the `icon` attribute to add icon. You can find the icon list in Element icon component. Adding icons to the right side of the text is achievable with an `<i>` tag. Custom icons can be used as well.
 
 ```html
-<el-button type="primary" icon="edit"></el-button>
-<el-button type="primary" icon="share"></el-button>
-<el-button type="primary" icon="delete"></el-button>
-<el-button type="primary" icon="search">Search</el-button>
+<el-button type="primary" icon="el-icon-edit"></el-button>
+<el-button type="primary" icon="el-icon-share"></el-button>
+<el-button type="primary" icon="el-icon-delete"></el-button>
+<el-button type="primary" icon="el-icon-search">Search</el-button>
 <el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
 ```
 :::
@@ -146,13 +130,13 @@ Displayed as a button group, can be used to group a series of similar operations
 
 ```html
 <el-button-group>
-  <el-button type="primary" icon="arrow-left">Previous Page</el-button>
+  <el-button type="primary" icon="el-icon-arrow-left">Previous Page</el-button>
   <el-button type="primary">Next Page<i class="el-icon-arrow-right el-icon-right"></i></el-button>
 </el-button-group>
 <el-button-group>
-  <el-button type="primary" icon="edit"></el-button>
-  <el-button type="primary" icon="share"></el-button>
-  <el-button type="primary" icon="delete"></el-button>
+  <el-button type="primary" icon="el-icon-edit"></el-button>
+  <el-button type="primary" icon="el-icon-share"></el-button>
+  <el-button type="primary" icon="el-icon-delete"></el-button>
 </el-button-group>
 ```
 :::
@@ -172,24 +156,34 @@ Click the button to load data, then the button displays a loading state.
 
 Besides default size, Button component provides three additional sizes for you to choose among different scenarios.
 
-:::demo Use attribute `size` to set additional sizes with `large`, `small` or `mini`.
+:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
 
 ```html
-<el-button type="primary" size="large">Large Button</el-button>
-<el-button type="primary">Default Button</el-button>
-<el-button type="primary" size="small">Small Button</el-button>
-<el-button type="primary" size="mini">Mini Button</el-button>
+<el-row>
+  <el-button>Default</el-button>
+  <el-button size="medium">Medium</el-button>
+  <el-button size="small">Small</el-button>
+  <el-button size="mini">Mini</el-button>
+</el-row>
+<el-row>
+  <el-button round>Default</el-button>
+  <el-button size="medium" round>Medium</el-button>
+  <el-button size="small" round>Small</el-button>
+  <el-button size="mini" round>Mini</el-button>
+</el-row>
 ```
 :::
 
 ### Attributes
 | Attribute      | Description    | Type      | Accepted values       | Default   |
 |---------- |-------- |---------- |-------------  |-------- |
-| size     | button size   | string  |   large/small/mini            |    —     |
-| type     | button type   | string    |   primary/success/warning/danger/info/text |     —    |
-| plain     | determine whether it's a plain button   | Boolean    | — | false   |
-| loading   | determine whether it's loading   | Boolean    | — | false   |
+| size     | button size   | string  |   medium / small / mini            |    —     |
+| type     | button type   | string    |   primary / success / warning / danger / info / text |     —    |
+| plain     | determine whether it's a plain button   | boolean    | — | false   |
+| round     | determine whether it's a round button   | boolean    | — | false   |
+| circle     | determine whether it's a circle button   | boolean    | — | false   |
+| loading   | determine whether it's loading   | boolean    | — | false   |
 | disabled  | disable the button    | boolean   | —   | false   |
-| icon  | button icon, accepts an icon name of Element icon component | string   |  —  |  —  |
+| icon  | icon class name | string   |  —  |  —  |
 | autofocus  | same as native button's `autofocus` | boolean   |  —  |  false  |
-| native-type | same as native button's `type` | string | button/submit/reset | button |
\ No newline at end of file
+| native-type | same as native button's `type` | string | button / submit / reset | button |
\ No newline at end of file
diff --git a/examples/docs/en-US/card.md b/examples/docs/en-US/card.md
index bf86f14aec..d657fc85e7 100644
--- a/examples/docs/en-US/card.md
+++ b/examples/docs/en-US/card.md
@@ -25,7 +25,7 @@
   }
 
   .item {
-    padding: 18px 0;
+    margin-bottom: 18px;
   }
 
   .button {
@@ -57,8 +57,8 @@ Card includes title, content and operations.
 ```html
 <el-card class="box-card">
   <div slot="header" class="clearfix">
-    <span style="line-height: 36px;">Card name</span>
-    <el-button style="float: right;" type="primary">Operation button</el-button>
+    <span>Card name</span>
+    <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>
   </div>
   <div v-for="o in 4" :key="o" class="text item">
     {{'List item ' + o }}
@@ -71,16 +71,16 @@ Card includes title, content and operations.
   }
 
   .item {
-    padding: 18px 0;
+    margin-bottom: 18px;
   }
 
   .clearfix:before,
   .clearfix:after {
-      display: table;
-      content: "";
+    display: table;
+    content: "";
   }
   .clearfix:after {
-      clear: both
+    clear: both
   }
 
   .box-card {
@@ -183,8 +183,35 @@ export default {
 ```
 :::
 
+### Shadow
+
+You can define when to show the card shadows
+
+:::demo The `shadow` attribute determines when the card shadows are displayed. It can be `always`, `hover` or `never`.
+```html
+<el-row :gutter="12">
+  <el-col :span="8">
+    <el-card shadow="always">
+      Always
+    </el-card>
+  </el-col>
+  <el-col :span="8">
+    <el-card shadow="hover">
+      Hover
+    </el-card>
+  </el-col>
+  <el-col :span="8">
+    <el-card shadow="never">
+      Never
+    </el-card>
+  </el-col>
+</el-row>
+```
+:::
+
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
-| header | Title of the card. Also accepts a DOM passed by `slot#header` | string| — | — |
+| header | title of the card. Also accepts a DOM passed by `slot#header` | string| — | — |
 | body-style | CSS style of body | object| — | { padding: '20px' } |
+| shadow | when to show card shadows | string | always / hover / never | always |
diff --git a/examples/docs/en-US/carousel.md b/examples/docs/en-US/carousel.md
index a63e75c713..01efdc9cb6 100644
--- a/examples/docs/en-US/carousel.md
+++ b/examples/docs/en-US/carousel.md
@@ -15,7 +15,7 @@
     padding: 30px;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    float: left;
+    display: inline-block;
     width: 50%;
     box-sizing: border-box;
     &:last-child {
@@ -65,7 +65,7 @@ Loop a series of images or texts in a limited space
 
 ### Basic usage
 
-::: demo Combine `el-carousel` with `el-carousel-item`, and you'll get a carousel. Content of each slide is completely customizable, and you just need to place it inside  `el-carousel-item` tag. By default the carousel switches when mouse hovers over an indicator. Set `trigger` to `click`, and the carousel switches only when an indicator is clicked.
+:::demo Combine `el-carousel` with `el-carousel-item`, and you'll get a carousel. Content of each slide is completely customizable, and you just need to place it inside  `el-carousel-item` tag. By default the carousel switches when mouse hovers over an indicator. Set `trigger` to `click`, and the carousel switches only when an indicator is clicked.
 ```html
 <template>
   <div class="block">
@@ -110,7 +110,7 @@ Loop a series of images or texts in a limited space
 
 Indicators can be displayed outside the carousel
 
-::: demo The `indicator-position` attribute determines where the indicators are located. By default they are inside the carousel, and setting `indicator-position` to `outside` moves them outside; setting `indicator-position` to `none` hides the indicators.
+:::demo The `indicator-position` attribute determines where the indicators are located. By default they are inside the carousel, and setting `indicator-position` to `outside` moves them outside; setting `indicator-position` to `none` hides the indicators.
 ```html
 <template>
   <el-carousel indicator-position="outside">
@@ -144,7 +144,7 @@ Indicators can be displayed outside the carousel
 
 You can define when arrows are displayed
 
-::: demo The `arrow` attribute determines when arrows are displayed. By default they appear when mouse hovers over the carousel. Setting `arrow` to `always` or `never` shows/hides the arrows permanently.
+:::demo The `arrow` attribute determines when arrows are displayed. By default they appear when mouse hovers over the carousel. Setting `arrow` to `always` or `never` shows/hides the arrows permanently.
 ```html
 <template>
   <el-carousel :interval="5000" arrow="always">
@@ -178,7 +178,7 @@ You can define when arrows are displayed
 
 When a page is wide enough but has limited height, you can activate card mode for carousels
 
-::: demo Setting `type` to `card` activates the card mode. Apart from the appearance, the biggest difference between card mode and common mode is that clicking the slides at both sides directly switches the carousel in card mode.
+:::demo Setting `type` to `card` activates the card mode. Apart from the appearance, the biggest difference between card mode and common mode is that clicking the slides at both sides directly switches the carousel in card mode.
 ```html
 <template>
   <el-carousel :interval="4000" type="card" height="200px">
diff --git a/examples/docs/en-US/cascader.md b/examples/docs/en-US/cascader.md
index 0ccb071990..e8582b9450 100644
--- a/examples/docs/en-US/cascader.md
+++ b/examples/docs/en-US/cascader.md
@@ -263,7 +263,7 @@
     padding: 30px 0;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    float: left;
+    display: inline-block;
     width: 50%;
     box-sizing: border-box;
     &:last-child {
@@ -1669,6 +1669,7 @@ Search and select options with a keyword.
 | options   | data of the options | array | — | — |
 | props | configuration options, see the following table | object | — | — |
 | value | selected value | array | — | — |
+| separator | option separator | string | — | / |
 | popper-class | custom class name for Cascader's dropdown | string | — | — |
 | placeholder | input placeholder | string | — | Select |
 | disabled  | whether Cascader is disabled | boolean |  — | false |
@@ -1676,9 +1677,10 @@ Search and select options with a keyword.
 | expand-trigger  | trigger mode of expanding current item | string | click / hover | click |
 | show-all-levels | whether to display all levels of the selected value in the input | boolean | — | true |
 | filterable  | whether the options can be searched | boolean | — | — |
-| debounce | debounce delay when typing filter keyword, in millisecond | number | — | 300 |
+| debounce | debounce delay when typing filter keyword, in milliseconds | number | — | 300 |
 | change-on-select | whether selecting an option of any level is permitted | boolean | — | false |
-| size  | size of Input | string | large / small / mini | — |
+| size  | size of Input | string | medium / small / mini | — |
+| before-filter | hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted | function(value) | — | — |
 
 ### props
 | Attribute | Description | Type | Accepted Values | Default |
@@ -1687,10 +1689,11 @@ Search and select options with a keyword.
 | value     | specify which key of option object is used as the option's value | string | — | — |
 | children  | specify which key of option object is used as the option's child options | string | — | — |
 | disabled  | specify which key of option object indicates if the option is disabled | string | — | — |
-| before-filter | hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted | function(value) | — | — |
 
 ### Events
 | Event Name | Description | Parameters |
 |---------- |-------- |---------- |
 | change  | triggers when the binding value changes | value |
-| active-item-change | triggers when active option changes, only works when `change-on-select` is `false` | an array of active options |
+| active-item-change | triggers when active option of its parent changes, only works when `change-on-select` is `false` | an array of active options |
+| blur | triggers when Cascader blurs | (event: Event) |
+| focus | triggers when Cascader focuses | (event: Event) |
diff --git a/examples/docs/en-US/checkbox.md b/examples/docs/en-US/checkbox.md
index 096749eec9..7b8676def4 100644
--- a/examples/docs/en-US/checkbox.md
+++ b/examples/docs/en-US/checkbox.md
@@ -8,6 +8,10 @@
         checked: true,
         checked1: false,
         checked2: true,
+        checked3: true,
+        checked4: false,
+        checked5: false,
+        checked6: true,
         isValid: 'valid',
         checkAll: false,
         cities: cityOptions,
@@ -15,16 +19,19 @@
         checkedCities1: ['Shanghai', 'Beijing'],
         isIndeterminate: true,
         checkboxGroup1: ['Shanghai'],
-        checkboxGroup2: ['Beijing'],
-        checkboxGroup3: ['Guangzhou']
+        checkboxGroup2: ['Shanghai'],
+        checkboxGroup3: ['Shanghai'],
+        checkboxGroup4: ['Shanghai'],
+        checkboxGroup5: [],
+        checkboxGroup6: []
       };
     },
     methods: {
       handleChange(ev) {
         console.log(ev);
       },
-      handleCheckAllChange(event) {
-        this.checkedCities = event.target.checked ? cityOptions : [];
+      handleCheckAllChange(val) {
+        this.checkedCities = val ? cityOptions : [];
         this.isIndeterminate = false;
       },
       handleCheckedCitiesChange(value) {
@@ -67,7 +74,7 @@ Checkbox can be used alone to switch between two states.
 
 Disabled state for checkbox.
 
-::: demo Set the `disabled` attribute.
+:::demo Set the `disabled` attribute.
 
 ```html
 <template>
@@ -135,15 +142,15 @@ The `indeterminate` property can help you to achieve a 'check all' effect.
   export default {
     data() {
       return {
-        checkAll: true,
+        checkAll: false,
         checkedCities: ['Shanghai', 'Beijing'],
         cities: cityOptions,
         isIndeterminate: true
       };
     },
     methods: {
-      handleCheckAllChange(event) {
-        this.checkedCities = event.target.checked ? cityOptions : [];
+      handleCheckAllChange(val) {
+        this.checkedCities = val ? cityOptions : [];
         this.isIndeterminate = false;
       },
       handleCheckedCitiesChange(value) {
@@ -190,21 +197,29 @@ The `min` and `max` properties can help you to limit the number of checked items
 
 Checkbox with button styles.
 
-:::demo You just need to change `<el-checkbox>` element into `<el-checkbox-button>` element. We also provide `size` attribute for these buttons: `large` and `small`.
+:::demo You just need to change `el-checkbox` element into `el-checkbox-button` element. We also provide `size` attribute.
 ```html
 <template>
-  <div style="margin: 15px 0;"></div>
-  <el-checkbox-group v-model="checkboxGroup1">
-    <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
-  </el-checkbox-group>
-  <div style="margin: 15px 0;"></div>
-  <el-checkbox-group v-model="checkboxGroup2" size="small">
-    <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === 'Shenzhen'" :key="city">{{city}}</el-checkbox-button>
-  </el-checkbox-group>
-  <div style="margin: 15px 0;"></div>
-  <el-checkbox-group v-model="checkboxGroup3" size="large" fill="#324057" text-color="#a4aebd" :min="1" :max="3">
-    <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
-  </el-checkbox-group>
+  <div>
+    <el-checkbox-group v-model="checkboxGroup1">
+      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup2" size="medium">
+      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup3" size="small">
+      <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === 'Beijing'" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
+      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
 </template>
 <script>
   const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
@@ -213,8 +228,9 @@ Checkbox with button styles.
     data () {
       return {
         checkboxGroup1: ['Shanghai'],
-        checkboxGroup2: ['Beijing'],
-        checkboxGroup3: ['Guangzhou'],
+        checkboxGroup2: ['Shanghai'],
+        checkboxGroup3: ['Shanghai'],
+        checkboxGroup4: ['Shanghai'],
         cities: cityOptions
       };
     }
@@ -223,28 +239,89 @@ Checkbox with button styles.
 ```
 :::
 
+### With borders
+
+:::demo The `border` attribute adds a border to Checkboxes.
+```html
+<template>
+  <div>
+    <el-checkbox v-model="checked3" label="Option1" border></el-checkbox>
+    <el-checkbox v-model="checked4" label="Option2" border></el-checkbox>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox v-model="checked5" label="Option1" border size="medium"></el-checkbox>
+    <el-checkbox v-model="checked6" label="Option2" border size="medium"></el-checkbox>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup5" size="small">
+      <el-checkbox label="Option1" border></el-checkbox>
+      <el-checkbox label="Option2" border disabled></el-checkbox>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
+      <el-checkbox label="Option1" border></el-checkbox>
+      <el-checkbox label="Option2" border></el-checkbox>
+    </el-checkbox-group>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        checked3: true,
+        checked4: false,
+        checked5: false,
+        checked6: true,
+        checkboxGroup5: [],
+        checkboxGroup6: []
+      };
+    }
+  }
+</script>
+```
+:::
+
 ### Checkbox Attributes
 | Attribute      | Description         | Type    | Options                         | Default|
 |---------- |-------- |---------- |-------------  |-------- |
-| label     | value of the checkbox when used inside a `checkbox-group`   | string    |       —        |     —    |
-| true-label | value of the checkbox if it's checked   | string, number    |       —        |     —    |
-| false-label | value of the checkbox if it's not checked   | string, number    |      —         |     —    |
+| label     | value of the Checkbox when used inside a `checkbox-group`   | string / number / boolean   |       —        |     —    |
+| true-label | value of the Checkbox if it's checked   | string / number    |       —        |     —    |
+| false-label | value of the Checkbox if it's not checked   | string / number    |      —         |     —    |
+| disabled  | whether the Checkbox is disabled   | boolean   |  — | false   |
+| border  | whether to add a border around Checkbox  | boolean   | — | false   |
+| size  | size of the Checkbox, only works when `border` is true  | string  | medium / small / mini | — |
 | name | native 'name' attribute | string    |      —         |     —    |
-| disabled  | if the checkbox is disabled   | boolean   |  — | false   |
-| checked  | if the checkbox is checked   | boolean   |  — | false   |
+| checked  | if the Checkbox is checked   | boolean   |  — | false   |
 | indeterminate  | same as `indeterminate` in native checkbox | boolean   |  — | false   |
 
+### Checkbox Events
+| Event Name | Description | Parameters |
+|---------- |-------- |---------- |
+| change  | triggers when the binding value changes | the updated value |
+
 ### Checkbox-group Attributes
 | Attribute      | Description         | Type    | Options                         | Default|
 |---------- |-------- |---------- |-------------  |-------- |
-|size | the size of checkbox buttons | string | large/small | —
-|fill  | border and background color when button is active | string   | — | #20a0ff   |
-|text-color | font color when button is active | string   | — | #ffffff   |
+|size | size of checkbox buttons or bordered checkboxes | string | medium / small / mini | — |
+| disabled  | whether the nesting checkboxes are disabled | boolean   | — | false   |
 | min     | minimum number of checkbox checked   | number    |       —        |     —    |
 | max     | maximum number of checkbox checked   | number    |       —        |     —    |
+|text-color | font color when button is active | string   | — | #ffffff   |
+|fill  | border and background color when button is active | string   | — | #409EFF   |
 
-### Checkbox Events
+### Checkbox-group Events
 | Event Name | Description | Parameters |
 |---------- |-------- |---------- |
-| change  | triggers when the binding value changes | Event object |
+| change  | triggers when the binding value changes | the updated value |
 
+### Checkbox-button Attributes
+| Attribute      | Description         | Type    | Options                         | Default|
+|---------- |-------- |---------- |-------------  |-------- |
+| label     | value of the checkbox when used inside a `checkbox-group` | string / number / boolean  |       —        |     —    |
+| true-label | value of the checkbox if it's checked | string / number | — |     —    |
+| false-label | value of the checkbox if it's not checked | string / number    |      —         |     —    |
+| disabled  | whether the checkbox is disabled | boolean   |  — | false   |
+| name | native 'name' attribute | string    |      —         |     —    |
+| checked  | if the checkbox is checked | boolean   |  — | false   |
diff --git a/examples/docs/en-US/collapse.md b/examples/docs/en-US/collapse.md
index c09bd4912d..42c53c0c23 100644
--- a/examples/docs/en-US/collapse.md
+++ b/examples/docs/en-US/collapse.md
@@ -59,6 +59,11 @@ You can expand multiple panels
       return {
         activeNames: ['1']
       };
+    },
+    methods: {
+      handleChange(val) {
+        console.log(val);
+      }
     }
   }
 </script>
@@ -111,7 +116,7 @@ Besides using the `title` attribute, you can customize panel title with named sl
 <el-collapse accordion>
   <el-collapse-item name="1">
     <template slot="title">
-      Consistency<i class="header-icon el-icon-information"></i>
+      Consistency<i class="header-icon el-icon-info"></i>
     </template>
     <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
     <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
diff --git a/examples/docs/en-US/color-picker.md b/examples/docs/en-US/color-picker.md
index e6005cdd6f..3040d8a0c9 100644
--- a/examples/docs/en-US/color-picker.md
+++ b/examples/docs/en-US/color-picker.md
@@ -2,9 +2,27 @@
   export default {
     data() {
       return {
-        color1: '#20a0ff',
+        color1: '#409EFF',
         color2: null,
-        color3: 'rgba(19, 206, 102, 0.8)'
+        color3: 'rgba(19, 206, 102, 0.8)',
+        color4: '#409EFF',
+        color5: 'rgba(255, 69, 0, 0.68)',
+        predefineColors: [
+          '#ff4500',
+          '#ff8c00',
+          '#ffd700',
+          '#90ee90',
+          '#00ced1',
+          '#1e90ff',
+          '#c71585',
+          'rgba(255, 69, 0, 0.68)',
+          'rgb(255, 120, 0)',
+          'hsv(51, 100, 98)',
+          'hsva(120, 40, 94, 0.5)',
+          'hsl(181, 100%, 37%)',
+          'hsla(209, 100%, 56%, 0.73)',
+          '#c7158577'
+        ]
       };
     },
     mounted() {
@@ -21,7 +39,7 @@
     padding: 30px 0;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    float: left;
+    display: inline-block;
     width: 50%;
     box-sizing: border-box;
     &:last-child {
@@ -34,6 +52,9 @@
     font-size: 14px;
     margin-bottom: 20px;
   }
+  .demo-color-picker .el-color-picker + .el-color-picker {
+    margin-left: 20px;
+  }
 </style>
 
 ## ColorPicker
@@ -57,7 +78,7 @@ ColorPicker is a color selector supporting multiple color formats.
   export default {
     data() {
       return {
-        color1: '#20a0ff',
+        color1: '#409EFF',
         color2: null
       }
     }
@@ -84,11 +105,75 @@ ColorPicker is a color selector supporting multiple color formats.
 ```
 :::
 
+### Predefined colors
+
+:::demo ColorPicker supports predefined color options
+```html
+<el-color-picker
+  v-model="color5"
+  show-alpha
+  :predefine="predefineColors">
+</el-color-picker>
+
+<script>
+  export default {
+    data() {
+      return {
+        color5: 'rgba(255, 69, 0, 0.68)',
+        predefineColors: [
+          '#ff4500',
+          '#ff8c00',
+          '#ffd700',
+          '#90ee90',
+          '#00ced1',
+          '#1e90ff',
+          '#c71585',
+          'rgba(255, 69, 0, 0.68)',
+          'rgb(255, 120, 0)',
+          'hsv(51, 100, 98)',
+          'hsva(120, 40, 94, 0.5)',
+          'hsl(181, 100%, 37%)',
+          'hsla(209, 100%, 56%, 0.73)',
+          '#c7158577'
+        ]
+      }
+    }
+  };
+</script>
+```
+:::
+
+
+### Sizes
+
+:::demo
+```html
+<el-color-picker v-model="color4"></el-color-picker>
+<el-color-picker v-model="color4" size="medium"></el-color-picker>
+<el-color-picker v-model="color4" size="small"></el-color-picker>
+<el-color-picker v-model="color4" size="mini"></el-color-picker>
+
+<script>
+  export default {
+    data() {
+      return {
+        color4: '#409EFF'
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### Attributes
 | Attribute | Description | Type | Accepted Values | Default |
 |---------- |-------- |---------- |-------------  |-------- |
+| disabled | whether to disable the ColorPicker | boolean | — | false |
+| size | size of ColorPicker | string | — | medium / small / mini |
 | show-alpha | whether to display the alpha slider | boolean | — | false |
 | color-format | color format of v-model | string | hsl / hsv / hex / rgb | hex (when show-alpha is false)/ rgb (when show-alpha is true) |
+| popper-class | custom class name for ColorPicker's dropdown | string | — | — |
+| predefine | predefined color options | array | — | — |
 
 ### Events
 | Event Name | Description | Parameters |
diff --git a/examples/docs/en-US/color.md b/examples/docs/en-US/color.md
index bb7717b023..27f0acfb0f 100644
--- a/examples/docs/en-US/color.md
+++ b/examples/docs/en-US/color.md
@@ -2,6 +2,7 @@
   .demo-color-box {
     border-radius: 4px;
     padding: 20px;
+    margin: 5px 0;
     height: 74px;
     box-sizing: border-box;
     color: #fff;
@@ -16,6 +17,7 @@
   .demo-color-box-group {
     .demo-color-box {
       border-radius: 0;
+      margin: 0;
     }
     .demo-color-box:first-child {
       border-radius: 4px 4px 0 0;
@@ -24,15 +26,8 @@
       border-radius: 0 0 4px 4px;
     }
   }
-  .bg-blue-light {
-    background-color: #58b7ff;
-  }
-  .bg-blue,
-  .bg-info {
-    background-color: #20a0ff;
-  }
-  .bg-blue-dark {
-    background-color: #1d8ce0;
+  .bg-blue {
+    background-color: #409EFF;
   }
 
   .bg-success {
@@ -44,43 +39,38 @@
   .bg-danger {
     background-color: #ff4949;
   }
-
-  .bg-black {
-    background-color: #1f2d3d;
-  }
-  .bg-black-light {
-    background-color: #324057;
-  }
-  .bg-black-lighter {
-    background-color: #475669;
+  .bg-info {
+    background-color: #909399;
   }
 
-  .bg-silver {
-    background-color: #8492a6;
+  .bg-text-primary {
+    background-color: #303133;
   }
-  .bg-silver-light {
-    background-color: #99a9bf;
+  .bg-text-regular {
+    background-color: #606266;
   }
-  .bg-silver-lighter {
-    background-color: #c0ccda;
+  .bg-text-secondary {
+    background-color: #909399;
+  }
+  .bg-text-placeholder {
+    background-color: #c0c4cc;
   }
 
-  .bg-gray {
-    background-color: #d3dce6;
+  .bg-border-base {
+    background-color: #dcdfe6;
   }
-  .bg-gray-light {
-    background-color: #e5e9f2;
+  .bg-border-light {
+    background-color: #e4e7ed;
   }
-  .bg-gray-lighter {
-    background-color: #eff2f7;
+  .bg-border-lighter {
+    background-color: #ebeef5;
   }
-
-  .bg-white-dark {
-    background-color: #f9fafc;
+  .bg-border-extra-light {
+    background-color: #f2f6fc;
   }
 
-  .color-gray {
-    color: #5e6d82;
+  [class*=" bg-border-"] {
+    color: #303133;
   }
 </style>
 
@@ -92,14 +82,8 @@ Element uses a specific set of palettes to specify colors to provide a consisten
 The main color of Element is bright and friendly blue.
 
 <el-row :gutter="12">
-  <el-col :span="8">
-    <div class="demo-color-box bg-blue-light">Light Blue<div class="value">#58B7FF</div></div>
-  </el-col>
-  <el-col :span="8">
-    <div class="demo-color-box bg-blue">Blue<div class="value">#20A0FF</div></div>
-  </el-col>
-  <el-col :span="8">
-    <div class="demo-color-box bg-blue-dark">Dark Blue<div class="value">#1D8CE0</div></div>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box bg-blue">Blue<div class="value">#409EFF</div></div>
   </el-col>
 </el-row>
 
@@ -108,17 +92,17 @@ The main color of Element is bright and friendly blue.
 Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation)
 
 <el-row :gutter="12">
-  <el-col :span="6">
-    <div class="demo-color-box bg-info">Blue<div class="value">#20A0FF</div></div>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box bg-success">Success<div class="value">#67C23A</div></div>
   </el-col>
-  <el-col :span="6">
-    <div class="demo-color-box bg-success">Success<div class="value">#13CE66</div></div>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box bg-warning">Warning<div class="value">#E6A23C</div></div>
   </el-col>
-  <el-col :span="6">
-    <div class="demo-color-box bg-warning">Warning<div class="value">#F7BA2A</div></div>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box bg-danger">Danger<div class="value">#F56C6C</div></div>
   </el-col>
-  <el-col :span="6">
-    <div class="demo-color-box bg-danger">Danger<div class="value">#FF4949</div></div>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box bg-info">Info<div class="value">#909399</div></div>
   </el-col>
 </el-row>
 
@@ -127,31 +111,20 @@ Besides the main color, you need to use different scene colors in different scen
 Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure.
 
 <el-row :gutter="12">
-  <el-col :span="6">
-    <div class="demo-color-box-group">
-      <div class="demo-color-box bg-black">Black<div class="value">#1F2D3D</div></div>
-      <div class="demo-color-box bg-black-light">Light Black<div class="value">#324057</div></div>
-      <div class="demo-color-box bg-black-lighter">Extra Light Black<div class="value">#475669</div></div>
-    </div>
-  </el-col>
-  <el-col :span="6">
+  <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box-group">
-      <div class="demo-color-box bg-silver">Silver<div class="value">#8492A6</div></div>
-      <div class="demo-color-box bg-silver-light">Light Silver<div class="value">#99A9BF</div></div>
-      <div class="demo-color-box bg-silver-lighter">Extra Light Silver<div class="value">#C0CCDA</div></div>
+      <div class="demo-color-box bg-text-primary">Primary Text<div class="value">#303133</div></div>
+      <div class="demo-color-box bg-text-regular">Regular Text<div class="value">#606266</div></div>
+      <div class="demo-color-box bg-text-secondary">Secondary Text<div class="value">#909399</div></div>
+      <div class="demo-color-box bg-text-placeholder">Placeholder Text<div class="value">#C0C4CC</div></div>
     </div>
   </el-col>
-  <el-col :span="6">
+  <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box-group">
-      <div class="demo-color-box color-gray bg-gray">Gray<div class="value">#D3DCE6</div></div>
-      <div class="demo-color-box color-gray bg-gray-light">Light Gray<div class="value">#E5E9F2</div></div>
-      <div class="demo-color-box color-gray bg-gray-lighter">Extra Light Gray<div class="value">#EFF2F7</div></div>
-    </div>
-  </el-col>
-  <el-col :span="6">
-    <div class="demo-color-box-group" style="border: 1px solid #e0e6ed;border-radius: 4px;">
-      <div class="demo-color-box color-gray bg-white-dark">Dark White<div class="value">#F9FAFC</div></div>
-      <div class="demo-color-box color-gray bg-white">White<div class="value">#FFFFFF</div></div>
+      <div class="demo-color-box bg-border-base">Base Border<div class="value">#DCDFE6</div></div>
+      <div class="demo-color-box bg-border-light">Light Border<div class="value">#E4E7ED</div></div>
+      <div class="demo-color-box bg-border-lighter">Lighter Border<div class="value">#EBEEF5</div></div>
+      <div class="demo-color-box bg-border-extra-light">Extra Light Border<div class="value">#F2F6FC</div></div>
     </div>
   </el-col>
-</el-row>
\ No newline at end of file
+</el-row>
diff --git a/examples/docs/en-US/container.md b/examples/docs/en-US/container.md
new file mode 100644
index 0000000000..e1a5e4e07f
--- /dev/null
+++ b/examples/docs/en-US/container.md
@@ -0,0 +1,299 @@
+<style>
+  .el-header, .el-footer {
+    background-color: #B3C0D1;
+    color: #333;
+    line-height: 60px;
+  }
+  
+  .el-aside {
+    color: #333;
+  }
+  
+  #common-layouts + .demo-container {
+    .el-header, .el-footer {
+      text-align: center;
+    }
+    
+    .el-aside {
+      background-color: #D3DCE6;
+      text-align: center;
+      line-height: 200px;
+    }
+    
+    .el-main {
+      background-color: #E9EEF3;
+      color: #333;
+      text-align: center;
+      line-height: 160px;
+    }
+    
+    & > .source > .el-container {
+      margin-bottom: 40px;
+    
+      &:nth-child(5) .el-aside,
+      &:nth-child(6) .el-aside {
+        line-height: 260px;
+      }
+    
+     &:nth-child(7) .el-aside {
+       line-height: 320px;
+      }
+    }
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      const item = {
+        date: '2016-05-02',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      };
+      return {
+        tableData: Array(20).fill(item)
+      }
+    }
+  };
+</script>
+
+## Container
+Container components for scaffolding basic structure of the page:
+
+`<el-container>`: wrapper container. When nested with a `<el-header>` or `<el-footer>`, all its child elements will be vertically arranged. Otherwise horizontally.
+
+`<el-header>`: container for headers.
+
+`<el-aside>`: container for side sections (usually a side nav).
+
+`<el-main>`: container for main sections.
+
+`<el-footer>`: container for footers.
+
+:::tip
+These components use flex for layout, so please make sure your browser supports it. Besides, `<el-container>`'s direct child elements have to be one or more of the latter four components. And father element of the latter four components must be a `<el-container>`.
+:::
+
+### Common layouts
+
+:::demo
+```html
+<el-container>
+  <el-header>Header</el-header>
+  <el-main>Main</el-main>
+</el-container>
+
+<el-container>
+  <el-header>Header</el-header>
+  <el-main>Main</el-main>
+  <el-footer>Footer</el-footer>
+</el-container>
+
+<el-container>
+  <el-aside width="200px">Aside</el-aside>
+  <el-main>Main</el-main>
+</el-container>
+
+<el-container>
+  <el-header>Header</el-header>
+  <el-container>
+    <el-aside width="200px">Aside</el-aside>
+    <el-main>Main</el-main>
+  </el-container>
+</el-container>
+
+<el-container>
+  <el-header>Header</el-header>
+  <el-container>
+    <el-aside width="200px">Aside</el-aside>
+    <el-container>
+      <el-main>Main</el-main>
+      <el-footer>Footer</el-footer>
+    </el-container>
+  </el-container>
+</el-container>
+
+<el-container>
+  <el-aside width="200px">Aside</el-aside>
+  <el-container>
+    <el-header>Header</el-header>
+    <el-main>Main</el-main>
+  </el-container>
+</el-container>
+
+<el-container>
+  <el-aside width="200px">Aside</el-aside>
+  <el-container>
+    <el-header>Header</el-header>
+    <el-main>Main</el-main>
+    <el-footer>Footer</el-footer>
+  </el-container>
+</el-container>
+
+<style>
+  .el-header, .el-footer {
+    background-color: #B3C0D1;
+    color: #333;
+    text-align: center;
+    line-height: 60px;
+  }
+  
+  .el-aside {
+    background-color: #D3DCE6;
+    color: #333;
+    text-align: center;
+    line-height: 200px;
+  }
+  
+  .el-main {
+    background-color: #E9EEF3;
+    color: #333;
+    text-align: center;
+    line-height: 160px;
+  }
+  
+  body > .el-container {
+    margin-bottom: 40px;
+  }
+  
+  .el-container:nth-child(5) .el-aside,
+  .el-container:nth-child(6) .el-aside {
+    line-height: 260px;
+  }
+  
+  .el-container:nth-child(7) .el-aside {
+    line-height: 320px;
+  }
+</style>
+```
+:::
+
+### Example
+
+:::demo
+```html
+<el-container style="height: 500px; border: 1px solid #eee">
+  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
+    <el-menu :default-openeds="['1', '3']">
+      <el-submenu index="1">
+        <template slot="title"><i class="el-icon-message"></i>Navigator One</template>
+        <el-menu-item-group>
+          <template slot="title">Group 1</template>
+          <el-menu-item index="1-1">Option 1</el-menu-item>
+          <el-menu-item index="1-2">Option 2</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group 2">
+          <el-menu-item index="1-3">Option 3</el-menu-item>
+        </el-menu-item-group>
+        <el-submenu index="1-4">
+          <template slot="title">Option4</template>
+          <el-menu-item index="1-4-1">Option 4-1</el-menu-item>
+        </el-submenu>
+      </el-submenu>
+      <el-submenu index="2">
+        <template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>
+        <el-menu-item-group>
+          <template slot="title">Group 1</template>
+          <el-menu-item index="2-1">Option 1</el-menu-item>
+          <el-menu-item index="2-2">Option 2</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group 2">
+          <el-menu-item index="2-3">Option 3</el-menu-item>
+        </el-menu-item-group>
+        <el-submenu index="2-4">
+          <template slot="title">Option 4</template>
+          <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
+        </el-submenu>
+      </el-submenu>
+      <el-submenu index="3">
+        <template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>
+        <el-menu-item-group>
+          <template slot="title">Group 1</template>
+          <el-menu-item index="3-1">Option 1</el-menu-item>
+          <el-menu-item index="3-2">Option 2</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group 2">
+          <el-menu-item index="3-3">Option 3</el-menu-item>
+        </el-menu-item-group>
+        <el-submenu index="3-4">
+          <template slot="title">Option 4</template>
+          <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
+        </el-submenu>
+      </el-submenu>
+    </el-menu>
+  </el-aside>
+  
+  <el-container>
+    <el-header style="text-align: right; font-size: 12px">
+      <el-dropdown>
+        <i class="el-icon-setting" style="margin-right: 15px"></i>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item>View</el-dropdown-item>
+          <el-dropdown-item>Add</el-dropdown-item>
+          <el-dropdown-item>Delete</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <span>Tom</span>
+    </el-header>
+    
+    <el-main>
+      <el-table :data="tableData">
+        <el-table-column prop="date" label="Date" width="140">
+        </el-table-column>
+        <el-table-column prop="name" label="Name" width="120">
+        </el-table-column>
+        <el-table-column prop="address" label="Address">
+        </el-table-column>
+      </el-table>
+    </el-main>
+  </el-container>
+</el-container>
+
+<style>
+  .el-header {
+    background-color: #B3C0D1;
+    color: #333;
+    line-height: 60px;
+  }
+  
+  .el-aside {
+    color: #333;
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      const item = {
+        date: '2016-05-02',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      };
+      return {
+        tableData: Array(20).fill(item)
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Container Attributes
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| direction | layout direction for child elements | string | horizontal / vertical | vertical when nested with `el-header` or `el-footer`; horizontal otherwise |
+
+### Header Attributes
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| height | height of the header | string | — | 60px |
+
+### Aside Attributes
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| width | width of the side section | string | — | 300px |
+
+### Footer Attributes
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| height | height of the footer | string | — | 60px |
\ No newline at end of file
diff --git a/examples/docs/en-US/custom-theme.md b/examples/docs/en-US/custom-theme.md
index f82290ed75..fd277bec2a 100644
--- a/examples/docs/en-US/custom-theme.md
+++ b/examples/docs/en-US/custom-theme.md
@@ -1,33 +1,57 @@
 ## Custom theme
-Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea, and this is where our theme customization tools kick in.
+Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea. We provide three ways to change the style variables.
 
-## Changing theme color
-If you just want to change the theme color of Element, the [theme preview website](https://elementui.github.io/theme-preview/#/en-US) is recommended.
-
-The main color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects.
+### Changing theme color
+If you just want to change the theme color of Element, the [theme preview website](https://elementui.github.io/theme-chalk-preview/#/en-US) is recommended. The theme color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects.
 
 The above website enables you to preview theme of a new theme color in real-time, and it can generate a complete style package based on the new theme color for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or 'Import component theme on demand' part of this section).
 
-## More customizations
-If you need more customization than just changing the theme color, please follow these steps:
+### Update SCSS variables in your project
+`theme-chalk` is written in SCSS. If your project also uses SCSS, you can directly change Element style variables. Create a new style file, e.g. `element-variables.scss`:
+
+```html
+/* theme color */
+$--color-primary: teal;
+
+/* icon font path, required */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@import "~element-ui/packages/theme-chalk/src/index";
+```
+
+Then in the entry file of your project, import this style file instead of Element's built CSS:
+```JS
+import Vue from 'vue'
+import Element from 'element-ui'
+import './element-variables.scss'
+
+Vue.use(Element)
+```
+
+:::tip
+Note that it is required to override icon font path to the relative path of Element's font files.
+:::
+
+### CLI theme tool
+If you project doesn't use SCSS, you can customize themes with our CLI theme tool:
 
-### Install related tool
+#### <strong>Install</strong>
 First install the theme generator globally or locally. Local install is recommended because in this way, when others clone your project, npm will automatically install it for them.
 ```shell
 npm i element-theme -g
 ```
 
-Then install the default theme from npm or GitHub.
+Then install the chalk theme from npm or GitHub.
 ```shell
 # from npm
-npm i element-theme-default -D
+npm i element-theme-chalk -D
 
 # from GitHub
-npm i https://github.com/ElementUI/theme-default -D
+npm i https://github.com/ElementUI/theme-chalk -D
 ```
 
-### Initialize variable file
-After successfully installing the above packages, a command named `et` is available in CLI (if the packages are installed locally, use `node_modules/.bin/et` instead). Run `-i` to initialize the variable file which outputs to `element-variables.css` by default. And you can specify its output directory as you will.
+#### <strong>Initialize variable file</strong>
+After successfully installing the above packages, a command named `et` is available in CLI (if the packages are installed locally, use `node_modules/.bin/et` instead). Run `-i` to initialize the variable file which outputs to `element-variables.scss` by default. And you can specify its output directory as you will.
 
 ```shell
 et -i [custom output file]
@@ -35,32 +59,34 @@ et -i [custom output file]
 > ✔ Generator variables file
 ```
 
-In `element-variables.css` you can find all the variables we used to style Element and they are defined in CSS4 style:
+In `element-variables.scss` you can find all the variables we used to style Element and they are defined in SCSS format. Here's a snippet:
 ```css
-:root {
-
-  /* Colors
-  -------------------------- */
-  --color-primary: #20a0ff;
-  --color-success: #13ce66;
-  --color-warning: #f7ba2a;
-  --color-danger: #ff4949;
-  --color-info: #50BFFF;
-  --color-blue: #2e90fe;
-  --color-blue-light: #5da9ff;
-  --color-blue-lighter: rgba(var(--color-blue), 0.12);
-  --color-white: #fff;
-  --color-black: #000;
-  --color-grey: #C0CCDA;
+$--color-primary: #409EFF !default;
+$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
+$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
+$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
+$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
+$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
+$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
+$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
+$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
+$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
+
+$--color-success: #67c23a !default;
+$--color-warning: #e6a23c !default;
+$--color-danger: #f56c6c !default;
+$--color-info: #909399 !default;
+
+...
 ```
 
-### Modify variables
-Just edit `element-variables.css`, e.g. changing the theme color to red:
+#### <strong>Modify variables</strong>
+Just edit `element-variables.scss`, e.g. changing the theme color to red:
 ```CSS
---color-primary: red;
+$--color-primary: red;
 ```
 
-### Build theme
+#### <strong>Build theme</strong>
 After saving the variable file, use `et` to build your theme. You can activate `watch` mode by adding a parameter `-w`. And if you customized the variable file's output, you need to add a parameter `-c` and variable file's name:
 ```shell
 et
@@ -69,7 +95,7 @@ et
 > ✔ build element theme
 ```
 
-### Import custom theme
+#### <strong>Import custom theme</strong>
 By default the build theme file is placed inside `./theme`. You can specify its output directory with parameter `-o`. Importing your own theme is just like importing the default theme, only this time you import the file you just built:
 
 ```javascript
@@ -80,7 +106,7 @@ import Vue from 'vue'
 Vue.use(ElementUI)
 ```
 
-### Import component theme on demand
+#### <strong>Import component theme on demand</strong>
 If you are using `babel-plugin-component` for on-demand import, just modify `.babelrc` and specify `styleLibraryName` to the path where your custom theme is located relative to `.babelrc`. Note that `~` is required:
 ```json
 {
@@ -93,4 +119,4 @@ If you are using `babel-plugin-component` for on-demand import, just modify `.ba
 }
 ```
 
-If you are unfamiliar with `babel-plugin-component`, please refer to <a href="./#/en-US/component/quickstart">Quick Start</a>. For more details, check out the [project repository](https://github.com/ElementUI/element-theme) of `element-theme`.
+If you are unfamiliar with `babel-plugin-component`, please refer to <a href="./#/en-US/component/quickstart">Quick Start</a>. For more details, check out the [project repository](https://github.com/ElementUI/element-theme) of `element-theme`.
\ No newline at end of file
diff --git a/examples/docs/en-US/date-picker.md b/examples/docs/en-US/date-picker.md
index 532e1a5b15..d8e08b2e8d 100644
--- a/examples/docs/en-US/date-picker.md
+++ b/examples/docs/en-US/date-picker.md
@@ -3,6 +3,9 @@
     data() {
       return {
         pickerOptions1: {
+          disabledDate(time) {
+            return time.getTime() > Date.now();
+          },
           shortcuts: [{
             text: 'Today',
             onClick(picker) {
@@ -57,7 +60,14 @@
         value4: '',
         value5: '',
         value6: '',
-        value7: ''
+        value7: '',
+        value8: '',
+        value9: '',
+        value10: '',
+        value11: '',
+        value12: '',
+        value13: '',
+        value14: ''
       };
     }
   };
@@ -79,6 +89,20 @@
     }
   }
 
+  .demo-date-picker .container {
+    flex: 1;
+    border-right: solid 1px #EFF2F6;
+    .block {
+      border-right: none;
+      &:last-child {
+        border-top: solid 1px #EFF2F6;
+      }
+    }
+    &:last-child {
+      border-right: none;
+    }
+  }
+
   .demo-date-picker .demonstration {
     display: block;
     color: #8492a6;
@@ -123,6 +147,9 @@ Basic date picker measured by 'day'.
     data() {
       return {
         pickerOptions1: {
+          disabledDate(time) {
+            return time.getTime() > Date.now();
+          },
           shortcuts: [{
             text: 'Today',
             onClick(picker) {
@@ -151,40 +178,51 @@ Basic date picker measured by 'day'.
   };
 </script>
 ```
-
 :::
 
 ### Other measurements
 
-You can choose week, month or year by extending the standard date picker component.
+You can choose week, month, year or multiple dates by extending the standard date picker component.
 
 :::demo
 
 ```html
-<div class="block">
-  <span class="demonstration">Week</span>
-  <el-date-picker
-    v-model="value3"
-    type="week"
-    format="Week WW"
-    placeholder="Pick a week">
-  </el-date-picker>
-</div>
-<div class="block">
-  <span class="demonstration">Month</span>
-  <el-date-picker
-    v-model="value4"
-    type="month"
-    placeholder="Pick a month">
-  </el-date-picker>
+<div class="container">
+  <div class="block">
+    <span class="demonstration">Week</span>
+    <el-date-picker
+      v-model="value3"
+      type="week"
+      format="Week WW"
+      placeholder="Pick a week">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">Month</span>
+    <el-date-picker
+      v-model="value4"
+      type="month"
+      placeholder="Pick a month">
+    </el-date-picker>
+  </div>
 </div>
-<div class="block">
-  <span class="demonstration">Year</span>
-  <el-date-picker
-    v-model="value5"
-    type="year"
-    placeholder="Pick a year">
-  </el-date-picker>
+<div class="container">
+  <div class="block">
+    <span class="demonstration">Year</span>
+    <el-date-picker
+      v-model="value5"
+      type="year"
+      placeholder="Pick a year">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">Dates</span>
+    <el-date-picker
+      type="dates"
+      v-model="value14"
+      placeholder="Pick one or more dates">
+    </el-date-picker>
+  </div>
 </div>
 
 <script>
@@ -193,7 +231,8 @@ You can choose week, month or year by extending the standard date picker compone
       return {
         value3: '',
         value4: '',
-        value5: ''
+        value5: '',
+        value14: ''
       };
     }
   };
@@ -206,7 +245,7 @@ You can choose week, month or year by extending the standard date picker compone
 
 Picking a date range is supported.
 
-:::demo
+:::demo When in range mode, the left and right panels are linked by default. If you want the two panels to switch current months independently, you can use the `unlink-panels` attribute.
 
 ```html
 <template>
@@ -215,7 +254,9 @@ Picking a date range is supported.
     <el-date-picker
       v-model="value6"
       type="daterange"
-      placeholder="Pick a range">
+      range-separator="To"
+      start-placeholder="Start date"
+      end-placeholder="End date">
     </el-date-picker>
   </div>
   <div class="block">
@@ -224,7 +265,10 @@ Picking a date range is supported.
       v-model="value7"
       type="daterange"
       align="right"
-      placeholder="Pick a range"
+      unlink-panels
+      range-separator="To"
+      start-placeholder="Start date"
+      end-placeholder="End date"
       :picker-options="pickerOptions2">
     </el-date-picker>
   </div>
@@ -271,22 +315,186 @@ Picking a date range is supported.
 
 :::
 
+###  Default Value
+
+If user hasn't picked a date, shows today's calendar by default. You can use `default-value` to set another date. Its value should be parsable by `new Date()`.
+
+If type is `daterange`, `default-value` sets the left side calendar.
+
+:::demo
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">date</span>
+    <el-date-picker
+      v-model="value8"
+      type="date"
+      placeholder="Pick a date"
+      default-value="2010-10-01">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">daterange</span>
+    <el-date-picker
+      v-model="value9"
+      type="daterange"
+      align="right"
+      start-placeholder="Start Date"
+      end-placeholder="End Date"
+      default-value="2010-10-01">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value8: '',
+        value9: ''
+      };
+    }
+  };
+</script>
+```
+:::
+
+###  Date Formats
+Use `format` to control displayed text's format in the input box. Use `value-format` to control binding value's format.
+
+By default, the component accepts and emits a `Date` object. Below are supported format strings, using UTC 2017-01-02 03:04:05 as an example:
+
+:::warning
+Pay attention to capitalization
+:::
+
+| format | meaning | note | example |
+|------|------|------|------|------|
+| `yyyy` | year | | 2017 |
+| `M`  | month | no leading 0 | 1 |
+| `MM` | month | | 01 |
+| `W`  | week | only for week picker's `format`; no leading 0 | 1 |
+| `WW` | week | only for week picker's `format`| 01 |
+| `d`  | day | no leading 0 | 2 |
+| `dd` | day | | 02 |
+| `H`  | hour | 24-hour clock; no leading 0 | 3 |
+| `HH` | hour | 24-hour clock | 03 |
+| `h`  | hour | 12-hour clock; must be used with `A` or `a`; no leading 0 | 3 |
+| `hh` | hour | 12-hour clock; must be used with `A` or `a` | 03 |
+| `m`  | minute | no leading 0 | 4 |
+| `mm` | minute | | 04 |
+| `s`  | second | no leading 0 | 5 |
+| `ss` | second | | 05 |
+| `A`  | AM/PM | only for `format`, uppercased | AM |
+| `a`  | am/pm | only for `format`, lowercased | am |
+| `timestamp` | JS timestamp | only for `value-format`; binding value will be a `number` | 1483326245000 |
+
+:::demo
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Emits Date object</span>
+    <div class="demonstration">Value: {{ value10 }}</div>
+    <el-date-picker
+      v-model="value10"
+      type="date"
+      placeholder="Pick a Date"
+      format="yyyy/MM/dd">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">Use value-format</span>
+    <div class="demonstration">Value: {{ value11 }}</div>
+    <el-date-picker
+      v-model="value11"
+      type="date"
+      placeholder="Pick a Date"
+      format="yyyy/MM/dd"
+      value-format="yyyy-MM-dd">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">Timestamp</span>
+    <div class="demonstration">Value：{{ value12 }}</div>
+    <el-date-picker
+      v-model="value12"
+      type="date"
+      placeholder="Pick a Date"
+      format="yyyy/MM/dd"
+      value-format="timestamp">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value10: '',
+        value11: '',
+        value12: ''
+      };
+    }
+  };
+</script>
+```
+:::
+
+###  Default time for start date and end date
+
+When picking a date range, you can assign the time part for start date and end date.
+
+:::demo By default, the time part of start date and end date are both `00:00:00`. Setting `default-time` can change their time respectively. It accepts an array of up to two strings with the format of `12:00:00`. The first string sets the time for the start date, and the second for the end date.
+```html
+<template>
+  <div class="block">
+    <p>Component value：{{ value13 }}</p>
+    <el-date-picker
+      v-model="value13"
+      type="daterange"
+      start-placeholder="Start date"
+      end-placeholder="End date"
+      :default-time="['00:00:00', '23:59:59']">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value13: ''
+      };
+    }
+  };
+</script>
+```
+:::
+
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | readonly | whether DatePicker is read only | boolean | — | false |
 | disabled | whether DatePicker is disabled | boolean | — | false |
-|size | size of Input | string | large/small/mini | — |
+| size | size of Input | string | large/small/mini | — |
 | editable | whether the input is editable | boolean | — | true |
 | clearable | Whether to show clear button | boolean | — | true |
-| placeholder | placeholder | string | — | — |
-| type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
-| format | format of the picker | string | year `yyyy` month `MM` day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
+| placeholder | placeholder in non-range mode | string | — | — |
+| start-placeholder | placeholder for the start date in range mode | string | — | — |
+| end-placeholder | placeholder for the end date in range mode | string | — | — |
+| type | type of the picker | string | year/month/date/dates/datetime/ week/datetimerange/daterange | date |
+| format | format of the displayed value in the input box | string | see [date formats](#/en-US/component/date-picker#date-formats) | yyyy-MM-dd |
 | align | alignment | left/center/right | left |
 | popper-class | custom class name for DatePicker's dropdown | string | — | — |
 | picker-options | additional options, check the table below | object | — | {} |
-| range-separator | range separator | string | - | ' - ' |
-| default-value | optional default time of the picker | Date | anything accepted by `new Date()` | - |
+| range-separator | range separator | string | — | '-' |
+| default-value | optional, default date of the calendar | Date | anything accepted by `new Date()` | — |
+| default-time | optional, the time value to use when selecting date range | string[] | Array with length 2, each item is a string like `12:00:00`. The first item for the start date and then second item for the end date | — |
+| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | see [date formats](#/en-US/component/date-picker#date-formats) | — |
+| name | same as `name` in native input | string | — | — |
+| unlink-panels | unlink two date-panels in range-picker | boolean | — | false |
+| prefix-icon | Custom prefix icon class | string | — | el-icon-date |
+| clear-icon | Custom clear icon class | string | — | el-icon-circle-close |
 
 ### Picker Options
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
@@ -294,7 +502,7 @@ Picking a date range is supported.
 | shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |
 | disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
 | firstDayOfWeek | first day of week | Number | 1 to 7 | 7 |
-| onPick | a callback that triggers when the seleted date is changed. Only for `daterange` and `datetimerange`. | Function({ maxDate, minDate }) | - | - |
+| onPick | a callback that triggers when the selected date is changed. Only for `daterange` and `datetimerange`. | Function({ maxDate, minDate }) | - | - |
 
 ### shortcuts
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
@@ -306,4 +514,11 @@ Picking a date range is supported.
 ### Events
 | Event Name | Description | Parameters |
 |---------|--------|---------|
-| change | triggers when input value changes | formatted value |
+| change | triggers when user confirms the value | component's binding value |
+| blur | triggers when Input blurs | component instance |
+| focus | triggers when Input focuses | component instance |
+
+### Methods
+| Method | Description | Parameters |
+|------|--------|-------|
+| focus | focus the Input component | — |
diff --git a/examples/docs/en-US/datetime-picker.md b/examples/docs/en-US/datetime-picker.md
index d9291931ce..a0be9c834e 100644
--- a/examples/docs/en-US/datetime-picker.md
+++ b/examples/docs/en-US/datetime-picker.md
@@ -53,20 +53,11 @@
         },
         value1: '',
         value2: '',
-        value3: new Date(),
-        value4: '',
+        value3: '',
+        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
         value5: '',
         value6: '',
-        value7: '',
-        value8: '',
-        value9: '',
-        value10: '',
-        value11: '',
-        value12: '',
-        value13: '',
-        value14: '',
-        value15: '',
-        value16: ''
+        value7: ''
       };
     }
   };
@@ -100,6 +91,10 @@
 
 Select date and time in one picker.
 
+:::tip
+DateTimePicker is derived from DatePicker and TimePicker. For a more detailed explanation on `pickerOptions` and other attributes, you can refer to DatePicker and TimePicker.
+:::
+
 ###  Date and time
 
 :::demo You can select date and time in one picker at the same time by setting `type` to `datetime`. The way to use shortcuts is the same as Date Picker.
@@ -123,6 +118,15 @@ Select date and time in one picker.
       :picker-options="pickerOptions1">
     </el-date-picker>
   </div>
+  <div class="block">
+    <span class="demonstration">With default time</span>
+    <el-date-picker
+      v-model="value3"
+      type="datetime"
+      placeholder="Select date and time"
+      default-time="12:00:00">
+    </el-date-picker>
+  </div>
 </template>
 
 <script>
@@ -152,7 +156,8 @@ Select date and time in one picker.
           }]
         },
         value1: '',
-        value2: ''
+        value2: '',
+        value3: ''
       };
     }
   };
@@ -169,18 +174,22 @@ Select date and time in one picker.
   <div class="block">
     <span class="demonstration">Default</span>
     <el-date-picker
-      v-model="value3"
+      v-model="value4"
       type="datetimerange"
-      placeholder="Select time range">
+      range-separator="To"
+      start-placeholder="Start date"
+      end-placeholder="End date">
     </el-date-picker>
   </div>
   <div class="block">
     <span class="demonstration">With shortcuts</span>
     <el-date-picker
-      v-model="value4"
+      v-model="value5"
       type="datetimerange"
       :picker-options="pickerOptions2"
-      placeholder="Select time range"
+      range-separator="To"
+      start-placeholder="Start date"
+      end-placeholder="End date"
       align="right">
     </el-date-picker>
   </div>
@@ -217,8 +226,49 @@ Select date and time in one picker.
             }
           }]
         },
-        value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
-        value4: ''
+        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+        value5: ''
+      };
+    }
+  };
+</script>
+```
+:::
+
+###  Default time value for start date and end date
+
+:::demo When picking date range on the date panel with type `datetimerange`, `00:00:00` will be used as the default time value for start and end date. We can control it with the `default-time` attribute. `default-time` accepts an array of up to two strings. The first item controls time value of the start date and the second item controls time value of the end date.
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Start date time 12:00:00</span>
+    <el-date-picker
+      v-model="value6"
+      type="datetimerange"
+      start-placeholder="Start Date"
+      end-placeholder="End Date"
+      :default-time="['12:00:00']">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">Start date time 12:00:00, end date time 08:00:00</span>
+    <el-date-picker
+      v-model="value7"
+      type="datetimerange"
+      align="right"
+      start-placeholder="Start Date"
+      end-placeholder="End Date"
+      :default-time="['12:00:00', '08:00:00']">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value6: '',
+        value7: ''
       };
     }
   };
@@ -234,19 +284,30 @@ Select date and time in one picker.
 | editable | whether the input is editable | boolean | — | true |
 | clearable | Whether to show clear button | boolean | — | true |
 |size | size of Input | string | large/small/mini | — |
-| placeholder | placeholder | string | — | — |
+| placeholder | placeholder in non-range mode | string | — | — |
+| start-placeholder | placeholder for the start date in range mode | string | — | — |
+| end-placeholder | placeholder for the end date in range mode | string | — | — |
+| time-arrow-control | whether to pick time using arrow buttons | boolean | — | false |
 | type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
-| format | format of the picker | string | year `yyyy` month `MM` day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
+| format | format of the displayed value in the input box | string | see [date formats](#/en-US/component/date-picker#date-formats) | yyyy-MM-dd HH:mm:ss |
 | align | alignment | left/center/right | left |
 | popper-class | custom class name for DateTimePicker's dropdown | string | — | — |
 | picker-options | additional options, check the table below | object | — | {} |
-| range-separator | range separator | string | - | ' - ' |
+| range-separator | range separator | string | - | '-' |
+| default-value | optional, default date of the calendar | Date | anything accepted by `new Date()` | — |
+| default-time | the default time value after picking a date | non-range: string / range: string[] | non-range: a string like `12:00:00`, range: array of two strings, and the first item is for the start date and second for the end date. `00:00:00` will be used if not specified | — |
+| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | see [date formats](#/en-US/component/date-picker#date-formats) | — |
+| name | same as `name` in native input | string | — | — |
+| unlink-panels | unllink two date-panels in range-picker | boolean | — | false |
+| prefix-icon | Custom prefix icon class | string | — | el-icon-date |
+| clear-icon | Custom clear icon class | string | — | el-icon-circle-close |
 
 ### Picker Options
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |
 | disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
+| firstDayOfWeek | first day of week | Number | 1 to 7 | 7 |
 
 ### shortcuts
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
@@ -254,9 +315,14 @@ Select date and time in one picker.
 | text | title of the shortcut | string | — | — |
 | onClick | callback function, triggers when the shortcut is clicked, with the `vm` as its parameter. You can change the picker value by emitting the `pick` event. Example: `vm.$emit('pick', new Date())`| function | — | — |
 
-
 ### Events
 | Event Name | Description | Parameters |
 |---------|--------|---------|
-| change | triggers when input value changes | formatted value |
+| change | triggers when user confirms the value | component's binding value |
+| blur | triggers when Input blurs | component instance |
+| focus | triggers when Input focuses | component instance |
 
+### Methods
+| Method | Description | Parameters |
+|------|--------|-------|
+| focus | focus the Input component | — |
diff --git a/examples/docs/en-US/dialog.md b/examples/docs/en-US/dialog.md
index 27e4e6a120..3f60fd8e3d 100644
--- a/examples/docs/en-US/dialog.md
+++ b/examples/docs/en-US/dialog.md
@@ -22,6 +22,9 @@
         dialogVisible: false,
         dialogTableVisible: false,
         dialogFormVisible: false,
+        outerVisible: false,
+        innerVisible: false,
+        centerDialogVisible: false,
         form: {
           name: '',
           region: '',
@@ -86,7 +89,7 @@ Dialog pops up a dialog box, and it's quite customizable.
 <el-dialog
   title="Tips"
   :visible.sync="dialogVisible"
-  size="tiny"
+  width="30%"
   :before-close="handleClose">
   <span>This is a message</span>
   <span slot="footer" class="dialog-footer">
@@ -116,6 +119,10 @@ Dialog pops up a dialog box, and it's quite customizable.
 ```
 :::
 
+:::tip
+`before-close` only works when user clicks the close icon or the backdrop. If you have buttons that close the Dialog in the `footer` named slot, you can add what you would do with `before-close` in the buttons' click event handler.
+:::
+
 ### Customizations
 
 The content of Dialog can be anything, even a table or a form. This example shows how to use Element Table and Form with Dialog。
@@ -140,7 +147,7 @@ The content of Dialog can be anything, even a table or a form. This example show
 <el-dialog title="Shipping address" :visible.sync="dialogFormVisible">
   <el-form :model="form">
     <el-form-item label="Promotion name" :label-width="formLabelWidth">
-      <el-input v-model="form.name" auto-complete="off"></el-input>
+      <el-input v-model="form.name" autocomplete="off"></el-input>
     </el-form-item>
     <el-form-item label="Zones" :label-width="formLabelWidth">
       <el-select v-model="form.region" placeholder="Please select a zone">
@@ -196,22 +203,99 @@ The content of Dialog can be anything, even a table or a form. This example show
 ```
 :::
 
+### Nested Dialog
+If a Dialog is nested in another Dialog, `append-to-body` is required.
+:::demo Normally we do not recommend using nested Dialog. If you need multiple Dialogs rendered on the page, you can simply flat them so that they're siblings to each other. If you must nest a Dialog inside another Dialog, set `append-to-body` of the nested Dialog to true, and it will append to body instead of its parent node, so both Dialogs can be correctly rendered.
+```html
+<template>
+  <el-button type="text" @click="outerVisible = true">open the outer Dialog</el-button>
+  
+  <el-dialog title="Outer Dialog" :visible.sync="outerVisible">
+    <el-dialog
+        width="30%"
+        title="Inner Dialog"
+        :visible.sync="innerVisible"
+        append-to-body>
+    </el-dialog>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="outerVisible = false">Cancel</el-button>
+      <el-button type="primary" @click="innerVisible = true">open the inner Dialog</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        outerVisible: false,
+        innerVisible: false
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Centered content
+Dialog's content can be centered.
+
+:::demo Setting `center` to `true` will center dialog's header and footer horizontally. `center` only affects Dialog's header and footer. The body of Dialog can be anything, so sometimes it may not look good when centered. You need to write some CSS if you wish to center the body as well.
+
+```html
+<el-button type="text" @click="centerDialogVisible = true">Click to open the Dialog</el-button>
+
+<el-dialog
+  title="Warning"
+  :visible.sync="centerDialogVisible"
+  width="30%"
+  center>
+  <span>It should be noted that the content will not be aligned in center by default</span>
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="centerDialogVisible = false">Cancel</el-button>
+    <el-button type="primary" @click="centerDialogVisible = false">Confirm</el-button>
+  </span>
+</el-dialog>
+
+<script>
+  export default {
+    data() {
+      return {
+        centerDialogVisible: false
+      };
+    }
+  };
+</script>
+```
+:::
+
+:::tip
+The content of Dialog is lazily rendered, which means the default slot is not rendered onto the DOM until it is firstly opened. Therefore, if you need to perform a DOM manipulation or access a component using `ref`, do it in the `open` event callback.
+:::
+
+:::tip
+If the variable bound to `visible` is managed in Vuex store, the `.sync` can not work properly. In this case, please remove the `.sync` modifier, listen to `open` and `close` events of Dialog, and commit Vuex mutations to update the value of that variable in the event handlers.
+:::
+
 ### Attributes
 
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | visible   | visibility of Dialog, supports the .sync modifier | boolean | — | false |
 | title     | title of Dialog. Can also be passed with a named slot (see the following table) | string    | — | — |
-| size      | size of Dialog | string    | tiny/small/large/full | small |
-| top      | value for `top` of Dialog CSS, works when `size` is not `full` | string    | — | 15% |
+| width     | width of Dialog | string    | — | 50% |
+| fullscreen     | whether the Dialog takes up full screen | boolean    | — | false |
+| top      | value for `margin-top` of Dialog CSS | string    | — | 15vh |
 | modal     | whether a mask is displayed | boolean   | — | true |
 | modal-append-to-body     | whether to append modal to body element. If false, the modal will be appended to Dialog's parent element | boolean   | — | true |
+| append-to-body     | whether to append Dialog itself to body. A nested Dialog should have this attribute set to `true` | boolean   | — | false |
 | lock-scroll     | whether scroll of body is disabled while Dialog is displayed | boolean   | — | true |
 | custom-class      | custom class names for Dialog | string    | — | — |
 | close-on-click-modal | whether the Dialog can be closed by clicking the mask | boolean    | — | true |
 | close-on-press-escape | whether the Dialog can be closed by pressing ESC | boolean    | — | true |
 | show-close | whether to show a close button | boolean    | — | true |
 | before-close | callback before Dialog closes, and it will prevent Dialog from closing | function(done)，done is used to close the Dialog | — | — |
+| center | whether to align the header and footer in center | boolean | — | false |
 
 ### Slot
 
@@ -225,4 +309,6 @@ The content of Dialog can be anything, even a table or a form. This example show
 | Event Name | Description | Parameters |
 |---------- |-------- |---------- |
 | open | triggers when the Dialog opens | — |
+| opened | triggers when the Dialog opening animation ends | — |
 | close | triggers when the Dialog closes | — |
+| closed | triggers when the Dialog closing animation ends | — |
diff --git a/examples/docs/en-US/dropdown.md b/examples/docs/en-US/dropdown.md
index 0db59d883d..9b66fa0258 100644
--- a/examples/docs/en-US/dropdown.md
+++ b/examples/docs/en-US/dropdown.md
@@ -9,9 +9,9 @@
     }
     .el-dropdown-link {
       cursor: pointer;
-      color: #20a0ff;
+      color: #409EFF;
     }
-    .el-icon-caret-bottom {
+    .el-icon-arrow-down {
       font-size: 12px;
     }
   }
@@ -61,7 +61,7 @@ Hover on the dropdown menu to unfold it for more actions.
 ```html
 <el-dropdown>
   <span class="el-dropdown-link">
-    Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
+    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
   </span>
   <el-dropdown-menu slot="dropdown">
     <el-dropdown-item>Action 1</el-dropdown-item>
@@ -71,6 +71,17 @@ Hover on the dropdown menu to unfold it for more actions.
     <el-dropdown-item divided>Action 5</el-dropdown-item>
   </el-dropdown-menu>
 </el-dropdown>
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+</style>
+
 ```
 
 :::
@@ -83,7 +94,7 @@ Use the button to trigger the dropdown list.
 ```html
 <el-dropdown>
   <el-button type="primary">
-    Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
+    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
   </el-button>
   <el-dropdown-menu slot="dropdown">
     <el-dropdown-item>Action 1</el-dropdown-item>
@@ -103,6 +114,28 @@ Use the button to trigger the dropdown list.
     <el-dropdown-item>Action 5</el-dropdown-item>
   </el-dropdown-menu>
 </el-dropdown>
+
+<style>
+  .el-dropdown {
+    vertical-align: top;
+  }
+  .el-dropdown + .el-dropdown {
+    margin-left: 15px;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+</style>
+
+<script>
+  export default {
+    methods: {
+      handleClick() {
+        alert('button click');
+      }
+    }
+  }
+</script>
 ```
 :::
 
@@ -118,7 +151,7 @@ Click the triggering element or hover on it.
     <span class="demonstration">hover to trigger</span>
     <el-dropdown>
       <span class="el-dropdown-link">
-        Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
+        Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
       </span>
       <el-dropdown-menu slot="dropdown">
         <el-dropdown-item>Action 1</el-dropdown-item>
@@ -133,7 +166,7 @@ Click the triggering element or hover on it.
     <span class="demonstration">click to trigger</span>
     <el-dropdown trigger="click">
       <span class="el-dropdown-link">
-        Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
+        Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
       </span>
       <el-dropdown-menu slot="dropdown">
         <el-dropdown-item>Action 1</el-dropdown-item>
@@ -145,6 +178,22 @@ Click the triggering element or hover on it.
     </el-dropdown>
   </el-col>
 </el-row>
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+  .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+</style>
 ```
 :::
 
@@ -156,7 +205,7 @@ Use `hide-on-click` to define if menu closes on clicking.
 ```html
 <el-dropdown :hide-on-click="false">
   <span class="el-dropdown-link">
-    Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
+    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
   </span>
   <el-dropdown-menu slot="dropdown">
     <el-dropdown-item>Action 1</el-dropdown-item>
@@ -166,6 +215,16 @@ Use `hide-on-click` to define if menu closes on clicking.
     <el-dropdown-item divided>Action 5</el-dropdown-item>
   </el-dropdown-menu>
 </el-dropdown>
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+</style>
 ```
 :::
 
@@ -177,7 +236,7 @@ Clicking each dropdown item fires an event whose parameter is assigned by each i
 ```html
 <el-dropdown @command="handleCommand">
   <span class="el-dropdown-link">
-    Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
+    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
   </span>
   <el-dropdown-menu slot="dropdown">
     <el-dropdown-item command="a">Action 1</el-dropdown-item>
@@ -187,6 +246,17 @@ Clicking each dropdown item fires an event whose parameter is assigned by each i
     <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>
   </el-dropdown-menu>
 </el-dropdown>
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+</style>
+
 <script>
   export default {
     methods: {
@@ -199,17 +269,74 @@ Clicking each dropdown item fires an event whose parameter is assigned by each i
 ```
 :::
 
+### Sizes
+
+Besides default size, Dropdown component provides three additional sizes for you to choose among different scenarios.
+
+:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
+
+```html
+<el-dropdown split-button type="primary">
+  Default
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>Action 1</el-dropdown-item>
+    <el-dropdown-item>Action 2</el-dropdown-item>
+    <el-dropdown-item>Action 3</el-dropdown-item>
+    <el-dropdown-item>Action 4</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<el-dropdown size="medium" split-button type="primary">
+  Medium
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>Action 1</el-dropdown-item>
+    <el-dropdown-item>Action 2</el-dropdown-item>
+    <el-dropdown-item>Action 3</el-dropdown-item>
+    <el-dropdown-item>Action 4</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<el-dropdown size="small" split-button type="primary">
+  Small
+  <el-dropdown-menu slot="dropdown">
+   <el-dropdown-item>Action 1</el-dropdown-item>
+   <el-dropdown-item>Action 2</el-dropdown-item>
+   <el-dropdown-item>Action 3</el-dropdown-item>
+   <el-dropdown-item>Action 4</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<el-dropdown size="mini" split-button type="primary">
+  Mini
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>Action 1</el-dropdown-item>
+    <el-dropdown-item>Action 2</el-dropdown-item>
+    <el-dropdown-item>Action 3</el-dropdown-item>
+    <el-dropdown-item>Action 4</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+```
+:::
+
 
 ### Dropdown Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
-| type          | menu button type, refer to `Button` Component, only works when `split-button` is true  | string  |          —             |    —     |
-| size          | menu button size, refer to `Button` Component, only works when `split-button` is true  | string  |          —             |    —     |
+| type          | menu button type, refer to `Button` Component, only works when `split-button` is true  | string  |  —   |    —     |
+| size          | menu size, also works on the split button  | string  | medium / small / mini  |    —     |
 | split-button | whether a button group is displayed | boolean         |     —       | false   |
-| size          | component size, refer to `Button` component     | string          | large, small, mini  |  —  |
-| menu-align    | horizontal alignment     | string          | start/end  | end |
+| placement    | placement of pop menu | string | top/top-start/top-end/bottom/bottom-start/bottom-end  | bottom-end |
 | trigger       | how to trigger     | string  |    hover/click  |  hover |
 | hide-on-click | whether to hide menu after clicking menu-item     | boolean          | — | true |
+| show-timeout | Delay time before show a dropdown (only works when trigger is `hover`) | number | — | 250 |
+| hide-timeout | Delay time before hide a dropdown (only works when trigger is `hover`) | number | — | 150 |
+
+### Dropdown Slots
+
+| Name | Description |
+|------|--------|
+| — | content of Dropdown. Notice: Must be a valid html dom element (ex. `<span>, <button> etc.`) or `el-component`, to attach the trigger listener  |
+| dropdown | content of the Dropdown Menu, usually a `<el-dropdown-menu>` element |
 
 ### Dropdown Events
 | Event Name | Description | Parameters |
@@ -221,6 +348,6 @@ Clicking each dropdown item fires an event whose parameter is assigned by each i
 ### Dropdown Menu Item Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
-| command       | a command to be dispatched to Dropdown's `command` callback | string  |          —             |    —     |
+| command       | a command to be dispatched to Dropdown's `command` callback | string/number/object  |          —             |    —     |
 | disabled      | whether the item is disabled  | boolean  |          —             |    false     |
 | divided       | whether a divider is displayed  | boolean  |          —             |    false     |
diff --git a/examples/docs/en-US/form.md b/examples/docs/en-US/form.md
index 8cdf621b0e..7fd013c72a 100644
--- a/examples/docs/en-US/form.md
+++ b/examples/docs/en-US/form.md
@@ -17,7 +17,7 @@
           }
         }, 1000);
       };
-      var vaildatePass = (rule, value, callback) => {
+      var validatePass = (rule, value, callback) => {
         if (value === '') {
           callback(new Error('Please input the password'));
         } else {
@@ -47,6 +47,16 @@
           resource: '',
           desc: ''
         },
+        sizeForm: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
         formInline: {
           user: '',
           region: ''
@@ -221,6 +231,8 @@
       }
     }
     .demo-dynamic {
+      width: 500px;
+
       .el-input {
         margin-right: 10px;
         width: 270px;
@@ -264,7 +276,7 @@ It includes all kinds of input items, such as `input`, `select`, `radio` and `ch
     </el-col>
   </el-form-item>
   <el-form-item label="Instant delivery">
-    <el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
+    <el-switch v-model="form.delivery"></el-switch>
   </el-form-item>
   <el-form-item label="Activity type">
     <el-checkbox-group v-model="form.type">
@@ -314,6 +326,13 @@ It includes all kinds of input items, such as `input`, `select`, `radio` and `ch
 ```
 :::
 
+:::tip
+[W3C](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2) regulates that
+> <i>When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.</i>
+
+To prevent this behavior, you can add `@submit.native.prevent` on `<el-form>`.
+  :::
+
 ### Inline form
 
 When the vertical space is limited and the form is relatively simple, you can put it in one line.
@@ -330,7 +349,8 @@ When the vertical space is limited and the form is relatively simple, you can pu
       <el-option label="Zone one" value="shanghai"></el-option>
       <el-option label="Zone two" value="beijing"></el-option>
     </el-select>
-  </el-form-item><el-form-item>
+  </el-form-item>
+  <el-form-item>
     <el-button type="primary" @click="onSubmit">Query</el-button>
   </el-form-item>
 </el-form>
@@ -399,7 +419,7 @@ Depending on your design, there are several different ways to align your label e
 
 Form component allows you to verify your data, helping you find and correct errors.
 
-:::demo Just add the `rule` attribute for `Form` component, pass validation rules, and set `prop` attribute for `Form-Item` as a specific key that needs to be validated. See more information at [async-validator](https://github.com/yiminghe/async-validator).
+:::demo Just add the `rules` attribute for `Form` component, pass validation rules, and set `prop` attribute for `Form-Item` as a specific key that needs to be validated. See more information at [async-validator](https://github.com/yiminghe/async-validator).
 
 ```html
 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
@@ -426,7 +446,7 @@ Form component allows you to verify your data, helping you find and correct erro
     </el-col>
   </el-form-item>
   <el-form-item label="Instant delivery" prop="delivery">
-    <el-switch on-text="" off-text="" v-model="ruleForm.delivery"></el-switch>
+    <el-switch v-model="ruleForm.delivery"></el-switch>
   </el-form-item>
   <el-form-item label="Activity type" prop="type">
     <el-checkbox-group v-model="ruleForm.type">
@@ -512,15 +532,16 @@ Form component allows you to verify your data, helping you find and correct erro
 
 ### Custom validation rules
 
-:::demo This example shows how to customize your own validation rules to finish a two-factor password verification.
+This example shows how to customize your own validation rules to finish a two-factor password verification.
 
+:::demo Here we use `status-icon` to reflect validation result as an icon.
 ```html
-<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
+<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
   <el-form-item label="Password" prop="pass">
-    <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
+    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
   </el-form-item>
   <el-form-item label="Confirm" prop="checkPass">
-    <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
+    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
   </el-form-item>
   <el-form-item label="Age" prop="age">
     <el-input v-model.number="ruleForm2.age"></el-input>
@@ -618,7 +639,7 @@ Form component allows you to verify your data, helping you find and correct erro
     label="Email"
     :rules="[
       { required: true, message: 'Please input email address', trigger: 'blur' },
-      { type: 'email', message: 'Please input correct email address', trigger: 'blur,change' }
+      { type: 'email', message: 'Please input correct email address', trigger: ['blur', 'change'] }
     ]"
   >
     <el-input v-model="dynamicValidateForm.email"></el-input>
@@ -687,7 +708,7 @@ Form component allows you to verify your data, helping you find and correct erro
 
 ### Number Validate
 
-::: demo Number Validate need a `.number` modifier added on the input `v-model` binding，it's used to transform the string value to the number which is provided by Vuejs.
+:::demo Number Validate need a `.number` modifier added on the input `v-model` binding，it's used to transform the string value to the number which is provided by Vuejs.
 ```html
 <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
   <el-form-item
@@ -698,7 +719,7 @@ Form component allows you to verify your data, helping you find and correct erro
       { type: 'number', message: 'age must be a number'}
     ]"
   >
-    <el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
+    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
   </el-form-item>
   <el-form-item>
     <el-button type="primary" @click="submitForm('numberValidateForm')">Submit</el-button>
@@ -738,6 +759,75 @@ Form component allows you to verify your data, helping you find and correct erro
 When an `el-form-item` is nested in another `el-form-item`, its label width will be `0`. You can set `label-width` on that `el-form-item` if needed.
 :::
 
+### Size control
+
+All components in a Form inherit their `size` attribute from that Form. Similarly, FormItem also has a `size` attribute.
+
+:::demo Still you can fine tune each component's `size` if you don't want that component to inherit its size from From or FormIten.
+```html
+<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">
+  <el-form-item label="Activity name">
+    <el-input v-model="sizeForm.name"></el-input>
+  </el-form-item>
+  <el-form-item label="Activity zone">
+    <el-select v-model="sizeForm.region" placeholder="please select your zone">
+      <el-option label="Zone one" value="shanghai"></el-option>
+      <el-option label="Zone two" value="beijing"></el-option>
+    </el-select>
+  </el-form-item>
+  <el-form-item label="Activity time">
+    <el-col :span="11">
+      <el-date-picker type="date" placeholder="Pick a date" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>
+    </el-col>
+    <el-col class="line" :span="2">-</el-col>
+    <el-col :span="11">
+      <el-time-picker type="fixed-time" placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
+    </el-col>
+  </el-form-item>
+  <el-form-item label="Activity type">
+    <el-checkbox-group v-model="sizeForm.type">
+      <el-checkbox-button label="Online activities" name="type"></el-checkbox-button>
+      <el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>
+    </el-checkbox-group>
+  </el-form-item>
+  <el-form-item label="Resources">
+    <el-radio-group v-model="sizeForm.resource" size="medium">
+      <el-radio border label="Sponsor"></el-radio>
+      <el-radio border label="Venue"></el-radio>
+    </el-radio-group>
+  </el-form-item>
+  <el-form-item size="large">
+    <el-button type="primary" @click="onSubmit">Create</el-button>
+    <el-button>Cancel</el-button>
+  </el-form-item>
+</el-form>
+
+<script>
+  export default {
+    data() {
+      return {
+        sizeForm: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        }
+      };
+    },
+    methods: {
+      onSubmit() {
+        console.log('submit!');
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### Form Attributes
 
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
@@ -745,18 +835,30 @@ When an `el-form-item` is nested in another `el-form-item`, its label width will
 | model| data of form component | object | — | — |
 | rules | validation rules of form | object | — | — |
 | inline | whether the form is inline | boolean | — | false |
-| label-position | position of label | string | left/right/top | right |
+| label-position | position of label. If set to 'left' or 'right', `label-width` prop is also required | string | left / right / top | right |
 | label-width | width of label, and all its direct child form items will inherit this value | string | — | — |
 | label-suffix | suffix of the label | string | — | — |
+| hide-required-asterisk | whether required fields should have a red asterisk (star) beside their labels | boolean | — | false |
 | show-message  | whether to show the error message | boolean | — | true |
+| inline-message  | whether to display the error message inline with the form item | boolean | — | false |
+| status-icon  | whether to display an icon indicating the validation result | boolean | — | false |
+| validate-on-rule-change  | whether to trigger validation when the `rules` prop is changed | boolean | — | true |
+| size  | control the size of components in this form | string | medium / small / mini | — |
+| disabled | whether to disabled all components in this form. If set to true, it cannot be overridden by its inner components' `disabled` prop | boolean | — | false |
 
 ### Form Methods
 
 | Method | Description | Parameters |
 | ---- | ---- | ---- |
-| validate | the method to validate the whole form | Function(callback: Function(boolean)) |
-| validateField | the method to validate a certain form item | Function(prop: string, callback: Function(errorMessage: string)) |
+| validate | validate the whole form. Takes a callback as a param. After validation, the callback will be executed with two params: a boolean indicating if the validation has passed, and an object containing all fields that fail the validation. Returns a promise if callback is omitted | Function(callback: Function(boolean, object)) |
+| validateField | validate a certain form item | Function(prop: string, callback: Function(errorMessage: string)) |
 | resetFields | reset all the fields and remove validation result | — |
+| clearValidate | clear validation message for certain fields. The parameter is an array of prop names of the form items whose validation messages will be removed. When omitted, all fields' validation messages will be cleared | Function(props: array)
+
+### Form Events
+| Event Name | Description | Parameters |
+|----------- |------------ |----------- |
+| validate   | triggers after a form item is validated | prop name of the form item being validated, whether validation is passed and the error message if not |
 
 ### Form-Item Attributes
 
@@ -765,14 +867,27 @@ When an `el-form-item` is nested in another `el-form-item`, its label width will
 | prop | a key of `model`. In the use of validate and resetFields method, the attribute is required | string | keys of model that passed to `form` |
 | label | label | string | — | — |
 | label-width | width of label, e.g. '50px' | string | — | — |
-| required | whether the field is required or not, will be determined by validation rules if omitted | string |  — | false |
+| required | whether the field is required or not, will be determined by validation rules if omitted | boolean |  — | false |
 | rules | validation rules of form | object | — | — |
 | error | field error message, set its value and the field will validate error and show this message immediately | string | — | — |
 | show-message  | whether to show the error message | boolean | — | true |
-
+| inline-message  | inline style validate message | boolean | — | false |
+| size  | control the size of components in this form-item | string | medium / small / mini | - |
 
 ### Form-Item Slot
-| name | Description |
+| Name | Description |
 |------|--------|
 | — | content of Form Item |
 | label | content of label |
+
+### Form-Item Scoped Slot
+|      Name     | Description |
+|---------------|-------------|
+|      error    | Custom content to display validation message. The scope parameter is { error } |
+
+### Form-Item Methods
+
+| Method | Description | Parameters |
+| ---- | ---- | ---- |
+| resetField | reset current field and remove validation result | — |
+| clearValidate | remove validation status of the field | - |
diff --git a/examples/docs/en-US/home.md b/examples/docs/en-US/home.md
deleted file mode 100644
index a63101210e..0000000000
--- a/examples/docs/en-US/home.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Components Document
-
-<script>
-  import { addClass } from 'examples/dom/class.js';
-
-  module.exports = {
-    ready() {
-      addClass(this.$el.parentNode, 'no-toc')
-    }
-  }
-</script>
\ No newline at end of file
diff --git a/examples/docs/en-US/i18n.md b/examples/docs/en-US/i18n.md
index 821e075ca9..69e026d254 100644
--- a/examples/docs/en-US/i18n.md
+++ b/examples/docs/en-US/i18n.md
@@ -102,7 +102,7 @@ const i18n = new VueI18n({
 })
 
 Vue.use(Element, {
-  i18n: (key, value) => i18n.t(key. value)
+  i18n: (key, value) => i18n.t(key, value)
 })
 
 new Vue({ i18n }).$mount('#app')
@@ -197,7 +197,7 @@ Currently Element ships with the following languages:
   <li>Greek (el)</li>
   <li>Slovak (sk)</li>
   <li>Catalunya (ca)</li>
-  <li>Czech (cz)</li>
+  <li>Czech (cs-CZ)</li>
   <li>Ukrainian (ua)</li>
   <li>Turkmen (tk)</li>
   <li>Tamil (ta)</li>
@@ -205,6 +205,17 @@ Currently Element ships with the following languages:
   <li>Afrikaans (af-ZA)</li>
   <li>Estonian (ee)</li>
   <li>Slovenian (sl)</li>
+  <li>Arabic (ar)</li>
+  <li>Hebrew (he)</li>
+  <li>Lithuanian (lt)</li>
+  <li>Mongolian (mn)</li>
+  <li>Kazakh (kz)</li>
+  <li>Hungarian (hu)</li>
+  <li>Romanian (ro)</li>
+  <li>Kurdish (ku)</li>
+  <li>Uighur (ug-CN)</li>
+  <li>Khmer (km)</li>
+  <li>Serbian (sr)</li>
 </ul>
 
-If your target language is not included, you are more than welcome to contribute: just add another language config [here](https://github.com/ElemeFE/element/tree/master/src/locale/lang) and create a pull request.
+If your target language is not included, you are more than welcome to contribute: just add another language config [here](https://github.com/ElemeFE/element/tree/dev/src/locale/lang) and create a pull request.
diff --git a/examples/docs/en-US/icon.md b/examples/docs/en-US/icon.md
index 6c72c9313f..b5b295c522 100644
--- a/examples/docs/en-US/icon.md
+++ b/examples/docs/en-US/icon.md
@@ -12,8 +12,7 @@
 
 <style>
   .demo-icon .source > i {
-    font-size: 24px;
-    color: #8492a6;
+    color: #606266;
     margin: 0 20px;
     font-size: 1.5em;
     vertical-align: middle;
@@ -23,7 +22,7 @@
     margin: 0 20px;
   }
 
-  .icon-list {
+  .page-component .content > ul.icon-list {
     overflow: hidden;
     list-style: none;
     padding: 0;
@@ -47,18 +46,24 @@
 
     @utils-vertical-center;
 
-    & span {
+    span {
       display: inline-block;
       line-height: normal;
       vertical-align: middle;
       font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
       color: #99a9bf;
     }
-    & i {
+    i {
       display: block;
-      font-size: 24px;
+      font-size: 32px;
       margin-bottom: 15px;
-      color: #8492a6;
+      color: #606266;
+    }
+    .icon-name {
+      display: inline-block;
+      padding: 0 3px;
+      height: 1em;
+      color: #606266;
     }
     &:hover {
       color: rgb(92, 182, 255);
@@ -80,7 +85,7 @@ Just assign the class name to `el-icon-iconName`.
 <i class="el-icon-edit"></i>
 <i class="el-icon-share"></i>
 <i class="el-icon-delete"></i>
-<el-button type="primary" icon="search">Search</el-button>
+<el-button type="primary" icon="el-icon-search">Search</el-button>
 
 ```
 :::
@@ -91,7 +96,7 @@ Just assign the class name to `el-icon-iconName`.
   <li v-for="name in icons" :key="name">
     <span>
       <i :class="'el-icon-' + name"></i>
-      {{'el-icon-' + name}}
+      <span class="icon-name">{{'el-icon-' + name}}</span>
     </span>
   </li>
-</ul>
\ No newline at end of file
+</ul>
diff --git a/examples/docs/en-US/input-number.md b/examples/docs/en-US/input-number.md
index 69bc688b9b..f3a5b3cda8 100644
--- a/examples/docs/en-US/input-number.md
+++ b/examples/docs/en-US/input-number.md
@@ -7,7 +7,9 @@
         num3: 5,
         num4: 1,
         num5: 1,
-        num6: 1
+        num6: 1,
+        num7: 1,
+        num8: 1
       }
     },
     methods: {
@@ -97,17 +99,43 @@ Allows you to define incremental steps.
 ```
 :::
 
+### Precision
+
+:::demo Add `precision` attribute to set the precision of input value.
+
+```html
+<template>
+  <el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num9: 1
+      }
+    }
+  };
+</script>
+```
+
+:::
+
+:::tip
+The value of `precision` must be a non negative integer and should not be less than the decimal places of `step`.
+:::
+
 ### Size
 
-Additional `large` and `small` sizes of the input box are available
+Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
 
 :::demo
 
 ```html
 <template>
-  <el-input-number size="large" v-model="num4"></el-input-number>
-  <el-input-number v-model="num5"></el-input-number>
-  <el-input-number size="small" v-model="num6"></el-input-number>
+  <el-input-number v-model="num4"></el-input-number>
+    <el-input-number size="medium" v-model="num5"></el-input-number>
+    <el-input-number size="small" v-model="num6"></el-input-number>
+    <el-input-number size="mini" v-model="num7"></el-input-number>
 </template>
 <script>
   export default {
@@ -115,7 +143,32 @@ Additional `large` and `small` sizes of the input box are available
       return {
         num4: 1,
         num5: 1,
-        num6: 1
+        num6: 1,
+        num7: 1
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Controls Position
+
+:::demo Set `controls-position` to decide the position of control buttons.
+```html
+<template>
+  <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num8: 1
+      };
+    },
+    methods: {
+      handleChange(value) {
+        console.log(value);
       }
     }
   };
@@ -128,16 +181,25 @@ Additional `large` and `small` sizes of the input box are available
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |----| ----| ---| ----| -----|
 |value | binding value| number | — | — |
-|min | the minimum allowed value | number | — | 0 |
+|min | the minimum allowed value | number | — | `-Infinity` |
 |max | the maximum allowed value | number | — | `Infinity` |
 |step | incremental step | number | — | 1 |
+|precision | precision of input value | number | — | — |
 |size | size of the component | string | large/small| — |
 |disabled| whether the component is disabled | boolean | — | false |
 |controls| whether to enable the control buttons | boolean | — | true |
-|debounce| debounce delay when typing, in millisecond | number | — | 300 |
-
+|controls-position | position of the control buttons | string | right | - |
+|name | same as `name` in native input | string | — | — |
+|label | label text | string | — | — |
 ### Events
 
 | Event Name | Description | Parameters |
 |----| ---- | -----|
-|change | triggers when the value changes | value after change |
\ No newline at end of file
+|change | triggers when the value changes | value after change |
+| blur | triggers when Input blurs | (event: Event) |
+| focus | triggers when Input focuses | (event: Event) |
+
+### Methods
+| Method | Description | Parameters |
+|------|--------|-------|
+| focus | focus the Input component | - |
diff --git a/examples/docs/en-US/input.md b/examples/docs/en-US/input.md
index dd0b0b78b8..650d9b9881 100644
--- a/examples/docs/en-US/input.md
+++ b/examples/docs/en-US/input.md
@@ -1,18 +1,4 @@
-<script>
-  import Vue from 'vue';
-  Vue.component('my-item-en', {
-    functional: true,
-    render: function (h, ctx) {
-      var item = ctx.props.item;
-      return h('li', ctx.data, [
-        h('div', { attrs: { class: 'value' } }, [item.value]),
-        h('span', { attrs: { class: 'link' } }, [item.link])
-      ]);
-    },
-    props: {
-      item: { type: Object, required: true }
-    }
-  });
+<script>
   export default {
     data() {
       return {
@@ -20,6 +6,9 @@
         input: '',
         input1: '',
         input2: '',
+        input21: '',
+        input22: '',
+        input23: '',
         input3: '',
         input4: '',
         input5: '',
@@ -27,6 +16,7 @@
         input7: '',
         input8: '',
         input9: '',
+        input10: '',
         textarea: '',
         textarea2: '',
         textarea3: '',
@@ -66,7 +56,7 @@
       },
       createStateFilter(queryString) {
         return (state) => {
-          return (state.value.indexOf(queryString.toLowerCase()) === 0);
+          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
         };
       },
       handleSelect(item) {
@@ -85,7 +75,7 @@
 <style>
   .demo-input.demo-en-US {
     .el-select .el-input {
-      width: 110px;
+      width: 130px;
     }
     .el-input {
       width: 180px;
@@ -102,6 +92,19 @@
         margin: 0 10px 10px 0;
       }
     }
+    .demo-input-suffix {
+      padding: 10px;
+    }
+    .demo-input-suffix .el-input {
+      margin-right: 15px;
+    }
+    .demo-input-label {
+      display: inline-block;
+      width: 130px;
+    }
+    .input-with-select .el-input-group__prepend {
+      background-color: #fff;
+    }
     .demo-autocomplete {
       text-align: center;
 
@@ -146,7 +149,7 @@ Input data using mouse or keyboard.
 
 ### Basic usage
 
-::: demo
+:::demo
 
 ```html
 <el-input placeholder="Please input" v-model="input"></el-input>
@@ -165,7 +168,7 @@ export default {
 
 ### Disabled
 
-::: demo Disable the Input with the `disabled` attribute.
+:::demo Disable the Input with the `disabled` attribute.
 
 ```html
 <el-input
@@ -186,30 +189,77 @@ export default {
 ```
 :::
 
-### Input with icon
-
-Add an icon to indicate input type.
+### Clearable
 
-::: demo You can add an icon at the end of Input by setting the `icon` attribute and use `on-icon-click` hook to complete some work after clicking the icon.
+:::demo Make the Input clearable with the `clearable` attribute.
 
 ```html
 <el-input
-  placeholder="Pick a date"
-  icon="search"
-  v-model="input2"
-  :on-icon-click="handleIconClick">
+  placeholder="Please input"
+  v-model="input10"
+  clearable>
 </el-input>
 
 <script>
 export default {
   data() {
     return {
-      input2: ''
+      input10: ''
     }
-  },
-  methods: {
-    handleIconClick(ev) {
-      console.log(ev);
+  }
+}
+</script>
+```
+:::
+
+### Input with icon
+
+Add an icon to indicate input type.
+
+:::demo To add icons in Input, you can simply use `prefix-icon` and `suffix-icon` attributes. Also, the `prefix` and `suffix` named slots works as well.
+```html
+<div class="demo-input-suffix">
+  <span class="demo-input-label">Using attributes</span>
+  <el-input
+    placeholder="Pick a date"
+    suffix-icon="el-icon-date"
+    v-model="input2">
+  </el-input>
+  <el-input
+    placeholder="Type something"
+    prefix-icon="el-icon-search"
+    v-model="input21">
+  </el-input>
+</div>
+<div class="demo-input-suffix">
+  <span class="demo-input-label">Using slots</span>
+  <el-input
+    placeholder="Pick a date"
+    v-model="input22">
+    <i slot="suffix" class="el-input__icon el-icon-date"></i>
+  </el-input>
+  <el-input
+    placeholder="Type something"
+    v-model="input23">
+    <i slot="prefix" class="el-input__icon el-icon-search"></i>
+  </el-input>
+</div>
+
+<style>
+  .demo-input-label {
+    display: inline-block;
+    width: 130px;
+  }
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      input2: '',
+      input21: '',
+      input22: '',
+      input23: ''
     }
   }
 }
@@ -221,7 +271,7 @@ export default {
 
 Resizable for entering multiple lines of text information. Add attribute `type="textarea"` to change `input` into native `textarea`.
 
-::: demo Control the height by setting the `rows` prop.
+:::demo Control the height by setting the `rows` prop.
 
 ```html
 <el-input
@@ -247,7 +297,7 @@ export default {
 
 Setting the `autosize` prop for a textarea type of Input makes the height to automatically adjust based on the content. An options object can be provided to `autosize` to specify the minimum and maximum number of lines the textarea can automatically adjust.
 
-::: demo
+:::demo
 
 ```html
 <el-input
@@ -281,7 +331,7 @@ export default {
 
 Prepend or append an element, generally a label or a button.
 
-::: demo Use `slot` to distribute elements that prepend or append to Input.
+:::demo Use `slot` to distribute elements that prepend or append to Input.
 
 ```html
 <div>
@@ -295,13 +345,13 @@ Prepend or append an element, generally a label or a button.
   </el-input>
 </div>
 <div style="margin-top: 15px;">
-  <el-input placeholder="Please input" v-model="input5">
+  <el-input placeholder="Please input" v-model="input5" class="input-with-select">
     <el-select v-model="select" slot="prepend" placeholder="Select">
       <el-option label="Restaurant" value="1"></el-option>
       <el-option label="Order No." value="2"></el-option>
       <el-option label="Tel" value="3"></el-option>
     </el-select>
-    <el-button slot="append" icon="search"></el-button>
+    <el-button slot="append" icon="el-icon-search"></el-button>
   </el-input>
 </div>
 
@@ -309,6 +359,9 @@ Prepend or append an element, generally a label or a button.
   .el-select .el-input {
     width: 110px;
   }
+  .input-with-select .el-input-group__prepend {
+    background-color: #fff;
+  }
 </style>
 <script>
 export default {
@@ -327,15 +380,15 @@ export default {
 
 ### Sizes
 
-::: demo Add `size` attribute to change the size of Input. In addition to the default size, there are three other options: `large`, `small` and `mini`.
+:::demo Add `size` attribute to change the size of Input. In addition to the default size, there are three other options: `large`, `small` and `mini`.
 ```html
 <div class="demo-input-size">
   <el-input
-    size="large"
     placeholder="Please Input"
     v-model="input6">
   </el-input>
   <el-input
+    size="medium"
     placeholder="Please Input"
     v-model="input7">
   </el-input>
@@ -370,7 +423,7 @@ export default {
 
 You can get some recommended tips based on the current input.
 
-::: demo Autocomplete component provides input suggestions. The `fetch-suggestions` attribute is a method that returns suggested input. In this example, `querySearch(queryString, cb)` returns suggestions to Autocomplete via `cb(data)` when suggestions are ready.
+:::demo Autocomplete component provides input suggestions. The `fetch-suggestions` attribute is a method that returns suggested input. In this example, `querySearch(queryString, cb)` returns suggestions to Autocomplete via `cb(data)` when suggestions are ready.
 ```html
 <el-row class="demo-autocomplete">
   <el-col :span="12">
@@ -413,7 +466,7 @@ You can get some recommended tips based on the current input.
       },
       createFilter(queryString) {
         return (link) => {
-          return (link.value.indexOf(queryString.toLowerCase()) === 0);
+          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
         };
       },
       loadAll() {
@@ -443,18 +496,24 @@ You can get some recommended tips based on the current input.
 
 Customize how suggestions are displayed.
 
-:::demo
+:::demo Use `scoped slot` to customize suggestion items. In the scope, you can access the suggestion object via the `item` key.
 ```html
 <el-autocomplete
   popper-class="my-autocomplete"
   v-model="state3"
   :fetch-suggestions="querySearch"
-  custom-item="my-item-en"
   placeholder="Please input"
-  @select="handleSelect"
-  icon="edit"
-  :on-icon-click="handleIconClick"
-></el-autocomplete>
+  @select="handleSelect">
+  <i
+    class="el-icon-edit el-input__icon"
+    slot="suffix"
+    @click="handleIconClick">
+  </i>
+  <template slot-scope="{ item }">
+    <div class="value">{{ item.value }}</div>
+    <span class="link">{{ item.link }}</span>
+  </template>
+</el-autocomplete>
 
 <style>
   .my-autocomplete {
@@ -475,19 +534,6 @@ Customize how suggestions are displayed.
 </style>
 
 <script>
-  Vue.component('my-item-en', {
-    functional: true,
-    render: function (h, ctx) {
-      var item = ctx.props.item;
-      return h('li', ctx.data, [
-        h('div', { attrs: { class: 'value' } }, [item.value]),
-        h('span', { attrs: { class: 'link' } }, [item.link])
-      ]);
-    },
-    props: {
-      item: { type: Object, required: true }
-    }
-  });
   export default {
     data() {
       return {
@@ -498,13 +544,13 @@ Customize how suggestions are displayed.
     methods: {
       querySearch(queryString, cb) {
         var links = this.links;
-        var results = queryString ? link.filter(this.createFilter(queryString)) : links;
-        // call callback function to return recommended data
+        var results = queryString ? links.filter(this.createFilter(queryString)) : links;
+        // call callback function to return suggestion objects
         cb(results);
       },
       createFilter(queryString) {
         return (link) => {
-          return (link.value.indexOf(queryString.toLowerCase()) === 0);
+          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
         };
       },
       loadAll() {
@@ -537,7 +583,7 @@ Customize how suggestions are displayed.
 
 Search data from server-side.
 
-::: demo
+:::demo
 ```html
 <el-autocomplete
   v-model="state4"
@@ -577,7 +623,7 @@ Search data from server-side.
       },
       createFilter(queryString) {
         return (link) => {
-          return (link.value.indexOf(queryString.toLowerCase()) === 0);
+          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
         };
       },
       handleSelect(item) {
@@ -596,17 +642,20 @@ Search data from server-side.
 
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 | ----| ----| ----| ---- | ----- |
-|type| Same as the `type` attribute of native input, except that it can be `textarea` | string | — | text |
-|value| binding value | string/number| — | — |
-|maxlength| maximum Input text length| number| — | — |
-|minlength| minimum Input text length| number | — | — |
+|type| type of input | string | text, textarea and other [native input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text |
+|value| binding value | string / number| — | — |
+|maxlength| same as `maxlength` in native input | number| — | — |
+|minlength| same as `minlength` in native input | number | — | — |
 |placeholder| placeholder of Input| string | — | — |
+| clearable | whether to show clear button | boolean | — | false |
 |disabled | whether Input is disabled | boolean | — | false |
-|size | size of Input, works when `type` is not 'textarea' | string | large/small/mini | — |
-|icon | icon name | string | — | — |
+|size | size of Input, works when `type` is not 'textarea' | string | medium / small / mini | — |
+| prefix-icon   | prefix icon class  | string          | — | — |
+| suffix-icon   | suffix icon class  | string          | — | — |
 |rows | number of rows of textarea, only works when `type` is 'textarea' | number | — | 2 |
-|autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 }  | boolean/object | — | false |
-|auto-complete | same as `auto-complete` in native input | string | on/off | off |
+|autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 }  | boolean / object | — | false |
+|autocomplete | same as `autocomplete` in native input | string | on/off | off |
+|auto-complete | @DEPRECATED in next major version | string | on/off | off |
 |name | same as `name` in native input | string | — | — |
 | readonly | same as `readonly` in native input | boolean | — | false |
 |max | same as `max` in native input | — | — | — |
@@ -615,16 +664,34 @@ Search data from server-side.
 |resize| control the resizability | string | none, both, horizontal, vertical | — |
 |autofocus | same as `autofocus` in native input | boolean | — | false |
 |form | same as `form` in native input | string | — | — |
-| on-icon-click | hook function when clicking on the input icon | function | — | — |
+| label | label text | string | — | — |
+| tabindex | input tabindex | string | - | - |
+
+### Input slots
+
+| Name | Description |
+|------|--------|
+| prefix | content as Input prefix, only works when `type` is 'text' |
+| suffix | content as Input suffix, only works when `type` is 'text' |
+| prepend | content to prepend before Input, only works when `type` is 'text' |
+| append | content to append after Input, only works when `type` is 'text' |
 
 ### Input Events
 
 | Event Name | Description | Parameters |
 |----| ----| ----|
-|click | triggers when the icon inside Input is clicked | (event: Event) |
-| blur | triggers when the icon inside Input is blur | (event: Event) |
-| focus | triggers when the icon inside Input is focus | (event: Event) |
+| blur | triggers when Input blurs | (event: Event) |
+| focus | triggers when Input focuses | (event: Event) |
 | change | triggers when the icon inside Input value change | (value: string \| number) |
+| clear | triggers when the Input is cleared by clicking the clear button | — |
+
+### Input Methods
+
+| Method | Description | Parameters |
+|------|--------|-------|
+| focus | focus the input element | — |
+| blur | blur the input element | — |
+| select | select the text in input element | — |
 
 ### Autocomplete Attributes
 
@@ -632,20 +699,35 @@ Attribute | Description | Type | Options | Default
 |----| ----| ----| ---- | -----|
 |placeholder| the placeholder of Autocomplete| string | — | — |
 |disabled | whether Autocomplete is disabled  | boolean | — | false|
-| props | configuration options, see the following table | object | — | — |
+| value-key | key name of the input suggestion object for display | string | — | value |
 |icon | icon name | string | — | — |
 |value | binding value | string | — | — |
-|custom-item | component name of your customized suggestion list item | string | — | — |
+| debounce | debounce delay when typing, in milliseconds | number | — | 300 |
+| placement | placement of the popup menu | string | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start |
 |fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | Function(queryString, callback) | — | — |
 | popper-class | custom class name for autocomplete's dropdown | string | — | — |
 | trigger-on-focus | whether show suggestions when input focus | boolean | — | true |
-| on-icon-click | hook function when clicking on the input icon | function | — | — |
-
-### props
-| Attribute | Description | Type | Accepted Values | Default |
-| --------- | ----------------- | ------ | ------ | ------ |
-| label     | specify which key of option object is used as the option's label | string | — | value |
-| value     | specify which key of option object is used as the option's value | string | — | value |
+| name | same as `name` in native input | string | — | — |
+| select-when-unmatched | whether to emit a `select` event on enter when there is no autocomplete match | boolean | — | false |
+| label | label text | string | — | — |
+| prefix-icon | prefix icon class | string | — | — |
+| suffix-icon | suffix icon class | string | — | — |
+| hide-loading | whether to hide the loading icon in remote search | boolean | — | false |
+| popper-append-to-body | whether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to false | boolean | - | true |
+
+### Autocomplete Slots
+
+| Name | Description |
+|------|--------|
+| prefix | content as Input prefix |
+| suffix | content as Input suffix |
+| prepend | content to prepend before Input |
+| append | content to append after Input |
+
+### Autocomplete Scoped Slot
+| Name | Description |
+|------|--------|
+| — | Custom content for input suggestions. The scope parameter is { item } |
 
 ### Autocomplete Events
 
@@ -653,8 +735,8 @@ Attribute | Description | Type | Options | Default
 |----| ----| ----|
 |select | triggers when a suggestion is clicked | suggestion being clicked |
 
+### Autocomplete Methods
 
-
-
-
-
+| Method | Description | Parameters |
+|------|--------|-------|
+| focus | focus the input element | — |
diff --git a/examples/docs/en-US/installation.md b/examples/docs/en-US/installation.md
index f5a6401343..6bcad9919e 100644
--- a/examples/docs/en-US/installation.md
+++ b/examples/docs/en-US/installation.md
@@ -1,6 +1,7 @@
 ## Installation
 
 ### npm
+
 Installing with npm is recommended and it works seamlessly with [webpack](https://webpack.js.org/).
 
 ```shell
@@ -8,46 +9,24 @@ npm i element-ui -S
 ```
 
 ### CDN
+
 Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui/) , and import JavaScript and CSS file in your page.
 
 ```html
 <!-- import CSS -->
-<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
+<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 <!-- import JavaScript -->
 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 ```
 
+:::tip
+We recommend our users to lock Element's version when using CDN. Please refer to [unpkg.com](https://unpkg.com) for more information.
+:::
+
 ### Hello world
-If you are using CDN, a hello-world page is easy with Element. [Online Demo](http://codepen.io/QingWei-Li/pen/vXwJrY)
 
-```html
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <!-- import CSS -->
-  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
-</head>
-<body>
-  <div id="app">
-    <el-button @click="visible = true">Button</el-button>
-    <el-dialog v-model="visible" title="Hello world">
-      <p>Try Element</p>
-    </el-dialog>
-  </div>
-</body>
-  <!-- import Vue before Element -->
-  <script src="https://unpkg.com/vue/dist/vue.js"></script>
-  <!-- import JavaScript -->
-  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
-  <script>
-    new Vue({
-      el: '#app',
-      data: function() {
-        return { visible: false }
-      }
-    })
-  </script>
-</html>
-```
-If you are using npm and wish to apply webpack, please continue to the next page: Quick Start.
+If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/)
+
+<iframe width="100%" height="600" src="//jsfiddle.net/hzfpyvg6/1213/embedded/html,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+
+If you are using npm and wish to apply webpack, please continue to the next page: [Quick Start](/#/en-US/component/quickstart).
diff --git a/examples/docs/en-US/layout.md b/examples/docs/en-US/layout.md
index ca2970fa75..fa6bf95e84 100644
--- a/examples/docs/en-US/layout.md
+++ b/examples/docs/en-US/layout.md
@@ -37,7 +37,7 @@ Quickly and easily create layouts with the basic 24-column.
 
 Create basic grid layout using columns.
 
-::: demo With `row` and `col`, we can easily manipulate the layout using the `span` attribute.
+:::demo With `row` and `col`, we can easily manipulate the layout using the `span` attribute.
 ```html
 <el-row>
   <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
@@ -101,7 +101,7 @@ Create basic grid layout using columns.
 
 Column spacing is supported.
 
-::: demo Row provides `gutter` attribute to specify spacings between columns, and its default value is 0.
+:::demo Row provides `gutter` attribute to specify spacings between columns, and its default value is 0.
 ```html
 <el-row :gutter="20">
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
@@ -145,7 +145,7 @@ Column spacing is supported.
 
 Form a more complex hybrid layout by combining the basic 1/24 columns.
 
-::: demo
+:::demo
 ```html
 <el-row :gutter="20">
   <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
@@ -198,7 +198,7 @@ Form a more complex hybrid layout by combining the basic 1/24 columns.
 
 You can specify column offsets.
 
-::: demo You can specify the number of column offset by setting the value of `offset` attribute of Col.
+:::demo You can specify the number of column offset by setting the value of `offset` attribute of Col.
 
 ```html
 <el-row :gutter="20">
@@ -248,7 +248,7 @@ You can specify column offsets.
 
 Use the flex layout to make flexible alignment of columns.
 
-::: demo You can enable flex layout by setting `type` attribute to 'flex', and define the layout of child elements by setting `justify` attribute with start, center, end, space-between or space-around.
+:::demo You can enable flex layout by setting `type` attribute to 'flex', and define the layout of child elements by setting `justify` attribute with start, center, end, space-between or space-around.
 ```html
 <el-row type="flex" class="row-bg">
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
@@ -309,15 +309,15 @@ Use the flex layout to make flexible alignment of columns.
 
 ### Responsive Layout
 
-Taking example by Bootstrap's responsive design, four breakpoints are preset: xs, sm, md and lg.
+Taking example by Bootstrap's responsive design, five breakpoints are preset: xs, sm, md, lg and xl.
 
-::: demo
+:::demo
 ```html
 <el-row :gutter="10">
-  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>
-  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
 </el-row>
 
 <style>
@@ -341,6 +341,27 @@ Taking example by Bootstrap's responsive design, four breakpoints are preset: xs
 ```
 :::
 
+### Utility classes for hiding elements
+
+Additionally, Element provides a series of classes for hiding elements under certain conditions. These classes can be added to any DOM elements or custom components. You need to import the following CSS file to use these classes:
+
+```js
+import 'element-ui/lib/theme-chalk/display.css';
+```
+
+The classes are:
+- `hidden-xs-only` - hide when on extra small viewports only
+- `hidden-sm-only` - hide when on small viewports and down
+- `hidden-sm-and-down` - hide when on small viewports and down
+- `hidden-sm-and-up` - hide when on small viewports and up
+- `hidden-md-only` - hide when on medium viewports only
+- `hidden-md-and-down` - hide when on medium viewports and down
+- `hidden-md-and-up` - hide when on medium viewports and up
+- `hidden-lg-only` - hide when on large viewports only
+- `hidden-lg-and-down` - hide when on large viewports and down
+- `hidden-lg-and-up` - hide when on large viewports and up
+- `hidden-xl-only` - hide when on extra large viewports only
+
 ### Row Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
@@ -353,14 +374,15 @@ Taking example by Bootstrap's responsive design, four breakpoints are preset: xs
 ### Col Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| span | number of column the grid spans | number | — | — |
+| span | number of column the grid spans | number | — | 24 |
 | offset | number of spacing on the left side of the grid | number | — | 0 |
 | push |  number of columns that grid moves to the right | number | — | 0 |
 | pull |  number of columns that grid moves to the left | number | — | 0 |
 | xs | `<768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
 | sm | `≥768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
-| md | `≥992` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
-| lg | `≥1200` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
+| md | `≥992px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
+| lg | `≥1200px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
+| xl | `≥1920px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
 | tag | custom element tag | string | * | div |
 
 
diff --git a/examples/docs/en-US/loading.md b/examples/docs/en-US/loading.md
index 5b3826ca1f..c355a7bb32 100644
--- a/examples/docs/en-US/loading.md
+++ b/examples/docs/en-US/loading.md
@@ -32,7 +32,18 @@
         this.fullscreenLoading = true;
         setTimeout(() => {
           this.fullscreenLoading = false;
-        }, 3000);
+        }, 2000);
+      },
+      openFullScreen2() {
+        const loading = this.$loading({
+          lock: true,
+          text: 'Loading',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        });
+        setTimeout(() => {
+          loading.close();
+        }, 2000);
       }
     }
   }
@@ -51,7 +62,7 @@ Displays animation in a container (such as a table) while loading data.
 ```html
 <template>
   <el-table
-    v-loading.body="loading"
+    v-loading="loading"
     :data="tableData"
     style="width: 100%">
     <el-table-column
@@ -102,16 +113,18 @@ Displays animation in a container (such as a table) while loading data.
 ```
 :::
 
-### Loading text
+### Customization
 
-You can customize a text message.
+You can customize loading text, loading spinner and background color.
 
-:::demo Add attribute `element-loading-text` to the element on which `v-loading` is bound, and its value will be displayed under the spinner.
+:::demo Add attribute `element-loading-text` to the element on which `v-loading` is bound, and its value will be displayed under the spinner. Similarly, `element-loading-spinner` and `element-loading-background` are for customizing loading spinner class name and background color.
 ```html
 <template>
   <el-table
     v-loading="loading2"
     element-loading-text="Loading..."
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)"
     :data="tableData"
     style="width: 100%">
     <el-table-column
@@ -160,7 +173,7 @@ You can customize a text message.
 
 Show a full screen animation while loading data.
 
-:::demo Add the `fullscreen` modifier to create a full screen mask, and it will append to body. In this case, if you disable scrolling on body, you add another modifier `lock`.
+:::demo When used as a directive, a full screen Loading requires the `fullscreen` modifier, and it will be appended to body. In this case, if you wish to disable scrolling on body, you can add another modifier `lock`. When used as a service, Loading will be full screen by default.
 
 ```html
 <template>
@@ -168,7 +181,12 @@ Show a full screen animation while loading data.
     type="primary"
     @click="openFullScreen"
     v-loading.fullscreen.lock="fullscreenLoading">
-    Full screen loading for 3 seconds
+    As a directive
+  </el-button>
+  <el-button
+    type="primary"
+    @click="openFullScreen2">
+    As a service
   </el-button>
 </template>
 
@@ -184,7 +202,18 @@ Show a full screen animation while loading data.
         this.fullscreenLoading = true;
         setTimeout(() => {
           this.fullscreenLoading = false;
-        }, 3000);
+        }, 2000);
+      },
+      openFullScreen2() {
+        const loading = this.$loading({
+          lock: true,
+          text: 'Loading',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        });
+        setTimeout(() => {
+          loading.close();
+        }, 2000);
       }
     }
   }
@@ -204,7 +233,9 @@ Loading.service(options);
 The parameter `options` is the configuration of Loading, and its details can be found in the following table. `LoadingService` returns a Loading instance, and you can close it by invoking its `close` method:
 ```javascript
 let loadingInstance = Loading.service(options);
-loadingInstance.close();
+this.$nextTick(() => { // Loading should be closed asynchronously
+  loadingInstance.close();
+});
 ```
 Note that in this case the full screen Loading is singleton. If a new full screen Loading is invoked before an existing one is closed, the existing full screen Loading instance will be returned instead of actually creating another Loading instance:
 ```javascript
@@ -224,4 +255,6 @@ If Element is imported entirely, a globally method `$loading` will be registered
 | fullscreen | same as the `fullscreen` modifier of `v-loading` | boolean | — | true |
 | lock | same as the `lock` modifier of `v-loading` | boolean | — | false |
 | text | loading text that displays under the spinner | string | — | — |
+| spinner | class name of the custom spinner | string | — | — |
+| background | background color of the mask | string | — | — |
 | customClass | custom class name for Loading | string | — | — |
\ No newline at end of file
diff --git a/examples/docs/en-US/menu.md b/examples/docs/en-US/menu.md
index 46f6807be4..adf17d6432 100644
--- a/examples/docs/en-US/menu.md
+++ b/examples/docs/en-US/menu.md
@@ -4,7 +4,7 @@
       padding-left: 55px;
     }
     .el-menu-vertical-demo:not(.el-menu--collapse) {
-      width: 200px;
+      width: 240px;
       min-height: 400px;
     }
     .line {
@@ -34,7 +34,7 @@
       return {
         activeIndex: '1',
         activeIndex2: '1',
-        isCollapse: false
+        isCollapse: true
       };
     },
     methods: {
@@ -59,28 +59,49 @@ Menu that provides navigation for your website.
 
 Top bar NavMenu can be used in a variety of scenarios.
 
-::: demo By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu.
+:::demo By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu. Menu provides `background-color`, `text-color` and `active-text-color` to customize the colors.
 ```html
-<el-menu theme="dark" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
   <el-menu-item index="1">Processing Center</el-menu-item>
   <el-submenu index="2">
     <template slot="title">Workspace</template>
     <el-menu-item index="2-1">item one</el-menu-item>
     <el-menu-item index="2-2">item two</el-menu-item>
     <el-menu-item index="2-3">item three</el-menu-item>
+    <el-submenu index="2-4">
+      <template slot="title">item four</template>
+      <el-menu-item index="2-4-1">item one</el-menu-item>
+      <el-menu-item index="2-4-2">item two</el-menu-item>
+      <el-menu-item index="2-4-3">item three</el-menu-item>
+    </el-submenu>
   </el-submenu>
-  <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
+  <el-menu-item index="3" disabled>Info</el-menu-item>
+  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
 </el-menu>
 <div class="line"></div>
-<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+<el-menu
+  :default-active="activeIndex2"
+  class="el-menu-demo"
+  mode="horizontal"
+  @select="handleSelect"
+  background-color="#545c64"
+  text-color="#fff"
+  active-text-color="#ffd04b">
   <el-menu-item index="1">Processing Center</el-menu-item>
   <el-submenu index="2">
     <template slot="title">Workspace</template>
     <el-menu-item index="2-1">item one</el-menu-item>
     <el-menu-item index="2-2">item two</el-menu-item>
     <el-menu-item index="2-3">item three</el-menu-item>
+    <el-submenu index="2-4">
+      <template slot="title">item four</template>
+      <el-menu-item index="2-4-1">item one</el-menu-item>
+      <el-menu-item index="2-4-2">item two</el-menu-item>
+      <el-menu-item index="2-4-3">item three</el-menu-item>
+    </el-submenu>
   </el-submenu>
-  <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
+  <el-menu-item index="3" disabled>Info</el-menu-item>
+  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
 </el-menu>
 
 <script>
@@ -105,14 +126,21 @@ Top bar NavMenu can be used in a variety of scenarios.
 
 Vertical NavMenu with sub-menus.
 
-::: demo You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.
+:::demo You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.
 ```html
 <el-row class="tac">
-  <el-col :span="8">
-    <h5>With icons</h5>
-    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
+  <el-col :span="12">
+    <h5>Default colors</h5>
+    <el-menu
+      default-active="2"
+      class="el-menu-vertical-demo"
+      @open="handleOpen"
+      @close="handleClose">
       <el-submenu index="1">
-        <template slot="title"><i class="el-icon-message"></i>Navigator One</template>
+        <template slot="title">
+          <i class="el-icon-location"></i>
+          <span>Navigator One</span>
+        </template>
         <el-menu-item-group title="Group One">
           <el-menu-item index="1-1">item one</el-menu-item>
           <el-menu-item index="1-2">item one</el-menu-item>
@@ -125,18 +153,38 @@ Vertical NavMenu with sub-menus.
           <el-menu-item index="1-4-1">item one</el-menu-item>
         </el-submenu>
       </el-submenu>
-      <el-menu-item index="2"><i class="el-icon-menu"></i>Navigator Two</el-menu-item>
-      <el-menu-item index="3"><i class="el-icon-setting"></i>Navigator Three</el-menu-item>
+      <el-menu-item index="2">
+        <i class="el-icon-menu"></i>
+        <span>Navigator Two</span>
+      </el-menu-item>
+      <el-menu-item index="3" disabled>
+        <i class="el-icon-document"></i>
+        <span>Navigator Three</span>
+      </el-menu-item>
+      <el-menu-item index="4">
+        <i class="el-icon-setting"></i>
+        <span>Navigator Four</span>
+      </el-menu-item>
     </el-menu>
   </el-col>
-  <el-col :span="8">
-    <h5>Without icons</h5>
-    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">
+  <el-col :span="12">
+    <h5>Custom colors</h5>
+    <el-menu
+      default-active="2"
+      class="el-menu-vertical-demo"
+      @open="handleOpen"
+      @close="handleClose"
+      background-color="#545c64"
+      text-color="#fff"
+      active-text-color="#ffd04b">
       <el-submenu index="1">
-        <template slot="title">Navigator One</template>
+        <template slot="title">
+          <i class="el-icon-location"></i>
+          <span>Navigator One</span>
+        </template>
         <el-menu-item-group title="Group One">
           <el-menu-item index="1-1">item one</el-menu-item>
-          <el-menu-item index="1-2">item two</el-menu-item>
+          <el-menu-item index="1-2">item one</el-menu-item>
         </el-menu-item-group>
         <el-menu-item-group title="Group Two">
           <el-menu-item index="1-3">item three</el-menu-item>
@@ -146,21 +194,18 @@ Vertical NavMenu with sub-menus.
           <el-menu-item index="1-4-1">item one</el-menu-item>
         </el-submenu>
       </el-submenu>
-      <el-menu-item index="2">Navigator Two</el-menu-item>
-      <el-menu-item index="3">Navigator Three</el-menu-item>
-    </el-menu>
-  </el-col>
-  <el-col :span="8">
-    <h5>Groups</h5>
-    <el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo">
-      <el-menu-item-group title="Group One">
-        <el-menu-item index="1"><i class="el-icon-message"></i>Navigator One</el-menu-item>
-        <el-menu-item index="2"><i class="el-icon-message"></i>Navigator Two</el-menu-item>
-      </el-menu-item-group>
-      <el-menu-item-group title="Group Two">
-        <el-menu-item index="3"><i class="el-icon-message"></i>Navigator Three</el-menu-item>
-        <el-menu-item index="4"><i class="el-icon-message"></i>Navigator Four</el-menu-item>
-      </el-menu-item-group>
+      <el-menu-item index="2">
+        <i class="el-icon-menu"></i>
+        <span>Navigator Two</span>
+      </el-menu-item>
+      <el-menu-item index="3" disabled>
+        <i class="el-icon-document"></i>
+        <span>Navigator Three</span>
+      </el-menu-item>
+      <el-menu-item index="4">
+        <i class="el-icon-setting"></i>
+        <span>Navigator Four</span>
+      </el-menu-item>
     </el-menu>
   </el-col>
 </el-row>
@@ -184,7 +229,7 @@ Vertical NavMenu with sub-menus.
 
 Vertical NavMenu could be collapsed.
 
-::: demo 
+:::demo
 ```html
 <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
   <el-radio-button :label="false">expand</el-radio-button>
@@ -193,7 +238,7 @@ Vertical NavMenu could be collapsed.
 <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
   <el-submenu index="1">
     <template slot="title">
-      <i class="el-icon-message"></i>
+      <i class="el-icon-location"></i>
       <span slot="title">Navigator One</span>
     </template>
     <el-menu-item-group>
@@ -213,17 +258,28 @@ Vertical NavMenu could be collapsed.
     <i class="el-icon-menu"></i>
     <span slot="title">Navigator Two</span>
   </el-menu-item>
-  <el-menu-item index="3">
-    <i class="el-icon-setting"></i>
+  <el-menu-item index="3" disabled>
+    <i class="el-icon-document"></i>
     <span slot="title">Navigator Three</span>
   </el-menu-item>
+  <el-menu-item index="4">
+    <i class="el-icon-setting"></i>
+    <span slot="title">Navigator Four</span>
+  </el-menu-item>
 </el-menu>
 
+<style>
+  .el-menu-vertical-demo:not(.el-menu--collapse) {
+    width: 200px;
+    min-height: 400px;
+  }
+</style>
+
 <script>
   export default {
     data() {
       return {
-        isCollapse: false
+        isCollapse: true
       };
     },
     methods: {
@@ -242,15 +298,23 @@ Vertical NavMenu could be collapsed.
 ### Menu Attribute
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
-| mode     | menu display mode   | string  |   horizontal/vertical   | vertical |
+| mode     | menu display mode   | string  |   horizontal / vertical   | vertical |
 | collapse  | whether the menu is collapsed (available only in vertical mode) | boolean  |   —   | false |
-| theme     | theme color   | string    | light/dark | light |
+| background-color  | background color of Menu (hex format) | string |   —   | #ffffff |
+| text-color  | text color of Menu (hex format) | string |   —   | #303133 |
+| active-text-color  | text color of currently active menu item (hex format) | string |   —   | #409EFF |
 | default-active | index of currently active menu | string    | — | — |
-| default-openeds | array that contains keys of currently active sub-menus  | Array    | — | — |
+| default-openeds | array that contains indexes of currently active sub-menus  | Array    | — | — |
 | unique-opened  |  whether only one sub-menu can be active  | boolean   | — | false   |
-| menu-trigger | how sub-menus are triggered, only works when `mode` is 'horizontal' | string    | — | hover |
+| menu-trigger | how sub-menus are triggered, only works when `mode` is 'horizontal' | string    | hover / click | hover |
 | router  | whether `vue-router` mode is activated. If true, index will be used as 'path' to activate the route action | boolean   | — | false   |
+| collapse-transition  | whether to enable the collapse transition | boolean   | — | true   |
 
+### Menu Methods
+| Methods Name | Description | Parameters |
+|---------- |-------- |---------- |
+| open  | open a specific sub-menu | index: index of the sub-menu to open |
+| close  | close a specific sub-menu | index: index of the sub-menu to close |
 
 ### Menu Events
 | Event Name | Description | Parameters |
@@ -268,21 +332,20 @@ Vertical NavMenu could be collapsed.
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
 | index     | unique identification   | string  | — | — |
+| popper-class | custom class name for the popup menu | string | — | — |
+| show-timeout | timeout before showing a sub-menu | number | — | 300 |
+| hide-timeout | timeout before hiding a sub-menu | number | — | 300 |
+| disabled | whether the sub-menu is disabled | boolean | — | false |
+| popper-append-to-body | whether to append the popup menu to body. If the positioning of the menu is wrong, you can try setting this prop | boolean | - | level one Submenu: true / other Submenus: false |
 
 ### Menu-Item Attribute
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
 | index     | unique identification   | string  | — | — |
 | route     | Vue Router object   | object | — | — |
+| disabled | whether disabled | boolean | — | false |
 
 ### Menu-Group Attribute
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
 | title     | group title   | string  | — | — |
-
-
-
-
-
-
-
diff --git a/examples/docs/en-US/message-box.md b/examples/docs/en-US/message-box.md
index f1592a55bb..c0d183df9b 100644
--- a/examples/docs/en-US/message-box.md
+++ b/examples/docs/en-US/message-box.md
@@ -91,15 +91,64 @@
             });
           }, 200);
         });
-      }
+      },
+
+      open5() {
+        this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
+          dangerouslyUseHTMLString: true
+        });
+      },
+
+      open6() {
+        this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {
+          distinguishCancelAndClose: true,
+          confirmButtonText: 'Save',
+          cancelButtonText: 'Discard Changes'
+        })
+          .then(() => {
+            this.$message({
+              type: 'info',
+              message: 'Changes saved. Proceeding to a new route.'
+            });
+          })
+          .catch(action => {
+            this.$message({
+              type: 'info',
+              message: action === 'cancel'
+                ? 'Changes discarded. Proceeding to a new route.'
+                : 'Stay in the current route'
+            })
+          });
+      },
 
+      open7() {
+        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
+          confirmButtonText: 'OK',
+          cancelButtonText: 'Cancel',
+          type: 'warning',
+          center: true
+        }).then(() => {
+          this.$message({
+            type: 'success',
+            message: 'Delete completed'
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: 'Delete canceled'
+          });
+        });
+      }
     }
   };
 </script>
 
 ## MessageBox
 
-A set of modal boxes simulating system message box, mainly for message prompt, success tips, error messages and query information.
+A set of modal boxes simulating system message box, mainly for alerting information, confirm operations and prompting messages.
+:::tip
+By design MessageBox provides simulations of system's `alert`, `confirm` and `prompt`，so it's content should be simple. For more complicated contents, please use Dialog.
+:::
 
 ### Alert
 
@@ -190,7 +239,7 @@ Prompt is used when user input is required.
           cancelButtonText: 'Cancel',
           inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
           inputErrorMessage: 'Invalid Email'
-        }).then(value => {
+        }).then(({ value }) => {
           this.$message({
             type: 'success',
             message: 'Your email is:' + value
@@ -260,19 +309,134 @@ Can be customized to show various content.
 ```
 :::
 
+:::tip
+The content of MessageBox can be `VNode`, allowing us to pass custom components. When opening the MessageBox, Vue compares new `VNode` with old `VNode`, then figures out how to efficiently update the UI, so the components may not be completely re-rendered ([#8931](https://github.com/ElemeFE/element/issues/8931)). In this case, you can add a unique key to `VNode` each time MessageBox opens: [example](https://jsfiddle.net/zhiyang/ezmhq2ef).
+:::
+
+### Use HTML String
+
+`message` supports HTML string.
+
+:::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
+
+```html
+<template>
+  <el-button type="text" @click="open5">Click to open Message Box</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open5() {
+        this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
+          dangerouslyUseHTMLString: true
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+:::warning
+Although `message` property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.
+:::
+
+### Distinguishing cancel and close
+
+In some cases, clicking the cancel button and close button may have different meanings.
+
+:::demo By default, the parameters of Promise's reject callback and `callback` are 'cancel' when the user cancels (clicking the cancel button) and closes (clicking the close button or mask layer, pressing the ESC key) the MessageBox. If `distinguishCancelAndClose` is set to true, the parameters of the above two operations are 'cancel' and 'close' respectively.
+
+```html
+<template>
+  <el-button type="text" @click="open6">Click to open Message Box</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open6() {
+        this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {
+          distinguishCancelAndClose: true,
+          confirmButtonText: 'Save',
+          cancelButtonText: 'Discard Changes'
+        })
+          .then(() => {
+            this.$message({
+              type: 'info',
+              message: 'Changes saved. Proceeding to a new route.'
+            });
+          })
+          .catch(action => {
+            this.$message({
+              type: 'info',
+              message: action === 'cancel'
+                ? 'Changes discarded. Proceeding to a new route.'
+                : 'Stay in the current route'
+            })
+          });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Centered content
+Content of MessageBox can be centered.
+
+:::demo Setting `center` to `true` will center the content
+
+```html
+<template>
+  <el-button type="text" @click="open7">Click to open Message Box</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open7() {
+        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
+          confirmButtonText: 'OK',
+          cancelButtonText: 'Cancel',
+          type: 'warning',
+          center: true
+        }).then(() => {
+          this.$message({
+            type: 'success',
+            message: 'Delete completed'
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: 'Delete canceled'
+          });
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Global method
 
-Element has added the following global methods for Vue.prototype: `$msgbox`, `$alert`, `$confirm` and `$prompt`. So in a vue instance you can call `MessageBox` like what we did in this page.
+If Element is fully imported, it will add the following global methods for Vue.prototype: `$msgbox`, `$alert`, `$confirm` and `$prompt`. So in a Vue instance you can call `MessageBox` like what we did in this page. The parameters are:
+- `$msgbox(options)`
+- `$alert(message, title, options)` or `$alert(message, options)`
+- `$confirm(message, title, options)` or `$confirm(message, options)`
+- `$prompt(message, title, options)` or `$prompt(message, options)`
 
 ### Local import
 
-Import `MessageBox`:
+If you prefer importing `MessageBox` on demand:
 
 ```javascript
 import { MessageBox } from 'element-ui';
 ```
 
-The corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` and `MessageBox.prompt`.
+The corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` and `MessageBox.prompt`. The parameters are the same as above.
 
 ### Options
 
@@ -280,10 +444,14 @@ The corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.con
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | title | title of the MessageBox | string | — | — |
 | message | content of the MessageBox | string | — | — |
-| type | message type, used for icon display | string | success/info/warning/error | — |
+| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false |
+| type | message type, used for icon display | string | success / info / warning / error | — |
+| iconClass | custom icon's class, overrides `type` | string | — | — |
 | customClass | custom class name for MessageBox | string | — | — |
-| callback | MessageBox closing callback if you don't prefer Promise | function(action), where action can be 'confirm' or 'cancel', and `instance` is the MessageBox instance. You can access to that instance's attributes and methods | — | — |
-| beforeClose | callback before MessageBox closes, and it will prevent MessageBox from closing | function(action, instance, done), where `action` can be 'confirm' or 'cancel'; `instance` is the MessageBox instance, and you can access to that instance's attributes and methods; `done` is for closing the instance | — | — |
+| callback | MessageBox closing callback if you don't prefer Promise | function(action), where action can be 'confirm', 'cancel' or 'close', and `instance` is the MessageBox instance. You can access to that instance's attributes and methods | — | — |
+| showClose | whether to show close icon of MessageBox | boolean | — | true |
+| beforeClose | callback before MessageBox closes, and it will prevent MessageBox from closing | function(action, instance, done), where `action` can be 'confirm', 'cancel' or 'close'; `instance` is the MessageBox instance, and you can access to that instance's attributes and methods; `done` is for closing the instance | — | — |
+| distinguishCancelAndClose | whether to distinguish canceling and closing the MessageBox | boolean | — | false |
 | lockScroll | whether to lock body scroll when MessageBox prompts | boolean | — | true |
 | showCancelButton | whether to show a cancel button | boolean | — | false (true when called with confirm and prompt) |
 | showConfirmButton | whether to show a confirm button | boolean | — | true |
@@ -293,9 +461,13 @@ The corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.con
 | confirmButtonClass | custom class name of confirm button | string | — | — |
 | closeOnClickModal | whether MessageBox can be closed by clicking the mask | boolean | — | true (false when called with alert) |
 | closeOnPressEscape | whether MessageBox can be closed by pressing the ESC | boolean | — | true (false when called with alert) |
+| closeOnHashChange | whether to close MessageBox when hash changes | boolean | — | true |
 | showInput | whether to show an input | boolean | — | false (true when called with prompt) |
 | inputPlaceholder | placeholder of input | string | — | — |
+| inputType | type of input | string | — | text |
 | inputValue | initial value of input | string | — | — |
 | inputPattern | regexp for the input | regexp | — | — |
 | inputValidator | validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage | function | — | — |
-| inputErrorMessage | error message when validation fails | string | — | Illegal input |
\ No newline at end of file
+| inputErrorMessage | error message when validation fails | string | — | Illegal input |
+| center | whether to align the content in center | boolean | — | false |
+| roundButton | whether to use round button | boolean | — | false |
diff --git a/examples/docs/en-US/message.md b/examples/docs/en-US/message.md
index 9e2879f93f..aee106f957 100644
--- a/examples/docs/en-US/message.md
+++ b/examples/docs/en-US/message.md
@@ -62,6 +62,20 @@
           message: 'Oops, this is a error message.',
           type: 'error'
         });
+      },
+
+      openCenter() {
+        this.$message({
+          message: 'Centered text',
+          center: true
+        });
+      },
+
+      openHTML() {
+        this.$message({
+          dangerouslyUseHTMLString: true,
+          message: '<strong>This is <i>HTML</i> string</strong>'
+        });
       }
     }
   };
@@ -75,7 +89,7 @@ Used to show feedback after an activity. The difference with Notification is tha
 
 Displays at the top, and disappears after 3 seconds.
 
-:::demo The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element has registered a `$message` method for invoking. Message can take a string or VNode as parameter, and it will be shown as the main body.
+:::demo The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element has registered a `$message` method for invoking. Message can take a string or a VNode as parameter, and it will be shown as the main body.
 
 ```html
 <template>
@@ -199,6 +213,60 @@ A close button can be added.
 ```
 :::
 
+### Centered text
+Use the `center` attribute to center the text.
+
+:::demo
+
+```html
+<template>
+  <el-button :plain="true" @click="openCenter">Centered text</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      openCenter() {
+        this.$message({
+          message: 'Centered text',
+          center: true
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Use HTML string
+`message` supports HTML string.
+
+:::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
+
+```html
+<template>
+  <el-button :plain="true" @click="openHTML">Use HTML String</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      openHTML() {
+        this.$message({
+          dangerouslyUseHTMLString: true,
+          message: '<strong>This is <i>HTML</i> string</strong>'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+:::warning
+Although `message` property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.
+:::
+
 ### Global method
 
 Element has added a global method `$message` for Vue.prototype. So in a vue instance you can call `Message` like what we did in this page.
@@ -211,8 +279,7 @@ Import `Message`:
 import { Message } from 'element-ui';
 ```
 
-In this case you should call `Message(options)`. We have also registered methods for different types, e.g. `Message.success(options)`.
-You can call `Message.closeAll()` to manually close all the instances.
+In this case you should call `Message(options)`. We have also registered methods for different types, e.g. `Message.success(options)`. You can call `Message.closeAll()` to manually close all the instances.
 
 ### Options
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
@@ -220,9 +287,11 @@ You can call `Message.closeAll()` to manually close all the instances.
 | message | message text | string / VNode | — | — |
 | type | message type | string | success/warning/info/error | info |
 | iconClass | custom icon's class, overrides `type` | string | — | — |
+| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false |
 | customClass | custom class name for Message | string | — | — |
 | duration | display duration, millisecond. If set to 0, it will not turn off automatically | number | — | 3000 |
 | showClose | whether to show a close button | boolean | — | false |
+| center | whether to center the text | boolean | — | false |
 | onClose | callback function when closed with the message instance as the parameter | function | — | — |
 
 ### Methods
diff --git a/examples/docs/en-US/notification.md b/examples/docs/en-US/notification.md
index b6236b7c0e..dc81161978 100644
--- a/examples/docs/en-US/notification.md
+++ b/examples/docs/en-US/notification.md
@@ -49,6 +49,37 @@
       },
 
       open7() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'I\'m at the top right corner'
+        });
+      },
+
+      open8() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'I\'m at the bottom right corner',
+          position: 'bottom-right'
+        });
+      },
+
+      open9() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'I\'m at the bottom left corner',
+          position: 'bottom-left'
+        });
+      },
+
+      open10() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'I\'m at the top left corner',
+          position: 'top-left'
+        });
+      },
+
+      open11() {
         this.$notify.success({
           title: 'Success',
           message: 'This is a success message',
@@ -56,6 +87,22 @@
         });
       },
 
+      open12() {
+        this.$notify({
+          title: 'HTML String',
+          dangerouslyUseHTMLString: true,
+          message: '<strong>This is <i>HTML</i> string</strong>'
+        });
+      },
+      
+      open13() {
+        this.$notify.success({
+          title: 'Info',
+          message: 'This is a message without close button',
+          showClose: false
+        });
+      },
+
       onClose() {
         console.log('Notification is closed');
       }
@@ -65,11 +112,11 @@
 
 ## Notification
 
-Displays a global notification message at the upper right corner of the page.
+Displays a global notification message at a corner of the page.
 
 ### Basic usage
 
-::: demo Element has registered the `$notify` method and it receives an object as its parameter. In the simplest case, you can set the `title` field and the` message` field for the title and body of the notification. By default, the notification automatically closes after 4500ms, but by setting `duration` you can control its duration. Specifically, if set to `0`, it will not close automatically. Note that `duration` receives a `Number` in milliseconds.
+:::demo Element has registered the `$notify` method and it receives an object as its parameter. In the simplest case, you can set the `title` field and the` message` field for the title and body of the notification. By default, the notification automatically closes after 4500ms, but by setting `duration` you can control its duration. Specifically, if set to `0`, it will not close automatically. Note that `duration` receives a `Number` in milliseconds.
 
 ```html
 <template>
@@ -114,7 +161,7 @@ Displays a global notification message at the upper right corner of the page.
 
 We provide four types: success, warning, info and error.
 
-::: demo Element provides four notification types: `success`, `warning`, `info` and `error`. They are set by the `type` field, and other values will be ignored. We also registered methods for these types that can be invoked directly like `open5` and `open6` without passing a `type` field.
+:::demo Element provides four notification types: `success`, `warning`, `info` and `error`. They are set by the `type` field, and other values will be ignored. We also registered methods for these types that can be invoked directly like `open5` and `open6` without passing a `type` field.
 ```html
 <template>
   <el-button
@@ -177,16 +224,84 @@ We provide four types: success, warning, info and error.
 ```
 :::
 
+### Custom position
+
+Notification can emerge from any corner you like.
+
+:::demo The `position` attribute defines which corner Notification slides in. It can be `top-right`, `top-left`, `bottom-right` or `bottom-left`. Defaults to `top-right`.
+```html
+<template>
+  <el-button
+    plain
+    @click="open7">
+    Top Right
+  </el-button>
+  <el-button
+    plain
+    @click="open8">
+    Bottom Right
+  </el-button>
+  <el-button
+    plain
+    @click="open9">
+    Bottom Left
+  </el-button>
+  <el-button
+    plain
+    @click="open10">
+    Top Left
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open7() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'I\'m at the top right corner'
+        });
+      },
+
+      open8() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'I\'m at the bottom right corner',
+          position: 'bottom-right'
+        });
+      },
+
+      open9() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'I\'m at the bottom left corner',
+          position: 'bottom-left'
+        });
+      },
+
+      open10() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'I\'m at the top left corner',
+          position: 'top-left'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### With offset
 
-Customize Notification's offset from the top edge of the screen
+Customize Notification's offset from the edge of the screen.
 
-::: demo Set the `offset` attribute to customize Notification's offset from the top edge of the screen. Note that every Notification instance of the same moment should have the same offset.
+:::demo Set the `offset` attribute to customize Notification's offset from the edge of the screen. Note that every Notification instance of the same moment should have the same offset.
 ```html
 <template>
   <el-button
-      plain
-      @click="open7">
+    plain
+    @click="open11">
     Notification with offset
   </el-button>
 </template>
@@ -194,7 +309,7 @@ Customize Notification's offset from the top edge of the screen
 <script>
   export default {
     methods: {
-      open7() {
+      open11() {
         this.$notify.success({
           title: 'Success',
           message: 'This is a success message',
@@ -207,6 +322,69 @@ Customize Notification's offset from the top edge of the screen
 ```
 :::
 
+### Use HTML string
+`message` supports HTML string.
+
+:::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
+```html
+<template>
+  <el-button
+    plain
+    @click="open12">
+    Use HTML String
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open12() {
+        this.$notify({
+          title: 'HTML String',
+          dangerouslyUseHTMLString: true,
+          message: '<strong>This is <i>HTML</i> string</strong>'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+:::warning
+Although `message` property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.
+:::
+
+### Hide close button
+
+It is possible to hide the close button
+
+:::demo Set the `showClose` attribute to `false` so the notification cannot be closed by the user.
+```html
+<template>
+  <el-button
+    plain
+    @click="open13">
+    Hide close button
+    </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open13() {
+        this.$notify.success({
+          title: 'Info',
+          message: 'This is a message without close button',
+          showClose: false
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Global method
 
 Element has added a global method `$notify` for Vue.prototype. So in a vue instance you can call `Notification` like what we did in this page.
@@ -219,23 +397,26 @@ Import `Notification`:
 import { Notification } from 'element-ui';
 ```
 
-In this case you should call `Notification(options)`. We have also registered methods for different types, e.g. `Notification.success(options)`.
+In this case you should call `Notification(options)`. We have also registered methods for different types, e.g. `Notification.success(options)`. You can call `Notification.closeAll()` to manually close all the instances.
 
 ### Options
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | title | title | string | — | — |
 | message | description text | string/Vue.VNode | — | — |
+| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false |
 | type | notification type | string | success/warning/info/error | — |
 | iconClass | custom icon's class. It will be overridden by `type` | string | — | — |
 | customClass | custom class name for Notification | string | — | — |
 | duration | duration before close. It will not automatically close if set 0 | number | — | 4500 |
+| position | custom position | string | top-right/top-left/bottom-right/bottom-left | top-right |
+| showClose | whether to show a close button | boolean | — | true |
 | onClose | callback function when closed | function | — | — |
 | onClick | callback function when notification clicked | function | — | — |
 | offset | offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset | number | — | 0 |
 
 ### Methods
-`Notification` and `this.$notify` returns the current Message instance. To manually close the instance, you can call `close` on it.
+`Notification` and `this.$notify` returns the current Notification instance. To manually close the instance, you can call `close` on it.
 | Method | Description |
 | ---- | ---- |
 | close | close the Notification |
diff --git a/examples/docs/en-US/pagination.md b/examples/docs/en-US/pagination.md
index 5f182f5ac8..f43127f7fe 100644
--- a/examples/docs/en-US/pagination.md
+++ b/examples/docs/en-US/pagination.md
@@ -7,7 +7,7 @@
     padding: 30px 0;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    float: left;
+    display: inline-block;
     width: 50%;
     box-sizing: border-box;
 
@@ -73,6 +73,31 @@ If you have too much data to display in one page, use pagination.
 ```
 :::
 
+### Number of pagers
+
+:::demo By default, Pagination collapses extra pager buttons when it has more than 7 pages. This can be configured with the `pager-count` attribute.
+```html
+<el-pagination
+  :page-size="20"
+  :pager-count="11"
+  layout="prev, pager, next"
+  :total="1000">
+</el-pagination>
+```
+:::
+
+### Buttons with background color
+
+:::demo Set the `background` attribute and the buttons will have a background color.
+```html
+<el-pagination
+  background
+  layout="prev, pager, next"
+  :total="1000">
+</el-pagination>
+```
+:::
+
 ### Small Pagination
 
 Use small pagination in the case of limited space.
@@ -199,18 +224,26 @@ Add more modules based on your scenario.
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
 | small              |   whether to use small pagination    | boolean |      —       | false |
-| page-size              | item count of each page  | number |      —       | 10 |
+| background | whether the buttons have a background color | boolean | — | false |
+| page-size              | item count of each page, supports the .sync modifier  | number |      —       | 10 |
 | total | total item count | number | — | — |
 | page-count | total page count. Set either `total` or `page-count` and pages will be displayed; if you need `page-sizes`, `total` is required | number | — | — |
+| pager-count | number of pagers. Pagination collapses when the total page count exceeds this value | number | odd number between 5 and 21 | 7 |
 | current-page | current page number, supports the .sync modifier | number | — | 1 |
 | layout | layout of Pagination, elements separated with a comma | string | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total'  |
 | page-sizes | options of item count per page | number[] | — |  [10, 20, 30, 40, 50, 100] |
+| popper-class | custom class name for the page size Select's dropdown | string | — | — |
+| prev-text | text for the prev button | string | — | — |
+| next-text | text for the next button | string | — | — |
+| disabled | whether Pagination is disabled | boolean | — | false |
 
 ### Events
 | Event Name | Description | Parameters |
 |---------|--------|---------|
-| size-change | triggers when `page-size` changes | the new `page-size` |
-| current-change | triggers when `current-page` changes | the new `current-page` |
+| size-change | triggers when `page-size` changes | the new page size |
+| current-change | triggers when `current-page` changes | the new current page |
+| prev-click | triggers when the prev button is clicked and current page changes | the new current page |
+| next-click | triggers when the next button is clicked and current page changes | the new current page |
 
 ### Slot
 | Name | Description |
diff --git a/examples/docs/en-US/popover.md b/examples/docs/en-US/popover.md
index 9869913d01..ddad5fce0d 100644
--- a/examples/docs/en-US/popover.md
+++ b/examples/docs/en-US/popover.md
@@ -1,248 +1,265 @@
-<style>
-  .demo-box.demo-popover {
-    .el-popover + .el-popover {
-      margin-left: 10px;
-    }
-    .el-input {
-      width: 360px;
-    }
-    .el-button {
-      margin-left: 10px;
-    }
-  }
-</style>
-
-<script>
-  export default {
-    data() {
-      return {
-        visible2: false,
-        gridData: [{
-          date: '2016-05-02',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          date: '2016-05-04',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          date: '2016-05-01',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          date: '2016-05-03',
-          name: 'Jack',
-          address: 'New York City'
-        }],
-        gridData2: [{
-          date: '2016-05-02',
-          name: 'Jack',
-          address: 'New York City',
-        }, {
-          date: '2016-05-04',
-          name: 'Jack',
-          address: 'New York City',
-          $info: true
-        }, {
-          date: '2016-05-01',
-          name: 'Jack',
-          address: 'New York City',
-        }, {
-          date: '2016-05-03',
-          name: 'Jack',
-          address: 'New York City',
-          $positive: true
-        }],
-        gridData3: [{
-          tag: 'Home',
-          date: '2016-05-03',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          tag: 'Company',
-          date: '2016-05-02',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          tag: 'Company',
-          date: '2016-05-04',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          tag: 'Home',
-          date: '2016-05-01',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          tag: 'Company',
-          date: '2016-05-08',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          tag: 'Home',
-          date: '2016-05-06',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          tag: 'Company',
-          date: '2016-05-07',
-          name: 'Jack',
-          address: 'New York City'
-        }],
-        singleSelection: {},
-        multipleSelection: [],
-        model: ''
-      };
-    }
-  };
-</script>
-
-## Popover
-
-### Basic usage
-
-Similar to Tooltip, Popover is also built with `Vue-popper`. So for some duplicated attributes, please refer to the documentation of Tooltip.
-
-:::demo Add `ref` in your popover, then in your button, use `v-popover` directive to link the button and the popover. The attribute `trigger` is used to define how popover is triggered: `hover`, `click` or `focus`. Alternatively, you can specify reference using a named `slot`.
-
-```html
-<el-popover
-  ref="popover1"
-  placement="top-start"
-  title="Title"
-  width="200"
-  trigger="hover"
-  content="this is content, this is content, this is content">
-</el-popover>
-
-<el-popover
-  ref="popover2"
-  placement="bottom"
-  title="Title"
-  width="200"
-  trigger="click"
-  content="this is content, this is content, this is content">
-</el-popover>
-
-<el-button v-popover:popover1>Hover to activate</el-button>
-<el-button v-popover:popover2>Click to activate</el-button>
-<el-popover
-  placement="right"
-  title="Title"
-  width="200"
-  trigger="focus"
-  content="this is content, this is content, this is content">
-  <el-button slot="reference">Focus to activate</el-button>
-</el-popover>
-```
-:::
-
-### Nested information
-
-Other components can be nested in popover. Following is an example of nested table.
-
-:::demo replace the `content` attribute with a default `slot`.
-
-```html
-<el-popover
-  ref="popover4"
-  placement="right"
-  width="400"
-  trigger="click">
-  <el-table :data="gridData">
-    <el-table-column width="150" property="date" label="date"></el-table-column>
-    <el-table-column width="100" property="name" label="name"></el-table-column>
-    <el-table-column width="300" property="address" label="address"></el-table-column>
-  </el-table>
-</el-popover>
-
-<el-button v-popover:popover4>Click to activate</el-button>
-
-<script>
-  export default {
-    data() {
-      return {
-        gridData: [{
-          date: '2016-05-02',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          date: '2016-05-04',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          date: '2016-05-01',
-          name: 'Jack',
-          address: 'New York City'
-        }, {
-          date: '2016-05-03',
-          name: 'Jack',
-          address: 'New York City'
-        }]
-      };
-    }
-  };
-</script>
-```
-:::
-
-### Nested operation
-
-Of course, you can nest other operations. It's more light-weight than using a dialog.
-
-:::demo
-```html
-<el-popover
-  ref="popover5"
-  placement="top"
-  width="160"
-  v-model="visible2">
-  <p>Are you sure to delete this?</p>
-  <div style="text-align: right; margin: 0">
-    <el-button size="mini" type="text" @click="visible2 = false">cancel</el-button>
-    <el-button type="primary" size="mini" @click="visible2 = false">confirm</el-button>
-  </div>
-</el-popover>
-
-<el-button v-popover:popover5>Delete</el-button>
-
-<script>
-  export default {
-    data() {
-      return {
-        visible2: false,
-      };
-    }
-  }
-</script>
-```
-:::
-
-### Attributes
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
-|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
-| trigger | how the popover is triggered | string  | click/focus/hover/manual |    click    |
-|  title              | popover title | string | — | — |
-|  content        |  popover content, can be replaced with a default `slot`    | string            | — | — |
-|  width        |  popover width  | string, number            | — | Min width 150px |
-|  placement        |  popover placement  | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |  bottom |
-|  disabled       |  whether Popover is disabled  | boolean    | — |  false |
-|  value(v-model)        |  whether popover is visible  | Boolean           | — |  false |
-|  offset        |  popover offset  | number           | — |  0 |
-|  transition     |  popover transition animation      | string             | — | el-fade-in-linear |
-|  visible-arrow   |  whether a tooltip arrow is displayed or not. For more info, please refer to [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
-|  popper-options        | parameters for [popper.js](https://popper.js.org/documentation.html) | object            | please refer to [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
-|  popper-class        |  custom class name for popover | string | — | — |
-|  open-delay        | delay of appearance when `trigger` is hover, in milliseconds | number | — | — |
-
-### Slot
-| Name | Description |
-| --- | --- |
-| — | text content of popover |
-| reference | HTML element that triggers popover |
-
-### Events
-| Event Name | Description | 回调参数 |
-|---------|--------|---------|
-| show | triggers when popover shows | — |
-| hide | triggers when popover hides | — |
+<script>
+  export default {
+    data() {
+      return {
+        visible: false,
+        visible2: false,
+        gridData: [{
+          date: '2016-05-02',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          date: '2016-05-04',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          date: '2016-05-01',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          date: '2016-05-03',
+          name: 'Jack',
+          address: 'New York City'
+        }],
+        gridData2: [{
+          date: '2016-05-02',
+          name: 'Jack',
+          address: 'New York City',
+        }, {
+          date: '2016-05-04',
+          name: 'Jack',
+          address: 'New York City',
+          $info: true
+        }, {
+          date: '2016-05-01',
+          name: 'Jack',
+          address: 'New York City',
+        }, {
+          date: '2016-05-03',
+          name: 'Jack',
+          address: 'New York City',
+          $positive: true
+        }],
+        gridData3: [{
+          tag: 'Home',
+          date: '2016-05-03',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          tag: 'Company',
+          date: '2016-05-02',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          tag: 'Company',
+          date: '2016-05-04',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          tag: 'Home',
+          date: '2016-05-01',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          tag: 'Company',
+          date: '2016-05-08',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          tag: 'Home',
+          date: '2016-05-06',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          tag: 'Company',
+          date: '2016-05-07',
+          name: 'Jack',
+          address: 'New York City'
+        }]
+      };
+    }
+  };
+</script>
+
+<style>
+  .demo-box.demo-popover {
+    .el-popover + .el-popover {
+      margin-left: 10px;
+    }
+    .el-input {
+      width: 360px;
+    }
+    .el-button {
+      margin-left: 10px;
+    }
+  }
+</style>
+
+## Popover
+
+### Basic usage
+
+Similar to Tooltip, Popover is also built with `Vue-popper`. So for some duplicated attributes, please refer to the documentation of Tooltip.
+
+:::demo The `trigger` attribute is used to define how popover is triggered: `hover`, `click`, `focus` or `manual`. As for the triggering element, you can write it in two different ways: use the `slot="reference"` named slot, or use the `v-popover` directive and set it to Popover's `ref`.
+
+```html
+<template>
+  <el-popover
+    placement="top-start"
+    title="Title"
+    width="200"
+    trigger="hover"
+    content="this is content, this is content, this is content">
+    <el-button slot="reference">Hover to activate</el-button>
+  </el-popover>
+
+  <el-popover
+    placement="bottom"
+    title="Title"
+    width="200"
+    trigger="click"
+    content="this is content, this is content, this is content">
+    <el-button slot="reference">Click to activate</el-button>
+  </el-popover>
+
+  <el-popover
+    ref="popover"
+    placement="right"
+    title="Title"
+    width="200"
+    trigger="focus"
+    content="this is content, this is content, this is content">
+  </el-popover>
+  <el-button v-popover:popover>Focus to activate</el-button>
+
+  <el-popover
+    placement="bottom"
+    title="Title"
+    width="200"
+    trigger="manual"
+    content="this is content, this is content, this is content"
+    v-model="visible">
+    <el-button slot="reference" @click="visible = !visible">Manual to activate</el-button>
+  </el-popover>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        visible: false
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Nested information
+
+Other components can be nested in popover. Following is an example of nested table.
+
+:::demo replace the `content` attribute with a default `slot`.
+
+```html
+<el-popover
+  placement="right"
+  width="400"
+  trigger="click">
+  <el-table :data="gridData">
+    <el-table-column width="150" property="date" label="date"></el-table-column>
+    <el-table-column width="100" property="name" label="name"></el-table-column>
+    <el-table-column width="300" property="address" label="address"></el-table-column>
+  </el-table>
+  <el-button slot="reference">Click to activate</el-button>
+</el-popover>
+
+<script>
+  export default {
+    data() {
+      return {
+        gridData: [{
+          date: '2016-05-02',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          date: '2016-05-04',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          date: '2016-05-01',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          date: '2016-05-03',
+          name: 'Jack',
+          address: 'New York City'
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Nested operation
+
+Of course, you can nest other operations. It's more light-weight than using a dialog.
+
+:::demo
+```html
+<el-popover
+  placement="top"
+  width="160"
+  v-model="visible2">
+  <p>Are you sure to delete this?</p>
+  <div style="text-align: right; margin: 0">
+    <el-button size="mini" type="text" @click="visible2 = false">cancel</el-button>
+    <el-button type="primary" size="mini" @click="visible2 = false">confirm</el-button>
+  </div>
+  <el-button slot="reference">Delete</el-button>
+</el-popover>
+
+<script>
+  export default {
+    data() {
+      return {
+        visible2: false,
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Attributes
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
+|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
+| trigger | how the popover is triggered | string  | click/focus/hover/manual |    click    |
+|  title              | popover title | string | — | — |
+|  content        |  popover content, can be replaced with a default `slot`    | string            | — | — |
+|  width        |  popover width  | string, number            | — | Min width 150px |
+|  placement        |  popover placement  | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |  bottom |
+|  disabled       |  whether Popover is disabled  | boolean    | — |  false |
+|  value(v-model)        |  whether popover is visible  | Boolean           | — |  false |
+|  offset        |  popover offset  | number           | — |  0 |
+|  transition     |  popover transition animation      | string             | — | el-fade-in-linear |
+|  visible-arrow   |  whether a tooltip arrow is displayed or not. For more info, please refer to [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
+|  popper-options        | parameters for [popper.js](https://popper.js.org/documentation.html) | object            | please refer to [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
+|  popper-class        |  custom class name for popover | string | — | — |
+|  open-delay        | delay of appearance when `trigger` is hover, in milliseconds | number | — | — |
+
+### Slot
+| Name | Description |
+| --- | --- |
+| — | text content of popover |
+| reference | HTML element that triggers popover |
+
+### Events
+| Event Name | Description | 回调参数 |
+|---------|--------|---------|
+| show | triggers when popover shows | — |
+| after-enter | triggers when the entering transition ends | — |
+| hide | triggers when popover hides | — |
+| after-leave | triggers when the leaving transition ends | — |
diff --git a/examples/docs/en-US/progress.md b/examples/docs/en-US/progress.md
index f72ead8079..58ca755ced 100644
--- a/examples/docs/en-US/progress.md
+++ b/examples/docs/en-US/progress.md
@@ -1,3 +1,14 @@
+<style>
+  .demo-box.demo-progress {
+    .el-progress--line {
+      margin-bottom: 15px;
+      width: 350px;
+    }
+    .el-progress--circle {
+      margin-right: 15px;
+    }
+  }
+</style>
 ## Progress
 
 Progress is used to show the progress of current operation, and inform the user the current status.
@@ -8,6 +19,7 @@ Progress is used to show the progress of current operation, and inform the user
 ```html
 <el-progress :percentage="0"></el-progress>
 <el-progress :percentage="70"></el-progress>
+<el-progress :percentage="80" color="#8e71c7"></el-progress>
 <el-progress :percentage="100" status="success"></el-progress>
 <el-progress :percentage="50" status="exception"></el-progress>
 ```
@@ -21,6 +33,7 @@ In this case the percentage takes no additional space.
 ```html
 <el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
 <el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
+<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>
 <el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
 <el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>
 ```
@@ -32,6 +45,7 @@ In this case the percentage takes no additional space.
 ```html
 <el-progress type="circle" :percentage="0"></el-progress>
 <el-progress type="circle" :percentage="25"></el-progress>
+<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>
 <el-progress type="circle" :percentage="100" status="success"></el-progress>
 <el-progress type="circle" :percentage="50" status="exception"></el-progress>
 ``` 
@@ -45,6 +59,6 @@ In this case the percentage takes no additional space.
 | stroke-width | the width of progress bar | number | — | 6 |
 | text-inside | whether to place the percentage inside progress bar, only works when `type` is 'line' | boolean | — | false |
 | status | the current status of progress bar | string | success/exception | — |
+| color  | background color of progress bar. Overrides `status` prop | string | — | — |
 | width | the canvas width of circle progress bar | number | — | 126 |
 | show-text | whether to show percentage | boolean | — | true |
-
diff --git a/examples/docs/en-US/quickstart.md b/examples/docs/en-US/quickstart.md
index 2b692cab99..9869108fbb 100644
--- a/examples/docs/en-US/quickstart.md
+++ b/examples/docs/en-US/quickstart.md
@@ -2,130 +2,15 @@
 
 This part walks you through the process of using Element in a webpack project.
 
-### Use Starter Kit
-
-We provide a general [project template](https://github.com/ElementUI/element-starter) for you. For those who are familiar with [cooking](https://github.com/ElementUI/element-cooking-starter) or [Laravel](https://github.com/ElementUI/element-in-laravel-starter), we also provide corresponding templates, and you can download and use them as well.
+### Use vue-cli@3
 
-If you prefer not to use them, please read the following.
+We provide an [Element plugin](https://github.com/ElementUI/vue-cli-plugin-element) for vue-cli@3, which you can use to quickly build an Element-based project.
 
-### Config files
-
-Create a new project, and its structure should be
-```text
-|- src/  --------------------- source code
-    |- App.vue
-    |- main.js  -------------- entry
-|- .babelrc  ----------------- babel config
-|- index.html  --------------- HTML template
-|- package.json  ------------- npm config
-|- README.md  ---------------- readme
-|- webpack.config.js  -------- webpack config
-```
-
-Typical configurations for these config files are:
-
-**.babelrc**
-```json
-{
-  "presets": ["vue-app"]
-}
-```
-
-<br>
-
-**package.json**
-```json
-{
-  "name": "element-starter",
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 8086",
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
-  },
-  "dependencies": {
-    "element-ui": "^1.0.0",
-    "vue": "^2.1.6"
-  },
-  "devDependencies": {
-    "babel-core": "^6.0.0",
-    "babel-loader": "^6.0.0",
-    "babel-preset-vue-app": "^1.2.0",
-    "cross-env": "^1.0.6",
-    "css-loader": "^0.23.1",
-    "file-loader": "^0.8.5",
-    "style-loader": "^0.13.1",
-    "vue-loader": "^9.8.0",
-    "webpack": "beta",
-    "webpack-dev-server": "beta"
-  }
-}
-```
-
-<br>
+### Use Starter Kit
 
-**webpack.config.js**
-```javascript
-var path = require('path')
-var webpack = require('webpack')
-
-module.exports = {
-  entry: './src/main.js',
-  output: {
-    path: path.resolve(__dirname, './dist'),
-    publicPath: '/dist/',
-    filename: 'build.js'
-  },
-  module: {
-    loaders: [
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader'
-      },
-      {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        exclude: /node_modules/
-      },
-      {
-        test: /\.css$/,
-        loader: 'style-loader!css-loader'
-      },
-      {
-        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
-        loader: 'file-loader'
-      },
-      {
-        test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
-        loader: 'file-loader',
-        query: {
-          name: '[name].[ext]?[hash]'
-        }
-      }
-    ]
-  },
-  devServer: {
-    historyApiFallback: true,
-    noInfo: true
-  },
-  devtool: '#eval-source-map'
-}
+We provide a general [project template](https://github.com/ElementUI/element-starter) for you. For Laravel users, we also have a [template](https://github.com/ElementUI/element-in-laravel-starter). You can download and use them directly.
 
-if (process.env.NODE_ENV === 'production') {
-  module.exports.devtool = '#source-map'
-  // http://vue-loader.vuejs.org/en/workflow/production.html
-  module.exports.plugins = (module.exports.plugins || []).concat([
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"production"'
-      }
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
-    })
-  ])
-}
-```
+If you prefer not to use them, please read the following.
 
 ### Import Element
 
@@ -134,19 +19,21 @@ You can import Element entirely, or just import what you need. Let's start with
 #### Fully import
 
 In main.js:
+
 ```javascript
-import Vue from 'vue'
-import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-default/index.css'
-import App from './App.vue'
+import Vue from 'vue';
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import App from './App.vue';
 
-Vue.use(ElementUI)
+Vue.use(ElementUI);
 
 new Vue({
   el: '#app',
   render: h => h(App)
-})
+});
 ```
+
 The above imports Element entirely. Note that CSS file needs to be imported separately.
 
 #### On demand
@@ -160,29 +47,31 @@ npm install babel-plugin-component -D
 ```
 
 Then edit .babelrc:
+
 ```json
 {
-  "presets": [
-    ["es2015", { "modules": false }]
-  ],
-  "plugins": [["component", [
-    {
-      "libraryName": "element-ui",
-      "styleLibraryName": "theme-default"
-    }
-  ]]]
+  "presets": [["es2015", { "modules": false }]],
+  "plugins": [
+    [
+      "component",
+      {
+        "libraryName": "element-ui",
+        "styleLibraryName": "theme-chalk"
+      }
+    ]
+  ]
 }
 ```
 
 Next, if you need Button and Select, edit main.js:
 
 ```javascript
-import Vue from 'vue'
-import { Button, Select } from 'element-ui'
-import App from './App.vue'
+import Vue from 'vue';
+import { Button, Select } from 'element-ui';
+import App from './App.vue';
 
-Vue.component(Button.name, Button)
-Vue.component(Select.name, Select)
+Vue.component(Button.name, Button);
+Vue.component(Select.name, Select);
 /* or
  * Vue.use(Button)
  * Vue.use(Select)
@@ -191,13 +80,13 @@ Vue.component(Select.name, Select)
 new Vue({
   el: '#app',
   render: h => h(App)
-})
+});
 ```
 
-Full example (Component list reference [components.json](https://github.com/ElemeFE/element/blob/dev/components.json))
+Full example (Component list reference [components.json](https://github.com/ElemeFE/element/blob/master/components.json))
 
 ```javascript
-import Vue from 'vue'
+import Vue from 'vue';
 import {
   Pagination,
   Dialog,
@@ -215,6 +104,7 @@ import {
   RadioGroup,
   RadioButton,
   Checkbox,
+  CheckboxButton,
   CheckboxGroup,
   Switch,
   Select,
@@ -244,107 +134,136 @@ import {
   Col,
   Upload,
   Progress,
-  Spinner,
   Badge,
   Card,
   Rate,
   Steps,
   Step,
   Carousel,
-  Scrollbar,
   CarouselItem,
   Collapse,
   CollapseItem,
   Cascader,
   ColorPicker,
+  Transfer,
+  Container,
+  Header,
+  Aside,
+  Main,
+  Footer,
   Loading,
   MessageBox,
   Message,
   Notification
-} from 'element-ui'
-
-Vue.use(Pagination)
-Vue.use(Dialog)
-Vue.use(Autocomplete)
-Vue.use(Dropdown)
-Vue.use(DropdownMenu)
-Vue.use(DropdownItem)
-Vue.use(Menu)
-Vue.use(Submenu)
-Vue.use(MenuItem)
-Vue.use(MenuItemGroup)
-Vue.use(Input)
-Vue.use(InputNumber)
-Vue.use(Radio)
-Vue.use(RadioGroup)
-Vue.use(RadioButton)
-Vue.use(Checkbox)
-Vue.use(CheckboxGroup)
-Vue.use(Switch)
-Vue.use(Select)
-Vue.use(Option)
-Vue.use(OptionGroup)
-Vue.use(Button)
-Vue.use(ButtonGroup)
-Vue.use(Table)
-Vue.use(TableColumn)
-Vue.use(DatePicker)
-Vue.use(TimeSelect)
-Vue.use(TimePicker)
-Vue.use(Popover)
-Vue.use(Tooltip)
-Vue.use(Breadcrumb)
-Vue.use(BreadcrumbItem)
-Vue.use(Form)
-Vue.use(FormItem)
-Vue.use(Tabs)
-Vue.use(TabPane)
-Vue.use(Tag)
-Vue.use(Tree)
-Vue.use(Alert)
-Vue.use(Slider)
-Vue.use(Icon)
-Vue.use(Row)
-Vue.use(Col)
-Vue.use(Upload)
-Vue.use(Progress)
-Vue.use(Spinner)
-Vue.use(Badge)
-Vue.use(Card)
-Vue.use(Rate)
-Vue.use(Steps)
-Vue.use(Step)
-Vue.use(Carousel)
-Vue.use(Scrollbar)
-Vue.use(CarouselItem)
-Vue.use(Collapse)
-Vue.use(CollapseItem)
-Vue.use(Cascader)
-Vue.use(ColorPicker)
-
-Vue.use(Loading.directive)
-
-Vue.prototype.$loading = Loading.service
-Vue.prototype.$msgbox = MessageBox
-Vue.prototype.$alert = MessageBox.alert
-Vue.prototype.$confirm = MessageBox.confirm
-Vue.prototype.$prompt = MessageBox.prompt
-Vue.prototype.$notify = Notification
-Vue.prototype.$message = Message
+} from 'element-ui';
+
+Vue.use(Pagination);
+Vue.use(Dialog);
+Vue.use(Autocomplete);
+Vue.use(Dropdown);
+Vue.use(DropdownMenu);
+Vue.use(DropdownItem);
+Vue.use(Menu);
+Vue.use(Submenu);
+Vue.use(MenuItem);
+Vue.use(MenuItemGroup);
+Vue.use(Input);
+Vue.use(InputNumber);
+Vue.use(Radio);
+Vue.use(RadioGroup);
+Vue.use(RadioButton);
+Vue.use(Checkbox);
+Vue.use(CheckboxButton);
+Vue.use(CheckboxGroup);
+Vue.use(Switch);
+Vue.use(Select);
+Vue.use(Option);
+Vue.use(OptionGroup);
+Vue.use(Button);
+Vue.use(ButtonGroup);
+Vue.use(Table);
+Vue.use(TableColumn);
+Vue.use(DatePicker);
+Vue.use(TimeSelect);
+Vue.use(TimePicker);
+Vue.use(Popover);
+Vue.use(Tooltip);
+Vue.use(Breadcrumb);
+Vue.use(BreadcrumbItem);
+Vue.use(Form);
+Vue.use(FormItem);
+Vue.use(Tabs);
+Vue.use(TabPane);
+Vue.use(Tag);
+Vue.use(Tree);
+Vue.use(Alert);
+Vue.use(Slider);
+Vue.use(Icon);
+Vue.use(Row);
+Vue.use(Col);
+Vue.use(Upload);
+Vue.use(Progress);
+Vue.use(Badge);
+Vue.use(Card);
+Vue.use(Rate);
+Vue.use(Steps);
+Vue.use(Step);
+Vue.use(Carousel);
+Vue.use(CarouselItem);
+Vue.use(Collapse);
+Vue.use(CollapseItem);
+Vue.use(Cascader);
+Vue.use(ColorPicker);
+Vue.use(Transfer);
+Vue.use(Container);
+Vue.use(Header);
+Vue.use(Aside);
+Vue.use(Main);
+Vue.use(Footer);
+
+Vue.use(Loading.directive);
+
+Vue.prototype.$loading = Loading.service;
+Vue.prototype.$msgbox = MessageBox;
+Vue.prototype.$alert = MessageBox.alert;
+Vue.prototype.$confirm = MessageBox.confirm;
+Vue.prototype.$prompt = MessageBox.prompt;
+Vue.prototype.$notify = Notification;
+Vue.prototype.$message = Message;
 ```
 
-### Start coding
+### Global config
 
-Now you have implemented Vue and Element to your project, and it's time to write your code. Start development mode:
+When importing Element, you can define a global config object. For now this object has two properties: `size` and `zIndex`. The property `size` sets the default size for all components and the property `zIndex` sets the initial z-index (default: 2000) for modal boxes:
 
-```bash
-# visit localhost:8086
-npm run dev
+Fully import Element：
+
+```js
+import Vue from 'vue';
+import Element from 'element-ui';
+Vue.use(Element, { size: 'small', zIndex: 3000 });
 ```
 
-Build:
+Partial import Element：
 
-```bash
-npm run build
+```js
+import Vue from 'vue';
+import { Button } from 'element-ui';
+
+Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
+Vue.use(Button);
 ```
-Please refer to each component's documentation to learn how to use them.
+
+With the above config, the default size of all components that have size attribute will be 'small', and the initial z-index of modal boxes is 3000.
+
+### Start coding
+
+Now you have implemented Vue and Element to your project, and it's time to write your code. Please refer to each component's documentation to learn how to use them.
+
+### Use Nuxt.js
+
+We can also start a project using [Nuxt.js](https://nuxtjs.org/):
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe src="https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true" alt="nuxt-with-element on glitch" style="height: 100%; width: 100%; border: 0;"></iframe>
+</div>
diff --git a/examples/docs/en-US/radio.md b/examples/docs/en-US/radio.md
index 3533ea543d..5807b6cece 100644
--- a/examples/docs/en-US/radio.md
+++ b/examples/docs/en-US/radio.md
@@ -7,7 +7,12 @@
         radio2: 3,
         radio3: 'New York',
         radio4: 'New York',
-        radio5: 'New York'
+        radio5: 'New York',
+        radio6: 'New York',
+        radio7: '1',
+        radio8: '1',
+        radio9: '1',
+        radio10: '1'
       };
     }
   };
@@ -21,11 +26,11 @@ Single selection among multiple options.
 
 Radio should not have too many options. Otherwise, use the Select component instead.
 
-:::demo Creating a radio component is easy, you just need to bind a variable to Radio's `v-model`. It equals to the value of `label` of the chosen radio. The type of `label` is `String` or `Number`.
+:::demo Creating a radio component is easy, you just need to bind a variable to Radio's `v-model`. It equals to the value of `label` of the chosen radio. The type of `label` is `String`, `Number` or `Boolean`.
 ```html
 <template>
-  <el-radio class="radio" v-model="radio" label="1">optionA</el-radio>
-  <el-radio class="radio" v-model="radio" label="2">optionB</el-radio>
+  <el-radio v-model="radio" label="1">Option A</el-radio>
+  <el-radio v-model="radio" label="2">Option B</el-radio>
 </template>
 
 <script>
@@ -47,8 +52,8 @@ Radio should not have too many options. Otherwise, use the Select component inst
 :::demo You just need to add the `disabled` attribute.
 ```html
 <template>
-  <el-radio disabled v-model="radio1" label="disabled">optionA</el-radio>
-  <el-radio disabled v-model="radio1" label="selected and disabled">optionB</el-radio>
+  <el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>
+  <el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>
 </template>
 
 <script>
@@ -67,13 +72,13 @@ Radio should not have too many options. Otherwise, use the Select component inst
 
 Suitable for choosing from some mutually exclusive options.
 
-:::demo Combine `<el-radio-group>` with `<el-radio>` to display a radio group. Bind a variable with `v-model` of `<el-radio-group>` element and set label value in `<el-radio>`. It also provides `change` event with the current value as its parameter.
+:::demo Combine `el-radio-group` with `el-radio` to display a radio group. Bind a variable with `v-model` of `el-radio-group` element and set label value in `el-radio`. It also provides `change` event with the current value as its parameter.
 
 ```html
 <el-radio-group v-model="radio2">
-  <el-radio :label="3">optionA</el-radio>
-  <el-radio :label="6">optionB</el-radio>
-  <el-radio :label="9">optionC</el-radio>
+  <el-radio :label="3">Option A</el-radio>
+  <el-radio :label="6">Option B</el-radio>
+  <el-radio :label="9">Option C</el-radio>
 </el-radio-group>
 
 <script>
@@ -92,28 +97,42 @@ Suitable for choosing from some mutually exclusive options.
 
 Radio with button styles.
 
-:::demo You just need to change `<el-radio>` element into `<el-radio-button>` element. We also provide `size` attribute for these buttons: `large` and `small`.
+:::demo You just need to change `el-radio` element into `el-radio-button` element. We also provide `size` attribute.
 ```html
-<el-radio-group v-model="radio3">
-  <el-radio-button label="New York"></el-radio-button>
-  <el-radio-button label="Washington"></el-radio-button>
-  <el-radio-button label="Los Angeles"></el-radio-button>
-  <el-radio-button label="Chicago"></el-radio-button>
-</el-radio-group>
-<div style="margin: 15px 0;"></div>
-<el-radio-group v-model="radio4">
-  <el-radio-button label="New York"></el-radio-button>
-  <el-radio-button label="Washington" :disabled="true"></el-radio-button>
-  <el-radio-button label="Los Angeles"></el-radio-button>
-  <el-radio-button label="Chicago"></el-radio-button>
-</el-radio-group>
-<div style="margin: 15px 0;"></div>
-<el-radio-group v-model="radio5" :disabled="true">
-  <el-radio-button label="New York"></el-radio-button>
-  <el-radio-button label="Washington"></el-radio-button>
-  <el-radio-button label="Los Angeles"></el-radio-button>
-  <el-radio-button label="Chicago"></el-radio-button>
-</el-radio-group>
+<template>
+  <div>
+    <el-radio-group v-model="radio3">
+      <el-radio-button label="New York"></el-radio-button>
+      <el-radio-button label="Washington"></el-radio-button>
+      <el-radio-button label="Los Angeles"></el-radio-button>
+      <el-radio-button label="Chicago"></el-radio-button>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio4" size="medium">
+      <el-radio-button label="New York" ></el-radio-button>
+      <el-radio-button label="Washington"></el-radio-button>
+      <el-radio-button label="Los Angeles"></el-radio-button>
+      <el-radio-button label="Chicago"></el-radio-button>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio5" size="small">
+      <el-radio-button label="New York"></el-radio-button>
+      <el-radio-button label="Washington" disabled ></el-radio-button>
+      <el-radio-button label="Los Angeles"></el-radio-button>
+      <el-radio-button label="Chicago"></el-radio-button>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio6" disabled size="mini">
+      <el-radio-button label="New York"></el-radio-button>
+      <el-radio-button label="Washington"></el-radio-button>
+      <el-radio-button label="Los Angeles"></el-radio-button>
+      <el-radio-button label="Chicago"></el-radio-button>
+    </el-radio-group>
+  </div>
+</template>
 
 <script>
   export default {
@@ -121,7 +140,50 @@ Radio with button styles.
       return {
         radio3: 'New York',
         radio4: 'New York',
-        radio5: 'New York'
+        radio5: 'New York',
+        radio6: 'New York'
+      };
+    }
+  }
+</script>
+```
+:::
+
+### With borders
+
+:::demo The `border` attribute adds a border to Radios.
+```html
+<template>
+  <div>
+    <el-radio v-model="radio7" label="1" border>Option A</el-radio>
+    <el-radio v-model="radio7" label="2" border>Option B</el-radio>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>
+    <el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio9" size="small">
+      <el-radio label="1" border>Option A</el-radio>
+      <el-radio label="2" border disabled>Option B</el-radio>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio10" size="mini" disabled>
+      <el-radio label="1" border>Option A</el-radio>
+      <el-radio label="2" border>Option B</el-radio>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        radio7: '1',
+        radio8: '1',
+        radio9: '1',
+        radio10: '1'
       };
     }
   }
@@ -133,29 +195,37 @@ Radio with button styles.
 
  Attribute      | Description          | Type      | Accepted Values       | Default
 ---- | ---- | ---- | ---- | ----
-label | the value of radio | string/number/boolean | — | —
-disabled | whether radio is disabled | boolean | — | false
+label | the value of Radio | string / number / boolean | — | —
+disabled | whether Radio is disabled | boolean | — | false
+border  | whether to add a border around Radio  | boolean   | — | false
+size  | size of the Radio, only works when `border` is true  | string  | medium / small / mini | —
 name | native 'name' attribute | string    |      —         |     —
 
+### Radio Events
+
+| Event Name | Description | Parameters |
+| --- | --- | --- |
+| change | triggers when the bound value changes | the label value of the chosen radio |
+
 ### Radio-group Attributes
 
  Attribute      | Description          | Type      | Accepted Values       | Default
 ---- | ---- | ---- | ---- | ----
-size | the size of radio buttons | string | large/small | —
-fill  | border and background color when button is active | string   | — | #20a0ff   |
+size | the size of radio buttons or bordered radios | string | medium / small / mini | —
+disabled  | whether the nesting radios are disabled | boolean   | — | false
 text-color | font color when button is active | string   | — | #ffffff   |
+fill  | border and background color when button is active | string   | — | #409EFF   |
 
 ### Radio-group Events
 
 | Event Name | Description | Parameters |
---- | --- | ---
-change | triggers when the bound value changes | the label value of the chosen radio
+| --- | --- | --- |
+| change | triggers when the bound value changes | the label value of the chosen radio |
 
 ### Radio-button Attributes
 
  Attribute      | Description          | Type      | Accepted Values       | Default
 ---- | ---- | ---- | ---- | ----
-label | the value of radio | string/number | — | —
+label | the value of radio | string / number | — | —
 disabled | whether radio is disabled | boolean | — | false
-
-
+name | native 'name' attribute | string    |      —         |     —
diff --git a/examples/docs/en-US/rate.md b/examples/docs/en-US/rate.md
index ecdf40a05a..f1f579561c 100644
--- a/examples/docs/en-US/rate.md
+++ b/examples/docs/en-US/rate.md
@@ -3,7 +3,7 @@
     padding: 30px 0;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    float: left;
+    display: inline-block;
     width: 50%;
     box-sizing: border-box;
     &:last-child {
@@ -128,15 +128,15 @@ You can use different icons to distinguish different rate components.
 
 Read-only Rate is for displaying rating score. Half star is supported.
 
-:::demo Use attribute `disabled` to make the component read-only. Add `show-text` to display the rating score at the right side. Additionally, you can use attribute `text-template` to provide a text template. It must contain `{value}`, and `{value}` will be replaced with the rating score.
+:::demo Use attribute `disabled` to make the component read-only. Add `show-score` to display the rating score at the right side. Additionally, you can use attribute `score-template` to provide a score template. It must contain `{value}`, and `{value}` will be replaced with the rating score.
 
 ``` html
 <el-rate
   v-model="value5"
   disabled
-  show-text
+  show-score
   text-color="#ff9900"
-  text-template="{value} points">
+  score-template="{value} points">
 </el-rate>
 
 <script>
@@ -166,9 +166,10 @@ Read-only Rate is for displaying rating score. Half star is supported.
 | void-icon-class | class name of unselected icons | string | — | el-icon-star-off |
 | disabled-void-icon-class | class name of unselected read-only icons | string | — | el-icon-star-on |
 | show-text | whether to display texts | boolean | — | false |
+| show-score | whether to display current score. show-score and show-text cannot be true at the same time | boolean | — | false |
 | text-color | color of texts | string | — | #1F2D3D |
 | texts | text array | array | — | ['极差', '失望', '一般', '满意', '惊喜'] |
-| text-template | text template when the component is read-only | string | — | {value} |
+| score-template | score template | string | — | {value} |
 
 ### Events
 | Event Name | Description | Parameters |
diff --git a/examples/docs/en-US/select.md b/examples/docs/en-US/select.md
index 6d0f1fbd50..85453e70c1 100644
--- a/examples/docs/en-US/select.md
+++ b/examples/docs/en-US/select.md
@@ -101,6 +101,7 @@
         value8: '',
         value9: [],
         value10: [],
+        value11: [],
         loading: false,
         states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
       };
@@ -320,7 +321,7 @@ You can clear Select using a clear icon.
 
 Multiple select uses tags to display selected options.
 
-:::demo Set `multiple` attribute for `el-select` to enable multiple mode. In this case, the value of `v-model` will be an array of selected options.
+:::demo Set `multiple` attribute for `el-select` to enable multiple mode. In this case, the value of `v-model` will be an array of selected options. By default the selected options will be displayed as Tags. You can collapse them to a text by using `collapse-tags` attribute.
 ```html
 <template>
   <el-select v-model="value5" multiple placeholder="Select">
@@ -331,6 +332,20 @@ Multiple select uses tags to display selected options.
       :value="item.value">
     </el-option>
   </el-select>
+  
+  <el-select
+    v-model="value11"
+    multiple
+    collapse-tags
+    style="margin-left: 20px;"
+    placeholder="Select">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
 </template>
 
 <script>
@@ -353,7 +368,8 @@ Multiple select uses tags to display selected options.
           value: 'Option5',
           label: 'Option5'
         }],
-        value5: []
+        value5: [],
+        value11: []
       }
     }
   }
@@ -530,6 +546,7 @@ Enter keywords and search data from server.
     multiple
     filterable
     remote
+    reserve-keyword
     placeholder="Please enter a keyword"
     :remote-method="remoteMethod"
     :loading="loading">
@@ -597,7 +614,7 @@ Enter keywords and search data from server.
 
 ### Create new items
 Create and select new items that are not included in select options
-:::demo By using the `allow-create` attribute, users can create new items by typing in the input box. Note that for `allow-create` to work, `filterable` must be `true`.
+:::demo By using the `allow-create` attribute, users can create new items by typing in the input box. Note that for `allow-create` to work, `filterable` must be `true`. This example also demonstrates `default-first-option`. When this attribute is set to `true`, you can select the first option in the current option list by hitting enter without having to navigate with mouse or arrow keys.
 ```html
 <template>
   <el-select
@@ -605,6 +622,7 @@ Create and select new items that are not included in select options
     multiple
     filterable
     allow-create
+    default-first-option
     placeholder="Choose tags for your article">
     <el-option
       v-for="item in options5"
@@ -648,9 +666,12 @@ If the binding value of Select is an object, make sure to assign `value-key` as
 | disabled | whether Select is disabled | boolean | — | false |
 | value-key | unique identity key name for value, required when value is an object | string | — | value |
 | size | size of Input | string | large/small/mini | — |
-| clearable | whether single select can be cleared | boolean | — | false |
+| clearable | whether select can be cleared | boolean | — | false |
+| collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | — | false |
 | multiple-limit | maximum number of options user can select when `multiple` is `true`. No limit when set to 0 | number | — | 0 |
 | name | the name attribute of select input | string | — | — |
+| autocomplete | the autocomplete attribute of select input | string | — | off |
+| auto-complete | @DEPRECATED in next major version | string | — | off |
 | placeholder | placeholder | string | — | Select |
 | filterable | whether Select is filterable | boolean | — | false |
 | allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | — | false |
@@ -662,7 +683,10 @@ If the binding value of Select is an object, make sure to assign `value-key` as
 | no-match-text | displayed text when no data matches the filtering query | string | — | No matching data |
 | no-data-text | displayed text when there is no options | string | — | No data |
 | popper-class | custom class name for Select's dropdown | string | — | — |
+| reserve-keyword | when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option | boolean | — | false |
 | default-first-option | select first matching option on enter key. Use with `filterable` or `remote` | boolean | - | false |
+| popper-append-to-body| whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | boolean | - | true |
+| automatic-dropdown | for non-filterable Select, this prop decides if the option menu pops up when the input is focused | boolean | - | false |
 
 ### Select Events
 | Event Name | Description | Parameters |
@@ -671,6 +695,14 @@ If the binding value of Select is an object, make sure to assign `value-key` as
 | visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |
 | remove-tag | triggers when a tag is removed in multiple mode | removed tag value |
 | clear | triggers when the clear icon is clicked in a clearable Select | — |
+| blur | triggers when Input blurs | (event: Event) |
+| focus | triggers when Input focuses | (event: Event) |
+
+### Select Slots
+| Name    | Description |
+|---------|-------------|
+|    —    | Option component list |
+| prefix  | content as Select prefix |
 
 ### Option Group Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
@@ -685,3 +717,8 @@ If the binding value of Select is an object, make sure to assign `value-key` as
 | label | label of option, same as `value` if omitted | string/number | — | — |
 | disabled | whether option is disabled | boolean | — | false |
 
+### Methods
+| Method | Description | Parameters |
+|------|--------|-------|
+| focus | focus the Input component | - |
+| blur | blur the Input component, and hide the dropdown | - |
diff --git a/examples/docs/en-US/slider.md b/examples/docs/en-US/slider.md
index 9c47f1eb88..3d769a05d4 100644
--- a/examples/docs/en-US/slider.md
+++ b/examples/docs/en-US/slider.md
@@ -22,6 +22,33 @@
   }
 </script>
 
+<style>
+  .demo-box.demo-slider .source {
+    padding: 0;
+  }
+  
+  .demo-box.demo-slider .block {
+    padding: 30px 24px;
+    overflow: hidden;
+    border-bottom: solid 1px #EFF2F6;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+  
+  .demo-box.demo-slider .demonstration {
+    font-size: 14px;
+    color: #8492a6;
+    line-height: 44px;
+  }
+  
+  .demo-box.demo-slider .demonstration + .el-slider {
+    float: right;
+    width: 70%;
+    margin-right: 20px;
+  }
+</style>
+
 ## Slider
 
 Drag the slider within a fixed range.
@@ -207,12 +234,16 @@ Selecting a range of values is supported.
 | step | step size | number | — | 1 |
 | show-input | whether to display an input box, works when `range` is false | boolean | — | false |
 | show-input-controls | whether to display control buttons when `show-input` is true | boolean | — | true |
+| input-size | size of the input box | string | large / medium / small / mini | small |
 | show-stops | whether to display breakpoints | boolean | — | false |
 | show-tooltip | whether to display tooltip value | boolean | — | true |
-| format-tooltip | format to display tooltip value | Function(value) | — | — |
+| format-tooltip | format to display tooltip value | function(value) | — | — |
 | range | whether to select a range | boolean | — | false |
 | vertical | vertical mode | boolean | — | false |
-| height | Slider height, required in vertical mode | String | — | — |
+| height | Slider height, required in vertical mode | string | — | — |
+| label | label for screen reader | string | — | — |
+| debounce | debounce delay when typing, in milliseconds, works when `show-input` is true | number | — | 300 |
+| tooltip-class | custom class name for the tooltip | string | — | — |
 
 ## Events
 | Event Name | Description | Parameters |
diff --git a/examples/docs/en-US/steps.md b/examples/docs/en-US/steps.md
index d5de169d65..a40404e52f 100644
--- a/examples/docs/en-US/steps.md
+++ b/examples/docs/en-US/steps.md
@@ -25,7 +25,7 @@ Simple step bar.
 :::demo Set `active` attribute with `Number` type, which indicates the index of steps and starts from 0. You can set `space` attribute when the width of the step needs to be fixed which accepts `Boolean` type. The unit of the `space` attribute is `px`. If not set, it is responsive. Setting the `finish-status` attribute can change the state of the steps that have been completed.
 
 ```html
-<el-steps :space="100" :active="active" finish-status="success">
+<el-steps :active="active" finish-status="success">
   <el-step title="Step 1"></el-step>
   <el-step title="Step 2"></el-step>
   <el-step title="Step 3"></el-step>
@@ -58,7 +58,7 @@ Shows the status of the step for each step.
 :::demo Use `title` attribute to set the name of the step, or override the attribute by using a named `slot`. We have listed all the slot names for you at the end of this page.
 
 ```html
-<el-steps :space="100" :active="1" finish-status="success">
+<el-steps :space="200" :active="1" finish-status="success">
   <el-step title="Done"></el-step>
   <el-step title="Processing"></el-step>
   <el-step title="Step 3"></el-step>
@@ -66,13 +66,28 @@ Shows the status of the step for each step.
 ```
 :::
 
+### Center 
+
+Title and desription can be centered.
+
+:::demo
+```html
+<el-steps :active="2" align-center>
+  <el-step title="Step 1" description="Some description"></el-step>
+  <el-step title="Step 2" description="Some description"></el-step>
+  <el-step title="Step 3" description="Some description"></el-step>
+  <el-step title="Step 4" description="Some description"></el-step>
+</el-steps>
+```
+:::
+
 ### Step bar with description
 
 There is description for each step.
 
 :::demo
 ```html
-<el-steps :space="200" :active="1">
+<el-steps :active="1">
   <el-step title="Step 1" description="Some description"></el-step>
   <el-step title="Step 2" description="Some description"></el-step>
   <el-step title="Step 3" description="Some description"></el-step>
@@ -87,10 +102,10 @@ A variety of custom icons can be used in the step bar.
 :::demo The icon is set by the `icon` property. The types of icons can be found in the document for the Icon component. In addition, you can customize the icon through a named `slot`.
 
 ```html
-<el-steps :space="100" :active="1">
-  <el-step title="Step 1" icon="edit"></el-step>
-  <el-step title="Step 2" icon="upload"></el-step>
-  <el-step title="Step 3" icon="picture"></el-step>
+<el-steps :active="1">
+  <el-step title="Step 1" icon="el-icon-edit"></el-step>
+  <el-step title="Step 2" icon="el-icon-upload"></el-step>
+  <el-step title="Step 3" icon="el-icon-picture"></el-step>
 </el-steps>
 ```
 :::
@@ -102,10 +117,32 @@ Vertical step bars.
 :::demo You only need to set the `direction` attribute to` vertical` in the `el-steps` element.
 
 ```html
-<el-steps :space="100" direction="vertical" :active="1">
-  <el-step title="Step 1"></el-step>
-  <el-step title="Step 2"></el-step>
-  <el-step title="Step 3"></el-step>
+<div style="height: 300px;">
+  <el-steps direction="vertical" :active="1">
+    <el-step title="Step 1"></el-step>
+    <el-step title="Step 2"></el-step>
+    <el-step title="Step 3"></el-step>
+  </el-steps>
+</div>
+```
+:::
+
+### Simple step bar
+Simple step bars, where `align-center`, `description`, `direction` and `space` will be ignored.
+
+:::demo
+```html
+
+<el-steps :space="200" :active="1" simple>
+  <el-step title="Step 1" icon="el-icon-edit"></el-step>
+  <el-step title="Step 2" icon="el-icon-upload"></el-step>
+  <el-step title="Step 3" icon="el-icon-picture"></el-step>
+</el-steps>
+
+<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
+  <el-step title="Step 1" ></el-step>
+  <el-step title="Step 2" ></el-step>
+  <el-step title="Step 3" ></el-step>
 </el-steps>
 ```
 :::
@@ -114,21 +151,21 @@ Vertical step bars.
 
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
-| space | the spacing of each step, will be responsive if omitted. Support percentage. | Number,String | — | — |
+| space | the spacing of each step, will be responsive if omitted. Supports percentage. | number / string | — | — |
 | direction | display direction | string | vertical/horizontal | horizontal |
 | active | current activation step  | number | — | 0 |
-| process-status | status of current step | string | wait/process/finish/error/success | process |
-| finish-status | status of end step | string | wait/process/finish/error/success | finish |
-| align-center | whether step description is centered | boolean | — | false |
-| center | center whole `Steps` component | boolean | - | false |
+| process-status | status of current step | string | wait / process / finish / error / success | process |
+| finish-status | status of end step | string | wait / process / finish / error / success | finish |
+| align-center | center title and description | boolean | — | false |
+| simple | whether to apply simple theme | boolean | - | false |
 
 ### Step Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
 | title | step title | string | — | — |
 | description | step description | string | — | — |
-| icon | step icon | icons provided by Element Icon. Can be overwritten by a named slot if you want to use  custom icons | string | — |
-| status | current status. It will be automatically set by Steps if not configured. | wait/process/finish/error/success | - |
+| icon | step icon | step icon's class name. Icons can be passed via named slot as well | string | — |
+| status | current status. It will be automatically set by Steps if not configured. | wait / process / finish / error / success | - |
 
 ### Step Slot
 | Name | Description |
diff --git a/examples/docs/en-US/switch.md b/examples/docs/en-US/switch.md
index ff9e925ead..d079396407 100644
--- a/examples/docs/en-US/switch.md
+++ b/examples/docs/en-US/switch.md
@@ -12,8 +12,11 @@
       return {
         value1: true,
         value2: true,
-        value3: '100',
-        value4: true
+        value3: true,
+        value4: true,
+        value5: '100',
+        value6: true,
+        value7: false
       }
     }
   };
@@ -24,19 +27,15 @@
 Switch is used for switching between two opposing states.
 
 ### Basic usage
-
-:::demo Bind `v-model` to a `Boolean` typed variable. You can add `on-text` or `off-text` attribute to show texts when the component is `on` or `off`, respectively. The `on-color` and `off-color` attribute decides the background color in two states.
+:::demo Bind `v-model` to a `Boolean` typed variable. The `active-color` and `inactive-color` attribute decides the background color in two states.
 
 ```html
-<el-switch
-  v-model="value1"
-  on-text=""
-  off-text="">
+<el-switch v-model="value1">
 </el-switch>
 <el-switch
   v-model="value2"
-  on-color="#13ce66"
-  off-color="#ff4949">
+  active-color="#13ce66"
+  inactive-color="#ff4949">
 </el-switch>
 
 <script>
@@ -52,18 +51,49 @@ Switch is used for switching between two opposing states.
 ```
 :::
 
+### Text description
+:::demo You can add `active-text` and `inactive-text` attribute to show texts.
+
+```html
+<el-switch
+  v-model="value3"
+  active-text="Pay by month"
+  inactive-text="Pay by year">
+</el-switch>
+<el-switch
+  style="display: block"
+  v-model="value4"
+  active-color="#13ce66"
+  inactive-color="#ff4949"
+  active-text="Pay by month"
+  inactive-text="Pay by year">
+</el-switch>
+
+<script>
+  export default {
+    data() {
+      return {
+        value3: true,
+        value4: true
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### Extended value types
 
-:::demo You can set `on-value` and `off-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value.
+:::demo You can set `active-value` and `inactive-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value.
 
 ```html
-<el-tooltip :content="'Switch value: ' + value3" placement="top">
+<el-tooltip :content="'Switch value: ' + value5" placement="top">
   <el-switch
-    v-model="value3"
-    on-color="#13ce66"
-    off-color="#ff4949"
-    on-value="100"
-    off-value="0">
+    v-model="value5"
+    active-color="#13ce66"
+    inactive-color="#ff4949"
+    active-value="100"
+    inactive-value="0">
   </el-switch>
 </el-tooltip>
 
@@ -71,7 +101,7 @@ Switch is used for switching between two opposing states.
   export default {
     data() {
       return {
-        value3: '100'
+        value5: '100'
       }
     }
   };
@@ -86,13 +116,11 @@ Switch is used for switching between two opposing states.
 
 ```html
 <el-switch
-  v-model="value4"
-  on-text=""
-  off-text=""
+  v-model="value6"
   disabled>
 </el-switch>
 <el-switch
-  v-model="value4"
+  v-model="value7"
   disabled>
 </el-switch>
 
@@ -100,7 +128,8 @@ Switch is used for switching between two opposing states.
   export default {
     data() {
       return {
-        value4: true
+        value6: true,
+        value7: false
       }
     }
   };
@@ -113,15 +142,15 @@ Switch is used for switching between two opposing states.
  Attribute      | Description          | Type      | Accepted Values       | Default
 ----| ----| ----| ----|----
 disabled | whether Switch is disabled | boolean | — | false
-width | width of Switch | number | — | 58 (with text) / 46 (no text)
-on-close-icon | class name of the icon displayed when in `on` state, overrides `on-text` | string | — | —
-off-close-icon |class name of the icon displayed when in `off` state, overrides `off-text`| string | — | —
-on-text | text displayed when in `on` state | string | — | ON
-off-text | text displayed when in `off` state | string | — | OFF
-on-value  | switch value when in `on` state | boolean / string / number | — | true
-off-value  | switch value when in `off` state | boolean / string / number | — | false
-on-color | background color when in `on` state | string | — | #20A0FF
-off-color | background color when in `off` state | string | — | #C0CCDA
+width | width of Switch | number | — | 40
+active-icon-class | class name of the icon displayed when in `on` state, overrides `active-text` | string | — | —
+inactive-icon-class |class name of the icon displayed when in `off` state, overrides `inactive-text`| string | — | —
+active-text | text displayed when in `on` state | string | — | —
+inactive-text | text displayed when in `off` state | string | — | —
+active-value  | switch value when in `on` state | boolean / string / number | — | true
+inactive-value  | switch value when in `off` state | boolean / string / number | — | false
+active-color | background color when in `on` state | string | — | #409EFF
+inactive-color | background color when in `off` state | string | — | #C0CCDA
 name| input name of Switch | string | — | —
 
 ### Events
@@ -129,3 +158,8 @@ name| input name of Switch | string | — | —
  Event Name | Description | Parameters
 ---- | ----| ----
 change | triggers when value changes | value after changing
+
+### Methods
+Method | Description | Parameters
+------|--------|-------
+focus | focus the Switch component | —
diff --git a/examples/docs/en-US/table.md b/examples/docs/en-US/table.md
index e26a3f5545..9e6f33e319 100644
--- a/examples/docs/en-US/table.md
+++ b/examples/docs/en-US/table.md
@@ -185,8 +185,26 @@
           amount2: '4.1',
           amount3: 15
         }],
+        tableData7: [{
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+        }, {
+          date: '2016-05-04',
+          name: 'John',
+          address: 'No. 189, Grove St, Los Angeles',
+        }, {
+          date: '2016-05-01',
+          name: 'Morgan',
+          address: 'No. 189, Grove St, Los Angeles',
+        }, {
+          date: '2016-05-03',
+          name: 'Jessy',
+          address: 'No. 189, Grove St, Los Angeles',
+        }],
         currentRow: null,
-        multipleSelection: []
+        multipleSelection: [],
+        search: '',
       };
     },
 
@@ -216,9 +234,11 @@
 
         return sums;
       },
+
       setCurrent(row) {
         this.$refs.singleTable.setCurrentRow(row);
       },
+
       toggleSelection(rows) {
         if (rows) {
           rows.forEach(row => {
@@ -240,6 +260,7 @@
       handleDelete(index, row) {
         console.log(index, row);
       },
+
       handleSelectionChange(val) {
         this.multipleSelection = val;
       },
@@ -256,17 +277,52 @@
         return row.tag === value;
       },
 
-      tableRowClassName(row, index) {
-        if (index === 1) {
-          return 'info-row';
-        } else if (index === 3) {
-          return 'positive-row';
+      filterHandler(value, row, column) {
+        const property = column['property'];
+        return row[property] === value;
+      },
+
+      tableRowClassName({row, rowIndex}) {
+        if (rowIndex === 1) {
+          return 'warning-row';
+        } else if (rowIndex === 3) {
+          return 'success-row';
         }
         return '';
       },
 
       deleteRow(index, rows) {
         rows.splice(index, 1);
+      },
+
+      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
+        if (rowIndex % 2 === 0) {
+          if (columnIndex === 0) {
+            return [1, 2];
+          } else if (columnIndex === 1) {
+            return [0, 0];
+          }
+        }
+      },
+
+      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+        if (columnIndex === 0) {
+          if (rowIndex % 2 === 0) {
+            return {
+              rowspan: 2,
+              colspan: 1
+            };
+          } else {
+            return {
+              rowspan: 0,
+              colspan: 0
+            };
+          }
+        }
+      },
+
+      indexMethod(index) {
+        return index * 2;
       }
     },
 
@@ -279,12 +335,12 @@
 </script>
 
 <style>
-  .el-table .info-row {
-    background: #c9e5f5;
+  .el-table .warning-row {
+    background: oldlace;
   }
 
-  .el-table .positive-row {
-    background: #e2f0e4;
+  .el-table .success-row {
+    background: #f0f9eb;
   }
 
   .demo-table .name-wrapper {
@@ -504,23 +560,23 @@ You can highlight your table content to distinguish between "success, informatio
 </template>
 
 <style>
-  .el-table .info-row {
-    background: #c9e5f5;
+  .el-table .warning-row {
+    background: oldlace;
   }
 
-  .el-table .positive-row {
-    background: #e2f0e4;
+  .el-table .success-row {
+    background: #f0f9eb;
   }
 </style>
 
 <script>
   export default {
     methods: {
-      tableRowClassName(row, index) {
-        if (index === 1) {
-          return 'info-row';
-        } else if (index === 3) {
-          return 'positive-row';
+      tableRowClassName({row, rowIndex}) {
+        if (rowIndex === 1) {
+          return 'warning-row';
+        } else if (rowIndex === 3) {
+          return 'success-row';
         }
         return '';
       }
@@ -561,7 +617,6 @@ When there are too many rows, you can use a fixed header.
   <el-table
     :data="tableData3"
     height="250"
-    border
     style="width: 100%">
     <el-table-column
       prop="date"
@@ -629,7 +684,6 @@ When there are too many columns, you can fix some of them.
 <template>
   <el-table
     :data="tableData"
-    border
     style="width: 100%">
     <el-table-column
       fixed
@@ -666,7 +720,7 @@ When there are too many columns, you can fix some of them.
       fixed="right"
       label="Operations"
       width="120">
-      <template scope="scope">
+      <template slot-scope="scope">
         <el-button @click="handleClick" type="text" size="small">Detail</el-button>
         <el-button type="text" size="small">Edit</el-button>
       </template>
@@ -732,7 +786,6 @@ When you have huge chunks of data to put in a table, you can fix the header and
 <template>
   <el-table
     :data="tableData3"
-    border
     style="width: 100%"
     height="250">
     <el-table-column
@@ -839,7 +892,6 @@ When the the data is dynamically changed, you might want the table to have a max
 <template>
   <el-table
     :data="tableData4"
-    border
     style="width: 100%"
     max-height="250">
     <el-table-column
@@ -877,7 +929,7 @@ When the the data is dynamically changed, you might want the table to have a max
       fixed="right"
       label="Operations"
       width="120">
-      <template scope="scope">
+      <template slot-scope="scope">
         <el-button
           @click.native.prevent="deleteRow(scope.$index, tableData4)"
           type="text"
@@ -964,7 +1016,6 @@ When the data structure is complex, you can use group header to show the data hi
 <template>
   <el-table
     :data="tableData3"
-    border
     style="width: 100%">
     <el-table-column
       prop="date"
@@ -1150,7 +1201,6 @@ You can also select multiple rows.
   <el-table
     ref="multipleTable"
     :data="tableData3"
-    border
     style="width: 100%"
     @selection-change="handleSelectionChange">
     <el-table-column
@@ -1160,7 +1210,7 @@ You can also select multiple rows.
     <el-table-column
       label="Date"
       width="120">
-      <template scope="scope">{{ scope.row.date }}</template>
+      <template slot-scope="scope">{{ scope.row.date }}</template>
     </el-table-column>
     <el-table-column
       property="name"
@@ -1239,12 +1289,11 @@ You can also select multiple rows.
 
 Sort the data to find or compare data quickly.
 
-:::demo Set attribute `sortable` in a certain column to sort the data based on this column. It accepts `Boolean` with a default value `false`. Set table attribute `default-sort` to determine default sort column and order. To apply your own sorting rules, use `sort-method`. If you need remote sorting from backend, set `sortable` to `custom`, and listen to the `sort-change` event on Table. In the event handler, you have access to the sorting column and sorting order so that you can fetch sorted table data from API. In this example we use another attribute named `formatter` to format the value of certain columns. It accepts a function which has two parameters: `row` and `column`. You can handle it according to your own needs.
+:::demo Set attribute `sortable` in a certain column to sort the data based on this column. It accepts `Boolean` with a default value `false`. Set table attribute `default-sort` to determine default sort column and order. To apply your own sorting rules, use `sort-method` or `sort-by`. If you need remote sorting from backend, set `sortable` to `custom`, and listen to the `sort-change` event on Table. In the event handler, you have access to the sorting column and sorting order so that you can fetch sorted table data from API. In this example we use another attribute named `formatter` to format the value of certain columns. It accepts a function which has two parameters: `row` and `column`. You can handle it according to your own needs.
 ```html
 <template>
   <el-table
     :data="tableData"
-    border
     :default-sort = "{prop: 'date', order: 'descending'}"
     style="width: 100%">
     <el-table-column
@@ -1303,18 +1352,20 @@ Sort the data to find or compare data quickly.
 
 Filter the table to find desired data.
 
-:::demo Set attribute `filters` and `filter-method` in `el-table-column` makes this column filterable. `filters` is an array, and `filter-method` is a function deciding which rows are displayed. It has two parameters: `value` and `row`.
+:::demo Set attribute `filters` and `filter-method` in `el-table-column` makes this column filterable. `filters` is an array, and `filter-method` is a function deciding which rows are displayed. It has three parameters: `value`, `row` and `column`.
 ```html
 <template>
   <el-table
     :data="tableData"
-    border
     style="width: 100%">
     <el-table-column
       prop="date"
       label="Date"
       sortable
-      width="180">
+      width="180"
+      :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
+      :filter-method="filterHandler"
+    >
     </el-table-column>
     <el-table-column
       prop="name"
@@ -1333,10 +1384,10 @@ Filter the table to find desired data.
       :filters="[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]"
       :filter-method="filterTag"
       filter-placement="bottom-end">
-      <template scope="scope">
+      <template slot-scope="scope">
         <el-tag
           :type="scope.row.tag === 'Home' ? 'primary' : 'success'"
-          close-transition>{{scope.row.tag}}</el-tag>
+          disable-transitions>{{scope.row.tag}}</el-tag>
       </template>
     </el-table-column>
   </el-table>
@@ -1375,6 +1426,10 @@ Filter the table to find desired data.
       },
       filterTag(value, row) {
         return row.tag === value;
+      },
+      filterHandler(value, row, column) {
+        const property = column['property'];
+        return row[property] === value;
       }
     }
   }
@@ -1385,42 +1440,41 @@ Filter the table to find desired data.
 ### Custom column template
 
 Customize table column so it can be integrated with other components.
-:::demo You have access to the following data: row, column, $index and store (state management of Table) by [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots). (Scoped slots is supported from `1.1`, `inline-template` still works, but it's not recommended).
+:::demo You have access to the following data: row, column, $index and store (state management of Table) by [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots).
 ```html
 <template>
   <el-table
     :data="tableData"
-    border
     style="width: 100%">
     <el-table-column
       label="Date"
       width="180">
-      <template scope="scope">
-        <el-icon name="time"></el-icon>
+      <template slot-scope="scope">
+        <i class="el-icon-time"></i>
         <span style="margin-left: 10px">{{ scope.row.date }}</span>
       </template>
     </el-table-column>
     <el-table-column
       label="Name"
       width="180">
-      <template scope="scope">
+      <template slot-scope="scope">
         <el-popover trigger="hover" placement="top">
           <p>Name: {{ scope.row.name }}</p>
           <p>Addr: {{ scope.row.address }}</p>
           <div slot="reference" class="name-wrapper">
-            <el-tag>{{ scope.row.name }}</el-tag>
+            <el-tag size="medium">{{ scope.row.name }}</el-tag>
           </div>
         </el-popover>
       </template>
     </el-table-column>
     <el-table-column
       label="Operations">
-      <template scope="scope">
+      <template slot-scope="scope">
         <el-button
-          size="small"
+          size="mini"
           @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
         <el-button
-          size="small"
+          size="mini"
           type="danger"
           @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
       </template>
@@ -1464,6 +1518,77 @@ Customize table column so it can be integrated with other components.
 ```
 :::
 
+### Table with custom header
+
+Customize table header so it can be even more customized.
+:::demo You can customize how the header looks by [Default slot content](https://vuejs.org/v2/guide/components-slots.html#Default-Slot-Content).
+```html
+<template>
+  <el-table
+    :data="tableData7.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
+    style="width: 100%">
+    <el-table-column
+      label="Date"
+      prop="date">
+    </el-table-column>
+    <el-table-column
+      label="Name"
+      prop="name">
+    </el-table-column>
+    <el-table-column
+      align="right">
+      <template slot="header" slot-scope="slot">
+        <el-input
+          v-model="search"
+          size="mini"
+          placeholder="Type to search"/>
+      </template>
+      <template slot-scope="scope">
+        <el-button
+          size="mini"
+          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
+        <el-button
+          size="mini"
+          type="danger"
+          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-02',
+          name: 'John',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-04',
+          name: 'Morgan',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-01',
+          name: 'Jessy',
+          address: 'No. 189, Grove St, Los Angeles'
+        }],
+        search: '',
+      }
+    },
+    methods: {
+      handleEdit(){},
+      handleDelete(){}
+    },
+  }
+</script>
+```
+:::
+
 ### Expandable row
 
 When the row content is too long and you do not want to display the horizontal scroll bar, you can use the expandable row feature.
@@ -1474,7 +1599,7 @@ When the row content is too long and you do not want to display the horizontal s
     :data="tableData3"
     style="width: 100%">
     <el-table-column type="expand">
-      <template scope="props">
+      <template slot-scope="props">
         <p>State: {{ props.row.state }}</p>
         <p>City: {{ props.row.city }}</p>
         <p>Address: {{ props.row.address }}</p>
@@ -1690,20 +1815,245 @@ For table of numbers, you can add an extra row at the table footer displaying ea
 ```
 :::
 
+### Rowspan and colspan
+
+Configuring rowspan and colspan allows you to merge cells
+:::demo Use the `span-method` attribute to configure rowspan and colspan. It accepts a method, and passes an object to that method including current row `row`, current column `column`, current row index `rowIndex` and current column index `columnIndex`. The method should return an array of two numbers, the first number being `rowspan` and second `colspan`. It can also return an object with `rowspan` and `colspan` props.
+
+```html
+<template>
+  <div>
+    <el-table
+      :data="tableData6"
+      :span-method="arraySpanMethod"
+      border
+      style="width: 100%">
+      <el-table-column
+        prop="id"
+        label="ID"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="Name">
+      </el-table-column>
+      <el-table-column
+        prop="amount1"
+        sortable
+        label="Amount 1">
+      </el-table-column>
+      <el-table-column
+        prop="amount2"
+        sortable
+        label="Amount 2">
+      </el-table-column>
+      <el-table-column
+        prop="amount3"
+        sortable
+        label="Amount 3">
+      </el-table-column>
+    </el-table>
+
+    <el-table
+      :data="tableData6"
+      :span-method="objectSpanMethod"
+      border
+      style="width: 100%; margin-top: 20px">
+      <el-table-column
+        prop="id"
+        label="ID"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="Name">
+      </el-table-column>
+      <el-table-column
+        prop="amount1"
+        label="Amount 1">
+      </el-table-column>
+      <el-table-column
+        prop="amount2"
+        label="Amount 2">
+      </el-table-column>
+      <el-table-column
+        prop="amount3"
+        label="Amount 3">
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData6: [{
+          id: '12987122',
+          name: 'Tom',
+          amount1: '234',
+          amount2: '3.2',
+          amount3: 10
+        }, {
+          id: '12987123',
+          name: 'Tom',
+          amount1: '165',
+          amount2: '4.43',
+          amount3: 12
+        }, {
+          id: '12987124',
+          name: 'Tom',
+          amount1: '324',
+          amount2: '1.9',
+          amount3: 9
+        }, {
+          id: '12987125',
+          name: 'Tom',
+          amount1: '621',
+          amount2: '2.2',
+          amount3: 17
+        }, {
+          id: '12987126',
+          name: 'Tom',
+          amount1: '539',
+          amount2: '4.1',
+          amount3: 15
+        }]
+      };
+    },
+    methods: {
+      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
+        if (rowIndex % 2 === 0) {
+          if (columnIndex === 0) {
+            return [1, 2];
+          } else if (columnIndex === 1) {
+            return [0, 0];
+          }
+        }
+      },
+
+      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+        if (columnIndex === 0) {
+          if (rowIndex % 2 === 0) {
+            return {
+              rowspan: 2,
+              colspan: 1
+            };
+          } else {
+            return {
+              rowspan: 0,
+              colspan: 0
+            };
+          }
+        }
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Custom index
+
+You can customize row index in `type=index` columns.
+:::demo To customize row indices, use `index` attribute on <el-table-column> with `type=index`. If it is assigned to a number, all indices will have an offset of that number. It also accepts a method with each index (starting from `0`) as parameter, and the returned value will be displayed as index.
+
+```html
+<template>
+  <el-table
+    :data="tableData"
+    style="width: 100%">
+    <el-table-column
+      type="index"
+      :index="indexMethod">
+    </el-table-column>
+    <el-table-column
+      prop="date"
+      label="Date"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Name"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Address">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Home'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Office'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Home'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Office'
+        }],
+      }
+    },
+    methods: {
+      indexMethod(index) {
+        return index * 2;
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### Table Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
-|---------- |-------------- |---------- |--------------------------------  |-------- |
-| data | table data | array | — | — |
-| height | Table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the height is affected by external styles | string/number | — | — |
+|----------------|----------------------|-----------|-----------------------|----------|
+| data | Table data | array | — | — |
+| height | Table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, the height is affected by external styles | string/number | — | — |
 | max-height | Table's max-height. The height of the table starts from `auto` until it reaches the maxHeight limit. The `maxHeight` is measured in pixels, same as `height` | string/number | — | — |
-| stripe | whether table is striped | boolean | — | false |
-| border | whether table has vertical border | boolean | — | false |
+| stripe | whether Table is striped | boolean | — | false |
+| border | whether Table has vertical border | boolean | — | false |
+| size | size of Table | string | medium / small / mini | — |
 | fit | whether width of column automatically fits its container | boolean | — | true |
-| show-header | whether table header is visible | boolean | — | true |
+| show-header | whether Table header is visible | boolean | — | true |
 | highlight-current-row | whether current row is highlighted | boolean | — | false |
 | current-row-key | key of current row, a set only prop | string,number | — | — |
-| row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | Function(row, index)/String | — | — |
-| row-style | function that returns custom style for a row,  or a string assigning custom style for every row | Function(row, index)/Object | — | — |
+| row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | Function({row, rowIndex})/String | — | — |
+| row-style | function that returns custom style for a row, or an object assigning custom style for every row | Function({row, rowIndex})/Object | — | — |
+| cell-class-name | function that returns custom class names for a cell, or a string assigning class names for every cell | Function({row, column, rowIndex, columnIndex})/String | — | — |
+| cell-style | function that returns custom style for a cell, or an object assigning custom style for every cell | Function({row, column, rowIndex, columnIndex})/Object | — | — |
+| header-row-class-name | function that returns custom class names for a row in table header, or a string assigning class names for every row in table header | Function({row, rowIndex})/String | — | — |
+| header-row-style | function that returns custom style for a row in table header, or an object assigning custom style for every row in table header | Function({row, rowIndex})/Object | — | — |
+| header-cell-class-name | function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header | Function({row, column, rowIndex, columnIndex})/String | — | — |
+| header-cell-style | function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header | Function({row, column, rowIndex, columnIndex})/Object | — | — |
 | row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on. When its type is String, multi-level access is supported, e.g. `user.info.id`, but `user.info[0].id` is not supported, in which case `Function` should be used. | Function(row)/String | — | — |
 | empty-text | Displayed text when data is empty. You can customize this area with `slot="empty"` | String | — | No Data |
 | default-expand-all | whether expand all rows by default, only works when the table has a column type="expand" | Boolean | — | false |
@@ -1713,6 +2063,8 @@ For table of numbers, you can add an extra row at the table footer displaying ea
 | show-summary | whether to display a summary row | Boolean | — | false |
 | sum-text | displayed text for the first column of summary row | String | — | Sum |
 | summary-method | custom summary method | Function({ columns, data }) | — | — |
+| span-method | method that returns rowspan and colspan | Function({ row, column, rowIndex, columnIndex }) | — | — |
+| select-on-indeterminate | controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected. | Boolean | — | true |
 
 ### Table Events
 | Event Name | Description | Parameters |
@@ -1728,28 +2080,36 @@ For table of numbers, you can add an extra row at the table footer displaying ea
 | row-contextmenu | triggers when user right clicks on a row | row, event |
 | row-dblclick | triggers when double clicking a row | row, event |
 | header-click | triggers when clicking a column header | column, event |
+| header-contextmenu | triggers when user right clicks on a column header | column, event |
 | sort-change | triggers when Table's sorting changes | { column, prop, order } |
 | filter-change | column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered | filters |
 | current-change | triggers when current row changes | currentRow, oldCurrentRow |
-| header-dragend | triggers when finish dragging header | newWidth, oldWidth, column, event |
-| expand | triggers when user expands or collapses a row | row, expanded |
+| header-dragend | triggers after changing a column's width by dragging the column header's border | newWidth, oldWidth, column, event |
+| expand-change | triggers when user expands or collapses a row | row, expandedRows |
 
 ### Table Methods
 | Method | Description | Parameters |
 |------|--------|-------|
-| clearSelection | used in multiple selection Table, clear selection, might be useful when `reserve-selection` is on | selection |
+| clearSelection | used in multiple selection Table, clear user selection | — |
 | toggleRowSelection | used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected | row, selected |
+| toggleAllSelection | used in multiple selection Table, toggle the selected state of all rows | - |
+| toggleRowExpansion | used in expandable Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed | row, expanded |
 | setCurrentRow | used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection. | row |
+| clearSort | clear sorting, restore data to the original order | — |
+| clearFilter | clear filter | — |
+| doLayout | refresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout | — |
+| sort | sort Table manually. Property `prop` is used to set sort column, property `order` is used to set sort order | prop: string, order: string |
 
 ### Table Slot
 | Name | Description |
 |------|--------|
-| append | Contents to be inserted after the last row. It is still nested inside the `<tbody>` tag. You may need this slot if you want to implement infinite scroll for the table. This slot will be displayed above the summary row if there is one. |
+| append | Contents to be inserted after the last row. You may need this slot if you want to implement infinite scroll for the table. This slot will be displayed above the summary row if there is one. |
 
 ### Table-column Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon.  | string | selection/index/expand | — |
+| index | customize indices for each row, works on columns with `type=index` | string, Function(index) | - | - |
 | label | column label | string | — | — |
 | column-key | column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered | string | string | — | — |
 | prop |  field name. You can also use its alias: `property` | string | — | — |
@@ -1758,18 +2118,26 @@ For table of numbers, you can add an extra row at the table footer displaying ea
 | fixed | whether column is fixed at left/right. Will be fixed at left if `true` | string/boolean | true/left/right | — |
 | render-header | render function for table header of this column | Function(h, { column, $index }) | — | — |
 | sortable | whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the `sort-change` event of Table | boolean, string | true, false, custom | false |
-| sort-method | sorting method, works when `sortable` is `true`. Should return a boolean. | Function(a, b) | — | — |
+| sort-method | sorting method, works when `sortable` is `true`. Should return a number, just like Array.sort | Function(a, b) | — | — |
+| sort-by | specify which property to sort by, works when `sortable` is `true` and `sort-method` is `undefined`. If set to an Array, the column will sequentially sort by the next property if the previous one is equal | Function(row, index)/String/Array | — | — |
+| sort-orders | the order of the sorting strategies used when sorting the data, works when `sortable` is `true`. Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array | array | the elements in the array need to be one of the following: `ascending`, `descending` and `null` (restores to the original order) | ['ascending', 'descending', null] |
 | resizable | whether column width can be resized, works when `border` of `el-table` is `true` | boolean | — | false |
-| formatter | function that formats cell content | Function(row, column, cellValue) | — | — |
+| formatter | function that formats cell content | Function(row, column, cellValue, index) | — | — |
 | show-overflow-tooltip | whether to hide extra content and show them in a tooltip when hovering on the cell | boolean | — | false |
 | align | alignment | string | left/center/right | left |
 | header-align | alignment of the table header. If omitted, the value of the above `align` attribute will be applied | String | left/center/right | — |
 | class-name | class name of cells in the column | string | — | — |
 | label-class-name | class name of the label of this column | string | — | — |
 | selectable | function that determines if a certain row can be selected, works when `type` is 'selection' | Function(row, index) | — | — |
-| reserve-selection | whether to reserve selection after data refreshing, works when `type` is 'selection' | boolean | — | false |
+| reserve-selection | whether to reserve selection after data refreshing, works when `type` is 'selection'. Note that `row-key` is required for this to work | boolean | — | false |
 | filters | an array of data filtering options. For each element in this array, `text` and `value` are required | Array[{ text, value }] | — | — |
 | filter-placement | placement for the filter dropdown | String | same as Tooltip's `placement` | — |
 | filter-multiple | whether data filtering supports multiple options | Boolean | — | true |
-| filter-method | data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true` | Function(value, row) | — | — |
+| filter-method | data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true` | Function(value, row, column) | — | — |
 | filtered-value | filter value for selected data, might be useful when table header is rendered with `render-header` | Array | — | — |
+
+### Table-column Scoped Slot
+| Name | Description |
+|------|--------|
+| — | Custom content for table columns. The scope parameter is { row, column, $index } |
+| header | Custom content for table header. The scope parameter is { column, $index } |
diff --git a/examples/docs/en-US/tabs.md b/examples/docs/en-US/tabs.md
index e80c0e05e6..586cd01700 100644
--- a/examples/docs/en-US/tabs.md
+++ b/examples/docs/en-US/tabs.md
@@ -24,7 +24,8 @@
           name: '2',
           content: 'Tab 2 content'
         }],
-        tabIndex: 2
+        tabIndex: 2,
+        tabPosition: 'top'
       }
     },
     methods: {
@@ -174,6 +175,40 @@ Border card tabs.
 
 :::
 
+### Tab position
+
+You can use `tab-position` attribute to set the tab's position.
+
+:::demo You can choose from four directions: `tabPosition="left|right|top|bottom"`
+
+```html
+<template>
+  <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
+    <el-radio-button label="top">top</el-radio-button>
+    <el-radio-button label="right">right</el-radio-button>
+    <el-radio-button label="bottom">bottom</el-radio-button>
+    <el-radio-button label="left">left</el-radio-button>
+  </el-radio-group>
+
+  <el-tabs :tab-position="tabPosition" style="height: 200px;">
+    <el-tab-pane label="User">User</el-tab-pane>
+    <el-tab-pane label="Config">Config</el-tab-pane>
+    <el-tab-pane label="Role">Role</el-tab-pane>
+    <el-tab-pane label="Task">Task</el-tab-pane>
+  </el-tabs>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        tabPosition: 'top'
+      };
+    }
+  };
+</script>
+```
+:::
+
 ### Custom Tab
 
 You can use named slot to customize the tab label content.
@@ -339,8 +374,10 @@ Only card type Tabs support addable & closeable.
 | closable  | whether Tab is closable | boolean   | — |  false  |
 | addable  | whether Tab is addable   | boolean   | — |  false  |
 | editable  | whether Tab is addable and closable | boolean   | — |  false  |
-| active-name(deprecated)  | name of the selected tab  | string   |  —  |  name of first tab |
 | value  | name of the selected tab  | string   |  —  |  name of first tab |
+| tab-position  | position of tabs | string   |  top/right/bottom/left  |  top |
+| stretch  | whether width of tab automatically fits its container | boolean   |  -  |  false |
+| before-leave | hook function before switching tab. If `false` is returned or a `Promise` is returned and then is rejected, switching will be prevented | Function(activeName, oldActiveName) | — | — |
 
 ### Tabs Events
 | Event Name | Description | Parameters |
@@ -357,3 +394,4 @@ Only card type Tabs support addable & closeable.
 | disabled | whether Tab is disabled | boolean | — | false |
 | name      | identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane | string | — | ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '1' |
 | closable  | whether Tab is closable | boolean   | — |  false  |
+| lazy  | whether Tab is lazily rendered   | boolean   | — |  false  |
\ No newline at end of file
diff --git a/examples/docs/en-US/tag.md b/examples/docs/en-US/tag.md
index b91e017dcd..13c618c7a3 100644
--- a/examples/docs/en-US/tag.md
+++ b/examples/docs/en-US/tag.md
@@ -4,11 +4,10 @@
       return {
         tags: [
           { name: 'Tag 1', type: '' },
-          { name: 'Tag 2', type: 'gray' },
-          { name: 'Tag 3', type: 'primary' },
-          { name: 'Tag 4', type: 'success' },
-          { name: 'Tag 5', type: 'warning' },
-          { name: 'Tag 6', type: 'danger' }
+          { name: 'Tag 2', type: 'success' },
+          { name: 'Tag 3', type: 'info' },
+          { name: 'Tag 4', type: 'warning' },
+          { name: 'Tag 5', type: 'danger' }
         ],
         dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
         inputVisible: false,
@@ -46,18 +45,14 @@
     }
     .button-new-tag {
       margin-left: 10px;
-      height: 24px;
-      line-height: 22px;
+      height: 32px;
+      line-height: 30px;
       padding: 0 *;
     }
     .input-new-tag {
-      width: 78px;
+      width: 90px;
       margin-left: 10px;
       vertical-align: bottom;
-
-      .el-input__inner {
-        height: 24px;
-      }
     }
   }
 </style>
@@ -68,30 +63,28 @@ Used for marking and selection.
 
 ### Basic usage
 
-::: demo Use the `type` attribute to define Tag's type. In addition, the `color` attribute can be used to set the background color of the Tag.
+:::demo Use the `type` attribute to define Tag's type. In addition, the `color` attribute can be used to set the background color of the Tag.
 
 ```html
 <el-tag>Tag One</el-tag>
-<el-tag type="gray">Tag Two</el-tag>
-<el-tag type="primary">Tag Three</el-tag>
-<el-tag type="success">Tag Four</el-tag>
-<el-tag type="warning">Tag Five</el-tag>
-<el-tag type="danger">Tag Six</el-tag>
+<el-tag type="success">Tag Two</el-tag>
+<el-tag type="info">Tag Three</el-tag>
+<el-tag type="warning">Tag Four</el-tag>
+<el-tag type="danger">Tag Five</el-tag>
 ```
 :::
 
 ### Removable Tag
 
-:::demo `closable` attribute can be used to define a removable tag. It accepts a `Boolean`. By default the removal of Tag has a fading animation. If you don't want to use it, you can set the `close-transition` attribute, which accepts a `Boolean`, to `true`. `close` event triggers when Tag is removed.
+:::demo `closable` attribute can be used to define a removable tag. It accepts a `Boolean`. By default the removal of Tag has a fading animation. If you don't want to use it, you can set the `disable-transitions` attribute, which accepts a `Boolean`, to `true`. `close` event triggers when Tag is removed.
 
 ```html
 <el-tag
   v-for="tag in tags"
   :key="tag.name"
-  :closable="true"
-  :type="tag.type"
->
-{{tag.name}}
+  closable
+  :type="tag.type">
+  {{tag.name}}
 </el-tag>
 
 <script>
@@ -100,11 +93,10 @@ Used for marking and selection.
       return {
         tags: [
           { name: 'Tag 1', type: '' },
-          { name: 'Tag 2', type: 'gray' },
-          { name: 'Tag 3', type: 'primary' },
-          { name: 'Tag 4', type: 'success' },
-          { name: 'Tag 5', type: 'warning' },
-          { name: 'Tag 6', type: 'danger' }
+          { name: 'Tag 2', type: 'success' },
+          { name: 'Tag 3', type: 'info' },
+          { name: 'Tag 4', type: 'warning' },
+          { name: 'Tag 5', type: 'danger' }
         ]
       };
     }
@@ -122,11 +114,10 @@ You can use the `close` event to add and remove tag dynamically.
 <el-tag
   :key="tag"
   v-for="tag in dynamicTags"
-  :closable="true"
-  :close-transition="false"
-  @close="handleClose(tag)"
->
-{{tag}}
+  closable
+  :disable-transitions="false"
+  @close="handleClose(tag)">
+  {{tag}}
 </el-tag>
 <el-input
   class="input-new-tag"
@@ -139,6 +130,25 @@ You can use the `close` event to add and remove tag dynamically.
 >
 </el-input>
 <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
+
+<style>
+  .el-tag + .el-tag {
+    margin-left: 10px;
+  }
+  .button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
+</style>
+
 <script>
   export default {
     data() {
@@ -174,17 +184,32 @@ You can use the `close` event to add and remove tag dynamically.
 ```
 :::
 
+### Sizes
+
+Besides default size, Tag component provides three additional sizes for you to choose among different scenarios.
+
+:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
+
+```html
+<el-tag>Default</el-tag>
+<el-tag size="medium">Medium</el-tag>
+<el-tag size="small">Small</el-tag>
+<el-tag size="mini">Mini</el-tag>
+```
+:::
+
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| type | theme | string | primary/gray/success/warning/danger | — |
-| closable | whether Tab can be removed | boolean | — | false |
-| close-transition | whether to disable animations | boolean | — | false |
+| type | theme | string | success/info/warning/danger | — |
+| closable | whether Tag can be removed | boolean | — | false |
+| disable-transitions | whether to disable animations | boolean | — | false |
 | hit | whether Tag has a highlighted border | boolean | — | false |
-| color | background color of the tag | string | — | — |
+| color | background color of the Tag | string | — | — |
+| size | tag size | string | medium / small / mini | — |
 
 
 ### Events
 | Event Name | Description | Parameters |
 |---------- |-------- |---------- |
-| close | triggers when Tab is removed | — |
\ No newline at end of file
+| close | triggers when Tag is removed | — |
\ No newline at end of file
diff --git a/examples/docs/en-US/time-picker.md b/examples/docs/en-US/time-picker.md
index 6873514bc3..ff907f2277 100644
--- a/examples/docs/en-US/time-picker.md
+++ b/examples/docs/en-US/time-picker.md
@@ -42,7 +42,7 @@ Provide a list of fixed time for users to choose.
 
 Can pick an arbitrary time.
 
-:::demo Use `el-time-picker` label, and you can limit the time range by using `selectableRange`.
+:::demo Use `el-time-picker` label, and you can limit the time range by specifying `selectableRange`. By default, you can scroll the mouse wheel to pick time, alternatively you can use the control arrows when the `arrow-control` attribute is set.
 
 ```html
 <template>
@@ -53,13 +53,22 @@ Can pick an arbitrary time.
     }"
     placeholder="Arbitrary time">
   </el-time-picker>
+  <el-time-picker
+    arrow-control
+    v-model="value3"
+    :picker-options="{
+      selectableRange: '18:30:00 - 20:30:00'
+    }"
+    placeholder="Arbitrary time">
+  </el-time-picker>
 </template>
 
 <script>
   export default {
     data() {
       return {
-        value2: new Date(2016, 9, 10, 18, 40)
+        value2: new Date(2016, 9, 10, 18, 40),
+        value3: new Date(2016, 9, 10, 18, 40)
       };
     }
   }
@@ -112,13 +121,23 @@ If start time is picked at first, then the end time will change accordingly.
 
 Can pick an arbitrary time range.
 
-:::demo We can pick a time range by adding an `is-range` attribute.
+:::demo We can pick a time range by adding an `is-range` attribute. Also, `arrow-control` is supported in range mode.
 ```html
 <template>
   <el-time-picker
     is-range
-    v-model="value3"
-    placeholder="Pick a time range">
+    v-model="value4"
+    range-separator="To"
+    start-placeholder="Start time"
+    end-placeholder="End time">
+  </el-time-picker>
+  <el-time-picker
+    is-range
+    arrow-control
+    v-model="value5"
+    range-separator="To"
+    start-placeholder="Start time"
+    end-placeholder="End time">
   </el-time-picker>
 </template>
 
@@ -126,7 +145,8 @@ Can pick an arbitrary time range.
   export default {
     data() {
       return {
-        value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
+        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
       };
     }
   }
@@ -140,7 +160,9 @@ Can pick an arbitrary time range.
       return {
         value1: '',
         value2: new Date(2016, 9, 10, 18, 40),
-        value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        value3: new Date(2016, 9, 10, 18, 40),
+        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
         startTime: '',
         endTime: ''
       };
@@ -154,13 +176,23 @@ Can pick an arbitrary time range.
 | readonly | whether DatePicker is read only | boolean | — | false |
 | disabled | whether DatePicker is disabled | boolean | — | false |
 | editable | whether the input is editable | boolean | — | true |
-| clearable | Whether to show clear button | boolean | — | true |
-| size | size of Input | string | large/small/mini | — |
-| placeholder | placeholder | string | — | — |
-| value | value of the picker | date for Time Picker, and string for Time Select | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
-| align | alignment | left/center/right | left |
+| clearable | whether to show clear button | boolean | — | true |
+| size | size of Input | string | medium / small / mini | — |
+| placeholder | placeholder in non-range mode | string | — | — |
+| start-placeholder | placeholder for the start time in range mode | string | — | — |
+| end-placeholder | placeholder for the end time in range mode | string | — | — |
+| is-range | whether to pick a time range, only works with `<el-time-picker>` | boolean | — | false |
+| arrow-control | whether to pick time using arrow buttons, only works with `<el-time-picker>` | boolean | — | false |
+| value | value of the picker | Date for Time Picker, and string for Time Select | - | - |
+| align | alignment | left / center / right | left |
 | popper-class | custom class name for TimePicker's dropdown | string | — | — |
 | picker-options | additional options, check the table below | object | — | {} |
+| range-separator | range separator | string | - | '-' |
+| default-value | optional, default date of the calendar | Date for TimePicker, string for TimeSelect | anything accepted by `new Date()` for TimePicker, selectable value for TimeSelect | — |
+| value-format | optional, only for TimePicker, format of binding value. If not specified, the binding value will be a Date object | string | see [date formats](#/en-US/component/date-picker#date-formats) | — |
+| name | same as `name` in native input | string | — | — |
+| prefix-icon | Custom prefix icon class | string | — | el-icon-time |
+| clear-icon | Custom clear icon class | string | — | el-icon-circle-close |
 
 ### Time Select Options
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
@@ -174,12 +206,18 @@ Can pick an arbitrary time range.
 ### Time Picker Options
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| selectableRange | available time range, e.g.`'18:30:00 - 20:30:00'`or`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string/array | — | — |
-| format | format of the picker | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
+| selectableRange | available time range, e.g.`'18:30:00 - 20:30:00'`or`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | — | — |
+| format | format of the picker | string | hour `HH`, minute `mm`, second `ss`, AM/PM `A` | HH:mm:ss |
 
 
 ### Events
 | Event Name | Description | Parameters |
 |---------|--------|---------|
-| change | triggers when input value changes | formatted value |
-
+| change | triggers when user confirms the value | component's binding value |
+| blur | triggers when Input blurs | component instance |
+| focus | triggers when Input focuses | component instance |
+
+### Methods
+| Method | Description | Parameters |
+| ---- | ---- | ---- |
+| focus | focus the Input component | - |
diff --git a/examples/docs/en-US/tooltip.md b/examples/docs/en-US/tooltip.md
index bcd68a730a..272e57c0ed 100644
--- a/examples/docs/en-US/tooltip.md
+++ b/examples/docs/en-US/tooltip.md
@@ -15,16 +15,42 @@
         width: 110px;
       }
     }
+    .el-tooltip + .el-tooltip {
+      margin-left: 15px;
+    }
     .box {
+      width: 400px;
+    
+      .top {
+        text-align: center;
+      }
+      
       .left {
         float: left;
         width: 110px;
       }
-
+      
       .right {
         float: right;
         width: 110px;
       }
+      
+      .bottom {
+        clear: both;
+        text-align: center;
+      }
+      
+      .item {
+        margin: 4px;
+      }
+      
+      .left .el-tooltip__popper,
+      .right .el-tooltip__popper {
+        padding: 8px 10px;
+      }
+      .el-tooltip {
+        margin-left: 0;
+      }
     }
   }
 </style>
@@ -193,7 +219,7 @@ In fact, Tooltip is an extension based on [Vue-popper](https://github.com/elemen
 :::tip
 The `router-link` component is not supported in tooltip, please use `vm.$router.push`.
 
-Disabled form elements are not supported in tooltip, see more information at [MDN](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter), please wrap disabled form elements.
+Disabled form elements are not supported for Tooltip, more information can be found at [MDN](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter). You need to wrap the disabled form element with a container element for Tooltip to work.
 :::
 
 
@@ -213,3 +239,4 @@ Disabled form elements are not supported in tooltip, see more information at [MD
 | manual | whether to control Tooltip manually. `mouseenter` and `mouseleave` won't have effects if set to `true` | boolean | — | false |
 |  popper-class  |  custom class name for Tooltip's popper | string | — | — |
 | enterable | whether the mouse can enter the tooltip | Boolean | — | true |
+| hide-after | timeout in milliseconds to hide tooltip | number | — | 0 |
diff --git a/examples/docs/en-US/transfer.md b/examples/docs/en-US/transfer.md
index 0b0306335b..f69119490c 100644
--- a/examples/docs/en-US/transfer.md
+++ b/examples/docs/en-US/transfer.md
@@ -1,7 +1,7 @@
 <style>
   .demo-transfer {
     .transfer-footer {
-      margin-left: 20px;
+      margin-left: 15px;
       padding: 6px 5px;
     }
   }
@@ -52,7 +52,8 @@
         value1: [1, 4],
         value2: [],
         value3: [1],
-        value4: [],
+        value4: [1],
+        value5: [],
         filterMethod(query, item) {
           return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;
         },
@@ -155,26 +156,51 @@ You can search and filter data items.
 
 You can customize list titles, button texts, render function for data items, checking status texts in list footer and list footer contents.
 
-:::demo Use `titles`, `button-texts`, `render-content` and `footer-format` to respectively customize list titles, button texts, render function for data items, checking status texts in list footer. For list footer contents, two named slots are provided: `left-footer` and `right-footer`. Plus, if you want some items initially checked, you can use `left-default-checked` and `right-default-checked`. Finally, this example demonstrate the `change` event. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, `render-content` will work if relevant dependencies are correctly configured.
+:::demo Use `titles`, `button-texts`, `render-content` and `format` to respectively customize list titles, button texts, render function for data items, checking status texts in list header. Plus, you can also use scoped slot to customize data items. For list footer contents, two named slots are provided: `left-footer` and `right-footer`. Plus, if you want some items initially checked, you can use `left-default-checked` and `right-default-checked`. Finally, this example demonstrate the `change` event. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, `render-content` will work if relevant dependencies are correctly configured.
 ```html
 <template>
-  <el-transfer
-    v-model="value3"
-    filterable
-    :left-default-checked="[2, 3]"
-    :right-default-checked="[1]"
-    :render-content="renderFunc"
-    :titles="['Source', 'Target']"
-    :button-texts="['To left', 'To right']"
-    :footer-format="{
-      noChecked: '${total}',
-      hasChecked: '${checked}/${total}'
-    }"
-    @change="handleChange"
-    :data="data">
-    <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>
-    <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>
-  </el-transfer>
+  <p style="text-align: center; margin: 0 0 20px">Customize data items using render-content</p>
+  <div style="text-align: center">
+    <el-transfer
+      style="text-align: left; display: inline-block"
+      v-model="value3"
+      filterable
+      :left-default-checked="[2, 3]"
+      :right-default-checked="[1]"
+      :render-content="renderFunc"
+      :titles="['Source', 'Target']"
+      :button-texts="['To left', 'To right']"
+      :format="{
+        noChecked: '${total}',
+        hasChecked: '${checked}/${total}'
+      }"
+      @change="handleChange"
+      :data="data">
+      <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>
+      <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>
+    </el-transfer>
+    <p style="text-align: center; margin: 50px 0 20px">Customize data items using scoped slot</p>
+    <div style="text-align: center">
+      <el-transfer
+        style="text-align: left; display: inline-block"
+        v-model="value4"
+        filterable
+        :left-default-checked="[2, 3]"
+        :right-default-checked="[1]"
+        :titles="['Source', 'Target']"
+        :button-texts="['To left', 'To right']"
+        :format="{
+          noChecked: '${total}',
+          hasChecked: '${checked}/${total}'
+        }"
+        @change="handleChange"
+        :data="data">
+        <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
+        <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>
+        <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>
+      </el-transfer>
+    </div>
+  </div>
 </template>
 
 <style>
@@ -201,6 +227,7 @@ You can customize list titles, button texts, render function for data items, che
       return {
         data: generateData(),
         value3: [1],
+        value4: [1],
         renderFunc(h, option) {
           return <span>{ option.key } - { option.label }</span>;
         }
@@ -224,7 +251,7 @@ By default, Transfer looks for `key`, `label` and `disabled` in a data item. If
 ```html
 <template>
   <el-transfer
-    v-model="value4"
+    v-model="value5"
     :props="{
       key: 'value',
       label: 'desc'
@@ -249,7 +276,7 @@ By default, Transfer looks for `key`, `label` and `disabled` in a data item. If
       };
       return {
         data3: generateData3(),
-        value4: []
+        value5: []
       };
     }
   };
@@ -264,10 +291,11 @@ By default, Transfer looks for `key`, `label` and `disabled` in a data item. If
 | filterable | whether Transfer is filterable | boolean | — | false |
 | filter-placeholder | placeholder for the filter input | string | — | Enter keyword |
 | filter-method | custom filter method | function | — | — |
+| target-order | order strategy for elements in the target list. If set to `original`, the elements will keep the same order as the data source. If set to `push`, the newly added elements will be pushed to the bottom. If set to `unshift`, the newly added elements will be inserted on the top | string | original / push / unshift | original |
 | titles | custom list titles | array | — | ['List 1', 'List 2'] |
 | button-texts | custom button texts | array | — | [ ] |
 | render-content | custom render function for data items | function(h, option) | — | — |
-| footer-format | texts for checking status in list footer | object{noChecked, hasChecked} | — | { noChecked: '${total} items', hasChecked: '${checked}/${total} checked' } |
+| format | texts for checking status in list header | object{noChecked, hasChecked} | — | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } |
 | props | prop aliases for data source | object{key, label, disabled} | — | — |
 | left-default-checked | key array of initially checked data items of the left list | array | — | [ ] |
 | right-default-checked | key array of initially checked data items of the right list | array | — | [ ] |
@@ -278,7 +306,19 @@ By default, Transfer looks for `key`, `label` and `disabled` in a data item. If
 | left-footer | content of left list footer |
 | right-footer | content of right list footer |
 
+### Scoped Slot
+| Name | Description |
+|------|--------|
+| — | Custom content for data items. The scope parameter is { option } |
+
+### Methods
+| Method | Description | Parameters |
+| ---- | ---- | ---- |
+| clearQuery | clear the filter keyword of a certain panel | 'left' / 'right' |
+
 ### Events
 | Event Name | Description | Parameters |
 |---------- |-------- |---------- |
 | change | triggers when data items change in the right list | key array of current data items in the right list, transfer direction (left or right), moved item keys |
+| left-check-change | triggers when end user changes the checked state of any data item in the left list | key array of currently checked items, key array of items whose checked state have changed |
+| right-check-change | triggers when end user changes the checked state of any data item in the right list | key array of currently checked items, key array of items whose checked state have changed |
diff --git a/examples/docs/en-US/transition.md b/examples/docs/en-US/transition.md
index c330a2e06d..2658239d0d 100644
--- a/examples/docs/en-US/transition.md
+++ b/examples/docs/en-US/transition.md
@@ -35,7 +35,7 @@ You can use Element's built-in transitions directly. Before that, please read th
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #20A0FF;
+    background-color: #409EFF;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
@@ -84,7 +84,7 @@ You can use Element's built-in transitions directly. Before that, please read th
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #20A0FF;
+    background-color: #409EFF;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
@@ -131,7 +131,7 @@ For collapse effect, use the `el-collapse-transition` component.
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #20A0FF;
+    background-color: #409EFF;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
@@ -146,7 +146,7 @@ For collapse effect, use the `el-collapse-transition` component.
 
 ```js
 // fade/zoom
-import 'element-ui/lib/theme-defaut/base.css';
+import 'element-ui/lib/theme-chalk/base.css';
 // collapse
 import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
 import Vue from 'vue'
@@ -160,7 +160,7 @@ Vue.component(CollapseTransition.name, CollapseTransition)
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #20A0FF;
+    background-color: #409EFF;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
diff --git a/examples/docs/en-US/tree.md b/examples/docs/en-US/tree.md
index a36083f987..bab9dfe158 100644
--- a/examples/docs/en-US/tree.md
+++ b/examples/docs/en-US/tree.md
@@ -17,6 +17,35 @@
     .filter-tree {
       margin-top: 20px;
     }
+
+    .custom-tree-container {
+      display: flex;
+      margin: -24px;
+    }
+  
+    .block {
+      flex: 1;
+      padding: 8px 24px 24px;
+  
+      &:first-child {
+        border-right: solid 1px #eff2f6;
+      }
+  
+      > p {
+        text-align: center;
+        margin: 0;
+        line-height: 4;
+      }
+    }
+  
+    .custom-tree-node {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 14px;
+      padding-right: 8px;
+    }
   }
 </style>
 
@@ -121,6 +150,42 @@
       }]
     }]
   }];
+  
+  const data6 = [{
+    label: 'Level one 1',
+    children: [{
+      label: 'Level two 1-1',
+      children: [{
+        label: 'Level three 1-1-1'
+      }]
+    }]
+  }, {
+    label: 'Level one 2',
+    children: [{
+      label: 'Level two 2-1',
+      children: [{
+        label: 'Level three 2-1-1'
+      }]
+    }, {
+      label: 'Level two 2-2',
+      children: [{
+        label: 'Level three 2-2-1'
+      }]
+    }]
+  }, {
+    label: 'Level one 3',
+    children: [{
+      label: 'Level two 3-1',
+      children: [{
+        label: 'Level three 3-1-1'
+      }]
+    }, {
+      label: 'Level two 3-2',
+      children: [{
+        label: 'Level three 3-2-1'
+      }]
+    }]
+  }];
 
   let id = 1000;
 
@@ -137,6 +202,12 @@
     children: 'zones'
   };
 
+  const props1 = {
+    label: 'name',
+    children: 'zones',
+    isLeaf: 'leaf'
+  };
+
   const defaultProps = {
     children: 'children',
     label: 'label'
@@ -156,6 +227,34 @@
       handleNodeClick(data) {
         console.log(data);
       },
+      handleDragStart(node, ev) {
+        console.log('drag start', node);
+      },
+      handleDragEnter(draggingNode, dropNode, ev) {
+        console.log('tree drag enter: ', dropNode.label);
+      },
+      handleDragLeave(draggingNode, dropNode, ev) {
+        console.log('tree drag leave: ', dropNode.label);
+      },
+      handleDragOver(draggingNode, dropNode, ev) {
+        console.log('tree drag over: ', dropNode.label);
+      },
+      handleDragEnd(draggingNode, dropNode, dropType, ev) {
+        console.log('tree drag end: ', dropNode && dropNode.label, dropType);
+      },
+      handleDrop(draggingNode, dropNode, dropType, ev) {
+        console.log('tree drop: ', dropNode.label, dropType);
+      },
+      allowDrop(draggingNode, dropNode, type) {
+        if (dropNode.data.label === 'Level two 3-1') {
+          return type !== 'inner';
+        } else {
+          return true;
+        }
+      },
+      allowDrag(draggingNode) {
+        return draggingNode.data.label.indexOf('Level three 3-1-1') === -1;
+      },
       loadNode(node, resolve) {
         if (node.level === 0) {
           return resolve([{ name: 'Root1' }, { name: 'Root2' }]);
@@ -185,6 +284,23 @@
           resolve(data);
         }, 500);
       },
+      loadNode1(node, resolve) {
+        if (node.level === 0) {
+          return resolve([{ name: 'region' }]);
+        }
+        if (node.level > 1) return resolve([]);
+
+        setTimeout(() => {
+          const data = [{
+            name: 'leaf',
+            leaf: true
+          }, {
+            name: 'zone'
+          }];
+
+          resolve(data);
+        }, 500);
+      },
       getCheckedNodes() {
         console.log(this.$refs.tree.getCheckedNodes());
       },
@@ -195,11 +311,11 @@
         this.$refs.tree.setCheckedNodes([
           {
             id: 5,
-            label: '二级 2-1'
+            label: 'Level two 2-1'
           },
           {
             id: 9,
-            label: '三级 1-1-1'
+            label: 'Level three 1-1-1'
           }
         ]);
       },
@@ -209,23 +325,28 @@
       resetChecked() {
         this.$refs.tree.setCheckedKeys([]);
       },
-      append(store, data) {
-        store.append({ id: id++, label: 'testtest', children: [] }, data);
+      append(data) {
+        const newChild = { id: id++, label: 'testtest', children: [] };
+        if (!data.children) {
+          this.$set(data, 'children', []);
+        }
+        data.children.push(newChild);
       },
 
-      remove(store, data) {
-        store.remove(data);
+      remove(node, data) {
+        const parent = node.parent;
+        const children = parent.data.children || parent.data;
+        const index = children.findIndex(d => d.id === data.id);
+        children.splice(index, 1);
       },
 
       renderContent(h, { node, data, store }) {
         return (
-          <span style="white-space: normal">
+          <span class="custom-tree-node">
+            <span>{node.label}</span>
             <span>
-              <span>{node.label}</span>
-            </span>
-            <span style="float: right; margin-right: 20px">
-              <el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
-              <el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button>
+              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
+              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
             </span>
           </span>);
       },
@@ -241,9 +362,13 @@
         data,
         data2,
         data3,
+        data4: JSON.parse(JSON.stringify(data2)),
+        data5: JSON.parse(JSON.stringify(data2)),
+        data6,
         regions,
         defaultProps,
         props,
+        props1,
         defaultCheckedKeys: [5],
         defaultExpandedKeys: [2, 3],
         filterText: ''
@@ -260,7 +385,7 @@ Display a set of data with hierarchies.
 
 Basic tree structure.
 
-::: demo
+:::demo
 ```html
 <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
 
@@ -321,12 +446,11 @@ Basic tree structure.
 
 ### Selectable
 
-Used for node selection. In the following example, data for each layer is acquired after being clicked. If there is no child data, the expanding icon will disappear.
+Used for node selection.
 
-::: demo
+:::demo This example also shows how to load node data asynchronously.
 ```html
 <el-tree
-  :data="regions"
   :props="props"
   :load="loadNode"
   lazy
@@ -338,11 +462,6 @@ Used for node selection. In the following example, data for each layer is acquir
   export default {
     data() {
       return {
-        regions: [{
-          'name': 'region1'
-        }, {
-          'name': 'region2'
-        }],
         props: {
           label: 'name',
           children: 'zones'
@@ -393,11 +512,57 @@ Used for node selection. In the following example, data for each layer is acquir
 ```
 :::
 
+### Custom leaf node in lazy mode
+
+:::demo A node's data is not fetched until it is clicked, so the Tree cannot predict whether a node is a leaf node. That's why a drop-down button is added to each node, and if it is a leaf node, the drop-down button will disappear when clicked. That being said, you can also tell the Tree in advance whether the node is a leaf node, avoiding the render of the drop-down button before a leaf node.
+```html
+<el-tree
+  :props="props1"
+  :load="loadNode1"
+  lazy
+  show-checkbox>
+</el-tree>
+
+<script>
+  export default {
+    data() {
+      return {
+        props1: {
+          label: 'name',
+          children: 'zones',
+          isLeaf: 'leaf'
+        },
+      };
+    },
+    methods: {
+      loadNode1(node, resolve) {
+        if (node.level === 0) {
+          return resolve([{ name: 'region' }]);
+        }
+        if (node.level > 1) return resolve([]);
+
+        setTimeout(() => {
+          const data = [{
+            name: 'leaf',
+            leaf: true
+          }, {
+            name: 'zone'
+          }];
+
+          resolve(data);
+        }, 500);
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### Disabled checkbox
 
 The checkbox of a node can be set as disabled.
 
-::: demo In the example, 'disabled' property is declared in defaultProps, and some nodes are set as 'disabled:true'. The corresponding checkboxes are disabled and can't be clicked.
+:::demo In the example, 'disabled' property is declared in defaultProps, and some nodes are set as 'disabled:true'. The corresponding checkboxes are disabled and can't be clicked.
 ```html
 <el-tree
   :data="data3"
@@ -453,7 +618,7 @@ The checkbox of a node can be set as disabled.
 ### Default expanded and default checked
 Tree nodes can be initially expanded or checked
 
-::: demo Use `default-expanded-keys` and `default-checked-keys` to set initially expanded and initially checked nodes respectively. Note that for them to work, `node-key` is required. Its value is the name of a key in the data object, and the value of that key should be unique across the whole tree.
+:::demo Use `default-expanded-keys` and `default-checked-keys` to set initially expanded and initially checked nodes respectively. Note that for them to work, `node-key` is required. Its value is the name of a key in the data object, and the value of that key should be unique across the whole tree.
 ```html
 <el-tree
   :data="data2"
@@ -516,7 +681,7 @@ Tree nodes can be initially expanded or checked
 
 ### Checking tree nodes
 
-::: demo This example shows how to get and set checked nodes. They both can be done in two approaches: node and key. If you are taking the key approach, `node-key` is required.
+:::demo This example shows how to get and set checked nodes. They both can be done in two approaches: node and key. If you are taking the key approach, `node-key` is required.
 ```html
 <el-tree
   :data="data2"
@@ -613,97 +778,142 @@ Tree nodes can be initially expanded or checked
 ### Custom node content
 The content of tree nodes can be customized, so you can add icons or buttons as you will
 
-::: demo Use `render-content` to assign a render function that returns the content of tree nodes. See Vue's documentation for a detailed introduction of render functions. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, `render-content` will work if relevant dependencies are correctly configured.
+:::demo There are two ways to customize template for tree nodes: `render-content` and scoped slot. Use `render-content` to assign a render function that returns the content of tree nodes. See Vue's documentation for a detailed introduction of render functions. If you prefer scoped slot, you'll have access to `node` and `data` in the scope, standing for the TreeNode object and node data of the current node respectively. Note that the `render-content` demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, `render-content` will work if relevant dependencies are correctly configured.
 ```html
-<el-tree
-  :data="data2"
-  :props="defaultProps"
-  show-checkbox
-  node-key="id"
-  default-expand-all
-  :expand-on-click-node="false"
-  :render-content="renderContent">
-</el-tree>
+<div class="custom-tree-container">
+  <div class="block">
+    <p>Using render-content</p>
+    <el-tree
+      :data="data4"
+      show-checkbox
+      node-key="id"
+      default-expand-all
+      :expand-on-click-node="false"
+      :render-content="renderContent">
+    </el-tree>
+  </div>
+  <div class="block">
+    <p>Using scoped slot</p>
+    <el-tree
+      :data="data5"
+      show-checkbox
+      node-key="id"
+      default-expand-all
+      :expand-on-click-node="false">
+      <span class="custom-tree-node" slot-scope="{ node, data }">
+        <span>{{ node.label }}</span>
+        <span>
+          <el-button
+            type="text"
+            size="mini"
+            @click="() => append(data)">
+            Append
+          </el-button>
+          <el-button
+            type="text"
+            size="mini"
+            @click="() => remove(node, data)">
+            Delete
+          </el-button>
+        </span>
+      </span>
+    </el-tree>
+  </div>
+</div>
 
 <script>
   let id = 1000;
 
   export default {
     data() {
-      return {
-        data2: [{
-          id: 1,
-          label: 'Level one 1',
+      const data = [{
+        id: 1,
+        label: 'Level one 1',
+        children: [{
+          id: 4,
+          label: 'Level two 1-1',
           children: [{
-            id: 4,
-            label: 'Level two 1-1',
-            children: [{
-              id: 9,
-              label: 'Level three 1-1-1'
-            }, {
-              id: 10,
-              label: 'Level three 1-1-2'
-            }]
-          }]
-        }, {
-          id: 2,
-          label: 'Level one 2',
-          children: [{
-            id: 5,
-            label: 'Level two 2-1'
+            id: 9,
+            label: 'Level three 1-1-1'
           }, {
-            id: 6,
-            label: 'Level two 2-2'
+            id: 10,
+            label: 'Level three 1-1-2'
           }]
+        }]
+      }, {
+        id: 2,
+        label: 'Level one 2',
+        children: [{
+          id: 5,
+          label: 'Level two 2-1'
         }, {
-          id: 3,
-          label: 'Level one 3',
-          children: [{
-            id: 7,
-            label: 'Level two 3-1'
-          }, {
-            id: 8,
-            label: 'Level two 3-2'
-          }]
-        }],
-        defaultProps: {
-          children: 'children',
-          label: 'label'
-        }
+          id: 6,
+          label: 'Level two 2-2'
+        }]
+      }, {
+        id: 3,
+        label: 'Level one 3',
+        children: [{
+          id: 7,
+          label: 'Level two 3-1'
+        }, {
+          id: 8,
+          label: 'Level two 3-2'
+        }]
+      }];
+      return {
+        data4: JSON.parse(JSON.stringify(data)),
+        data5: JSON.parse(JSON.stringify(data))
       }
     },
 
     methods: {
-      append(store, data) {
-        store.append({ id: id++, label: 'testtest', children: [] }, data);
+      append(data) {
+        const newChild = { id: id++, label: 'testtest', children: [] };
+        if (!data.children) {
+          this.$set(data, 'children', []);
+        }
+        data.children.push(newChild);
       },
 
-      remove(store, data) {
-        store.remove(data);
+      remove(node, data) {
+        const parent = node.parent;
+        const children = parent.data.children || parent.data;
+        const index = children.findIndex(d => d.id === data.id);
+        children.splice(index, 1);
       },
 
       renderContent(h, { node, data, store }) {
         return (
-          <span>
+          <span class="custom-tree-node">
+            <span>{node.label}</span>
             <span>
-              <span>{node.label}</span>
-            </span>
-            <span style="float: right; margin-right: 20px">
-              <el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
-              <el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button>
+              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
+              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
             </span>
           </span>);
       }
     }
   };
 </script>
+
+<style>
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+  }
+</style>
 ```
 :::
 
 ### Tree node filtering
 Tree nodes can be filtered
 
-::: demo Invoke the `filter` method of the Tree instance to filter tree nodes. Its parameter is the filtering keyword. Note that for it to work, `filter-node-method` is required, and its value is the filtering method.
+:::demo Invoke the `filter` method of the Tree instance to filter tree nodes. Its parameter is the filtering keyword. Note that for it to work, `filter-node-method` is required, and its value is the filtering method.
 ```html
 <el-input
   placeholder="Filter keyword"
@@ -787,7 +997,7 @@ Tree nodes can be filtered
 
 Only one node among the same level can be expanded at one time.
 
-::: demo
+:::demo
 ```html
 <el-tree
   :data="data"
@@ -851,6 +1061,107 @@ Only one node among the same level can be expanded at one time.
 ```
 :::
 
+### Draggable
+
+You can drag and drop Tree nodes by adding a `draggable` attribute.
+
+:::demo
+```html
+<el-tree
+  :data="data6"
+  node-key="id"
+  default-expand-all
+  @node-drag-start="handleDragStart"
+  @node-drag-enter="handleDragEnter"
+  @node-drag-leave="handleDragLeave"
+  @node-drag-over="handleDragOver"
+  @node-drag-end="handleDragEnd"
+  @node-drop="handleDrop"
+  draggable
+  :allow-drop="allowDrop"
+  :allow-drag="allowDrag">
+</el-tree>
+
+<script>
+  export default {
+    data() {
+      return {
+        data6: [{
+          label: 'Level one 1',
+          children: [{
+            label: 'Level two 1-1',
+            children: [{
+              label: 'Level three 1-1-1'
+            }]
+          }]
+        }, {
+          label: 'Level one 2',
+          children: [{
+            label: 'Level two 2-1',
+            children: [{
+              label: 'Level three 2-1-1'
+            }]
+          }, {
+            label: 'Level two 2-2',
+            children: [{
+              label: 'Level three 2-2-1'
+            }]
+          }]
+        }, {
+          label: 'Level one 3',
+          children: [{
+            label: 'Level two 3-1',
+            children: [{
+              label: 'Level three 3-1-1'
+            }]
+          }, {
+            label: 'Level two 3-2',
+            children: [{
+              label: 'Level three 3-2-1'
+            }]
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
+      };
+    },
+    methods: {
+      handleDragStart(node, ev) {
+        console.log('drag start', node);
+      },
+      handleDragEnter(draggingNode, dropNode, ev) {
+        console.log('tree drag enter: ', dropNode.label);
+      },
+      handleDragLeave(draggingNode, dropNode, ev) {
+        console.log('tree drag leave: ', dropNode.label);
+      },
+      handleDragOver(draggingNode, dropNode, ev) {
+        console.log('tree drag over: ', dropNode.label);
+      },
+      handleDragEnd(draggingNode, dropNode, dropType, ev) {
+        console.log('tree drag end: ', dropNode && dropNode.label, dropType);
+      },
+      handleDrop(draggingNode, dropNode, dropType, ev) {
+        console.log('tree drop: ', dropNode.label, dropType);
+      },
+      allowDrop(draggingNode, dropNode, type) {
+        if (dropNode.data.label === 'Level two 3-1') {
+          return type !== 'inner';
+        } else {
+          return true;
+        }
+      },
+      allowDrag(draggingNode) {
+        return draggingNode.data.label.indexOf('Level three 3-1-1') === -1;
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### Attributes
 | Attribute             | Description                              | Type                        | Accepted Values | Default |
 | --------------------- | ---------------------------------------- | --------------------------- | --------------- | ------- |
@@ -858,12 +1169,13 @@ Only one node among the same level can be expanded at one time.
 | empty-text            | text displayed when data is void         | string                      | —               | —       |
 | node-key              | unique identity key name for nodes, its value should be unique across the whole tree | string                      | —               | —       |
 | props                 | configuration options, see the following table | object                      | —               | —       |
-| load                  | method for loading subtree data          | function(node, resolve)     | —               | —       |
-| render-content        | render function for tree node            | Function(h, { node }        | —               | —       |
+| render-after-expand   | whether to render child nodes only after a parent node is expanded for the first time | boolean | — | true |
+| load                  | method for loading subtree data, only works when `lazy` is true  | function(node, resolve)     | —               | —       |
+| render-content        | render function for tree node            | Function(h, { node, data, store }        | —               | —       |
 | highlight-current     | whether current node is highlighted      | boolean                     | —               | false   |
-| current-node-key      | key of current node, a set only prop     | string, number              | —               | —       |
 | default-expand-all    | whether to expand all nodes by default   | boolean                     | —               | false   |
-| expand-on-click-node  | whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon. | —                           | true            |         |
+| expand-on-click-node  | whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon. | boolean | — | true |
+| check-on-click-node   | whether to check or uncheck node when clicking on the node, if false, the node can only be checked or unchecked by clicking on the checkbox. | boolean | — | false |
 | auto-expand-parent    | whether to expand father node when a child node is expanded | boolean                     | —               | true    |
 | default-expanded-keys | array of keys of initially expanded nodes | array                       | —               | —       |
 | show-checkbox         | whether node is selectable               | boolean                     | —               | false   |
@@ -872,30 +1184,60 @@ Only one node among the same level can be expanded at one time.
 | filter-node-method    | this function will be executed on each node when use filter method. if return `false`, tree node will be hidden. | Function(value, data, node) | —               | —       |
 | accordion             | whether only one node among the same level can be expanded at one time | boolean                     | —               | false   |
 | indent                | horizontal indentation of nodes in adjacent levels in pixels | number                     | —    | 16 |
+| lazy                  | whether to lazy load leaf node, used with `load` attribute  | boolean                     | —    | false |
+| draggable             | whether enable tree nodes drag and drop | boolean            | —    | false |
+| allow-drag            | this function will be executed before dragging a node. If `false` is returned, the node can not be dragged | Function(node)  | —  | —  |
+| allow-drop            | this function will be executed before the dragging node is dropped. If `false` is returned, the dragging node can not be dropped at the target node. `type` has three possible values: 'prev' (inserting the dragging node before the target node), 'inner' (inserting the dragging node to the target node) and 'next' (inserting the dragging node after the target node) | Function(draggingNode, dropNode, type)  | —    | —     |
 
 ### props
 | Attribute | Description                              | Type   | Accepted Values | Default |
 | --------- | ---------------------------------------- | ------ | --------------- | ------- |
 | label     | specify which key of node object is used as the node's label | string, function(data, node) | —               | —       |
-| children | specify which node object is used as the node's subtree | string, function(data, node) | —               | —       |
-| disabled | specify which node's checkbox disabled |  boolean, function(data, node) | —    | —    |
+| children | specify which node object is used as the node's subtree | string | —               | —       |
+| disabled | specify which key of node object represents if node's checkbox is disabled | boolean, function(data, node) | —    | —    |
+| isLeaf | specify whether the node is a leaf node, only works when lazy load is enabled | boolean, function(data, node) | —    | —    |
 
 ### Method
 `Tree` has the following method, which returns the currently selected array of nodes.
 | Method          | Description                              | Parameters                               |
 | --------------- | ---------------------------------------- | ---------------------------------------- |
 | filter          | filter all tree nodes, filtered nodes will be hidden | Accept a parameter which will be used as first parameter for filter-node-method |
-| getCheckedNodes | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes | Accept a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. |
+| updateKeyChildren | set new data to node, only works when `node-key` is assigned  | (key, data) Accept two parameters: 1. key of node 2. new data |
+| getCheckedNodes | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes | (leafOnly, includeHalfChecked) Accept two boolean type parameters: 1. default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. 2. default value is `false`. If the parameter is `true`, the return value contains halfchecked nodes |
 | setCheckedNodes | set certain nodes to be checked, only works when `node-key` is assigned | an array of nodes to be checked          |
 | getCheckedKeys  | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of node's keys | (leafOnly) Accept a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. |
 | setCheckedKeys  | set certain nodes to be checked, only works when `node-key` is assigned | (keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. |
 | setChecked      | set node to be checked or not, only works when `node-key` is assigned | (key/data, checked, deep) Accept three parameters: 1. node's key or data to be checked 2. a boolean typed parameter indicating checked or not. 3. a boolean typed parameter indicating deep or not. |
+| getHalfCheckedNodes | If the node can be selected (`show-checkbox` is `true`), it returns the currently half selected array of nodes | - |
+| getHalfCheckedKeys | If the node can be selected (`show-checkbox` is `true`), it returns the currently half selected array of node's keys | - |
+| getCurrentKey   | return the highlight node's key (null if no node is highlighted) | — |
+| getCurrentNode  | return the highlight node (null if no node is highlighted) | — |
+| setCurrentKey   | set highlighted node by key, only works when `node-key` is assigned | (key) the node's key to be highlighted. If `null`, cancel the currently highlighted node |
+| setCurrentNode  | set highlighted node, only works when `node-key` is assigned | (node) the node to be highlighted |
+| getNode         | get node by data or key | (data) the node's data or key |
+| remove          | remove a node, only works when node-key is assigned | (data) the node's data or node to be deleted |
+| append          | append a child node to a given node in the tree | (data, parentNode) 1. child node's data to be appended 2. parent node's data, key or node |
+| insertBefore    | insert a node before a given node in the tree | (data, refNode) 1. node's data to be inserted 2. reference node's data, key or node |
+| insertAfter     | insert a node after a given node in the tree   | (data, refNode) 1. node's data to be inserted 2. reference node's data, key or node |
 
 ### Events
 | Event Name     | Description                              | Parameters                               |
 | -------------- | ---------------------------------------- | ---------------------------------------- |
 | node-click     | triggers when a node is clicked          | three parameters: node object corresponding to the node clicked, `node` property of TreeNode, TreeNode itself |
+| node-contextmenu     | triggers when a node is clicked by right button          | four parameters: event, node object corresponding to the node clicked, `node` property of TreeNode, TreeNode itself |
 | check-change   | triggers when the selected state of the node changes | three parameters: node object corresponding to the node whose selected state is changed, whether the node is selected, whether node's subtree has selected nodes |
+| check   | triggers after clicking the checkbox of a node | two parameters: node object corresponding to the node that is checked / unchecked, tree checked status object which has four props: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys |
 | current-change | triggers when current node changes       | two parameters: node object corresponding to the current node, `node` property of TreeNode |
 | node-expand    | triggers when current node open          | three parameters: node object corresponding to the node opened, `node` property of TreeNode, TreeNode itself |
 | node-collapse  | triggers when current node close         | three parameters: node object corresponding to the node closed, `node` property of TreeNode, TreeNode itself |
+| node-drag-start | triggers when dragging starts  | two parameters: node object corresponding to the dragging node, event. |
+| node-drag-enter | triggers when the dragging node enters another node  | three parameters: node object corresponding to the dragging node, node object corresponding to the entering node, event. |
+| node-drag-leave | triggers when the dragging node leaves a node  | three parameters: node object corresponding to the dragging node, node object corresponding to the leaving node, event.  |
+| node-drag-over | triggers when dragging over a node (like mouseover event) | three parameters: node object corresponding to the dragging node, node object corresponding to the dragging over node, event.  |
+| node-drag-end  | triggers when dragging ends  | four parameters: node object corresponding to the dragging node, node object corresponding to the dragging end node (may be `undefined`), node drop type (before / after / inner), event. |
+| node-drop  | triggers after the dragging node is dropped | four parameters: node object corresponding to the dragging node, node object corresponding to the dropped node, node drop type (before / after / inner), event. |
+
+### Scoped Slot
+| Name | Description |
+|------|--------|
+| — | Custom content for tree nodes. The scope parameter is { node, data } |
diff --git a/examples/docs/en-US/upload.md b/examples/docs/en-US/upload.md
index d600898ca2..af862b2540 100644
--- a/examples/docs/en-US/upload.md
+++ b/examples/docs/en-US/upload.md
@@ -18,8 +18,8 @@
         position: relative;
         overflow: hidden;
 
-        &:hover {
-          border-color: #20a0ff;
+        &:hover, &:focus {
+          border-color: #409EFF;
         }
       }
       .avatar-uploader-icon {
@@ -45,30 +45,24 @@
       return {
         fileList: [{
           name: 'food.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
-          status: 'finished'
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
         }, {
           name: 'food2.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
-          status: 'finished'
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
         }],
         fileList2: [{
           name: 'food.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
-          status: 'finished'
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
         }, {
           name: 'food2.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
-          status: 'finished'
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
         }],
         fileList3: [{
           name: 'food.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
-          status: 'finished'
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
         }, {
           name: 'food2.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
-          status: 'finished'
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
         }],
         imageUrl: '',
         dialogImageUrl: '',
@@ -113,6 +107,12 @@
       },
       handleChange(file, fileList) {
         this.fileList3 = fileList.slice(-3);
+      },
+      handleExceed(files, fileList) {
+        this.$message.warning(`You can upload up to 3 files. You selected ${files.length} files this time, and ${files.length + fileList.length} files totally`);
+      },
+      beforeRemove(file, fileList) {
+        return this.$confirm(`确定移除 ${ file.name }？`);
       }
     }
   }
@@ -123,13 +123,17 @@ Upload files by clicking or drag-and-drop
 
 ### Click to upload files
 
-:::demo Customize upload button type and text using `slot`.
+:::demo Customize upload button type and text using `slot`. Set `limit` and `on-exceed` to limit the maximum number of uploads allowed and specify method when the limit is exceeded. Plus, you can abort removing a file in the `before-remove` hook.
 ```html
 <el-upload
   class="upload-demo"
   action="https://jsonplaceholder.typicode.com/posts/"
   :on-preview="handlePreview"
   :on-remove="handleRemove"
+  :before-remove="beforeRemove"
+  multiple
+  :limit="3"
+  :on-exceed="handleExceed"
   :file-list="fileList">
   <el-button size="small" type="primary">Click to upload</el-button>
   <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
@@ -147,6 +151,12 @@ Upload files by clicking or drag-and-drop
       },
       handlePreview(file) {
         console.log(file);
+      },
+      handleExceed(files, fileList) {
+        this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`);
+      },
+      beforeRemove(file, fileList) {
+        return this.$confirm(`确定移除 ${ file.name }？`);
       }
     }
   }
@@ -158,7 +168,7 @@ Upload files by clicking or drag-and-drop
 
 Use `before-upload` hook to limit the upload file format and size.
 
-::: demo
+:::demo
 ```html
 <el-upload
   class="avatar-uploader"
@@ -179,7 +189,7 @@ Use `before-upload` hook to limit the upload file format and size.
     overflow: hidden;
   }
   .avatar-uploader .el-upload:hover {
-    border-color: #20a0ff;
+    border-color: #409EFF;
   }
   .avatar-uploader-icon {
     font-size: 28px;
@@ -229,7 +239,7 @@ Use `before-upload` hook to limit the upload file format and size.
 
 Use `list-type` to change the fileList style.
 
-::: demo
+:::demo
 ```html
 <el-upload
   action="https://jsonplaceholder.typicode.com/posts/"
@@ -238,7 +248,7 @@ Use `list-type` to change the fileList style.
   :on-remove="handleRemove">
   <i class="el-icon-plus"></i>
 </el-upload>
-<el-dialog v-model="dialogVisible" size="tiny">
+<el-dialog :visible.sync="dialogVisible">
   <img width="100%" :src="dialogImageUrl" alt="">
 </el-dialog>
 <script>
@@ -265,7 +275,7 @@ Use `list-type` to change the fileList style.
 
 ### FileList with thumbnail
 
-::: demo
+:::demo
 ```html
 <el-upload
   class="upload-demo"
@@ -301,7 +311,7 @@ Use `list-type` to change the fileList style.
 
 Use `on-change` hook function to control upload file list
 
-::: demo
+:::demo
 ```html
 <el-upload
   class="upload-demo"
@@ -317,12 +327,10 @@ Use `on-change` hook function to control upload file list
       return {
         fileList3: [{
           name: 'food.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
-          status: 'finished'
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
         }, {
           name: 'food2.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
-          status: 'finished'
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
         }]
       };
     },
@@ -340,7 +348,7 @@ Use `on-change` hook function to control upload file list
 
 You can drag your file to a certain area to upload it.
 
-::: demo
+:::demo
 ```html
 <el-upload
   class="upload-demo"
@@ -359,7 +367,7 @@ You can drag your file to a certain area to upload it.
 
 ### Manual upload
 
-::: demo
+:::demo
 ```html
 <el-upload
   class="upload-demo"
@@ -391,7 +399,7 @@ multiple | whether uploading multiple files is permitted | boolean | — | —
 data | additions options of request | object | — | —
 name | key name for uploaded file | string | — | file
 with-credentials | whether cookies are sent | boolean | — |false
-show-upload-list | whether to show the uploaded file list | boolean | — | true
+show-file-list | whether to show the uploaded file list | boolean | — | true
  drag | whether to activate drag and drop mode | boolean | — | false
 accept | accepted [file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), will not work when `thumbnail-mode` is `true` | string | — | —
 on-preview | hook function when clicking the uploaded files | function(file) | — | —
@@ -401,15 +409,25 @@ on-error | hook function when some errors occurs | function(err, file, fileList)
 on-progress | hook function when some progress occurs | function(event, file, fileList) | — | — |
 on-change | hook function when select file or upload file success or upload file fail | function(file, fileList) | — | — |
 before-upload | hook function before uploading with the file to be uploaded as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, uploading will be aborted | function(file) | — | —
+before-remove | hook function before removing a file with the file and file list as its parameters. If `false` is returned or a `Promise` is returned and then is rejected, removing will be aborted. | function(file, fileList) | — | — |
 thumbnail-mode | whether thumbnail is displayed | boolean | — | false
-file-list | default uploaded files, e.g. [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}] | array | — | []
+file-list | default uploaded files, e.g. [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | []
 list-type | type of fileList | string | text/picture/picture-card | text |
 auto-upload | whether to auto upload file | boolean | — | true |
 http-request | override default xhr behavior, allowing you to implement your own upload-file's request | function | — | — |
 disabled | whether to disable upload | boolean | — | false |
+limit | maximum number of uploads allowed | number | — | — |
+on-exceed | hook function when limit is exceeded | function(files, fileList) | — | - |
+
+### Slot
+| Name | Description |
+|------|--------|
+| trigger | content which triggers file dialog |
+| tip | content of tips |
 
 ### Methods
 | Methods Name | Description | Parameters |
 |---------- |-------- |---------- |
 | clearFiles | clear the uploaded file list (this method is not supported in the `before-upload` hook) | — |
-| abort | cancel upload request | （ file: fileList's item ） |
+| abort      | cancel upload request                    | （ file: fileList's item ） |
+| submit     | upload the file list manually            |  —                         |
diff --git a/examples/docs/es/alert.md b/examples/docs/es/alert.md
new file mode 100644
index 0000000000..76e6124eaf
--- /dev/null
+++ b/examples/docs/es/alert.md
@@ -0,0 +1,230 @@
+<script>
+  export default {
+    methods: {
+      hello() {
+        alert('Hello World!');
+      }
+    }
+  }
+</script>
+<style>
+  .demo-box.demo-alert .el-alert {
+    margin: 20px 0 0;
+  }
+
+  .demo-box.demo-alert .el-alert:first-child {
+    margin: 0;
+  }
+</style>
+
+## Alert
+
+Mostrar mensajes de alertas importantes.
+
+### Uso básico
+
+Los componentes de alertas no son elementos overlay de la página y no desaparecen automáticamente.
+
+:::demo Alert provee 4 tipos de temas definidos por `type`, el valor por defecto es `info`.
+
+```html
+<template>
+  <el-alert
+    title="success alert"
+    type="success">
+  </el-alert>
+  <el-alert
+    title="info alert"
+    type="info">
+  </el-alert>
+  <el-alert
+    title="warning alert"
+    type="warning">
+  </el-alert>
+  <el-alert
+    title="error alert"
+    type="error">
+  </el-alert>
+</template>
+```
+:::
+
+### Personalización del botón de cerrar 
+
+Personalizar el botón de cerrar como texto u otros símbolos.
+
+:::demo Alert permite configurar si es posible cerrarla. El texto del botón de cerrado, así como los callbacks de cerrado son personalizables. El atributo `closable` define si el componente puede cerrarse o no. Acepta un `boolean`, que por defecto es `true`. También puede configurar el atributo `close-text` para reemplazar el símbolo de cerrado que se muestra por defecto. El atributo `close-text` debe ser un string. El evento `close` se dispara cuando el componente se cierra.
+
+
+```html
+<template>
+  <el-alert
+    title="unclosable alert"
+    type="success"
+    :closable="false">
+  </el-alert>
+  <el-alert
+    title="customized close-text"
+    type="info"
+    close-text="Gotcha">
+  </el-alert>
+  <el-alert
+    title="alert with callback"
+    type="warning"
+    @close="hello">
+  </el-alert>
+</template>
+
+<script>
+  export default {
+    methods: {
+      hello() {
+        alert('Hello World!');
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Usar iconos
+
+Mostrar un icono mejora la legibilidad.
+
+:::demo Setear el atributo `show-icon` muestra un icono que corresponde al tipo de Alert que se está mostrando.
+
+
+```html
+<template>
+  <el-alert
+    title="success alert"
+    type="success"
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="info alert"
+    type="info"
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="warning alert"
+    type="warning"
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="error alert"
+    type="error"
+    show-icon>
+  </el-alert>
+</template>
+```
+:::
+
+### Texto centrado
+
+Para centrar el texto utilice el atributo `center`.
+
+:::demo
+
+```html
+<template>
+  <el-alert
+    title="success alert"
+    type="success"
+    center
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="info alert"
+    type="info"
+    center
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="warning alert"
+    type="warning"
+    center
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="error alert"
+    type="error"
+    center
+    show-icon>
+  </el-alert>
+</template>
+```
+:::
+
+### Con descripción
+
+Descripción incluye un mensaje con información más detallada.
+
+:::demo Además del atributo requerido `title`, se puede agregar el atributo `description` para ayudar a describir la alerta con mas detalles. La descripción puede contener solamente un string y va a usar word wrap automáticamente.
+
+```html
+<template>
+  <el-alert
+    title="with description"
+    type="success"
+    description="This is a description.">
+  </el-alert>
+</template>
+```
+:::
+
+### Utilizando icono y descripción
+
+:::demo Finalmente este es un ejemplo utilizando icono y descripción.
+
+```html
+<template>
+  <el-alert
+    title="success alert"
+    type="success"
+    description="more text description"
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="info alert"
+    type="info"
+    description="more text description"
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="warning alert"
+    type="warning"
+    description="more text description"
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="error alert"
+    type="error"
+    description="more text description"
+    show-icon>
+  </el-alert>
+</template>
+```
+:::
+
+### Atributos
+| Atributo    | Descripción                              | Tipo    | Valores aceptados          | Por defecto |
+| ----------- | ---------------------------------------- | ------- | -------------------------- | ----------- |
+| title       | título. Requerido                        | string  | —                          | —           |
+| type        | tipo de componente                       | string  | success/warning/info/error | info        |
+| description | texto descriptivo. También puede ser pasado con el slot por defecto | string  | —                          | —           |
+| closable    | si se puede cerrar o no                  | boolean | —                          | true        |
+| center      | si el texto debe estar centrado          | boolean | —                          | false       |
+| close-text  | texto de cerrado personalizado           | string  | —                          | —           |
+| show-icon   | si un icono del tipo de alerta se debe mostrar | boolean | —                          | false       |
+
+### Slot
+
+| Name | Description |
+|------|--------|
+| title | El contenido del título de alerta. |
+
+### Eventos
+| Nombre del evento | Descripción                           | Parámetros |
+| ----------------- | ------------------------------------- | ---------- |
+| close             | Se dispara cuando la alerta se cierra | —          |
diff --git a/examples/docs/es/badge.md b/examples/docs/es/badge.md
new file mode 100644
index 0000000000..7f91c7cbed
--- /dev/null
+++ b/examples/docs/es/badge.md
@@ -0,0 +1,145 @@
+## Badge
+
+Marcas en forma de número o estado para botones e iconos.
+
+### Uso básico
+
+Muestra la cantidad de mensajes nuevos.
+
+:::demo La cantidad está definida por `value` que acepta `Number` o `String`.
+
+```html
+<el-badge :value="12" class="item">
+  <el-button size="small">comments</el-button>
+</el-badge>
+<el-badge :value="3" class="item">
+  <el-button size="small">replies</el-button>
+</el-badge>
+<el-badge :value="1" class="item" type="primary">
+  <el-button size="small">comments</el-button>
+</el-badge>
+<el-badge :value="2" class="item" type="warning">
+  <el-button size="small">replies</el-button>
+</el-badge>
+
+<el-dropdown trigger="click">
+  <span class="el-dropdown-link">
+    Click Me<i class="el-icon-caret-bottom el-icon--right"></i>
+  </span>
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item class="clearfix">
+      comments
+      <el-badge class="mark" :value="12" />
+    </el-dropdown-item>
+    <el-dropdown-item class="clearfix">
+      replies
+      <el-badge class="mark" :value="3" />
+    </el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<style>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>
+```
+:::
+
+### Valor máximo
+
+Se puede personalizar el valor máximo.
+
+:::demo El valor máximo se define como `max` el cual es un `Number`. Nota: solo funciona si `value` es también un `Number`.
+
+```html
+<el-badge :value="200" :max="99" class="item">
+  <el-button size="small">comments</el-button>
+</el-badge>
+<el-badge :value="100" :max="10" class="item">
+  <el-button size="small">replies</el-button>
+</el-badge>
+
+<style>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>
+```
+:::
+
+### Personalizaciones
+
+Mostrar texto en vez de números.
+
+:::demo Cuando `value` es un `String`, puede mostrar texto personalizado.
+
+```html
+<el-badge value="new" class="item">
+  <el-button size="small">comments</el-button>
+</el-badge>
+<el-badge value="hot" class="item">
+  <el-button size="small">replies</el-button>
+</el-badge>
+
+<style>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>
+```
+:::
+
+### Pequeño punto rojo
+
+Puede utilizar un punto rojo para marcar contenido que debe ser notado.
+
+:::demo Use el atributo `is-dot`. Es un `Boolean`.
+
+```html
+<el-badge is-dot class="item">query</el-badge>
+<el-badge is-dot class="item">
+  <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
+</el-badge>
+
+<style>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>
+```
+:::
+
+<style scoped>
+  .share-button {
+    width: 36px;
+    padding: 10px;
+  }
+
+  .mark {
+    margin-top: 8px;
+    line-height: 1;
+    float: right;
+  }
+
+  .clearfix {
+    @utils-clearfix;
+  }
+
+  .item {
+    margin-right: 40px;
+  }
+</style>
+
+### Atributos
+| Atributo | Descripción                              | Tipo           | Valores aceptados | Por defecto |
+| -------- | ---------------------------------------- | -------------- | ----------------- | ----------- |
+| value    | valor a mostrar                          | string, number | —                 | —           |
+| max      | valor máximo, Muestra '{max}+' cuando se excede. Solo funciona si `value` es un `Number` | number         | —                 | —           |
+| is-dot   | si se debe mostrar un pequeño punto      | boolean        | —                 | false       |
+| hidden   | hidden badge                             | boolean        | —                 | false       |
+| type     | tipo de botón                            | string         | primary / success / warning / danger / info | — |
diff --git a/examples/docs/es/breadcrumb.md b/examples/docs/es/breadcrumb.md
new file mode 100644
index 0000000000..727e821762
--- /dev/null
+++ b/examples/docs/es/breadcrumb.md
@@ -0,0 +1,49 @@
+## Breadcrumb
+
+Muestra la localización de la página actual, haciendo más fácil el poder ir a la página anterior.
+
+### Uso básico
+
+
+:::demo En `el-breadcrumb`, cada `el-breadcrumb-item` es un tag que representa cada nivel empezando desde la homepage. Este componente tiene un atributo `String` llamado `separator`, el mismo determina el caracter separador. El valor por defecto es '/'.
+
+```html
+<el-breadcrumb separator="/">
+  <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
+  <el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item>
+  <el-breadcrumb-item>promotion list</el-breadcrumb-item>
+  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
+</el-breadcrumb>
+```
+:::
+
+### Icono separador
+
+:::demo Setee `separator-class` para que utilice `iconfont` como separador，el mismo va a cubrir `separator`
+
+```html
+<el-breadcrumb separator-class="el-icon-arrow-right">
+  <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
+  <el-breadcrumb-item>promotion management</el-breadcrumb-item>
+  <el-breadcrumb-item>promotion list</el-breadcrumb-item>
+  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
+</el-breadcrumb>
+```
+:::
+
+### Breadcrumb atributos
+| Atributo        | Descripción                            | Tipo   | Valores aceptados | Por defecto |
+| --------------- | -------------------------------------- | ------ | ----------------- | ----------- |
+| separator       | caracter separador                     | string | —                 | /           |
+| separator-class | nombre de la clase del icono separador | string | —                 | -           |
+
+### Breadcrumb Item atributos
+| Atributo | Descripción                              | Tipo          | Valores aceptados | Por defecto |
+| -------- | ---------------------------------------- | ------------- | ----------------- | ----------- |
+| to       | ruta del link, lo mismo que `to` de `vue-router` | string/object | —                 | —           |
+| replace  | si `true`,  la navegación no dejara una entrada en la historia | boolean       | —                 | false       |
+
+
+
+
+
diff --git a/examples/docs/es/button.md b/examples/docs/es/button.md
new file mode 100644
index 0000000000..a276726221
--- /dev/null
+++ b/examples/docs/es/button.md
@@ -0,0 +1,189 @@
+<style>
+  .demo-box.demo-button {
+    .el-row {
+      margin-bottom: 20px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    .el-button + .el-button {
+      margin-left: 10px;
+    }
+    .el-button-group {
+      .el-button + .el-button {
+        margin-left: 0;
+      }
+    
+      & + .el-button-group {
+        margin-left: 10px;
+      }
+    }
+  }
+</style>
+
+## Button
+
+Botones comúnmente usados.
+
+### Uso básico
+
+:::demo Use `type`, `plain`,`round` y `circle` para definir estilos a los botones.
+
+```html
+<el-row>
+  <el-button>Default</el-button>
+  <el-button type="primary">Primary</el-button>
+  <el-button type="success">Success</el-button>
+  <el-button type="info">Info</el-button>
+  <el-button type="warning">Warning</el-button>
+  <el-button type="danger">Danger</el-button>
+</el-row>
+
+<el-row>
+  <el-button plain>Plain</el-button>
+  <el-button type="primary" plain>Primary</el-button>
+  <el-button type="success" plain>Success</el-button>
+  <el-button type="info" plain>Info</el-button>
+  <el-button type="warning" plain>Warning</el-button>
+  <el-button type="danger" plain>Danger</el-button>
+</el-row>
+
+<el-row>
+  <el-button round>Round</el-button>
+  <el-button type="primary" round>Primary</el-button>
+  <el-button type="success" round>Success</el-button>
+  <el-button type="info" round>Info</el-button>
+  <el-button type="warning" round>Warning</el-button>
+  <el-button type="danger" round>Danger</el-button>
+</el-row>
+
+<el-row>
+  <el-button icon="el-icon-search" circle></el-button>
+  <el-button type="primary" icon="el-icon-edit" circle></el-button>
+  <el-button type="success" icon="el-icon-check" circle></el-button>
+  <el-button type="info" icon="el-icon-message" circle></el-button>
+  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
+  <el-button type="danger" icon="el-icon-delete" circle></el-button>
+</el-row>
+```
+:::
+
+### Botón deshabilitado
+
+El atributo `disabled` determina su un botón esta deshabilitado.
+
+:::demo Use el atributo `disabled` para determinar si un botón esta deshabilitado. Acepta un valor `Boolean`.
+
+```html
+<el-row>
+  <el-button disabled>Default</el-button>
+  <el-button type="primary" disabled>Primary</el-button>
+  <el-button type="success" disabled>Success</el-button>
+  <el-button type="info" disabled>Info</el-button>
+  <el-button type="warning" disabled>Warning</el-button>
+  <el-button type="danger" disabled>Danger</el-button>
+</el-row>
+
+<el-row>
+  <el-button plain disabled>Plain</el-button>
+  <el-button type="primary" plain disabled>Primary</el-button>
+  <el-button type="success" plain disabled>Success</el-button>
+  <el-button type="info" plain disabled>Info</el-button>
+  <el-button type="warning" plain disabled>Warning</el-button>
+  <el-button type="danger" plain disabled>Danger</el-button>
+</el-row>
+```
+:::
+
+### Botón de texto
+
+Botones sin borde ni fondo.
+
+:::demo
+```html
+<el-button type="text">Text Button</el-button>
+<el-button type="text" disabled>Text Button</el-button>
+```
+:::
+
+### Botón icono
+
+Use iconos para darle mayor significado a Button. Se puede usar simplemente un icono o un icono con texto.
+
+:::demo Use el atributo `icon` para agregar un icono. Puede encontrar el listado de iconos en el componente de iconos. Agregar iconos a la derecha del texto se puede conseguir con un tag `<i>`. También se pueden usar iconos custom.
+
+```html
+<el-button type="primary" icon="el-icon-edit"></el-button>
+<el-button type="primary" icon="el-icon-share"></el-button>
+<el-button type="primary" icon="el-icon-delete"></el-button>
+<el-button type="primary" icon="el-icon-search">Search</el-button>
+<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
+```
+:::
+
+### Grupo de botones
+
+Mostrar un grupo de botones puede ser usado para mostrar un grupo de operaciones similares.
+
+:::demo Use el tag `<el-button-group>` para agrupar sus botones.
+
+```html
+<el-button-group>
+  <el-button type="primary" icon="el-icon-arrow-left">Previous Page</el-button>
+  <el-button type="primary">Next Page<i class="el-icon-arrow-right el-icon-right"></i></el-button>
+</el-button-group>
+<el-button-group>
+  <el-button type="primary" icon="el-icon-edit"></el-button>
+  <el-button type="primary" icon="el-icon-share"></el-button>
+  <el-button type="primary" icon="el-icon-delete"></el-button>
+</el-button-group>
+```
+:::
+
+### Botón de descarga 
+
+Cuando se hace clic en un botón para descargar datos, el botón muestra un estado de descarga.
+
+:::demo Ajuste el atributo `loading` a `true` para mostrar el estado de descarga.
+
+```html
+<el-button type="primary" :loading="true">Loading</el-button>
+```
+:::
+
+### Tamaños
+
+Además del tamaño por defecto, el componente Button provee tres tamaños adicionales para utilizar en diferentes escenarios.
+
+:::demo Use el atributo `size` para setear tamaños adicionales con `medium`, `small` or `mini`.
+
+```html
+<el-row>
+  <el-button>Default</el-button>
+  <el-button size="medium">Medium</el-button>
+  <el-button size="small">Small</el-button>
+  <el-button size="mini">Mini</el-button>
+</el-row>
+<el-row>
+  <el-button round>Default</el-button>
+  <el-button size="medium" round>Medium</el-button>
+  <el-button size="small" round>Small</el-button>
+  <el-button size="mini" round>Mini</el-button>
+</el-row>
+```
+:::
+
+### Atributos
+| Atributo    | Descripción                                   | Tipo    | Valores aceptados                                  | Por defecto |
+| ----------- | --------------------------------------------- | ------- | -------------------------------------------------- | ----------- |
+| size        | tamaño del botón                              | string  | medium / small / mini                              | —           |
+| type        | tipo de botón                                 | string  | primary / success / warning / danger / info / text | —           |
+| plain       | determinar si es o no un botón plano          | boolean | —                                                  | false       |
+| round       | determinar si es o no un botón redondo        | boolean | —                                                  | false       |
+| circle      | determina si es un boton circular             | boolean | —                                                  | false       |
+| loading     | determinar si es o no un botón de descarga    | boolean | —                                                  | false       |
+| disabled    | deshabilitar el botón                         | boolean | —                                                  | false       |
+| icon        | nombre de la clase del icono                  | string  | —                                                  | —           |
+| autofocus   | misma funcionalidad que la nativa `autofocus` | boolean | —                                                  | false       |
+| native-type | misma funcionalidad que la nativa `type`      | string  | button / submit / reset                            | button      |
\ No newline at end of file
diff --git a/examples/docs/es/card.md b/examples/docs/es/card.md
new file mode 100644
index 0000000000..a5bd12f546
--- /dev/null
+++ b/examples/docs/es/card.md
@@ -0,0 +1,220 @@
+<script>
+  import dateUtil from 'main/utils/date'
+  export default {
+    data() {
+      return {
+        currentDate: dateUtil.format(new Date(), 'yyyy-MM-dd HH:mm')
+      };
+    }
+  }
+</script>
+
+<style scoped>
+  .text {
+    font-size: 14px;
+  }
+
+  .time {
+    font-size: 13px;
+    color: #999;
+  }
+
+  .bottom {
+    margin-top: 13px;
+    line-height: 12px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .button {
+    padding: 0;
+    float: right;
+  }
+
+  .image {
+    width: 100%;
+    display: block;
+  }
+
+  .clearfix {
+    @utils-clearfix;
+  }
+
+  .box-card {
+    width: 480px;
+  }
+</style>
+## Card
+Muestra información dentro de un contenedor `card`
+
+### Uso Basico
+
+`Card` incluye titulo, contenido y operaciones.
+
+:::demo Card se compone de cabecera y cuerpo. La cabecera es opcional y la colocación de su  contenido depende de un slot con nombre.
+
+```html
+<el-card class="box-card">
+  <div slot="header" class="clearfix">
+    <span>Card name</span>
+    <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>
+  </div>
+  <div v-for="o in 4" :key="o" class="text item">
+    {{'List item ' + o }}
+  </div>
+</el-card>
+
+<style>
+  .text {
+    font-size: 14px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+  .clearfix:after {
+    clear: both
+  }
+
+  .box-card {
+    width: 480px;
+  }
+</style>
+```
+:::
+
+### Card simple
+
+La parte de la cabecera puede omitirse.
+
+:::demo
+```html
+<el-card class="box-card">
+  <div v-for="o in 4" :key="o" class="text item">
+    {{'List item ' + o }}
+  </div>
+</el-card>
+
+<style>
+  .text {
+    font-size: 14px;
+  }
+
+  .item {
+    padding: 18px 0;
+  }
+
+  .box-card {
+    width: 480px;
+  }
+</style>
+```
+:::
+
+### Con imágenes
+
+Muestre un contenido más rico añadiendo algunas configuraciones.
+
+:::demo El atributo `body-style` define el estilo CSS del `body` personalizado. Este ejemplo también utiliza  `el-col` para el layout.
+
+```html
+<el-row>
+  <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
+    <el-card :body-style="{ padding: '0px' }">
+      <img src="~examples/assets/images/hamburger.png" class="image">
+      <div style="padding: 14px;">
+        <span>Yummy hamburger</span>
+        <div class="bottom clearfix">
+          <time class="time">{{ currentDate }}</time>
+          <el-button type="text" class="button">Operating button</el-button>
+        </div>
+      </div>
+    </el-card>
+  </el-col>
+</el-row>
+
+<style>
+  .time {
+    font-size: 13px;
+    color: #999;
+  }
+  
+  .bottom {
+    margin-top: 13px;
+    line-height: 12px;
+  }
+
+  .button {
+    padding: 0;
+    float: right;
+  }
+
+  .image {
+    width: 100%;
+    display: block;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+      display: table;
+      content: "";
+  }
+  
+  .clearfix:after {
+      clear: both
+  }
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      currentDate: new Date()
+    };
+  }
+}
+</script>
+```
+:::
+
+### Shadow
+
+Puede definir cuándo mostrar las sombras.
+
+:::demo El atributo de sombra determina cuándo se muestran las sombras. Puede ser `always`, `hover` o `never`.
+
+```html
+<el-row :gutter="12">
+  <el-col :span="8">
+    <el-card shadow="always">
+      Always
+    </el-card>
+  </el-col>
+  <el-col :span="8">
+    <el-card shadow="hover">
+      Hover
+    </el-card>
+  </el-col>
+  <el-col :span="8">
+    <el-card shadow="never">
+      Never
+    </el-card>
+  </el-col>
+</el-row>
+```
+:::
+
+### Atributos
+| Atributo   | Descripción                              | Tipo   | Valores aceptados  | Por defecto         |
+| ---------- | ---------------------------------------- | ------ | -----------------  | ------------------- |
+| header     | Titulo del card. También acepta DOM pasado por `slot#header` | string  | —                 | —                   |
+| body-style | Estilo CSS del cuerpo                    | object | —                  | { padding: '20px' } |
+| shadow     | cuando mostrar la sombra del Card | string | always / hover / never | always          |
diff --git a/examples/docs/es/carousel.md b/examples/docs/es/carousel.md
new file mode 100644
index 0000000000..e6ac853567
--- /dev/null
+++ b/examples/docs/es/carousel.md
@@ -0,0 +1,244 @@
+<script>
+  export default {
+    mounted() {
+      this.$nextTick(() => {
+        const demos = document.querySelectorAll('.source');
+        demos[0].style.padding = '0';
+        demos[0].className += ' small';
+        demos[3].className += ' medium';
+      });
+    }
+  }
+</script>
+<style>
+  .demo-carousel .block {
+    padding: 30px;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    display: inline-block;
+    width: 50%;
+    box-sizing: border-box;
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .demo-carousel .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+
+  .demo-carousel .el-carousel__container {
+    text-align: center;
+  }
+
+  .demo-carousel .el-carousel__item {
+    h3 {
+      color: #fff;
+      font-size: 18px;
+      line-height: 300px;
+      margin: 0;
+    }
+    &:nth-child(2n) {
+      background-color: #99a9bf;
+    }
+    &:nth-child(2n+1) {
+      background-color: #d3dce6;
+    }
+  }
+
+  .demo-carousel .small h3 {
+    font-size: 14px;
+    line-height: 150px;
+  }
+
+  .demo-carousel .medium h3 {
+    font-size: 14px;
+    line-height: 200px;
+  }
+</style>
+## Carousel
+
+Presenta una serie de imágenes o textos en un espacio limitado
+
+### Uso básico
+
+:::demo Combine `el-carousel`  con `el-carousel-item`, para conseguir el carrusel. El contenido de cada diapositiva es completamente personalizable, y sólo tiene que colocarla dentro de la etiqueta  `el-carousel-item` . Por defecto, el carrusel cambia cuando el ratón pasa por encima de un indicador. Fije  `trigger`  para  `click`, si lo que se desea es que el carrusel cambie sólo cuando se haga clic en un indicador.
+
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Switch when indicator is hovered (default)</span>
+    <el-carousel height="150px">
+      <el-carousel-item v-for="item in 4" :key="item">
+        <h3>{{ item }}</h3>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+  <div class="block">
+    <span class="demonstration">Switch when indicator is clicked</span>
+    <el-carousel trigger="click" height="150px">
+      <el-carousel-item v-for="item in 4" :key="item">
+        <h3>{{ item }}</h3>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 150px;
+    margin: 0;
+  }
+
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
+### Indicadores
+
+Los indicadores de paginacion pueden mostrarse fuera del carrusel
+
+:::demo El atributo  `indicator-position`  determina dónde se encuentran los indicadores de paginación. Por defecto están dentro del carrusel, y el ajuste de `indicator-position`  a `outside`  los mueve hacia fuera; en cambio `indicator-position`  a `none`  los oculta.
+
+```html
+<template>
+  <el-carousel indicator-position="outside">
+    <el-carousel-item v-for="item in 4" :key="item">
+      <h3>{{ item }}</h3>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 18px;
+    opacity: 0.75;
+    line-height: 300px;
+    margin: 0;
+  }
+
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
+### Flechas
+
+Puede definir cuando se visualizan las flechas
+
+:::demo El atributo `arrow` determina cuándo se visualizan las flechas. Por defecto aparecen cuando el ratón se desplaza sobre el carrusel. Ajuste `arrow` a `always` o `never` para mostrar u ocultar las flechas permanentemente.
+
+```html
+<template>
+  <el-carousel :interval="5000" arrow="always">
+    <el-carousel-item v-for="item in 4" :key="item">
+      <h3>{{ item }}</h3>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 18px;
+    opacity: 0.75;
+    line-height: 300px;
+    margin: 0;
+  }
+
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
+### Modo Card
+
+Cuando una página es suficientemente ancha pero tiene una altura limitada, puede activar el modo `card` para carrusel.
+
+:::demo Ajuste `type` a `card` para activar el modo tarjeta. Aparte de la apariencia, la mayor diferencia entre el modo tarjeta y el modo común es que al hacer clic en las diapositivas de ambos lados, el carrusel cambia directamente en modo tarjeta.
+
+```html
+<template>
+  <el-carousel :interval="4000" type="card" height="200px">
+    <el-carousel-item v-for="item in 6" :key="item">
+      <h3>{{ item }}</h3>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 200px;
+    margin: 0;
+  }
+
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
+### Atributos de Carousel
+| Atributo           | Descripcion                              | Tipo    | Valores aceptados  | Por defecto |
+| ------------------ | ---------------------------------------- | ------- | ------------------ | ----------- |
+| height             | Alto del carrusel                        | string  | —                  | —           |
+| initial-index      | Indice del slider inicial activo (empieza desde 0) | number  | —                  | 0           |
+| trigger            | Evento que muestra los indicadores       | string  | hover/click        | hover       |
+| autoplay           | Si se enlazan automáticamente las diapositivas | boolean | —                  | true        |
+| interval           | Intervalo del auto loop, en milisegundos | number  | —                  | 3000        |
+| indicator-position | Posición del indicador de paginación     | string  | outside/none       | —           |
+| arrow              | Cuando se muestran las flechas           | string  | always/hover/never | hover       |
+| type               | Tipo de carrusel                         | string  | card               | —           |
+
+### Eventos de Carousel
+| Nombre evento | Descripción                              | Parametros                               |
+| ------------- | ---------------------------------------- | ---------------------------------------- |
+| change        | Se dispara cuando el slider activo cambia | Indice del nuevo slider activo, indice del anterior slider activo. |
+
+### Metodos de Carousel
+| Metodos       | Descripción                | Parametros                               |
+| ------------- | -------------------------- | ---------------------------------------- |
+| setActiveItem | Cambio manual de slider    | indice del slider al que se va a cambiar, empezando por 0; o el `name` del `el-carousel-item` correspondiente |
+| prev          | Cambia al slider anterior  | —                                        |
+| next          | Cambia al slider siguiente | —                                        |
+
+### Atributos de Carousel-Item
+| Atributo | Descripción                              | Tipo   | Valores aceptados | Por defecto |
+| -------- | ---------------------------------------- | ------ | ----------------- | ----------- |
+| name     | Nombre del item que puede ser usado en `setActiveItem` | string | —                 | —           |
+| label    | Texto que se mostrara en el indicador de paginacion correspondiente | string | —                 | —           |
+
diff --git a/examples/docs/es/cascader.md b/examples/docs/es/cascader.md
new file mode 100644
index 0000000000..2ece17d59d
--- /dev/null
+++ b/examples/docs/es/cascader.md
@@ -0,0 +1,1705 @@
+<script>
+  export default {
+    data() {
+      return {
+        options2: [{
+          label: 'California',
+          cities: []
+        }, {
+          label: 'Florida',
+          cities: []
+        }],
+        props: {
+          value: 'label',
+          children: 'cities'
+        },
+        options: [{
+          value: 'guide',
+          label: 'Guide',
+          children: [{
+            value: 'disciplines',
+            label: 'Disciplines',
+            children: [{
+              value: 'consistency',
+              label: 'Consistency'
+            }, {
+              value: 'feedback',
+              label: 'Feedback'
+            }, {
+              value: 'efficiency',
+              label: 'Efficiency'
+            }, {
+              value: 'controllability',
+              label: 'Controllability'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'side nav',
+              label: 'Side Navigation'
+            }, {
+              value: 'top nav',
+              label: 'Top Navigation'
+            }]
+          }]
+        }, {
+          value: 'component',
+          label: 'Component',
+          children: [{
+            value: 'basic',
+            label: 'Basic',
+            children: [{
+              value: 'layout',
+              label: 'Layout'
+            }, {
+              value: 'color',
+              label: 'Color'
+            }, {
+              value: 'typography',
+              label: 'Typography'
+            }, {
+              value: 'icon',
+              label: 'Icon'
+            }, {
+              value: 'button',
+              label: 'Button'
+            }]
+          }, {
+            value: 'form',
+            label: 'Form',
+            children: [{
+              value: 'radio',
+              label: 'Radio'
+            }, {
+              value: 'checkbox',
+              label: 'Checkbox'
+            }, {
+              value: 'input',
+              label: 'Input'
+            }, {
+              value: 'input-number',
+              label: 'InputNumber'
+            }, {
+              value: 'select',
+              label: 'Select'
+            }, {
+              value: 'cascader',
+              label: 'Cascader'
+            }, {
+              value: 'switch',
+              label: 'Switch'
+            }, {
+              value: 'slider',
+              label: 'Slider'
+            }, {
+              value: 'time-picker',
+              label: 'TimePicker'
+            }, {
+              value: 'date-picker',
+              label: 'DatePicker'
+            }, {
+              value: 'datetime-picker',
+              label: 'DateTimePicker'
+            }, {
+              value: 'upload',
+              label: 'Upload'
+            }, {
+              value: 'rate',
+              label: 'Rate'
+            }, {
+              value: 'form',
+              label: 'Form'
+            }]
+          }, {
+            value: 'data',
+            label: 'Data',
+            children: [{
+              value: 'table',
+              label: 'Table'
+            }, {
+              value: 'tag',
+              label: 'Tag'
+            }, {
+              value: 'progress',
+              label: 'Progress'
+            }, {
+              value: 'tree',
+              label: 'Tree'
+            }, {
+              value: 'pagination',
+              label: 'Pagination'
+            }, {
+              value: 'badge',
+              label: 'Badge'
+            }]
+          }, {
+            value: 'notice',
+            label: 'Notice',
+            children: [{
+              value: 'alert',
+              label: 'Alert'
+            }, {
+              value: 'loading',
+              label: 'Loading'
+            }, {
+              value: 'message',
+              label: 'Message'
+            }, {
+              value: 'message-box',
+              label: 'MessageBox'
+            }, {
+              value: 'notification',
+              label: 'Notification'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'menu',
+              label: 'NavMenu'
+            }, {
+              value: 'tabs',
+              label: 'Tabs'
+            }, {
+              value: 'breadcrumb',
+              label: 'Breadcrumb'
+            }, {
+              value: 'dropdown',
+              label: 'Dropdown'
+            }, {
+              value: 'steps',
+              label: 'Steps'
+            }]
+          }, {
+            value: 'others',
+            label: 'Others',
+            children: [{
+              value: 'dialog',
+              label: 'Dialog'
+            }, {
+              value: 'tooltip',
+              label: 'Tooltip'
+            }, {
+              value: 'popover',
+              label: 'Popover'
+            }, {
+              value: 'card',
+              label: 'Card'
+            }, {
+              value: 'carousel',
+              label: 'Carousel'
+            }, {
+              value: 'collapse',
+              label: 'Collapse'
+            }]
+          }]
+        }, {
+          value: 'resource',
+          label: 'Resource',
+          children: [{
+            value: 'axure',
+            label: 'Axure Components'
+          }, {
+            value: 'sketch',
+            label: 'Sketch Templates'
+          }, {
+            value: 'docs',
+            label: 'Design Documentation'
+          }]
+        }],
+        optionsWithDisabled: [],
+        selectedOptions: [],
+        selectedOptions2: [],
+        selectedOptions3: ['component', 'data', 'tag']
+      };
+    },
+    created() {
+      this.optionsWithDisabled = JSON.parse(JSON.stringify(this.options));
+      this.optionsWithDisabled[0].disabled = true;
+    },
+    mounted() {
+      this.$nextTick(() => {
+        const demos = document.querySelectorAll('.source');
+        demos[0].style.padding = '0';
+        demos[demos.length - 1].style.padding = '0';
+      });
+    },
+    methods: {
+      handleItemChange(val) {
+        console.log('active item:', val);
+        setTimeout(_ => {
+          if (val.indexOf('California') > -1 && !this.options2[0].cities.length) {
+            this.options2[0].cities = [{
+              label: 'Los Angeles'
+            }];
+          } else if (val.indexOf('Florida') > -1 && !this.options2[1].cities.length) {
+            this.options2[1].cities = [{
+              label: 'Orlando'
+            }];
+          }
+        }, 300);
+      },
+      handleChange(value) {
+        console.log(value);
+      }
+    }
+  };
+</script>
+
+<style>
+  .demo-cascader {
+    .el-cascader {
+      width: 222px;
+    }
+  }
+  .demo-cascader-size {
+    .el-cascader {
+      vertical-align: top;
+      margin-right: 15px;
+    }
+  }
+  .demo-cascader .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    display: inline-block;
+    width: 50%;
+    box-sizing: border-box;
+    &:last-child {
+      border-right: none;
+    }
+  }
+  .demo-cascader .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+</style>
+
+## Cascader
+
+Si las opciones tienen una estructura jerárquica clara, Cascader puede utilizarse para visualizarlas y seleccionarlas.
+
+### Uso básico
+
+Existen dos maneras de expandir los elementos hijo de la opción.
+
+:::demo Al asignar al atributo `options` un array de opciones, se genera un Cascader. El atributo `expand-trigger` define cómo se expanden las opciones hijo. Este ejemplo también muestra el evento `change` , cuyo parámetro es el valor de Cascader, un array formado por los valores de cada nivel seleccionado.
+
+```html
+<div class="block">
+  <span class="demonstration">Child options expand when clicked (default)</span>
+  <el-cascader
+    :options="options"
+    v-model="selectedOptions"
+    @change="handleChange">
+  </el-cascader>
+</div>
+<div class="block">
+  <span class="demonstration">Child options expand when hovered</span>
+  <el-cascader
+    expand-trigger="hover"
+    :options="options"
+    v-model="selectedOptions2"
+    @change="handleChange">
+  </el-cascader>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'guide',
+          label: 'Guide',
+          children: [{
+            value: 'disciplines',
+            label: 'Disciplines',
+            children: [{
+              value: 'consistency',
+              label: 'Consistency'
+            }, {
+              value: 'feedback',
+              label: 'Feedback'
+            }, {
+              value: 'efficiency',
+              label: 'Efficiency'
+            }, {
+              value: 'controllability',
+              label: 'Controllability'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'side nav',
+              label: 'Side Navigation'
+            }, {
+              value: 'top nav',
+              label: 'Top Navigation'
+            }]
+          }]
+        }, {
+          value: 'component',
+          label: 'Component',
+          children: [{
+            value: 'basic',
+            label: 'Basic',
+            children: [{
+              value: 'layout',
+              label: 'Layout'
+            }, {
+              value: 'color',
+              label: 'Color'
+            }, {
+              value: 'typography',
+              label: 'Typography'
+            }, {
+              value: 'icon',
+              label: 'Icon'
+            }, {
+              value: 'button',
+              label: 'Button'
+            }]
+          }, {
+            value: 'form',
+            label: 'Form',
+            children: [{
+              value: 'radio',
+              label: 'Radio'
+            }, {
+              value: 'checkbox',
+              label: 'Checkbox'
+            }, {
+              value: 'input',
+              label: 'Input'
+            }, {
+              value: 'input-number',
+              label: 'InputNumber'
+            }, {
+              value: 'select',
+              label: 'Select'
+            }, {
+              value: 'cascader',
+              label: 'Cascader'
+            }, {
+              value: 'switch',
+              label: 'Switch'
+            }, {
+              value: 'slider',
+              label: 'Slider'
+            }, {
+              value: 'time-picker',
+              label: 'TimePicker'
+            }, {
+              value: 'date-picker',
+              label: 'DatePicker'
+            }, {
+              value: 'datetime-picker',
+              label: 'DateTimePicker'
+            }, {
+              value: 'upload',
+              label: 'Upload'
+            }, {
+              value: 'rate',
+              label: 'Rate'
+            }, {
+              value: 'form',
+              label: 'Form'
+            }]
+          }, {
+            value: 'data',
+            label: 'Data',
+            children: [{
+              value: 'table',
+              label: 'Table'
+            }, {
+              value: 'tag',
+              label: 'Tag'
+            }, {
+              value: 'progress',
+              label: 'Progress'
+            }, {
+              value: 'tree',
+              label: 'Tree'
+            }, {
+              value: 'pagination',
+              label: 'Pagination'
+            }, {
+              value: 'badge',
+              label: 'Badge'
+            }]
+          }, {
+            value: 'notice',
+            label: 'Notice',
+            children: [{
+              value: 'alert',
+              label: 'Alert'
+            }, {
+              value: 'loading',
+              label: 'Loading'
+            }, {
+              value: 'message',
+              label: 'Message'
+            }, {
+              value: 'message-box',
+              label: 'MessageBox'
+            }, {
+              value: 'notification',
+              label: 'Notification'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'menu',
+              label: 'NavMenu'
+            }, {
+              value: 'tabs',
+              label: 'Tabs'
+            }, {
+              value: 'breadcrumb',
+              label: 'Breadcrumb'
+            }, {
+              value: 'dropdown',
+              label: 'Dropdown'
+            }, {
+              value: 'steps',
+              label: 'Steps'
+            }]
+          }, {
+            value: 'others',
+            label: 'Others',
+            children: [{
+              value: 'dialog',
+              label: 'Dialog'
+            }, {
+              value: 'tooltip',
+              label: 'Tooltip'
+            }, {
+              value: 'popover',
+              label: 'Popover'
+            }, {
+              value: 'card',
+              label: 'Card'
+            }, {
+              value: 'carousel',
+              label: 'Carousel'
+            }, {
+              value: 'collapse',
+              label: 'Collapse'
+            }]
+          }]
+        }, {
+          value: 'resource',
+          label: 'Resource',
+          children: [{
+            value: 'axure',
+            label: 'Axure Components'
+          }, {
+            value: 'sketch',
+            label: 'Sketch Templates'
+          }, {
+            value: 'docs',
+            label: 'Design Documentation'
+          }]
+        }],
+        selectedOptions: [],
+        selectedOptions2: []
+      };
+    },
+    methods: {
+      handleChange(value) {
+        console.log(value);
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Opcion Disabled
+
+Para desactivar una opción configure un campo `disabled` en el objeto de opción.
+
+:::demo En este ejemplo, el primer elemento del array `options` tiene un campo  `disabled: true` , por lo que está desactivado. Por defecto, Cascader verifica el campo `disabled` en cada objeto de opción; si está utilizando otro nombre de campo para indicar si una opción está deshabilitada, puede asignarla en el atributo `props` (consulte la tabla API a continuación para obtener más detalles). Y por supuesto, el valor de `value`, `label` y `children` también se pueden personalizar de la misma manera.
+
+```html
+<el-cascader
+  :options="optionsWithDisabled"
+></el-cascader>
+<script>
+  export default {
+    data() {
+      return {
+        optionsWithDisabled: [{
+          value: 'guide',
+          label: 'Guide',
+          disabled: true,
+          children: [{
+            value: 'disciplines',
+            label: 'Disciplines',
+            children: [{
+              value: 'consistency',
+              label: 'Consistency'
+            }, {
+              value: 'feedback',
+              label: 'Feedback'
+            }, {
+              value: 'efficiency',
+              label: 'Efficiency'
+            }, {
+              value: 'controllability',
+              label: 'Controllability'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'side nav',
+              label: 'Side Navigation'
+            }, {
+              value: 'top nav',
+              label: 'Top Navigation'
+            }]
+          }]
+        }, {
+          value: 'component',
+          label: 'Component',
+          children: [{
+            value: 'basic',
+            label: 'Basic',
+            children: [{
+              value: 'layout',
+              label: 'Layout'
+            }, {
+              value: 'color',
+              label: 'Color'
+            }, {
+              value: 'typography',
+              label: 'Typography'
+            }, {
+              value: 'icon',
+              label: 'Icon'
+            }, {
+              value: 'button',
+              label: 'Button'
+            }]
+          }, {
+            value: 'form',
+            label: 'Form',
+            children: [{
+              value: 'radio',
+              label: 'Radio'
+            }, {
+              value: 'checkbox',
+              label: 'Checkbox'
+            }, {
+              value: 'input',
+              label: 'Input'
+            }, {
+              value: 'input-number',
+              label: 'InputNumber'
+            }, {
+              value: 'select',
+              label: 'Select'
+            }, {
+              value: 'cascader',
+              label: 'Cascader'
+            }, {
+              value: 'switch',
+              label: 'Switch'
+            }, {
+              value: 'slider',
+              label: 'Slider'
+            }, {
+              value: 'time-picker',
+              label: 'TimePicker'
+            }, {
+              value: 'date-picker',
+              label: 'DatePicker'
+            }, {
+              value: 'datetime-picker',
+              label: 'DateTimePicker'
+            }, {
+              value: 'upload',
+              label: 'Upload'
+            }, {
+              value: 'rate',
+              label: 'Rate'
+            }, {
+              value: 'form',
+              label: 'Form'
+            }]
+          }, {
+            value: 'data',
+            label: 'Data',
+            children: [{
+              value: 'table',
+              label: 'Table'
+            }, {
+              value: 'tag',
+              label: 'Tag'
+            }, {
+              value: 'progress',
+              label: 'Progress'
+            }, {
+              value: 'tree',
+              label: 'Tree'
+            }, {
+              value: 'pagination',
+              label: 'Pagination'
+            }, {
+              value: 'badge',
+              label: 'Badge'
+            }]
+          }, {
+            value: 'notice',
+            label: 'Notice',
+            children: [{
+              value: 'alert',
+              label: 'Alert'
+            }, {
+              value: 'loading',
+              label: 'Loading'
+            }, {
+              value: 'message',
+              label: 'Message'
+            }, {
+              value: 'message-box',
+              label: 'MessageBox'
+            }, {
+              value: 'notification',
+              label: 'Notification'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'menu',
+              label: 'NavMenu'
+            }, {
+              value: 'tabs',
+              label: 'Tabs'
+            }, {
+              value: 'breadcrumb',
+              label: 'Breadcrumb'
+            }, {
+              value: 'dropdown',
+              label: 'Dropdown'
+            }, {
+              value: 'steps',
+              label: 'Steps'
+            }]
+          }, {
+            value: 'others',
+            label: 'Others',
+            children: [{
+              value: 'dialog',
+              label: 'Dialog'
+            }, {
+              value: 'tooltip',
+              label: 'Tooltip'
+            }, {
+              value: 'popover',
+              label: 'Popover'
+            }, {
+              value: 'card',
+              label: 'Card'
+            }, {
+              value: 'carousel',
+              label: 'Carousel'
+            }, {
+              value: 'collapse',
+              label: 'Collapse'
+            }]
+          }]
+        }, {
+          value: 'resource',
+          label: 'Resource',
+          children: [{
+            value: 'axure',
+            label: 'Axure Components'
+          }, {
+            value: 'sketch',
+            label: 'Sketch Templates'
+          }, {
+            value: 'docs',
+            label: 'Design Documentation'
+          }]
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Mostrar sólo el último nivel
+
+Puede mostrar sólo el último nivel en lugar de todos los niveles.
+
+:::demo El atributo `show-all-levels` define si se visualizan todos los niveles. Si es `false`, sólo se muestra el último nivel.
+
+```html
+<el-cascader
+    :options="options"
+    :show-all-levels="false"
+></el-cascader>
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'guide',
+          label: 'Guide',
+          children: [{
+            value: 'disciplines',
+            label: 'Disciplines',
+            children: [{
+              value: 'consistency',
+              label: 'Consistency'
+            }, {
+              value: 'feedback',
+              label: 'Feedback'
+            }, {
+              value: 'efficiency',
+              label: 'Efficiency'
+            }, {
+              value: 'controllability',
+              label: 'Controllability'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'side nav',
+              label: 'Side Navigation'
+            }, {
+              value: 'top nav',
+              label: 'Top Navigation'
+            }]
+          }]
+        }, {
+          value: 'component',
+          label: 'Component',
+          children: [{
+            value: 'basic',
+            label: 'Basic',
+            children: [{
+              value: 'layout',
+              label: 'Layout'
+            }, {
+              value: 'color',
+              label: 'Color'
+            }, {
+              value: 'typography',
+              label: 'Typography'
+            }, {
+              value: 'icon',
+              label: 'Icon'
+            }, {
+              value: 'button',
+              label: 'Button'
+            }]
+          }, {
+            value: 'form',
+            label: 'Form',
+            children: [{
+              value: 'radio',
+              label: 'Radio'
+            }, {
+              value: 'checkbox',
+              label: 'Checkbox'
+            }, {
+              value: 'input',
+              label: 'Input'
+            }, {
+              value: 'input-number',
+              label: 'InputNumber'
+            }, {
+              value: 'select',
+              label: 'Select'
+            }, {
+              value: 'cascader',
+              label: 'Cascader'
+            }, {
+              value: 'switch',
+              label: 'Switch'
+            }, {
+              value: 'slider',
+              label: 'Slider'
+            }, {
+              value: 'time-picker',
+              label: 'TimePicker'
+            }, {
+              value: 'date-picker',
+              label: 'DatePicker'
+            }, {
+              value: 'datetime-picker',
+              label: 'DateTimePicker'
+            }, {
+              value: 'upload',
+              label: 'Upload'
+            }, {
+              value: 'rate',
+              label: 'Rate'
+            }, {
+              value: 'form',
+              label: 'Form'
+            }]
+          }, {
+            value: 'data',
+            label: 'Data',
+            children: [{
+              value: 'table',
+              label: 'Table'
+            }, {
+              value: 'tag',
+              label: 'Tag'
+            }, {
+              value: 'progress',
+              label: 'Progress'
+            }, {
+              value: 'tree',
+              label: 'Tree'
+            }, {
+              value: 'pagination',
+              label: 'Pagination'
+            }, {
+              value: 'badge',
+              label: 'Badge'
+            }]
+          }, {
+            value: 'notice',
+            label: 'Notice',
+            children: [{
+              value: 'alert',
+              label: 'Alert'
+            }, {
+              value: 'loading',
+              label: 'Loading'
+            }, {
+              value: 'message',
+              label: 'Message'
+            }, {
+              value: 'message-box',
+              label: 'MessageBox'
+            }, {
+              value: 'notification',
+              label: 'Notification'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'menu',
+              label: 'NavMenu'
+            }, {
+              value: 'tabs',
+              label: 'Tabs'
+            }, {
+              value: 'breadcrumb',
+              label: 'Breadcrumb'
+            }, {
+              value: 'dropdown',
+              label: 'Dropdown'
+            }, {
+              value: 'steps',
+              label: 'Steps'
+            }]
+          }, {
+            value: 'others',
+            label: 'Others',
+            children: [{
+              value: 'dialog',
+              label: 'Dialog'
+            }, {
+              value: 'tooltip',
+              label: 'Tooltip'
+            }, {
+              value: 'popover',
+              label: 'Popover'
+            }, {
+              value: 'card',
+              label: 'Card'
+            }, {
+              value: 'carousel',
+              label: 'Carousel'
+            }, {
+              value: 'collapse',
+              label: 'Collapse'
+            }]
+          }]
+        }, {
+          value: 'resource',
+          label: 'Resource',
+          children: [{
+            value: 'axure',
+            label: 'Axure Components'
+          }, {
+            value: 'sketch',
+            label: 'Sketch Templates'
+          }, {
+            value: 'docs',
+            label: 'Design Documentation'
+          }]
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Con valor por defecto
+
+:::demo El valor por defecto se puede definir con un array.
+```html
+<el-cascader
+  :options="options"
+  v-model="selectedOptions3"
+></el-cascader>
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'guide',
+          label: 'Guide',
+          children: [{
+            value: 'disciplines',
+            label: 'Disciplines',
+            children: [{
+              value: 'consistency',
+              label: 'Consistency'
+            }, {
+              value: 'feedback',
+              label: 'Feedback'
+            }, {
+              value: 'efficiency',
+              label: 'Efficiency'
+            }, {
+              value: 'controllability',
+              label: 'Controllability'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'side nav',
+              label: 'Side Navigation'
+            }, {
+              value: 'top nav',
+              label: 'Top Navigation'
+            }]
+          }]
+        }, {
+          value: 'component',
+          label: 'Component',
+          children: [{
+            value: 'basic',
+            label: 'Basic',
+            children: [{
+              value: 'layout',
+              label: 'Layout'
+            }, {
+              value: 'color',
+              label: 'Color'
+            }, {
+              value: 'typography',
+              label: 'Typography'
+            }, {
+              value: 'icon',
+              label: 'Icon'
+            }, {
+              value: 'button',
+              label: 'Button'
+            }]
+          }, {
+            value: 'form',
+            label: 'Form',
+            children: [{
+              value: 'radio',
+              label: 'Radio'
+            }, {
+              value: 'checkbox',
+              label: 'Checkbox'
+            }, {
+              value: 'input',
+              label: 'Input'
+            }, {
+              value: 'input-number',
+              label: 'InputNumber'
+            }, {
+              value: 'select',
+              label: 'Select'
+            }, {
+              value: 'cascader',
+              label: 'Cascader'
+            }, {
+              value: 'switch',
+              label: 'Switch'
+            }, {
+              value: 'slider',
+              label: 'Slider'
+            }, {
+              value: 'time-picker',
+              label: 'TimePicker'
+            }, {
+              value: 'date-picker',
+              label: 'DatePicker'
+            }, {
+              value: 'datetime-picker',
+              label: 'DateTimePicker'
+            }, {
+              value: 'upload',
+              label: 'Upload'
+            }, {
+              value: 'rate',
+              label: 'Rate'
+            }, {
+              value: 'form',
+              label: 'Form'
+            }]
+          }, {
+            value: 'data',
+            label: 'Data',
+            children: [{
+              value: 'table',
+              label: 'Table'
+            }, {
+              value: 'tag',
+              label: 'Tag'
+            }, {
+              value: 'progress',
+              label: 'Progress'
+            }, {
+              value: 'tree',
+              label: 'Tree'
+            }, {
+              value: 'pagination',
+              label: 'Pagination'
+            }, {
+              value: 'badge',
+              label: 'Badge'
+            }]
+          }, {
+            value: 'notice',
+            label: 'Notice',
+            children: [{
+              value: 'alert',
+              label: 'Alert'
+            }, {
+              value: 'loading',
+              label: 'Loading'
+            }, {
+              value: 'message',
+              label: 'Message'
+            }, {
+              value: 'message-box',
+              label: 'MessageBox'
+            }, {
+              value: 'notification',
+              label: 'Notification'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'menu',
+              label: 'NavMenu'
+            }, {
+              value: 'tabs',
+              label: 'Tabs'
+            }, {
+              value: 'breadcrumb',
+              label: 'Breadcrumb'
+            }, {
+              value: 'dropdown',
+              label: 'Dropdown'
+            }, {
+              value: 'steps',
+              label: 'Steps'
+            }]
+          }, {
+            value: 'others',
+            label: 'Others',
+            children: [{
+              value: 'dialog',
+              label: 'Dialog'
+            }, {
+              value: 'tooltip',
+              label: 'Tooltip'
+            }, {
+              value: 'popover',
+              label: 'Popover'
+            }, {
+              value: 'card',
+              label: 'Card'
+            }, {
+              value: 'carousel',
+              label: 'Carousel'
+            }, {
+              value: 'collapse',
+              label: 'Collapse'
+            }]
+          }]
+        }, {
+          value: 'resource',
+          label: 'Resource',
+          children: [{
+            value: 'axure',
+            label: 'Axure Components'
+          }, {
+            value: 'sketch',
+            label: 'Sketch Templates'
+          }, {
+            value: 'docs',
+            label: 'Design Documentation'
+          }]
+        }],
+        selectedOptions3: ['component', 'data', 'tag']
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Change on select
+
+También se pueden seleccionar las opciones del elemento padre.
+
+:::demo Por defecto sólo se pueden seleccionar las opciones del último nivel. Al asignar `change-on-select` a `true`, también se pueden seleccionar opciones en los niveles superiores.
+
+```html
+<el-cascader
+  :options="options"
+  change-on-select
+></el-cascader>
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'guide',
+          label: 'Guide',
+          children: [{
+            value: 'disciplines',
+            label: 'Disciplines',
+            children: [{
+              value: 'consistency',
+              label: 'Consistency'
+            }, {
+              value: 'feedback',
+              label: 'Feedback'
+            }, {
+              value: 'efficiency',
+              label: 'Efficiency'
+            }, {
+              value: 'controllability',
+              label: 'Controllability'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'side nav',
+              label: 'Side Navigation'
+            }, {
+              value: 'top nav',
+              label: 'Top Navigation'
+            }]
+          }]
+        }, {
+          value: 'component',
+          label: 'Component',
+          children: [{
+            value: 'basic',
+            label: 'Basic',
+            children: [{
+              value: 'layout',
+              label: 'Layout'
+            }, {
+              value: 'color',
+              label: 'Color'
+            }, {
+              value: 'typography',
+              label: 'Typography'
+            }, {
+              value: 'icon',
+              label: 'Icon'
+            }, {
+              value: 'button',
+              label: 'Button'
+            }]
+          }, {
+            value: 'form',
+            label: 'Form',
+            children: [{
+              value: 'radio',
+              label: 'Radio'
+            }, {
+              value: 'checkbox',
+              label: 'Checkbox'
+            }, {
+              value: 'input',
+              label: 'Input'
+            }, {
+              value: 'input-number',
+              label: 'InputNumber'
+            }, {
+              value: 'select',
+              label: 'Select'
+            }, {
+              value: 'cascader',
+              label: 'Cascader'
+            }, {
+              value: 'switch',
+              label: 'Switch'
+            }, {
+              value: 'slider',
+              label: 'Slider'
+            }, {
+              value: 'time-picker',
+              label: 'TimePicker'
+            }, {
+              value: 'date-picker',
+              label: 'DatePicker'
+            }, {
+              value: 'datetime-picker',
+              label: 'DateTimePicker'
+            }, {
+              value: 'upload',
+              label: 'Upload'
+            }, {
+              value: 'rate',
+              label: 'Rate'
+            }, {
+              value: 'form',
+              label: 'Form'
+            }]
+          }, {
+            value: 'data',
+            label: 'Data',
+            children: [{
+              value: 'table',
+              label: 'Table'
+            }, {
+              value: 'tag',
+              label: 'Tag'
+            }, {
+              value: 'progress',
+              label: 'Progress'
+            }, {
+              value: 'tree',
+              label: 'Tree'
+            }, {
+              value: 'pagination',
+              label: 'Pagination'
+            }, {
+              value: 'badge',
+              label: 'Badge'
+            }]
+          }, {
+            value: 'notice',
+            label: 'Notice',
+            children: [{
+              value: 'alert',
+              label: 'Alert'
+            }, {
+              value: 'loading',
+              label: 'Loading'
+            }, {
+              value: 'message',
+              label: 'Message'
+            }, {
+              value: 'message-box',
+              label: 'MessageBox'
+            }, {
+              value: 'notification',
+              label: 'Notification'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'menu',
+              label: 'NavMenu'
+            }, {
+              value: 'tabs',
+              label: 'Tabs'
+            }, {
+              value: 'breadcrumb',
+              label: 'Breadcrumb'
+            }, {
+              value: 'dropdown',
+              label: 'Dropdown'
+            }, {
+              value: 'steps',
+              label: 'Steps'
+            }]
+          }, {
+            value: 'others',
+            label: 'Others',
+            children: [{
+              value: 'dialog',
+              label: 'Dialog'
+            }, {
+              value: 'tooltip',
+              label: 'Tooltip'
+            }, {
+              value: 'popover',
+              label: 'Popover'
+            }, {
+              value: 'card',
+              label: 'Card'
+            }, {
+              value: 'carousel',
+              label: 'Carousel'
+            }, {
+              value: 'collapse',
+              label: 'Collapse'
+            }]
+          }]
+        }, {
+          value: 'resource',
+          label: 'Resource',
+          children: [{
+            value: 'axure',
+            label: 'Axure Components'
+          }, {
+            value: 'sketch',
+            label: 'Sketch Templates'
+          }, {
+            value: 'docs',
+            label: 'Design Documentation'
+          }]
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Carga dinamica de elementos hijos
+
+Se puede hacer una carga dinamica de elementos hijos cuando se hace clic en el elemento padre o se pasa el ratón sobre el.
+
+:::demo En este ejemplo, el array de opciones no tiene datos de ciudades cuando se inicializa. Con el evento `active-item-change`, puede cargar dinámicamente las ciudades de un estado específico. Además, este ejemplo también demuestra cómo se utilizan los`props`.
+
+```html
+<el-cascader
+  :options="options2"
+  @active-item-change="handleItemChange"
+  :props="props"
+></el-cascader>
+
+<script>
+  export default {
+    data() {
+      return {
+        options2: [{
+          label: 'California',
+          cities: []
+        }, {
+          label: 'Florida',
+          cities: []
+        }],
+        props: {
+          value: 'label',
+          children: 'cities'
+        }
+      };
+    },
+
+    methods: {
+      handleItemChange(val) {
+        console.log('active item:', val);
+        setTimeout(_ => {
+          if (val.indexOf('California') > -1 && !this.options2[0].cities.length) {
+            this.options2[0].cities = [{
+              label: 'Los Angeles'
+            }];
+          } else if (val.indexOf('Florida') > -1 && !this.options2[1].cities.length) {
+            this.options2[1].cities = [{
+              label: 'Orlando'
+            }];
+          }
+        }, 300);
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Filtrable
+
+Buscar y seleccionar opciones con una palabra clave.
+
+:::demo Añadir `filterable` a `el-cascader` permite filtrar
+
+```html
+<div class="block">
+  <span class="demonstration">Only options of the last level can be selected</span>
+  <el-cascader
+    placeholder="Try searching: Guide"
+    :options="options"
+    filterable
+  ></el-cascader>
+</div>
+<div class="block">
+  <span class="demonstration">Options of all levels can be selected</span>
+  <el-cascader
+    placeholder="Try searching: Guide"
+    :options="options"
+    filterable
+    change-on-select
+  ></el-cascader>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'guide',
+          label: 'Guide',
+          children: [{
+            value: 'disciplines',
+            label: 'Disciplines',
+            children: [{
+              value: 'consistency',
+              label: 'Consistency'
+            }, {
+              value: 'feedback',
+              label: 'Feedback'
+            }, {
+              value: 'efficiency',
+              label: 'Efficiency'
+            }, {
+              value: 'controllability',
+              label: 'Controllability'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'side nav',
+              label: 'Side Navigation'
+            }, {
+              value: 'top nav',
+              label: 'Top Navigation'
+            }]
+          }]
+        }, {
+          value: 'component',
+          label: 'Component',
+          children: [{
+            value: 'basic',
+            label: 'Basic',
+            children: [{
+              value: 'layout',
+              label: 'Layout'
+            }, {
+              value: 'color',
+              label: 'Color'
+            }, {
+              value: 'typography',
+              label: 'Typography'
+            }, {
+              value: 'icon',
+              label: 'Icon'
+            }, {
+              value: 'button',
+              label: 'Button'
+            }]
+          }, {
+            value: 'form',
+            label: 'Form',
+            children: [{
+              value: 'radio',
+              label: 'Radio'
+            }, {
+              value: 'checkbox',
+              label: 'Checkbox'
+            }, {
+              value: 'input',
+              label: 'Input'
+            }, {
+              value: 'input-number',
+              label: 'InputNumber'
+            }, {
+              value: 'select',
+              label: 'Select'
+            }, {
+              value: 'cascader',
+              label: 'Cascader'
+            }, {
+              value: 'switch',
+              label: 'Switch'
+            }, {
+              value: 'slider',
+              label: 'Slider'
+            }, {
+              value: 'time-picker',
+              label: 'TimePicker'
+            }, {
+              value: 'date-picker',
+              label: 'DatePicker'
+            }, {
+              value: 'datetime-picker',
+              label: 'DateTimePicker'
+            }, {
+              value: 'upload',
+              label: 'Upload'
+            }, {
+              value: 'rate',
+              label: 'Rate'
+            }, {
+              value: 'form',
+              label: 'Form'
+            }]
+          }, {
+            value: 'data',
+            label: 'Data',
+            children: [{
+              value: 'table',
+              label: 'Table'
+            }, {
+              value: 'tag',
+              label: 'Tag'
+            }, {
+              value: 'progress',
+              label: 'Progress'
+            }, {
+              value: 'tree',
+              label: 'Tree'
+            }, {
+              value: 'pagination',
+              label: 'Pagination'
+            }, {
+              value: 'badge',
+              label: 'Badge'
+            }]
+          }, {
+            value: 'notice',
+            label: 'Notice',
+            children: [{
+              value: 'alert',
+              label: 'Alert'
+            }, {
+              value: 'loading',
+              label: 'Loading'
+            }, {
+              value: 'message',
+              label: 'Message'
+            }, {
+              value: 'message-box',
+              label: 'MessageBox'
+            }, {
+              value: 'notification',
+              label: 'Notification'
+            }]
+          }, {
+            value: 'navigation',
+            label: 'Navigation',
+            children: [{
+              value: 'menu',
+              label: 'NavMenu'
+            }, {
+              value: 'tabs',
+              label: 'Tabs'
+            }, {
+              value: 'breadcrumb',
+              label: 'Breadcrumb'
+            }, {
+              value: 'dropdown',
+              label: 'Dropdown'
+            }, {
+              value: 'steps',
+              label: 'Steps'
+            }]
+          }, {
+            value: 'others',
+            label: 'Others',
+            children: [{
+              value: 'dialog',
+              label: 'Dialog'
+            }, {
+              value: 'tooltip',
+              label: 'Tooltip'
+            }, {
+              value: 'popover',
+              label: 'Popover'
+            }, {
+              value: 'card',
+              label: 'Card'
+            }, {
+              value: 'carousel',
+              label: 'Carousel'
+            }, {
+              value: 'collapse',
+              label: 'Collapse'
+            }]
+          }]
+        }, {
+          value: 'resource',
+          label: 'Resource',
+          children: [{
+            value: 'axure',
+            label: 'Axure Components'
+          }, {
+            value: 'sketch',
+            label: 'Sketch Templates'
+          }, {
+            value: 'docs',
+            label: 'Design Documentation'
+          }]
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Atributos
+| Atributo         | Descripción                              | Tipo            | Opciones              | Por defecto |
+| ---------------- | ---------------------------------------- | --------------- | --------------------- | ----------- |
+| options          | datos de las opciones                    | array           | —                     | —           |
+| props            | opciones de configuracion,  mire la tabla siguiente | object          | —                     | —           |
+| value            | valor seleccionado                       | array           | —                     | —           |
+| popper-class     | nombre de clase para el Cascader's dropdown | string          | —                     | —           |
+| placeholder      | input placeholder                        | string          | —                     | Select      |
+| disabled         | si Cascader esta disabled                | boolean         | —                     | false       |
+| clearable        | si se puede borrar el valor seleccionado | boolean         | —                     | false       |
+| expand-trigger   | evento del elemento actual para expandirse. | string          | click / hover         | click       |
+| show-all-levels  | si mostrar todos los niveles del valor seleccionado en la entrada | boolean         | —                     | true        |
+| filterable       | si se pueden buscar las opciones         | boolean         | —                     | —           |
+| debounce         | retardo al escribir la palabra clave del filtro, en milisegundos | number          | —                     | 300         |
+| change-on-select | si se permite seleccionar una opción de cualquier nivel | boolean         | —                     | false       |
+| size             | tamaño del input                         | string          | medium / small / mini | —           |
+| before-filter    | funcion antes de filtrar con el valor a filtrar como parámetro. Si se devuelve `false` o se devuelve una `Promise` y luego es rechazada, el filtrado será abortado. | function(value) | —                     | —           |
+
+### props
+| Atributo | Descripción                              | Tipo   | Valores aceptados | Por defecto |
+| -------- | ---------------------------------------- | ------ | ----------------- | ----------- |
+| label    | especifica qué clave del elemento de la opción se utiliza como etiqueta | string | —                 | —           |
+| value    | especifica qué clave del elemento de la opción se utiliza como valor | string | —                 | —           |
+| children | especifica qué clave del elemento de la opción se utiliza como hijo | string | —                 | —           |
+| disabled | especifica qué clave del elemento de la opción indica si está deshabilitada | string | —                 | —           |
+
+### Eventos
+| Nombre             | Descripción                                                  | Parametros                |
+| ------------------ | ------------------------------------------------------------ | ------------------------- |
+| change             | se dispara cuando el valor cambia                            | valor                     |
+| active-item-change | se dispara cuando la opcion activa del parent cambia, sólo funciona cuando `change-on-select` es `false`. | array de opciones activas |
+| blur               | se dispara cuando Cascader pierde el foco                    | (event: Event)            |
+| focus              | se dispara cuando Cascader obtiene el foco                   | (event: Event)            |
+
diff --git a/examples/docs/es/checkbox.md b/examples/docs/es/checkbox.md
new file mode 100644
index 0000000000..0b5c4e5dfc
--- /dev/null
+++ b/examples/docs/es/checkbox.md
@@ -0,0 +1,327 @@
+<script>
+  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
+  module.exports = {
+    data() {
+      return {
+        checkList: ['seleccionado y deshabilitado','Opción A'],
+        // checkList2: ['Opción A'],
+        checked: true,
+        checked1: false,
+        checked2: true,
+        checked3: true,
+        checked4: false,
+        checked5: false,
+        checked6: true,
+        isValid: 'valid',
+        checkAll: false,
+        cities: cityOptions,
+        checkedCities: ['Shanghai', 'Beijing'],
+        checkedCities1: ['Shanghai', 'Beijing'],
+        isIndeterminate: true,
+        checkboxGroup1: ['Shanghai'],
+        checkboxGroup2: ['Shanghai'],
+        checkboxGroup3: ['Shanghai'],
+        checkboxGroup4: ['Shanghai'],
+        checkboxGroup5: [],
+        checkboxGroup6: []
+      };
+    },
+    methods: {
+      handleChange(ev) {
+        console.log(ev);
+      },
+      handleCheckAllChange(val) {
+        this.checkedCities = val ? cityOptions : [];
+        this.isIndeterminate = false;
+      },
+      handleCheckedCitiesChange(value) {
+        let checkedCount = value.length;
+        this.checkAll = checkedCount === this.cities.length;
+        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
+      }
+    }
+  };
+</script>
+
+## Checkbox
+
+Un grupo de opciones para manejar múltiples elecciones.
+
+### Uso básico
+
+Checkbox puede ser usado para alternar entre dos estados.
+
+:::demo Define `v-model`(enlaza la variable) en `el-checkbox`. El valor por defecto es un `Boolean` para un `checkbox`, y se convierte en `true` cuando este es seleccionado. El contenido dentro del tag `el-checkbox` se convierte en la descripción al costado del botón del checkbox. 
+
+```html
+<template>
+  <!-- `checked` debe ser true o false -->
+  <el-checkbox v-model="checked">Opción</el-checkbox>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        checked: true
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Estado Deshabilitado
+
+Estado deshabilitado para el checkbox.
+
+:::demo Setear el atributo `disabled`.
+
+```html
+<template>
+  <el-checkbox v-model="checked1" disabled>Opción</el-checkbox>
+  <el-checkbox v-model="checked2" disabled>Opción</el-checkbox>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        checked1: false,
+        checked2: true
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Grupo de Checkboxes
+
+Es usado por multiples checkboxes los cuales están enlazados a un grupo, indica si una opción está seleccionada verificando si esta está marcada.
+
+:::demo El elemento `checkbox-group` puede manejar multiples checkboxes en un grupo usando `v-model` el cuál está enlazado a un `Array`. Dentro del elemento `el-checkbox`, `label` es el valor del checkbox. Si en ese tag no hay contenido anidado, `label` va a ser mostrado como la descripción al lado del botón del checkbox. `label` también se corresponde con los valores del array. Es seleccionado si el valor especificado existe en el array y viceversa.
+
+```html
+<template>
+  <el-checkbox-group v-model="checkList">
+    <el-checkbox label="Opción A"></el-checkbox>
+    <el-checkbox label="Opción B"></el-checkbox>
+    <el-checkbox label="Opción C"></el-checkbox>
+    <el-checkbox label="disabled" disabled></el-checkbox>
+    <el-checkbox label="Seleccionado y deshabilitado" disabled></el-checkbox>
+  </el-checkbox-group>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        checkList: ['Seleccionado y deshabilitado','Opción A']
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Indeterminado
+
+La propiedad `indeterminate` puede ser usada para generar el efecto de marcar todos (check all).
+
+:::demo
+
+```html
+<template>
+  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Marcar todos</el-checkbox>
+  <div style="margin: 15px 0;"></div>
+  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
+    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
+  </el-checkbox-group>
+</template>
+<script>
+  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
+  export default {
+    data() {
+      return {
+        checkAll: false,
+        checkedCities: ['Shanghai', 'Beijing'],
+        cities: cityOptions,
+        isIndeterminate: true
+      };
+    },
+    methods: {
+      handleCheckAllChange(val) {
+        this.checkedCities = val ? cityOptions : [];
+        this.isIndeterminate = false;
+      },
+      handleCheckedCitiesChange(value) {
+        let checkedCount = value.length;
+        this.checkAll = checkedCount === this.cities.length;
+        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Cantidad Mínima / Máxima de elementos seleccionados
+
+Las propiedades `min` y `max` pueden limitar la cantidad de elementos seleccionados.
+
+:::demo
+
+```html
+<template>
+  <el-checkbox-group 
+    v-model="checkedCities1"
+    :min="1"
+    :max="2">
+    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
+  </el-checkbox-group>
+</template>
+<script>
+  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
+  export default {
+    data() {
+      return {
+        checkedCities1: ['Shanghai', 'Beijing'],
+        cities: cityOptions
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Estilo tipo Botón
+
+Checkbox con estilo tipo Botón.
+
+:::demo Sólo debe cambiar el elemento `el-checkbox` por el elemento `el-checkbox-button`. También proveemos el atributo `size`.
+```html
+<template>
+  <div>
+    <el-checkbox-group v-model="checkboxGroup1">
+      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup2" size="medium">
+      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup3" size="small">
+      <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === 'Beijing'" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
+      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
+</template>
+<script>
+  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
+
+  export default {
+    data () {
+      return {
+        checkboxGroup1: ['Shanghai'],
+        checkboxGroup2: ['Shanghai'],
+        checkboxGroup3: ['Shanghai'],
+        checkboxGroup4: ['Shanghai'],
+        cities: cityOptions
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Con bordes
+
+:::demo El atributo `border` agrega un borde a los Checkboxes.
+```html
+<template>
+  <div>
+    <el-checkbox v-model="checked3" label="Opción1" border></el-checkbox>
+    <el-checkbox v-model="checked4" label="Opción2" border></el-checkbox>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox v-model="checked5" label="Opción1" border size="medium"></el-checkbox>
+    <el-checkbox v-model="checked6" label="Opción2" border size="medium"></el-checkbox>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup5" size="small">
+      <el-checkbox label="Opción1" border></el-checkbox>
+      <el-checkbox label="Opción2" border disabled></el-checkbox>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
+      <el-checkbox label="Opción1" border></el-checkbox>
+      <el-checkbox label="Opción2" border></el-checkbox>
+    </el-checkbox-group>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        checked3: true,
+        checked4: false,
+        checked5: false,
+        checked6: true,
+        checkboxGroup5: [],
+        checkboxGroup6: []
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Atributos de Checkbox
+| Atributo      | Descripción                              | Tipo                      | Valores aceptados     | Por defecto |
+| ------------- | ---------------------------------------- | ------------------------- | --------------------- | ----------- |
+| label         | valor del Checkbox si es usado dentro de un tag `checkbox-group` | string / number / boolean | —                     | —           |
+| true-label    | valor del Checkbox si está marcado       | string / number           | —                     | —           |
+| false-label   | valor del Checkbox si no está marcado    | string / number           | —                     | —           |
+| disabled      | especifica si el Checkbox está deshabilitado | boolean                   | —                     | false       |
+| border        | especifica si agrega un borde alrededor del Checkbox | boolean                   | —                     | false       |
+| size          | tamaño del Checkbox, sólo funciona si `border` es true | string                    | medium / small / mini | —           |
+| name          | atributo 'name' nativo                   | string                    | —                     | —           |
+| checked       | especifica si el Checkbox está marcado   | boolean                   | —                     | false       |
+| indeterminate | similar a `indeterminate` en el checkbox nativo | boolean                   | —                     | false       |
+
+### Eventos de Checkbox
+| Nombre | Descripción                              | Parametros           |
+| ------ | ---------------------------------------- | -------------------- |
+| change | se ejecuta cuando el valor enlazado cambia | el valor actualizado |
+
+### Atributos de Checkbox-group
+| Atributo   | Descripción                              | Tipo    | Valores aceptados     | Por Defecto |
+| ---------- | ---------------------------------------- | ------- | --------------------- | ----------- |
+| size       | tamaño de los checkboxes de tipo botón o los checkboxes con border | string  | medium / small / mini | —           |
+| disabled   | especifica si los checkboxes anidados están deshabilitados | boolean | —                     | false       |
+| min        | cantidad mínima de checkboxes que deben ser marcados | number  | —                     | —           |
+| max        | cantidad máxima de checkboxes que pueden ser marcados | number  | —                     | —           |
+| text-color | color de fuente cuando el botón está activo | string  | —                     | #ffffff     |
+| fill       | color de border y de fondo cuando el botón está activo | string  | —                     | #409EFF     |
+
+### Eventos de Checkbox-group
+| Nombre de Evento | Descripción                              | Parametros           |
+| ---------------- | ---------------------------------------- | -------------------- |
+| change           | se ejecuta cuando el valor enlazado cambia | el valor actualizado |
+
+### Atributos de Checkbox-button
+| Atributo    | Descripción                              | Tipo                      | Valores aceptados | Por defecto |
+| ----------- | ---------------------------------------- | ------------------------- | ----------------- | ----------- |
+| label       | valor del checkbox cuando es usado dentro de un `checkbox-group` | string / number / boolean | —                 | —           |
+| true-label  | valor del checkbox si este está marcado  | string / number           | —                 | —           |
+| false-label | valor del checkbox si este no está marcado | string / number           | —                 | —           |
+| disabled    | especifica si el checkbox está deshabilitado | boolean                   | —                 | false       |
+| name        | atributo 'name' del checbox nativo       | string                    | —                 | —           |
+| checked     | si el checkbox está marcado              | boolean                   | —                 | false       |
diff --git a/examples/docs/es/collapse.md b/examples/docs/es/collapse.md
new file mode 100644
index 0000000000..70cb714d21
--- /dev/null
+++ b/examples/docs/es/collapse.md
@@ -0,0 +1,157 @@
+<script>
+  export default {
+    data() {
+      return {
+        activeNames: ['1'],
+        activeName: '1'
+      };
+    },
+    methods: {
+      handleChange(val) {
+        console.log(val);
+      }
+    }
+  }
+</script>
+
+<style>
+  .demo-collapse {
+    .el-collapse-item__header {
+      .header-icon {
+        margin-left: 5px;
+      }
+    }
+  }
+</style>
+
+## Collapse
+
+Use Collapse para almacenar contenidos.
+
+### Uso básico
+
+Puede expandir varios paneles
+
+:::demo
+```html
+<el-collapse v-model="activeNames" @change="handleChange">
+  <el-collapse-item title="Consistency" name="1">
+    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
+    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Feedback" name="2">
+    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
+    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Efficiency" name="3">
+    <div>Simplify the process: keep operating process simple and intuitive;</div>
+    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
+    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Controllability" name="4">
+    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
+    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
+  </el-collapse-item>
+</el-collapse>
+<script>
+  export default {
+    data() {
+      return {
+        activeNames: ['1']
+      };
+    },
+    methods: {
+      handleChange(val) {
+        console.log(val);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Acordeón
+
+En modo acordeón sólo un panel puede ser expandido a la vez
+
+:::demo Activa el modo acordeón usado el atributo `accordion`.
+```html
+<el-collapse v-model="activeName" accordion>
+  <el-collapse-item title="Consistency" name="1">
+    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
+    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Feedback" name="2">
+    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
+    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Efficiency" name="3">
+    <div>Simplify the process: keep operating process simple and intuitive;</div>
+    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
+    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Controllability" name="4">
+    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
+    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
+  </el-collapse-item>
+</el-collapse>
+<script>
+  export default {
+    data() {
+      return {
+        activeName: '1'
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Título personalizado
+
+Además de usar el atributo `title`, se puede personalizar el título del panel con slots con nombre, esto hace posible agregar contenido personalizado, por ejemplo: iconos.
+
+:::demo
+```html
+<el-collapse accordion>
+  <el-collapse-item name="1">
+    <template slot="title">
+      Consistency<i class="header-icon el-icon-information"></i>
+    </template>
+    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
+    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Feedback" name="2">
+    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
+    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Efficiency" name="3">
+    <div>Simplify the process: keep operating process simple and intuitive;</div>
+    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
+    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Controllability" name="4">
+    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
+    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
+  </el-collapse-item>
+</el-collapse>
+```
+:::
+
+### Atributos de Collapse
+| Atributo  | Descripción                           | Tipo                                     | Valores aceptados | Por defecto |
+| --------- | ------------------------------------- | ---------------------------------------- | ----------------- | ----------- |
+| accordion | especifica si activa el modo acordeón | boolean                                  | —                 | false       |
+| value     | panel activo                          | string (modo acordeón)/array (No modo acordeón) | —                 | —           |
+
+### Eventos de Collapse
+| Nombre de Evento | Descripción                              | Parametros                               |
+| ---------------- | ---------------------------------------- | ---------------------------------------- |
+| change           | se dispara cuando los paneles activos cambian | activeNames: array (No modo acordeón)/string (modo acordeón) |
+
+
+### Atributos de Collapse Item
+| Atributo | Descripción                   | Tipo          | Valores aceptados | Por defecto |
+| -------- | ----------------------------- | ------------- | ----------------- | ----------- |
+| name     | identificador único del panel | string/number | —                 | —           |
+| title    | título del panel              | string        | —                 | —           |
\ No newline at end of file
diff --git a/examples/docs/es/color-picker.md b/examples/docs/es/color-picker.md
new file mode 100644
index 0000000000..d2ac809d4c
--- /dev/null
+++ b/examples/docs/es/color-picker.md
@@ -0,0 +1,182 @@
+<script>
+  export default {
+    data() {
+      return {
+        color1: '#409EFF',
+        color2: null,
+        color3: 'rgba(19, 206, 102, 0.8)',
+        color4: '#409EFF',
+        color5: 'rgba(255, 69, 0, 0.68)',
+        predefineColors: [
+          '#ff4500',
+          '#ff8c00',
+          '#ffd700',
+          '#90ee90',
+          '#00ced1',
+          '#1e90ff',
+          '#c71585',
+          'rgba(255, 69, 0, 0.68)',
+          'rgb(255, 120, 0)',
+          'hsv(51, 100, 98)',
+          'hsva(120, 40, 94, 0.5)',
+          'hsl(181, 100%, 37%)',
+          'hsla(209, 100%, 56%, 0.73)',
+          '#c7158577'
+        ]
+      };
+    },
+    mounted() {
+      this.$nextTick(() => {
+        const demos = document.querySelectorAll('.source');
+        demos[0].style.padding = '0';
+      });
+    },
+  }
+</script>
+
+<style>
+  .demo-color-picker .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    display: inline-block;
+    width: 50%;
+    box-sizing: border-box;
+    &:last-child {
+      border-right: none;
+    }
+  }
+  .demo-color-picker .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+  .demo-color-picker .el-color-picker + .el-color-picker {
+    margin-left: 20px;
+  }
+</style>
+
+## ColorPicker
+
+ColorPicker es un selector de color que soporta varios formatos de color.
+
+### Uso básico
+
+:::demo ColorPicker requiere una variable de tipo `string` para ser enlazada a `v-model`.
+```html
+<div class="block">
+  <span class="demonstration">Especifica valor por defecto</span>
+  <el-color-picker v-model="color1"></el-color-picker>
+</div>
+<div class="block">
+  <span class="demonstration">No especifica valor por defecto</span>
+  <el-color-picker v-model="color2"></el-color-picker>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        color1: '#409EFF',
+        color2: null
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Alpha
+
+:::demo ColorPicker soporta selección de canales alpha. Para activarlo sólo agrege el atributo `show-alpha`.
+```html
+<el-color-picker v-model="color3" show-alpha></el-color-picker>
+
+<script>
+  export default {
+    data() {
+      return {
+        color3: 'rgba(19, 206, 102, 0.8)'
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Predefined colors
+
+:::demo ColorPicker supports predefined color options
+```html
+<el-color-picker
+  v-model="color5"
+  show-alpha
+  :predefine="predefineColors">
+</el-color-picker>
+
+<script>
+  export default {
+    data() {
+      return {
+        color5: 'rgba(255, 69, 0, 0.68)',
+        predefineColors: [
+          '#ff4500',
+          '#ff8c00',
+          '#ffd700',
+          '#90ee90',
+          '#00ced1',
+          '#1e90ff',
+          '#c71585',
+          'rgba(255, 69, 0, 0.68)',
+          'rgb(255, 120, 0)',
+          'hsv(51, 100, 98)',
+          'hsva(120, 40, 94, 0.5)',
+          'hsl(181, 100%, 37%)',
+          'hsla(209, 100%, 56%, 0.73)',
+          '#c7158577'
+        ]
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Sizes
+
+:::demo
+```html
+<el-color-picker v-model="color4"></el-color-picker>
+<el-color-picker v-model="color4" size="medium"></el-color-picker>
+<el-color-picker v-model="color4" size="small"></el-color-picker>
+<el-color-picker v-model="color4" size="mini"></el-color-picker>
+
+<script>
+  export default {
+    data() {
+      return {
+        color4: '#409EFF'
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Atributos
+| Atributo     | Descripción                              | Tipo    | Valores aceptados     | Por defecto                              |
+| ------------ | ---------------------------------------- | ------- | --------------------- | ---------------------------------------- |
+| disabled     | especifica si se deshabilita el ColorPicker | boolean | —                     | false                                    |
+| size         | tamaño del ColorPicker                   | string  | —                     | medium / small / mini                    |
+| show-alpha   | especifica si se muestra el control deslizante para el valor alpha | boolean | —                     | false                                    |
+| color-format | formato de color del `v-model`           | string  | hsl / hsv / hex / rgb | hex (si show-alpha es false)/ rgb (si show-alpha es true) |
+| popper-class | nombre de clase para el dropdown del ColorPicker | string  | —                     | —                                        |
+| predefine    | opciones de colores predefinidas | array | — | — |
+
+### Eventos
+| Nombre de Evento | Descripción                              | Parametros             |
+| ---------------- | ---------------------------------------- | ---------------------- |
+| change           | se dispara cuando el valor del input cambia | valor del color        |
+| active-change    | se dispara cuando el actual color activo cambia | valor del color activo |
+
diff --git a/examples/docs/es/color.md b/examples/docs/es/color.md
new file mode 100644
index 0000000000..365d63549f
--- /dev/null
+++ b/examples/docs/es/color.md
@@ -0,0 +1,130 @@
+<style>
+  .demo-color-box {
+    border-radius: 4px;
+    padding: 20px;
+    margin: 5px 0;
+    height: 74px;
+    box-sizing: border-box;
+    color: #fff;
+    font-size: 14px;
+    
+    & .value {
+      font-size: 12px;
+      opacity: 0.69;
+      line-height: 24px;
+    }
+  }
+  .demo-color-box-group {
+    .demo-color-box {
+      border-radius: 0;
+      margin: 0;
+    }
+    .demo-color-box:first-child {
+      border-radius: 4px 4px 0 0;
+    }
+    .demo-color-box:last-child {
+      border-radius: 0 0 4px 4px;
+    }
+  }
+  .bg-blue {
+    background-color: #409EFF;
+  }
+
+  .bg-success {
+    background-color: #13CE66;
+  }
+  .bg-warning {
+    background-color: #f7ba2a;
+  }
+  .bg-danger {
+    background-color: #ff4949;
+  }
+  .bg-info {
+    background-color: #909399;
+  }
+
+  .bg-text-primary {
+    background-color: #303133;
+  }
+  .bg-text-regular {
+    background-color: #606266;
+  }
+  .bg-text-secondary {
+    background-color: #909399;
+  }
+  .bg-text-placeholder {
+    background-color: #c0c4cc;
+  }
+
+  .bg-border-base {
+    background-color: #dcdfe6;
+  }
+  .bg-border-light {
+    background-color: #e4e7ed;
+  }
+  .bg-border-lighter {
+    background-color: #ebeef5;
+  }
+  .bg-border-extra-light {
+    background-color: #f2f6fc;
+  }
+
+  [class*=" bg-border-"] {
+    color: #303133;
+  }
+</style>
+
+## Color
+Element utiliza un conjunto de paletas para especificar colores, y así, proporcionar una apariencia y sensación coherente para los productos que construye.
+
+### Color principal
+
+El color principal de Element es el azul brillante y amigable.
+
+<el-row :gutter="12">
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box bg-blue">Azul<div class="value">#409EFF</div></div>
+  </el-col>
+</el-row>
+
+### Color secundario
+
+Además del color principal, se necesitan utilizar distintos colores para diferentes escenarios (por ejemplo, el color en tono rojo indica una operación peligrosa).
+
+<el-row :gutter="12">
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box bg-success">Éxito<div class="value">#67C23A</div></div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box bg-warning">Precaución<div class="value">#E6A23C</div></div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box bg-danger">Peligro<div class="value">#F56C6C</div></div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box bg-info">Info<div class="value">#909399</div></div>
+  </el-col>
+</el-row>
+
+### Color neutro
+
+Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes colores neutrales para representar una estructura jeráquica.
+
+<el-row :gutter="12">
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box-group">
+      <div class="demo-color-box bg-text-primary">Texto primario<div class="value">#303133</div></div>
+      <div class="demo-color-box bg-text-regular">Texto regular<div class="value">#606266</div></div>
+      <div class="demo-color-box bg-text-secondary">Texto secundario<div class="value">#909399</div></div>
+      <div class="demo-color-box bg-text-placeholder">Texto de placeholder<div class="value">#C0C4CC</div></div>
+    </div>
+  </el-col>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box-group">
+      <div class="demo-color-box bg-border-base">Borde base<div class="value">#DCDFE6</div></div>
+      <div class="demo-color-box bg-border-light">Borde ligero<div class="value">#E4E7ED</div></div>
+      <div class="demo-color-box bg-border-lighter">Borde claro<div class="value">#EBEEF5</div></div>
+      <div class="demo-color-box bg-border-extra-light">Borde extra claro<div class="value">#F2F6FC</div></div>
+    </div>
+  </el-col>
+</el-row>
diff --git a/examples/docs/es/container.md b/examples/docs/es/container.md
new file mode 100644
index 0000000000..2639063a9b
--- /dev/null
+++ b/examples/docs/es/container.md
@@ -0,0 +1,300 @@
+<style>
+  .el-header, .el-footer {
+    background-color: #B3C0D1;
+    color: #333;
+    line-height: 60px;
+  }
+
+  .el-aside {
+    color: #333;
+  }
+
+  #disenos-comunes + .demo-container {
+    .el-header, .el-footer {
+      text-align: center;
+    }
+    
+    .el-aside {
+      background-color: #D3DCE6;
+      text-align: center;
+      line-height: 200px;
+    }
+    
+    .el-main {
+      background-color: #E9EEF3;
+      color: #333;
+      text-align: center;
+      line-height: 160px;
+    }
+    
+    & > .source > .el-container {
+      margin-bottom: 40px;
+    
+      &:nth-child(5) .el-aside,
+      &:nth-child(6) .el-aside {
+        line-height: 260px;
+      }
+    
+     &:nth-child(7) .el-aside {
+       line-height: 320px;
+      }
+    }
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      const item = {
+        date: '2016-05-02',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      };
+      return {
+        tableData: Array(20).fill(item)
+      }
+    }
+  };
+</script>
+
+## Contenedor
+Componentes contenedores para iniciar una estructura básica de un sitio:
+
+`<el-container>`: Contenedor. Cuando este elemento se anida con un `<el-header>` o `<el-footer>`, todos los elementos secundarios se organizan verticalmente.
+De lo contrario, de forma horizontal. 
+
+`<el-header>`: Contenedor para cabeceras.
+
+`<el-aside>`: Contenedor para secciones laterales (generalmente, una barra lateral).
+
+`<el-main>`: Contenedor para sección principal.
+
+`<el-footer>`: Contenedor para pie de página.
+
+:::tip
+Estos componentes utilizan flex para el diseño, así que asegurese que el navegador lo soporta. Además, los elementos directos de `<el-container>` tienen que ser uno o más de los últimos cuatro componentes. Y el elemento padre de los últimos cuatro componentes debe ser un `<el-container>`.
+:::
+
+### Diseños comunes
+
+:::demo
+```html
+<el-container>
+  <el-header>Cabecera</el-header>
+  <el-main>Principal</el-main>
+</el-container>
+
+<el-container>
+  <el-header>Cabecera</el-header>
+  <el-main>Principal</el-main>
+  <el-footer>Pie de página</el-footer>
+</el-container>
+
+<el-container>
+  <el-aside width="200px">Barra lateral</el-aside>
+  <el-main>Principal</el-main>
+</el-container>
+
+<el-container>
+  <el-header>Cabecera</el-header>
+  <el-container>
+    <el-aside width="200px">Barra lateral</el-aside>
+    <el-main>Principal</el-main>
+  </el-container>
+</el-container>
+
+<el-container>
+  <el-header>Cabecera</el-header>
+  <el-container>
+    <el-aside width="200px">Barra lateral</el-aside>
+    <el-container>
+      <el-main>Principal</el-main>
+      <el-footer>Pie de página</el-footer>
+    </el-container>
+  </el-container>
+</el-container>
+
+<el-container>
+  <el-aside width="200px">Barra lateral</el-aside>
+  <el-container>
+    <el-header>Cabecera</el-header>
+    <el-main>Principal</el-main>
+  </el-container>
+</el-container>
+
+<el-container>
+  <el-aside width="200px">Barra lateral</el-aside>
+  <el-container>
+    <el-header>Cabecera</el-header>
+    <el-main>Principal</el-main>
+    <el-footer>Pie de página</el-footer>
+  </el-container>
+</el-container>
+
+<style>
+  .el-header, .el-footer {
+    background-color: #B3C0D1;
+    color: #333;
+    text-align: center;
+    line-height: 60px;
+  }
+  
+  .el-aside {
+    background-color: #D3DCE6;
+    color: #333;
+    text-align: center;
+    line-height: 200px;
+  }
+  
+  .el-main {
+    background-color: #E9EEF3;
+    color: #333;
+    text-align: center;
+    line-height: 160px;
+  }
+  
+  body > .el-container {
+    margin-bottom: 40px;
+  }
+  
+  .el-container:nth-child(5) .el-aside,
+  .el-container:nth-child(6) .el-aside {
+    line-height: 260px;
+  }
+  
+  .el-container:nth-child(7) .el-aside {
+    line-height: 320px;
+  }
+</style>
+```
+:::
+
+### Ejemplo
+
+:::demo
+```html
+<el-container style="height: 500px; border: 1px solid #eee">
+  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
+    <el-menu :default-openeds="['1', '3']">
+      <el-submenu index="1">
+        <template slot="title"><i class="el-icon-message"></i>Navigator One</template>
+        <el-menu-item-group>
+          <template slot="title">Group 1</template>
+          <el-menu-item index="1-1">Option 1</el-menu-item>
+          <el-menu-item index="1-2">Option 2</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group 2">
+          <el-menu-item index="1-3">Option 3</el-menu-item>
+        </el-menu-item-group>
+        <el-submenu index="1-4">
+          <template slot="title">Option4</template>
+          <el-menu-item index="1-4-1">Option 4-1</el-menu-item>
+        </el-submenu>
+      </el-submenu>
+      <el-submenu index="2">
+        <template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>
+        <el-menu-item-group>
+          <template slot="title">Group 1</template>
+          <el-menu-item index="2-1">Option 1</el-menu-item>
+          <el-menu-item index="2-2">Option 2</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group 2">
+          <el-menu-item index="2-3">Option 3</el-menu-item>
+        </el-menu-item-group>
+        <el-submenu index="2-4">
+          <template slot="title">Option 4</template>
+          <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
+        </el-submenu>
+      </el-submenu>
+      <el-submenu index="3">
+        <template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>
+        <el-menu-item-group>
+          <template slot="title">Group 1</template>
+          <el-menu-item index="3-1">Option 1</el-menu-item>
+          <el-menu-item index="3-2">Option 2</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group 2">
+          <el-menu-item index="3-3">Option 3</el-menu-item>
+        </el-menu-item-group>
+        <el-submenu index="3-4">
+          <template slot="title">Option 4</template>
+          <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
+        </el-submenu>
+      </el-submenu>
+    </el-menu>
+  </el-aside>
+  
+  <el-container>
+    <el-header style="text-align: right; font-size: 12px">
+      <el-dropdown>
+        <i class="el-icon-setting" style="margin-right: 15px"></i>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item>View</el-dropdown-item>
+          <el-dropdown-item>Add</el-dropdown-item>
+          <el-dropdown-item>Delete</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <span>Tom</span>
+    </el-header>
+    
+    <el-main>
+      <el-table :data="tableData">
+        <el-table-column prop="date" label="Date" width="140">
+        </el-table-column>
+        <el-table-column prop="name" label="Name" width="120">
+        </el-table-column>
+        <el-table-column prop="address" label="Address">
+        </el-table-column>
+      </el-table>
+    </el-main>
+  </el-container>
+</el-container>
+
+<style>
+  .el-header {
+    background-color: #B3C0D1;
+    color: #333;
+    line-height: 60px;
+  }
+  
+  .el-aside {
+    color: #333;
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      const item = {
+        date: '2016-05-02',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      };
+      return {
+        tableData: Array(20).fill(item)
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Atributos de contenedor
+| Atributo  | Descripción                              | Tipo   | Valores aceptados     | Por defecto                              |
+| --------- | ---------------------------------------- | ------ | --------------------- | ---------------------------------------- |
+| direction | dirección de diseño para elementos secundarios | string | horizontal / vertical | vertical cuando el elemento está anidado con `el-header`, de lo contrario, horizontal |
+
+### Atributos de cabecera
+| Atributo | Descripción           | Tipo   | Valores aceptados | Por defecto |
+| -------- | --------------------- | ------ | ----------------- | ----------- |
+| height   | altura de la cabecera | string | —                 | 60px        |
+
+### Atributos de barra lateral
+| Atributo | Descripción               | Tipo   | Valores aceptados | Por defecto |
+| -------- | ------------------------- | ------ | ----------------- | ----------- |
+| width    | ancho de la barra lateral | string | —                 | 300px       |
+
+### Atributos de pie de página
+| Atributo | Descripción              | Tipo   | Valores aceptados | Por defecto |
+| -------- | ------------------------ | ------ | ----------------- | ----------- |
+| height   | altura del pie de página | string | —                 | 60px        |
\ No newline at end of file
diff --git a/examples/docs/es/custom-theme.md b/examples/docs/es/custom-theme.md
new file mode 100644
index 0000000000..121f27b85f
--- /dev/null
+++ b/examples/docs/es/custom-theme.md
@@ -0,0 +1,122 @@
+## Tema personalizado
+Element utiliza la metodología BEM en CSS con la finalidad de que puedas sobrescribir los estilos fácilmente. Pero, si necesita remplazar estilos a gran escala, por ejemplo, cambiar el color del tema de azul a naranja o verde, quizás reemplazarlos uno a uno no sea lo más adecuado, para ello hay 3 maneras de modificar los estilos.
+
+### Cambiando el color del tema
+Si lo que se busca es cambiar el color del tema de Element, se recomienda utilizar el [sitio de visualización de temas](https://elementui.github.io/theme-chalk-preview/#/en-US). Element utiliza un color azul brillante y amigable como tema principal. Al cambiarlo, puede hacer que Element este más conectado visualmente a proyectos específicos.
+
+Este sitio, le permitirá obtener una vista previa del tema con un nuevo color en tiempo real, y, además, obtener un paquete de estilos completo basado en el nuevo color para su descarga (para importar estos nuevos estilos, consulte la sección ‘Importar un tema personalizado’ o ‘Importar un tema de componente bajo demanda' que se encuentran dentro de esta sección).
+
+### Actualizando variables SCSS en tu proyecto
+`theme-chalk` esta escrito en SCSS. Si su proyecto también utiliza SCSS, puede cambiar las variables de estilos de Element. Para ello, solo necesita crear un nuevo archivo de estilos, por ejemplo, `element-variables.scss`:
+
+```html
+/* Color del tema */
+$--color-primary: teal;
+
+/* Ubicación de la fuente, obligatoria */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@import "~element-ui/packages/theme-chalk/src/index";
+```
+
+Entonces, en el archivo principal del proyecto, importe este archivo de estilos en lugar de los estilos de Element:
+```JS
+import Vue from 'vue'
+import Element from 'element-ui'
+import './element-variables.scss'
+
+Vue.use(Element)
+```
+
+:::tip
+Nota es necesario sobreescribir la ruta de la fuente por una ruta relativa de las fuentes de Element.
+:::
+
+### CLI para generar temas
+Si su proyecto no utiliza SCSS, puede personalizar el tema a través de esta herramienta:
+
+#### <strong>Instalación</strong>
+Primero, debe instalar el generador de temas ya sea de forma global o local. Se recomienda instalarlo de forma local, ya que de esta manera, cuando otros clonen su proyecto, npm automáticamente los instalará para ellos.
+```shell
+npm i element-theme -g
+```
+
+Ahora, instale el tema `chalk` desde npm o Github.
+```shell
+# desde npm
+npm i element-theme-chalk -D
+
+# desde GitHub
+npm i https://github.com/ElementUI/theme-chalk -D
+```
+
+#### <strong>Inicializar archivo de variables</strong>
+Después de haber instalado correctamente los paquetes, el comando `et` estará disponible en su CLI (si instalo el paquete de manera local, utilize `node_modules/.bin/et` en su lugar). Ejecute `-i` para inicializar un archivo de variables, puede especificar un nombre distinto, pero por defecto, el archivo se llama `element-variables.scss`. También puede especificar un directorio distinto.
+
+```shell
+et -i [custom output file]
+
+> ✔ Generator variables file
+```
+
+En el archivo `element-variables.scss` podrá encontrar todas las variables que utiliza Element para definir los estilos y estos están definidos en SCSS. Aquí un ejemplo:
+```css
+$--color-primary: #409EFF !default;
+$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
+$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
+$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
+$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
+$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
+$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
+$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
+$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
+$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
+
+$--color-success: #67c23a !default;
+$--color-warning: #e6a23c !default;
+$--color-danger: #f56c6c !default;
+$--color-info: #909399 !default;
+
+...
+```
+
+#### <strong>Modificando variables</strong>
+Solo debe modificar el archivo `element-variables.scss`, por ejemplo, para cambiar el color del tema a rojo:
+```CSS
+$--color-primary: red;
+```
+
+#### <strong>Construyendo el tema</strong>
+Después de haber modificado el archivo de variables, utilizaremos el comando `et` para construir nuestro tema. Puedes activar el modo `watch` agregando el parámetro `-w`. Y, si desea personalizar el nombre del archivo, debes agregar el parámetro `-c` seguido del nombre.
+```shell
+et
+
+> ✔ build theme font
+> ✔ build element theme
+```
+
+#### <strong>Importar un tema personalizado</strong>
+Por defecto, el archivo de tema construido es colocado dentro de `./theme`. Puede especificar un directorio distinto utilizando el parámetro `-o`. Importar su propio tema es igual a como si importará el tema por defecto, únicamente tiene que importar el archivo que se construyó:
+
+```javascript
+import '../theme/index.css'
+import ElementUI from 'element-ui'
+import Vue from 'vue'
+
+Vue.use(ElementUI)
+```
+
+#### <strong>Importar un tema de componente bajo demanda</strong>
+Si esta utilizando `babel-plugin-component` para importar bajo demanda, solo debe modificar el archivo `.babelrc` y especificar en la propiedad `styleLibraryName` la ruta en donde se encuentra localizado su tema personalizado relativo a `.babelrc`. **Nota** el carácter `~` es obligatorio:
+```json
+{
+  "plugins": [["component", [
+    {
+      "libraryName": "element-ui",
+      "styleLibraryName": "~theme"
+    }
+  ]]]
+}
+```
+
+Si no esta familiarizado con `babel-plugin-component`, por favor diríjase a la documentación sobre <a href="./#/en-US/component/quickstart">Como Iniciar</a>. Para más detalles, consulte el [repositorio del proyecto](https://github.com/ElementUI/element-theme) de `element-theme`.
\ No newline at end of file
diff --git a/examples/docs/es/date-picker.md b/examples/docs/es/date-picker.md
new file mode 100644
index 0000000000..40e4ef9dc4
--- /dev/null
+++ b/examples/docs/es/date-picker.md
@@ -0,0 +1,528 @@
+<script>
+  module.exports = {
+    data() {
+      return {
+        pickerOptions1: {
+          disabledDate(time) {
+            return time.getTime() > Date.now();
+          },
+          shortcuts: [{
+            text: 'Today',
+            onClick(picker) {
+              picker.$emit('pick', new Date());
+            }
+          }, {
+            text: 'Yesterday',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit('pick', date);
+            }
+          }, {
+            text: 'A week ago',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', date);
+            }
+          }]
+        },
+        pickerOptions2: {
+          shortcuts: [{
+            text: 'Last week',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: 'Last month',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: 'Last 3 months',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        value1: '',
+        value2: '',
+        value3: '',
+        value4: '',
+        value5: '',
+        value6: '',
+        value7: '',
+        value8: '',
+        value9: '',
+        value10: '',
+        value11: '',
+        value12: '',
+        value13: '',
+        value14: ''
+      };
+    }
+  };
+</script>
+
+<style>
+  .demo-block.demo-date-picker .source {
+    padding: 0;
+    display: flex;
+  }
+
+  .demo-date-picker .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    flex: 1;
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .demo-date-picker .container {
+    flex: 1;
+    border-right: solid 1px #EFF2F6;
+    .block {
+      border-right: none;
+      &:last-child {
+        border-top: solid 1px #EFF2F6;
+      }
+    }
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .demo-date-picker .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+</style>
+
+## DatePicker
+
+Utilice Date Picker para introducir la fecha.
+
+###  Ingresar Fecha
+
+Date Picker básico por "día".
+
+:::demo La medida está determinada por el atributo `type` . Puede habilitar las opciones rápidas creando un objeto `picker-options` con la propiedad `shortcuts`. La fecha desactivada se ajusta mediante `disabledDate`, que es una función.
+
+
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Default</span>
+    <el-date-picker
+      v-model="value1"
+      type="date"
+      placeholder="Pick a day">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">Picker with quick options</span>
+    <el-date-picker
+      v-model="value2"
+      type="date"
+      placeholder="Pick a day"
+      :picker-options="pickerOptions1">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        pickerOptions1: {
+          disabledDate(time) {
+            return time.getTime() > Date.now();
+          },
+          shortcuts: [{
+            text: 'Today',
+            onClick(picker) {
+              picker.$emit('pick', new Date());
+            }
+          }, {
+            text: 'Yesterday',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit('pick', date);
+            }
+          }, {
+            text: 'A week ago',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', date);
+            }
+          }]
+        },
+        value1: '',
+        value2: '',
+      };
+    }
+  };
+</script>
+```
+
+:::
+
+### Otras mediciones
+
+You can choose week, month, year or multiple dates by extending the standard date picker component.
+
+:::demo
+
+```html
+<div class="container">
+  <div class="block">
+    <span class="demonstration">Week</span>
+    <el-date-picker
+      v-model="value3"
+      type="week"
+      format="Week WW"
+      placeholder="Pick a week">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">Month</span>
+    <el-date-picker
+      v-model="value4"
+      type="month"
+      placeholder="Pick a month">
+    </el-date-picker>
+  </div>
+</div>
+<div class="container">
+  <div class="block">
+    <span class="demonstration">Year</span>
+    <el-date-picker
+      v-model="value5"
+      type="year"
+      placeholder="Pick a year">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">Dates</span>
+    <el-date-picker
+      type="dates"
+      v-model="value14"
+      placeholder="Pick one or more dates">
+    </el-date-picker>
+  </div>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        value3: '',
+        value4: '',
+        value5: '',
+        value14: ''
+      };
+    }
+  };
+</script>
+```
+
+:::
+
+###  Rango de fechas
+
+Se soporta la selección de un rango de fechas.
+
+:::demo En modo de rango, los paneles izquierdo y derecho están vinculados por defecto. Si desea que los dos paneles cambien los meses actuales de forma independiente, puede utilizar el atributo `unlink-panels`.
+
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Default</span>
+    <el-date-picker
+      v-model="value6"
+      type="daterange"
+      range-separator="To"
+      start-placeholder="Start date"
+      end-placeholder="End date">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">With quick options</span>
+    <el-date-picker
+      v-model="value7"
+      type="daterange"
+      align="right"
+      unlink-panels
+      range-separator="To"
+      start-placeholder="Start date"
+      end-placeholder="End date"
+      :picker-options="pickerOptions2">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        pickerOptions2: {
+          shortcuts: [{
+            text: 'Last week',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: 'Last month',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: 'Last 3 months',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        value6: '',
+        value7: ''
+      };
+    }
+  };
+</script>
+```
+
+:::
+
+###  Valor por defecto
+
+Si el usuario no ha escogido una fecha, muestra el calendario de hoy por defecto. Puede utilizar `default-value` para fijar otra fecha. Su valor debe ser definido por `new Date()`.
+
+Si el tipo es `daterange`, `default-value` establece el calendario del lado izquierdo.
+
+:::demo
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">date</span>
+    <el-date-picker
+      v-model="value8"
+      type="date"
+      placeholder="Pick a date"
+      default-value="2010-10-01">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">daterange</span>
+    <el-date-picker
+      v-model="value9"
+      type="daterange"
+      align="right"
+      start-placeholder="Start Date"
+      end-placeholder="End Date"
+      default-value="2010-10-01">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value8: '',
+        value9: ''
+      };
+    }
+  };
+</script>
+```
+:::
+
+###  Formatos de Date
+Utilice `format` para controlar el formato del texto visualizado en el input. Utilice `value-format` para controlar el formato del valor vinculado.
+
+Por defecto, el componente acepta y emite un objeto Date. A continuación se soportan cadenas de formato, usando UTC 2017-01-02 03:04:05 como ejemplo:
+
+:::warning
+Preste atención a la capitalización
+:::
+
+| formato     | significado  | nota                                     | ejemplo       |
+| ----------- | ------------ | ---------------------------------------- | ------------- |
+| `yyyy`      | año          |                                          | 2017          |
+| `M`         | mes          | no acepta 0                              | 1             |
+| `MM`        | mes          |                                          | 01            |
+| `W`         | semana       | solamente para semanas en picker's `format`; no acepta 0 | 1             |
+| `WW`        | semana       | solamente para semanas en  picker's `format` | 01            |
+| `d`         | dia          | no acepta 0                              | 2             |
+| `dd`        | dia          |                                          | 02            |
+| `H`         | hora         | 24-hora reloj; no acepta 0               | 3             |
+| `HH`        | hora         | 24-hora reloj                            | 03            |
+| `h`         | hora         | 12-hora reloj;  debe usarse con `A` o `a`; no acepta 0 | 3             |
+| `hh`        | hour         | 12-hora reloj;  debe usarse con `A` o `a` | 03            |
+| `m`         | minuto       | no acepta 0                              | 4             |
+| `mm`        | minuto       |                                          | 04            |
+| `s`         | segundo      | no acepta 0                              | 5             |
+| `ss`        | segundo      |                                          | 05            |
+| `A`         | AM/PM        | solamente para `format`, mayusculas      | AM            |
+| `a`         | am/pm        | solamente para `format`, minúsculas      | am            |
+| `timestamp` | JS timestamp | solamente para `value-format`; valor vinculado debe ser un `number` | 1483326245000 |
+
+:::demo
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Emits Date object</span>
+    <div class="demonstration">Value: {{ value10 }}</div>
+    <el-date-picker
+      v-model="value10"
+      type="date"
+      placeholder="Pick a Date"
+      format="yyyy/MM/dd">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">Use value-format</span>
+    <div class="demonstration">Value: {{ value11 }}</div>
+    <el-date-picker
+      v-model="value11"
+      type="date"
+      placeholder="Pick a Date"
+      format="yyyy/MM/dd"
+      value-format="yyyy-MM-dd">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">Timestamp</span>
+    <div class="demonstration">Value：{{ value12 }}</div>
+    <el-date-picker
+      v-model="value12"
+      type="date"
+      placeholder="Pick a Date"
+      format="yyyy/MM/dd"
+      value-format="timestamp">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value10: '',
+        value11: '',
+        value12: ''
+      };
+    }
+  };
+</script>
+```
+:::
+
+###  Hora por defecto para comienzo y fin de fecha
+
+Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de inicio y la fecha final.
+
+:::demo Por defecto, la hora de la fecha de inicio y final es `00:00:00`. Configurar `default-time`  puede cambiar la hora respectivamente. Acepta un array de hasta dos cadenas con el formato  `12:00:00`. La primera cadena fija la hora para la fecha de inicio y la segunda para la fecha final.
+
+```html
+<template>
+  <div class="block">
+    <p>Component value：{{ value12 }}</p>
+    <el-date-picker
+      v-model="value12"
+      type="daterange"
+      start-placeholder="Start date"
+      end-placeholder="End date"
+      :default-time="['00:00:00', '23:59:59']">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value12: ''
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Atributos
+| Atributo          | Descripción                              | Tipo              | Valores aceptados                        | Por defecto          |
+| ----------------- | ---------------------------------------- | ----------------- | ---------------------------------------- | -------------------- |
+| readonly          | si DatePicker es solo de lectura         | boolean           | —                                        | false                |
+| disabled          | si DatePicker esta deshabilitado         | boolean           | —                                        | false                |
+| size              | tamaño del input                         | string            | large/small/mini                         | —                    |
+| editable          | si el input es editable                  | boolean           | —                                        | true                 |
+| clearable         | si se muestra el boton de borrado        | boolean           | —                                        | true                 |
+| placeholder       | placeholder cuando el modo NO es rango   | string            | —                                        | —                    |
+| start-placeholder | placeholder para la fecha de inicio en modo rango | string            | —                                        | —                    |
+| end-placeholder   | placeholder para la fecha final en modo rango | string            | —                                        | —                    |
+| type              | tipo de picker                           | string            | year/month/date/dates/datetime/ week/datetimerange/daterange | date                 |
+| format            | formato en que se muestra el valor en el input | string            | ver [date formats](#/es/component/date-picker#date-formats) | yyyy-MM-dd           |
+| align             | alineación                               | left/center/right | left                                     |                      |
+| popper-class      | nombre de clase personalizada para el dropdown de DatePicker | string            | —                                        | —                    |
+| picker-options    | opciones adicionales, chequee la tabla debajo | object            | —                                        | {}                   |
+| range-separator   | separador de rangos                      | string            | —                                        | '-'                  |
+| default-value     | opcional, valor por defecto para el calendario | Date              | cualquiera aceptado por `new Date()`     | —                    |
+| default-time      | opcional, los valores para las horas que se deben usar en la seleccion de fechas cuando se usa el modo rango | string[]          | Array de dos valores, cada uno es un string del estilo `12:00:00`. El primer elemento es para la fecha de inicio y el segundo es para la fecha final. | —                    |
+| value-format      | opcional, formato del valor enlazado. Si no esta especificado, el valor enlazado será un objeto Date. | string            | ver [date formats](#/es/component/date-picker#date-formats) | —                    |
+| name              | igual que `name` en el input nativo      | string            | —                                        | —                    |
+| unlink-panels     | desvincular los dos paneles de fecha en el range-picker | boolean           | —                                        | false                |
+| prefix-icon       | Clase personalizada para el icono prefijado | string            | —                                        | el-icon-date         |
+| clear-icon        | Clase personalizada para el icono `clear` | string            | —                                        | el-icon-circle-close |
+
+### Opciones del Picker
+| Atributo       | Descripción                              | Tipo                           | Valores aceptados | Por defecto |
+| -------------- | ---------------------------------------- | ------------------------------ | ----------------- | ----------- |
+| shortcuts      | { text, onClick } un array de objetos para establecer opciones de acceso directo, verifique la tabla siguiente | object[]                       | —                 | —           |
+| disabledDate   | una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un valor booleano | function                       | —                 | —           |
+| firstDayOfWeek | primer dia de la semana                  | Number                         | 1 to 7            | 7           |
+| onPick         | una función que se dispara cuando se cambia la fecha seleccionada. Solamente para `daterange` y `datetimerange`. | Function({ maxDate, minDate }) | -                 | -           |
+
+### Accesso directo
+| Atributo | Descripción                              | Tipo     | Valores aceptados | Por defecto |
+| -------- | ---------------------------------------- | -------- | ----------------- | ----------- |
+| text     | título del acceso directo                | string   | —                 | —           |
+| onClick  | una función se dispara al hacer clic en el acceso directo, con`vm`como parámetro. Puede modificar el valor del picker emitiendo el evento `pick`. Ejemplo: `vm.$emit('pick', new Date())` | function | —                 | —           |
+
+
+### Eventos
+| Nombre | Descripción                              | Parametros                   |
+| ------ | ---------------------------------------- | ---------------------------- |
+| change | se dispara cuando el usuario confirma el valor | valor enlazado al componente |
+| blur   | se dispara cuando el input pierde el foco | instancia del componente     |
+| focus  | se dispara cuando el input obtiene el foco | instancia del componente     |
+
+### Metodos
+| Metodo | Descripción                | Parameteros |
+| ------ | -------------------------- | ----------- |
+| focus  | coloca el foco en el input | —           |
+
diff --git a/examples/docs/es/datetime-picker.md b/examples/docs/es/datetime-picker.md
new file mode 100644
index 0000000000..ba6715b07f
--- /dev/null
+++ b/examples/docs/es/datetime-picker.md
@@ -0,0 +1,329 @@
+<script>
+  module.exports = {
+    data() {
+      return {
+        pickerOptions1: {
+          shortcuts: [{
+            text: 'Today',
+            onClick(picker) {
+              picker.$emit('pick', new Date());
+            }
+          }, {
+            text: 'Yesterday',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit('pick', date);
+            }
+          }, {
+            text: 'A week ago',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', date);
+            }
+          }]
+        },
+        pickerOptions2: {
+          shortcuts: [{
+            text: 'Last week',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: 'Last month',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: 'Last 3 months',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        value1: '',
+        value2: '',
+        value3: '',
+        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+        value5: '',
+        value6: '',
+        value7: ''
+      };
+    }
+  };
+</script>
+
+<style>
+.demo-block.demo-datetime-picker .source {
+    padding: 0;
+    display: flex;
+  }
+
+  .demo-datetime-picker .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    flex: 1;
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .demo-datetime-picker .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+</style>
+
+## DateTimePicker
+
+Seleccionar fecha y tiempo juntos en un picker.
+
+:::tip
+DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más detallada sobre `pickerOptions` y otros atributos, puede referirse a DatePicker y TimePicker.
+:::
+
+###  Fecha y hora
+
+:::demo Puede seleccionar la fecha y la hora en un picker al mismo tiempo configurando el tipo de fecha y la hora. La forma de utilizar los atajos es la misma que con Date Picker.
+
+
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Default</span>
+    <el-date-picker
+      v-model="value1"
+      type="datetime"
+      placeholder="Select date and time">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">With shortcuts</span>
+    <el-date-picker
+      v-model="value2"
+      type="datetime"
+      placeholder="Select date and time"
+      :picker-options="pickerOptions1">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">With default time</span>
+    <el-date-picker
+      v-model="value3"
+      type="datetime"
+      placeholder="Select date and time"
+      default-time="12:00:00">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        pickerOptions1: {
+          shortcuts: [{
+            text: 'Today',
+            onClick(picker) {
+              picker.$emit('pick', new Date());
+            }
+          }, {
+            text: 'Yesterday',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit('pick', date);
+            }
+          }, {
+            text: 'A week ago',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', date);
+            }
+          }]
+        },
+        value1: '',
+        value2: '',
+        value3: ''
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Alcance de fecha y tiempo
+
+:::demo Puede seleccionar la fecha y el rango de tiempo ajustando `type` a `datetimerange`.
+
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Default</span>
+    <el-date-picker
+      v-model="value4"
+      type="datetimerange"
+      range-separator="To"
+      start-placeholder="Start date"
+      end-placeholder="End date">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">With shortcuts</span>
+    <el-date-picker
+      v-model="value5"
+      type="datetimerange"
+      :picker-options="pickerOptions2"
+      range-separator="To"
+      start-placeholder="Start date"
+      end-placeholder="End date"
+      align="right">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        pickerOptions2: {
+          shortcuts: [{
+            text: 'Last week',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: 'Last month',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: 'Last 3 months',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+        value5: ''
+      };
+    }
+  };
+</script>
+```
+:::
+
+###  Default time value for start date and end date
+
+:::demo When picking date range on the date panel with type `datetimerange`, `00:00:00` will be used as the default time value for start and end date. We can control it with the `default-time` attribute. `default-time` accepts an array of up to two strings. The first item controls time value of the start date and the second item controls time value of the end date.
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Start date time 12:00:00</span>
+    <el-date-picker
+      v-model="value6"
+      type="datetimerange"
+      start-placeholder="Start Date"
+      end-placeholder="End Date"
+      :default-time="['12:00:00']">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">Start date time 12:00:00, end date time 08:00:00</span>
+    <el-date-picker
+      v-model="value7"
+      type="datetimerange"
+      align="right"
+      start-placeholder="Start Date"
+      end-placeholder="End Date"
+      :default-time="['12:00:00', '08:00:00']">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value6: '',
+        value7: ''
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Atributos
+| Atributos          | Descripción                              | Tipo              | Valores aceptados                        | Por defecto          |
+| ------------------ | ---------------------------------------- | ----------------- | ---------------------------------------- | -------------------- |
+| readonly           | si DatePicker es solo de lectura         | boolean           | —                                        | false                |
+| disabled           | si DatePicker esta deshabilitada         | boolean           | —                                        | false                |
+| editable           | Si la entrada es editable                | boolean           | —                                        | true                 |
+| clearable          | Si mostrar el botón de `clear`           | boolean           | —                                        | true                 |
+| size               | tamaño del input                         | string            | large/small/mini                         | —                    |
+| placeholder        | placeholder cuando el modo NO es Range   | string            | —                                        | —                    |
+| start-placeholder  | placeholder para el inicio de fecha en el modo Range | string            | —                                        | —                    |
+| end-placeholder    | placeholder para el fin de fecha en el modo Range | string            | —                                        | —                    |
+| time-arrow-control | si se puede modificar el `time`  utilizando botones con flechas | boolean           | —                                        | false                |
+| type               | tipo del picker                          | string            | year/month/date/datetime/ week/datetimerange/daterange | date                 |
+| format             | formato de valor mostrado en el input    | string            | ver [date formats](#/es/component/date-picker#date-formats) | yyyy-MM-dd           |
+| align              | alineación                               | left/center/right | left                                     |                      |
+| popper-class       | nombre de clase personalizado para el Dropdown de DatePicker | string            | —                                        | —                    |
+| picker-options     | opciones adicionales, Comprueba la tabla de mas abajo | object            | —                                        | {}                   |
+| range-separator    | separador de rango                       | string            | -                                        | '-'                  |
+| default-value      | opcional, fecha predeterminada del calendario | Fecha             | cualquier cosa aceptada por `new Date()` — |                      |
+| default-time | el valor de tiempo por defecto después de elegir una fecha | non-range: string / range: string[] | non-range: Una cadena de texto como `12:00:00`, range: array de dos strings, el primero es para la fecha de inicio y el segundo para la fecha final. 00:00:00 se utilizará si no se especifica | — |
+| value-format       | opcional, formato de valor de enlazado. Si no se especifica, el valor de enlazado será un objeto Date | cadena            | ver [date formats](#/es/component/date-picker#date-formats) | —                    |
+| name               | igual que `name` en la entrada nativa    | string            | —                                        | —                    |
+| unlink-panels      | desconectar dos date-panels en range-picker | boolean           | —                                        | false                |
+| prefix-icon        | Clase personalizada para el icono prefijado | string            | —                                        | el-icon-date         |
+| clear-icon         | Clase personalizada para el icono `clear` | string            | —                                        | el-icon-circle-close |
+
+### Picker Options
+| Atributo       | Descripción                              | Tipo     | Valores aceptados | Por defecto |
+| -------------- | ---------------------------------------- | -------- | ----------------- | ----------- |
+| shortcuts      | un array de objetos { text, onClick } para establecer las opciones de acceso directo, verifique la tabla debajo | objeto[] | —                 | —           |
+| disabledDate   | una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un booleano | función  | —                 | —           |
+| firstDayOfWeek | primera día de semana                    | Número   | 1 to 7            | 7           |
+
+### Accesos directos
+| Atributo | Descripción                              | Tipo     | Valores aceptados | Por defecto |
+| -------- | ---------------------------------------- | -------- | ----------------- | ----------- |
+| text     | título del acceso directo                | string   | —                 | —           |
+| onClick  | la funcion se dispara cuando se hace clic en el acceso directo, con el `vm` como parámetro. Puede modificar el valor del picker emitiendo el evento`pick`. Ejemplo: `vm.$emit('pick', new Date())` | function | —                 | —           |
+
+### Eventos
+| Nombre de evento | Descripción                              | Parámetros                    |
+| ---------------- | ---------------------------------------- | ----------------------------- |
+| change           | Se dispara cuando el usuario confirma el valor | valor enlazado del componente |
+| blur             | Se dispara cuando el input pierde el foco | instancia del componente      |
+| focus            | Se dispara cuando el input obtiene el foco | instancia del componente      |
+
+### Métodos
+| Método | Descripción      | Parámetros |
+| ------ | ---------------- | ---------- |
+| focus  | foco en el input | —          |
diff --git a/examples/docs/es/dialog.md b/examples/docs/es/dialog.md
new file mode 100644
index 0000000000..6539462c33
--- /dev/null
+++ b/examples/docs/es/dialog.md
@@ -0,0 +1,323 @@
+<script>
+  module.exports = {
+    data() {
+      return {
+        gridData: [{
+          date: '2016-05-02',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }, {
+          date: '2016-05-04',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }, {
+          date: '2016-05-01',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }, {
+          date: '2016-05-03',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }],
+        dialogVisible: false,
+        dialogTableVisible: false,
+        dialogFormVisible: false,
+        outerVisible: false,
+        innerVisible: false,
+        centerDialogVisible: false,
+        form: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
+        formLabelWidth: '120px'
+      };
+    },
+    methods: {
+      handleClose(done) {
+        this.$confirm('Are you sure to close this dialog?')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      }
+    }
+  };
+</script>
+
+<style>
+  .demo-box.demo-dialog {
+    .dialog-footer button:first-child {
+      margin-right: 10px;
+    }
+    .full-image {
+      width: 100%;
+    }
+    .el-dialog__wrapper {
+      margin: 0;
+    }
+    .el-select {
+      width: 300px;
+    }
+    .el-input {
+      width: 300px;
+    }
+    .el-button--text {
+      margin-right: 15px;
+    }
+  }
+</style>
+
+## Dialog
+
+Informar a usuarios preservando el estado de la página actual.
+
+### Uso Básico
+
+Dialog abre una caja de diálogo, y es bastante personalizable.
+
+:::demo Establezca el atributo `visible` con un booleano, y el Dialog se muestra cuando es `true`. El diálogo tiene dos partes: `body` y `footer`,  este último requiere un slot llamado `footer`. El atributo `title` es opcional (vacío por defecto) y sirve para definir un título. Por último, este ejemplo muestra cómo se utiliza `before-close`.
+
+
+```html
+<el-button type="text" @click="dialogVisible = true">click to open the Dialog</el-button>
+
+<el-dialog
+  title="Tips"
+  :visible.sync="dialogVisible"
+  width="30%"
+  :before-close="handleClose">
+  <span>This is a message</span>
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogVisible = false">Cancel</el-button>
+    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
+  </span>
+</el-dialog>
+
+<script>
+  export default {
+    data() {
+      return {
+        dialogVisible: false
+      };
+    },
+    methods: {
+      handleClose(done) {
+        this.$confirm('Are you sure to close this dialog?')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      }
+    }
+  };
+</script>
+```
+:::
+
+:::tip
+
+`before-close`  sólo funciona cuando el usuario hace clic en el icono de cerrar o en el fondo. Si tiene botones que cierran el cuadro de diálogo en el slot llamado `footer`, puede agregar lo que haría `before-close` en el manejador de eventos de los botones.
+
+:::
+
+### Personalizaciones
+
+
+El contenido del Diálogo puede ser cualquier cosa, incluso una tabla o un formulario. Este ejemplo muestra cómo usar Element Table y Form con Dialog
+
+:::demo
+
+```html
+<!-- Table -->
+<el-button type="text" @click="dialogTableVisible = true">open a Table nested Dialog</el-button>
+
+<el-dialog title="Shipping address" :visible.sync="dialogTableVisible">
+  <el-table :data="gridData">
+    <el-table-column property="date" label="Date" width="150"></el-table-column>
+    <el-table-column property="name" label="Name" width="200"></el-table-column>
+    <el-table-column property="address" label="Address"></el-table-column>
+  </el-table>
+</el-dialog>
+
+<!-- Form -->
+<el-button type="text" @click="dialogFormVisible = true">open a Form nested Dialog</el-button>
+
+<el-dialog title="Shipping address" :visible.sync="dialogFormVisible">
+  <el-form :model="form">
+    <el-form-item label="Promotion name" :label-width="formLabelWidth">
+      <el-input v-model="form.name" autocomplete="off"></el-input>
+    </el-form-item>
+    <el-form-item label="Zones" :label-width="formLabelWidth">
+      <el-select v-model="form.region" placeholder="Please select a zone">
+        <el-option label="Zone No.1" value="shanghai"></el-option>
+        <el-option label="Zone No.2" value="beijing"></el-option>
+      </el-select>
+    </el-form-item>
+  </el-form>
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogFormVisible = false">Cancel</el-button>
+    <el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>
+  </span>
+</el-dialog>
+
+<script>
+  export default {
+    data() {
+      return {
+        gridData: [{
+          date: '2016-05-02',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }, {
+          date: '2016-05-04',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }, {
+          date: '2016-05-01',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }, {
+          date: '2016-05-03',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }],
+        dialogTableVisible: false,
+        dialogFormVisible: false,
+        form: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
+        formLabelWidth: '120px'
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Diálogo anidado
+Si un diálogo está anidado en otro diálogo, se requiere append-to-body.
+
+:::demo Normalmente no recomendamos el uso de Dialog anidado. Si necesita que se muestren múltiples diálogos en la página, puede simplemente aplanarlos para que sean hermanos entre sí. Si debe anidar un Diálogo dentro de otro Diálogo, establezca `append-to-body` del Diálogo anidado como true, y lo añadirá al cuerpo en lugar de su nodo padre, para que ambos Diálogos puedan ser correctamente renderizados.
+
+```html
+<template>
+  <el-button type="text" @click="outerVisible = true">open the outer Dialog</el-button>
+  
+  <el-dialog title="Outer Dialog" :visible.sync="outerVisible">
+    <el-dialog
+        width="30%"
+        title="Inner Dialog"
+        :visible.sync="innerVisible"
+        append-to-body>
+    </el-dialog>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="outerVisible = false">Cancel</el-button>
+      <el-button type="primary" @click="innerVisible = true">open the inner Dialog</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        outerVisible: false,
+        innerVisible: false
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Contenido centrado
+El contenido de Diálogo se puede centrar.
+
+:::demo Ajuste `center` en `true` para centrar el encabezado y el pie de página del cuadro de diálogo horizontalmente. `center` sólo afecta al encabezado y pie de página de Dialog. El cuerpo de Dialog puede ser cualquier cosa, así que a veces no se ve bien cuando está centrado. Necesitas escribir algún CSS si deseas centrar el cuerpo también.
+
+```html
+<el-button type="text" @click="centerDialogVisible = true">Click to open the Dialog</el-button>
+
+<el-dialog
+  title="Warning"
+  :visible.sync="centerDialogVisible"
+  width="30%"
+  center>
+  <span>It should be noted that the content will not be aligned in center by default</span>
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="centerDialogVisible = false">Cancel</el-button>
+    <el-button type="primary" @click="centerDialogVisible = false">Confirm</el-button>
+  </span>
+</el-dialog>
+
+<script>
+  export default {
+    data() {
+      return {
+        centerDialogVisible: false
+      };
+    }
+  };
+</script>
+```
+:::
+
+:::tip
+The content of Dialog is lazily rendered, which means the default slot is not rendered onto the DOM until it is firstly opened. Therefore, if you need to perform a DOM manipulation or access a component using `ref`, do it in the `open` event callback.
+:::
+
+:::tip
+
+Si la variable ligada a `visible` se gestiona en el Vuex store, el `.sync` no puede funcionar correctamente. En este caso, elimine el modificador `.sync`, escuche los eventos de `open` y `close` Dialog, y confirme las mutaciones Vuex para actualizar el valor de esa variable en los manejadores de eventos.
+
+:::
+
+### Atributo
+
+| Atributo              | Descripción                              | Tipo                                     | Valores aceptados | Por defecto |
+| --------------------- | ---------------------------------------- | ---------------------------------------- | ----------------- | ----------- |
+| visible               | visibilidad del Diálogo, apoya el modificador .sync | boolean                                  | —                 | false       |
+| title                 | título de Diálogo. También se puede pasar con un slot con nombre (ver la tabla siguiente) | string                                   | —                 | —           |
+| width                 | anchura de Diálogo                       | string                                   | —                 | 50%         |
+| fullscreen            | si el diálogo ocupa pantalla completa    | boolean                                  | —                 | false       |
+| top                   | valor de `margin-top` del Diálogo CSS    | string                                   | —                 | 15vh        |
+| modal                 | si se muestra una máscara                | boolean                                  | —                 | true        |
+| modal-append-to-body  | si adjuntar modal al elemento de cuerpo. Si es falso,el modal se agregará al elemento principal de Diálogo | boolean                                  | —                 | true        |
+| append-to-body        | Si adjuntar el cuadro de diálogo al cuerpo | boolean                                  | —                 | false       |
+| lock-scroll           | Si el scroll del cuerpo está desactivado mientras se muestra el cuadro de diálogo | boolean                                  | —                 | true        |
+| custom-class          | nombres de clase personalizada para el Diálogo | string                                   | —                 | —           |
+| close-on-click-modal  | si el Diálogo puede ser cerrado haciendo clic en la máscara | boolean                                  | —                 | true        |
+| close-on-press-escape | si el Diálogo puede ser cerrado presionando ESC | boolean                                  | —                 | true        |
+| show-close            | si mostrar un botón de cerrar            | boolean                                  | —                 | true        |
+| before-close          | una devolución de llamada antes de que se cierre el cuadro de diálogo, y evitar cerrar el cuadro de diálogo | función(done) `done`se usa para cerrar el diálog | —                 | —           |
+| center                | si alinear el encabezado y el pie de página en el centro | boolean                                  | —                 | false       |
+
+### Slots
+
+| Nombre | Descripcíon                            |
+| ------ | -------------------------------------- |
+| —      | contenido de Diálogo                   |
+| title  | contenido del título de Diálogo        |
+| footer | contenido del pie de página de Diálogo |
+
+### Eventos
+| Nombre de Evento | Descripcíon                              | Parámetros |
+| ---------------- | ---------------------------------------- | ---------- |
+| open             | se activa cuando se abre el cuadro de Diálogo | —          |
+| opened           | se activa cuando la animacion de apertura del Dialog termina. | — |
+| close            | se dispara cuando el Diálogo se cierra   | —          |
+| closed           | se activa cuando finaliza la animación de cierre del Diálog | — |
+
diff --git a/examples/docs/es/dropdown.md b/examples/docs/es/dropdown.md
new file mode 100644
index 0000000000..f1d87f1765
--- /dev/null
+++ b/examples/docs/es/dropdown.md
@@ -0,0 +1,355 @@
+<style>
+  .demo-box {
+    .el-dropdown {
+      vertical-align: top;
+    
+      & + .el-dropdown {
+        margin-left: 15px;
+      }
+    }
+    .el-dropdown-link {
+      cursor: pointer;
+      color: #409EFF;
+    }
+    .el-icon-arrow-down {
+      font-size: 12px;
+    }
+  }
+
+  .block-col-2 {
+    margin: -24px;
+
+    .el-col {
+      padding: 30px 0;
+      text-align: center;
+      border-right: 1px solid #eff2f6;
+    
+      &:last-child {
+        border-right: 0;
+      }
+    }
+  }
+
+ .demo-dropdown .demonstration {
+   display: block;
+   color: #8492a6;
+   font-size: 14px;
+   margin-bottom: 20px;
+ }
+</style>
+
+<script>
+  export default {
+    methods: {
+      handleClick() {
+        alert('button click');
+      },
+      handleCommand(command) {
+        this.$message('click on item ' + command);
+      }
+    }
+  }
+</script>
+## Dropdown
+Menú conmutable para visualizar listas de enlaces y acciones.
+
+### Uso básico
+Pase el ratón por el menú desplegable para desplegarlo y obtener más acciones.
+
+:::demo El elemento desencadenante se representa con el slot predeterminado, y la parte desplegable se representa con el slot llamado dropdown. Por defecto, la lista desplegable se muestra cuando se pasa el ratón por encima del elemento desencadenante sin necesidad de hacer clic en él.
+
+```html
+<el-dropdown>
+  <span class="el-dropdown-link">
+    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
+  </span>
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>Action 1</el-dropdown-item>
+    <el-dropdown-item>Action 2</el-dropdown-item>
+    <el-dropdown-item>Action 3</el-dropdown-item>
+    <el-dropdown-item disabled>Action 4</el-dropdown-item>
+    <el-dropdown-item divided>Action 5</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+</style>
+
+```
+
+:::
+
+### Elemento detonante
+
+Utilizando un botón para activar la lista desplegable.
+
+:::demo Utilice `split-button` para dividir el elemento detonante en un grupo de botones, siendo el botón izquierdo un botón normal y el botón derecho el objetivo real de la detonacion. Si desea insertar una línea de separación entre la posición tres y la posición cuatro, sólo añada un divisor de clase a la posición cuatro.
+
+```html
+<el-dropdown>
+  <el-button type="primary">
+    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
+  </el-button>
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>Action 1</el-dropdown-item>
+    <el-dropdown-item>Action 2</el-dropdown-item>
+    <el-dropdown-item>Action 3</el-dropdown-item>
+    <el-dropdown-item>Action 4</el-dropdown-item>
+    <el-dropdown-item>Action 5</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+<el-dropdown split-button type="primary" @click="handleClick">
+  Dropdown List
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>Action 1</el-dropdown-item>
+    <el-dropdown-item>Action 2</el-dropdown-item>
+    <el-dropdown-item>Action 3</el-dropdown-item>
+    <el-dropdown-item>Action 4</el-dropdown-item>
+    <el-dropdown-item>Action 5</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<style>
+  .el-dropdown {
+    vertical-align: top;
+  }
+  .el-dropdown + .el-dropdown {
+    margin-left: 15px;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+</style>
+
+<script>
+  export default {
+    methods: {
+      handleClick() {
+        alert('button click');
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Cómo detonar el evento
+
+Haga clic en el elemento detonante o sobre él.
+
+:::demo Utilice el atributo `trigger`. Por defecto, es `hover`.
+
+```html
+<el-row class="block-col-2">
+  <el-col :span="12">
+    <span class="demonstration">hover to trigger</span>
+    <el-dropdown>
+      <span class="el-dropdown-link">
+        Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item>Action 1</el-dropdown-item>
+        <el-dropdown-item>Action 2</el-dropdown-item>
+        <el-dropdown-item>Action 3</el-dropdown-item>
+        <el-dropdown-item>Action 4</el-dropdown-item>
+        <el-dropdown-item>Action 5</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </el-col>
+  <el-col :span="12">
+    <span class="demonstration">click to trigger</span>
+    <el-dropdown trigger="click">
+      <span class="el-dropdown-link">
+        Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item>Action 1</el-dropdown-item>
+        <el-dropdown-item>Action 2</el-dropdown-item>
+        <el-dropdown-item>Action 3</el-dropdown-item>
+        <el-dropdown-item>Action 4</el-dropdown-item>
+        <el-dropdown-item>Action 5</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </el-col>
+</el-row>
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+  .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+</style>
+```
+:::
+
+### Ocultamiento del menú
+
+Use `hide-on-click` para definir si el menú se cierra al hacer clic.
+
+:::demo El menú predeterminado se cerrará cuando haga clic en los elementos del menú, y se puede desactivar configurando `hide-on-click` como false.
+
+```html
+<el-dropdown :hide-on-click="false">
+  <span class="el-dropdown-link">
+    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
+  </span>
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>Action 1</el-dropdown-item>
+    <el-dropdown-item>Action 2</el-dropdown-item>
+    <el-dropdown-item>Action 3</el-dropdown-item>
+    <el-dropdown-item disabled>Action 4</el-dropdown-item>
+    <el-dropdown-item divided>Action 5</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+</style>
+```
+:::
+
+### Evento command
+
+Al hacer clic en cada elemento desplegable se detona un evento cuyo parámetro es asignado por cada elemento.
+
+:::demo
+```html
+<el-dropdown @command="handleCommand">
+  <span class="el-dropdown-link">
+    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
+  </span>
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item command="a">Action 1</el-dropdown-item>
+    <el-dropdown-item command="b">Action 2</el-dropdown-item>
+    <el-dropdown-item command="c">Action 3</el-dropdown-item>
+    <el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>
+    <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+</style>
+
+<script>
+  export default {
+    methods: {
+      handleCommand(command) {
+        this.$message('click on item ' + command);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Tamaños
+
+Además del tamaño predeterminado, el componente Dropdown proporciona tres tamaños adicionales para que pueda elegir entre diferentes escenarios
+
+:::demo Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `small` o `mini`.
+
+```html
+<el-dropdown split-button type="primary">
+  Default
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>Action 1</el-dropdown-item>
+    <el-dropdown-item>Action 2</el-dropdown-item>
+    <el-dropdown-item>Action 3</el-dropdown-item>
+    <el-dropdown-item>Action 4</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<el-dropdown size="medium" split-button type="primary">
+  Medium
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>Action 1</el-dropdown-item>
+    <el-dropdown-item>Action 2</el-dropdown-item>
+    <el-dropdown-item>Action 3</el-dropdown-item>
+    <el-dropdown-item>Action 4</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<el-dropdown size="small" split-button type="primary">
+  Small
+  <el-dropdown-menu slot="dropdown">
+   <el-dropdown-item>Action 1</el-dropdown-item>
+   <el-dropdown-item>Action 2</el-dropdown-item>
+   <el-dropdown-item>Action 3</el-dropdown-item>
+   <el-dropdown-item>Action 4</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<el-dropdown size="mini" split-button type="primary">
+  Mini
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>Action 1</el-dropdown-item>
+    <el-dropdown-item>Action 2</el-dropdown-item>
+    <el-dropdown-item>Action 3</el-dropdown-item>
+    <el-dropdown-item>Action 4</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+```
+:::
+
+
+### Dropdown atributos
+| Atributo      | Descripción                              | Tipo    | Valores aceptados                        | Por defecto |
+| ------------- | ---------------------------------------- | ------- | ---------------------------------------- | ----------- |
+| type          | tipo de botón de menú, consulte Componente`Button`, sólo funciona cuando `split-button` es true. | string  | —                                        | —           |
+| size          | tamaño del menú, también funciona en `split-button` | string  | medium / small / mini                    | —           |
+| split-button  | si se visualiza un grupo de botones      | boolean | —                                        | false       |
+| placement     | colocación del menú                      | string  | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end  |
+| trigger       | cómo detonar                             | string  | hover/click                              | hover       |
+| hide-on-click | si se oculta el menú después de hacer clic en el elemento | boolean | —                                        | true        |
+| show-timeout  | Tiempo de retardo antes de mostrar un dropdown (solamente trabaja cuando se dispara `hover`) | number  | —                                        | 250         |
+| hide-timeout  | Tiempo de retardo antes de ocultar un dropdown (solamente trabaja cuando se dispara `hover`) | number  | —                                        | 150         |
+
+### Dropdown Slots
+
+| Nombre | Descripción |
+|------|--------|
+| — | content of Dropdown. Notice: Must be a valid html dom element (ex. `<span>, <button> etc.`) or `el-component`, to attach the trigger listener  |
+| dropdown | content of the Dropdown Menu, usually a `<el-dropdown-menu>` element |
+
+### Dropdown Eventos
+| Nombre         | Descripción                              | Parametros                               |
+| -------------- | ---------------------------------------- | ---------------------------------------- |
+| click          | si `split-button` es `true`, se activa al hacer clic en el botón izquierdo | —                                        |
+| command        | activa cuando se hace clic en un elemento desplegable | el comando enviado desde el elemento desplegable |
+| visible-change | se activa cuando aparece/desaparece el desplegable | true cuando aparece, y false de otro modo |
+
+### Dropdown Menu Item Atributos
+| Atributo | Descripción                              | Tipo                 | Valores aceptados | Por defecto |
+| -------- | ---------------------------------------- | -------------------- | ----------------- | ----------- |
+| command  | un comando que se enviará al `command` callback del Dropdown | string/number/object | —                 | —           |
+| disabled | si el elemento está desactivado          | boolean              | —                 | false       |
+| divided  | si se visualiza un divisor               | boolean              | —                 | false       |
diff --git a/examples/docs/es/form.md b/examples/docs/es/form.md
new file mode 100644
index 0000000000..23701e6777
--- /dev/null
+++ b/examples/docs/es/form.md
@@ -0,0 +1,910 @@
+<script>
+  export default {
+    data() {
+      var checkAge = (rule, value, callback) => {
+        if (!value) {
+          return callback(new Error('Please input the age'));
+        }
+        setTimeout(() => {
+          if (!Number.isInteger(value)) {
+            callback(new Error('Please input digits'));
+          } else {
+            if (value < 18) {
+              callback(new Error('Age must be greater than 18'));
+            } else {
+              callback();
+            }
+          }
+        }, 1000);
+      };
+      var validatePass = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('Please input the password'));
+        } else {
+          if (this.ruleForm2.checkPass !== '') {
+            this.$refs.ruleForm2.validateField('checkPass');
+          }
+          callback();
+        }
+      };
+      var validatePass2 = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('Please input the password again'));
+        } else if (value !== this.ruleForm2.pass) {
+          callback(new Error('Two inputs don\'t match!'));
+        } else {
+          callback();
+        }
+      };
+      return {
+        form: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
+        sizeForm: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
+        formInline: {
+          user: '',
+          region: ''
+        },
+        labelPosition: 'right',
+        formLabelAlign: {
+          name: '',
+          region: '',
+          type: ''
+        },
+        ruleForm: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
+        ruleForm2: {
+          pass: '',
+          checkPass: '',
+          age: ''
+        },
+        formLabelWidth: '80px',
+        options: [
+        ],
+        rules: {
+          name: [
+            { required: true, message: 'Please input Activity name', trigger: 'blur' },
+            { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
+          ],
+          region: [
+            { required: true, message: 'Please select Activity zone', trigger: 'change' }
+          ],
+          date1: [
+            { type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }
+          ],
+          date2: [
+            { type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }
+          ],
+          type: [
+            { type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }
+          ],
+          resource: [
+            { required: true, message: 'Please select activity resource', trigger: 'change' }
+          ],
+          desc: [
+            { required: true, message: 'Please input activity form', trigger: 'blur' }
+          ]
+        },
+        rules2: {
+          pass: [
+            { validator: validatePass, trigger: 'blur' }
+          ],
+          checkPass: [
+            { validator: validatePass2, trigger: 'blur' }
+          ],
+          age: [
+            { validator: checkAge, trigger: 'blur' }
+          ]
+        },
+        dynamicValidateForm: {
+          domains: [{
+            key: Date.now(),
+            value: ''
+          }],
+          email: ''
+        },
+        numberValidateForm: {
+          age: ''
+        }
+      };
+    },
+    methods: {
+      onSubmit() {
+        console.log('submit!');
+      },
+      onRuleFormSubmit() {
+        console.log('onRuleFormSubmit');
+      },
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      },
+      removeDomain(item) {
+        var index = this.dynamicValidateForm.domains.indexOf(item)
+        if (index !== -1) {
+          this.dynamicValidateForm.domains.splice(index, 1)
+        }
+      },
+      addDomain() {
+        this.dynamicValidateForm.domains.push({
+          key: Date.now(),
+          value: ''
+        });
+      }
+    }
+  }
+</script>
+
+<style>
+  .demo-form.demo-es {
+    .el-select .el-input {
+      width: 360px;
+    }
+    .el-form {
+      width: 480px;
+    }
+
+    .line {
+      text-align: center;
+    }
+    
+    .el-checkbox-group {
+      width: 320px;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    
+      &:after, &:before {
+        content: ' ';
+        display: table;
+      }
+      &:after {
+        clear: both;
+        visibility: hidden;
+        font-size: 0;
+        height: 0;
+      }
+    
+      .el-checkbox {
+        float: left;
+        width: 160px;
+        padding-right: 20px;
+        margin: 0;
+        padding: 0;
+    
+        + .el-checkbox {
+          margin-left: 0;
+        }
+      }
+    }
+    .demo-form-normal {
+      width: 480px;
+    }
+    .demo-form-inline {
+      width: auto;
+    
+      .el-input {
+        width: 150px;
+      }
+      > * {
+        margin-right: 10px;
+      }
+    }
+    .demo-ruleForm {
+      width: 480px;
+    
+      .el-select .el-input {
+        width: 360px;
+      }
+    }
+    .demo-dynamic {
+      width: 500px;
+    
+      .el-input {
+        margin-right: 10px;
+        width: 270px;
+        vertical-align: top;
+      }
+    }
+    .fr {
+      float: right;
+    }
+  }
+</style>
+
+## Form
+
+Form consiste en `input`, `radio`, `select`, `checkbox`, etcétera. Con el formulario, usted puede recopilar, verificar y enviar datos.
+
+### Form básico
+
+Incluye todo tipo de entradas, tales como `input`, `select`, `radio` y `checkbox`.
+
+:::demo En cada componente `form`, necesita un campo `form-item` para que sea el contenedor del item.
+
+```html
+<el-form ref="form" :model="form" label-width="120px">
+  <el-form-item label="Activity name">
+    <el-input v-model="form.name"></el-input>
+  </el-form-item>
+  <el-form-item label="Activity zone">
+    <el-select v-model="form.region" placeholder="please select your zone">
+      <el-option label="Zone one" value="shanghai"></el-option>
+      <el-option label="Zone two" value="beijing"></el-option>
+    </el-select>
+  </el-form-item>
+  <el-form-item label="Activity time">
+    <el-col :span="11">
+      <el-date-picker type="date" placeholder="Pick a date" v-model="form.date1" style="width: 100%;"></el-date-picker>
+    </el-col>
+    <el-col class="line" :span="2">-</el-col>
+    <el-col :span="11">
+      <el-time-picker type="fixed-time" placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>
+    </el-col>
+  </el-form-item>
+  <el-form-item label="Instant delivery">
+    <el-switch v-model="form.delivery"></el-switch>
+  </el-form-item>
+  <el-form-item label="Activity type">
+    <el-checkbox-group v-model="form.type">
+      <el-checkbox label="Online activities" name="type"></el-checkbox>
+      <el-checkbox label="Promotion activities" name="type"></el-checkbox>
+      <el-checkbox label="Offline activities" name="type"></el-checkbox>
+      <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>
+    </el-checkbox-group>
+  </el-form-item>
+  <el-form-item label="Resources">
+    <el-radio-group v-model="form.resource">
+      <el-radio label="Sponsor"></el-radio>
+      <el-radio label="Venue"></el-radio>
+    </el-radio-group>
+  </el-form-item>
+  <el-form-item label="Activity form">
+    <el-input type="textarea" v-model="form.desc"></el-input>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="onSubmit">Create</el-button>
+    <el-button>Cancel</el-button>
+  </el-form-item>
+</el-form>
+<script>
+  export default {
+    data() {
+      return {
+        form: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        }
+      }
+    },
+    methods: {
+      onSubmit() {
+        console.log('submit!');
+      }
+    }
+  }
+</script>
+```
+
+:::
+
+:::tip
+[W3C](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2) reglamenta que
+
+> <i>Cuando sólo hay un campo de entrada de texto de una sola línea en un formulario, el agente usuario debe aceptar <b>Enter</b> en ese campo como una solicitud para enviar el formulario.</i>
+
+Para prevenir este comportamiento, puede agregar `@submit.native.prevent` on `<el-form>`.
+:::
+
+### Formulario inline
+
+Cuando el espacio vertical es limitado y la forma es relativamente simple, puede ponerlo en una unica línea.
+
+:::demo Establezca el atributo `inline` como `true` y el formulario sera inline.
+
+```html
+<el-form :inline="true" :model="formInline" class="demo-form-inline">
+  <el-form-item label="Approved by">
+    <el-input v-model="formInline.user" placeholder="Approved by"></el-input>
+  </el-form-item>
+  <el-form-item label="Activity zone">
+    <el-select v-model="formInline.region" placeholder="Activity zone">
+      <el-option label="Zone one" value="shanghai"></el-option>
+      <el-option label="Zone two" value="beijing"></el-option>
+    </el-select>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="onSubmit">Query</el-button>
+  </el-form-item>
+</el-form>
+<script>
+  export default {
+    data() {
+      return {
+        formInline: {
+          user: '',
+          region: ''
+        }
+      }
+    },
+    methods: {
+      onSubmit() {
+        console.log('submit!');
+      }
+    }
+  }
+</script>
+```
+
+:::
+
+### Alineamiento
+
+Dependiendo de su diseño, hay varias maneras diferentes de alinear el elemento de la etiqueta.
+
+:::demo El atributo `label-position` decide cómo se alinean las etiquetas, puede estar `top` o `left`. Cuando se establece en `top`, las etiquetas se colocarán en la parte superior del campo de formulario.
+
+```html
+<el-radio-group v-model="labelPosition" size="small">
+  <el-radio-button label="left">Left</el-radio-button>
+  <el-radio-button label="right">Right</el-radio-button>
+  <el-radio-button label="top">Top</el-radio-button>
+</el-radio-group>
+<div style="margin: 20px;"></div>
+<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">
+  <el-form-item label="Name">
+    <el-input v-model="formLabelAlign.name"></el-input>
+  </el-form-item>
+  <el-form-item label="Activity zone">
+    <el-input v-model="formLabelAlign.region"></el-input>
+  </el-form-item>
+  <el-form-item label="Activity form">
+    <el-input v-model="formLabelAlign.type"></el-input>
+  </el-form-item>
+</el-form>
+<script>
+  export default {
+    data() {
+      return {
+        labelPosition: 'right',
+        formLabelAlign: {
+          name: '',
+          region: '',
+          type: ''
+        }
+      };
+    }
+  }
+</script>
+```
+
+:::
+
+### Validación
+
+El componente `form` le permite verificar sus datos, ayudándole a encontrar y corregir errores.
+
+:::demo Sólo tiene que añadir el atributo `rules` en el componente `Form`, pasar las reglas de validación y establecer el atributo `prop` para `Form-Item` como una clave específica que necesita ser validada. Ver más información en [async-validator](https://github.com/yiminghe/async-validator).
+
+```html
+<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
+  <el-form-item label="Activity name" prop="name">
+    <el-input v-model="ruleForm.name"></el-input>
+  </el-form-item>
+  <el-form-item label="Activity zone" prop="region">
+    <el-select v-model="ruleForm.region" placeholder="Activity zone">
+      <el-option label="Zone one" value="shanghai"></el-option>
+      <el-option label="Zone two" value="beijing"></el-option>
+    </el-select>
+  </el-form-item>
+  <el-form-item label="Activity time" required>
+    <el-col :span="11">
+      <el-form-item prop="date1">
+        <el-date-picker type="date" placeholder="Pick a date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
+      </el-form-item>
+    </el-col>
+    <el-col class="line" :span="2">-</el-col>
+    <el-col :span="11">
+      <el-form-item prop="date2">
+        <el-time-picker type="fixed-time" placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
+      </el-form-item>
+    </el-col>
+  </el-form-item>
+  <el-form-item label="Instant delivery" prop="delivery">
+    <el-switch v-model="ruleForm.delivery"></el-switch>
+  </el-form-item>
+  <el-form-item label="Activity type" prop="type">
+    <el-checkbox-group v-model="ruleForm.type">
+      <el-checkbox label="Online activities" name="type"></el-checkbox>
+      <el-checkbox label="Promotion activities" name="type"></el-checkbox>
+      <el-checkbox label="Offline activities" name="type"></el-checkbox>
+      <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>
+    </el-checkbox-group>
+  </el-form-item>
+  <el-form-item label="Resources" prop="resource">
+    <el-radio-group v-model="ruleForm.resource">
+      <el-radio label="Sponsorship"></el-radio>
+      <el-radio label="Venue"></el-radio>
+    </el-radio-group>
+  </el-form-item>
+  <el-form-item label="Activity form" prop="desc">
+    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="submitForm('ruleForm')">Create</el-button>
+    <el-button @click="resetForm('ruleForm')">Reset</el-button>
+  </el-form-item>
+</el-form>
+<script>
+  export default {
+    data() {
+      return {
+        ruleForm: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
+        rules: {
+          name: [
+            { required: true, message: 'Please input Activity name', trigger: 'blur' },
+            { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
+          ],
+          region: [
+            { required: true, message: 'Please select Activity zone', trigger: 'change' }
+          ],
+          date1: [
+            { type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }
+          ],
+          date2: [
+            { type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }
+          ],
+          type: [
+            { type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }
+          ],
+          resource: [
+            { required: true, message: 'Please select activity resource', trigger: 'change' }
+          ],
+          desc: [
+            { required: true, message: 'Please input activity form', trigger: 'blur' }
+          ]
+        }
+      };
+    },
+    methods: {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      }
+    }
+  }
+</script>
+```
+
+:::
+
+### Reglas personalizadas de validación
+
+Este ejemplo muestra cómo personalizar sus propias reglas de validación para finalizar una verificación de contraseña de dos pasos.
+
+:::demo Aquí utilizamos el `status-icon` para reflejar el resultado de la validación como un icono.
+
+```html
+<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
+  <el-form-item label="Password" prop="pass">
+    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
+  </el-form-item>
+  <el-form-item label="Confirm" prop="checkPass">
+    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
+  </el-form-item>
+  <el-form-item label="Age" prop="age">
+    <el-input v-model.number="ruleForm2.age"></el-input>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="submitForm('ruleForm2')">Submit</el-button>
+    <el-button @click="resetForm('ruleForm2')">Reset</el-button>
+  </el-form-item>
+</el-form>
+<script>
+  export default {
+    data() {
+      var checkAge = (rule, value, callback) => {
+        if (!value) {
+          return callback(new Error('Please input the age'));
+        }
+        setTimeout(() => {
+          if (!Number.isInteger(value)) {
+            callback(new Error('Please input digits'));
+          } else {
+            if (value < 18) {
+              callback(new Error('Age must be greater than 18'));
+            } else {
+              callback();
+            }
+          }
+        }, 1000);
+      };
+      var validatePass = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('Please input the password'));
+        } else {
+          if (this.ruleForm2.checkPass !== '') {
+            this.$refs.ruleForm2.validateField('checkPass');
+          }
+          callback();
+        }
+      };
+      var validatePass2 = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('Please input the password again'));
+        } else if (value !== this.ruleForm2.pass) {
+          callback(new Error('Two inputs don\'t match!'));
+        } else {
+          callback();
+        }
+      };
+      return {
+        ruleForm2: {
+          pass: '',
+          checkPass: '',
+          age: ''
+        },
+        rules2: {
+          pass: [
+            { validator: validatePass, trigger: 'blur' }
+          ],
+          checkPass: [
+            { validator: validatePass2, trigger: 'blur' }
+          ],
+          age: [
+            { validator: checkAge, trigger: 'blur' }
+          ]
+        }
+      };
+    },
+    methods: {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      }
+    }
+  }
+</script>
+```
+
+:::
+
+### Eliminar o agregar validaciones dinamicamente
+
+:::demo Además de pasar todas las reglas de validación al mismo tiempo en el componente `form`, también puede pasar las reglas de validación o borrar reglas en un único campo de formulario de forma dinámica.
+
+```html
+<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">
+  <el-form-item
+    prop="email"
+    label="Email"
+    :rules="[
+      { required: true, message: 'Please input email address', trigger: 'blur' },
+      { type: 'email', message: 'Please input correct email address', trigger: ['blur', 'change'] }
+    ]"
+  >
+    <el-input v-model="dynamicValidateForm.email"></el-input>
+  </el-form-item>
+  <el-form-item
+    v-for="(domain, index) in dynamicValidateForm.domains"
+    :label="'Domain' + index"
+    :key="domain.key"
+    :prop="'domains.' + index + '.value'"
+    :rules="{
+      required: true, message: 'domain can not be null', trigger: 'blur'
+    }"
+  >
+    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="submitForm('dynamicValidateForm')">Submit</el-button>
+    <el-button @click="addDomain">New domain</el-button>
+    <el-button @click="resetForm('dynamicValidateForm')">Reset</el-button>
+  </el-form-item>
+</el-form>
+<script>
+  export default {
+    data() {
+      return {
+        dynamicValidateForm: {
+          domains: [{
+            key: 1,
+            value: ''
+          }],
+          email: ''
+        }
+      };
+    },
+    methods: {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      },
+      removeDomain(item) {
+        var index = this.dynamicValidateForm.domains.indexOf(item);
+        if (index !== -1) {
+          this.dynamicValidateForm.domains.splice(index, 1);
+        }
+      },
+      addDomain() {
+        this.dynamicValidateForm.domains.push({
+          key: Date.now(),
+          value: ''
+        });
+      }
+    }
+  }
+</script>
+```
+
+:::
+
+### Validación numerica
+
+:::demo La validacion numerica necesita un modificador `.number` añadido en el enlace `v-model` de entrada, sirve para transformar el valor de la cadena al número proporcionado por Vuejs.
+
+```html
+<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
+  <el-form-item
+    label="age"
+    prop="age"
+    :rules="[
+      { required: true, message: 'age is required'},
+      { type: 'number', message: 'age must be a number'}
+    ]"
+  >
+    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="submitForm('numberValidateForm')">Submit</el-button>
+    <el-button @click="resetForm('numberValidateForm')">Reset</el-button>
+  </el-form-item>
+</el-form>
+<script>
+  export default {
+    data() {
+      return {
+        numberValidateForm: {
+          age: ''
+        }
+      };
+    },
+    methods: {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      }
+    }
+  }
+</script>
+```
+
+:::
+
+:::tip
+
+Cuando un `el-form-item` está anidado en otro `el-form-item`, su ancho de etiqueta será 0. Si es necesario, puede establecer el ancho de etiqueta en ese `el-form-item`.
+
+:::
+
+### Tamaño del control
+
+Todos los componentes de un formulario heredan su atributo `size`. De manera similar, FormItem también tiene un atributo `size`.
+
+:::demo Aún así, puede ajustar el `size` de cada componente si no desea que herede su tamaño de From o FormItem.
+
+```html
+<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">
+  <el-form-item label="Activity name">
+    <el-input v-model="sizeForm.name"></el-input>
+  </el-form-item>
+  <el-form-item label="Activity zone">
+    <el-select v-model="sizeForm.region" placeholder="please select your zone">
+      <el-option label="Zone one" value="shanghai"></el-option>
+      <el-option label="Zone two" value="beijing"></el-option>
+    </el-select>
+  </el-form-item>
+  <el-form-item label="Activity time">
+    <el-col :span="11">
+      <el-date-picker type="date" placeholder="Pick a date" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>
+    </el-col>
+    <el-col class="line" :span="2">-</el-col>
+    <el-col :span="11">
+      <el-time-picker type="fixed-time" placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
+    </el-col>
+  </el-form-item>
+  <el-form-item label="Activity type">
+    <el-checkbox-group v-model="sizeForm.type">
+      <el-checkbox-button label="Online activities" name="type"></el-checkbox-button>
+      <el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>
+    </el-checkbox-group>
+  </el-form-item>
+  <el-form-item label="Resources">
+    <el-radio-group v-model="sizeForm.resource" size="medium">
+      <el-radio border label="Sponsor"></el-radio>
+      <el-radio border label="Venue"></el-radio>
+    </el-radio-group>
+  </el-form-item>
+  <el-form-item size="large">
+    <el-button type="primary" @click="onSubmit">Create</el-button>
+    <el-button>Cancel</el-button>
+  </el-form-item>
+</el-form>
+
+<script>
+  export default {
+    data() {
+      return {
+        sizeForm: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        }
+      };
+    },
+    methods: {
+      onSubmit() {
+        console.log('submit!');
+      }
+    }
+  };
+</script>
+```
+
+:::
+
+### Form Atributos
+
+| Atributo                | Descripción                              | Tipo    | Valores aceptados     | Por defecto |
+| ----------------------- | ---------------------------------------- | ------- | --------------------- | ----------- |
+| model                   | Datos del componente                     | object  | —                     | —           |
+| rules                   | Reglas de validación                     | object  | —                     | —           |
+| inline                  | Si el form es inline                     | boolean | —                     | false       |
+| label-position          | Posicion de la etiqueta                  | string  | left / right / top    | right       |
+| label-width             | ancho de la etiqueta, y todos los form items directos descendientes heredarán este valor | string  | —                     | —           |
+| label-suffix            | sufijo de la etiqueta                    | string  | —                     | —           |
+| hide-required-asterisk       | si los campos obligatorios deben tener un asterisco rojo (estrella) al lado de sus etiquetas | boolean | — | false |
+| show-message            | si mostrar o no el mensaje de error      | boolean | —                     | true        |
+| inline-message          | si desea visualizar el mensaje de error inline con la posición del form item | boolean | —                     | false       |
+| status-icon             | si desea visualizar un icono que indique el resultado de la validación | boolean | —                     | false       |
+| validate-on-rule-change | si se dispara la validacion cuando el prop `rules` cambia | boolean | —                     | true        |
+| size                    | el tamaño de los componentes en este form | string  | medium / small / mini | —           |
+| disabled                | si se desactivan todos los componentes del formulario. Si esta en `true` no puede ser cambiado por el prop `disabled` individual de los componentes. | boolean | —                     | false       |
+
+### Form Metodos
+
+| Metodo        | Descripción                                                                                                                                                                                                                                                                                          | Parametros                                                       |
+| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
+| validate      | el método para validar todo el formulario. Takes a callback as a param. After validation, the callback will be executed with two params: a boolean indicating if the validation has passed, and an object containing all fields that fail the validation. Devuelve una promesa si se omite el return | Function(callback: Function(boolean, object))                    |
+| validateField | el método para validar un determinado form item                                                                                                                                                                                                                                                      | Function(prop: string, callback: Function(errorMessage: string)) |
+| resetFields   | restablece todos los campos y elimina el resultado de validación                                                                                                                                                                                                                                     | —                                                                |
+| clearValidate | limpieza de validación para determinados campos. El parámetro es un conjunto de nombres de propiedad de los elementos del formulario cuyos mensajes de validación se eliminarán. Si se omiten, se borrarán todos los mensajes de validación de los campos.                                           | Function(props: array)                                           |
+
+### Form Events
+
+| Nombre   | Descripción                                          | Parametros                                                   |
+| -------- | ---------------------------------------------------- | ------------------------------------------------------------ |
+| validate | se dispara después de validar un item del formulario | la propiedad (`prop name`) nombre del item del form que se esta validando, si la validacion paso o no, y el mensaje de error si existe. |
+
+### Form-Item Atributos
+
+| Atributo       | Descripción                                                  | Tipo    | Valores aceptados                           | Por defecto |
+| -------------- | ------------------------------------------------------------ | ------- | ------------------------------------------- | ----------- |
+| prop           | un clave del modelo. En el uso del método validate and resetFields, el atributo es obligatorio. | string  | Clave del modelo que se ha pasado a  `form` |             |
+| label          | etiqueta                                                     | string  | —                                           | —           |
+| label-width    | ancho de la etiqueta, e.g. '50px'                            | string  | —                                           | —           |
+| required       | si el campo es obligatorio o no, estará determinado por las reglas de validación si se omite. | boolean | —                                           | false       |
+| rules          | reglas de validacion del form                                | object  | —                                           | —           |
+| error          | mensaje de error de campo, establezca su valor y el campo validará el error y mostrará este mensaje inmediatamente. | string  | —                                           | —           |
+| show-message   | si mostrar o no el mensaje de error                          | boolean | —                                           | true        |
+| inline-message | mensaje de validación estilo inline                          | boolean | —                                           | false       |
+| size           | Tamaño de los componentes en este form item                  | string  | medium / small / mini                       | -           |
+
+### Form-Item Slot
+
+| Nombre | Descripción              |
+| ------ | ------------------------ |
+| —      | contenido del Form Item  |
+| label  | contenido de la etiqueta |
+
+### Form-Item Scoped Slot
+
+| Name  | Description                                                                                        |
+| ----- | -------------------------------------------------------------------------------------------------- |
+| error | Contenido personalizado para mostrar el mensaje de validacion. El parametro del scope es { error } |
+
+### Form-Item Metodo
+
+| Metodo        | Descripción                                                 | Parametros |
+| ------------- | ----------------------------------------------------------- | ---------- |
+| resetField    | restablecer campo actual y eliminar resultado de validación | —          |
+| clearValidate | elimina el estado de la validacion de un campo              | -          |
diff --git a/examples/docs/es/i18n.md b/examples/docs/es/i18n.md
new file mode 100644
index 0000000000..82002c8371
--- /dev/null
+++ b/examples/docs/es/i18n.md
@@ -0,0 +1,221 @@
+## Internacionalización
+
+El idioma predeterminado de Element es el chino. Si se desea utilizar otro idioma, será necesario realizar alguna configuración de i18n. En su fichero de entrada, si está importando Element por completo:
+
+```javascript
+import Vue from 'vue'
+import ElementUI from 'element-ui'
+import locale from 'element-ui/lib/locale/lang/en'
+
+Vue.use(ElementUI, { locale })
+```
+
+O si está importando Element a petición:
+
+```javascript
+import Vue from 'vue'
+import { Button, Select } from 'element-ui'
+import lang from 'element-ui/lib/locale/lang/en'
+import locale from 'element-ui/lib/locale'
+
+// configure language
+locale.use(lang)
+
+// import components
+Vue.component(Button.name, Button)
+Vue.component(Select.name, Select)
+```
+
+El paquete de idioma chino se importa por defecto, incluso si se esta usando otro idioma. Pero con `NormalModuleReplacementPlugin` proporcionado por el webpack puede reemplazar la localización predeterminada:
+
+webpack.config.js
+```javascript
+{
+  plugins: [
+    new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en')
+  ]
+}
+```
+
+## Compatible con `vue-i18n@5.x`
+
+Element es compatible con [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), lo que facilita aún más la conmutación multilingüe.
+
+```javascript
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import Element from 'element-ui'
+import enLocale from 'element-ui/lib/locale/lang/en'
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+
+Vue.use(VueI18n)
+Vue.use(Element)
+
+Vue.config.lang = 'zh-cn'
+Vue.locale('zh-cn', zhLocale)
+Vue.locale('en', enLocale)
+```
+
+## Compatible con otros plugins i18n
+Es posible que Element no sea compatible con otros plugins i18n que no sean vue-i18n, pero puede personalizar la forma en que Element procesa i18n.
+
+```javascript
+import Vue from 'vue'
+import Element from 'element-ui'
+import enLocale from 'element-ui/lib/locale/lang/en'
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+
+Vue.use(Element, {
+  i18n: function (path, options) {
+    // ...
+  }
+})
+```
+
+## Compatible con `vue-i18n@6.x`
+
+Necesita manejarlo manualmente para ser compatible con `6.x`.
+
+```javascript
+import Vue from 'vue'
+import Element from 'element-ui'
+import VueI18n from 'vue-i18n'
+import enLocale from 'element-ui/lib/locale/lang/en'
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+
+Vue.use(VueI18n)
+
+const messages = {
+  en: {
+    message: 'hello',
+    ...enLocale // Or use `Object.assign({ message: 'hello' }, enLocale)`
+  },
+  zh: {
+    message: '你好',
+    ...zhLocale // Or use `Object.assign({ message: '你好' }, zhLocale)`
+  }
+}
+// Create VueI18n instance with options
+const i18n = new VueI18n({
+  locale: 'en', // set locale
+  messages, // set locale messages
+})
+
+Vue.use(Element, {
+  i18n: (key, value) => i18n.t(key, value)
+})
+
+new Vue({ i18n }).$mount('#app')
+```
+
+## Personalización de i18n en componentes bajo petición
+
+```js
+import Vue from 'vue'
+import DatePicker from 'element/lib/date-picker'
+import VueI18n from 'vue-i18n'
+
+import enLocale from 'element-ui/lib/locale/lang/en'
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+import ElementLocale from 'element-ui/lib/locale'
+
+Vue.use(VueI18n)
+Vue.use(DatePicker)
+
+const messages = {
+  en: {
+    message: 'hello',
+    ...enLocale
+  },
+  zh: {
+    message: '你好',
+    ...zhLocale
+  }
+}
+// Create VueI18n instance with options
+const i18n = new VueI18n({
+  locale: 'en', // set locale
+  messages, // set locale messages
+})
+
+ElementLocale.i18n((key, value) => i18n.t(key, value))
+```
+
+## Importar via CDN
+
+```html
+<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/element-ui"></script>
+<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
+
+<script>
+  ELEMENT.locale(ELEMENT.lang.en)
+</script>
+```
+
+Compatible con `vue-i18n`
+
+```html
+<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
+<script src="//unpkg.com/element-ui"></script>
+<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"></script>
+<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
+
+<script>
+  Vue.locale('en', ELEMENT.lang.en)
+  Vue.locale('zh-cn', ELEMENT.lang.zhCN)
+</script>
+```
+
+Actualmente Element está disponible en los siguientes idiomas:
+<ul class="language-list">
+  <li>Simplified Chinese (zh-CN)</li>
+  <li>English (en)</li>
+  <li>German (de)</li>
+  <li>Portuguese (pt)</li>
+  <li>Spanish (es)</li>
+  <li>Danish (da)</li>
+  <li>French (fr)</li>
+  <li>Norwegian (nb-NO)</li>
+  <li>Traditional Chinese (zh-TW)</li>
+  <li>Italian (it)</li>
+  <li>Korean (ko)</li>
+  <li>Japanese (ja)</li>
+  <li>Dutch (nl)</li>
+  <li>Vietnamese (vi)</li>
+  <li>Russian (ru-RU)</li>
+  <li>Turkish (tr-TR)</li>
+  <li>Brazilian Portuguese (pt-br)</li>
+  <li>Farsi (fa)</li>
+  <li>Thai (th)</li>
+  <li>Indonesian (id)</li>
+  <li>Bulgarian (bg)</li>
+  <li>Polish (pl)</li>
+  <li>Finnish (fi)</li>
+  <li>Swedish (sv-SE)</li>
+  <li>Greek (el)</li>
+  <li>Slovak (sk)</li>
+  <li>Catalunya (ca)</li>
+  <li>Czech (cs-CZ)</li>
+  <li>Ukrainian (ua)</li>
+  <li>Turkmen (tk)</li>
+  <li>Tamil (ta)</li>
+  <li>Latvian (lv)</li>
+  <li>Afrikaans (af-ZA)</li>
+  <li>Estonian (ee)</li>
+  <li>Slovenian (sl)</li>
+  <li>Arabic (ar)</li>
+  <li>Hebrew (he)</li>
+  <li>Lithuanian (lt)</li>
+  <li>Mongolian (mn)</li>
+  <li>Kazakh (kz)</li>
+  <li>Hungarian (hu)</li>
+  <li>Romanian (ro)</li>
+  <li>Kurdish (ku)</li>
+  <li>Uighur (ug-CN)</li>
+  <li>Khmer (km)</li>
+  <li>Serbian (sr)</li>
+</ul>
+
+Si su idioma de destino no está incluido, puede contribuir: simplemente añada  [aqui](https://github.com/ElemeFE/element/tree/dev/src/locale/lang) otra configuración de idioma y cree un pull request.
\ No newline at end of file
diff --git a/examples/docs/es/icon.md b/examples/docs/es/icon.md
new file mode 100644
index 0000000000..497adcc50c
--- /dev/null
+++ b/examples/docs/es/icon.md
@@ -0,0 +1,102 @@
+<script>
+  var iconList = require('examples/icon.json');
+
+  export default {
+    data() {
+      return {
+        icons: iconList
+      };
+    }
+  }
+</script>
+
+<style>
+  .demo-icon .source > i {
+    color: #606266;
+    margin: 0 20px;
+    font-size: 1.5em;
+    vertical-align: middle;
+  }
+
+  .demo-icon .source > button {
+    margin: 0 20px;
+  }
+
+  .page-component .content > ul.icon-list {
+    overflow: hidden;
+    list-style: none;
+    padding: 0;
+    border: solid 1px #eaeefb;
+    border-radius: 4px;
+  }
+  .icon-list li {
+    float: left;
+    width: 16.66%;
+    text-align: center;
+    height: 120px;
+    line-height: 120px;
+    color: #666;
+    font-size: 13px;
+    transition: color .15s linear;
+    
+    border-right: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+    margin-right: -1px;
+    margin-bottom: -1px;
+    
+    @utils-vertical-center;
+    
+    span {
+      display: inline-block;
+      line-height: normal;
+      vertical-align: middle;
+      font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
+      color: #99a9bf;
+    }
+    i {
+      display: block;
+      font-size: 32px;
+      margin-bottom: 15px;
+      color: #606266;
+    }
+    .icon-name {
+      display: inline-block;
+      padding: 0 3px;
+      height: 1em;
+      color: #606266;
+    }
+    &:hover {
+      color: rgb(92, 182, 255);
+    }
+  }
+</style>
+
+## Icon
+
+Element proporciona un conjunto de iconos propios.
+
+### Uso básico
+
+Simplemente asigna el nombre de la clase a `el-icon-iconName`.
+
+:::demo
+
+```html
+<i class="el-icon-edit"></i>
+<i class="el-icon-share"></i>
+<i class="el-icon-delete"></i>
+<el-button type="primary" icon="el-icon-search">Search</el-button>
+
+```
+:::
+
+### Iconos
+
+<ul class="icon-list">
+  <li v-for="name in icons" :key="name">
+    <span>
+      <i :class="'el-icon-' + name"></i>
+      <span class="icon-name">{{'el-icon-' + name}}</span>
+    </span>
+  </li>
+</ul>
diff --git a/examples/docs/es/input-number.md b/examples/docs/es/input-number.md
new file mode 100644
index 0000000000..90d58b35ca
--- /dev/null
+++ b/examples/docs/es/input-number.md
@@ -0,0 +1,206 @@
+<script>
+  export default {
+    data() {
+      return {
+        num1: 1,
+        num2: 1,
+        num3: 5,
+        num4: 1,
+        num5: 1,
+        num6: 1,
+        num7: 1,
+        num8: 1
+      }
+    },
+    methods: {
+      handleChange(value) {
+        console.log(value);
+      }
+    }
+  };
+</script>
+
+<style>
+  .demo-box.demo-input-number {
+    .el-input-number + .el-input-number {
+      margin-left: 10px;
+    }
+  }
+</style>
+
+## InputNumber
+
+Input de  valores numéricos con un rango personalizable.
+
+### Uso básico
+
+:::demo Vincule una variable con `v-model` en el elemento <el-input-number> y estará listo.
+
+```html
+<template>
+  <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num1: 1
+      };
+    },
+    methods: {
+      handleChange(value) {
+        console.log(value)
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Disabled
+
+:::demo El atributo `disabled` acepta un valor `boolean`, y si el valor es `true`, el componente queda deshabilitado. Si sólo necesita controlar el valor dentro de un rango, puede añadir un atributo `min` para establecer el valor mínimo y un valor `max` para establecer el valor máximo. Por defecto, el valor mínimo es `0`.
+
+```html
+<template>
+  <el-input-number v-model="num2" :disabled="true"></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num2: 1
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Steps
+
+Le permite definir el nivel de incremento de los saltos.
+
+:::demo Añada el atributo `step` para establecer el salto.
+
+```html
+<template>
+  <el-input-number v-model="num3" :step="2"></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num3: 5
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Precision
+
+:::demo Add `precision` attribute to set the precision of input value.
+
+```html
+<template>
+  <el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num9: 1
+      }
+    }
+  };
+</script>
+```
+
+:::
+
+:::tip
+The value of `precision` must be a non negative integer and should not be less than the decimal places of `step`.
+:::
+
+### Tamaño
+
+Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `small` o `mini`.
+
+:::demo
+
+```html
+<template>
+  <el-input-number v-model="num4"></el-input-number>
+    <el-input-number size="medium" v-model="num5"></el-input-number>
+    <el-input-number size="small" v-model="num6"></el-input-number>
+    <el-input-number size="mini" v-model="num7"></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num4: 1,
+        num5: 1,
+        num6: 1,
+        num7: 1
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Posición de los controles
+
+:::demo Establezca `controls-position` para decidir la posición de los botones de control.
+
+```html
+<template>
+  <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num8: 1
+      };
+    },
+    methods: {
+      handleChange(value) {
+        console.log(value);
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Atributos
+
+| Atributo          | Descripción                              | Tipo    | Valores aceptados | Por defecto |
+| ----------------- | ---------------------------------------- | ------- | ----------------- | ----------- |
+| value             | valor vinculado                          | number  | —                 | —           |
+| min               | el valor mínimo permitido                | number  | —                 | `-Infinity`  |
+| max               | el valor maximo permitido                | number  | —                 | `Infinity`  |
+| step              | incremento (salto)                       | number  | —                 | 1           |
+| precision         | precisión del valor del input | number  | —                 | —           |
+| size              | tamaño del componente                    | string  | large/small       | —           |
+| disabled          | si el componente esta deshabilitado      | boolean | —                 | false       |
+| controls          | si se activan los botones de control     | boolean | —                 | true        |
+| controls-position | posición de los botones de control       | string  | right             | -           |
+| name              | lo mismo que `name` en un input nativo   | string  | —                 | —           |
+| label             | texto de la etiqueta                     | string  | —                 | —           |
+### Eventos
+
+| Nombre | Descripción                              | Parámetros         |
+| ------ | ---------------------------------------- | ------------------ |
+| change | se produce cuando el valor cambia        | value after change |
+| blur   | se produce cuando el componente pierde el foco | (event: Event)     |
+| focus  | se produce cuando el componente obtiene el foco | (event: Event)     |
+
+### Métodos
+| Método | Descripción                          | Parámetro |
+| ------ | ------------------------------------ | --------- |
+| focus  | coloca el foco en el elemento actual | -         |
diff --git a/examples/docs/es/input.md b/examples/docs/es/input.md
new file mode 100644
index 0000000000..1f06ccaa57
--- /dev/null
+++ b/examples/docs/es/input.md
@@ -0,0 +1,733 @@
+<script>
+  export default {
+    data() {
+      return {
+        links: [],
+        input: '',
+        input1: '',
+        input2: '',
+        input21: '',
+        input22: '',
+        input23: '',
+        input3: '',
+        input4: '',
+        input5: '',
+        input6: '',
+        input7: '',
+        input8: '',
+        input9: '',
+        textarea: '',
+        textarea2: '',
+        textarea3: '',
+        select: '',
+        state1: '',
+        state2: '',
+        state3: '',
+        state4: ''
+      };
+    },
+    methods: {
+      loadAll() {
+        return [
+          { "value": "vue", "link": "https://github.com/vuejs/vue" },
+          { "value": "element", "link": "https://github.com/ElemeFE/element" },
+          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
+          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
+          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },
+          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
+          { "value": "babel", "link": "https://github.com/babel/babel" }
+        ];
+      },
+      querySearch(queryString, cb) {
+        var links = this.links;
+        var results = queryString ? links.filter(this.createStateFilter(queryString)) : links;
+
+        cb(results);
+      },
+      querySearchAsync(queryString, cb) {
+        var links = this.links;
+        var results = queryString ? links.filter(this.createStateFilter(queryString)) : links;
+    
+        clearTimeout(this.timeout);
+        this.timeout = setTimeout(() => {
+          cb(results);
+        }, 3000 * Math.random());
+      },
+      createStateFilter(queryString) {
+        return (state) => {
+          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+        };
+      },
+      handleSelect(item) {
+        console.log(item);
+      },
+      handleIconClick(ev) {
+        console.log(ev);
+      }
+    },
+    mounted() {
+      this.links = this.loadAll();
+    }
+  };
+</script>
+
+<style>
+  .demo-input.demo-es {
+    .el-select .el-input {
+      width: 130px;
+    }
+    .el-input {
+      width: 180px;
+    }
+    .el-textarea {
+      width: 414px;
+    }
+    .el-input-group {
+      width: 100%;
+    }
+    .demo-input-size {
+      .el-input {
+        vertical-align: top;
+        margin: 0 10px 10px 0;
+      }
+    }
+    .demo-input-suffix {
+      padding: 10px;
+    }
+    .demo-input-suffix .el-input {
+      margin-right: 15px;
+    }
+    .demo-input-label {
+      display: inline-block;
+      width: 130px;
+    }
+    .input-with-select .el-input-group__prepend {
+      background-color: #fff;
+    }
+    .demo-autocomplete {
+      text-align: center;
+
+      .sub-title {
+        margin-bottom: 10px;
+        font-size: 14px;
+        color: #8492a6;
+      }
+    
+      .el-col:not(:last-child) {
+        border-right: 1px solid rgba(224,230,237,0.50);
+      }
+    
+      .el-autocomplete {
+        text-align: left;
+      }
+    }
+  }
+  .el-autocomplete-suggestion.my-autocomplete {
+    li {
+      line-height: normal;
+      padding: 7px *;
+
+      .name {
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+      .addr {
+        font-size: 12px;
+        color: #b4b4b4;
+      }
+      .highlighted .addr {
+        color: #ddd;
+      }
+    }
+  }
+</style>
+
+## Input
+
+Ingresa datos usando el ratón o teclado.
+
+### Uso básico
+
+:::demo
+
+```html
+<el-input placeholder="Please input" v-model="input"></el-input>
+
+<script>
+export default {
+  data() {
+    return {
+      input: ''
+    }
+  }
+}
+</script>
+```
+
+:::
+
+### Disabled
+
+:::demo Deshabilite el Input con el atributo `disabled`.
+
+```html
+<el-input
+  placeholder="Please input"
+  v-model="input1"
+  :disabled="true">
+</el-input>
+
+<script>
+export default {
+  data() {
+    return {
+      input1: ''
+    }
+  }
+}
+</script>
+```
+
+:::
+
+### Input con icono
+
+Añada un icono para indicar el tipo de Input.
+
+:::demo Para añadir iconos en el Input, puede utilizar los atributos `prefix-icon` y `suffix-icon` . Además, los slots con nombre `prefix` y `suffix` también funcionan.
+
+```html
+<div class="demo-input-suffix">
+  <span class="demo-input-label">Using attributes</span>
+  <el-input
+    placeholder="Pick a date"
+    suffix-icon="el-icon-date"
+    v-model="input2">
+  </el-input>
+  <el-input
+    placeholder="Type something"
+    prefix-icon="el-icon-search"
+    v-model="input21">
+  </el-input>
+</div>
+<div class="demo-input-suffix">
+  <span class="demo-input-label">Using slots</span>
+  <el-input
+    placeholder="Pick a date"
+    v-model="input22">
+    <i slot="suffix" class="el-input__icon el-icon-date"></i>
+  </el-input>
+  <el-input
+    placeholder="Type something"
+    v-model="input23">
+    <i slot="prefix" class="el-input__icon el-icon-search"></i>
+  </el-input>
+</div>
+
+<style>
+  .demo-input-label {
+    display: inline-block;
+    width: 130px;
+  }
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      input2: '',
+      input21: '',
+      input22: '',
+      input23: ''
+    }
+  }
+}
+</script>
+```
+
+:::
+
+### Textarea
+
+Redimensiona para introducir varias líneas de información de texto. Agrege el atributo `type="textarea"` para cambiar el `input` al tipo nativo `textarea`.
+
+:::demo Controle la altura ajustando el prop `rows`.
+
+```html
+<el-input
+  type="textarea"
+  :rows="2"
+  placeholder="Please input"
+  v-model="textarea">
+</el-input>
+
+<script>
+export default {
+  data() {
+    return {
+      textarea: ''
+    }
+  }
+}
+</script>
+```
+
+:::
+
+### Textarea tamaño automatico
+
+El ajuste del prop `autosize` en el tipo de Input textarea hace que la altura se ajuste automáticamente en función del contenido. Se puede proporcionar opciones en un objeto para autodimensionar y especificar el número mínimo y máximo de líneas que el textarea puede ajustar automáticamente.
+
+:::demo
+
+```html
+<el-input
+  type="textarea"
+  autosize
+  placeholder="Please input"
+  v-model="textarea2">
+</el-input>
+<div style="margin: 20px 0;"></div>
+<el-input
+  type="textarea"
+  :autosize="{ minRows: 2, maxRows: 4}"
+  placeholder="Please input"
+  v-model="textarea3">
+</el-input>
+
+<script>
+export default {
+  data() {
+    return {
+      textarea2: '',
+      textarea3: ''
+    }
+  }
+}
+</script>
+```
+
+:::
+
+### Mezclando elementos con input
+
+Añade un elemento antes o después del input, generalmente una etiqueta o un botón.
+
+:::demo Utilice el `slot` para seleccionar si el elemento se colocara antes (prepend) o después (append) del Input.
+
+```html
+<div>
+  <el-input placeholder="Please input" v-model="input3">
+    <template slot="prepend">Http://</template>
+  </el-input>
+</div>
+<div style="margin-top: 15px;">
+  <el-input placeholder="Please input" v-model="input4">
+    <template slot="append">.com</template>
+  </el-input>
+</div>
+<div style="margin-top: 15px;">
+  <el-input placeholder="Please input" v-model="input5" class="input-with-select">
+    <el-select v-model="select" slot="prepend" placeholder="Select">
+      <el-option label="Restaurant" value="1"></el-option>
+      <el-option label="Order No." value="2"></el-option>
+      <el-option label="Tel" value="3"></el-option>
+    </el-select>
+    <el-button slot="append" icon="el-icon-search"></el-button>
+  </el-input>
+</div>
+
+<style>
+  .el-select .el-input {
+    width: 110px;
+  }
+  .input-with-select .el-input-group__prepend {
+    background-color: #fff;
+  }
+</style>
+<script>
+export default {
+  data() {
+    return {
+      input3: '',
+      input4: '',
+      input5: '',
+      select: ''
+    }
+  }
+}
+</script>
+```
+
+:::
+
+### Tamaño
+
+:::demo Añada el atributo `size` para cambiar el tamaño del Input. Además del tamaño predeterminado, hay otras tres opciones: `large`, `small` y `mini`.
+
+```html
+<div class="demo-input-size">
+  <el-input
+    placeholder="Please Input"
+    v-model="input6">
+  </el-input>
+  <el-input
+    size="medium"
+    placeholder="Please Input"
+    v-model="input7">
+  </el-input>
+  <el-input
+    size="small"
+    placeholder="Please Input"
+    v-model="input8">
+  </el-input>
+  <el-input
+    size="mini"
+    placeholder="Please Input"
+    v-model="input9">
+  </el-input>
+</div>
+
+<script>
+export default {
+  data() {
+    return {
+      input6: '',
+      input7: '',
+      input8: '',
+      input9: ''
+    }
+  }
+}
+</script>
+```
+
+:::
+
+### Autocompletado
+
+Puede obtener algunas sugerencias basadas en la entrada actual.
+
+:::demo El componente Autocomplete proporciona sugerencias de entrada. El atributo `fetch-suggestions` es un método que devuelve la entrada sugerida. En este ejemplo, `querySearch(queryString, cb)` devuelve las sugerencias al componente mediante `cb(data)` cuando están listas.
+
+```html
+<el-row class="demo-autocomplete">
+  <el-col :span="12">
+    <div class="sub-title">list suggestions when activated</div>
+    <el-autocomplete
+      class="inline-input"
+      v-model="state1"
+      :fetch-suggestions="querySearch"
+      placeholder="Please Input"
+      @select="handleSelect"
+    ></el-autocomplete>
+  </el-col>
+  <el-col :span="12">
+    <div class="sub-title">list suggestions on input</div>
+    <el-autocomplete
+      class="inline-input"
+      v-model="state2"
+      :fetch-suggestions="querySearch"
+      placeholder="Please Input"
+      :trigger-on-focus="false"
+      @select="handleSelect"
+    ></el-autocomplete>
+  </el-col>
+</el-row>
+<script>
+  export default {
+    data() {
+      return {
+        links: [],
+        state1: '',
+        state2: ''
+      };
+    },
+    methods: {
+      querySearch(queryString, cb) {
+        var links = this.links;
+        var results = queryString ? links.filter(this.createFilter(queryString)) : links;
+        // call callback function to return suggestions
+        cb(results);
+      },
+      createFilter(queryString) {
+        return (link) => {
+          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+        };
+      },
+      loadAll() {
+        return [
+          { "value": "vue", "link": "https://github.com/vuejs/vue" },
+          { "value": "element", "link": "https://github.com/ElemeFE/element" },
+          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
+          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
+          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },
+          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
+          { "value": "babel", "link": "https://github.com/babel/babel" }
+         ];
+      },
+      handleSelect(item) {
+        console.log(item);
+      }
+    },
+    mounted() {
+      this.links = this.loadAll();
+    }
+  }
+</script>
+```
+
+:::
+
+### Template personalizado
+
+Personalice cómo se muestran las sugerencias.
+
+:::demo Utilice `scoped slot` para personalizar los elementos de sugerencias. En el scope, puede acceder al objeto de sugerencia mediante la clave `item`.
+
+```html
+<el-autocomplete
+  popper-class="my-autocomplete"
+  v-model="state3"
+  :fetch-suggestions="querySearch"
+  placeholder="Please input"
+  @select="handleSelect">
+  <i
+    class="el-icon-edit el-input__icon"
+    slot="suffix"
+    @click="handleIconClick">
+  </i>
+  <template slot-scope="{ item }">
+    <div class="value">{{ item.value }}</div>
+    <span class="link">{{ item.link }}</span>
+  </template>
+</el-autocomplete>
+
+<style>
+  .my-autocomplete {
+    li {
+      line-height: normal;
+      padding: 7px;
+
+      .value {
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+      .link {
+        font-size: 12px;
+        color: #b4b4b4;
+      }
+    }
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      return {
+        links: [],
+        state3: ''
+      };
+    },
+    methods: {
+      querySearch(queryString, cb) {
+        var links = this.links;
+        var results = queryString ? links.filter(this.createFilter(queryString)) : links;
+        // call callback function to return suggestion objects
+        cb(results);
+      },
+      createFilter(queryString) {
+        return (link) => {
+          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+        };
+      },
+      loadAll() {
+        return [
+          { "value": "vue", "link": "https://github.com/vuejs/vue" },
+          { "value": "element", "link": "https://github.com/ElemeFE/element" },
+          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
+          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
+          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },
+          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
+          { "value": "babel", "link": "https://github.com/babel/babel" }
+         ];
+      },
+      handleSelect(item) {
+        console.log(item);
+      },
+      handleIconClick(ev) {
+        console.log(ev);
+      }
+    },
+    mounted() {
+      this.links = this.loadAll();
+    }
+  }
+</script>
+```
+
+:::
+
+### Búsqueda remota
+
+Búsqueda de datos desde el servidor.
+
+:::demo
+
+```html
+<el-autocomplete
+  v-model="state4"
+  :fetch-suggestions="querySearchAsync"
+  placeholder="Please input"
+  @select="handleSelect"
+></el-autocomplete>
+<script>
+  export default {
+    data() {
+      return {
+        links: [],
+        state4: '',
+        timeout:  null
+      };
+    },
+    methods: {
+      loadAll() {
+        return [
+          { "value": "vue", "link": "https://github.com/vuejs/vue" },
+          { "value": "element", "link": "https://github.com/ElemeFE/element" },
+          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },
+          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },
+          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },
+          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },
+          { "value": "babel", "link": "https://github.com/babel/babel" }
+         ];
+      },
+      querySearchAsync(queryString, cb) {
+        var links = this.links;
+        var results = queryString ? links.filter(this.createFilter(queryString)) : links;
+
+        clearTimeout(this.timeout);
+        this.timeout = setTimeout(() => {
+          cb(results);
+        }, 3000 * Math.random());
+      },
+      createFilter(queryString) {
+        return (link) => {
+          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+        };
+      },
+      handleSelect(item) {
+        console.log(item);
+      }
+    },
+    mounted() {
+      this.links = this.loadAll();
+    }
+  };
+</script>
+```
+
+:::
+
+### Input atributos
+
+| Atributo      | Descripción                                                                                                                                      | Tipo             | Valores aceptados                                                                                                                       | Por defecto |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| type          | tipo de input                                                                                                                                    | string           | text, textarea y otros [tipos de entrada nativos](https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input#Form_%3Cinput%3E_types) | text        |
+| value         | valor enlazado                                                                                                                                   | string / number  | —                                                                                                                                       | —           |
+| maxlength     | igual que `maxlength` en el input nativo                                                                                                         | number           | —                                                                                                                                       | —           |
+| minlength     | igual que `minlength` en el input nativo                                                                                                         | number           | —                                                                                                                                       | —           |
+| placeholder   | placeholder del Input                                                                                                                            | string           | —                                                                                                                                       | —           |
+| disabled      | si esta deshabilitado                                                                                                                            | boolean          | —                                                                                                                                       | false       |
+| size          | tamaño del input, esto no funciona cuando `type` no es textarea                                                                                  | string           | medium / small / mini                                                                                                                   | —           |
+| prefix-icon   | clase del icono de prefijo                                                                                                                       | string           | —                                                                                                                                       | —           |
+| suffix-icon   | clase del icono de sufijo                                                                                                                        | string           | —                                                                                                                                       | —           |
+| rows          | número de filas, sólo funciona cuando `type` es 'textarea'.                                                                                      | number           | —                                                                                                                                       | 2           |
+| autosize      | si textarea tiene una altura adaptativa, sólo funciona cuando el`type` es 'textarea'. Puede aceptar un objeto, p. ej. { minRows: 2, maxRows: 6 } | boolean / object | —                                                                                                                                       | false       |
+| autocomplete  | igual que `autocomplete` en el input nativo                                                                                                      | string           | on/off                                                                                                                                  | off         |
+| auto-complete | @DEPRECATED en el proximo cambio mayor de version                                                                                                | string           | on/off                                                                                                                                  | off         |
+| name          | igual que `name` en el input nativo                                                                                                              | string           | —                                                                                                                                       | —           |
+| readonly      | igual que `readonly` en el input nativo                                                                                                          | boolean          | —                                                                                                                                       | false       |
+| max           | igual que `max` en el input nativo                                                                                                               | —                | —                                                                                                                                       | —           |
+| min           | igual que `min` en el input nativo                                                                                                               | —                | —                                                                                                                                       | —           |
+| step          | igual que `step` en el input nativo                                                                                                              | —                | —                                                                                                                                       | —           |
+| resize        | control para el dimensionamiento                                                                                                                 | string           | none, both, horizontal, vertical                                                                                                        | —           |
+| autofocus     | igual que `autofocus` en el input nativo                                                                                                         | boolean          | —                                                                                                                                       | false       |
+| form          | igual que `form` en el input nativo                                                                                                              | string           | —                                                                                                                                       | —           |
+| label         | texto de la etiqueta                                                                                                                             | string           | —                                                                                                                                       | —           |
+| tabindex      | orden de tabulacion para el Input                                                                                                                | string           | -                                                                                                                                       | -           |
+
+### Input slots
+
+| Nombre  | Descripción                          |
+| ------- | ------------------------------------ |
+| prefix  | contenido como prefijo del input     |
+| suffix  | contenido como sufijo del input      |
+| prepend | contenido antes del input            |
+| append  | contenido a añadir después del input |
+
+### Input eventos
+
+| Nombre | Descripción                                                                                | Parametros                |
+| ------ | ------------------------------------------------------------------------------------------ | ------------------------- |
+| blur   | Se dispara cuando se pierde el foco                                                        | (event: Event)            |
+| focus  | Se dispara cuando se obtiene el foco                                                       | (event: Event)            |
+| change | se activa cuando cambia el valor de entrada                                                | (value: string \| number) |
+| clear  | se dispara cuando la entrada es borrada por el botón generado por el atributo "clearable". | —                         |
+
+### Input Metodo
+
+| Metodo | Descripción                   | Parametros |
+| ------ | ----------------------------- | ---------- |
+| focus  | coloca el foco en el elemento | —          |
+| blur   | quita el foco del elemento    | —          |
+| select | selecciona el texto del input | —          |
+
+### Autocomplete Atributos
+
+| Atributo              | Descripción                                                                                                                                        | Tipo                            | Opciones                                                       | Por defecto  |
+| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | -------------------------------------------------------------- | ------------ |
+| placeholder           | el placeholder del Autocomplete                                                                                                                    | string                          | —                                                              | —            |
+| disabled              | si el Autocompete esta deshabilitado                                                                                                               | boolean                         | —                                                              | false        |
+| value-key             | nombre del campo del objeto de sugerencia del input para la visualización                                                                          | string                          | —                                                              | value        |
+| icon                  | nombre del icono                                                                                                                                   | string                          | —                                                              | —            |
+| value                 | valor enlazado                                                                                                                                     | string                          | —                                                              | —            |
+| debounce              | retardo al escribir, en milisegundos                                                                                                               | number                          | —                                                              | 300          |
+| placement             | ubicación del menú emergente                                                                                                                       | string                          | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start |
+| fetch-suggestions     | un método para obtener las sugerencias del input. Cuando las sugerencias estén listas, invocar `callback(data:[])` para devolverlas a Autocomplete | Function(queryString, callback) | —                                                              | —            |
+| popper-class          | nombre personalizado de clase para el dropdown de autocomplete                                                                                     | string                          | —                                                              | —            |
+| trigger-on-focus      | si se deben mostrar sugerencias cuando el input obtiene el foco                                                                                    | boolean                         | —                                                              | true         |
+| name                  | igual que `name` en el input nativo                                                                                                                | string                          | —                                                              | —            |
+| select-when-unmatched | si se emite un evento `select` al pulsar enter cuando no hay coincidencia de Autocomplete                                                          | boolean                         | —                                                              | false        |
+| label                 | texto de la etiqueta                                                                                                                               | string                          | —                                                              | —            |
+| prefix-icon           | prefix icon class                                                                                                                                  | string                          | —                                                              | —            |
+| suffix-icon           | suffix icon class                                                                                                                                  | string                          | —                                                              | —            |
+| hide-loading          | si se debe ocultar el icono de loading en la búsqueda remota                                                                                       | boolean                         | —                                                              | false        |
+| popper-append-to-body | si añadir el desplegable al cuerpo. Si la posición del menú desplegable es incorrecta, puede intentar establecer este prop a false                 | boolean                         | -                                                              | true         |
+
+### Autocomplete Slots
+
+| Nombre  | Descripción                          |
+| ------- | ------------------------------------ |
+| prefix  | contenido como prefijo del input     |
+| suffix  | contenido como sufijo del input      |
+| prepend | contenido antes del input            |
+| append  | contenido a añadir después del input |
+
+### Autocomplete Scoped Slot
+
+| Name | Description                                                                              |
+| ---- | ---------------------------------------------------------------------------------------- |
+| —    | Contenido personalizado para el input de sugerencias. El parametro del scope es { item } |
+
+### Autocomplete Eventos
+
+| Nombre | Descripción                                      | Parametros                                  |
+| ------ | ------------------------------------------------ | ------------------------------------------- |
+| select | se dispara cuando se hace click a una sugerencia | sugerencia en la que se está haciendo click |
+
+### Autocomplete Metodo
+
+| Metodo | Descripción                   | Parametros |
+| ------ | ----------------------------- | ---------- |
+| focus  | coloca el foco en el elemento | —          |
diff --git a/examples/docs/es/installation.md b/examples/docs/es/installation.md
new file mode 100644
index 0000000000..412657029a
--- /dev/null
+++ b/examples/docs/es/installation.md
@@ -0,0 +1,31 @@
+## Instalación
+
+### npm
+
+Instalar mediante npm es la forma recomendada ya que se integra facilmente con [webpack](https://webpack.js.org/).
+
+```shell
+npm i element-ui -S
+```
+
+### CDN
+
+Obtenga la última versión desde [unpkg.com/element-ui](https://unpkg.com/element-ui/) , e importe el JavaScript y los archivos CSS en su página.
+
+```html
+<!-- import CSS -->
+<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+<!-- import JavaScript -->
+<script src="https://unpkg.com/element-ui/lib/index.js"></script>
+```
+
+##Tip
+Recomendamos a nuestros usuarios congelar la versión de Elemet cuando usas un CDN. Por favor, refiérase a [unpkg.com](https://unpkg.com) para más información.
+
+### Hello world
+
+Si esta usando un CDN, una página con Hello-World es fácil con Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/)
+
+<iframe width="100%" height="600" src="//jsfiddle.net/hzfpyvg6/1213/embedded/html,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+
+Si esta usando npm y desea combinarlo con webpack, por favor continue a la siguiente página: [Quick Start](/#/es/component/quickstart)
diff --git a/examples/docs/es/layout.md b/examples/docs/es/layout.md
new file mode 100644
index 0000000000..55a8ee6be6
--- /dev/null
+++ b/examples/docs/es/layout.md
@@ -0,0 +1,390 @@
+<style>
+  .demo-layout {
+    .el-row {
+      margin-bottom: 20px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    .el-col {
+      border-radius: 4px;
+    }
+    .bg-purple-dark {
+      background: #99a9bf;
+    }
+    .bg-purple {
+      background: #d3dce6;
+    }
+    .bg-purple-light {
+      background: #e5e9f2;
+    }
+    .grid-content {
+      border-radius: 4px;
+      min-height: 36px;
+    }
+    .row-bg {
+      padding: 10px 0;
+      background-color: #f9fafc;
+    }
+  }
+</style>
+
+## Layout
+
+Rápido y facilmente crea un layout básico con 24 columnas.
+
+### Layout básico
+
+Crea un layout básico usando columnas.
+
+:::demo Con `row` y `col`, puede facilmente manipular el layout usando el atributo `span`.
+```html
+<el-row>
+  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
+</el-row>
+<el-row>
+  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
+</el-row>
+<el-row>
+  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<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-light"></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-light"></div></el-col>
+</el-row>
+<el-row>
+  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
+</el-row>
+
+<style>
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+</style>
+```
+:::
+
+### Espaciado de columnas
+
+El espaciado de columnas está soportado.
+
+:::demo Row provee el atributo `gutter` para especificar el espacio entre columnas y su valor por defecto es 0.
+```html
+<el-row :gutter="20">
+  <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>
+
+<style>
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+</style>
+```
+:::
+
+### Layout híbrido
+
+Crea un complejo layout híbrido combinando el básico de 1/24 columnas.
+
+:::demo
+```html
+<el-row :gutter="20">
+  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row :gutter="20">
+  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row :gutter="20">
+  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+
+<style>
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+</style>
+```
+:::
+
+### Offset de columnas
+
+Puedes especificar offsets para las columnas.
+
+:::demo Puedes especificar el offset para una columna mediante el atributo `offset` de Col.
+
+```html
+<el-row :gutter="20">
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row :gutter="20">
+  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row :gutter="20">
+  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+
+<style>
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+</style>
+```
+:::
+
+### Alineación
+
+Usa flex layout para un alineamiento flexible de columnas.
+
+:::demo Puede habilitar flex layout asignando el atributo `type` a 'flex', y definir el layout de elementos hijos asignando el atributo `justify` con los valores start, center, end, space-between o space-around.
+```html
+<el-row type="flex" class="row-bg">
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row type="flex" class="row-bg" justify="center">
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row type="flex" class="row-bg" justify="end">
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row type="flex" class="row-bg" justify="space-between">
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row type="flex" class="row-bg" justify="space-around">
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+
+<style>
+  .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+</style>
+```
+:::
+
+### Responsive Layout
+
+Tomando el ejemplo de Bootstrap responsive design, existen 5 breakpoints: xs, sm, md, lg y xl.
+
+:::demo
+```html
+<el-row :gutter="10">
+  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
+</el-row>
+
+<style>
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+</style>
+```
+:::
+
+### Clases útiles para ocultar elementos
+
+Adicionalmente, Element provee una serie de clases para ocultar elementos dadas ciertas condiciones. Estas clases pueden se agregadas a cualquier elemento del DOM o un elemento propio. Necesita importar el siguiente archivo CSS para usar estas clases:
+
+```js
+import 'element-ui/lib/theme-chalk/display.css';
+```
+
+Las clases son:
+- `hidden-xs-only` - oculto en viewports extra pequeños solamente
+- `hidden-sm-only` - oculto en viewports pequeños solamente
+- `hidden-sm-and-down` - oculto en viewports pequeños y menores
+- `hidden-sm-and-up` - oculto en viewports pequeños y superiores 
+- `hidden-md-only` - oculto en viewports medios solamente
+- `hidden-md-and-down` - oculto en viewports medios y menores
+- `hidden-md-and-up` - oculto en viewports medios y mayores
+- `hidden-lg-only` - ocultos en viewports grandes solamente 
+- `hidden-lg-and-down` - ocultos en viewports grandes y menores
+- `hidden-lg-and-up` - ocultos en viewports grandes y superiores
+- `hidden-xl-only` - oculto en viewports extra grandes solamente
+
+### Atributos Row 
+
+| Atributos | Descripción                              | Tipo   | Valores aceptados                        | Valor por defecto |
+| --------- | ---------------------------------------- | ------ | ---------------------------------------- | ----------------- |
+| gutter    | espaciado de la grilla                   | number | —                                        | 0                 |
+| type      | modo del layout , puedes usar flex, funciona en navegadores modernos | string | —                                        | —                 |
+| justify   | alineación horizontal del layout flex    | string | start/end/center/space-around/space-between | start             |
+| align     | alineación vertical del layout flex      | string | top/middle/bottom                        | top               |
+| tag       | tag de elemento propio                   | string | *                                        | div               |
+
+### Atributos Col 
+
+| Atributos | Descripción                              | Tipo                                     | Valores aceptados | Valor por defecto |
+| --------- | ---------------------------------------- | ---------------------------------------- | ----------------- | ----------------- |
+| span      | número de columnas que abarca la cuadrícula | number                                   | —                 | 24                |
+| offset    | especific espacio en el lado izquierdo de la grill | number                                   | —                 | 0                 |
+| push      | número de columnas que la grilla se mueve hacia la derecha | number                                   | —                 | 0                 |
+| pull      | número de columnas que la grilla se mueve hacia la izquierda | number                                   | —                 | 0                 |
+| xs        | `<768px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | —                 | —                 |
+| sm        | `≥768px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | —                 | —                 |
+| md        | `≥992px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | —                 | —                 |
+| lg        | `≥1200px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | —                 | —                 |
+| xl        | `≥1920px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | —                 | —                 |
+| tag       | tag de elemento propio                   | string                                   | *                 | div               |
+
+
diff --git a/examples/docs/es/loading.md b/examples/docs/es/loading.md
new file mode 100644
index 0000000000..542c9034be
--- /dev/null
+++ b/examples/docs/es/loading.md
@@ -0,0 +1,260 @@
+<style>
+  .demo-loading .el-table {
+    border: none;
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-02',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }, {
+          date: '2016-05-04',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }, {
+          date: '2016-05-01',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }],
+        loading: true,
+        loading2: true,
+        fullscreenLoading: false
+      }
+    },
+    
+    methods: {
+      openFullScreen() {
+        this.fullscreenLoading = true;
+        setTimeout(() => {
+          this.fullscreenLoading = false;
+        }, 2000);
+      },
+      openFullScreen2() {
+        const loading = this.$loading({
+          lock: true,
+          text: 'Loading',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        });
+        setTimeout(() => {
+          loading.close();
+        }, 2000);
+      }
+    }
+  }
+</script>
+
+## Cargando
+
+Se muestra la animación mientras se cargan los datos.
+
+### Cargando dentro de un contenedor
+
+Muestra una animación en un contenedor (como en una tabla) mientras se cargan los datos.
+
+:::demo Element provee dos maneras para invocar el componente de Cargando: por directiva y por servicio. Para la directiva personalizada `v-loading`, solo necesitas enlazarlo a un valor `Boolean`. Por defecto, la máscara de carga se agregará al elemento donde se usa la directiva. Al agregar el modificador `body`, la máscara se agrega al elemento body.
+
+```html
+<template>
+  <el-table
+    v-loading="loading"
+    :data="tableData"
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="Fecha"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nombre"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Dirección">
+    </el-table-column>
+  </el-table>
+</template>
+
+<style>
+  body {
+    margin: 0;
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-02',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }, {
+          date: '2016-05-04',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }, {
+          date: '2016-05-01',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }],
+        loading: true
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Personalización
+
+Puede personalizar el texto de carga, spinner de carga y color de fondo.
+
+:::demo Agrege el atributo `element-loading-text` al elemento en el que `v-loading` está vinculado, y su valor se mostrará debajo del spinner. Del mismo modo, `element-loading-spinner` y `element-loading-background` son para personalizar el nombre de la clase del spinner y el color de fondo.
+```html
+<template>
+  <el-table
+    v-loading="loading2"
+    element-loading-text="Loading..."
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)"
+    :data="tableData"
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="Fecha"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nombre"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Dirección">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-02',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }, {
+          date: '2016-05-04',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }, {
+          date: '2016-05-01',
+          name: 'John Smith',
+          address: 'No.1518,  Jinshajiang Road, Putuo District'
+        }],
+        loading2: true
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Cargando a pantalla completa
+
+Muestra una animación de pantalla completa mientras se cargan los datos
+
+:::demo Cuando se utiliza como una directiva, la carga a pantalla completa requiere el modificador `fullscreen`, y este puede ser agregado al `body`. En este caso, si desea deshabilitar el desplazamiento en `body`, puede agregar otro modificador `lock`. Cuando se utiliza como un servicio, el componente puede ser mostrado a pantalla completa por defecto.
+
+```html
+<template>
+  <el-button
+    type="primary"
+    @click="openFullScreen"
+    v-loading.fullscreen.lock="fullscreenLoading">
+    Como directiva
+  </el-button>
+  <el-button
+    type="primary"
+    @click="openFullScreen2">
+    Como servicio
+  </el-button>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        fullscreenLoading: false
+      }
+    },
+    methods: {
+      openFullScreen() {
+        this.fullscreenLoading = true;
+        setTimeout(() => {
+          this.fullscreenLoading = false;
+        }, 2000);
+      },
+      openFullScreen2() {
+        const loading = this.$loading({
+          lock: true,
+          text: 'Loading',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        });
+        setTimeout(() => {
+          loading.close();
+        }, 2000);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Servicio
+
+Puede invocar el componente con un servicio. Importe el servicio:
+
+```javascript
+import { Loading } from 'element-ui';
+```
+Invocar:
+```javascript
+Loading.service(options);
+```
+El parámetro `options` es la configuración del componente, y estos detalles pueden ser encontrados en la siguiente table. `LoadingService` devuelve una instancia del componente, y puede cerrarlo invocando el método `close`:
+```javascript
+let loadingInstance = Loading.service(options);
+loadingInstance.close();
+```
+Tenga en cuenta que, en este caso, el componente a pantalla completa es una instancia única. Si un nuevo componente de pantalla completa es invocado antes de que se cierre la existente, se devolverá la instancia existente en lugar de crear la otra instancia:
+```javascript
+let loadingInstance1 = Loading.service({ fullscreen: true });
+let loadingInstance2 = Loading.service({ fullscreen: true });
+console.log(loadingInstance1 === loadingInstance2); // true
+```
+Llamar al método `close` en cualquiera de estas puede cerrarlo.
+
+Si Element es importado completamente, un método global `$loading` puede ser registrado a Vue.prototype. Puede invocarlo como esto: `this.$loading(options)`, y también devuelve una instancia del componente.
+
+### Options
+| Atributo    | Descripción                              | Tipo          | Valores aceptados | Por defecto   |
+| ----------- | ---------------------------------------- | ------------- | ----------------- | ------------- |
+| target      | el nodo del DOM que el componente debe cubrir. Acepta un objecto DOM o una cadena. Si está es una cadena, este será pasado a `document.querySelector` para obtener el correspondiente nodo del DOM | object/string | —                 | document.body |
+| body        | igual que el modificador `body` de `v-loading` | boolean       | —                 | false         |
+| fullscreen  | igual que el modificador `fullscreen` de `v-loading` | boolean       | —                 | true          |
+| lock        | igual que el modificador `lock` de `v-loading` | boolean       | —                 | false         |
+| text        | texto de cargando que se muestra debajo del spinner | string        | —                 | —             |
+| spinner     | nombre de clase del spinner personalizado | string        | —                 | —             |
+| background  | color de fondo de la máscara             | string        | —                 | —             |
+| customClass | nombre de clase personalizada para el componente | string        | —                 | —             |
\ No newline at end of file
diff --git a/examples/docs/es/menu.md b/examples/docs/es/menu.md
new file mode 100644
index 0000000000..2338a410c7
--- /dev/null
+++ b/examples/docs/es/menu.md
@@ -0,0 +1,353 @@
+<style>
+  .demo-box.demo-menu {
+    .el-menu-demo {
+      padding-left: 55px;
+    }
+    .el-menu-vertical-demo:not(.el-menu--collapse) {
+      width: 240px;
+      min-height: 400px;
+    }
+    .line {
+      height: 1px;
+      background-color: #e0e6ed;
+      margin: 35px -24px;
+    }
+    h5 {
+      font-size: 14px;
+      color: #8492a6;
+      margin-top: 10px;
+    }
+    .tac {
+      text-align: center;
+    
+      .el-menu-vertical-demo {
+        display: inline-block;
+        text-align: left;
+      }
+    }
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      return {
+        activeIndex: '1',
+        activeIndex2: '1',
+        isCollapse: true
+      };
+    },
+    methods: {
+      handleOpen(key, keyPath) {
+        console.log(key, keyPath);
+      },
+      handleClose(key, keyPath) {
+        console.log(key, keyPath);
+      },
+      handleSelect(key, keyPath) {
+        console.log(key, keyPath);
+      }
+    }
+  }
+</script>
+
+## NavMenu
+
+Menú que provee la navegación para tu sitio.
+
+### Top bar
+
+Top bar NavMenu puede ser usado en distinto escenarios.
+
+:::demo Por defecto el menú es vertical, pero puede hacerlo horizontal asignando a la propiedad `mode` el valor 'horizontal'. Además, puede utilizar el componente de submenú para crear un menú de segundo nivel. Menú provee `background-color`, `text-color` y `active-text-color` para customizar los colores.
+
+```html
+<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+  <el-menu-item index="1">Processing Center</el-menu-item>
+  <el-submenu index="2">
+    <template slot="title">Workspace</template>
+    <el-menu-item index="2-1">item one</el-menu-item>
+    <el-menu-item index="2-2">item two</el-menu-item>
+    <el-menu-item index="2-3">item three</el-menu-item>
+    <el-submenu index="2-4">
+      <template slot="title">item four</template>
+      <el-menu-item index="2-4-1">item one</el-menu-item>
+      <el-menu-item index="2-4-2">item two</el-menu-item>
+      <el-menu-item index="2-4-3">item three</el-menu-item>
+    </el-submenu>
+  </el-submenu>
+  <el-menu-item index="3" disabled>Info</el-menu-item>
+  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
+</el-menu>
+<div class="line"></div>
+<el-menu
+  :default-active="activeIndex2"
+  class="el-menu-demo"
+  mode="horizontal"
+  @select="handleSelect"
+  background-color="#545c64"
+  text-color="#fff"
+  active-text-color="#ffd04b">
+  <el-menu-item index="1">Processing Center</el-menu-item>
+  <el-submenu index="2">
+    <template slot="title">Workspace</template>
+    <el-menu-item index="2-1">item one</el-menu-item>
+    <el-menu-item index="2-2">item two</el-menu-item>
+    <el-menu-item index="2-3">item three</el-menu-item>
+    <el-submenu index="2-4">
+      <template slot="title">item four</template>
+      <el-menu-item index="2-4-1">item one</el-menu-item>
+      <el-menu-item index="2-4-2">item two</el-menu-item>
+      <el-menu-item index="2-4-3">item three</el-menu-item>
+    </el-submenu>
+  </el-submenu>
+  <el-menu-item index="3" disabled>Info</el-menu-item>
+  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
+</el-menu>
+
+<script>
+  export default {
+    data() {
+      return {
+        activeIndex: '1',
+        activeIndex2: '1'
+      };
+    },
+    methods: {
+      handleSelect(key, keyPath) {
+        console.log(key, keyPath);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Side bar
+
+NavMenu vertical con sub-menús.
+
+:::demo Puede utilizar el componente `el-menu-item-group` para crear un grupo de menú, y el nombre del grupo estará determinado por la propiedad `title` o la propiedad `slot`.
+
+```html
+<el-row class="tac">
+  <el-col :span="12">
+    <h5>Default colors</h5>
+    <el-menu
+      default-active="2"
+      class="el-menu-vertical-demo"
+      @open="handleOpen"
+      @close="handleClose">
+      <el-submenu index="1">
+        <template slot="title">
+          <i class="el-icon-location"></i>
+          <span>Navigator One</span>
+        </template>
+        <el-menu-item-group title="Group One">
+          <el-menu-item index="1-1">item one</el-menu-item>
+          <el-menu-item index="1-2">item one</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group Two">
+          <el-menu-item index="1-3">item three</el-menu-item>
+        </el-menu-item-group>
+        <el-submenu index="1-4">
+          <template slot="title">item four</template>
+          <el-menu-item index="1-4-1">item one</el-menu-item>
+        </el-submenu>
+      </el-submenu>
+      <el-menu-item index="2">
+        <i class="el-icon-menu"></i>
+        <span>Navigator Two</span>
+      </el-menu-item>
+      <el-menu-item index="3" disabled>
+        <i class="el-icon-document"></i>
+        <span>Navigator Three</span>
+      </el-menu-item>
+      <el-menu-item index="4">
+        <i class="el-icon-setting"></i>
+        <span>Navigator Four</span>
+      </el-menu-item>
+    </el-menu>
+  </el-col>
+  <el-col :span="12">
+    <h5>Custom colors</h5>
+    <el-menu
+      default-active="2"
+      class="el-menu-vertical-demo"
+      @open="handleOpen"
+      @close="handleClose"
+      background-color="#545c64"
+      text-color="#fff"
+      active-text-color="#ffd04b">
+      <el-submenu index="1">
+        <template slot="title">
+          <i class="el-icon-location"></i>
+          <span>Navigator One</span>
+        </template>
+        <el-menu-item-group title="Group One">
+          <el-menu-item index="1-1">item one</el-menu-item>
+          <el-menu-item index="1-2">item one</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group Two">
+          <el-menu-item index="1-3">item three</el-menu-item>
+        </el-menu-item-group>
+        <el-submenu index="1-4">
+          <template slot="title">item four</template>
+          <el-menu-item index="1-4-1">item one</el-menu-item>
+        </el-submenu>
+      </el-submenu>
+      <el-menu-item index="2">
+        <i class="el-icon-menu"></i>
+        <span>Navigator Two</span>
+      </el-menu-item>
+      <el-menu-item index="3" disabled>
+        <i class="el-icon-document"></i>
+        <span>Navigator Three</span>
+      </el-menu-item>
+      <el-menu-item index="4">
+        <i class="el-icon-setting"></i>
+        <span>Navigator Four</span>
+      </el-menu-item>
+    </el-menu>
+  </el-col>
+</el-row>
+
+<script>
+  export default {
+    methods: {
+      handleOpen(key, keyPath) {
+        console.log(key, keyPath);
+      },
+      handleClose(key, keyPath) {
+        console.log(key, keyPath);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Collapse
+
+NavMenu vertical puede ser colapsado.
+
+:::demo
+```html
+<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
+  <el-radio-button :label="false">expand</el-radio-button>
+  <el-radio-button :label="true">collapse</el-radio-button>
+</el-radio-group>
+<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
+  <el-submenu index="1">
+    <template slot="title">
+      <i class="el-icon-location"></i>
+      <span slot="title">Navigator One</span>
+    </template>
+    <el-menu-item-group>
+      <span slot="title">Group One</span>
+      <el-menu-item index="1-1">item one</el-menu-item>
+      <el-menu-item index="1-2">item two</el-menu-item>
+    </el-menu-item-group>
+    <el-menu-item-group title="Group Two">
+      <el-menu-item index="1-3">item three</el-menu-item>
+    </el-menu-item-group>
+    <el-submenu index="1-4">
+      <span slot="title">item four</span>
+      <el-menu-item index="1-4-1">item one</el-menu-item>
+    </el-submenu>
+  </el-submenu>
+  <el-menu-item index="2">
+    <i class="el-icon-menu"></i>
+    <span slot="title">Navigator Two</span>
+  </el-menu-item>
+  <el-menu-item index="3" disabled>
+    <i class="el-icon-document"></i>
+    <span slot="title">Navigator Three</span>
+  </el-menu-item>
+  <el-menu-item index="4">
+    <i class="el-icon-setting"></i>
+    <span slot="title">Navigator Four</span>
+  </el-menu-item>
+</el-menu>
+
+<style>
+  .el-menu-vertical-demo:not(.el-menu--collapse) {
+    width: 200px;
+    min-height: 400px;
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      return {
+        isCollapse: true
+      };
+    },
+    methods: {
+      handleOpen(key, keyPath) {
+        console.log(key, keyPath);
+      },
+      handleClose(key, keyPath) {
+        console.log(key, keyPath);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Atributos Menu
+| Atributo          | Descripción                              | Tipo    | Valores aceptados     | Por defecto |
+| ----------------- | ---------------------------------------- | ------- | --------------------- | ----------- |
+| mode              | modo de presentación del menú            | string  | horizontal / vertical | vertical    |
+| collapse          | si el menú está colapsado (solo en modo vertical) | boolean | —                     | false       |
+| background-color  | color de fondo del menú (formato hexadecimal) | string  | —                     | #ffffff     |
+| text-color        | color de texto del menú (formato hexadecimal) | string  | —                     | #303133     |
+| active-text-color | color de text del menu-item activo (formato hexadecimal) | string  | —                     | #409EFF     |
+| default-active    | índice del menu-item activo              | string  | —                     | —           |
+| default-openeds   | arreglo que contiene las llaves del sub-menus activo | Array   | —                     | —           |
+| unique-opened     | si solo un submenu puede ser activo      | boolean | —                     | false       |
+| menu-trigger      | como dispara eventos sub-menus, solo funciona cuando `mode` es 'horizontal' | string  | hover / click      | hover   |
+| router            | si el modo `vue-router` está activado. Si es verdader, índice será usado como 'path' para activar la ruta | boolean | —                     | false       |
+| collapse-transition  | si se debe permitir collapse transition | boolean   | — | true   |
+
+### Métodos Menu 
+| Métodos de evento | Descripción                   | Parámetros                             |
+| ---------------- | ----------------------------- | -------------------------------------- |
+| open             | abre un sub-menu específico   | index: índice del sub-menu para abrir  |
+| close            | cierra un sub-menu específico | index: índice del sub-menu para cerrar |
+
+### Eventos Menu 
+| Nombre de evento | Descripción                              | Parámetros                               |
+| ---------------- | ---------------------------------------- | ---------------------------------------- |
+| select           | callback ejecutado cuando el menú es activado | index: índice del menú activado, indexPath: index path del menú activado |
+| open             | callback ejecutado cuando sub-menu se expande | index: índice del sub-menu expandido, indexPath: index path del sub-menu expandido |
+| close            | callback ejecutado cuando sub-menu colapsa | index: índice del sub-menu colapsado, indexPath: index path del menú colapsado |
+
+### Eventos Menu-Item 
+| Nombre de evento | Descripción                              | Parámetros                 |
+| ---------------- | ---------------------------------------- | -------------------------- |
+| click            | callback ejecutado cuando se hace click sobre menu-item | el: instancia de menu-item |
+
+### Atributos SubMenu 
+| Atributo     | Descripción                              | Tipo   | Valores aceptados | Por defecto |
+| ------------ | ---------------------------------------- | ------ | ----------------- | ----------- |
+| index        | identificador único                      | string | —                 | —           |
+| popper-class | nombre personalizado de la clase del menu popup | string | —                 | —           |
+| show-timeout | tiempo de espera antes de mostrar un submenú | number | —                 | 300         |
+| hide-timeout | tiempo de espera antes de ocultar un submenú | number | —                 | 300         |
+| disabled | si esta `disabled` el sub-menu | boolean | — | false |
+| popper-append-to-body | si se debe agregar el menú emergente al cuerpo. Si la posición del menú es incorrecta, puede intentar ajustar este prop | boolean | - | level one Submenu: true / other Submenus: false |
+
+### Atributos Menu-Item 
+| Atributo | Descripción         | Tipo   | Valores aceptados | Por defecto |
+| -------- | ------------------- | ------ | ----------------- | ----------- |
+| index    | identificador único | string | —                 | —           |
+| route    | Objeto Vue Router   | object | —                 | —           |
+| disabled | si esta `disabled` | boolean | — | false |
+
+### Atributos Menu-Group 
+| Atributo | Descripción      | Tipo   | Valores aceptados | Por defecto |
+| -------- | ---------------- | ------ | ----------------- | ----------- |
+| title    | título del grupo | string | —                 | —           |
diff --git a/examples/docs/es/message-box.md b/examples/docs/es/message-box.md
new file mode 100644
index 0000000000..05015d2206
--- /dev/null
+++ b/examples/docs/es/message-box.md
@@ -0,0 +1,476 @@
+<script>
+  export default {
+    methods: {
+      open() {
+        this.$alert('This is a message', 'Title', {
+          confirmButtonText: 'OK',
+          callback: action => {
+            this.$message({
+              type: 'info',
+              message: `action: ${ action }`
+            });
+          }
+        });
+      },
+    
+      open2() {
+        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
+          confirmButtonText: 'OK',
+          cancelButtonText: 'Cancel',
+          type: 'warning'
+        }).then(() => {
+          setTimeout(() => {
+            this.$message({
+              message: 'Delete completed',
+              type: 'success'
+            });
+          }, 200);
+        }).catch(() => {
+          setTimeout(() => {
+            this.$message({
+              message: 'Delete canceled',
+              type: 'info'
+            });  
+          }, 200);
+        });
+      },
+    
+      open3() {
+        this.$prompt('Please input your email', 'Tips', {
+          confirmButtonText: 'OK',
+          cancelButtonText: 'Cancel',
+          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
+          inputErrorMessage: 'Invalid Email'
+        }).then(({ value }) => {
+          setTimeout(() => {
+            this.$message({
+              type: 'success',
+              message: 'Your email is:' + value
+            });
+          }, 200);
+        }).catch(() => {
+          setTimeout(() => {
+            this.$message({
+              type: 'info',
+              message: 'Input canceled'
+            });
+          }, 200);
+        });
+      },
+    
+      open4() {
+        const h = this.$createElement;
+        this.$msgbox({
+          title: 'Message',
+          message: h('p', null, [
+            h('span', null, 'Message can be '),
+            h('i', { style: 'color: teal' }, 'VNode')
+          ]),
+          showCancelButton: true,
+          confirmButtonText: 'OK',
+          cancelButtonText: 'Cancel',
+          beforeClose: (action, instance, done) => {
+            if (action === 'confirm') {
+              instance.confirmButtonLoading = true;
+              instance.confirmButtonText = 'Loading...';
+              setTimeout(() => {
+                done();
+                setTimeout(() => {
+                  instance.confirmButtonLoading = false;
+                }, 300);
+              }, 3000);
+            } else {
+              done();
+            }
+          }
+        }).then(action => {
+          setTimeout(() => {
+            this.$message({
+              type: 'info',
+              message: 'action: ' + action
+            });
+          }, 200);
+        });
+      },
+    
+      open5() {
+        this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
+          dangerouslyUseHTMLString: true
+        });
+      },
+    
+      open6() {
+        this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {
+          distinguishCancelAndClose: true,
+          confirmButtonText: 'Save',
+          cancelButtonText: 'Discard Changes'
+        })
+          .then(() => {
+            this.$message({
+              type: 'info',
+              message: 'Changes saved. Proceeding to a new route.'
+            });
+          })
+          .catch(action => {
+            this.$message({
+              type: 'info',
+              message: action === 'cancel'
+                ? 'Changes discarded. Proceeding to a new route.'
+                : 'Stay in the current route'
+            })
+          });
+      },
+    
+      open7() {
+        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
+          confirmButtonText: 'OK',
+          cancelButtonText: 'Cancel',
+          type: 'warning',
+          center: true
+        }).then(() => {
+          this.$message({
+            type: 'success',
+            message: 'Delete completed'
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: 'Delete canceled'
+          });
+        });
+      }
+    }
+  };
+</script>
+
+## MessageBox
+
+Un conjunto de cajas modales simulando un sistema de message box, principalmente para alertar informacion, confirmar operaciones y  mostrar mensajes de aviso.
+:::tip
+Por diseño los message box nos proveen de simulaciones de sistemas como los componentes `alert`, `confirm` y `prompt`，entonces su contenido debería ser simple. para contenido mas complejo, por favor utilize el componente Dialog.
+:::
+
+### Alert
+
+Alert interrumpe las operaciones realizadas hasta que el usuario confirme la alerta.
+
+:::demo Desplegar una alerta utilizando el metodo `$alert`. Simula el sistema `alert`, y no puede ser cerrado al presionar la tecla ESC o al dar click fuera de la caja. En este ejemplo, dos parametros son recibidos `message` y `title`. Vale la pena mencionar que cuando la caja es cerrada, regresa un objeto `Promise` para su procesamiento posteriormente. Si no estas seguro si el navegador soporta `Promise`, deberias importar una libreria de terceros de polyfill o utilizar callbacks.
+
+```html
+<template>
+  <el-button type="text" @click="open">Click to open the Message Box</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open() {
+        this.$alert('This is a message', 'Title', {
+          confirmButtonText: 'OK',
+          callback: action => {
+            this.$message({
+              type: 'info',
+              message: `action: ${ action }`
+            });
+          }
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Confirm
+
+Confirm es utilizado para preguntar al usuario y recibir una confirmacion.
+
+
+:::demo Llamando al metodo `$confirm` para abrir el componente confirm, y simula el sistema `confirm`. Tambien podemos personalizar a gran medida el componente Message Box al mandar un tercer atributo llamado `options` que es literalmente un objeto. El atributo `type` indica el tipo de mensaje, y su valor puede ser `success`, `error`, `info` y `warning`. Se debe tener en cuenta que el segundo atributo `title` debe ser de tipo `string`, y si es de tipo `object`, sera manejado como el atributo `options`. Aqui utilizamos `Promise` para manejar posteriormente el proceso. 
+
+```html
+<template>
+  <el-button type="text" @click="open2">Click to open the Message Box</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open2() {
+        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
+          confirmButtonText: 'OK',
+          cancelButtonText: 'Cancel',
+          type: 'warning'
+        }).then(() => {
+          this.$message({
+            type: 'success',
+            message: 'Delete completed'
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: 'Delete canceled'
+          });          
+        });
+      }
+    }
+  }
+</script>
+```
+
+:::
+
+### Prompt
+
+Prompt es utilizado cuando se requiere entrada de informacion del usuario.
+
+:::demo Llamando al metodo `$prompt` desplegamos el componente prompt, y simula el sistema `prompt`.Puedes utilizar el parametro `inputPattern` para especificar tu propio patron RegExp. Utiliza el parametro `inputValidator` para especificar el metodo de validacion, y debería regresar un valor de tipo `Boolean` o `String`. Al regresar `false` o `String` significa que la validacion a fallado, y la cadena regresada se usara como `inputErrorMessage`. Ademas, puedes perzonalizar el atributo placeholder del input box con el parametro `inputPlaceholder`.
+
+```html
+<template>
+  <el-button type="text" @click="open3">Click to open Message Box</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open3() {
+        this.$prompt('Please input your e-mail', 'Tip', {
+          confirmButtonText: 'OK',
+          cancelButtonText: 'Cancel',
+          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
+          inputErrorMessage: 'Invalid Email'
+        }).then(({ value }) => {
+          this.$message({
+            type: 'success',
+            message: 'Your email is:' + value
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: 'Input canceled'
+          });       
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Personalización
+
+Puede ser personalizado para mostrar diversos contenidos.
+
+:::demo Los tres metodos mencionados anteriormente son un rempaquetado del metodo `$msgbox`. En este ejemplo se realiza una llamada al metodo `$msgbox` directamente utilizando el atributo `showCancelButton`, el cual es utilizado para indicar si el boton cancelar es mostrado en pantalla. Ademas podemos utilizar el atributo `cancelButtonClass` para agregar un estilo personalizado y el atributo `cancelButtonText` para personalizar el texto del boton (el boton de confirmacion tambien cuenta con estos campos, y podra encontrar una lista completa de estos atributos al final de esta documentacion). Este ejemplo tambien utiliza el atributo `beforeClose`. Es un metodo que es disparado cuando una instancia del componente MessageBox es cerrada, y su ejecucion detendra el cierre de la instancia. Tiene tres parametros: `action`, `instance` y `done`. Al utilizarla te permite manipular la instancia antes de que sea cerrada, e.g. activando `loading` para el boton de confirmacion; puede invocar el metodo `done` para cerrar la instancia del componente MessageBox  (si el metodo `done` no es llamado dentro del atributo `beforeClose`, la instancia no podra cerrarse).
+
+```html
+<template>
+  <el-button type="text" @click="open4">Click to open Message Box</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open4() {
+        const h = this.$createElement;
+        this.$msgbox({
+          title: 'Message',
+          message: h('p', null, [
+            h('span', null, 'Message can be '),
+            h('i', { style: 'color: teal' }, 'VNode')
+          ]),
+          showCancelButton: true,
+          confirmButtonText: 'OK',
+          cancelButtonText: 'Cancel',
+          beforeClose: (action, instance, done) => {
+            if (action === 'confirm') {
+              instance.confirmButtonLoading = true;
+              instance.confirmButtonText = 'Loading...';
+              setTimeout(() => {
+                done();
+                setTimeout(() => {
+                  instance.confirmButtonLoading = false;
+                }, 300);
+              }, 3000);
+            } else {
+              done();
+            }
+          }
+        }).then(action => {
+          this.$message({
+            type: 'info',
+            message: 'action: ' + action
+          });
+        });
+      },
+    }
+  }
+</script>
+```
+:::
+
+:::tip
+
+El contenido de MessageBox puede ser `VNode`, permitiéndonos pasar componentes personalizados. Al abrir el MessageBox, Vue compara el nuevo `VNode` con el viejo `VNode`, y luego averigua cómo actualizar eficientemente la interfaz de usuario, de modo que es posible que los componentes no se vuelvan a procesar completamente ([#8931](https://github.com/ElemeFE/element/issues/8931)). En este caso, se puede añadir una clave única a `VNode` cada vez que se abre MessageBox: [ejemplo](https://jsfiddle.net/zhiyang/ezmhq2ef).
+
+:::
+
+### Utiliza cadenas HTML
+
+`message` soporta cadenas HTML.
+
+:::demo Establezca el valor de `dangerouslyUseHTMLString` a true y `message` sera tratado como una cadena HTML.
+
+```html
+<template>
+  <el-button type="text" @click="open5">Click to open Message Box</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open5() {
+        this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
+          dangerouslyUseHTMLString: true
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+:::warning
+Aunque la propiedad `message` soporta cadenas HTML, realizar arbitrariamente render dinamico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir facilmente a [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Entonces cuando `dangerouslyUseHTMLString` esta activada, asegurece que el contendio de `message` sea de confianza, y **nunca** asignar `message` a contenido generado por el usuario.
+:::
+
+### Distinguir entre cancelar y cerrar
+
+En algunos casos, hacer clic en el botón Cancelar y en el botón Cerrar puede tener diferentes significados.
+
+:::demo Por defecto, los parámetros de `Promise's reject callback` y `callback` son `cancel` cuando el usuario cancela (haciendo clic en el botón de cancelación)  y cierra  (haciendo clic en el botón de cerrar o en la capa de máscara, pulsando la tecla ESC) el MessageBox. Si `distinguishCancelAndClose` está ajustado a `true`, los parámetros de las dos operaciones anteriores son `cancel` y `close` respectivamente.
+
+
+```html
+<template>
+  <el-button type="text" @click="open6">Click to open Message Box</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open6() {
+        this.$confirm('You have unsaved changes, save and proceed?', 'Confirm', {
+          distinguishCancelAndClose: true,
+          confirmButtonText: 'Save',
+          cancelButtonText: 'Discard Changes'
+        })
+          .then(() => {
+            this.$message({
+              type: 'info',
+              message: 'Changes saved. Proceeding to a new route.'
+            });
+          })
+          .catch(action => {
+            this.$message({
+              type: 'info',
+              message: action === 'cancel'
+                ? 'Changes discarded. Proceeding to a new route.'
+                : 'Stay in the current route'
+            })
+          });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Centered content
+El contenido del componente MessageBox puede ser centrado.
+
+:::demo Establecer `center` a `true` centrara el contenido
+
+```html
+<template>
+  <el-button type="text" @click="open7">Click to open Message Box</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open7() {
+        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
+          confirmButtonText: 'OK',
+          cancelButtonText: 'Cancel',
+          type: 'warning',
+          center: true
+        }).then(() => {
+          this.$message({
+            type: 'success',
+            message: 'Delete completed'
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: 'Delete canceled'
+          });
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Metodos Globales
+
+Si Element fue importado completamente, agregara los siguientes metodos globales para Vue.prototype: `$msgbox`, `$alert`, `$confirm` y `$prompt`. Asi que en una instancia de Vue puedes llamar el metodo `MessageBox` como lo que hicimos en esta pagina. Los parametros son:
+- `$msgbox(options)`
+- `$alert(message, title, options)` or `$alert(message, options)`
+- `$confirm(message, title, options)` or `$confirm(message, options)`
+- `$prompt(message, title, options)` or `$prompt(message, options)`
+
+### Importación local
+
+Si prefieres importar `MessageBox` cuando lo necesites (on demand):
+
+```javascript
+import { MessageBox } from 'element-ui';
+```
+
+Los metodos correspondientes: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` y `MessageBox.prompt`. Los parametros son los mismos que los anteriores.
+
+### Opciones
+
+| Atributo                 | Descripción                              | Tipo                                     | Valores Permitidos               | Por defecto                              |
+| ------------------------ | ---------------------------------------- | ---------------------------------------- | -------------------------------- | ---------------------------------------- |
+| title                    | titulo del componente MessageBox         | string                                   | —                                | —                                        |
+| message                  | contenido del componente MessageBox      | string                                   | —                                | —                                        |
+| dangerouslyUseHTMLString | utilizado para que `message` sea tratado como una cadena HTML | boolean                                  | —                                | false                                    |
+| type                     | tipo de mensaje , utilizado para mostrar el  icono | string                                   | success / info / warning / error | —                                        |
+| iconClass                | clase personalizada para el icono, sobreescribe `type` | string         | —                          | —           |
+| customClass              | nombre de la clase personzalida para el componente MessageBox | string                                   | —                                | —                                        |
+| callback                 | MessageBox callback al cerrar si no desea utilizar Promise | function(action), donde la accion puede ser 'confirm', 'cancel' o 'close', e `instance`  es la instancia del componente MessageBox. Puedes acceder a los metodos y atributos de esa instancia | —                                | —                                        |
+| beforeClose              | callback llamado antes de cerrar el componente MessageBox, y previene que el componente MessageBox se cierre | function(action, instance, done), donde `action` pueden ser 'confirm', 'cancel' o 'close'; `instance` es la instancia del componente MessageBox, Puedes acceder a los metodos y atributos de esa instancia; `done` es para cerrar la instancia | —                                | —                                        |
+| distinguishCancelAndClose | si se debe distinguir entre cancelar y cerrar | boolean | — | false |
+| lockScroll               | utilizado para bloquear el desplazamiento del contenido del MessageBox prompts | boolean                                  | —                                | true                                     |
+| showCancelButton         | utlizado para mostrar un boton cancelar  | boolean                                  | —                                | false (true cuando es llamado con confirm y prompt) |
+| showConfirmButton        | utlizado para mostrar un boton confirmar | boolean                                  | —                                | true                                     |
+| cancelButtonText         | contenido de texto del boton cancelar    | string                                   | —                                | Cancel                                   |
+| confirmButtonText        | contenido de texto del boton confirmar   | string                                   | —                                | OK                                       |
+| cancelButtonClass        | nombre de la clase personalizada del boton cancelar | string                                   | —                                | —                                        |
+| confirmButtonClass       | nombre de la clase personalizada del boton confirmar | string                                   | —                                | —                                        |
+| closeOnClickModal        | utilizado para que que el componenteMessageBox pueda ser cerrado al dar click en la mascara | boolean                                  | —                                | true (false cuando es llamado con alert) |
+| closeOnPressEscape       | utilizado para que que el componenteMessageBox pueda ser cerrado al presionar la tecla ESC | boolean                                  | —                                | true (false cuando es llamado con alert) |
+| closeOnHashChange        | utilizado para cerra el componente MessageBox cuando hash cambie | boolean                                  | —                                | true                                     |
+| showInput                | utilizado para mostrar el componente input | boolean                                  | —                                | false (true cuando es llamado con prompt) |
+| inputPlaceholder         | placeholder para el componente input     | string                                   | —                                | —                                        |
+| inputType                | tipo del componente input                | string                                   | —                                | text                                     |
+| inputValue               | valor inicial del componente input       | string                                   | —                                | —                                        |
+| inputPattern             | regexp del componente input              | regexp                                   | —                                | —                                        |
+| inputValidator           | funcion de validacion del componente input. Debe regresar un valor de tipo boolean o string. Si regresa un valor tipo string, sera asignado a inputErrorMessage | function                                 | —                                | —                                        |
+| inputErrorMessage        | mensaje de error cuando la validacion falla | string                                   | —                                | Illegal input                            |
+| center                   | utilizado para alinear el contenido al centro | boolean                                  | —                                | false                                    |
+| roundButton              | utilizado para redondear el boton        | boolean                                  | —                                | false                                    |
diff --git a/examples/docs/es/message.md b/examples/docs/es/message.md
new file mode 100644
index 0000000000..20fbd9d9ec
--- /dev/null
+++ b/examples/docs/es/message.md
@@ -0,0 +1,301 @@
+<script>
+  module.exports = {
+    methods: {
+      open() {
+        this.$message('This is a message.');
+      },
+    
+      openVn() {
+        const h = this.$createElement;
+        this.$message({
+          message: h('p', null, [
+            h('span', null, 'Message can be '),
+            h('i', { style: 'color: teal' }, 'VNode')
+          ])
+        });
+      },
+    
+      open2() {
+        this.$message({
+          message: 'Congrats, this is a success message.',
+          type: 'success'
+        });
+      },
+    
+      open3() {
+        this.$message({
+          message: 'Warning, this is a warning message.',
+          type: 'warning'
+        });
+      },
+    
+      open4() {
+        this.$message.error('Oops, this is a error message.');
+      },
+    
+      open5() {
+        this.$message({
+          showClose: true,
+          message: 'This is a message.'
+        });
+      },
+    
+      open6() {
+        this.$message({
+          showClose: true,
+          message: 'Congrats, this is a success message.',
+          type: 'success'
+        });
+      },
+    
+      open7() {
+        this.$message({
+          showClose: true,
+          message: 'Warning, this is a warning message.',
+          type: 'warning'
+        });
+      },
+    
+      open8() {
+        this.$message({
+          showClose: true,
+          message: 'Oops, this is a error message.',
+          type: 'error'
+        });
+      },
+    
+      openCenter() {
+        this.$message({
+          message: 'Centered text',
+          center: true
+        });
+      },
+    
+      openHTML() {
+        this.$message({
+          dangerouslyUseHTMLString: true,
+          message: '<strong>This is <i>HTML</i> string</strong>'
+        });
+      }
+    }
+  };
+</script>
+
+## Message
+
+Utilizado para mostrar retroalimentacion despues de una actividad. La diferencia con el componente Notification es que este ultimo es utilizado para mostrar una notificacion pasiva a nivel de sistema.
+
+### Uso basico
+
+Se muestra en la parte superior de la pagina y desaparece despues de 3 segundos.
+
+:::demo La configuracion del componente Message es muy similar al del componente notification, asi que parte de las opciones no seran explicadas en detalle aqui. Puedes consultar la tabla de opciones en la parte inferior conbinada con la documentacion del componente notification para comprenderla. Element a registrado un metodo `$message` para poder invocarlo. Message puede tomar una cadena o un Vnode como parametro, y lo mostrara como el cuerpo principal.
+
+```html
+<template>
+  <el-button :plain="true" @click="open">Show message</el-button>
+  <el-button :plain="true" @click="openVn">VNode</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open() {
+        this.$message('This is a message.');
+      },
+      
+      openVn() {
+        const h = this.$createElement;
+        this.$message({
+          message: h('p', null, [
+            h('span', null, 'Message can be '),
+            h('i', { style: 'color: teal' }, 'VNode')
+          ])
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Tipos
+
+Utilizados para mostrar retroalimentacion de Success, Warning, Message y Error activities.
+
+:::demo Cuando necesite mas personalizacion, el componente Message tambien puede tomar un objeto como parametro. Por ejemplo, estableciendo el valor de `type` puede definir diferentes tipos, el predeterminado es `info`. En tales casos el cuerpo principal se pasa como el valor de `message`. Tambien, hay registrados metodos para los diferentes tipos, asi que, puedes llamarlos sin necesidad de pasar un tipo como `open4`.
+```html
+<template>
+  <el-button :plain="true" @click="open2">success</el-button>
+  <el-button :plain="true" @click="open3">warning</el-button>
+  <el-button :plain="true" @click="open">message</el-button>
+  <el-button :plain="true" @click="open4">error</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open() {
+        this.$message('This is a message.');
+      },
+      open2() {
+        this.$message({
+          message: 'Congrats, this is a success message.',
+          type: 'success'
+        });
+      },
+
+      open3() {
+        this.$message({
+          message: 'Warning, this is a warning message.',
+          type: 'warning'
+        });
+      },
+
+      open4() {
+        this.$message.error('Oops, this is a error message.');
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Closable
+
+Un boton para cerrar que puede ser agregado.
+
+:::demo Un componente Message predeterminado no se puede cerrar manualmente. Si necesitas un componente message que pueda cerrarse, puedes establecer el campo `showClose`. Ademas, al igual que las notificaciones, message tiene un atriubuto `duration` que puede ser controlado. Por defecto la duracion es de 3000 ms, y no desaparecera al llegar a `0`.
+```html
+<template>
+  <el-button :plain="true" @click="open5">message</el-button>
+  <el-button :plain="true" @click="open6">success</el-button>
+  <el-button :plain="true" @click="open7">warning</el-button>
+  <el-button :plain="true" @click="open8">error</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open5() {
+        this.$message({
+          showClose: true,
+          message: 'This is a message.'
+        });
+      },
+
+      open6() {
+        this.$message({
+          showClose: true,
+          message: 'Congrats, this is a success message.',
+          type: 'success'
+        });
+      },
+
+      open7() {
+        this.$message({
+          showClose: true,
+          message: 'Warning, this is a warning message.',
+          type: 'warning'
+        });
+      },
+
+      open8() {
+        this.$message({
+          showClose: true,
+          message: 'Oops, this is a error message.',
+          type: 'error'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Centered text
+Utiliza el atributo `center` para centrar el texto.
+
+:::demo
+
+```html
+<template>
+  <el-button :plain="true" @click="openCenter">Centered text</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      openCenter() {
+        this.$message({
+          message: 'Centered text',
+          center: true
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Utiliza cadenas HTML
+`message` soporta cadenas HTML.
+
+:::demo Establece la propiedad `dangerouslyUseHTMLString` en true y `message` sera tratado como una cadena HTML.
+
+```html
+<template>
+  <el-button :plain="true" @click="openHTML">Use HTML String</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      openHTML() {
+        this.$message({
+          dangerouslyUseHTMLString: true,
+          message: '<strong>This is <i>HTML</i> string</strong>'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+:::warning
+Aunque la propiedad `message` soporta cadenas HTML, realizar arbitrariamente render dinamico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir facilmente a [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Entonces cuando `dangerouslyUseHTMLString` esta activada, asegurece que el contendio de `message` sea de confianza, y **nunca** asignar `message` a contenido generado por el usuario.
+:::
+
+### Metodos Globales
+
+Element ha agregado un método global llamado `$message` para Vue.prototype. Entonces en una instancia de vue puede llamar a `Message` como lo hicimos en esta pagina.
+
+### Importación local
+
+Import `Message`:
+
+```javascript
+import { Message } from 'element-ui';
+```
+
+En este caso deberia llamar al metodo `Message(options)`. Tambien se han registrado metodos para los diferentes tipos, e.g. `Message.success(options)`. Puede llamar al metodo `Message.closeAll()` para cerrar manualmente todas las instancias.
+
+### Options
+| Atributo                 | Descripcion                              | Tipo           | Valores permitidos         | Por defecto |
+| ------------------------ | ---------------------------------------- | -------------- | -------------------------- | ----------- |
+| message                  | texto del mensaje                        | string / VNode | —                          | —           |
+| type                     | tipo del mensaje                         | string         | success/warning/info/error | info        |
+| iconClass                | clase personalizada para el icono, sobreescribe `type` | string         | —                          | —           |
+| dangerouslyUseHTMLString | utilizado para que `message` sea tratado como cadena HTML | boolean        | —                          | false       |
+| customClass              | nombre de clase personalizado para el componente Message | string         | —                          | —           |
+| duration                 | muestra la duracion,en milisegundos. si se establece en 0, este no se apagara automaticamente | number         | —                          | 3000        |
+| showClose                | utilizado para mostrar un boton para cerrar | boolean        | —                          | false       |
+| center                   | utilizado para centrar el texto          | boolean        | —                          | false       |
+| onClose                  | funcion callback ejecutada cuando se cierra con una instancia de mensaje como parametro | function       | —                          | —           |
+
+### Metodos
+`Message` y `this.$message` regresan una instancia del componente Message. Para cerrar manualmente la instancia, puede llamar al metodo `close`.
+| Metodo | Descripcion                  |
+| ------ | ---------------------------- |
+| close  | cierra el componente Message |
diff --git a/examples/docs/es/notification.md b/examples/docs/es/notification.md
new file mode 100644
index 0000000000..66fae1f25d
--- /dev/null
+++ b/examples/docs/es/notification.md
@@ -0,0 +1,430 @@
+<script>
+  module.exports = {
+    methods: {
+      open() {
+        const h = this.$createElement;
+    
+        this.$notify({
+          title: 'Title',
+          message: h('i', { style: 'color: teal' }, 'This is a reminder')
+        });
+      },
+    
+      open2() {
+        this.$notify({
+          title: 'Prompt',
+          message: 'This is a message that does not automatically close',
+          duration: 0
+        });
+      },
+    
+      open3() {
+        this.$notify({
+          title: 'Success',
+          message: 'This is a success message',
+          type: 'success'
+        });
+      },
+    
+      open4() {
+        this.$notify({
+          title: 'Warning',
+          message: 'This is a warning message',
+          type: 'warning'
+        });
+      },
+    
+      open5() {
+        this.$notify.info({
+          title: 'Info',
+          message: 'This is an info message'
+        });
+      },
+    
+      open6() {
+        this.$notify.error({
+          title: 'Error',
+          message: 'This is an error message'
+        });
+      },
+    
+      open7() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'I\'m at the top right corner'
+        });
+      },
+    
+      open8() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'I\'m at the bottom right corner',
+          position: 'bottom-right'
+        });
+      },
+    
+      open9() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'I\'m at the bottom left corner',
+          position: 'bottom-left'
+        });
+      },
+    
+      open10() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'I\'m at the top left corner',
+          position: 'top-left'
+        });
+      },
+    
+      open11() {
+        this.$notify.success({
+          title: 'Success',
+          message: 'This is a success message',
+          offset: 100
+        });
+      },
+    
+      open12() {
+        this.$notify({
+          title: 'HTML String',
+          dangerouslyUseHTMLString: true,
+          message: '<strong>This is <i>HTML</i> string</strong>'
+        });
+      },
+      
+      open13() {
+        this.$notify.success({
+          title: 'Info',
+          message: 'This is a message without close button',
+          showClose: false
+        });
+      },
+    
+      onClose() {
+        console.log('Notification is closed');
+      }
+    }
+  };
+</script>
+
+## Notification
+
+Muestra un mensaje de notificación global en una esquina de la página.
+
+### Uso básico
+
+:::demo Element ha registrado el método`$notify` y recibe un objeto como parámetro. En el caso más sencillo, puede establecer el campo de `title` y el campo de ` message` para el título y el cuerpo de la notificación. De forma predeterminada, la notificación se cierra automáticamente después de 4500ms, pero configurando `duration`  se puede controlar su duración. Específicamente, si está configurado en `0`, no se cerrará automáticamente. Tenga en cuenta que `duration` recibe un `Number` en milisegundos.
+
+```html
+<template>
+  <el-button
+    plain
+    @click="open">
+    Closes automatically
+  </el-button>
+  <el-button
+    plain
+    @click="open2">
+    Won't close automatically
+    </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open() {
+        const h = this.$createElement;
+
+        this.$notify({
+          title: 'Title',
+          message: h('i', { style: 'color: teal' }, 'This is a reminder')
+        });
+      },
+
+      open2() {
+        this.$notify({
+          title: 'Prompt',
+          message: 'This is a message that does not automatically close',
+          duration: 0
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Tipos de notificaciones
+
+Proporcionamos cuatro tipos: success, warning, info y error.
+
+:::demo Element proporciona cuatro tipos de notificación: `success`, `warning`, `info` y `error`. Se definen por el campo `type`  y se ignorarán otros valores. También se han registrado métodos para estos tipos que se pueden invocar directamente como en el ejemplo `open5` y `open6` sin pasar un campo `type`.
+
+```html
+<template>
+  <el-button
+    plain
+    @click="open3">
+    Success
+  </el-button>
+  <el-button
+    plain
+    @click="open4">
+    Warning
+  </el-button>
+  <el-button
+    plain
+    @click="open5">
+    Info
+  </el-button>
+  <el-button
+    plain
+    @click="open6">
+    Error
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open3() {
+        this.$notify({
+          title: 'Success',
+          message: 'This is a success message',
+          type: 'success'
+        });
+      },
+
+      open4() {
+        this.$notify({
+          title: 'Warning',
+          message: 'This is a warning message',
+          type: 'warning'
+        });
+      },
+
+      open5() {
+        this.$notify.info({
+          title: 'Info',
+          message: 'This is an info message'
+        });
+      },
+
+      open6() {
+        this.$notify.error({
+          title: 'Error',
+          message: 'This is an error message'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Posicion personalizada
+
+La notificación puede surgir de cualquier rincón que uno desee.
+
+:::demo El atributo `position` define desde qué esquina se desliza la notificación. Puede ser `top-right`, `top-left`, `bottom-right` o `bottom-left`. Predeterminado: `top-right`.
+
+```html
+<template>
+  <el-button
+    plain
+    @click="open7">
+    Top Right
+  </el-button>
+  <el-button
+    plain
+    @click="open8">
+    Bottom Right
+  </el-button>
+  <el-button
+    plain
+    @click="open9">
+    Bottom Left
+  </el-button>
+  <el-button
+    plain
+    @click="open10">
+    Top Left
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open7() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'I\'m at the top right corner'
+        });
+      },
+
+      open8() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'I\'m at the bottom right corner',
+          position: 'bottom-right'
+        });
+      },
+
+      open9() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'I\'m at the bottom left corner',
+          position: 'bottom-left'
+        });
+      },
+
+      open10() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'I\'m at the top left corner',
+          position: 'top-left'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Desplazamiento
+
+Personalizar el desplazamiento de notificación desde el borde de la pantalla.
+
+:::demo Configure el atributo `offset` para personalizar el desplazamiento de la notificación desde el borde de la pantalla. Tenga en cuenta que cada instancia de la notificación del mismo momento debe tener el mismo desplazamiento.
+
+```html
+<template>
+  <el-button
+    plain
+    @click="open11">
+    Notification with offset
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open11() {
+        this.$notify.success({
+          title: 'Success',
+          message: 'This is a success message',
+          offset: 100
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Usando cadenas HTML
+`message` soporta cadenas HTML.
+
+:::demo Configure `dangerouslyUseHTMLString` a true y `message` se tratará como una cadena HTML.
+
+```html
+<template>
+  <el-button
+    plain
+    @click="open12">
+    Use HTML String
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open12() {
+        this.$notify({
+          title: 'HTML String',
+          dangerouslyUseHTMLString: true,
+          message: '<strong>This is <i>HTML</i> string</strong>'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+:::warning
+
+Aunque la propiedad `message` soporta cadenas HTML, el renderizado dinámico de HTML arbitrario en su sitio web puede ser muy peligroso porque puede conducir fácilmente a [ataques XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Por lo tanto, cuando `dangerouslyUseHTMLString` está a true, por favor asegúrese de que el contenido del mensaje es confiable, y **nunca** asigne `message` al contenido proporcionado por el usuario.
+
+:::
+
+### Ocultar boton de cerrar
+
+Es posible ocultar el botón de cerrar
+
+:::demo Configure el atributo `showClose` como `false` para que el usuario no pueda cerrar la notificación.
+
+```html
+<template>
+  <el-button
+    plain
+    @click="open13">
+    Hide close button
+    </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open13() {
+        this.$notify.success({
+          title: 'Info',
+          message: 'This is a message without close button',
+          showClose: false
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Metodo global
+
+Element ha añadido un método global `$notify` para Vue.prototype. Así que en una instancia de vue se puede llamar `Notification` como lo hacemos en esta página.
+
+### Importar localmente
+
+Importar `Notification`:
+
+```javascript
+import { Notification } from 'element-ui';
+```
+
+En este caso, debe llamar a `Notification(options)`. También se han registrado métodos para diferentes tipos, e.j. `Notification.success(options)`. Puede llamar al metodo `Notification.closeAll()` para cerrar manualmente todas las instancias.
+
+### Opciones
+| Atributo                 | Descripción                              | Tipo             | Valores aceptados                        | Por defecto |
+| ------------------------ | ---------------------------------------- | ---------------- | ---------------------------------------- | ----------- |
+| title                    | titulo                                   | string           | —                                        | —           |
+| message                  | mensaje                                  | string/Vue.VNode | —                                        | —           |
+| dangerouslyUseHTMLString | si  `message` es tratado como una cadena HTML | boolean          | —                                        | false       |
+| type                     | tipo de notificacion                     | string           | success/warning/info/error               | —           |
+| iconClass                | clase personalizada de icono. Será anulado por `type` | string           | —                                        | —           |
+| customClass              | nombre de clase personalizado para la notificacion | string           | —                                        | —           |
+| duration                 | duracion antes de cerrar. Si no se quiere que se cierre automaticamente este valor debe estar a 0 | number           | —                                        | 4500        |
+| position                 | posicion personalizada                   | string           | top-right/top-left/bottom-right/bottom-left | top-right   |
+| showClose                | si se muestra el boton de cerrar         | boolean          | —                                        | true        |
+| onClose                  | funcion que se ejecuta cuando la notificación se cierra | function         | —                                        | —           |
+| onClick                  | funcion que se ejecuta cuando se hace click en la notificación | function         | —                                        | —           |
+| offset                   | desplazamiento desde el borde superior de la pantalla. Cada instancia de notificación del mismo momento debe tener siempre el mismo desplazamiento. | number           | —                                        | 0           |
+
+### Metodos
+`Notification` y `this.$notify` devuelven la instancia de la notificacion actual. Para cerrar manualmente la instancia, se puede llamar `close` para ello.
+
+| Metodo | Descripción            |
+| ------ | ---------------------- |
+| close  | cierra la notificación |
diff --git a/examples/docs/es/pagination.md b/examples/docs/es/pagination.md
new file mode 100644
index 0000000000..3c1e928a81
--- /dev/null
+++ b/examples/docs/es/pagination.md
@@ -0,0 +1,237 @@
+<style>
+  .demo-pagination .source.first {
+    padding: 0;
+  }
+
+  .demo-pagination .first .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    display: inline-block;
+    width: 50%;
+    box-sizing: border-box;
+    
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .demo-pagination .first .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+
+  .demo-pagination .source.last {
+    padding: 0;
+  }
+
+  .demo-pagination .last .block {
+    padding: 30px 24px;
+    border-bottom: solid 1px #EFF2F6;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .demo-pagination .last .demonstration {
+    font-size: 14px;
+    color: #8492a6;
+    line-height: 44px;
+  }
+
+  .demo-pagination .last .demonstration + .el-pagination {
+    float: right;
+    width: 70%;
+    margin: 5px 20px 0 0;
+  }
+</style>
+
+## Paginación
+Si tiene que mostrar muchos datos en una página, utilice la paginación.
+
+### Uso básico
+
+:::demo Asigne en el atributo `layout` los diferentes elementos que quiere utilizar separados por coma. Los elementos de paginación son: `prev` (un botón para navegar a la página anterior), `next` (un botón para navegar a la siguiente página), `pager` (lista de página), `jumper` (un `input` para saltar a una página determinada), `total` (total de elementos), `size` (un `select` para seleccionar el tamaño de la página ) y `->`(todo elemento situado luego de este símbolo será movido a la derecha).
+```html
+<div class="block">
+  <span class="demonstration">When you have few pages</span>
+  <el-pagination
+    layout="prev, pager, next"
+    :total="50">
+  </el-pagination>
+</div>
+<div class="block">
+  <span class="demonstration">When you have more than 7 pages</span>
+  <el-pagination
+    layout="prev, pager, next"
+    :total="1000">
+  </el-pagination>
+</div>
+```
+:::
+
+### Number of pagers
+
+:::demo By default, Pagination collapses extra pager buttons when it has more than 7 pages. This can be configured with the `pager-count` attribute.
+```html
+<el-pagination
+  :page-size="20"
+  :pager-count="11"
+  layout="prev, pager, next"
+  :total="1000">
+</el-pagination>
+```
+:::
+
+### Paginación pequeña
+
+Usa una paginación pequeña en caso de espacio limitado.
+
+:::demo Solo ponga el atributo `small` como `true` y la Paginación se volverá pequeña.
+```html
+<el-pagination
+  small
+  layout="prev, pager, next"
+  :total="50">
+</el-pagination>
+```
+:::
+
+### Más elementos
+
+Agrega más modulos basados en su escenario.
+
+:::demo Este ejemplo es un completo caso de uso. Utiliza los eventos `size-change` y `current-change` para manejar el tamaño de página y el cambio de página. El atributo `page-sizes` acepta un arreglo de enteros, cada uno representa un diferente valor del atributo `sizes` que es un `select`, ejemplo `[100, 200, 300, 400]` indicará que el `select` tendrá las opciones: 100, 200, 300 o 400 elementos por página.
+
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Total item count</span>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page.sync="currentPage1"
+      :page-size="100"
+      layout="total, prev, pager, next"
+      :total="1000">
+    </el-pagination>
+  </div>
+  <div class="block">
+    <span class="demonstration">Change page size</span>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page.sync="currentPage2"
+      :page-sizes="[100, 200, 300, 400]"
+      :page-size="100"
+      layout="sizes, prev, pager, next"
+      :total="1000">
+    </el-pagination>
+  </div>
+  <div class="block">
+    <span class="demonstration">Jump to</span>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page.sync="currentPage3"
+      :page-size="100"
+      layout="prev, pager, next, jumper"
+      :total="1000">
+    </el-pagination>
+  </div>
+  <div class="block">
+    <span class="demonstration">All combined</span>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page.sync="currentPage4"
+      :page-sizes="[100, 200, 300, 400]"
+      :page-size="100"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="400">
+    </el-pagination>
+  </div>
+</template>
+<script>
+  export default {
+    methods: {
+      handleSizeChange(val) {
+        console.log(`${val} items per page`);
+      },
+      handleCurrentChange(val) {
+        console.log(`current page: ${val}`);
+      }
+    },
+    data() {
+      return {
+        currentPage1: 5,
+        currentPage2: 5,
+        currentPage3: 5,
+        currentPage4: 4
+      };
+    }
+  }
+</script>
+```
+:::
+<script>
+  import { addClass } from 'element-ui/src/utils/dom';
+  export default {
+    data() {
+      return {
+        currentPage1: 5,
+        currentPage2: 5,
+        currentPage3: 5,
+        currentPage4: 4
+      };
+    },
+    methods: {
+      handleSizeChange(val) {
+        console.log(`${val} items per page`);
+      },
+      handleCurrentChange(val) {
+        console.log(`current page: ${val}`);
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        let demos = document.querySelectorAll('.source');
+        let firstDemo = demos[0];
+        let lastDemo = demos[demos.length - 1];
+        addClass(firstDemo, 'first');
+        addClass(lastDemo, 'last');
+      });
+    }
+  }
+</script>
+
+### Atributos
+| Atributo     | Descripción                              | Tipo     | Valores aceptados                        | Por defecto                            |
+| ------------ | ---------------------------------------- | -------- | ---------------------------------------- | -------------------------------------- |
+| small        | usar paginación pequeña                  | boolean  | —                                        | false                                  |
+| page-size    | cantidad de elementos por página, soporta el modificador .sync         | number   | —                                        | 10                                     |
+| total        | total de elementos                       | number   | —                                        | —                                      |
+| page-count   | total de páginas. Asigna `total` o `page-count` y las páginas serán mostradas; si necesitas `page-sizes`, `total` es **requerido** | number   | —                                        | —                                      |
+| pager-count  | número de paginadores. La paginación colapsa cuando el número total de páginas excede este valor. | number | odd number between 5 and 21 | 7 |
+| current-page | número actual de la página, soporta el modificador .sync | number   | —                                        | 1                                      |
+| layout       | layout de la paginación, elementos separados por coma | string   | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total' |
+| page-sizes   | opciones para la cantidad de elementos por página | number[] | —                                        | [10, 20, 30, 40, 50, 100]              |
+| popper-class | clase propia para el `dropdown` del `select` del número de páginas | string   | —                                        | —                                      |
+| prev-text    | texto para el botón `prev`               | string   | —                                        | —                                      |
+| next-text    | texto para el botón `next`               | string   | —                                        | —                                      |
+| disabled | si Pagination esta disabled | boolean | — | false |
+
+### Eventos
+| Nombre del evento | Descripción                             | Parámetros                    |
+| ----------------- | --------------------------------------- | ----------------------------- |
+| size-change       | se dispara cuando `page-size` cambia    | nuevo valor de `page-size`    |
+| current-change    | se dispara cuando `current-page` cambia | nuevo valor de `current-page` |
+| prev-click | Se dispara cuando el boton `prev` recibe el click y la pagina actual cambia | la nueva pagina actual |
+| next-click | Se dispara cuando el boton `next` recibe el click y la pagina actual cambia | la nueva pagina actual |
+
+### Slot
+| Nombre | Descripción                              |
+| ------ | ---------------------------------------- |
+| —      | Elemento propio. Para utilizar esto necesitas declarar `slot` en el `layout` |
diff --git a/examples/docs/es/popover.md b/examples/docs/es/popover.md
new file mode 100644
index 0000000000..bdc1c71357
--- /dev/null
+++ b/examples/docs/es/popover.md
@@ -0,0 +1,264 @@
+<script>
+  export default {
+    data() {
+      return {
+        visible: false,
+        visible2: false,
+        gridData: [{
+          date: '2016-05-02',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          date: '2016-05-04',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          date: '2016-05-01',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          date: '2016-05-03',
+          name: 'Jack',
+          address: 'New York City'
+        }],
+        gridData2: [{
+          date: '2016-05-02',
+          name: 'Jack',
+          address: 'New York City',
+        }, {
+          date: '2016-05-04',
+          name: 'Jack',
+          address: 'New York City',
+          $info: true
+        }, {
+          date: '2016-05-01',
+          name: 'Jack',
+          address: 'New York City',
+        }, {
+          date: '2016-05-03',
+          name: 'Jack',
+          address: 'New York City',
+          $positive: true
+        }],
+        gridData3: [{
+          tag: 'Home',
+          date: '2016-05-03',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          tag: 'Company',
+          date: '2016-05-02',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          tag: 'Company',
+          date: '2016-05-04',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          tag: 'Home',
+          date: '2016-05-01',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          tag: 'Company',
+          date: '2016-05-08',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          tag: 'Home',
+          date: '2016-05-06',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          tag: 'Company',
+          date: '2016-05-07',
+          name: 'Jack',
+          address: 'New York City'
+        }]
+      };
+    }
+  };
+</script>
+
+<style>
+  .demo-box.demo-popover {
+    .el-popover + .el-popover {
+      margin-left: 10px;
+    }
+    .el-input {
+      width: 360px;
+    }
+    .el-button {
+      margin-left: 10px;
+    }
+  }
+</style>
+
+## Popover
+
+### Uso básico
+
+Similar a un Tooltip, Popover está construido con `Vue-popper`. Así que para atributos duplicados, por favor refiérase a la documentación de Tooltip.
+
+:::demo El atributo `trigger` es usado para definir como el popover se dispara: `hover`, `click`, `focus` o `manual`. As for the triggering element, you can write it in two different ways: use the `slot="reference"` [named slot](https://vuejs.org/v2/guide/components.html#Named-Slots), or use the `v-popover` directive and set it to Popover's `ref`.
+
+```html
+<template>
+  <el-popover
+    placement="top-start"
+    title="Title"
+    width="200"
+    trigger="hover"
+    content="this is content, this is content, this is content">
+    <el-button slot="reference">Hover to activate</el-button>
+  </el-popover>
+
+  <el-popover
+    placement="bottom"
+    title="Title"
+    width="200"
+    trigger="click"
+    content="this is content, this is content, this is content">
+    <el-button slot="reference">Click to activate</el-button>
+  </el-popover>
+
+  <el-popover
+    ref="popover"
+    placement="right"
+    title="Title"
+    width="200"
+    trigger="focus"
+    content="this is content, this is content, this is content">
+  </el-popover>
+  <el-button v-popover:popover>Focus to activate</el-button>
+
+  <el-popover
+    placement="bottom"
+    title="Title"
+    width="200"
+    trigger="manual"
+    content="this is content, this is content, this is content"
+    v-model="visible">
+    <el-button slot="reference" @click="visible = !visible">Manual to activate</el-button>
+  </el-popover>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        visible: false
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Información anidada
+Otros componentes pueden anidarse dentro de popover. A continuación un ejemplo de una tabla anidada.
+
+:::demo Reemplaza el atributo `content` con un `slot`.
+
+```html
+<el-popover
+  placement="right"
+  width="400"
+  trigger="click">
+  <el-table :data="gridData">
+    <el-table-column width="150" property="date" label="date"></el-table-column>
+    <el-table-column width="100" property="name" label="name"></el-table-column>
+    <el-table-column width="300" property="address" label="address"></el-table-column>
+  </el-table>
+  <el-button slot="reference">Click to activate</el-button>
+</el-popover>
+
+<script>
+  export default {
+    data() {
+      return {
+        gridData: [{
+          date: '2016-05-02',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          date: '2016-05-04',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          date: '2016-05-01',
+          name: 'Jack',
+          address: 'New York City'
+        }, {
+          date: '2016-05-03',
+          name: 'Jack',
+          address: 'New York City'
+        }]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Operación anidada
+
+Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `dialog`.
+
+:::demo
+```html
+<el-popover
+  placement="top"
+  width="160"
+  v-model="visible2">
+  <p>Are you sure to delete this?</p>
+  <div style="text-align: right; margin: 0">
+    <el-button size="mini" type="text" @click="visible2 = false">cancel</el-button>
+    <el-button type="primary" size="mini" @click="visible2 = false">confirm</el-button>
+  </div>
+  <el-button slot="reference">Delete</el-button>
+</el-popover>
+
+<script>
+  export default {
+    data() {
+      return {
+        visible2: false,
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Atributos
+| Atributo       | Descripción                              | Tipo           | Valores aceptados                        | Por defecto                              |
+| -------------- | ---------------------------------------- | -------------- | ---------------------------------------- | ---------------------------------------- |
+| trigger        | cómo se dispara el popover               | string         | click/focus/hover/manual                 | click                                    |
+| title          | título del popover                       | string         | —                                        | —                                        |
+| content        | contenido del popover, puede ser sustituido por un `slot` | string         | —                                        | —                                        |
+| width          | ancho del popover                        | string, number | —                                        | Min width 150px                          |
+| placement      | posición del popover en la pantalla      | string         | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom                                   |
+| disabled       | si el popover está deshabilitado         | boolean        | —                                        | false                                    |
+| value(v-model) | si el popover está visible               | Boolean        | —                                        | false                                    |
+| offset         | popover offset                           | number         | —                                        | 0                                        |
+| transition     | popover transition animation             | string         | —                                        | el-fade-in-linear                        |
+| visible-arrow  | si una flecha del tooltip es mostrada o no. Para más información, por favor refiérase a [Vue-popper](https://github.com/element-component/vue-popper) | boolean        | —                                        | true                                     |
+| popper-options | parámetros para [popper.js](https://popper.js.org/documentation.html) | object         | por favor, refiérase a [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
+| popper-class   | clase propia para popover                | string         | —                                        | —                                        |
+| open-delay     | retraso de la aparición cuando `trigger` es hover, en milisegundos | number         | —                                        | —                                        |
+
+### Slot
+| Nombre    | Descripción                          |
+| --------- | ------------------------------------ |
+| —         | texto contenido en popover           |
+| reference | elemento HTML que dispara el popover |
+
+### Eventos
+| Nombre del evento | Descripción                             | Parámetros |
+| ----------------- | --------------------------------------- | ---------- |
+| show              | se dispara cuando se muestra el popover | —          |
+| after-enter       | se dispara cuando la transicion de entrada termina | —       |
+| hide              | se dispara cuando se oculta el popover  | —          |
+| after-leave       | se dispara cuando la transicion de salida termina | —        |
diff --git a/examples/docs/es/progress.md b/examples/docs/es/progress.md
new file mode 100644
index 0000000000..3ed961bc52
--- /dev/null
+++ b/examples/docs/es/progress.md
@@ -0,0 +1,62 @@
+<style>
+  .demo-box.demo-progress {
+    .el-progress--line {
+      margin-bottom: 15px;
+      width: 350px;
+    }
+    .el-progress--circle {
+      margin-right: 15px;
+    }
+  }
+</style>
+## Progreso
+Progreso es usado para mostrar el estado de la operación actual e informar al usuario acerca de ésta.
+
+### Barra de progreso lineal (porcentage externo)
+
+:::demo Usa el atributo `percentage` para asignar el porcentage. Este es **requerido** y tiene que ser un valor entre `0-100`.
+```html
+<el-progress :percentage="0"></el-progress>
+<el-progress :percentage="70"></el-progress>
+<el-progress :percentage="80" color="#8e71c7"></el-progress>
+<el-progress :percentage="100" status="success"></el-progress>
+<el-progress :percentage="50" status="exception"></el-progress>
+```
+:::
+
+### Barra de progreso lineal (porcentage interno)
+En este caso el porcentage no toma espacio adicional.
+
+:::demo El atributo `stroke-width` decide el ancho de la barra de progreso, y usa el atributo `text-inside` para poner la descripción dentro de la misma.
+```html
+<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
+<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
+<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>
+<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
+<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>
+```
+:::
+
+### Barra de progreso circular
+
+:::demo Puede asignar el atributo `type` como `circle` para usar la barra circular de progreso, y usar el atributo `width` para cambiar el tamaño del círculo.
+```html
+<el-progress type="circle" :percentage="0"></el-progress>
+<el-progress type="circle" :percentage="25"></el-progress>
+<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>
+<el-progress type="circle" :percentage="100" status="success"></el-progress>
+<el-progress type="circle" :percentage="50" status="exception"></el-progress>
+```
+:::
+
+### Atributos
+| Atributo     | Descripción                              | Tipo    | Valores aceptado  | Por defecto |
+| ------------ | ---------------------------------------- | ------- | ----------------- | ----------- |
+| percentage   | porcentaje, requerido                    | number  | 0-100             | 0           |
+| type         | tipo de barra de progreso                | string  | line/circle       | line        |
+| stroke-width | ancho de la barra de progreso            | number  | —                 | 6           |
+| text-inside  | mostrar el porcentaje dentro de la barra de progreso, solo funciona cuando `type` es 'line' | boolean | —                 | false       |
+| status       | estado actual de la barra de progreso    | string  | success/exception | —           |
+| color        | color de fondo de la barra de progreso. Sobreescribe la propiedad `status` | string     | — |       — |
+| width        | ancho del canvas que contiene la barra de progreso circula | number  | —                 | 126         |
+| show-text    | mostrar porcentaje                       | boolean | —                 | true        |
diff --git a/examples/docs/es/quickstart.md b/examples/docs/es/quickstart.md
new file mode 100644
index 0000000000..3c3a1c596c
--- /dev/null
+++ b/examples/docs/es/quickstart.md
@@ -0,0 +1,268 @@
+## Inicio rápido
+
+Esta sección te guía en el proceso de usar Element con webpack en un proyecto.
+
+### Use vue-cli@3
+
+We provide an [Element plugin](https://github.com/ElementUI/vue-cli-plugin-element) for vue-cli@3, which you can use to quickly build an Element-based project.
+
+### Usa la plantilla de Kit de inicio
+
+Proveemos una plantilla general [project template](https://github.com/ElementUI/element-starter). Para los usuarios de Laravel, también tenemos [template](https://github.com/ElementUI/element-in-laravel-starter). Puedes descargarlas y agregarlas directamente también.
+
+Si prefiere no utilizarlas, lee las siguientes secciones de este documento.
+
+### Importando Element
+
+Puede importar Element completamente o solamente importar lo que necesite. Comencemos importando todo.
+
+#### Importando todo
+
+In main.js:
+
+```javascript
+import Vue from 'vue';
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import App from './App.vue';
+
+Vue.use(ElementUI);
+
+new Vue({
+  el: '#app',
+  render: h => h(App)
+});
+```
+
+El código anterior importa Element completamente. Nótese que el archivo CSS necesita ser incluido por separado.
+
+#### En demanda
+
+Con la ayuda de [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component), podemos importar los componentes que necesitamos, haciendo nuestro proyecto más pequeño que de la otra manera.
+
+Primero, instale babel-plugin-component:
+
+```bash
+npm install babel-plugin-component -D
+```
+
+Luego edite .babelrc:
+
+```json
+{
+  "presets": [["es2015", { "modules": false }]],
+  "plugins": [
+    [
+      "component",
+      {
+        "libraryName": "element-ui",
+        "styleLibraryName": "theme-chalk"
+      }
+    ]
+  ]
+}
+```
+
+Luego, si necesita Button y Select, edite main.js:
+
+```javascript
+import Vue from 'vue';
+import { Button, Select } from 'element-ui';
+import App from './App.vue';
+
+Vue.component(Button.name, Button);
+Vue.component(Select.name, Select);
+/* or
+ * Vue.use(Button)
+ * Vue.use(Select)
+ */
+
+new Vue({
+  el: '#app',
+  render: h => h(App)
+});
+```
+
+Ejemplo completo (Referencia completa de componentes [components.json](https://github.com/ElemeFE/element/blob/master/components.json))
+
+```javascript
+import Vue from 'vue';
+import {
+  Pagination,
+  Dialog,
+  Autocomplete,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
+  Menu,
+  Submenu,
+  MenuItem,
+  MenuItemGroup,
+  Input,
+  InputNumber,
+  Radio,
+  RadioGroup,
+  RadioButton,
+  Checkbox,
+  CheckboxButton,
+  CheckboxGroup,
+  Switch,
+  Select,
+  Option,
+  OptionGroup,
+  Button,
+  ButtonGroup,
+  Table,
+  TableColumn,
+  DatePicker,
+  TimeSelect,
+  TimePicker,
+  Popover,
+  Tooltip,
+  Breadcrumb,
+  BreadcrumbItem,
+  Form,
+  FormItem,
+  Tabs,
+  TabPane,
+  Tag,
+  Tree,
+  Alert,
+  Slider,
+  Icon,
+  Row,
+  Col,
+  Upload,
+  Progress,
+  Badge,
+  Card,
+  Rate,
+  Steps,
+  Step,
+  Carousel,
+  CarouselItem,
+  Collapse,
+  CollapseItem,
+  Cascader,
+  ColorPicker,
+  Transfer,
+  Container,
+  Header,
+  Aside,
+  Main,
+  Footer,
+  Loading,
+  MessageBox,
+  Message,
+  Notification
+} from 'element-ui';
+
+Vue.use(Pagination);
+Vue.use(Dialog);
+Vue.use(Autocomplete);
+Vue.use(Dropdown);
+Vue.use(DropdownMenu);
+Vue.use(DropdownItem);
+Vue.use(Menu);
+Vue.use(Submenu);
+Vue.use(MenuItem);
+Vue.use(MenuItemGroup);
+Vue.use(Input);
+Vue.use(InputNumber);
+Vue.use(Radio);
+Vue.use(RadioGroup);
+Vue.use(RadioButton);
+Vue.use(Checkbox);
+Vue.use(CheckboxGroup);
+Vue.use(Switch);
+Vue.use(Select);
+Vue.use(Option);
+Vue.use(OptionGroup);
+Vue.use(Button);
+Vue.use(ButtonGroup);
+Vue.use(Table);
+Vue.use(TableColumn);
+Vue.use(DatePicker);
+Vue.use(TimeSelect);
+Vue.use(TimePicker);
+Vue.use(Popover);
+Vue.use(Tooltip);
+Vue.use(Breadcrumb);
+Vue.use(BreadcrumbItem);
+Vue.use(Form);
+Vue.use(FormItem);
+Vue.use(Tabs);
+Vue.use(TabPane);
+Vue.use(Tag);
+Vue.use(Tree);
+Vue.use(Alert);
+Vue.use(Slider);
+Vue.use(Icon);
+Vue.use(Row);
+Vue.use(Col);
+Vue.use(Upload);
+Vue.use(Progress);
+Vue.use(Badge);
+Vue.use(Card);
+Vue.use(Rate);
+Vue.use(Steps);
+Vue.use(Step);
+Vue.use(Carousel);
+Vue.use(CarouselItem);
+Vue.use(Collapse);
+Vue.use(CollapseItem);
+Vue.use(Cascader);
+Vue.use(ColorPicker);
+Vue.use(Transfer);
+Vue.use(Container);
+Vue.use(Header);
+Vue.use(Aside);
+Vue.use(Main);
+Vue.use(Footer);
+
+Vue.use(Loading.directive);
+
+Vue.prototype.$loading = Loading.service;
+Vue.prototype.$msgbox = MessageBox;
+Vue.prototype.$alert = MessageBox.alert;
+Vue.prototype.$confirm = MessageBox.confirm;
+Vue.prototype.$prompt = MessageBox.prompt;
+Vue.prototype.$notify = Notification;
+Vue.prototype.$message = Message;
+```
+
+### Configuración global
+
+Cuando importa Element, puede definir un objeto global de configuración. Por ahora este elemento solo contiene dos propiedades: `size`, `zIndex`. `size` define el tamaño por defecto de todos los componentes. The property `zIndex` sets the initial z-index (default: 2000) for modal boxes:
+
+Importando Element completamente：
+
+```js
+import Vue from 'vue';
+import Element from 'element-ui';
+Vue.use(Element, { size: 'small', zIndex: 3000 });
+```
+
+Importando Element parcialmente：
+
+```js
+import Vue from 'vue';
+import { Button } from 'element-ui';
+
+Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
+Vue.use(Button);
+```
+
+Con la anterior configuración, el tamaño por defecto de todos los componentes que tienen el atributo `size` será `small`. The initial z-index of modal boxes is 3000.
+
+### Empiece ya!
+
+Ahora ha incorporado Vue y Element a su proyecto y es el momento para comenzar a programar. Por favor, refiérase a la documentación de cada componente para aprender cómo usarlos.
+
+### Use Nuxt.js
+
+También podemos comenzar un proyecto usando [Nuxt.js](nuxtjs.org):
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe src="https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true" alt="nuxt-with-element on glitch" style="height: 100%; width: 100%; border: 0;"></iframe>
+</div>
diff --git a/examples/docs/es/radio.md b/examples/docs/es/radio.md
new file mode 100644
index 0000000000..0f0e0dedfb
--- /dev/null
+++ b/examples/docs/es/radio.md
@@ -0,0 +1,231 @@
+<script>
+  module.exports = {
+    data() {
+      return {
+        radio: '1',
+        radio1: 'selected and disabled',
+        radio2: 3,
+        radio3: 'New York',
+        radio4: 'New York',
+        radio5: 'New York',
+        radio6: 'New York',
+        radio7: '1',
+        radio8: '1',
+        radio9: '1',
+        radio10: '1'
+      };
+    }
+  };
+</script>
+
+## Radio
+Selección única entre múltiples opciones.
+
+### Uso básico
+El elemento Radio no debe tener muchas opciones. De otra manera, utilice el componente Select.
+
+:::demo Crear un elemento Radio es fácil, solo necesita enlazar(`bind`) una variable a la directiva `v-model` del Radio. Va a ser igual al valor `label` del Radio seleccionado. El tipo de dato de `label` es `String`, `Number` o `Boolean`.
+```html
+<template>
+  <el-radio v-model="radio" label="1">Option A</el-radio>
+  <el-radio v-model="radio" label="2">Option B</el-radio>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        radio: '1'
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Deshabilitado
+
+El atributo `disabled` es utilizado para deshabilitar un Radio.
+
+:::demo Solo necesita agregar el atributo `disabled`.
+```html
+<template>
+  <el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>
+  <el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        radio1: 'selected and disabled'
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Grupo de elementos Radio
+
+Recomendado para seleccionar opciones que se excluyen mutuamente.
+
+:::demo Combine `el-radio-group` con `el-radio` para mostrar un grupo de Radios. Enlace la variable con `v-model` del elemento `el-radio-group` y asigne el valor del `label` en `el-radio`. Se provee el evento `change` con el valor actual como parámetro.
+
+```html
+<el-radio-group v-model="radio2">
+  <el-radio :label="3">Option A</el-radio>
+  <el-radio :label="6">Option B</el-radio>
+  <el-radio :label="9">Option C</el-radio>
+</el-radio-group>
+
+<script>
+  export default {
+    data () {
+      return {
+        radio2: 3
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Estilo Button
+
+Radio con estilo de botón.
+
+:::demo Solo necesita cambiar el elemento `el-radio` a `el-radio-button`. Se provee el atributo `size`.
+```html
+<template>
+  <div>
+    <el-radio-group v-model="radio3">
+      <el-radio-button label="New York"></el-radio-button>
+      <el-radio-button label="Washington"></el-radio-button>
+      <el-radio-button label="Los Angeles"></el-radio-button>
+      <el-radio-button label="Chicago"></el-radio-button>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio4" size="medium">
+      <el-radio-button label="New York" ></el-radio-button>
+      <el-radio-button label="Washington"></el-radio-button>
+      <el-radio-button label="Los Angeles"></el-radio-button>
+      <el-radio-button label="Chicago"></el-radio-button>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio5" size="small">
+      <el-radio-button label="New York"></el-radio-button>
+      <el-radio-button label="Washington" disabled ></el-radio-button>
+      <el-radio-button label="Los Angeles"></el-radio-button>
+      <el-radio-button label="Chicago"></el-radio-button>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio6" disabled size="mini">
+      <el-radio-button label="New York"></el-radio-button>
+      <el-radio-button label="Washington"></el-radio-button>
+      <el-radio-button label="Los Angeles"></el-radio-button>
+      <el-radio-button label="Chicago"></el-radio-button>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        radio3: 'New York',
+        radio4: 'New York',
+        radio5: 'New York',
+        radio6: 'New York'
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Con bordes
+
+:::demo El atributo `border` agrega un borde al elemento Radio.
+```html
+<template>
+  <div>
+    <el-radio v-model="radio7" label="1" border>Option A</el-radio>
+    <el-radio v-model="radio7" label="2" border>Option B</el-radio>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>
+    <el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio9" size="small">
+      <el-radio label="1" border>Option A</el-radio>
+      <el-radio label="2" border disabled>Option B</el-radio>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio10" size="mini" disabled>
+      <el-radio label="1" border>Option A</el-radio>
+      <el-radio label="2" border>Option B</el-radio>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        radio7: '1',
+        radio8: '1',
+        radio9: '1',
+        radio10: '1'
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Atributos de Radio
+
+| Atributo | Descripción                              | Tipo                      | Valores Aceptado      | Por defecto |
+| -------- | ---------------------------------------- | ------------------------- | --------------------- | ----------- |
+| label    | el valor del Radio                       | string / number / boolean | —                     | —           |
+| disabled | si el Radio está deshabilitado           | boolean                   | —                     | false       |
+| border   | agregar borde alrededor del elemento Radio | boolean                   | —                     | false       |
+| size     | tamaño del elemento Radio, solo funciona si `border` es verdadero | string                    | medium / small / mini | —           |
+| name     | atributo nativo 'name'                   | string                    | —                     | —           |
+
+### Atributos de Radio-button
+
+| Atributo | Descripción                    | Tipo            | Valores Aceptado | Por defecto |
+| -------- | ------------------------------ | --------------- | ---------------- | ----------- |
+| label    | el valor del Radio             | string / number | —                | —           |
+| disabled | si el Radio está deshabilitado | boolean         | —                | false       |
+| name     | atributo nativo 'name'         | string          | —                | —           |
+
+### Atributos de Radio-group
+
+| Atributo   | Descripción                              | Tipo    | Valores Aceptado      | Valores por defecto |
+| ---------- | ---------------------------------------- | ------- | --------------------- | ------------------- |
+| size       | tamaño de los `radio buttons` o `bordered radios` | string  | medium / small / mini | —                   |
+| disabled   | si la anidación de radios está desahabilitada | boolean | —                     | false               |
+| text-color | color de las letras cuando el botón está activo | string  | —                     | #ffffff             |
+| fill       | color del borde y fondo cuando el botón está activo | string  | —                     | #409EFF             |
+
+### Eventos de Radio 
+
+| Nombre de evento | Descripción                       | Parámetros                               |
+| ---------------- | --------------------------------- | ---------------------------------------- |
+| change           | se dispara cuando el valor cambia | el valor del `label` del Radio seleccionado |
+
+
+### Eventos de Radio-group 
+
+| Nombre de evento | Descripción                       | Parámetros                               |
+| ---------------- | --------------------------------- | ---------------------------------------- |
+| change           | se dispara cuando el valor cambia | el valor del `label` del Radio seleccionado |
+
diff --git a/examples/docs/es/rate.md b/examples/docs/es/rate.md
new file mode 100644
index 0000000000..c1d7392e8e
--- /dev/null
+++ b/examples/docs/es/rate.md
@@ -0,0 +1,178 @@
+<style>
+  .demo-rate .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    display: inline-block;
+    width: 50%;
+    box-sizing: border-box;
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .demo-rate .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: null,
+        value2: null,
+        value3: null,
+        value4: null,
+        value5: 3.7
+      };
+    },
+    mounted() {
+      this.$nextTick(() => {
+        let firstDemo = document.querySelector('.source');
+        firstDemo.style.padding = '0';
+      });
+    }
+  }
+</script>
+
+## Calificación
+
+Usado para la calificación
+
+### Uso básico
+
+:::demo Clasificación divide las puntuaciones en tres niveles y estos niveles pueden distinguirse usando diferentes colores de fondo. Por defecto los colores de fondo son iguales, pero puedes asignarlos para reflejar los tres niveles usando el atributo `colors` y sus dos umbrales pueden ser definidos con `low-treshold` y `high-treshold`.
+
+
+``` html
+<div class="block">
+  <span class="demonstration">Default</span>
+  <el-rate v-model="value1"></el-rate>
+</div>
+<div class="block">
+  <span class="demonstration">Color for different levels</span>
+  <el-rate
+    v-model="value2"
+    :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
+  </el-rate>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: null,
+        value2: null
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Con texto
+
+Usa texto para indicar la puntuación
+
+:::demo Agregar el atributo `show-text` para mostrar texto a la derecha del componente. Puede asignar textos para las distintas puntuaciones usando `texts`. `texts` es un arreglo cuya longitud debe ser igual a la máxima puntuación `max`.
+
+``` html
+<el-rate
+  v-model="value3"
+  :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
+  show-text>
+</el-rate>
+
+<script>
+  export default {
+    data() {
+      return {
+        value3: null
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Más iconos
+
+Puede utilizar iconos para diferenciar cada componente.
+
+:::demo Puede customizar iconos para tres niveles diferentes usando `icon-classes`. En este ejemplo también usamos `void-icon-class` para asignar un icono si no está seleccionado.
+
+``` html
+<el-rate
+  v-model="value4"
+  :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
+  void-icon-class="icon-rate-face-off"
+  :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
+</el-rate>
+
+<script>
+  export default {
+    data() {
+      return {
+        value4: null
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Solo lectura
+
+La calificación de solo lectura es para mostrar la puntuación. Soporta media estrella.
+
+:::demo Use el atributo `disabled` para hacer el componente de solo lectura. Agregar `show-score` para mostrar la puntuación en el lado derecho. Además, puede usar el atributo `score-template` para proveer una plantilla. Tiene que contener `{value}`, y `{value}` será sustituido por la puntuación.
+
+``` html
+<el-rate
+  v-model="value5"
+  disabled
+  show-score
+  text-color="#ff9900"
+  score-template="{value} points">
+</el-rate>
+
+<script>
+  export default {
+    data() {
+      return {
+        value5: 3.7
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Atributos
+| Atributo                 | Descripción                              | Tipo    | Valores aceptado | Por defecto                              |
+| ------------------------ | ---------------------------------------- | ------- | ---------------- | ---------------------------------------- |
+| max                      | puntuación máxima                        | number  | —                | 5                                        |
+| disabled                 | si la calificación es de solo lectura    | boolean | —                | false                                    |
+| allow-half               | si escoger media estrella está permitido | boolean | —                | false                                    |
+| low-threshold            | valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel bajo | number  | —                | 2                                        |
+| high-threshold           | valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel alto | number  | —                | 4                                        |
+| colors                   | arreglo de colores para iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación | array   | —                | ['#F7BA2A', '#F7BA2A', '#F7BA2A']        |
+| void-color               | color para iconos no seleccionados       | string  | —                | #C6D1DE                                  |
+| disabled-void-color      | color para las iconos no seleccionados de solo lectura | string  | —                | #EFF2F7                                  |
+| icon-classes             | arreglo de nombres para clases de iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación | array   | —                | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
+| void-icon-class          | nombre de clase para iconos no seleccionados | string  | —                | el-icon-star-off                         |
+| disabled-void-icon-class | nombre de clase para elementos no seleccionados de solo lectura | string  | —                | el-icon-star-on                          |
+| show-text                | muestra el texto                         | boolean | —                | false                                    |
+| show-score               | muestra puntuación actual. `show-score` y `show-text` no pueden ser verdaderos al mismo tiempo | boolean | —                | false                                    |
+| text-color               | color del texto                          | string  | —                | #1F2D3D                                  |
+| texts                    | arreglo de textos                        | array   | —                | ['极差', '失望', '一般', '满意', '惊喜']           |
+| score-template           | plantilla de puntuación                  | string  | —                | {value}                                  |
+
+### Eventos
+| Nombre del evento | Descripción                              | Parámetros             |
+| ----------------- | ---------------------------------------- | ---------------------- |
+| change            | Se dispara cuando la puntuación es cambiada | valor luego del cambio |
diff --git a/examples/docs/es/select.md b/examples/docs/es/select.md
new file mode 100644
index 0000000000..8f271df48f
--- /dev/null
+++ b/examples/docs/es/select.md
@@ -0,0 +1,730 @@
+<script>
+  export default {
+    data() {
+      return {
+        list: null,
+        options: [{
+          value: 'Option1',
+          label: 'Option1'
+        }, {
+          value: 'Option2',
+          label: 'Option2'
+        }, {
+          value: 'Option3',
+          label: 'Option3'
+        }, {
+          value: 'Option4',
+          label: 'Option4'
+        }, {
+          value: 'Option5',
+          label: 'Option5'
+        }],
+        options2: [{
+          value: 'Option1',
+          label: 'Option1'
+        }, {
+          value: 'Option2',
+          label: 'Option2',
+          disabled: true
+        }, {
+          value: 'Option3',
+          label: 'Option3'
+        }, {
+          value: 'Option4',
+          label: 'Option4'
+        }, {
+          value: 'Option5',
+          label: 'Option5'
+        }],
+        options3: [{
+          label: 'Popular cities',
+          options: [{
+            value: 'Shanghai',
+            label: 'Shanghai'
+          }, {
+            value: 'Beijing',
+            label: 'Beijing'
+          }]
+        }, {
+          label: 'City Name',
+          options: [{
+            value: 'Chengdu',
+            label: 'Chengdu'
+          }, {
+            value: 'Shenzhen',
+            label: 'Shenzhen'
+          }, {
+            value: 'Guangzhou',
+            label: 'Guangzhou'
+          }, {
+            value: 'Dalian',
+            label: 'Dalian'
+          }]
+        }],
+        options4: [],
+        options5: [{
+          value: 'HTML',
+          label: 'HTML'
+        }, {
+          value: 'CSS',
+          label: 'CSS'
+        }, {
+          value: 'JavaScript',
+          label: 'JavaScript'
+        }],
+        cities: [{
+          value: 'Beijing',
+          label: 'Beijing'
+        }, {
+          value: 'Shanghai',
+          label: 'Shanghai'
+        }, {
+          value: 'Nanjing',
+          label: 'Nanjing'
+        }, {
+          value: 'Chengdu',
+          label: 'Chengdu'
+        }, {
+          value: 'Shenzhen',
+          label: 'Shenzhen'
+        }, {
+          value: 'Guangzhou',
+          label: 'Guangzhou'
+        }],
+        value: '',
+        value2: '',
+        value3: '',
+        value4: '',
+        value5: [],
+        value6: '',
+        value7: '',
+        value8: '',
+        value9: [],
+        value10: [],
+        value11: [],
+        loading: false,
+        states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
+      };
+    },
+    
+    mounted() {
+      this.list = this.states.map(item => { return { value: item, label: item }; });
+    },
+    
+    methods: {
+      remoteMethod(query) {
+        if (query !== '') {
+          this.loading = true;
+          setTimeout(() => {
+            this.loading = false;
+            this.options4 = this.list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
+          }, 200);
+        } else {
+          this.options4 = [];
+        }
+      }
+    }
+  };
+</script>
+
+<style>
+  .demo-select .el-select {
+    width: 240px;
+  }
+</style>
+
+## Select
+
+Cuando haya muchas opciones, utilice un menú desplegable para mostrar y seleccionar las que desee.
+
+### Uso básico
+
+:::demo `v-model` es el valor de  `el-option` que está seleccionado actualmente.
+
+```html
+<template>
+  <el-select v-model="value" placeholder="Select">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'Option1',
+          label: 'Option1'
+        }, {
+          value: 'Option2',
+          label: 'Option2'
+        }, {
+          value: 'Option3',
+          label: 'Option3'
+        }, {
+          value: 'Option4',
+          label: 'Option4'
+        }, {
+          value: 'Option5',
+          label: 'Option5'
+        }],
+        value: ''
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Disabled en el-option
+
+:::demo Establezca el valor de `disabled` en `el-option`  como `true` para deshabilitar esta opción.
+
+```html
+<template>
+  <el-select v-model="value2" placeholder="Select">
+    <el-option
+      v-for="item in options2"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+      :disabled="item.disabled">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options2: [{
+          value: 'Option1',
+          label: 'Option1'
+        }, {
+          value: 'Option2',
+          label: 'Option2',
+          disabled: true
+        }, {
+          value: 'Option3',
+          label: 'Option3'
+        }, {
+          value: 'Option4',
+          label: 'Option4'
+        }, {
+          value: 'Option5',
+          label: 'Option5'
+        }],
+        value2: ''
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Disabled en el-select
+
+Desactivar todo el componente.
+
+:::demo Configure `disabled` de `el-select` para deshabilitarla.
+
+```html
+<template>
+  <el-select v-model="value3" disabled placeholder="Select">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'Option1',
+          label: 'Option1'
+        }, {
+          value: 'Option2',
+          label: 'Option2'
+        }, {
+          value: 'Option3',
+          label: 'Option3'
+        }, {
+          value: 'Option4',
+          label: 'Option4'
+        }, {
+          value: 'Option5',
+          label: 'Option5'
+        }],
+        value3: ''
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Select simple limpiable
+
+Puede limpiar un Select con un icono.
+
+:::demo Establezca el atributo `clearable` para `el-select`  y aparecerá un icono. Tenga en cuenta que la opción `clearable` es sólo para una selección individual.
+
+```html
+<template>
+  <el-select v-model="value4" clearable placeholder="Select">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'Option1',
+          label: 'Option1'
+        }, {
+          value: 'Option2',
+          label: 'Option2'
+        }, {
+          value: 'Option3',
+          label: 'Option3'
+        }, {
+          value: 'Option4',
+          label: 'Option4'
+        }, {
+          value: 'Option5',
+          label: 'Option5'
+        }],
+        value4: ''
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Selección múltiple básica
+
+Selección multiple utiliza tags para mostrar las opciones seleccionadas.
+
+:::demo Configure el atributo `multiple` para `el-select` para habilitar el modo múltiple. En este caso, el valor del `v-model` será un array de opciones seleccionadas. De forma predeterminada, las opciones seleccionadas se mostrarán como tags. Se pueden contraer a un texto utilizando el atributo  `collapse-tags`.
+
+```html
+<template>
+  <el-select v-model="value5" multiple placeholder="Select">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+
+  <el-select
+    v-model="value11"
+    multiple
+    collapse-tags
+    style="margin-left: 20px;"
+    placeholder="Select">
+    <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'Option1',
+          label: 'Option1'
+        }, {
+          value: 'Option2',
+          label: 'Option2'
+        }, {
+          value: 'Option3',
+          label: 'Option3'
+        }, {
+          value: 'Option4',
+          label: 'Option4'
+        }, {
+          value: 'Option5',
+          label: 'Option5'
+        }],
+        value5: []
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Personalizar template
+
+Puede personalizar templates HTML para las opciones.
+
+:::demo Inserte templates HTML personalizados en el slot de `el-option`.
+
+```html
+<template>
+  <el-select v-model="value6" placeholder="Select">
+    <el-option
+      v-for="item in cities"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+      <span style="float: left">{{ item.label }}</span>
+      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        cities: [{
+          value: 'Beijing',
+          label: 'Beijing'
+        }, {
+          value: 'Shanghai',
+          label: 'Shanghai'
+        }, {
+          value: 'Nanjing',
+          label: 'Nanjing'
+        }, {
+          value: 'Chengdu',
+          label: 'Chengdu'
+        }, {
+          value: 'Shenzhen',
+          label: 'Shenzhen'
+        }, {
+          value: 'Guangzhou',
+          label: 'Guangzhou'
+        }],
+        value6: ''
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Agrupando
+
+Mostrar opciones en grupos.
+
+:::demo Utilice `el-option-group` para agrupar las opciones, y su atributo `label` representa el nombre del grupo.
+
+```html
+<template>
+  <el-select v-model="value7" placeholder="Select">
+    <el-option-group
+      v-for="group in options3"
+      :key="group.label"
+      :label="group.label">
+      <el-option
+        v-for="item in group.options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value">
+      </el-option>
+    </el-option-group>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options3: [{
+          label: 'Popular cities',
+          options: [{
+            value: 'Shanghai',
+            label: 'Shanghai'
+          }, {
+            value: 'Beijing',
+            label: 'Beijing'
+          }]
+        }, {
+          label: 'City name',
+          options: [{
+            value: 'Chengdu',
+            label: 'Chengdu'
+          }, {
+            value: 'Shenzhen',
+            label: 'Shenzhen'
+          }, {
+            value: 'Guangzhou',
+            label: 'Guangzhou'
+          }, {
+            value: 'Dalian',
+            label: 'Dalian'
+          }]
+        }],
+        value7: ''
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Filtrado de opciones
+
+Puede filtrar opciones como lo desee.
+
+:::demo Añadir `filterable` a `el-select` permite filtrar. Por defecto, Select buscará todas las opciones cuyo atributo`label` contenga el valor del input. Si prefiere otras estrategias de filtrado, puede pasar el `filter-method`. `filter-method` es una función que se llama cuando el valor del input cambia, y su parámetro es el valor del input actual.
+
+```html
+<template>
+  <el-select v-model="value8" filterable placeholder="Select">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options: [{
+          value: 'Option1',
+          label: 'Option1'
+        }, {
+          value: 'Option2',
+          label: 'Option2'
+        }, {
+          value: 'Option3',
+          label: 'Option3'
+        }, {
+          value: 'Option4',
+          label: 'Option4'
+        }, {
+          value: 'Option5',
+          label: 'Option5'
+        }],
+        value8: ''
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Búsqueda remota
+
+Introduzca palabras y datos para buscar desde el servidor.
+
+:::demo Configure el valor de `filterable` y `remote` con `true` para habilitar la búsqueda remota, y debería pasar el método `remote-method`. `remote-method` es una función que se llama cuando el valor del input cambia, y su parámetro es el valor del input actual. Tenga en cuenta que si `el-option` se presenta con la directiva `v-for`, debe agregar el atributo `key` para `el-option`. Su valor tiene que ser unívoco, como el valor de `item.value` en el ejemplo siguiente.
+
+```html
+<template>
+  <el-select
+    v-model="value9"
+    multiple
+    filterable
+    remote
+    reserve-keyword
+    placeholder="Please enter a keyword"
+    :remote-method="remoteMethod"
+    :loading="loading">
+    <el-option
+      v-for="item in options4"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options4: [],
+        value9: [],
+        list: [],
+        loading: false,
+        states: ["Alabama", "Alaska", "Arizona",
+        "Arkansas", "California", "Colorado",
+        "Connecticut", "Delaware", "Florida",
+        "Georgia", "Hawaii", "Idaho", "Illinois",
+        "Indiana", "Iowa", "Kansas", "Kentucky",
+        "Louisiana", "Maine", "Maryland",
+        "Massachusetts", "Michigan", "Minnesota",
+        "Mississippi", "Missouri", "Montana",
+        "Nebraska", "Nevada", "New Hampshire",
+        "New Jersey", "New Mexico", "New York",
+        "North Carolina", "North Dakota", "Ohio",
+        "Oklahoma", "Oregon", "Pennsylvania",
+        "Rhode Island", "South Carolina",
+        "South Dakota", "Tennessee", "Texas",
+        "Utah", "Vermont", "Virginia",
+        "Washington", "West Virginia", "Wisconsin",
+        "Wyoming"]
+      }
+    },
+    mounted() {
+      this.list = this.states.map(item => {
+        return { value: item, label: item };
+      });
+    },
+    methods: {
+      remoteMethod(query) {
+        if (query !== '') {
+          this.loading = true;
+          setTimeout(() => {
+            this.loading = false;
+            this.options4 = this.list.filter(item => {
+              return item.label.toLowerCase()
+                .indexOf(query.toLowerCase()) > -1;
+            });
+          }, 200);
+        } else {
+          this.options4 = [];
+        }
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Crear nuevos items
+Crear y seleccionar nuevos items que no están incluidas en las opciones de selección.
+
+:::demo Al utilizar el atributo `allow-create`, los usuarios pueden crear nuevos elementos escribiendo en el cuadro del input. Tenga en cuenta que para que `allow-create` funcione, `filterable` debe ser `true`.
+
+```html
+<template>
+  <el-select
+    v-model="value10"
+    multiple
+    filterable
+    allow-create
+    placeholder="Choose tags for your article">
+    <el-option
+      v-for="item in options5"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        options5: [{
+          value: 'HTML',
+          label: 'HTML'
+        }, {
+          value: 'CSS',
+          label: 'CSS'
+        }, {
+          value: 'JavaScript',
+          label: 'JavaScript'
+        }],
+        value10: []
+      }
+    }
+  }
+</script>
+```
+:::
+
+:::tip
+
+Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `value-key` como el nombre único de la clave de identidad.
+
+:::
+
+### Select atributos
+| Atributo             | Descripción                              | Tipo     | Valores aceptados | Por defecto      |
+| -------------------- | ---------------------------------------- | -------- | ----------------- | ---------------- |
+| multiple             | si multiple-select esta activo           | boolean  | —                 | false            |
+| disabled             | si Select esta deshabilitado             | boolean  | —                 | false            |
+| collapse-tags        | si se colapsan los tags a un texto cuando `multiple` es `true`. | boolean  | —                 | false            |
+| value-key            | nombre de clave de identidad única para el valor, necesario cuando el valor es un objeto. | string   | —                 | value            |
+| size                 | tamaño del Input                         | string   | large/small/mini  | —                |
+| clearable            | whether select can be cleared  | boolean  | —                 | false            |
+| multiple-limit       | maximo numero de opciones que el usuario puede seleccionar cuando `multiple` es `true`.  Sin límite cuando se fija a 0 | number   | —                 | 0                |
+| name                 | el atributo `name` del input seleccionado | string   | —                 | —                |
+| autocomplete         | el atributo `autocomplete` del input seleccionado | string   | —         | off              |
+| auto-complete         | @DEPRECATED in next major version | string   | —         | off              |
+| placeholder          | placeholder                              | string   | —                 | Select           |
+| filterable           | si Select es filtrable                   | boolean  | —                 | false            |
+| allow-create         | si esta permitido crear nuevos items. Para usar esto, `filterable` debe ser `true`. | boolean  | —                 | false            |
+| filter-method        | metodo de filtrado personalizado         | function | —                 | —                |
+| remote               | si las opciones se traeran desde el servidor | boolean  | —                 | false            |
+| remote-method        | metodo de busqueda remota personalizada  | function | —                 | —                |
+| loading              | si Select está cargando datos del servidor | boolean  | —                 | false            |
+| loading-text         | texto mostrado durante la carga de datos del servidor | string   | —                 | Loading          |
+| no-match-text        | texto mostrado cuando ningún dato coincide con la consulta de filtrado. | string   | —                 | No matching data |
+| no-data-text         | texto mostrado cuando no hay opciones    | string   | —                 | No data          |
+| popper-class         | nombre de clase personalizado para el menú desplegable del Select | string   | —                 | —                |
+| reserve-keyword      | cuando `multiple` y `filter` es `true`, si se debe reservar la palabra clave actual después de seleccionar una opción. | boolean  | —                 | false            |
+| default-first-option | seleccione la primera opción de coincidencia en la tecla enter. Uso con `filterable` o `remote`. | boolean  | -                 | false            |
+| popper-append-to-body| si añadir o no el menu popup al body. Si el posicionamiento del popup es incorrecto, puede intentar poner este `prop` en `false`. | boolean | - | true |
+| automatic-dropdown | para non-filterable Select, este `prop` decide si el menú de opciones aparece cuando la entrada está enfocada | boolean | - | false |
+
+### Eventos Select
+| Nombre         | Descripción                              | Parametros                               |
+| -------------- | ---------------------------------------- | ---------------------------------------- |
+| change         | se dispara cuando el valor del select cambia | valor actual del select                  |
+| visible-change | se dispara cuando el menu desplegable aparece o desaparece | true cuando aparece, y false en otro caso |
+| remove-tag     | se dispara cuando un tag es removido en modo multiple | el valor del tag removido                |
+| clear          | se dispara cuando el icono se clickea en un Select limpiable | —                                        |
+| blur           | se dispara cuando el input pierde el foco | (event: Event)                           |
+| focus          | se dispara cuando el input obtiene el foco | (event: Event)                           |
+
+### Select Slots
+| Name    | Description |
+|---------|-------------|
+|    —    | lista de los componentes Option |
+| prefix  | contenido prefix de un  Select |
+
+### Atributos del grupo de opciones
+| Atributo | Descripción                              | Tipo    | Valores aceptados | Por defecto |
+| -------- | ---------------------------------------- | ------- | ----------------- | ----------- |
+| label    | nombre del grupo                         | string  | —                 | —           |
+| disabled | si se deshabilitan todas las opciones del grupo | boolean | —                 | false       |
+
+### Atributos de opciones
+| Atributo | Descripción                              | Tipo                 | Valores aceptados | Por defecto |
+| -------- | ---------------------------------------- | -------------------- | ----------------- | ----------- |
+| value    | valor de option                          | string/number/object | —                 | —           |
+| label    | etiqueta de option, es igual a  `value` si se omite | string/number        | —                 | —           |
+| disabled | si  option esta deshabilitado            | boolean              | —                 | false       |
+
+### Metodos
+| Metodo | Descripción                 | Parametros |
+| ------ | --------------------------- | ---------- |
+| focus  | Foco en el componente input | -          |
+| blur   | Quita el focus del componente y oculta el dropdown | - |
diff --git a/examples/docs/es/slider.md b/examples/docs/es/slider.md
new file mode 100644
index 0000000000..6e07bac7e2
--- /dev/null
+++ b/examples/docs/es/slider.md
@@ -0,0 +1,254 @@
+<script>
+  export default {
+    data() {
+      return {
+        value1: 0,
+        value2: 50,
+        value3: 36,
+        value4: 48,
+        value5: 42,
+        value6: 0,
+        value7: 0,
+        value8: 0,
+        value9: [4, 8],
+        value10: 0
+      };
+    },
+    methods: {
+      formatTooltip(val) {
+        return val / 100;
+      }
+    }
+  }
+</script>
+
+<style>
+  .demo-box.demo-slider .source {
+    padding: 0;
+  }
+
+  .demo-box.demo-slider .block {
+    padding: 30px 24px;
+    overflow: hidden;
+    border-bottom: solid 1px #EFF2F6;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .demo-box.demo-slider .demonstration {
+    font-size: 14px;
+    color: #8492a6;
+    line-height: 44px;
+  }
+
+  .demo-box.demo-slider .demonstration + .el-slider {
+    float: right;
+    width: 70%;
+    margin-right: 20px;
+  }
+</style>
+
+## Slider
+
+Desliza el slider dentro de un rango fijo.
+
+### Uso básico
+
+El valor actual se muestra cuando se inicia el arrastre del slider.
+
+:::demo Personalice el valor inicial del slider configurando el valor vinculado.
+
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Default value</span>
+    <el-slider v-model="value1"></el-slider>
+  </div>
+  <div class="block">
+    <span class="demonstration">Customized initial value</span>
+    <el-slider v-model="value2"></el-slider>
+  </div>
+  <div class="block">
+    <span class="demonstration">Hide Tooltip</span>
+    <el-slider v-model="value3" :show-tooltip="false"></el-slider>
+  </div>
+  <div class="block">
+    <span class="demonstration">Format Tooltip</span>
+    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
+  </div>
+  <div class="block">
+    <span class="demonstration">Disabled</span>
+    <el-slider v-model="value5" disabled></el-slider>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: 0,
+        value2: 50,
+        value3: 36,
+        value4: 48,
+        value5: 42
+      }
+    },
+    methods: {
+      formatTooltip(val) {
+        return val / 100;
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Valores discretos
+
+Las opciones pueden ser discretas.
+
+:::demo Configure el tamaño del paso con el atributo `step`. Puede visualizar los puntos de ruptura configurando el atributo `show-stops`.
+
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Breakpoints not displayed</span>
+    <el-slider
+      v-model="value6"
+      :step="10">
+    </el-slider>
+  </div>
+  <div class="block">
+    <span class="demonstration">Breakpoints displayed</span>
+    <el-slider
+      v-model="value7"
+      :step="10"
+      show-stops>
+    </el-slider>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value6: 0,
+        value7: 0
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Slider con input
+
+Inserte el valor a traves de un input
+
+:::demo Configure el atributo `show-input` para que muestre un input a la derecha.
+
+```html
+<template>
+  <div class="block">
+    <el-slider
+      v-model="value8"
+      show-input>
+    </el-slider>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value8: 0
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Seleccion de rangos
+
+Se soporta la selección de un rango de valores.
+
+:::demo El ajuste del atributo `range` activa el modo range, donde el valor vinculado es un array compuesto por dos valores límite.
+
+```html
+<template>
+  <div class="block">
+    <el-slider
+      v-model="value9"
+      range
+      show-stops
+      :max="10">
+    </el-slider>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value9: [4, 8]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Modo Vertical
+
+:::demo El ajuste del atributo `vertical` a `true` habilita el modo vertical. En el modo vertical, se requiere el atributo `height` .
+
+```html
+<template>
+  <div class="block">
+    <el-slider
+      v-model="value10"
+      vertical
+      height="200px">
+    </el-slider>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value10: 0
+      }
+    }
+  }
+</script>
+```
+:::
+
+## Atributos
+| Atributo            | Descripción                              | Tipo            | Valores aceptados | Por defecto |
+| ------------------- | ---------------------------------------- | --------------- | ----------------- | ----------- |
+| min                 | valor minimo                             | number          | —                 | 0           |
+| max                 | valor máximo                             | number          | —                 | 100         |
+| disabled            | si el Slider esta deshabitado            | boolean         | —                 | false       |
+| step                | tamaño del paso                          | number          | —                 | 1           |
+| show-input          | Si se muestra el input, trabaja cuando`range`es false | boolean         | —                 | false       |
+| show-input-controls | si se muestran los botones de control cuando`show-input`es true | boolean         | —                 | true        |
+| input-size          | tamaño del input   | string           | large / medium / small / mini | small |
+| show-stops          | si se muestran los puntos de ruptura (breakpoints) | boolean         | —                 | false       |
+| show-tooltip        | si se muestra el valor en un tooltip     | boolean         | —                 | true        |
+| format-tooltip      | formato para mostrar el valor del tooltip | function(value) | —                 | —           |
+| range               | si se usaran un rango                    | boolean         | —                 | false       |
+| vertical            | modo vertical                            | boolean         | —                 | false       |
+| height              | alto del Slider, requerido en modo vertical | string          | —                 | —           |
+| label               | etiqueta para screen reader              | string          | —                 | —           |
+| debounce            | retardo al escribir, en milisegundos, funciona cuando`show-input` es true. | number          | —                 | 300         |
+| tooltip-class       | nombre personalizado de clase para el tooltip | string | — | — |
+
+## Eventos
+| Nombre | Descripción                              | Parametros               |
+| ------ | ---------------------------------------- | ------------------------ |
+| change | se dispara cuando el valor cambia (si el ratón está comenzando el arrastre este evento sólo se disparara cuando se suelte el ratón) | valor despues del cambio |
+
diff --git a/examples/docs/es/steps.md b/examples/docs/es/steps.md
new file mode 100644
index 0000000000..8eff2e2054
--- /dev/null
+++ b/examples/docs/es/steps.md
@@ -0,0 +1,176 @@
+<script>
+  export default {
+    data() {
+      return {
+        active: 0
+      };
+    },
+    
+    methods: {
+      next() {
+        if (this.active++ > 2) this.active = 0;
+      }
+    }
+  }
+</script>
+
+## Steps
+
+Guía al usuario para completar tareas de acuerdo con el proceso. Sus pasos pueden configurarse de acuerdo con el escenario de aplicación real y el número de pasos no puede ser inferior a dos.
+
+### Uso básico
+
+Barra de pasos simple.
+
+:::demo Defina el atributo `active` con un valor de tipo `Number`, que indica el índice de pasos y comienza desde 0. Puede definir el atributo `space` cuando es necesario fijar el ancho del paso que acepta el tipo `Boolean`. La unidad del atributo `space` es px. Si no está configurado, es responsive. La configuración del atributo `finish-status` puede cambiar el estado de los pasos completados.
+
+```html
+<el-steps :active="active" finish-status="success">
+  <el-step title="Step 1"></el-step>
+  <el-step title="Step 2"></el-step>
+  <el-step title="Step 3"></el-step>
+</el-steps>
+
+<el-button style="margin-top: 12px;" @click="next">Next step</el-button>
+
+<script>
+  export default {
+    data() {
+      return {
+        active: 0
+      };
+    },
+
+    methods: {
+      next() {
+        if (this.active++ > 2) this.active = 0;
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Step bar con el status
+
+Muestra el estado del step para cada paso.
+
+:::demo Utilice el atributo `title` para establecer el nombre del paso, o sobreescriba el atributo usando un slot con nombre. Hemos enumerado todos los nombres de slots al final de esta página.
+
+```html
+<el-steps :space="200" :active="1" finish-status="success">
+  <el-step title="Done"></el-step>
+  <el-step title="Processing"></el-step>
+  <el-step title="Step 3"></el-step>
+</el-steps>
+```
+:::
+
+### Centrado 
+
+El título y la descripción pueden estar centrados.
+
+:::demo
+```html
+<el-steps :active="2" align-center>
+  <el-step title="Step 1" description="Some description"></el-step>
+  <el-step title="Step 2" description="Some description"></el-step>
+  <el-step title="Step 3" description="Some description"></el-step>
+  <el-step title="Step 4" description="Some description"></el-step>
+</el-steps>
+```
+:::
+
+### Step bar con descripción
+
+Puede poner una descripción para cada paso.
+
+:::demo
+```html
+<el-steps :active="1">
+  <el-step title="Step 1" description="Some description"></el-step>
+  <el-step title="Step 2" description="Some description"></el-step>
+  <el-step title="Step 3" description="Some description"></el-step>
+</el-steps>
+```
+:::
+
+### Step bar with icon
+
+En la barra de pasos se pueden utilizar diversos iconos personalizados.
+
+:::demo El icono se define mediante la propiedad `icon`. Los tipos de iconos se pueden encontrar en la descripción del componente Icono. Además, puede personalizar el icono a través de un slot con nombre.
+
+```html
+<el-steps :active="1">
+  <el-step title="Step 1" icon="el-icon-edit"></el-step>
+  <el-step title="Step 2" icon="el-icon-upload"></el-step>
+  <el-step title="Step 3" icon="el-icon-picture"></el-step>
+</el-steps>
+```
+:::
+
+### Step bar vertical
+
+Step bar vertical.
+
+:::demo Sólo tiene que fijar el atributo `direction`  a ` vertical` en el elemento `el-steps`.
+
+```html
+<div style="height: 300px;">
+  <el-steps direction="vertical" :active="1">
+    <el-step title="Step 1"></el-step>
+    <el-step title="Step 2"></el-step>
+    <el-step title="Step 3"></el-step>
+  </el-steps>
+</div>
+```
+:::
+
+### Step bar simple
+Step bar simple, donde se ignorará `align-center`, `description`, `direction` y `space`.
+
+:::demo
+```html
+
+<el-steps :space="200" :active="1" simple>
+  <el-step title="Step 1" icon="el-icon-edit"></el-step>
+  <el-step title="Step 2" icon="el-icon-upload"></el-step>
+  <el-step title="Step 3" icon="el-icon-picture"></el-step>
+</el-steps>
+
+<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
+  <el-step title="Step 1" ></el-step>
+  <el-step title="Step 2" ></el-step>
+  <el-step title="Step 3" ></el-step>
+</el-steps>
+```
+:::
+
+### Steps atributos
+
+| Atributo       | Descripción                              | Tipo            | Valores aceptados                        | Por defecto |
+| -------------- | ---------------------------------------- | --------------- | ---------------------------------------- | ----------- |
+| space          | el espaciado de cada paso, será responsivo si se omite. Soporta porcentaje. | number / string | —                                        | —           |
+| direction      | dirección de visualización               | string          | vertical/horizontal                      | horizontal  |
+| active         | actual paso de activación                | number          | —                                        | 0           |
+| process-status | status del paso actual                   | string          | wait / process / finish / error / success | process     |
+| finish-status  | status del paso final                    | string          | wait / process / finish / error / success | finish      |
+| align-center   | centrado de título y descripción         | boolean         | —                                        | false       |
+| simple         | si aplicar un tema simple                | boolean         | -                                        | false       |
+
+### Step atributos
+| Atributo    | Descripción                              | Tipo                                     | Valores aceptados | Por defecto |
+| ----------- | ---------------------------------------- | ---------------------------------------- | ----------------- | ----------- |
+| title       | titulo del paso                          | string                                   | —                 | —           |
+| description | descripción del paso                     | string                                   | —                 | —           |
+| icon        | icono del paso                           | nombre de la clase del icono del paso. Los iconos también se pueden pasar a través del slot con nombre | string            | —           |
+| status      | estado actual. Se configurará automáticamente mediante Steps si no está configurado. | wait / process / finish / error / success | -                 |             |
+
+### Step Slot
+| Name        | Description          |
+| ----------- | -------------------- |
+| icon        | Icono personalizado  |
+| title       | Titulo del paso      |
+| description | Descripcion del paso |
+
diff --git a/examples/docs/es/switch.md b/examples/docs/es/switch.md
new file mode 100644
index 0000000000..83b0471313
--- /dev/null
+++ b/examples/docs/es/switch.md
@@ -0,0 +1,167 @@
+<style>
+  .demo-box.demo-switch {
+    .el-switch {
+      margin: 20px 20px 20px 0;
+    }
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: true,
+        value2: true,
+        value3: true,
+        value4: true,
+        value5: '100',
+        value6: true,
+        value7: false
+      }
+    }
+  };
+</script>
+
+## Switch
+
+Switch es utilizdo para realizar cambios entre dos estados opuestos.
+
+### Uso básico
+
+:::demo Enlace `v-model` a una variable de tipo `Boolean`. Los atributos `active-color` y `inactive-color` deciden el color de fondo en cada estado.
+
+```html
+<el-switch v-model="value1">
+</el-switch>
+<el-switch
+  v-model="value2"
+  active-color="#13ce66"
+  inactive-color="#ff4949">
+</el-switch>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: true,
+        value2: true
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Texto de descripción
+:::demo Puede agregar los atributos `active-text` y `inactive-text` para mostrar los textos.
+
+```html
+<el-switch
+  v-model="value3"
+  active-text="Pay by month"
+  inactive-text="Pay by year">
+</el-switch>
+<el-switch
+  style="display: block"
+  v-model="value4"
+  active-color="#13ce66"
+  inactive-color="#ff4949"
+  active-text="Pay by month"
+  inactive-text="Pay by year">
+</el-switch>
+
+<script>
+  export default {
+    data() {
+      return {
+        value3: true,
+        value4: true
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Tipos de valores extendidos
+
+:::demo Puede establecer los atributos `active-value` y `inactive-value`. Ambos reciben valores de tipo `Boolean`, `String` o `Number`.
+
+```html
+<el-tooltip :content="'Switch value: ' + value5" placement="top">
+  <el-switch
+    v-model="value5"
+    active-color="#13ce66"
+    inactive-color="#ff4949"
+    active-value="100"
+    inactive-value="0">
+  </el-switch>
+</el-tooltip>
+
+<script>
+  export default {
+    data() {
+      return {
+        value5: '100'
+      }
+    }
+  };
+</script>
+```
+
+:::
+
+### Disabled
+
+:::demo Agregar el atributo `disabled` desactiva el componente Switch.
+
+```html
+<el-switch
+  v-model="value6"
+  disabled>
+</el-switch>
+<el-switch
+  v-model="value7"
+  disabled>
+</el-switch>
+
+<script>
+  export default {
+    data() {
+      return {
+        value6: true,
+        value7: false
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Atributos
+
+| Atributo            | Descripción                              | Tipo                      | Valores aceptados | Por defecto |
+| ------------------- | ---------------------------------------- | ------------------------- | ----------------- | ----------- |
+| disabled            | si Switch esta deshabilitado             | boolean                   | —                 | false       |
+| width               | ancho del componente Switch              | number                    | —                 | 40          |
+| active-icon-class   | nombre de la clase del icono mostrado en el estado `on`, sobreescribe `active-text` | string                    | —                 | —           |
+| inactive-icon-class | nombre de la clase del icono mostrado en el estado `off`, sobreescribe `inactive-text` | string                    | —                 | —           |
+| active-text         | texto mostrado en el estado `on`         | string                    | —                 | —           |
+| inactive-text       | texto mostrado en el estado `off`        | string                    | —                 | —           |
+| active-value        | cambia su valor cuando se encuentra en el estado `on` | boolean / string / number | —                 | true        |
+| inactive-value      | cambia su valor cuando se encuentra en el estado `off` | boolean / string / number | —                 | false       |
+| active-color        | color de fondo cuando se encuentra en el estado `on` | string                    | —                 | #409EFF     |
+| inactive-color      | color de fondo cuando se encuentra en el estado `off` | string                    | —                 | #C0CCDA     |
+| name                | nombre de entrada del componente Switch  | string                    | —                 | —           |
+
+### Eventos
+
+| Nombre del evento | Descripción                       | Parametro |
+| ----------------- | --------------------------------- | --------- |
+| change            | se dispara cuando el valor cambia | valor     |
+después de cambiar
+
+### Metodos
+| Metodo | Descripción               | Parametro |
+| ------ | ------------------------- | --------- |
+| focus  | foco al componente Switch | —         |
diff --git a/examples/docs/es/table.md b/examples/docs/es/table.md
new file mode 100644
index 0000000000..d5169f92a2
--- /dev/null
+++ b/examples/docs/es/table.md
@@ -0,0 +1,2146 @@
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Home'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Office'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Home'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Office'
+        }],
+        tableData2: [{
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+          $info: true
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+        }, {
+          date: '2016-05-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+          $positive: true
+        }],
+        tableData3: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-08',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-06',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-07',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }],
+        tableData4: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-08',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-06',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-07',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }],
+        tableData6: [{
+          id: '12987122',
+          name: 'Tom',
+          amount1: '234',
+          amount2: '3.2',
+          amount3: 10
+        }, {
+          id: '12987123',
+          name: 'Tom',
+          amount1: '165',
+          amount2: '4.43',
+          amount3: 12
+        }, {
+          id: '12987124',
+          name: 'Tom',
+          amount1: '324',
+          amount2: '1.9',
+          amount3: 9
+        }, {
+          id: '12987125',
+          name: 'Tom',
+          amount1: '621',
+          amount2: '2.2',
+          amount3: 17
+        }, {
+          id: '12987126',
+          name: 'Tom',
+          amount1: '539',
+          amount2: '4.1',
+          amount3: 15
+        }],
+        tableData7: [{
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+        }, {
+          date: '2016-05-04',
+          name: 'John',
+          address: 'No. 189, Grove St, Los Angeles',
+        }, {
+          date: '2016-05-01',
+          name: 'Morgan',
+          address: 'No. 189, Grove St, Los Angeles',
+        }, {
+          date: '2016-05-03',
+          name: 'Jessy',
+          address: 'No. 189, Grove St, Los Angeles',
+        }],
+        currentRow: null,
+        multipleSelection: [],
+        search: '',
+      };
+    },
+
+    methods: {
+      getSummaries(param) {
+        const { columns, data } = param;
+        const sums = [];
+        columns.forEach((column, index) => {
+          if (index === 0) {
+            sums[index] = 'Total Cost';
+            return;
+          }
+          const values = data.map(item => Number(item[column.property]));
+          if (!values.every(value => isNaN(value))) {
+            sums[index] = '$ ' + values.reduce((prev, curr) => {
+              const value = Number(curr);
+              if (!isNaN(value)) {
+                return prev + curr;
+              } else {
+                return prev;
+              }
+            }, 0);
+          } else {
+            sums[index] = 'N/A';
+          }
+        });
+    
+        return sums;
+      },
+      setCurrent(row) {
+        this.$refs.singleTable.setCurrentRow(row);
+      },
+      toggleSelection(rows) {
+        if (rows) {
+          rows.forEach(row => {
+            this.$refs.multipleTable.toggleRowSelection(row);
+          });
+        } else {
+          this.$refs.multipleTable.clearSelection();
+        }
+      },
+    
+      handleClick() {
+        console.log('click');
+      },
+    
+      handleEdit(index, row) {
+        console.log(index, row);
+      },
+    
+      handleDelete(index, row) {
+        console.log(index, row);
+      },
+    
+      handleSelectionChange(val) {
+        this.multipleSelection = val;
+      },
+    
+      handleCurrentChange(val) {
+        this.currentRow = val;
+      },
+    
+      formatter(row, column) {
+        return row.address;
+      },
+    
+      filterTag(value, row) {
+        return row.tag === value;
+      },
+    
+      filterHandler(value, row, column) {
+        const property = column['property'];
+        return row[property] === value;
+      },
+    
+      tableRowClassName({row, rowIndex}) {
+        if (rowIndex === 1) {
+          return 'warning-row';
+        } else if (rowIndex === 3) {
+          return 'success-row';
+        }
+        return '';
+      },
+    
+      deleteRow(index, rows) {
+        rows.splice(index, 1);
+      },
+    
+      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
+        if (rowIndex % 2 === 0) {
+          if (columnIndex === 0) {
+            return [1, 2];
+          } else if (columnIndex === 1) {
+            return [0, 0];
+          }
+        }
+      },
+    
+      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+        if (columnIndex === 0) {
+          if (rowIndex % 2 === 0) {
+            return {
+              rowspan: 2,
+              colspan: 1
+            };
+          } else {
+            return {
+              rowspan: 0,
+              colspan: 0
+            };
+          }
+        }
+      },
+    
+      indexMethod(index) {
+        return index * 2;
+      }
+    },
+    
+    watch: {
+      multipleSelection(val) {
+        console.log('selection: ', val);
+      }
+    }
+  };
+</script>
+
+<style>
+  .el-table .warning-row {
+    background: oldlace;
+  }
+
+  .el-table .success-row {
+    background: #f0f9eb;
+  }
+
+  .demo-table .name-wrapper {
+    display: inline-block;
+  }
+
+  .demo-table .demo-table-expand {
+    label {
+      width: 90px;
+      color: #99a9bf;
+    }
+    .el-form-item {
+      margin-right: 0;
+      margin-bottom: 0;
+      width: 50%;
+    }
+  }
+</style>
+
+## Tablas
+
+Visualiza múltiples datos con un formato en particular. Podrá ordenar, filtrar y comparar datos en una tabla.
+
+### Tabla básica
+
+La tabla básica es solo para mostrar datos.
+
+:::demo Después de haber establecido el atributo `data` de `el-table` con un arreglo de objetos, puede usar la propiedad `prop` (el correspondiente a la clave de un objeto dentro del arreglo `data`) en `el-table-column` para insertar datos a las columnas de la tabla, y establecer el atributo `label` para definir el nombre de la columna. También puede usar el atributo `width` para establecer el ancho de las columnas.
+
+```html
+  <template>
+    <el-table
+      :data="tableData"
+      style="width: 100%">
+      <el-table-column
+        prop="date"
+        label="Fecha"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="Nombre"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="address"
+        label="Dirección">
+      </el-table-column>
+    </el-table>
+  </template>
+
+  <script>
+    export default {
+      data() {
+        return {
+          tableData: [{
+            date: '2016-05-03',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles'
+          }, {
+            date: '2016-05-02',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles'
+          }, {
+            date: '2016-05-04',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles'
+          }, {
+            date: '2016-05-01',
+            name: 'Tom',
+            address: 'No. 189, Grove St, Los Angeles'
+          }]
+        }
+      }
+    }
+  </script>
+```
+:::
+
+### Tabla con franjas
+
+La tabla con franjas hace más fácil distinguir filas diferentes.
+
+:::demo El atributo `stripe` también acepta un `Boolean`. Si se encuentra `true`, la tabla será con franjas.
+```html
+<template>
+  <el-table
+    :data="tableData"
+    stripe
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="Fecha"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nombre"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Dirección">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Tabla con bordes
+
+:::demo Por defecto, la tabla no tiene bordes verticales. Si lo necesita, puede establecer el atributo `border` a `true`.
+
+```html
+<template>
+  <el-table
+    :data="tableData"
+    border
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="Fecha"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nombre"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Dirección">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Tabla con estados
+
+Puede destacar el contenido de la tabla para distinguir entre "success, information, warning, danger" y otros estados.
+
+:::demo Utilice `row-class-name` en `el-table` para agregar clases personalizadas a una fila en específico. Y entonces, podrá darle diseño con estas clases.
+```html
+<template>
+  <el-table
+    :data="tableData2"
+    style="width: 100%"
+    :row-class-name="tableRowClassName">
+    <el-table-column
+      prop="date"
+      label="Fecha"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nombre"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Dirección">
+    </el-table-column>
+  </el-table>
+</template>
+
+<style>
+  .el-table .warning-row {
+    background: oldlace;
+  }
+
+  .el-table .success-row {
+    background: #f0f9eb;
+  }
+</style>
+
+<script>
+  export default {
+    methods: {
+      tableRowClassName({row, rowIndex}) {
+        if (rowIndex === 1) {
+          return 'warning-row';
+        } else if (rowIndex === 3) {
+          return 'success-row';
+        }
+        return '';
+      }
+    },
+    data() {
+      return {
+        tableData2:  [{
+          date: '2016-05-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Tabla con cabecera fija
+
+Cuando esta tiene demasiadas filas, puede utilizar una cabecera fija.
+
+:::demo Al configurar el atributo `height` de `el-table`, puede fijar la cabecera de la tabla sin agregar otro código.
+```html
+<template>
+  <el-table
+    :data="tableData3"
+    height="250"
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="Fecha"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nombre"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Dirección">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData3: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-08',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-06',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-07',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }],
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Tabla con columnas fijas
+
+Cuando se tienen demasiadas columnas, puede fijar alguna de estas.
+
+:::demo El atributo `fixed` es utilizado en `el-table-column`, este acepta un `Boolean`. Si es `true`, la columna será fijada a la izquierda. También acepta dos tipos: `left` y `right`, ambos indican donde debe ser fijada la columna.
+```html
+<template>
+  <el-table
+    :data="tableData"
+    style="width: 100%">
+    <el-table-column
+      fixed
+      prop="date"
+      label="Fecha"
+      width="150">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nombre"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="state"
+      label="Estado"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="city"
+      label="Ciudad"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Dirección"
+      width="300">
+    </el-table-column>
+    <el-table-column
+      prop="zip"
+      label="Código postal"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      fixed="right"
+      label="Operaciones"
+      width="120">
+      <template slot-scope="scope">
+        <el-button @click="handleClick" type="text" size="small">Detalle</el-button>
+        <el-button type="text" size="small">Editar</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    methods: {
+      handleClick() {
+        console.log('click');
+      }
+    },
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Home'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Office'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Home'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Office'
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Tabla con columnas y cabecera fija.
+
+Cuando tienes grandes cantidades de datos para colocar en una tabla, puede fijar la cabecera y columnas al mismo tiempo.
+
+:::demo  Fije las columnas y cabecera al mismo tiempo combinando los dos ejemplos anteriores.
+```html
+<template>
+  <el-table
+    :data="tableData3"
+    style="width: 100%"
+    height="250">
+    <el-table-column
+      fixed
+      prop="date"
+      label="Fecha"
+      width="150">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nombre"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="state"
+      label="Estado"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="city"
+      label="Ciudad"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Dirección"
+      width="300">
+    </el-table-column>
+    <el-table-column
+      prop="zip"
+      label="Código postal"
+      width="120">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData3: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-08',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-06',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-07',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Altura fluido de tabla con cabecera fija (y columnas)
+
+Cuando los datos se modifican dinámicamente, es posible que necesite que la tabla tenga una altura máxima en lugar de una altura fija, y además, que se muestre la barra de desplazamiento si es necesario.
+
+:::demo Al configurar el atributo `max-height` de `el-table`, tu puedes fijar la cabecera de la tabla. La barra de desplazamiento únicamente se mostrará si la altura sobrepasa el valor de la altura máxima.
+```html
+<template>
+  <el-table
+    :data="tableData4"
+    style="width: 100%"
+    max-height="250">
+    <el-table-column
+      fixed
+      prop="date"
+      label="Fecha"
+      width="150">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nombre"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="state"
+      label="Estado"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="city"
+      label="Ciudad"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Dirección"
+      width="300">
+    </el-table-column>
+    <el-table-column
+      prop="zip"
+      label="Código postal"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      fixed="right"
+      label="Operaciones"
+      width="120">
+      <template slot-scope="scope">
+        <el-button
+          @click.native.prevent="deleteRow(scope.$index, tableData4)"
+          type="text"
+          size="small">
+          Eliminar
+        </el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    methods: {
+      deleteRow(index, rows) {
+        rows.splice(index, 1);
+      }
+    },
+    data() {
+      return {
+        tableData4: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-08',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-06',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-07',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Agrupando cabeceras de la tabla
+
+Cuando la estructura de datos es compleja, tu puedes hacer uso de cabeceras agrupadas para mostrar datos por jerarquía.
+
+:::demo Solo necesitas colocar `el-table-column` dentro de un `el-table-column`, de esta forma lograrás agruparlas.
+```html
+<template>
+  <el-table
+    :data="tableData3"
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="Fecha"
+      width="150">
+    </el-table-column>
+    <el-table-column label="Información de entrega">
+      <el-table-column
+        prop="name"
+        label="Nombre"
+        width="120">
+      </el-table-column>
+      <el-table-column label="Información de dirección">
+        <el-table-column
+          prop="state"
+          label="Estado"
+          width="120">
+        </el-table-column>
+        <el-table-column
+          prop="city"
+          label="Ciudad"
+          width="120">
+        </el-table-column>
+        <el-table-column
+          prop="address"
+          label="Dirección"
+          width="300">
+        </el-table-column>
+        <el-table-column
+          prop="zip"
+          label="Código postal"
+          width="120">
+        </el-table-column>
+      </el-table-column>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData3: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-08',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-06',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-07',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Selección única
+
+La selección de una fila esta soportada.
+
+:::demo La tabla permite la selección de una sola fila. Puede activarlo agregando el atributo `highlight-current-row`. Un evento llamado `current-change` será disparado cuando la selección de la fila cambie, sus parámetros son la fila antes y después de que ocurre el cambio: `currentRow` y `oldCurrentRow`. Si necesita mostrar el índice de la fila, puede agregar un nuevo `el-table-column` con el atributo `type` asignado al `index` y podrá ver el índice iniciando desde 1.
+```html
+<template>
+  <el-table
+    ref="singleTable"
+    :data="tableData"
+    highlight-current-row
+    @current-change="handleCurrentChange"
+    style="width: 100%">
+    <el-table-column
+      type="index"
+      width="50">
+    </el-table-column>
+    <el-table-column
+      property="date"
+      label="Fecha"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      property="name"
+      label="Nombre"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      property="address"
+      label="Dirección">
+    </el-table-column>
+  </el-table>
+  <div style="margin-top: 20px">
+    <el-button @click="setCurrent(tableData[1])">Seleccionar segunda fila</el-button>
+    <el-button @click="setCurrent()">Limpiar selección</el-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }],
+        currentRow: null
+      }
+    },
+
+    methods: {
+      setCurrent(row) {
+        this.$refs.singleTable.setCurrentRow(row);
+      },
+      handleCurrentChange(val) {
+        this.currentRow = val;
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Selección multiple
+
+También puede seleccionar múltiples filas.
+
+:::demo Activar la selección múltiple es sencillo: Solo debe agregar a `el-table-column` con su `type` establecido en `selection`. Además de la selección múltiple, este ejemplo también utiliza `show-overflow-tooltip`: por defecto, si el contenido es demasiado largo, este permite córtalo dentro de múltiples líneas. Si lo que busca es mantener una línea, utilice el atributo `show-overflow-tooltip`, que acepta un valor `Boolean`. Cuando este está establecido en `true`, el contenido extra puede mostrar un _tooltip_ cuando se hace _hover_ sobre la celda.
+```html
+<template>
+  <el-table
+    ref="multipleTable"
+    :data="tableData3"
+    style="width: 100%"
+    @selection-change="handleSelectionChange">
+    <el-table-column
+      type="selection"
+      width="55">
+    </el-table-column>
+    <el-table-column
+      label="Fecha"
+      width="120">
+      <template slot-scope="scope">{{ scope.row.date }}</template>
+    </el-table-column>
+    <el-table-column
+      property="name"
+      label="Nombre"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      property="address"
+      label="Dirección"
+      show-overflow-tooltip>
+    </el-table-column>
+  </el-table>
+  <div style="margin-top: 20px">
+    <el-button @click="toggleSelection([tableData3[1], tableData3[2]])">Cambia el estado de selección de la segunda y tercera fila.</el-button>
+    <el-button @click="toggleSelection()">Limpiar selección</el-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData3: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-08',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-06',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-07',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }],
+        multipleSelection: []
+      }
+    },
+
+    methods: {
+      toggleSelection(rows) {
+        if (rows) {
+          rows.forEach(row => {
+            this.$refs.multipleTable.toggleRowSelection(row);
+          });
+        } else {
+          this.$refs.multipleTable.clearSelection();
+        }
+      },
+      handleSelectionChange(val) {
+        this.multipleSelection = val;
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Ordenamiento
+
+Ordena los datos para encontrar o comparar información rápidamente.
+
+:::demo Establezca el atributo `sortable` para ordenar los datos de una columna. Este acepta un `Boolean` con un valor por defecto `false`. Establezca el atributo `default-sort` para determinar la columna y orden por defecto. Para aplicar sus propias reglas de ordenamiento, utilice `sort-method` o `sort-by`. Si lo que necesita es ordenar de forma remota desde backend, establezca `sortable` a `custom`, y escuche el evento `sort-change` de la tabla. Al dispararse el evento, tendrá acceso a la columna ordenada y orden para que pueda obtener los datos de la tabla ordenada desde su API. En este ejemplo utilizamos otro atributo llamado `formatter` para darle un formato al valor de ciertas columnas. Este acepta una función que tiene dos parámetros: `row` y `column`. Puede disparar este de acuerdo a sus propias necesidades.
+```html
+<template>
+  <el-table
+    :data="tableData"
+    :default-sort = "{prop: 'date', order: 'descending'}"
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="Fecha"
+      sortable
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nombre"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Dirección"
+      :formatter="formatter">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }]
+      }
+    },
+    methods: {
+      formatter(row, column) {
+        return row.address;
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Filtros
+
+Filtra la tabla para encontrar la información que necesita.
+
+:::demo Establezca el atributo `filters` y `filter-method` en `el-table-column` haciendo esta columna filtrable. `filters` es un arreglo, y `filter-method` es una función que decide que filas se muestra. Esta tiene tres parámetros: `value`, `row` y `column`.
+```html
+<template>
+  <el-table
+    :data="tableData"
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="Fecha"
+      sortable
+      width="180"
+      :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
+      :filter-method="filterHandler"
+    >
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nombre"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Dirección"
+      :formatter="formatter">
+    </el-table-column>
+    <el-table-column
+      prop="tag"
+      label="Etiqueta"
+      width="100"
+      :filters="[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]"
+      :filter-method="filterTag"
+      filter-placement="bottom-end">
+      <template slot-scope="scope">
+        <el-tag
+          :type="scope.row.tag === 'Home' ? 'primary' : 'success'"
+          disable-transitions>{{scope.row.tag}}</el-tag>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+          tag: 'Home'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+          tag: 'Office'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+          tag: 'Home'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+          tag: 'Office'
+        }]
+      }
+    },
+    methods: {
+      formatter(row, column) {
+        return row.address;
+      },
+      filterTag(value, row) {
+        return row.tag === value;
+      },
+      filterHandler(value, row, column) {
+        const property = column['property'];
+        return row[property] === value;
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Plantilla de columna personalizada
+
+Personalice la columna de la tabla para que pueda integrarse con otros componentes.
+
+:::demo Tiene acceso a la siguiente informacion: row, column, $index, store (gestor de estados de la tabla) por [Scoped slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots).
+```html
+<template>
+  <el-table
+    :data="tableData"
+    style="width: 100%">
+    <el-table-column
+      label="Fecha"
+      width="180">
+      <template slot-scope="scope">
+        <i class="el-icon-time"></i>
+        <span style="margin-left: 10px">{{ scope.row.date }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="Nombre"
+      width="180">
+      <template slot-scope="scope">
+        <el-popover trigger="hover" placement="top">
+          <p>Name: {{ scope.row.name }}</p>
+          <p>Addr: {{ scope.row.address }}</p>
+          <div slot="reference" class="name-wrapper">
+            <el-tag size="medium">{{ scope.row.name }}</el-tag>
+          </div>
+        </el-popover>
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="Operaciones">
+      <template slot-scope="scope">
+        <el-button
+          size="mini"
+          @click="handleEdit(scope.$index, scope.row)">Editar</el-button>
+        <el-button
+          size="mini"
+          type="danger"
+          @click="handleDelete(scope.$index, scope.row)">Eliminar</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles'
+        }]
+      }
+    },
+    methods: {
+      handleEdit(index, row) {
+        console.log(index, row);
+      },
+      handleDelete(index, row) {
+        console.log(index, row);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Table with custom header
+
+Customize table header so it can be even more customized.
+:::demo You can customize how the header looks by [Default slot content](https://vuejs.org/v2/guide/components-slots.html#Default-Slot-Content).
+```html
+<template>
+  <el-table
+    :data="tableData7.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
+    style="width: 100%">
+    <el-table-column
+      label="Date"
+      prop="date">
+    </el-table-column>
+    <el-table-column
+      label="Name"
+      prop="name">
+    </el-table-column>
+    <el-table-column
+      align="right">
+      <template slot="header" slot-scope="slot">
+        <el-input
+          v-model="search"
+          size="mini"
+          placeholder="Type to search"/>
+      </template>
+      <template slot-scope="scope">
+        <el-button
+          size="mini"
+          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
+        <el-button
+          size="mini"
+          type="danger"
+          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-02',
+          name: 'Tom',
+          address: 'No. 189, Grove St, Los Angeles',
+        }, {
+          date: '2016-05-04',
+          name: 'John',
+          address: 'No. 189, Grove St, Los Angeles',
+        }, {
+          date: '2016-05-01',
+          name: 'Morgan',
+          address: 'No. 189, Grove St, Los Angeles',
+        }, {
+          date: '2016-05-03',
+          name: 'Jessy',
+          address: 'No. 189, Grove St, Los Angeles',
+        }],
+        search: ''
+      }
+    },
+    methods: {
+      handleEdit(){},
+      handleDelete(){}
+    },
+  }
+</script>
+```
+:::
+
+### Fila expandible
+
+Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de desplazamiento horizontal, puede utilizar la caracteristica de fila expandible.
+
+:::demo Puede activar la fila expandible estableciendo la propiedad `type` a `expand` y Scoped Slots. La plantilla para `el-table-column` se representará como el contenido de la fila expandible, y puede acceder a algunos atributos cuando está usando `Scoped Slots` en plantillas de columna personalizadas.
+```html
+<template>
+  <el-table
+    :data="tableData3"
+    style="width: 100%">
+    <el-table-column type="expand">
+      <template slot-scope="props">
+        <p>Estado: {{ props.row.state }}</p>
+        <p>Ciudad: {{ props.row.city }}</p>
+        <p>Dirección: {{ props.row.address }}</p>
+        <p>Código postal: {{ props.row.zip }}</p>
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="Fecha"
+      prop="date">
+    </el-table-column>
+    <el-table-column
+      label="Nombre"
+      prop="name">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData3: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-08',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-06',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }, {
+          date: '2016-05-07',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036'
+        }]
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Fila de resumen
+
+Para una tabla de números, puede agregar una fila extra en el pie de página de la tabla que muestra la suma de cada columna.
+
+:::demo Puede agregar la fila de resumen configurando `show-summary` a `true`. Por defecto, para la fila de resumen, la primera columna no resume nada, pero siempre muestra la suma (puede configurar el texto mostrado usando `sum-text`), mientras que otras columnas suman todos los números en esa columna y los muestran. Por supuesto, puede definir su propio comportamiento de suma. Para hacerlo, utiliza un método `summary-method`, que devuelve un array, y cada elemento que fue retornado desde el arreglo puede ser mostrado en las columnas del resumen de fila. La segunda tabla de este ejemplo es una demostración detallada.
+```html
+<template>
+  <el-table
+    :data="tableData6"
+    border
+    show-summary
+    style="width: 100%">
+    <el-table-column
+      prop="id"
+      label="ID"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nombre">
+    </el-table-column>
+    <el-table-column
+      prop="amount1"
+      sortable
+      label="Monto 1">
+    </el-table-column>
+    <el-table-column
+      prop="amount2"
+      sortable
+      label="Monto 2">
+    </el-table-column>
+    <el-table-column
+      prop="amount3"
+      sortable
+      label="Monto 3">
+    </el-table-column>
+  </el-table>
+
+  <el-table
+    :data="tableData6"
+    border
+    height="200"
+    :summary-method="getSummaries"
+    show-summary
+    style="width: 100%; margin-top: 20px">
+    <el-table-column
+      prop="id"
+      label="ID"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nombre">
+    </el-table-column>
+    <el-table-column
+      prop="amount1"
+      label="Costo 1 ($)">
+    </el-table-column>
+    <el-table-column
+      prop="amount2"
+      label="Costo 2 ($)">
+    </el-table-column>
+    <el-table-column
+      prop="amount3"
+      label="Costo 3 ($)">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData6: [{
+          id: '12987122',
+          name: 'Tom',
+          amount1: '234',
+          amount2: '3.2',
+          amount3: 10
+        }, {
+          id: '12987123',
+          name: 'Tom',
+          amount1: '165',
+          amount2: '4.43',
+          amount3: 12
+        }, {
+          id: '12987124',
+          name: 'Tom',
+          amount1: '324',
+          amount2: '1.9',
+          amount3: 9
+        }, {
+          id: '12987125',
+          name: 'Tom',
+          amount1: '621',
+          amount2: '2.2',
+          amount3: 17
+        }, {
+          id: '12987126',
+          name: 'Tom',
+          amount1: '539',
+          amount2: '4.1',
+          amount3: 15
+        }]
+      };
+    },
+    methods: {
+      getSummaries(param) {
+        const { columns, data } = param;
+        const sums = [];
+        columns.forEach((column, index) => {
+          if (index === 0) {
+            sums[index] = 'Costo total';
+            return;
+          }
+          const values = data.map(item => Number(item[column.property]));
+          if (!values.every(value => isNaN(value))) {
+            sums[index] = '$ ' + values.reduce((prev, curr) => {
+              const value = Number(curr);
+              if (!isNaN(value)) {
+                return prev + curr;
+              } else {
+                return prev;
+              }
+            }, 0);
+          } else {
+            sums[index] = 'N/A';
+          }
+        });
+
+        return sums;
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Fusión de filas y columnas
+
+Configurar _rowspan_ y _colspan_ le permite fusionar celdas.
+
+:::demo Utilice el atributo `span-method` para configurar rowspan y colspan. Este acepta un método, y pasa un objeto a ese método incluyedo la fila actual `row`, columna actual `column`, índice de fila actual `rowIndex` y índice de columna actual `columnIndex`. El método debe devolver un arreglo de dos números, el primer número siendo `rowspan` y el segundo `colspan`. También puede devolver un objeto con las propiedades `rowspan` y `colspan`.
+
+```html
+<template>
+  <div>
+    <el-table
+      :data="tableData6"
+      :span-method="arraySpanMethod"
+      border
+      style="width: 100%">
+      <el-table-column
+        prop="id"
+        label="ID"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="Nombre">
+      </el-table-column>
+      <el-table-column
+        prop="amount1"
+        sortable
+        label="Monto 1">
+      </el-table-column>
+      <el-table-column
+        prop="amount2"
+        sortable
+        label="Monto 2">
+      </el-table-column>
+      <el-table-column
+        prop="amount3"
+        sortable
+        label="Monto 3">
+      </el-table-column>
+    </el-table>
+
+    <el-table
+      :data="tableData6"
+      :span-method="objectSpanMethod"
+      border
+      style="width: 100%; margin-top: 20px">
+      <el-table-column
+        prop="id"
+        label="ID"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="Nombre">
+      </el-table-column>
+      <el-table-column
+        prop="amount1"
+        label="Monto 1">
+      </el-table-column>
+      <el-table-column
+        prop="amount2"
+        label="Monto 2">
+      </el-table-column>
+      <el-table-column
+        prop="amount3"
+        label="Monto 3">
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData6: [{
+          id: '12987122',
+          name: 'Tom',
+          amount1: '234',
+          amount2: '3.2',
+          amount3: 10
+        }, {
+          id: '12987123',
+          name: 'Tom',
+          amount1: '165',
+          amount2: '4.43',
+          amount3: 12
+        }, {
+          id: '12987124',
+          name: 'Tom',
+          amount1: '324',
+          amount2: '1.9',
+          amount3: 9
+        }, {
+          id: '12987125',
+          name: 'Tom',
+          amount1: '621',
+          amount2: '2.2',
+          amount3: 17
+        }, {
+          id: '12987126',
+          name: 'Tom',
+          amount1: '539',
+          amount2: '4.1',
+          amount3: 15
+        }]
+      };
+    },
+    methods: {
+      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
+        if (rowIndex % 2 === 0) {
+          if (columnIndex === 0) {
+            return [1, 2];
+          } else if (columnIndex === 1) {
+            return [0, 0];
+          }
+        }
+      },
+
+      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+        if (columnIndex === 0) {
+          if (rowIndex % 2 === 0) {
+            return {
+              rowspan: 2,
+              colspan: 1
+            };
+          } else {
+            return {
+              rowspan: 0,
+              colspan: 0
+            };
+          }
+        }
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Índice personalizado
+
+Puede personalizar el índice de la fila con la propiedad `type=index` de las columnas.
+
+:::demo Para personalizar el índice de la fila, utilice el atributo `index` en `<el-table-column>` con `type=index`. Si este es asignado a un número, todos los índices tendrán un desplazamiento de ese número. Este también acepta un método con cada índice (iniciando desde 0) como un parámetro, y este devuelve un valor que puede ser mostrado como índice.
+
+```html
+<template>
+  <el-table
+    :data="tableData"
+    style="width: 100%">
+    <el-table-column
+      type="index"
+      :index="indexMethod">
+    </el-table-column>
+    <el-table-column
+      prop="date"
+      label="Fecha"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Nombre"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Dirección">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Home'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Office'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Home'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Office'
+        }],
+      }
+    },
+    methods: {
+      indexMethod(index) {
+        return index * 2;
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Atributos de la tabla
+| Atributo               | Descripción                              | Tipo                                     | Valores aceptados              | Por defecto                              |
+| ---------------------- | ---------------------------------------- | ---------------------------------------- | ------------------------------ | ---------------------------------------- |
+| data                   | Datos de la tabla                        | array                                    | —                              | —                                        |
+| height                 | Altura de la tabla. Por defecto esta tiene un tamaño `auto`. Si este valor es un número, la altura es medido en pixeles; si este valor es una cadena, la altura es afectada por estilos externos. | string/number                            | —                              | —                                        |
+| max-height             | Altura máxima de la tabla. La altura de la tabla comienza desde `auto` hasta que alcanza la altura máxima. El `max-height` es medido en pixeles, lo mismo que `height` | string/number                            | —                              | —                                        |
+| stripe                 | especifica si la tabla será en franjas   | boolean                                  | —                              | false                                    |
+| border                 | especifica si la tabla tiene bordes verticales | boolean                                  | —                              | false                                    |
+| size                   | tamaño de la tabla                       | string                                   | medium / small / mini          | —                                        |
+| fit                    | especifica si el ancho de la columna se adapta automáticamente a su contenedor | boolean                                  | —                              | true                                     |
+| show-header            | especifica si la cabecera de la tabla es visible | boolean                                  | —                              | true                                     |
+| highlight-current-row  | especifica si la fila actual es resaltado | boolean                                  | —                              | false                                    |
+| current-row-key        | clave de la fila actual, un ajuste de propiedad única | string,number                            | —                              | —                                        |
+| row-class-name         | función que devuelve nombres de clases personalizadas para una fila, o una cadena asignando nombres de clases para cada fila | Function({row, rowIndex})/String         | —                              | —                                        |
+| row-style              | función que devuelve el estilo personalizado para una fila, o un objeto asignando estilos personalizado para cada fila | Function({row, rowIndex})/Object         | —                              | —                                        |
+| cell-class-name        | función que devuelve nombres de clases personalizadas para una celda, o una cadena asignando nombres de clases para cada celda | Function({row, column, rowIndex, columnIndex})/String | —                              | —                                        |
+| cell-style             | función que devuelve estilos personalizados para una celda, o un objeto asignado a estilos personalizados para cada celda | Function({row, column, rowIndex, columnIndex})/Object | —                              | —                                        |
+| header-row-class-name  | función que devuelve nombre de clases personalizadas para una fila en la cabecera de la tabla, o una cadena asignando nombres de clases para cada fila en la cabecera de la tabla | Function({row, rowIndex})/String         | —                              | —                                        |
+| header-row-style       | función que devuelve estilos personalizados para una fila en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada fila en la cabecera de la tabla | Function({row, rowIndex})/Object         | —                              | —                                        |
+| header-cell-class-name | función que devuelve nombre de clases personalizadas para una celda en la cabecera de la tabla, o una cadena asignando nombres de clases para cada celda en la cabecera de la tabla | Function({row, column, rowIndex, columnIndex})/String         | —                              | —                                        |
+| header-cell-style      | función que devuelve estilos personalizados para una celda en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada celda en la cabecera de la tabla | Function({row, column, rowIndex, columnIndex})/Object         | —                              | —                                        |
+| row-key                | clave de datos de la fila, utilizada para optimizar la representación de los datos. Es obligatorio `reserve-selection` esta habilitado. Cuando su tipo es string, se permite el acceso multinivel, por ejemplo, `user.info.id`, pero `user.info[0].id` no es permitido, en cuyo caso se debe usar una `function` | Function(row)/String                     | —                              | —                                        |
+| empty-text             | Texto mostrado cuando no existen datos. Puede personalizar esta área con `slot="empty"` | String                                   | —                              | No Data                                  |
+| default-expand-all     | especifica si todas las filas se expanden por defeto, solo funciona cuando la tabla tiene una columna `type="expand"` | Boolean                                  | —                              | false                                    |
+| expand-row-keys        | establece las filas expandidas a través de esta propiedad, este valor es la clave de filas expandidas, debería establecer `row-key` antes de usar esta propiedad | Array                                    | —                              |                                          |
+| default-sort           | establece la columna y orden por defecto. La propiedad `prop` es utilizada para establecer la columna de ordenamiento por defecto, la propiedad `order` es utilizada para definir el tipo de orden por defecto | Object                                   | `order`: ascending, descending | if `prop` is set, and `order` is not set, then `order` is default to ascending |
+| tooltip-effect         | propiedad `effect` para efectos en tooltip | String                                   | dark/light                     |                                          |
+| show-summary           | especifica si debe mostrar la fila de resumen | Boolean                                  | —                              | false                                    |
+| sum-text               | texto a mostrar para la primer columna de la fila de resumen | String                                   | —                              | Sum                                      |
+| summary-method         | método personalizado para resumen        | Function({ columns, data })              | —                              | —                                        |
+| span-method            | método que devuelve _rowspan_ y _colspan_ | Function({ row, column, rowIndex, columnIndex }) | —                              | —                                        |
+| select-on-indeterminate | controla el comportamiento del checkbox maestro en tablas de selección múltiple cuando sólo se seleccionan algunas filas (pero no todas). Si es true, todas las filas serán seleccionadas, de lo contrario deseleccionadas. | Boolean | — | true |
+
+### Eventos de la tabla
+| Nombre del evento  | Descripción                              | Parámetros                        |
+| ------------------ | ---------------------------------------- | --------------------------------- |
+| select             | se dispara cuando el usuario hace clic al _checkbox_ (caja de selección) en una fila | selection, row                    |
+| select-all         | se dispara cando el usuario hace clic al _checkbox_ (caja de selección) en una cabecera de la tabla | selection                         |
+| selection-change   | se dispara cuando selección cambia       | selection                         |
+| cell-mouse-enter   | se dispara cuando se desplaza dentro de una celda | row, column, cell, event          |
+| cell-mouse-leave   | se dispara cuando se desplaza fuera de una celda | row, column, cell, event          |
+| cell-click         | se dispara cuando se hace clic en una celda | row, column, cell, event          |
+| cell-dblclick      | se dispara cuando se hace doble clic en una celda | row, column, cell, event          |
+| row-click          | se dispara cuando se hace clic en una fila | row, event, column                |
+| row-contextmenu    | se dispara cuando el usuario hace clic derecho en una fila | row, event                        |
+| row-dblclick       | se dispara cuando se hace doble clic en una fila | row, event                        |
+| header-click       | se dispara cuando se hace click en una cabecera de columna | column, event                     |
+| header-contextmenu | se dispara cuando el usuario hace clic derecho en una cabecera de columna | column, event                     |
+| sort-change        | se dispara cuando el ordenamiento de la tabla cambia | { column, prop, order }           |
+| filter-change      | clave de la columna. Si necesitas utilizar el evento filter-change, este atributo es obligatorio para identificar cuál columna está siendo filtrada | filters                           |
+| current-change     | se dispara cuando la fila actual cambia  | currentRow, oldCurrentRow         |
+| header-dragend     | se dispara después de modificar el ancho de una columna arrastrando el borde de la cabecera. | newWidth, oldWidth, column, event |
+| expand-change      | se dispara cuando el usuario expande o colapsa una fila | row, expandedRows                 |
+
+### Métodos de la tabla
+| Metodo             | Descripción                              | Parametros    |
+| ------------------ | ---------------------------------------- | ------------- |
+| clearSelection     | utilizado en selección múltiple de la tabla, limpiar selección | —     |
+| toggleRowSelection | utilizado en selección múltiple de la tabla, alterna si una cierta fila es seleccionada. Con el segundo parámetro, puede directamente establecer si la fila es seleccionada | row, selected |
+| toggleAllSelection | usado en Table de seleccion multiple, cambia los estados de seleccion de todas las filas. | - |
+| toggleRowExpansion | utilizado en tabla expandible, alterna si una cierta fila es expandida. Con el segundo parámetro, puede directamente establecer si esta fila es expandida o colapsada | row, expanded |
+| setCurrentRow      | utilizado en tabla con selección sencilla, establece una cierta fila seleccionada. Si es llamado sin ningún parámetro, este puede limpiar la selección | row           |
+| clearSort          | limpiar ordenamiento, restaurar datos a orden original | —             |
+| clearFilter        | limpiar filtros                          | —             |
+| doLayout | refresca el layout del Table. Cuando la visibilidad de Table cambia, puede que necesite llamar a este método para obtener un diseño correcto | — |
+| sort | Ordenar tabla manualmente. La propiedad `prop` se utiliza para establecer la columna de ordenación, la propiedad `order` se utiliza para establecer el orden. | prop: string, order: string |
+
+### Slots de la tabla
+| Nombre | Descripción                              |
+| ------ | ---------------------------------------- |
+| append | El contenido será insertado después de la última fila. Es posible que necesites este espacio si deseas implementar _scroll_ infinito para la tabla. Este espacio se mostrará sobre la fila de resumen si hay uno. |
+
+### Atributos para las columnas de la tabla
+| Atributo              | Descripción                              | Tipo                              | Valores aceptados             | Por defecto |
+| --------------------- | ---------------------------------------- | --------------------------------- | ----------------------------- | ----------- |
+| type                  | tipo de la columna. Si se establece a `selection`, la columna puede mostrar un _checkbox_. Si se establece a `index`, la columna puede mostrar el índice de la fila (iniciando desde 1). Si se establece a `expand`, la columna puede mostrar un ícono para expandir. | string                            | selection/index/expand        | —           |
+| index                 | personalice los índices para cada fila, funciona en columnas con `type=index` | string, Function(index)           | -                             | -           |
+| label                 | etiqueta de la columna                   | string                            | —                             | —           |
+| column-key            | clave de la columna. Si necesita utilizar el evento `filter-change`, necesita el atributo para identificar cual columna está siendo filtrada | string                            | string                        | —           |
+| prop                  | nombre del campo. También puede usar su alias: `property` | string                            | —                             | —           |
+| width                 | ancho de la columna                      | string                            | —                             | —           |
+| min-width             | ancho mínimo de la columna. Columnas con `width` tienen un ancho fijo, mientras que las columnas con `min-width` tienen un ancho que se distribuye en proporción. | string                            | —                             | —           |
+| fixed                 | especifica si la columna se fija a la izquierda o a la derecha. Se fijará a la izquierda si es `true` | string/boolean                    | true/left/right               | —           |
+| render-header         | Función de renderizado para la cabecera de la tabla de esta columna | Function(h, { column, $index })   | —                             | —           |
+| sortable              | especifica que columna puede ser ordenado. El ordenamiento remoto puede ser hecho configurando el atributo `custom` y escucha al evento de tabla `sort-change` | boolean, string                   | true, false, custom           | false       |
+| sort-method           | método de ordenamiento, funciona cuando `sortable` está en `true`. Debería devolver un número, al igual que Array.sort | Function(a, b)                    | —                             | —           |
+| sort-by               | especifica por cual propiedad de va a ordenar, funciona cuando `sortable` es `true` y `sort-method` es `undefined`. Si se establece a un arreglo, la columna ordenara secuencialmente por la siguiente propiedad si la anterior es igual | Function(row, index)/String/Array | —                             | —           |
+| sort-orders           | the order of the sorting strategies used when sorting the data, works when `sortable` is `true`. Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array | array | the elements in the array need to be one of the following: `ascending`, `descending` and `null` (restores to the original order) | ['ascending', 'descending', null] |
+| resizable             | especifica si el ancho de la columna puede ser redimensionado, funciona cuando `border` de `el-table` está en `true` | boolean                           | —                             | false       |
+| formatter             | función que formatea el contenido de la celda | Function(row, column, cellValue, index)  | —                             | —           |
+| show-overflow-tooltip | especifica si el _tooltip_ debe ocultarse o mostrarse al hacer _hover_ en la celda | boolean                           | —                             | false       |
+| align                 | alineación                               | string                            | left/center/right             | left        |
+| header-align          | alineación de la cabecera de la tabla. Si se omite, se aplicará el valor del atributo anterior. | String                            | left/center/right             | —           |
+| class-name            | nombre de clase de la celda en la columna | string                            | —                             | —           |
+| label-class-name      | nombre de clase de la etiqueta de esta columna | string                            | —                             | —           |
+| selectable            | función que determina si una cierta fila puede ser seleccionada, funciona cuando `type` esta en `selection` | Function(row, index)              | —                             | —           |
+| reserve-selection     | especifica si se reserva la selección después de actualizar los datos, funciona cuando `type` está en `selection`. Note that `row-key` is required for this to work | boolean                           | —                             | false       |
+| filters               | un arreglo de opciones para filtrado de datos. Para cada elemento en este arreglo, `text` y `value` son obligatorios | Array[{ text, value }]            | —                             | —           |
+| filter-placement      | colocación para el menu desplegable del filtro | String                            | same as Tooltip's `placement` | —           |
+| filter-multiple       | especifica si el filtrado de datos soporta múltiples opciones | Boolean                           | —                             | true        |
+| filter-method         | método para filtrado de datos. Si `filter-multiple` está habilitado, este método se invocará varias veces para cada fila, y una fila puede mostrar si una de las llamadas devuelve `true` | Function(value, row, column)      | —                             | —           |
+| filtered-value        | el valor del filtro para los datos seleccionados, puede ser útil cuando el encabezado de la tabla se representará con `render-header` | Array                             | —                             | —           |
+
+### Table-column Scoped Slot
+| Name | Description |
+|------|--------|
+| — | Custom content for table columns. The scope parameter is { row, column, $index } |
+| header | Custom content for table header. The scope parameter is { column, $index } |
\ No newline at end of file
diff --git a/examples/docs/es/tabs.md b/examples/docs/es/tabs.md
new file mode 100644
index 0000000000..bafae0b3dc
--- /dev/null
+++ b/examples/docs/es/tabs.md
@@ -0,0 +1,397 @@
+<script>
+  export default {
+    data() {
+      return {
+        activeName: 'second',
+        activeName2: 'first',
+        editableTabsValue: '2',
+        editableTabsValue2: '2',
+        editableTabs: [{
+          title: 'Tab 1',
+          name: '1',
+          content: 'Tab 1 content'
+        }, {
+          title: 'Tab 2',
+          name: '2',
+          content: 'Tab 2 content'
+        }],
+        editableTabs2: [{
+          title: 'Tab 1',
+          name: '1',
+          content: 'Tab 1 content'
+        }, {
+          title: 'Tab 2',
+          name: '2',
+          content: 'Tab 2 content'
+        }],
+        tabIndex: 2,
+        tabPosition: 'top'
+      }
+    },
+    methods: {
+      handleClick(tab, event) {
+        console.log(tab, event);
+      },
+      handleTabsEdit(targetName, action) {
+        if (action === 'add') {
+          let newTabName = ++this.tabIndex + '';
+          this.editableTabs.push({
+            title: 'New Tab',
+            name: newTabName,
+            content: 'New Tab content'
+          });
+          this.editableTabsValue = newTabName;
+        }
+        if (action === 'remove') {
+          let tabs = this.editableTabs;
+          let activeName = this.editableTabsValue;
+          if (activeName === targetName) {
+            tabs.forEach((tab, index) => {
+              if (tab.name === targetName) {
+                let nextTab = tabs[index + 1] || tabs[index - 1];
+                if (nextTab) {
+                  activeName = nextTab.name;
+                }
+              }
+            });
+          }
+          
+          this.editableTabsValue = activeName;
+          this.editableTabs = tabs.filter(tab => tab.name !== targetName);
+        }
+      },
+      addTab(targetName) {
+        let newTabName = ++this.tabIndex + '';
+        this.editableTabs2.push({
+          title: 'New Tab',
+          name: newTabName,
+          content: 'New Tab content'
+        });
+        this.editableTabsValue2 = newTabName;
+      },
+      removeTab(targetName) {
+        let tabs = this.editableTabs2;
+        let activeName = this.editableTabsValue2;
+        if (activeName === targetName) {
+          tabs.forEach((tab, index) => {
+            if (tab.name === targetName) {
+              let nextTab = tabs[index + 1] || tabs[index - 1];
+              if (nextTab) {
+                activeName = nextTab.name;
+              }
+            }
+          });
+        }
+        
+        this.editableTabsValue2 = activeName;
+        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
+      }
+    }
+  }
+</script>
+
+## Tabulación
+
+Divide colecciones de datos que están relacionados pero pertenecen a diferentes tipos.
+
+### Uso básico
+
+Tabulación básica y concisa
+
+:::demo Tabulación provee funcionalidad de tarjeta selectiva. Por defecto, la primer pestaña es seleccionada como activa, y es posible activar cualquier pestaña estableciendo el atributo de `value`.
+
+```html
+<template>
+  <el-tabs v-model="activeName" @tab-click="handleClick">
+    <el-tab-pane label="User" name="first">User</el-tab-pane>
+    <el-tab-pane label="Config" name="second">Config</el-tab-pane>
+    <el-tab-pane label="Role" name="third">Role</el-tab-pane>
+    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
+  </el-tabs>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        activeName: 'first'
+      };
+    },
+    methods: {
+      handleClick(tab, event) {
+        console.log(tab, event);
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Estilo de Tarjeta
+
+Pestañas diseñadas como tarjetas.
+
+:::demo Establecer `type` a `card` para obtener una pestaña diseñada como tarjeta.
+
+```html
+<template>
+  <el-tabs type="card" @tab-click="handleClick">
+    <el-tab-pane label="User">User</el-tab-pane>
+    <el-tab-pane label="Config">Config</el-tab-pane>
+    <el-tab-pane label="Role">Role</el-tab-pane>
+    <el-tab-pane label="Task">Task</el-tab-pane>
+  </el-tabs>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        activeName: 'first'
+      };
+    },
+    methods: {
+      handleClick(tab, event) {
+        console.log(tab, event);
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Tarjeta con Bordes
+
+Pestañas de tarjeta con bordes.
+
+:::demo Establecer `type` a `border-card`.
+
+```html
+<el-tabs type="border-card">
+  <el-tab-pane label="User">User</el-tab-pane>
+  <el-tab-pane label="Config">Config</el-tab-pane>
+  <el-tab-pane label="Role">Role</el-tab-pane>
+  <el-tab-pane label="Task">Task</el-tab-pane>
+</el-tabs>
+```
+
+:::
+
+### Posición de tabulación
+
+Es posible usar el atributo `tab-position` para establecer la posición de la tabulación.
+
+:::demo Es posible escoger entre cuatro direcciones: `tabPosition="left|right|top|bottom"`
+
+```html
+<template>
+  <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
+    <el-radio-button label="top">top</el-radio-button>
+    <el-radio-button label="right">right</el-radio-button>
+    <el-radio-button label="bottom">bottom</el-radio-button>
+    <el-radio-button label="left">left</el-radio-button>
+  </el-radio-group>
+
+  <el-tabs :tab-position="tabPosition" style="height: 200px;">
+    <el-tab-pane label="User">User</el-tab-pane>
+    <el-tab-pane label="Config">Config</el-tab-pane>
+    <el-tab-pane label="Role">Role</el-tab-pane>
+    <el-tab-pane label="Task">Task</el-tab-pane>
+  </el-tabs>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        tabPosition: 'top'
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Pestaña Personalizada
+
+Es posible usar slots con nombre para personalizar el contenido de la etiqueta de la pestaña.
+
+:::demo
+```html
+<el-tabs type="border-card">
+  <el-tab-pane>
+    <span slot="label"><i class="el-icon-date"></i> Route</span>
+    Route
+  </el-tab-pane>
+  <el-tab-pane label="Config">Config</el-tab-pane>
+  <el-tab-pane label="Role">Role</el-tab-pane>
+  <el-tab-pane label="Task">Task</el-tab-pane>
+</el-tabs>
+```
+:::
+
+### Agregar y cerrar pestaña
+
+Solo las pestañas de tipo tarjeta soportan adición y cierre.
+
+:::demo
+```html
+<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
+  <el-tab-pane
+    v-for="(item, index) in editableTabs"
+    :key="item.name"
+    :label="item.title"
+    :name="item.name"
+  >
+    {{item.content}}
+  </el-tab-pane>
+</el-tabs>
+<script>
+  export default {
+    data() {
+      return {
+        editableTabsValue: '2',
+        editableTabs: [{
+          title: 'Tab 1',
+          name: '1',
+          content: 'Tab 1 content'
+        }, {
+          title: 'Tab 2',
+          name: '2',
+          content: 'Tab 2 content'
+        }],
+        tabIndex: 2
+      }
+    },
+    methods: {
+      handleTabsEdit(targetName, action) {
+        if (action === 'add') {
+          let newTabName = ++this.tabIndex + '';
+          this.editableTabs.push({
+            title: 'New Tab',
+            name: newTabName,
+            content: 'New Tab content'
+          });
+          this.editableTabsValue = newTabName;
+        }
+        if (action === 'remove') {
+          let tabs = this.editableTabs;
+          let activeName = this.editableTabsValue;
+          if (activeName === targetName) {
+            tabs.forEach((tab, index) => {
+              if (tab.name === targetName) {
+                let nextTab = tabs[index + 1] || tabs[index - 1];
+                if (nextTab) {
+                  activeName = nextTab.name;
+                }
+              }
+            });
+          }
+          
+          this.editableTabsValue = activeName;
+          this.editableTabs = tabs.filter(tab => tab.name !== targetName);
+        }
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Botón disparador personalizado de la nueva pestaña
+
+:::demo
+```html
+<div style="margin-bottom: 20px;">
+  <el-button
+    size="small"
+    @click="addTab(editableTabsValue2)"
+  >
+    add tab
+  </el-button>
+</div>
+<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
+  <el-tab-pane
+    v-for="(item, index) in editableTabs2"
+    :key="item.name"
+    :label="item.title"
+    :name="item.name"
+  >
+    {{item.content}}
+  </el-tab-pane>
+</el-tabs>
+<script>
+  export default {
+    data() {
+      return {
+        editableTabsValue2: '2',
+        editableTabs2: [{
+          title: 'Tab 1',
+          name: '1',
+          content: 'Tab 1 content'
+        }, {
+          title: 'Tab 2',
+          name: '2',
+          content: 'Tab 2 content'
+        }],
+        tabIndex: 2
+      }
+    },
+    methods: {
+      addTab(targetName) {
+        let newTabName = ++this.tabIndex + '';
+        this.editableTabs2.push({
+          title: 'New Tab',
+          name: newTabName,
+          content: 'New Tab content'
+        });
+        this.editableTabsValue2 = newTabName;
+      },
+      removeTab(targetName) {
+        let tabs = this.editableTabs2;
+        let activeName = this.editableTabsValue2;
+        if (activeName === targetName) {
+          tabs.forEach((tab, index) => {
+            if (tab.name === targetName) {
+              let nextTab = tabs[index + 1] || tabs[index - 1];
+              if (nextTab) {
+                activeName = nextTab.name;
+              }
+            }
+          });
+        }
+        
+        this.editableTabsValue2 = activeName;
+        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Atributos de Pestañas
+| Atributo     | Descripción                          | Tipo    | Valores aceptados     | Por defecto                 |
+| ------------ | ------------------------------------ | ------- | --------------------- | --------------------------- |
+| type         | tipo de Pestaña                      | string  | card/border-card      | —                           |
+| closable     | si la Pestaña es cerrable            | boolean | —                     | false                       |
+| addable      | si la Pestaña es añadible            | boolean | —                     | false                       |
+| editable     | si la Pestaña es añadible y cerrable | boolean | —                     | false                       |
+| value        | nombre de la pestaña seleccionada    | string  | —                     | nombre de la primer pestaña |
+| tab-position | posición de tabulación               | string  | top/right/bottom/left | top                         |
+| stretch      | si el ancho del tab se ajusta automáticamente a su contenedor | boolean | - | false |
+| before-leave | función `hook` antes de cambiar de pestaña. Si se devuelve `false` o se devuelve una `Promise` y luego se rechaza, se evitará el cambio. | Function(activeName, oldActiveName) | — | — |
+
+### Eventos de Pestañas
+| Nombre de Evento | Descripción                              | Parámetros                    |
+| ---------------- | ---------------------------------------- | ----------------------------- |
+| tab-click        | se lanza cuando se hace click a una pestaña | pestaña clickeada             |
+| tab-remove       | se lanza cuando se hace click al botón tab-remove | nombre de la pestaña removida |
+| tab-add          | se lanza cuando se hace click al botón tab-add | —                             |
+| edit             | se lanza cuando los botones de tab-add y/o tab-remove son clickeados | (targetName, action)          |
+
+### Attributos del Tab-pane
+| Atributo | Descripción                                                  | Tipo    | Valores Aceptados | Default                                                      |
+| -------- | ------------------------------------------------------------ | ------- | ----------------- | ------------------------------------------------------------ |
+| label    | título de la pestaña                                         | string  | —                 | —                                                            |
+| disabled | si la Tabulación está deshabilitada                          | boolean | —                 | false                                                        |
+| name     | identificador correspondiente al activeName de la Tabulación, representando el alias del tab-pane | string  | —                 | número ordinal del tab-pane en la secuencia, p.ej el primer tab-pane de pestañas es '1' |
+| closable | si el Tab es cerrable                                        | boolean | —                 | false                                                        |
+| lazy     | si Tab es renderizado con `lazy-load`                        | boolean | —                 | false                                                        |
diff --git a/examples/docs/es/tag.md b/examples/docs/es/tag.md
new file mode 100644
index 0000000000..a884f49777
--- /dev/null
+++ b/examples/docs/es/tag.md
@@ -0,0 +1,215 @@
+<script>
+  export default {
+    data() {
+      return {
+        tags: [
+          { name: 'Tag 1', type: '' },
+          { name: 'Tag 2', type: 'success' },
+          { name: 'Tag 3', type: 'info' },
+          { name: 'Tag 4', type: 'warning' },
+          { name: 'Tag 5', type: 'danger' }
+        ],
+        dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
+        inputVisible: false,
+        inputValue: ''
+      };
+    },
+    methods: {
+      handleClose(tag) {
+        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+      },
+    
+      showInput() {
+        this.inputVisible = true;
+        this.$nextTick(_ => {
+          this.$refs.saveTagInput.$refs.input.focus();
+        });
+      },
+    
+      handleInputConfirm() {
+        let inputValue = this.inputValue;
+        if (inputValue) {
+          this.dynamicTags.push(inputValue);
+        }
+        this.inputVisible = false;
+        this.inputValue = '';
+      }
+    }
+  }
+</script>
+
+<style>
+  .demo-box.demo-tag {
+    .el-tag + .el-tag {
+      margin-left: 10px;
+    }
+    .button-new-tag {
+      margin-left: 10px;
+      height: 32px;
+      line-height: 30px;
+      padding: 0 *;
+    }
+    .input-new-tag {
+      width: 90px;
+      margin-left: 10px;
+      vertical-align: bottom;
+    }
+  }
+</style>
+
+## Tag
+
+Se utiliza para marcar y seleccionar.
+
+### Uso básico
+
+:::demo Utilice el atributo `type` para definir el tipo de etiqueta. Además, el atributo `color` se puede utilizar para establecer el color de fondo de la etiqueta.
+
+```html
+<el-tag>Tag One</el-tag>
+<el-tag type="success">Tag Two</el-tag>
+<el-tag type="info">Tag Three</el-tag>
+<el-tag type="warning">Tag Four</el-tag>
+<el-tag type="danger">Tag Five</el-tag>
+```
+:::
+
+### Etiqueta removible
+
+:::demo el atributo `closable` puede usarse para definir una etiqueta removible. Acepta un `Boolean`. De forma predeterminada, la eliminación de la etiqueta tiene una animación que se desvanece. Si no quiere usarlo, puede configurar el atributo `disable-transitions` , que acepta `Boolean`, como `true`. Se dispara el evento `close` cuando la etiqueta es removida. 
+
+```html
+<el-tag
+  v-for="tag in tags"
+  :key="tag.name"
+  closable
+  :type="tag.type">
+  {{tag.name}}
+</el-tag>
+
+<script>
+  export default {
+    data() {
+      return {
+        tags: [
+          { name: 'Tag 1', type: '' },
+          { name: 'Tag 2', type: 'success' },
+          { name: 'Tag 3', type: 'info' },
+          { name: 'Tag 4', type: 'warning' },
+          { name: 'Tag 5', type: 'danger' }
+        ]
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Editar dinámicamente
+
+Puede utilizar el evento `close` para añadir y eliminar etiquetas dinámicamente.
+
+:::demo
+```html
+<el-tag
+  :key="tag"
+  v-for="tag in dynamicTags"
+  closable
+  :disable-transitions="false"
+  @close="handleClose(tag)">
+  {{tag}}
+</el-tag>
+<el-input
+  class="input-new-tag"
+  v-if="inputVisible"
+  v-model="inputValue"
+  ref="saveTagInput"
+  size="mini"
+  @keyup.enter.native="handleInputConfirm"
+  @blur="handleInputConfirm"
+>
+</el-input>
+<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
+
+<style>
+  .el-tag + .el-tag {
+    margin-left: 10px;
+  }
+  .button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      return {
+        dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
+        inputVisible: false,
+        inputValue: ''
+      };
+    },
+    methods: {
+      handleClose(tag) {
+        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+      },
+
+      showInput() {
+        this.inputVisible = true;
+        this.$nextTick(_ => {
+          this.$refs.saveTagInput.$refs.input.focus();
+        });
+      },
+
+      handleInputConfirm() {
+        let inputValue = this.inputValue;
+        if (inputValue) {
+          this.dynamicTags.push(inputValue);
+        }
+        this.inputVisible = false;
+        this.inputValue = '';
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Tamaños
+
+Además del tamaño predeterminado, el componente Tag proporciona tres tamaños adicionales para que pueda elegir entre diferentes escenarios.
+
+:::demo Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `small` o `mini`.
+
+```html
+<el-tag>Default</el-tag>
+<el-tag size="medium">Medium</el-tag>
+<el-tag size="small">Small</el-tag>
+<el-tag size="mini">Mini</el-tag>
+```
+:::
+
+### Atributos
+| Atributo            | Descripción                         | Tipo    | Valores aceptados           | Por defecto |
+| ------------------- | ----------------------------------- | ------- | --------------------------- | ----------- |
+| type                | tema                                | string  | success/info/warning/danger | —           |
+| closable            | si el Tag puede ser removido        | boolean | —                           | false       |
+| disable-transitions | si se deshabilitan las animaciones  | boolean | —                           | false       |
+| hit                 | si el  Tag tiene un borde resaltado | boolean | —                           | false       |
+| color               | color de fondo del Tag              | string  | —                           | —           |
+| size                | tamaño del Tag                      | string  | medium / small / mini       | —           |
+
+
+### Eventos
+| Nombre | Descripción                          | Parametros |
+| ------ | ------------------------------------ | ---------- |
+| close  | se disoara cuando el Tag es removido | —          |
\ No newline at end of file
diff --git a/examples/docs/es/time-picker.md b/examples/docs/es/time-picker.md
new file mode 100644
index 0000000000..716b2d1844
--- /dev/null
+++ b/examples/docs/es/time-picker.md
@@ -0,0 +1,223 @@
+<style>
+  .demo-box {
+    .el-date-editor + .el-date-editor {
+      margin-left: 10px;
+    }
+  }
+</style>
+
+## Selector de Tiempo
+
+Use el Time Picker para input de tipo time.
+
+### Selector de tiempo fijo
+
+Provee una lista de tiempo fijo para que los usuarios escogan.
+
+:::demo Use el tag `el-time-select`, se pueden asignar tiempo de inicio, tiempo de finalización y salto de tiempo con `start`, `end` y `step`.
+```html
+<el-time-select
+  v-model="value1"
+  :picker-options="{
+    start: '08:30',
+    step: '00:15',
+    end: '18:30'
+  }"
+  placeholder="Select time">
+</el-time-select>
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: ''
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Selector de tiempo arbitrario
+
+Un tiempo arbitrario puede ser escogido.
+
+:::demo Al usar el tag `el-time-picker`, es posible limitar el rango de tiempo al especificar `selectableRange`. Por defecto, es posible hacer scroll con la rueda del mouse para escoger el tiempo, alternativamente se pueden utilizar las flechas de control cuando el atributo `arrow-control` esté establecido.
+
+```html
+<template>
+  <el-time-picker
+    v-model="value2"
+    :picker-options="{
+      selectableRange: '18:30:00 - 20:30:00'
+    }"
+    placeholder="Arbitrary time">
+  </el-time-picker>
+  <el-time-picker
+    arrow-control
+    v-model="value3"
+    :picker-options="{
+      selectableRange: '18:30:00 - 20:30:00'
+    }"
+    placeholder="Arbitrary time">
+  </el-time-picker>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value2: new Date(2016, 9, 10, 18, 40),
+        value3: new Date(2016, 9, 10, 18, 40)
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Rango de tiempo fijo
+
+Si se escoge el tiempo de inicio al principio, el tiempo de finalización cambiará respectivamente.
+
+:::demo
+```html
+<template>
+  <el-time-select
+    placeholder="Start time"
+    v-model="startTime"
+    :picker-options="{
+      start: '08:30',
+      step: '00:15',
+      end: '18:30'
+    }">
+  </el-time-select>
+  <el-time-select
+    placeholder="End time"
+    v-model="endTime"
+    :picker-options="{
+      start: '08:30',
+      step: '00:15',
+      end: '18:30',
+      minTime: startTime
+    }">
+  </el-time-select>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        startTime: '',
+        endTime: ''
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Rango de tiempo arbitrario
+
+Es posible escoger un rango de tiempo arbitrario.
+
+:::demo Es posible seleccionar un rango de tiempo al añadir el atributo `is-range`. También, `arrow-control` es soportado en modo de rango.
+```html
+<template>
+  <el-time-picker
+    is-range
+    v-model="value4"
+    range-separator="To"
+    start-placeholder="Start time"
+    end-placeholder="End time">
+  </el-time-picker>
+  <el-time-picker
+    is-range
+    arrow-control
+    v-model="value5"
+    range-separator="To"
+    start-placeholder="Start time"
+    end-placeholder="End time">
+  </el-time-picker>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
+      };
+    }
+  }
+</script>
+```
+:::
+
+<script>
+  export default {
+    data() {
+      return {
+        value1: '',
+        value2: new Date(2016, 9, 10, 18, 40),
+        value3: new Date(2016, 9, 10, 18, 40),
+        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        startTime: '',
+        endTime: ''
+      };
+    }
+  }
+</script>
+
+### Atributos
+| Atributo          | Descripción                              | Tipo                                     | Valores aceptados                        | Por defecto          |
+| ----------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | -------------------- |
+| readonly          | si el Time Picker está en modo de sólo lectura | boolean                                  | —                                        | false                |
+| disabled          | si el Time Picker se encuentra deshabilitado | boolean                                  | —                                        | false                |
+| editable          | si el input puede ser editado            | boolean                                  | —                                        | true                 |
+| clearable         | si mostrar el botón de borrado           | boolean                                  | —                                        | true                 |
+| size              | tamaño del input                         | string                                   | medium / small / mini                    | —                    |
+| placeholder       | placeholder en un modo fuera de rango    | string                                   | —                                        | —                    |
+| start-placeholder | placeholder para el tiempo de inicio en modo de rango | string                                   | —                                        | —                    |
+| end-placeholder   | placeholder para el tiempo de finalización en modo de rango | string                                   | —                                        | —                    |
+| is-range          | si es posible escoger un rango de tiempo, solo funciona con `<el-time-picker>` | boolean                                  | —                                        | false                |
+| arrow-control     | si es posible escoger el tiempo usando los botones de flecha, solo funciona con `<el-time-picker>` | boolean                                  | —                                        | false                |
+| value             | valor del selector                       | Fecha para Selector de Tiempo, string para el Seleccionador de Tiempo | hour `HH`, minute `mm`, second `ss`      | HH:mm:ss             |
+| align             | alineación                               | left / center / right                    | left                                     |                      |
+| popper-class      | nombre de clase personalizada para el dropdown del Time Picker | string                                   | —                                        | —                    |
+| picker-options    | opciones adicionales, revisar la tabla posterior | object                                   | —                                        | {}                   |
+| range-separator   | separador de rango                       | string                                   | -                                        | '-'                  |
+| default-value     | opcional, fecha por defecto del calendario | Fecha para Selector de Tiempo, string para el Seleccionador de Tiempo | cualquier cosa aceptada por `new Date()` para el Selector de Tiempo,  Selector de Tiempo, valor seleccionable para el Seleccionador de Tiempo | —                    |
+| value-format      | opcional, solo para Time Picker, formato del valor vinculado. Si no se especifica, el valor vinculado será un objeto Date | string                                   | ver [date formats](#/es/component/date-picker#date-formats) | —                    |
+| name              | como `name` en input nativo              | string                                   | —                                        | —                    |
+| prefix-icon       | Clase personalizada para el icono de prefijado | string                                   | —                                        | el-icon-time         |
+| clear-icon        | Clase personalizada para el icono `clear` | string                                   | —                                        | el-icon-circle-close |
+
+### Opciones para Time Picker
+| Atributo | Descripción                              | Tipo   | Valores aceptados | Por defecto |
+| -------- | ---------------------------------------- | ------ | ----------------- | ----------- |
+| start    | tiempo de inicio                         | string | —                 | 09:00       |
+| end      | tiempo de finalización                   | string | —                 | 18:00       |
+| step     | salto de tiempo                          | string | —                 | 00:30       |
+| minTime  | tiempo mínimo, cualquier tiempo antes de éste será deshabilitado | string | —                 | 00:00       |
+| maxTime  | tiempo máximo, cualquier tiempo después de éste será deshabilitado | string | —                 | —           |
+
+### Opciones para Time Picker
+| Atributo        | Descripción                              | Tipo           | Valores aceptados                   | Por defecto |
+| --------------- | ---------------------------------------- | -------------- | ----------------------------------- | ----------- |
+| selectableRange | rango de tiempo disponible p.ej. `'18:30:00 - 20:30:00'`ó`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | —                                   | —           |
+| format          | formato para el selector                 | string         | hour `HH`, minute `mm`, second `ss` | HH:mm:ss    |
+
+
+### Eventos
+| Nombre de Evento | Descripción                              | Parámetros                     |
+| ---------------- | ---------------------------------------- | ------------------------------ |
+| change           | se lanza cuando el usuario confirma el valor | valor vinculado del componente |
+| blur             | se lanza cuando el input se difumina     | instancia del componente       |
+| focus            | se lanza cuando el input se enfoca       | instancia del componente       |
+
+### Metodos
+| Metodo | Descripción                | Parameteros |
+| ------ | -------------------------- | ----------- |
+| focus  | coloca el foco en el input | —           |
diff --git a/examples/docs/es/tooltip.md b/examples/docs/es/tooltip.md
new file mode 100644
index 0000000000..91d9a19897
--- /dev/null
+++ b/examples/docs/es/tooltip.md
@@ -0,0 +1,243 @@
+<script>
+  export default {
+    data() {
+      return {
+        disabled: false
+      };
+    }
+  };
+</script>
+
+<style>
+  .demo-tooltip.demo-es {
+    &:first-of-type .source {
+      .el-button {
+        width: 110px;
+      }
+    }
+    .el-tooltip + .el-tooltip {
+      margin-left: 15px;
+    }
+    .box {
+      width: 400px;
+    
+      .top {
+        text-align: center;
+      }
+      
+      .left {
+        float: left;
+        width: 110px;
+      }
+      
+      .right {
+        float: right;
+        width: 110px;
+      }
+      
+      .bottom {
+        clear: both;
+        text-align: center;
+      }
+      
+      .item {
+        margin: 4px;
+      }
+      
+      .left .el-tooltip__popper,
+      .right .el-tooltip__popper {
+        padding: 8px 10px;
+      }
+      .el-tooltip {
+        margin-left: 0;
+      }
+    }
+  }
+</style>
+
+## Tooltip
+
+Mostrar aviso de información con el hover del mouse.
+
+### Uso básico
+
+Tooltip tiene 9 colocaciones.
+
+:::demo Use el atributo `content` para establecer el contenido que se mostrará al hacer hover. El atributo `placement` determina la posición del tooltip. Su valor es `[orientation]-[alignment]` con cuatro orientaciones `top`, `left`, `right`, `bottom` y tres alineaciones `start`, `end`, `null`, la alineación default es null. Tome `placement="left-end"` como ejemplo, Tooltip será mostrado en la izquierda del elemento en que se esté haciendo hover y el fondo del tooltip se alineará con el fondo del elemento.
+```html
+<div class="box">
+  <div class="top">
+    <el-tooltip class="item" effect="dark" content="Top Left prompts info" placement="top-start">
+      <el-button>top-start</el-button>
+    </el-tooltip>
+    <el-tooltip class="item" effect="dark" content="Top Center prompts info" placement="top">
+      <el-button>top</el-button>
+    </el-tooltip>
+    <el-tooltip class="item" effect="dark" content="Top Right prompts info" placement="top-end">
+      <el-button>top-end</el-button>
+    </el-tooltip>
+  </div>
+  <div class="left">
+    <el-tooltip class="item" effect="dark" content="Left Top prompts info" placement="left-start">
+      <el-button>left-start</el-button>
+    </el-tooltip>
+    <el-tooltip class="item" effect="dark" content="Left Center prompts info" placement="left">
+      <el-button>left</el-button>
+    </el-tooltip>
+    <el-tooltip class="item" effect="dark" content="Left Bottom prompts info" placement="left-end">
+      <el-button>left-end</el-button>
+    </el-tooltip>
+  </div>
+
+  <div class="right">
+    <el-tooltip class="item" effect="dark" content="Right Top prompts info" placement="right-start">
+      <el-button>right-start</el-button>
+    </el-tooltip>
+    <el-tooltip class="item" effect="dark" content="Right Center prompts info" placement="right">
+      <el-button>right</el-button>
+    </el-tooltip>
+    <el-tooltip class="item" effect="dark" content="Right Bottom prompts info" placement="right-end">
+      <el-button>right-end</el-button>
+    </el-tooltip>
+  </div>
+  <div class="bottom">
+    <el-tooltip class="item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">
+      <el-button>bottom-start</el-button>
+    </el-tooltip>
+    <el-tooltip class="item" effect="dark" content="Bottom Center prompts info" placement="bottom">
+      <el-button>bottom</el-button>
+    </el-tooltip>
+    <el-tooltip class="item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">
+      <el-button>bottom-end</el-button>
+    </el-tooltip>
+  </div>
+</div>
+
+<style>
+  .box {
+    width: 400px;
+
+    .top {
+      text-align: center;
+    }
+
+    .left {
+      float: left;
+      width: 110px;
+    }
+
+    .right {
+      float: right;
+      width: 110px;
+    }
+
+    .bottom {
+      clear: both;
+      text-align: center;
+    }
+
+    .item {
+      margin: 4px;
+    }
+
+    .left .el-tooltip__popper,
+    .right .el-tooltip__popper {
+      padding: 8px 10px;
+    }
+
+    .el-button {
+      width: 110px;
+    }
+  }
+</style>
+```
+:::
+
+
+### Tema
+
+Tooltip tiene dos temas: `dark` and `light`.
+
+:::demo Establecer `effect` para modificar el tema, el valor por defecto es `dark`.
+```html
+<el-tooltip content="Top center" placement="top">
+  <el-button>Dark</el-button>
+</el-tooltip>
+<el-tooltip content="Bottom center" placement="bottom" effect="light">
+  <el-button>Light</el-button>
+</el-tooltip>
+```
+:::
+
+### Más Contenido
+
+Despliegue múltiples líneas de texto y establezca su formato.
+
+:::demo Sobre-escribiba el atributo `content` del `el-tooltip` añadiendo un slot llamado `content`.
+```html
+<el-tooltip placement="top">
+  <div slot="content">multiple lines<br/>second line</div>
+  <el-button>Top center</el-button>
+</el-tooltip>
+```
+:::
+
+### Uso Avanzado
+
+Adicional a los usos básicos, existen algunos atributos que permiten la personalización: 
+
+el atributo `transition` permite personalizar la animación con la que el Tooltip se muestra o se esconda, el valor por defecto es `el-fade-in-linear`.
+
+el atributo `disabled` permite deshabilitar `tooltip`. Solo es necesario definirlo como `true`.
+
+De hecho, Tooltip es una extension basada en [Vue-popper](https://github.com/element-component/vue-popper), es posible utilizar cualquier atributo permitido en Vue-popper.
+
+:::demo
+```html
+<template>
+  <el-tooltip :disabled="disabled" content="click to close tooltip function" placement="bottom" effect="light">
+    <el-button @click="disabled = !disabled">click to {{disabled ? 'active' : 'close'}} tooltip function</el-button>
+  </el-tooltip>
+</template>
+
+<style>
+  .slide-fade-enter-active {
+    transition: all .3s ease;
+  }
+  .slide-fade-leave-active {
+    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+  }
+  .slide-fade-enter, .expand-fade-leave-active {
+    margin-left: 20px;
+    opacity: 0;
+  }
+</style>
+```
+:::
+
+
+:::tip
+El componente `router-link` no es soportado por Tooltip, favor de usar `vm.$router.push`.
+
+Elementos de forma deshabilitados no son soportados por Tooltip, más información puede ser encontrada en [MDN](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter).
+Es necesario envolver los elementos de forma deshabilitados en un elemento contenedor para que Tooltipo funcione.
+:::
+
+
+### Atributos
+| Atributo       | Descripción                              | Tipo    | Valores aceptados                        | Por defecto                              |
+| -------------- | ---------------------------------------- | ------- | ---------------------------------------- | ---------------------------------------- |
+| effect         | tema del Tooltip                         | string  | dark/light                               | dark                                     |
+| content        | contenido a mostrar, puede ser sobre-escrito por `slot#content` | string  | —                                        | —                                        |
+| placement      | posición del Tooltip                     | string  | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom                                   |
+| value(v-model) | visibilidad del Tooltip                  | boolean | —                                        | false                                    |
+| disabled       | saber si el Tooltip se encuentra deshabilitado | boolean | —                                        | false                                    |
+| offset         | offset del Tooltip                       | number  | —                                        | 0                                        |
+| transition     | nombre de animación                      | string  | —                                        | el-fade-in-linear                        |
+| visible-arrow  | si una flecha es mostrada. Para mayor información, revisar la página de [Vue-popper](https://github.com/element-component/vue-popper) | boolean | —                                        | true                                     |
+| popper-options | parámetros de [popper.js](https://popper.js.org/documentation.html) | Object  | referirse a la documentación de [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
+| open-delay     | retraso de la apariencia, en milisegundos | number  | —                                        | 0                                        |
+| manual         | si el Tooltipo será controlado de forma manual. `mouseenter` y `mouseleave` no tendrán efecto si fue establecido como `true` | boolean | —                                        | false                                    |
+| popper-class   | nombre de clase personalizada para el popper del Tooltip | string  | —                                        | —                                        |
+| enterable      | si el mouse puede entrar al Tooltip      | Boolean | —                                        | true                                     |
+| hide-after     | tiempo a esperar en milisegundos para esconder el Tooltip | number  | —                                        | 0                                        |
diff --git a/examples/docs/es/transfer.md b/examples/docs/es/transfer.md
new file mode 100644
index 0000000000..290641f4e3
--- /dev/null
+++ b/examples/docs/es/transfer.md
@@ -0,0 +1,325 @@
+<style>
+  .demo-transfer {
+    .transfer-footer {
+      margin-left: 15px;
+      padding: 6px 5px;
+    }
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      const generateData = _ => {
+        const data = [];
+        for (let i = 1; i <= 15; i++) {
+          data.push({
+            key: i,
+            label: `Option ${ i }`,
+            disabled: i % 4 === 0
+          });
+        }
+        return data;
+      };
+      const generateData2 = _ => {
+        const data = [];
+        const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];
+        const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];
+        states.forEach((city, index) => {
+          data.push({
+            label: city,
+            key: index,
+            initial: initials[index]
+          });
+        });
+        return data;
+      };
+      const generateData3 = _ => {
+        const data = [];
+        for (let i = 1; i <= 15; i++) {
+          data.push({
+            value: i,
+            desc: `Option ${ i }`,
+            disabled: i % 4 === 0
+          });
+        }
+        return data;
+      };
+      return {
+        data: generateData(),
+        data2: generateData2(),
+        data3: generateData3(),
+        value1: [1, 4],
+        value2: [],
+        value3: [1],
+        value4: [1],
+        value5: [],
+        filterMethod(query, item) {
+          return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;
+        },
+        renderFunc(h, option) {
+          return <span>{ option.key } - { option.label }</span>;
+        }
+      };
+    },
+    
+    methods: {
+      handleChange(value, direction, movedKeys) {
+        console.log(value, direction, movedKeys);
+      }
+    }
+  };
+</script>
+
+## Transfer
+
+### Uso básico
+:::demo Los datos se pasan a Transfer a través del atributo `data`. Los datos tienen que ser un array de objetos, y cada objeto debe tener estos atributos: `key` que será el identificador del item, `label` que será el texto a mostrar, y `disabled` que indicará si el elemento esta desactivado. Los items dentro de la lista destino están sincronizados con la variable asociada a `v-model`, y el valor de esa variable es un array de claves de los elementos de la lista destino. Así que si no quiere que la lista destino esté vacía inicialmente puede inicializar el `v-model` con un array.
+```html
+<template>
+  <el-transfer
+    v-model="value1"
+    :data="data">
+  </el-transfer>
+</template>
+
+<script>
+  export default {
+    data() {
+      const generateData = _ => {
+        const data = [];
+        for (let i = 1; i <= 15; i++) {
+          data.push({
+            key: i,
+            label: `Option ${ i }`,
+            disabled: i % 4 === 0
+          });
+        }
+        return data;
+      };
+      return {
+        data: generateData(),
+        value1: [1, 4]
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Filtrar
+
+Puede buscar y filtrar los items.
+
+:::demo Ponga el atributo `filterable` a true para permitir el filtrado.Por defecto si el `label` del item contiene el término buscado será incluido en el resultado. También puede implementar su propio método de filtrado con el atributo `filter-method`, que recibe un método y le pasa la búsqueda y cada item. Los items para los que devuelva true serán incluidos en el resultado de la búsqueda.
+```html
+<template>
+  <el-transfer
+    filterable
+    :filter-method="filterMethod"
+    filter-placeholder="State Abbreviations"
+    v-model="value2"
+    :data="data2">
+  </el-transfer>
+</template>
+
+<script>
+  export default {
+    data() {
+      const generateData2 = _ => {
+        const data = [];
+        const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];
+        const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];
+        states.forEach((city, index) => {
+          data.push({
+            label: city,
+            key: index,
+            initial: initials[index]
+          });
+        });
+        return data;
+      };
+      return {
+        data2: generateData2(),
+        value2: [],
+        filterMethod(query, item) {
+          return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;
+        }
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Personalizable
+
+Puede personalizar los títulos, botones, la función de renderizado de los items, el texto de status de la cabecera y el contenido del pie.
+
+:::demo Use `titles`, `button-texts`, `render-content` y `format` respectivamente para personalizar los títulos de las listas, el texto de los botones, la función de renderizado para los items y el texto de la cabecera que muestra el estado de los items. Plus, you can also use scoped slot to customize data items. Para el pie de la lista hay dos slots: `left-footer` y `right-footer`. Además, si quiere algunos items marcados inicialmente puede usar `left-default-checked` y `right-default-checked`. Finalmente este ejemplo muestra el evento `change`. Tenga en cuenta que este ejemplo no se puede ejecutar en jsfiddle porque no soporta sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias son configuradas correctamente.
+```html
+<template>
+  <p style="text-align: center; margin: 0 0 20px">Customize data items using render-content</p>
+  <div style="text-align: center">
+    <el-transfer
+      style="text-align: left; display: inline-block"
+      v-model="value3"
+      filterable
+      :left-default-checked="[2, 3]"
+      :right-default-checked="[1]"
+      :render-content="renderFunc"
+      :titles="['Source', 'Target']"
+      :button-texts="['To left', 'To right']"
+      :format="{
+        noChecked: '${total}',
+        hasChecked: '${checked}/${total}'
+      }"
+      @change="handleChange"
+      :data="data">
+      <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>
+      <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>
+    </el-transfer>
+  </div>
+  <p style="text-align: center; margin: 50px 0 20px">Customize data items using scoped slot</p>
+  <div style="text-align: center">
+    <el-transfer
+      style="text-align: left; display: inline-block"
+      v-model="value4"
+      filterable
+      :left-default-checked="[2, 3]"
+      :right-default-checked="[1]"
+      :titles="['Source', 'Target']"
+      :button-texts="['To left', 'To right']"
+      :format="{
+        noChecked: '${total}',
+        hasChecked: '${checked}/${total}'
+      }"
+      @change="handleChange"
+      :data="data">
+      <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
+      <el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>
+      <el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>
+    </el-transfer>
+  </div>
+</template>
+
+<style>
+  .transfer-footer {
+    margin-left: 20px;
+    padding: 6px 5px;
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      const generateData = _ => {
+        const data = [];
+        for (let i = 1; i <= 15; i++) {
+          data.push({
+            key: i,
+            label: `Option ${ i }`,
+            disabled: i % 4 === 0
+          });
+        }
+        return data;
+      };
+      return {
+        data: generateData(),
+        value3: [1],
+        value4: [1],
+        renderFunc(h, option) {
+          return <span>{ option.key } - { option.label }</span>;
+        }
+      };
+    },
+
+    methods: {
+      handleChange(value, direction, movedKeys) {
+        console.log(value, direction, movedKeys);
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Prop con alias
+
+Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada elemento. Si sus datos tienen un nombre diferente para la clave puede usar el atributo `props` para añadir alias.
+
+:::demo En este ejemplo los elementos no tienen `key`y `label`, en vez de eso tienen `value` y `desc`. Así que tiene que añadir alias para `key` y `label`.
+```html
+<template>
+  <el-transfer
+    v-model="value5"
+    :props="{
+      key: 'value',
+      label: 'desc'
+    }"
+    :data="data3">
+  </el-transfer>
+</template>
+
+<script>
+  export default {
+    data() {
+      const generateData3 = _ => {
+        const data = [];
+        for (let i = 1; i <= 15; i++) {
+          data.push({
+            value: i,
+            desc: `Option ${ i }`,
+            disabled: i % 4 === 0
+          });
+        }
+        return data;
+      };
+      return {
+        data3: generateData3(),
+        value5: []
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Atributos
+| Atriburo              | Descripcion                              | Tipo                            | Valores aceptados | Por defecto                              |
+| --------------------- | ---------------------------------------- | ------------------------------- | ----------------- | ---------------------------------------- |
+| data                  | Origen de datos                          | array[{ key, label, disabled }] | —                 | [ ]                                      |
+| filterable            | Si se puede filtrar                      | boolean                         | —                 | false                                    |
+| filter-placeholder    | Placeholder para el input del filtro     | string                          | —                 | Enter keyword                            |
+| filter-method         | Método de filtrado                       | function                        | —                 | —                                        |
+| target-order          | estrategia de órdenes para elementos de la lista destino. Si está configurado en `original`, los elementos mantendrán el mismo orden que la fuente de datos. Si está configurado para `push`, los nuevos elementos añadidos se insertaran al final. Si se ajusta a `unshift`, los nuevos elementos añadidos se insertarán en la parte superior. | string | original / push / unshift | original |
+| titles                | Títulos de las listas                    | array                           | —                 | ['List 1', 'List 2']                     |
+| button-texts          | Texto de los botones                     | array                           | —                 | [ ]                                      |
+| render-content        | Función de renderizado                   | function(h, option)             | —                 | —                                        |
+| format                | Texto para el status en el header        | object{noChecked, hasChecked}   | —                 | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } |
+| props                 | prop alias para el origen de datos       | object{key, label, disabled}    | —                 | —                                        |
+| left-default-checked  | Array de claves de los elementos marcados inicialmente en la lista de la izquierda | array                           | —                 | [ ]                                      |
+| right-default-checked | Array de claves de los elementos marcados inicialmente en la lista de la derecha | array                           | —                 | [ ]                                      |
+
+### Slot
+| Nombre       | Descripcion                              |
+| ------------ | ---------------------------------------- |
+| left-footer  | Contenido del footer de la lista de la izquierda |
+| right-footer | Contenido del footer de la lista de la derecha |
+
+### Scoped Slot
+| Name | Description |
+|------|--------|
+| — | Custom content for data items. The scope parameter is { option } |
+
+### Methods
+| Method | Description | Parameters |
+| ---- | ---- | ---- |
+| clearQuery | borra la palabra clave del filtro de un determinado panel | 'left' / 'right' |
+
+### Eventos
+| Nombre | Descripcion                              | Parametros                               |
+| ------ | ---------------------------------------- | ---------------------------------------- |
+| change | se lanzá cuando los elementos cambian en la lista de la derecha | array con las claves de los elementos de la lista de la derecha |
+| left-check-change | se dispara cuando el usuario final cambia el estado verificado de cualquier elemento de datos en la lista izquierda | array clave de ítems actualmente verificados, array clave de ítems cuyo estado verificado ha cambiado |
+| right-check-change | se dispara cuando el usuario final cambia el estado verificado de cualquier elemento de datos en la lista derecha. | array clave de ítems actualmente verificados, array clave de ítems cuyo estado verificado ha cambiado |
diff --git a/examples/docs/es/transition.md b/examples/docs/es/transition.md
new file mode 100644
index 0000000000..f3adc4d94b
--- /dev/null
+++ b/examples/docs/es/transition.md
@@ -0,0 +1,178 @@
+## Transiciones incorporadas
+
+Puede usar directamente las transiciones incorporadas en Element. Antes de hacerlo, por favor lea la [documentación](https://vuejs.org/v2/api/#transition).
+
+### Fade
+
+:::demo Tenemos dos efectos de fading: `el-fade-in-linear` y `el-fade-in`.
+```html
+<template>
+  <div>
+    <el-button @click="show = !show">Click Me</el-button>
+
+    <div style="display: flex; margin-top: 20px; height: 100px;">
+      <transition name="el-fade-in-linear">
+        <div v-show="show" class="transition-box">.el-fade-in-linear</div>
+      </transition>
+      <transition name="el-fade-in">
+        <div v-show="show" class="transition-box">.el-fade-in</div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+    export default {
+    data: () => ({
+      show: true
+    })
+  }
+</script>
+
+<style>
+  .transition-box {
+    margin-bottom: 10px;
+    width: 200px;
+    height: 100px;
+    border-radius: 4px;
+    background-color: #409EFF;
+    text-align: center;
+    color: #fff;
+    padding: 40px 20px;
+    box-sizing: border-box;
+    margin-right: 20px;
+  }
+</style>
+```
+:::
+
+### Zoom
+
+:::demo También tenemos zoom: `el-zoom-in-center`, `el-zoom-in-top` y `el-zoom-in-bottom`.
+```html
+<template>
+  <div>
+    <el-button @click="show2 = !show2">Click Me</el-button>
+
+    <div style="display: flex; margin-top: 20px; height: 100px;">
+      <transition name="el-zoom-in-center">
+        <div v-show="show2" class="transition-box">.el-zoom-in-center</div>
+      </transition>
+
+      <transition name="el-zoom-in-top">
+        <div v-show="show2" class="transition-box">.el-zoom-in-top</div>
+      </transition>
+
+      <transition name="el-zoom-in-bottom">
+        <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+    export default {
+    data: () => ({
+      show2: true
+    })
+  }
+</script>
+
+<style>
+  .transition-box {
+    margin-bottom: 10px;
+    width: 200px;
+    height: 100px;
+    border-radius: 4px;
+    background-color: #409EFF;
+    text-align: center;
+    color: #fff;
+    padding: 40px 20px;
+    box-sizing: border-box;
+    margin-right: 20px;
+  }
+</style>
+```
+:::
+
+
+### Colapsado
+Para efectos de colapsado usar el componente `el-collapse-transition`.
+:::demo
+```html
+<template>
+  <div>
+    <el-button @click="show3 = !show3">Click Me</el-button>
+
+    <div style="margin-top: 20px; height: 200px;">
+      <el-collapse-transition>
+        <div v-show="show3">
+          <div class="transition-box">el-collapse-transition</div>
+          <div class="transition-box">el-collapse-transition</div>
+        </div>
+      </el-collapse-transition>
+    </div>
+  </div>
+</template>
+
+<script>
+    export default {
+    data: () => ({
+      show3: true
+    })
+  }
+</script>
+
+<style>
+  .transition-box {
+    margin-bottom: 10px;
+    width: 200px;
+    height: 100px;
+    border-radius: 4px;
+    background-color: #409EFF;
+    text-align: center;
+    color: #fff;
+    padding: 40px 20px;
+    box-sizing: border-box;
+    margin-right: 20px;
+  }
+</style>
+```
+:::
+
+### On demand
+
+```js
+// fade/zoom
+import 'element-ui/lib/theme-chalk/base.css';
+// colapsar
+import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
+import Vue from 'vue'
+
+Vue.component(CollapseTransition.name, CollapseTransition)
+```
+
+<style>
+  .transition-box {
+    margin-bottom: 10px;
+    width: 200px;
+    height: 100px;
+    border-radius: 4px;
+    background-color: #409EFF;
+    text-align: center;
+    color: #fff;
+    padding: 40px 20px;
+    margin-right: 20px;
+    box-sizing: border-box;
+  }
+</style>
+
+<script>
+  module.exports = {
+    data: () => ({
+      show: true,
+      show2: true,
+      show3: true
+    })
+  }
+</script>
diff --git a/examples/docs/es/tree.md b/examples/docs/es/tree.md
new file mode 100644
index 0000000000..8c91bb2681
--- /dev/null
+++ b/examples/docs/es/tree.md
@@ -0,0 +1,1241 @@
+<style>
+  .demo-tree {
+    .leaf {
+      width: 20px;
+      background: #ddd;
+    }
+    
+    .folder {
+      width: 20px;
+      background: #888;
+    }
+    
+    .buttons {
+      margin-top: 20px;
+    }
+    
+    .filter-tree {
+      margin-top: 20px;
+    }
+    
+    .custom-tree-container {
+      display: flex;
+      margin: -24px;
+    }
+      
+    .block {
+      flex: 1;
+      padding: 8px 24px 24px;
+      
+      &:first-child {
+        border-right: solid 1px #eff2f6;
+      }
+      
+      > p {
+        text-align: center;
+        margin: 0;
+        line-height: 4;
+      }
+    }
+      
+    .custom-tree-node {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 14px;
+      padding-right: 8px;
+    }
+  }
+</style>
+
+<script>
+  const data = [{
+    label: 'Level one 1',
+    children: [{
+      label: 'Level two 1-1',
+      children: [{
+        label: 'Level three 1-1-1'
+      }]
+    }]
+  }, {
+    label: 'Level one 2',
+    children: [{
+      label: 'Level two 2-1',
+      children: [{
+        label: 'Level three 2-1-1'
+      }]
+    }, {
+      label: 'Level two 2-2',
+      children: [{
+        label: 'Level three 2-2-1'
+      }]
+    }]
+  }, {
+    label: 'Level one 3',
+    children: [{
+      label: 'Level two 3-1',
+      children: [{
+        label: 'Level three 3-1-1'
+      }]
+    }, {
+      label: 'Level two 3-2',
+      children: [{
+        label: 'Level three 3-2-1'
+      }]
+    }]
+  }];
+
+  const data2 = [{
+    id: 1,
+    label: 'Level one 1',
+    children: [{
+      id: 4,
+      label: 'Level two 1-1',
+      children: [{
+        id: 9,
+        label: 'Level three 1-1-1'
+      }, {
+        id: 10,
+        label: 'Level three 1-1-2'
+      }]
+    }]
+  }, {
+    id: 2,
+    label: 'Level one 2',
+    children: [{
+      id: 5,
+      label: 'Level two 2-1'
+    }, {
+      id: 6,
+      label: 'Level two 2-2'
+    }]
+  }, {
+    id: 3,
+    label: 'Level one 3',
+    children: [{
+      id: 7,
+      label: 'Level two 3-1'
+    }, {
+      id: 8,
+      label: 'Level two 3-2'
+    }]
+  }];
+
+  const data3 = [{
+    id: 1,
+    label: 'Level one 1',
+    children: [{
+      id: 3,
+      label: 'Level two 2-1',
+      children: [{
+        id: 4,
+        label: 'Level three 3-1-1'
+      }, {
+        id: 5,
+        label: 'Level three 3-1-2',
+        disabled: true
+      }]
+    }, {
+      id: 2,
+      label: 'Level two 2-2',
+      disabled: true,
+      children: [{
+        id: 6,
+        label: 'Level three 3-2-1'
+      }, {
+        id: 7,
+        label: 'Level three 3-2-2',
+        disabled: true
+      }]
+    }]
+  }];
+
+  const data6 = [{
+    label: 'Level one 1',
+    children: [{
+      label: 'Level two 1-1',
+      children: [{
+        label: 'Level three 1-1-1'
+      }]
+    }]
+  }, {
+    label: 'Level one 2',
+    children: [{
+      label: 'Level two 2-1',
+      children: [{
+        label: 'Level three 2-1-1'
+      }]
+    }, {
+      label: 'Level two 2-2',
+      children: [{
+        label: 'Level three 2-2-1'
+      }]
+    }]
+  }, {
+    label: 'Level one 3',
+    children: [{
+      label: 'Level two 3-1',
+      children: [{
+        label: 'Level three 3-1-1'
+      }]
+    }, {
+      label: 'Level two 3-2',
+      children: [{
+        label: 'Level three 3-2-1'
+      }]
+    }]
+  }];
+
+  let id = 1000;
+
+  const regions = [{
+    'name': 'region1'
+  }, {
+    'name': 'region2'
+  }];
+
+  let count = 1;
+
+  const props = {
+    label: 'name',
+    children: 'zones'
+  };
+
+  const props1 = {
+    label: 'name',
+    children: 'zones',
+    isLeaf: 'leaf'
+  };
+
+  const defaultProps = {
+    children: 'children',
+    label: 'label'
+  };
+
+  export default {
+    watch: {
+      filterText(val) {
+        this.$refs.tree2.filter(val);
+      }
+    },
+    
+    methods: {
+      handleCheckChange(data, checked, indeterminate) {
+        console.log(data, checked, indeterminate);
+      },
+      handleNodeClick(data) {
+        console.log(data);
+      },
+      handleDragStart(node, ev) {
+        console.log('drag start', node);
+      },
+      handleDragEnter(draggingNode, dropNode, ev) {
+        console.log('tree drag enter: ', dropNode.label);
+      },
+      handleDragLeave(draggingNode, dropNode, ev) {
+        console.log('tree drag leave: ', dropNode.label);
+      },
+      handleDragOver(draggingNode, dropNode, ev) {
+        console.log('tree drag over: ', dropNode.label);
+      },
+      handleDragEnd(draggingNode, dropNode, dropType, ev) {
+        console.log('tree drag end: ', dropNode && dropNode.label, dropType);
+      },
+      handleDrop(draggingNode, dropNode, dropType, ev) {
+        console.log('tree drop: ', dropNode.label, dropType);
+      },
+      allowDrop(draggingNode, dropNode, type) {
+        if (dropNode.data.label === 'Level two 3-1') {
+          return type !== 'inner';
+        } else {
+          return true;
+        }
+      },
+      allowDrag(draggingNode) {
+        return draggingNode.data.label.indexOf('Level three 3-1-1') === -1;
+      },
+      loadNode(node, resolve) {
+        if (node.level === 0) {
+          return resolve([{ name: 'Root1' }, { name: 'Root2' }]);
+        }
+        if (node.level > 3) return resolve([]);
+        var hasChild;
+        if (node.data.name === 'region1') {
+          hasChild = true;
+        } else if (node.data.name === 'region2') {
+          hasChild = false;
+        } else {
+          hasChild = Math.random() > 0.5;
+        }
+    
+        setTimeout(function() {
+          let data;
+          if (hasChild) {
+            data = [{
+              name: 'zone' + count++
+            }, {
+              name: 'zone' + count++
+            }];
+          } else {
+            data = [];
+          }
+    
+          resolve(data);
+        }, 500);
+      },
+      loadNode1(node, resolve) {
+        if (node.level === 0) {
+          return resolve([{ name: 'region' }]);
+        }
+        if (node.level > 1) return resolve([]);
+    
+        setTimeout(() => {
+          const data = [{
+            name: 'leaf',
+            leaf: true
+          }, {
+            name: 'zone'
+          }];
+    
+          resolve(data);
+        }, 500);
+      },
+      getCheckedNodes() {
+        console.log(this.$refs.tree.getCheckedNodes());
+      },
+      getCheckedKeys() {
+        console.log(this.$refs.tree.getCheckedKeys());
+      },
+      setCheckedNodes() {
+        this.$refs.tree.setCheckedNodes([
+          {
+            id: 5,
+            label: 'Level two 2-1'
+          },
+          {
+            id: 9,
+            label: 'Level three 1-1-1'
+          }
+        ]);
+      },
+      setCheckedKeys() {
+        this.$refs.tree.setCheckedKeys([3]);
+      },
+      resetChecked() {
+        this.$refs.tree.setCheckedKeys([]);
+      },
+      append(data) {
+        const newChild = { id: id++, label: 'testtest', children: [] };
+        if (!data.children) {
+          this.$set(data, 'children', []);
+        }
+        data.children.push(newChild);
+      },
+    
+      remove(node, data) {
+        const parent = node.parent;
+        const children = parent.data.children || parent.data;
+        const index = children.findIndex(d => d.id === data.id);
+        children.splice(index, 1);
+      },
+    
+      renderContent(h, { node, data, store }) {
+        return (
+          <span class="custom-tree-node">
+            <span>{node.label}</span>
+            <span>
+              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
+              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
+            </span>
+          </span>);
+      },
+    
+      filterNode(value, data) {
+        if (!value) return true;
+        return data.label.indexOf(value) !== -1;
+      }
+    },
+    
+    data() {
+      return {
+        data,
+        data2,
+        data3,
+        data4: JSON.parse(JSON.stringify(data2)),
+        data5: JSON.parse(JSON.stringify(data2)),
+        data6,
+        regions,
+        defaultProps,
+        props,
+        props1,
+        defaultCheckedKeys: [5],
+        defaultExpandedKeys: [2, 3],
+        filterText: ''
+      };
+    }
+  };
+</script>
+
+## Tree
+
+Muestra un conjunto de datos jerárquicos.
+
+### Uso básico
+
+Estructura básica de árbol.
+
+:::demo
+```html
+<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+
+<script>
+  export default {
+    data() {
+      return {
+        data: [{
+          label: 'Level one 1',
+          children: [{
+            label: 'Level two 1-1',
+            children: [{
+              label: 'Level three 1-1-1'
+            }]
+          }]
+        }, {
+          label: 'Level one 2',
+          children: [{
+            label: 'Level two 2-1',
+            children: [{
+              label: 'Level three 2-1-1'
+            }]
+          }, {
+            label: 'Level two 2-2',
+            children: [{
+              label: 'Level three 2-2-1'
+            }]
+          }]
+        }, {
+          label: 'Level one 3',
+          children: [{
+            label: 'Level two 3-1',
+            children: [{
+              label: 'Level three 3-1-1'
+            }]
+          }, {
+            label: 'Level two 3-2',
+            children: [{
+              label: 'Level three 3-2-1'
+            }]
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
+      };
+    },
+    methods: {
+      handleNodeClick(data) {
+        console.log(data);
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Seleccionable
+
+Usado para la selección de nodos.
+
+:::demo Este ejemplo también muestra como cargar los datos de forma asíncrona.
+```html
+<el-tree
+  :props="props"
+  :load="loadNode"
+  lazy
+  show-checkbox
+  @check-change="handleCheckChange">
+</el-tree>
+
+<script>
+  export default {
+    data() {
+      return {
+        props: {
+          label: 'name',
+          children: 'zones'
+        },
+        count: 1
+      };
+    },
+    methods: {
+      handleCheckChange(data, checked, indeterminate) {
+        console.log(data, checked, indeterminate);
+      },
+      handleNodeClick(data) {
+        console.log(data);
+      },
+      loadNode(node, resolve) {
+        if (node.level === 0) {
+          return resolve([{ name: 'Root1' }, { name: 'Root2' }]);
+        }
+        if (node.level > 3) return resolve([]);
+
+        var hasChild;
+        if (node.data.name === 'region1') {
+          hasChild = true;
+        } else if (node.data.name === 'region2') {
+          hasChild = false;
+        } else {
+          hasChild = Math.random() > 0.5;
+        }
+
+        setTimeout(() => {
+          var data;
+          if (hasChild) {
+            data = [{
+              name: 'zone' + this.count++
+            }, {
+              name: 'zone' + this.count++
+            }];
+          } else {
+            data = [];
+          }
+
+          resolve(data);
+        }, 500);
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Nodos hoja en modo perezoso
+
+:::demo Los datos de un nodo no son cargados hasta que no es pinchado, así que el árbol no puede predecir si es una hoja. Por eso a cada nodo se le añade el botón de desplegar, y si el nodo es una hoja el botón desaparecerá al pinchar en él. También puede decirle al árbol que el nodo es una hoja de antemano, y así evita que muestre el botón de desplegar.
+```html
+<el-tree
+  :props="props1"
+  :load="loadNode1"
+  lazy
+  show-checkbox>
+</el-tree>
+
+<script>
+  export default {
+    data() {
+      return {
+        props1: {
+          label: 'name',
+          children: 'zones',
+          isLeaf: 'leaf'
+        },
+      };
+    },
+    methods: {
+      loadNode1(node, resolve) {
+        if (node.level === 0) {
+          return resolve([{ name: 'region' }]);
+        }
+        if (node.level > 1) return resolve([]);
+
+        setTimeout(() => {
+          const data = [{
+            name: 'leaf',
+            leaf: true
+          }, {
+            name: 'zone'
+          }];
+
+          resolve(data);
+        }, 500);
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Checkbox desactivados
+
+El checkbox de un nodo se puede poner como desactivado.
+
+:::demo En el ejemplo, la propiedad 'disabled' se declara en defaultProps, y algunos nodos se ponen como 'disabled:true'. Los checkboxes correspondientes son desactivados y no se pueden pinchar.
+```html
+<el-tree
+  :data="data3"
+  :props="defaultProps"
+  show-checkbox
+  @check-change="handleCheckChange">
+</el-tree>
+
+<script>
+  export default {
+    data() {
+      return {
+        data3: [{
+          id: 1,
+          label: 'Level one 1',
+          children: [{
+            id: 3,
+            label: 'Level two 2-1',
+            children: [{
+              id: 4,
+              label: 'Level three 3-1-1'
+            }, {
+              id: 5,
+              label: 'Level three 3-1-2',
+              disabled: true
+            }]
+          }, {
+            id: 2,
+            label: 'Level two 2-2',
+            disabled: true,
+            children: [{
+              id: 6,
+              label: 'Level three 3-2-1'
+            }, {
+              id: 7,
+              label: 'Level three 3-2-2',
+              disabled: true
+            }]
+          }]
+        }],
+        defaultProps: {
+            children: 'children',
+            label: 'label',
+            disabled: 'disabled',
+        },
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Desplegado o seleccionado por defecto
+Los nodos pueden estar desplegados o seleccionados por defecto.
+
+:::demo Utilice `default-expanded-keys` y `default-checked-keys` para establecer los nodos desplegados y seleccionados respectivamente. Tenga en cuenta que para que funcione es necesario que tengan `node-key`. Su valor es el nombre de una clave en el objeto data, y el valor de la clave debe ser único en todo el árbol.
+```html
+<el-tree
+  :data="data2"
+  show-checkbox
+  node-key="id"
+  :default-expanded-keys="[2, 3]"
+  :default-checked-keys="[5]"
+  :props="defaultProps">
+</el-tree>
+
+<script>
+  export default {
+    data() {
+      return {
+        data2: [{
+          id: 1,
+          label: 'Level one 1',
+          children: [{
+            id: 4,
+            label: 'Level two 1-1',
+            children: [{
+              id: 9,
+              label: 'Level three 1-1-1'
+            }, {
+              id: 10,
+              label: 'Level three 1-1-2'
+            }]
+          }]
+        }, {
+          id: 2,
+          label: 'Level one 2',
+          children: [{
+            id: 5,
+            label: 'Level two 2-1'
+          }, {
+            id: 6,
+            label: 'Level two 2-2'
+          }]
+        }, {
+          id: 3,
+          label: 'Level one 3',
+          children: [{
+            id: 7,
+            label: 'Level two 3-1'
+          }, {
+            id: 8,
+            label: 'Level two 3-2'
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Seleccionando nodos
+
+:::demo Este ejemplo muestra como establecer y leer nodos seleccionados. Esto se puede hacer por nodos o por claves. Si lo hace por claves el atributo `node-key` es necesario.
+```html
+<el-tree
+  :data="data2"
+  show-checkbox
+  default-expand-all
+  node-key="id"
+  ref="tree"
+  highlight-current
+  :props="defaultProps">
+</el-tree>
+
+<div class="buttons">
+  <el-button @click="getCheckedNodes">get by node</el-button>
+  <el-button @click="getCheckedKeys">get by key</el-button>
+  <el-button @click="setCheckedNodes">set by node</el-button>
+  <el-button @click="setCheckedKeys">set by key</el-button>
+  <el-button @click="resetChecked">reset</el-button>
+</div>
+
+<script>
+  export default {
+    methods: {
+      getCheckedNodes() {
+        console.log(this.$refs.tree.getCheckedNodes());
+      },
+      getCheckedKeys() {
+        console.log(this.$refs.tree.getCheckedKeys());
+      },
+      setCheckedNodes() {
+        this.$refs.tree.setCheckedNodes([{
+          id: 5,
+          label: 'Level two 2-1'
+        }, {
+          id: 9,
+          label: 'Level three 1-1-1'
+        }]);
+      },
+      setCheckedKeys() {
+        this.$refs.tree.setCheckedKeys([3]);
+      },
+      resetChecked() {
+        this.$refs.tree.setCheckedKeys([]);
+      }
+    },
+
+    data() {
+      return {
+        data2: [{
+          id: 1,
+          label: 'Level one 1',
+          children: [{
+            id: 4,
+            label: 'Level two 1-1',
+            children: [{
+              id: 9,
+              label: 'Level three 1-1-1'
+            }, {
+              id: 10,
+              label: 'Level three 1-1-2'
+            }]
+          }]
+        }, {
+          id: 2,
+          label: 'Level one 2',
+          children: [{
+            id: 5,
+            label: 'Level two 2-1'
+          }, {
+            id: 6,
+            label: 'Level two 2-2'
+          }]
+        }, {
+          id: 3,
+          label: 'Level one 3',
+          children: [{
+            id: 7,
+            label: 'Level two 3-1'
+          }, {
+            id: 8,
+            label: 'Level two 3-2'
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Contenido personalizado en los nodos
+El contenido de los nodos puede ser personalizado, así que puede añadir iconos y botones a su gusto.
+
+:::demo There are two ways to customize template for tree nodes: `render-content` and scoped slot. Utilice `render-content` para asignar una función de renderizado que devuelve el contenido del árbol de nodos. Mire la documentación de node para una introducción detallada a las funciondes de renderizado. If you prefer scoped slot, you'll have access to `node` and `data` in the scope, standing for the TreeNode object and node data of the current node respectively. Ten en cuenta que este ejemplo no puede ejecutarse en jsfiddle ya que no soporta la sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias relevantes están configuradas correctamente.
+```html
+<div class="custom-tree-container">
+  <div class="block">
+    <p>Using render-content</p>
+    <el-tree
+      :data="data4"
+      show-checkbox
+      node-key="id"
+      default-expand-all
+      :expand-on-click-node="false"
+      :render-content="renderContent">
+    </el-tree>
+  </div>
+  <div class="block">
+    <p>Using scoped slot</p>
+    <el-tree
+      :data="data5"
+      show-checkbox
+      node-key="id"
+      default-expand-all
+      :expand-on-click-node="false">
+      <span class="custom-tree-node" slot-scope="{ node, data }">
+        <span>{{ node.label }}</span>
+        <span>
+          <el-button
+            type="text"
+            size="mini"
+            @click="() => append(data)">
+            Append
+          </el-button>
+          <el-button
+            type="text"
+            size="mini"
+            @click="() => remove(node, data)">
+            Delete
+          </el-button>
+        </span>
+      </span>
+    </el-tree>
+  </div>
+</div>
+
+<script>
+  let id = 1000;
+
+  export default {
+    data() {
+      const data = [{
+        id: 1,
+        label: 'Level one 1',
+        children: [{
+          id: 4,
+          label: 'Level two 1-1',
+          children: [{
+            id: 9,
+            label: 'Level three 1-1-1'
+          }, {
+            id: 10,
+            label: 'Level three 1-1-2'
+          }]
+        }]
+      }, {
+        id: 2,
+        label: 'Level one 2',
+        children: [{
+          id: 5,
+          label: 'Level two 2-1'
+        }, {
+          id: 6,
+          label: 'Level two 2-2'
+        }]
+      }, {
+        id: 3,
+        label: 'Level one 3',
+        children: [{
+          id: 7,
+          label: 'Level two 3-1'
+        }, {
+          id: 8,
+          label: 'Level two 3-2'
+        }]
+      }];
+      return {
+        data4: JSON.parse(JSON.stringify(data)),
+        data5: JSON.parse(JSON.stringify(data))
+      }
+    },
+
+    methods: {
+      append(data) {
+        const newChild = { id: id++, label: 'testtest', children: [] };
+        if (!data.children) {
+          this.$set(data, 'children', []);
+        }
+        data.children.push(newChild);
+      },
+
+      remove(node, data) {
+        const parent = node.parent;
+        const children = parent.data.children || parent.data;
+        const index = children.findIndex(d => d.id === data.id);
+        children.splice(index, 1);
+      },
+
+      renderContent(h, { node, data, store }) {
+        return (
+          <span class="custom-tree-node">
+            <span>{node.label}</span>
+            <span>
+              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
+              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
+            </span>
+          </span>);
+      }
+    }
+  };
+</script>
+
+<style>
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+  }
+</style>
+```
+:::
+
+### Filtrado de nodos
+Los nodos del árbol se pueden filtrar.
+
+:::demo Invoque el método `filter` de la instancia de Tree para filtrar los nodos. Su parametro es la palabra de filtrado. Tenga en cuenta que para que funcione es necesario `filter-node-method`, y su valor el método de filtrado.
+```html
+<el-input
+  placeholder="Filter keyword"
+  v-model="filterText">
+</el-input>
+
+<el-tree
+  class="filter-tree"
+  :data="data2"
+  :props="defaultProps"
+  default-expand-all
+  :filter-node-method="filterNode"
+  ref="tree2">
+</el-tree>
+
+<script>
+  export default {
+    watch: {
+      filterText(val) {
+        this.$refs.tree2.filter(val);
+      }
+    },
+
+    methods: {
+      filterNode(value, data) {
+        if (!value) return true;
+        return data.label.indexOf(value) !== -1;
+      }
+    },
+
+    data() {
+      return {
+        filterText: '',
+        data2: [{
+          id: 1,
+          label: 'Level one 1',
+          children: [{
+            id: 4,
+            label: 'Level two 1-1',
+            children: [{
+              id: 9,
+              label: 'Level three 1-1-1'
+            }, {
+              id: 10,
+              label: 'Level three 1-1-2'
+            }]
+          }]
+        }, {
+          id: 2,
+          label: 'Level one 2',
+          children: [{
+            id: 5,
+            label: 'Level two 2-1'
+          }, {
+            id: 6,
+            label: 'Level two 2-2'
+          }]
+        }, {
+          id: 3,
+          label: 'Level one 3',
+          children: [{
+            id: 7,
+            label: 'Level two 3-1'
+          }, {
+            id: 8,
+            label: 'Level two 3-2'
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
+      };
+    }
+  };
+</script>
+```
+:::
+
+### Acordeón
+
+Solo puede ser expandido un nodo del mismo nivel a la vez.
+
+:::demo
+```html
+<el-tree
+  :data="data"
+  :props="defaultProps"
+  accordion
+  @node-click="handleNodeClick">
+</el-tree>
+
+<script>
+  export default {
+    data() {
+      return {
+        data: [{
+          label: 'Level one 1',
+          children: [{
+            label: 'Level two 1-1',
+            children: [{
+              label: 'Level three 1-1-1'
+            }]
+          }]
+        }, {
+          label: 'Level one 2',
+          children: [{
+            label: 'Level two 2-1',
+            children: [{
+              label: 'Level three 2-1-1'
+            }]
+          }, {
+            label: 'Level two 2-2',
+            children: [{
+              label: 'Level three 2-2-1'
+            }]
+          }]
+        }, {
+          label: 'Level one 3',
+          children: [{
+            label: 'Level two 3-1',
+            children: [{
+              label: 'Level three 3-1-1'
+            }]
+          }, {
+            label: 'Level two 3-2',
+            children: [{
+              label: 'Level three 3-2-1'
+            }]
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
+      };
+    },
+    methods: {
+      handleNodeClick(data) {
+        console.log(data);
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Draggable
+
+Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` .
+
+:::demo
+```html
+<el-tree
+  :data="data6"
+  node-key="id"
+  default-expand-all
+  @node-drag-start="handleDragStart"
+  @node-drag-enter="handleDragEnter"
+  @node-drag-leave="handleDragLeave"
+  @node-drag-over="handleDragOver"
+  @node-drag-end="handleDragEnd"
+  @node-drop="handleDrop"
+  draggable
+  :allow-drop="allowDrop"
+  :allow-drag="allowDrag">
+</el-tree>
+
+<script>
+  export default {
+    data() {
+      return {
+        data6: [{
+          label: 'Level one 1',
+          children: [{
+            label: 'Level two 1-1',
+            children: [{
+              label: 'Level three 1-1-1'
+            }]
+          }]
+        }, {
+          label: 'Level one 2',
+          children: [{
+            label: 'Level two 2-1',
+            children: [{
+              label: 'Level three 2-1-1'
+            }]
+          }, {
+            label: 'Level two 2-2',
+            children: [{
+              label: 'Level three 2-2-1'
+            }]
+          }]
+        }, {
+          label: 'Level one 3',
+          children: [{
+            label: 'Level two 3-1',
+            children: [{
+              label: 'Level three 3-1-1'
+            }]
+          }, {
+            label: 'Level two 3-2',
+            children: [{
+              label: 'Level three 3-2-1'
+            }]
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
+      };
+    },
+    methods: {
+      handleDragStart(node, ev) {
+        console.log('drag start', node);
+      },
+      handleDragEnter(draggingNode, dropNode, ev) {
+        console.log('tree drag enter: ', dropNode.label);
+      },
+      handleDragLeave(draggingNode, dropNode, ev) {
+        console.log('tree drag leave: ', dropNode.label);
+      },
+      handleDragOver(draggingNode, dropNode, ev) {
+        console.log('tree drag over: ', dropNode.label);
+      },
+      handleDragEnd(draggingNode, dropNode, dropType, ev) {
+        console.log('tree drag end: ', dropNode && dropNode.label, dropType);
+      },
+      handleDrop(draggingNode, dropNode, dropType, ev) {
+        console.log('tree drop: ', dropNode.label, dropType);
+      },
+      allowDrop(draggingNode, dropNode, type) {
+        if (dropNode.data.label === 'Level two 3-1') {
+          return type !== 'inner';
+        } else {
+          return true;
+        }
+      },
+      allowDrag(draggingNode) {
+        return draggingNode.data.label.indexOf('Level three 3-1-1') === -1;
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Atributos
+| Atributo              | Descripción                              | Tipo                              | Valores aceptados | Por defecto |
+| --------------------- | ---------------------------------------- | --------------------------------- | ----------------- | ----------- |
+| data                  | Datos del árbol                          | array                             | —                 | —           |
+| empty-text            | Texto a mostrar cuando data es void      | string                            | —                 | —           |
+| node-key              | Identificador único en todo el árbol para los nodos | string                            | —                 | —           |
+| props                 | Opciones de configuración                | object                            | —                 | —           |
+| render-after-expand   | si se mostrarán los nodos hijo sólo después de que se desglose por primera vez un nodo padre | boolean                           | —                 | true        |
+| load                  | Método para cargar los datos de subárboles | function(node, resolve)           | —                 | —           |
+| render-content        | Función de renderizado para los nodos    | Function(h, { node, data, store } | —                 | —           |
+| highlight-current     | Si el nodo actual está resaltado         | boolean                           | —                 | false       |
+| default-expand-all    | Expandir todos los nodos por defecto     | boolean                           | —                 | false       |
+| expand-on-click-node  | Si expandir o contraer un nodo al pincharlo, si es false solo se hará al pinchar en la flecha | boolean | — | true |
+| check-on-click-node   | si marcar o desmarcar el nodo al hacer clic en el. Si es `false`, el nodo sólo se puede marcar o desmarcar haciendo clic en la casilla de verificación. | boolean | — | false |
+| auto-expand-parent    | Expandir un nodo padre si el hijo está seleccionado | boolean                           | —                 | true        |
+| default-expanded-keys | Array de claves de los nodos expandidos inicialmente | array                             | —                 | —           |
+| show-checkbox         | Si un nodo es seleccionable              | boolean                           | —                 | false       |
+| check-strictly        | El estado de seleccion de un nodo no afecta a sus padres o hijos, cuando `show-checkbox` es `true` | boolean                           | —                 | false       |
+| default-checked-keys  | Array con claves de los nodos seleccionados inicialmente | array                             | —                 | —           |
+| filter-node-method    | Esta función se ejecutará en cada nodo cuando se use el método filtrtar, si devuelve `false` el nodo se oculta | Function(value, data, node)       | —                 | —           |
+| accordion             | Si solo un nodo de cada nivel puede expandirse a la vez | boolean                           | —                 | false       |
+| indent                | Indentación horizontal de los nodos en niveles adyacentes, en pixeles | number                            | —                 | 16          |
+| draggable             | si se habilita la función de drag and drop en los nodos | boolean            | —    | false |
+| allow-drag            | esta función se ejecutará antes de arrastrar un nodo. si devuelve `false`, el nodo no puede ser arrastrado. | Function(nodo) | —  | —  |
+| allow-drop            | esta función se ejecutará al arrastrar y soltar un nodo. si devuelve false, el nodo arrastrando no se puede soltar en el nodo destino. `type` tiene tres valores posibles: 'prev' (insertar el nodo de arrastre antes del nodo de destino), 'inner' (insertar el nodo de arrastre en el nodo de destino) y 'next' (insertar el nodo de arrastre después del nodo de destino) | Function(Nodoquesearrastra, Nododestino, type) | —    | —     |
+
+### props
+| Atributo | Descripción                              | Tipo                          | Valores aceptados | Por defecto |
+| -------- | ---------------------------------------- | ----------------------------- | ----------------- | ----------- |
+| label    | Especifica que clave del objecto nodo se utilizará como label | string, function(data, node)  | —                 | —           |
+| children | Especifica que objeto del nodo se utiliza como subárbol | string | —                 | —           |
+| isLeaf   | Especifica si el nodo es una hoja, sólo funciona cuando lazy load está activado | boolean, function(datos, nodo) | —                 | —           |
+
+### Métodos
+`Tree` tiene los siguientes métodos, que devuelven el array de nodos seleccionados.
+| Método            | Descripción                              | Parámetros                               |
+| ----------------- | ---------------------------------------- | ---------------------------------------- |
+| filter            | Filtra los nodos del árbol, los nodos filtrados estarán ocultos | Acepta un parámetro que será usado como primer parámetro para filter-node-method |
+| updateKeyChildren | Asocia un nuevo dato al nodo, solo funciona si `node-key` está asignado | (key, data)Acepta dos parámetros: 1. clave del nodo 2. nuevo dato |
+| getCheckedNodes   | si el nodo puede ser seleccionado (`show-checkbox` es `true`), devuelve el array de nodos actualmente seleccionada. | (leafOnly, includeHalfChecked) Acepta dos parámetros de tipo booleano: 1. El valor por defecto es `false`. Si el parámetro es `true`, sólo devuelve el array de subnodos actualmente seleccionado. 2. El valor por defecto es `false`. Si el parámetro es `true`, el valor de retorno contiene nodos halfchecked. |
+| setCheckedNodes   | Establece algunos nodos como seleccionados, solo funciona cuando `node-key` está asignado | Un array de nodos a seleccionar          |
+| getCheckedKeys    | Si los nodos pueden ser seleccionados (`show-checkbox` es `true`), devuelve un array con las claves de los nodos seleccionados | (leafOnly) Acepta un booleano que por defecto es `false`. |
+| setCheckedKeys    | Establece algunos nodos como seleccionados, solo si `node-key` está asignado | (keys, leafOnly) Acepta dos parametros: 1. un array de claves 2. un booleano cuyo valor por defecto es `false`. Si el parámetro es `true`, solo devuelve los nodos seleccionados |
+| setChecked        | Establece si un nodo está seleccionado, solo funciona si `node-key` esta asignado | (key/data, checked, deep) Acepta tres parámetros: 1. la clave o dato del nodo a ser seleccionado 2. un booleano que indica si un nodo el nodo estará seleccionado 3. un booleanoque indica si se hará en profundidad |
+| getHalfCheckedNodes | Si el nodo puede ser seleccionado (`show-checkbox` es `true`), devuelve la mitad del array de nodos actualmente seleccionada. | - |
+| getHalfCheckedKeys | Si el nodo puede ser seleccionado (`show-checkbox` es `true`), devuelve la mitad del array de claves del nodo actualmente seleccionado. | - |
+| getCurrentKey     | devuelve la clave del nodo resaltado actualmente (null si no hay ninguno) | —                                        |
+| getCurrentNode    | devuelve el nodo resaltado (null si no hay ninguno) | —                                        |
+| setCurrentKey     | establece el nodo resaltado por la clave, solo funciona si `node-key` está asignado | (key) la clave del nodo a ser resaltado. If `null`, cancel the currently highlighted node  |
+| setCurrentNode    | establece el nodo resaltado, solo funciona si `node-key` está asignado | (node) nodo a ser resaltado              |
+| getNode         | devuelve el nodo por el dato o la clave | (data) los datos o clave del nodo |
+| remove          | elimina un nodo, solo funciona si `node-key` está asignado  | (data) los datos del nodo o nodo a borrar |
+| append          | añadir un nodo hijo a un nodo determinado del árbol | (data, parentNode) 1. los datos del nodo hijo que se añadirán 2. los datos del nodo padre, clave o nodo |
+| insertBefore    | insertar un nodo antes de un nodo dado en el árbol | (data, refNode) 1. Datos del nodo que se insertarán 2. Datos del nodo de referencia, clave o nodo |
+| insertAfter     | insertar un nodo después de un nodo dado en el árbol | (data, refNode) 1. Datos del nodo que se insertarán 2. Datos del nodo de referencia, clave o nodo |
+
+### Eventos
+| Nombre del evento | Descripción                              | Parámetros                               |
+| ----------------- | ---------------------------------------- | ---------------------------------------- |
+| node-click        | se lanza cuando un nodo es pinchado      | tres parámetros: el objeto del nodo seleccionado, propiedad `node` de TreeNode y el TreeNode en si |
+| node-contextmenu     | se lanza cuando en un nodo se hace click con el boton derecho | cuatro parámetros: evento, el objeto nodo sobre el que se hizo click, la propiedad `node`  del TreeNode, el TreeNode en si mismo |
+| check-change      | se lanza cuando el estado de selección del nodo cambia | tres parámetros: objeto nodo que se corresponde con el que ha cambiado, booleano que dice si esta seleccionado, booleano que dice si el nodo tiene hijos seleccionados |
+| check   | se activa al hacer clic en la casilla de selección de un nodo | dos parámetros: objeto de nodo correspondiente al nodo que se marca/desmarca, objeto de status de árbol verificado que tiene cuatro puntales: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys |
+| current-change    | cambia cuando el nodo actual cambia      | dos parámetros: objeto nodo que se corresponde al nodo actual y propiedad `node` del TreeNode |
+| node-expand       | se lanza cuando el nodo actual se abre   | tres parámetros: el objeto del nodo abierto, propiedad `node` de TreeNode y el TreeNode en si |
+| node-collapse     | se lanza cuando el nodo actual se cierra | tres parámetros: el objeto del nodo cerrado, propiedad `node` de TreeNode y el TreeNode en si |
+| node-drag-start | se activa cuando se inicia el arrastre | dos parametros: el objeto del nodo que se arrastrara, evento. |
+| node-drag-enter | se desencadena cuando el nodo de arrastre entra en otro nodo | tres parametros: objeto del nodo que se arrastra, objeto del nodo en el que entra, evento. |
+| node-drag-leave | se desencadena cuando el nodo de arrastre sale de un nodo | tres parametros: objeto del nodo que se arrastra, objeto del nodo del cual se sale, evento. |
+| node-drag-over | se activa cuando se arrastra sobre un nodo (como el evento mouseover) | tres parametros: objeto del nodo que se arrastra, objeto del nodo sobre el que esta el arrastre, evento. |
+| node-drag-end  | se activa cuando se termina de arrastrar | cuatro parametros: objeto del nodo que se arrastra, objeto del nodo que corresponde al final del arrastre (puede ser `undefined` ), tipo de integracion (antes (before), despues (after), dentro (inner) ), evento. |
+| node-drop  | después de soltar el nodo de arrastre | cuatro parametros: objeto del nodo que se esta arrastrando, objeto del nodo sobre el que se esta soltando, tipo de integracion (antes (before), despues (after), dentro (inner) ), evento. |
+
+### Scoped Slot
+| Name | Description |
+|------|--------|
+| — | Contenido personalizado para nodos de tree. El parámetro del scope es { node, data }. |
\ No newline at end of file
diff --git a/examples/docs/es/typography.md b/examples/docs/es/typography.md
new file mode 100644
index 0000000000..342de2f93a
--- /dev/null
+++ b/examples/docs/es/typography.md
@@ -0,0 +1,151 @@
+<style>
+  .demo-typo-box {
+    height: 200px;
+    width: 200px;
+    position: relative;
+    border: 1px solid #eaeefb;
+    font-size: 40px;
+    color: #1f2d3d;
+    text-align: center;
+    line-height: 162px;
+    padding-bottom: 36px;
+    box-sizing: border-box;
+    display: inline-block;
+    margin-right: 17px;
+    border-radius: 4px;
+    
+    .name {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: 35px;
+      border-top: 1px solid #eaeefb;
+      font-size: 14px;
+      color: #8492a6;
+      line-height: 35px;
+      text-align: left;
+      text-indent: 10px;
+      font-family: 'Helvetica Neue';
+    }
+  }
+  .demo-typo-size {
+    .h1 {
+      font-size: 20px;
+    }
+    .h2 {
+      font-size: 18px;
+    }
+    .h3 {
+      font-size: 16px;
+    }
+    .text-regular {
+      font-size: 14px;
+    }
+    .text-small {
+      font-size: 13px;
+    }
+    .text-smaller {
+      font-size: 12px;
+    }
+    .color-dark-light {
+      color: #99a9bf;
+    }
+  }
+  .typo-PingFang {
+    font-family: 'PingFang SC';
+  }
+  .typo-Hiragino {
+    font-family: 'Hiragino Sans GB';
+  }
+  .typo-Microsoft {
+    font-family: 'Microsoft YaHei';
+  }
+  /* 英文 */
+  .typo-Helvetica-Neue {
+    font-family: 'Helvetica Neue';
+  }
+  .typo-Helvetica {
+    font-family: 'Helvetica';
+  }
+  .typo-Arial {
+    font-family: 'Arial';
+  }
+</style>
+
+## Tipografía
+
+Creamos una convención de fuentes para asegurar la mejor presentación en diferentes plataformas.
+
+### Fuente en chino
+
+<div class="demo-typo-box typo-PingFang">
+  和畅惠风
+  <div class="name">PingFang SC</div>
+</div>
+<div class="demo-typo-box typo-Hiragino">
+  和畅惠风
+  <div class="name">Hiragino Sans GB</div>
+</div>
+<div class="demo-typo-box typo-Microsoft">
+  和畅惠风
+  <div class="name">Microsoft YaHei</div>
+</div>
+
+### Inglés / Fuente Numérica
+
+<div class="demo-typo-box typo-Helvetica-neue">
+  RGag
+  <div class="name">Helvetica Neue</div>
+</div>
+<div class="demo-typo-box typo-Helvetica">
+  RGag
+  <div class="name">Helvetica</div>
+</div>
+<div class="demo-typo-box typo-Arial">
+  RGag
+  <div class="name">Arial</div>
+</div>
+
+### Font-family
+
+```css
+font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+```
+
+### Convención de fuentes
+
+<table class="demo-typo-size">
+  <tbody>
+    <tr>
+      <td class="h1">Main Title</td>
+      <td class="h1">Build with Element</td>
+      <td class="color-dark-light">20px  Extra large</td>
+    </tr>
+    <tr>
+      <td class="h2">Title</td>
+      <td class="h2">Build with Element</td>
+      <td class="color-dark-light">18px large</td>
+    </tr>
+    <tr>
+      <td class="h3">Small Title</td>
+      <td class="h3">Build with Element</td>
+      <td class="color-dark-light">16px Medium</td>
+    </tr>
+    <tr>
+      <td class="text-regular">Body</td>
+      <td class="text-regular">Build with Element</td>
+      <td class="color-dark-light">14px Small</td>
+    </tr>
+    <tr>
+      <td class="text-small">Body (small)</td>
+      <td class="text-small">Build with Element</td>
+      <td class="color-dark-light">13px Extra Small</td>
+    </tr>
+    <tr>
+      <td class="text-smaller">Supplementary text</td>
+      <td class="text-smaller">Build with Element</td>
+      <td class="color-dark-light">12px Extra Extra Small</td>
+    </tr>
+  </tbody>
+</table>
+
diff --git a/examples/docs/es/upload.md b/examples/docs/es/upload.md
new file mode 100644
index 0000000000..d6adcb7bd9
--- /dev/null
+++ b/examples/docs/es/upload.md
@@ -0,0 +1,426 @@
+<style>
+  .upload-tip {
+    color: #8492a6;
+    font-size: 12px;
+    margin-top: 7px;
+  }
+  .demo-box {
+    margin-bottom: 24px;
+
+    .upload-demo {
+      width: 360px;
+    }
+    .avatar-uploader {
+      .el-upload {
+        border: 1px dashed #d9d9d9;
+        border-radius: 6px;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+    
+        &:hover, &:focus {
+          border-color: #409EFF;
+        }
+      }
+      .avatar-uploader-icon {
+        font-size: 28px;
+        color: #8c939d;
+        width: 178px;
+        height: @width;
+        line-height: @height;
+        text-align: center;
+      }
+      .avatar {
+        width: 178px;
+        height: @width;
+        display: block;
+      }
+    }
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      return {
+        fileList: [{
+          name: 'food.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+        }, {
+          name: 'food2.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+        }],
+        fileList2: [{
+          name: 'food.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+        }, {
+          name: 'food2.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+        }],
+        fileList3: [{
+          name: 'food.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+        }, {
+          name: 'food2.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+        }],
+        imageUrl: '',
+        dialogImageUrl: '',
+        dialogVisible: false
+      };
+    },
+    methods: {
+      handleRemove(file, fileList) {
+        console.log(file, fileList);
+      },
+      beforeUpload(file) {
+        if (file.size > 40000000) {
+          console.warn(file.name + ' is too large!');
+          return false;
+        }
+        return true;
+      },
+      handlePreview(file) {
+        console.log(file);
+      },
+      handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      },
+      submitUpload() {
+        this.$refs.upload.submit();
+      },
+      handleAvatarSuccess(res, file) {
+        this.imageUrl = URL.createObjectURL(file.raw);
+      },
+      beforeAvatarUpload(file) {
+        const isJPG = file.type === 'image/jpeg';
+        const isLt2M = file.size / 1024 / 1024 < 2;
+
+        if (!isJPG) {
+          this.$message.error('Avatar picture must be JPG format!');
+        }
+        if (!isLt2M) {
+          this.$message.error('Avatar picture size can not exceed 2MB!');
+        }
+        return isJPG && isLt2M;
+      },
+      handleChange(file, fileList) {
+        this.fileList3 = fileList.slice(-3);
+      },
+      handleExceed(files, fileList) {
+        this.$message.warning(`You can upload up to 3 files. You selected ${files.length} files this time, and ${files.length + fileList.length} files totally`);
+      }
+    }
+  }
+</script>
+## Carga de archivos
+
+Carga archivos haciendo clic o arrastrándolos.
+
+### Clic para cargar archivos
+
+:::demo Personalice el tipo y texto del botón utilizando la propiedad `slot`. Defina las propiedades `limit` y `on-exceed` para limitar el número máximo de archivos a subir y especifique un método para cuando el límite ha sido excedido.
+```html
+<el-upload
+  class="upload-demo"
+  action="https://jsonplaceholder.typicode.com/posts/"
+  :on-preview="handlePreview"
+  :on-remove="handleRemove"
+  multiple
+  :limit="3"
+  :on-exceed="handleExceed"
+  :file-list="fileList">
+  <el-button size="small" type="primary">Clic para subir archivo</el-button>
+  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
+</el-upload>
+<script>
+  export default {
+    data() {
+      return {
+        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
+      };
+    },
+    methods: {
+      handleRemove(file, fileList) {
+        console.log(file, fileList);
+      },
+      handlePreview(file) {
+        console.log(file);
+      },
+      handleExceed(files, fileList) {
+        this.$message.warning(`El límite es 3, haz seleccionado ${files.length} archivos esta vez, añade hasta ${files.length + fileList.length}`);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Cargar avatar de usuario
+
+Utilice el _hook_ `before-upload` para limitar el formato de archivo y su tamaño.
+
+:::demo
+```html
+<el-upload
+  class="avatar-uploader"
+  action="https://jsonplaceholder.typicode.com/posts/"
+  :show-file-list="false"
+  :on-success="handleAvatarSuccess"
+  :before-upload="beforeAvatarUpload">
+  <img v-if="imageUrl" :src="imageUrl" class="avatar">
+  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+</el-upload>
+
+<style>
+  .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      return {
+        imageUrl: ''
+      };
+    },
+    methods: {
+      handleAvatarSuccess(res, file) {
+        this.imageUrl = URL.createObjectURL(file.raw);
+      },
+      beforeAvatarUpload(file) {
+        const isJPG = file.type === 'image/jpeg';
+        const isLt2M = file.size / 1024 / 1024 < 2;
+
+        if (!isJPG) {
+          this.$message.error('La imagen debe estar en formato JPG!');
+        }
+        if (!isLt2M) {
+          this.$message.error('La imagen excede los 2MB!');
+        }
+        return isJPG && isLt2M;
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Pared de fotografías
+
+Utilice la propiedad `list-type` para cambiar el estilo a un listado de archivos.
+
+:::demo
+```html
+<el-upload
+  action="https://jsonplaceholder.typicode.com/posts/"
+  list-type="picture-card"
+  :on-preview="handlePictureCardPreview"
+  :on-remove="handleRemove">
+  <i class="el-icon-plus"></i>
+</el-upload>
+<el-dialog :visible.sync="dialogVisible">
+  <img width="100%" :src="dialogImageUrl" alt="">
+</el-dialog>
+<script>
+  export default {
+    data() {
+      return {
+        dialogImageUrl: '',
+        dialogVisible: false
+      };
+    },
+    methods: {
+      handleRemove(file, fileList) {
+        console.log(file, fileList);
+      },
+      handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Lista de archivos con miniatura
+
+:::demo
+```html
+<el-upload
+  class="upload-demo"
+  action="https://jsonplaceholder.typicode.com/posts/"
+  :on-preview="handlePreview"
+  :on-remove="handleRemove"
+  :file-list="fileList2"
+  list-type="picture">
+  <el-button size="small" type="primary">Clic para subir archivo</el-button>
+  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
+</el-upload>
+<script>
+  export default {
+    data() {
+      return {
+        fileList2: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
+      };
+    },
+    methods: {
+      handleRemove(file, fileList) {
+        console.log(file, fileList);
+      },
+      handlePreview(file) {
+        console.log(file);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Control de lista de archivos
+
+Utilice el _hook_ `on-change` para controlar la funcionalidad de la lista de archivos subidos.
+
+:::demo
+```html
+<el-upload
+  class="upload-demo"
+  action="https://jsonplaceholder.typicode.com/posts/"
+  :on-change="handleChange"
+  :file-list="fileList3">
+  <el-button size="small" type="primary">Clic para subir archivo</el-button>
+  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
+</el-upload>
+<script>
+  export default {
+    data() {
+      return {
+        fileList3: [{
+          name: 'food.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+        }, {
+          name: 'food2.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+        }]
+      };
+    },
+    methods: {
+      handleChange(file, fileList) {
+        this.fileList3 = fileList.slice(-3);
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Arrastrar para cargar archivo
+
+Puede arrastrar el archivo dentro de un área en especifico para cargar el archivo.
+
+:::demo
+```html
+<el-upload
+  class="upload-demo"
+  drag
+  action="https://jsonplaceholder.typicode.com/posts/"
+  :on-preview="handlePreview"
+  :on-remove="handleRemove"
+  :file-list="fileList"
+  multiple>
+  <i class="el-icon-upload"></i>
+  <div class="el-upload__text">Suelta tu archivo aquí o <em>haz clic para cargar</em></div>
+  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
+</el-upload>
+```
+:::
+
+### Carga normal
+
+:::demo
+```html
+<el-upload
+  class="upload-demo"
+  ref="upload"
+  action="https://jsonplaceholder.typicode.com/posts/"
+  :auto-upload="false">
+  <el-button slot="trigger" size="small" type="primary">Selecciona un archivo</el-button>
+  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">Cargar al servidor</el-button>
+  <div slot="tip" class="el-upload__tip">Solo archivos jpg/png con un tamaño menor de 500kb</div>
+</el-upload>
+<script>
+  export default {
+    methods: {
+      submitUpload() {
+        this.$refs.upload.submit();
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Atributos
+| Atributo         | Descripción                              | Tipo                               | Valores aceptados         | Por defecto |
+| ---------------- | ---------------------------------------- | ---------------------------------- | ------------------------- | ----------- |
+| action           | obligatorio, URL de la petición          | string                             | —                         | —           |
+| headers          | cabeceras de la petición                 | object                             | —                         | —           |
+| multiple         | especifica si se permite subir múltiples archivos | boolean                            | —                         | —           |
+| data             | opciones adicionales de la petición      | object                             | —                         | —           |
+| name             | nombre clave del archivo                 | string                             | —                         | file        |
+| with-credentials | especifica si enviará cookies            | boolean                            | —                         | false       |
+| show-file-list   | especifica si se debe mostrar la lista de archivos cargados | boolean                            | —                         | true        |
+| drag             | se especifica si se activará el modo arrastrar y soltar | boolean                            | —                         | false       |
+| accept           | acepta [tipos de archivos](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), puede no funcionar cuando `thumbnail-mode` esta en `true` | string                             | —                         | —           |
+| on-preview       | _hook_ lanzado al hacer clic en los archivos subidos | function(file)                     | —                         | —           |
+| on-remove        | _hook_ lanzado cuando los archivos son eliminados | function(file, fileList)           | —                         | —           |
+| on-success       | _hook_ lanzado cuando los archivos fueron cargados correctamente | function(response, file, fileList) | —                         | —           |
+| on-error         | _hook_ lanzado cuando han ocurrido algunos errores | function(err, file, fileList)      | —                         | —           |
+| on-progress      | _hook_ lanzado cuando se produce algún progreso | function(event, file, fileList)    | —                         | —           |
+| on-change        | _hook_ lanzado cuando el archivo seleccionado se carga correctamente o falla | function(file, fileList)           | —                         | —           |
+| before-upload    | _hook_ lanzado antes de que el archivo sea cargado. Si este devuelve `true` o `Promise` entonces será rechazado, la carga puede ser cancelada | function(file)                     | —                         | —           |
+| before-remove    | _hook_ lanzado antes de eliminar un archivo. Los parametros son el archivo y la lista de archivos. Si se devuelve `false` o se devuelve una `Promise` y que luego es rechazada, la eliminación será abortada. | function(file, fileList)           | —                         | —           |
+| thumbnail-mode   | especifica si se mostrará la miniatura   | boolean                            | —                         | false       |
+| file-list        | archivos cargados por defecto, por ejemplo,  [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array                              | —                         | []          |
+| list-type        | tipo de lista de archivos                | string                             | text/picture/picture-card | text        |
+| auto-upload      | se especifica si se autocargan archivos  | boolean                            | —                         | true        |
+| http-request     | sobreescribe el comportamiento por defecto de xhr, permitiendo implementar tu propia petición de carga de archivos | function                           | —                         | —           |
+| disabled         | especifica si se deshabilita la carga de archivos | boolean                            | —                         | false       |
+| limit            | número máximo de cargas permitidas       | number                             | —                         | —           |
+| on-exceed        | _hook_ lanzado cuando el límite ha sido excedido | function(files, fileList)          | —                         | -           |
+
+### Slot
+| Nombre       | Descripcion                              |
+| ------------ | ---------------------------------------- |
+| trigger | contenido que desencadena el diálogo de archivo |
+| tip | contenido de los tips |
+
+### Métodos
+| Nombre del método | Descripción                              | Parametros                |
+| ----------------- | ---------------------------------------- | ------------------------- |
+| clearFiles        | limpia la lista de archivos cargados (este método no esta soportado en el _hook_ `before-upload`) | —                         |
+| abort             | cancela la petición de carga             | （ file: fileList's item ） |
+| submit            | La lista de archivos se sube manualmente |  —                         |
diff --git a/examples/docs/zh-CN/alert.md b/examples/docs/zh-CN/alert.md
index 09451c5b43..e64e9789fb 100644
--- a/examples/docs/zh-CN/alert.md
+++ b/examples/docs/zh-CN/alert.md
@@ -25,7 +25,7 @@
 
 页面中的非浮层元素，不会自动消失。
 
-::: demo Alert 组件提供四种主题，由`type`属性指定，默认值为`info`。
+:::demo Alert 组件提供四种主题，由`type`属性指定，默认值为`info`。
 ```html
 <template>
   <el-alert
@@ -52,7 +52,7 @@
 
 自定义关闭按钮为文字或其他符号。
 
-::: demo 在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。`closable`属性决定是否可关闭，接受`boolean`，默认为`true`。你可以设置`close-text`属性来代替右侧的关闭图标，注意：`close-text`必须为文本。设置`close`事件来设置关闭时的回调。
+:::demo 在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。`closable`属性决定是否可关闭，接受`boolean`，默认为`true`。你可以设置`close-text`属性来代替右侧的关闭图标，注意：`close-text`必须为文本。设置`close`事件来设置关闭时的回调。
 ```html
 <template>
   <el-alert
@@ -88,7 +88,7 @@
 
 表示某种状态时提升可读性。
 
-::: demo 通过设置`show-icon`属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。
+:::demo 通过设置`show-icon`属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。
 ```html
 <template>
   <el-alert
@@ -115,11 +115,46 @@
 ```
 :::
 
+### 文字居中
+
+使用 `center` 属性让文字水平居中。
+
+:::demo
+```html
+<template>
+  <el-alert
+    title="成功提示的文案"
+    type="success"
+    center
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="消息提示的文案"
+    type="info"
+    center
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="警告提示的文案"
+    type="warning"
+    center
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="错误提示的文案"
+    type="error"
+    center
+    show-icon>
+  </el-alert>
+</template>
+```
+:::
+
 ### 带有辅助性文字介绍
 
 包含标题和内容，解释更详细的警告。
 
-::: demo 除了必填的`title`属性外，你可以设置`description`属性来帮助你更好地介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。
+:::demo 除了必填的`title`属性外，你可以设置`description`属性来帮助你更好地介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。
 ```html
 <template>
   <el-alert
@@ -133,7 +168,7 @@
 
 ### 带有 icon 和辅助性文字介绍
 
-::: demo 最后，这是一个同时具有 icon 和辅助性文字的样例。
+:::demo 最后，这是一个同时具有 icon 和辅助性文字的样例。
 ```html
 <template>
   <el-alert
@@ -171,9 +206,15 @@
 | type | 主题 | string | success/warning/info/error | info |
 | description | 辅助性文字。也可通过默认 slot 传入 | string | — | — |
 | closable | 是否可关闭 | boolean | — | true |
+| center | 文字是否居中 | boolean | — | true |
 | close-text | 关闭按钮自定义文本 | string | — | — |
 | show-icon | 是否显示图标 | boolean | — | false |
 
+### Slot
+
+| Name | Description |
+|------|--------|
+| title | 标题的内容 |
 
 ### Events
 | 事件名称 | 说明 | 回调参数 |
diff --git a/examples/docs/zh-CN/badge.md b/examples/docs/zh-CN/badge.md
index d0fd491250..1d866f1822 100644
--- a/examples/docs/zh-CN/badge.md
+++ b/examples/docs/zh-CN/badge.md
@@ -20,6 +20,12 @@
 <el-badge :value="3" class="item">
   <el-button size="small">回复</el-button>
 </el-badge>
+<el-badge :value="1" class="item" type="primary">
+  <el-button size="small">评论</el-button>
+</el-badge>
+<el-badge :value="2" class="item" type="warning">
+  <el-button size="small">回复</el-button>
+</el-badge>
 
 <el-dropdown trigger="click">
   <span class="el-dropdown-link">
@@ -98,7 +104,7 @@
 ```html
 <el-badge is-dot class="item">数据查询</el-badge>
 <el-badge is-dot class="item">
-  <el-button class="share-button" icon="share" type="primary"></el-button>
+  <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
 </el-badge>
 
 <style>
@@ -133,8 +139,9 @@
 
 ### Attributes
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
-|-------------  |---------------- |---------------- |---------------------- |-------- |
-| value          | 显示值      | string, number          |          —             |    —     |
-| max          |  最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型    | number  |         —              |     —    |
-| is-dot       | 小圆点    | boolean  |  —  |  false |
-| hidden | 隐藏 badge | boolean | — | false |
+|------------- |---------------- |---------------- |---------------------- |-------- |
+| value        | 显示值           | string, number  |          —            |    —    |
+| max          | 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型    | number  |         —              |     —    |
+| is-dot       | 小圆点           | boolean         |         —             |  false  |
+| hidden       | 隐藏 badge       | boolean         |         —             |  false  |
+| type         | 类型             | string          | primary / success / warning / danger / info |    —    |
diff --git a/examples/docs/zh-CN/breadcrumb.md b/examples/docs/zh-CN/breadcrumb.md
index fa905a1db3..2acdf73e70 100644
--- a/examples/docs/zh-CN/breadcrumb.md
+++ b/examples/docs/zh-CN/breadcrumb.md
@@ -9,6 +9,20 @@
 
 ```html
 <el-breadcrumb separator="/">
+  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+  <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
+  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
+  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
+</el-breadcrumb>
+```
+:::
+
+### 图标分隔符
+
+:::demo 通过设置 `separator-class` 可使用相应的 `iconfont` 作为分隔符，注意这将使 `separator` 设置失效
+
+```html
+<el-breadcrumb separator-class="el-icon-arrow-right">
   <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
   <el-breadcrumb-item>活动管理</el-breadcrumb-item>
   <el-breadcrumb-item>活动列表</el-breadcrumb-item>
@@ -21,6 +35,7 @@
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | separator | 分隔符 | string | — | 斜杠'/' |
+| separator-class | 图标分隔符 class | string | — | - |
 
 ### Breadcrumb Item Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
diff --git a/examples/docs/zh-CN/button.md b/examples/docs/zh-CN/button.md
index 583fdfcb76..892aa605aa 100644
--- a/examples/docs/zh-CN/button.md
+++ b/examples/docs/zh-CN/button.md
@@ -1,38 +1,16 @@
-<script>
-  import { addClass } from 'element-ui/src/utils/dom';
-  export default {
-    data() {
-      return {
-        isLoading: false,
-        isLoading2: false
-      };
-    },
-    methods: {
-      handleClick(event) {
-        console.log(event);
-        alert('button clicked!');
-      }
-    },
-    mounted() {
-      this.$nextTick(() => {
-        let demos = document.querySelectorAll('.source');
-        let thirdDemo = demos[2];
-        addClass(thirdDemo, 'intro-block');
-      });
-    }
-  }
-</script>
 <style>
   .demo-box.demo-button {
     .el-row {
-      margin-bottom: 10px;
+      margin-bottom: 20px;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
     .el-button + .el-button {
       margin-left: 10px;
     }
     .el-button-group {
-      margin-bottom: 20px;
-
       .el-button + .el-button {
         margin-left: 0;
       }
@@ -42,30 +20,6 @@
       }
     }
   }
-
-  .demo-box.demo-button .intro-block {
-    padding: 0;
-  }
-
-  .demo-button .intro-block .block {
-    padding: 30px 24px;
-    overflow: hidden;
-    border-bottom: solid 1px #EFF2F6;
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-
-  .demo-button .intro-block .demonstration {
-    font-size: 14px;
-    color: #8492a6;
-    line-height: 44px;
-  }
-
-  .demo-button .intro-block .wrapper {
-    float: right;
-    margin-right: 20px;
-  }
 </style>
 
 ## Button 按钮
@@ -75,12 +29,44 @@
 
 基础的按钮用法。
 
-:::demo Button 组件默认提供7种主题，由`type`属性来定义，默认为`default`。
+:::demo 使用`type`、`plain`、`round`和`circle`属性来定义 Button 的样式。
 
 ```html
-<el-button>默认按钮</el-button>
-<el-button type="primary">主要按钮</el-button>
-<el-button type="text">文字按钮</el-button>
+<el-row>
+  <el-button>默认按钮</el-button>
+  <el-button type="primary">主要按钮</el-button>
+  <el-button type="success">成功按钮</el-button>
+  <el-button type="info">信息按钮</el-button>
+  <el-button type="warning">警告按钮</el-button>
+  <el-button type="danger">危险按钮</el-button>
+</el-row>
+
+<el-row>
+  <el-button plain>朴素按钮</el-button>
+  <el-button type="primary" plain>主要按钮</el-button>
+  <el-button type="success" plain>成功按钮</el-button>
+  <el-button type="info" plain>信息按钮</el-button>
+  <el-button type="warning" plain>警告按钮</el-button>
+  <el-button type="danger" plain>危险按钮</el-button>
+</el-row>
+
+<el-row>
+  <el-button round>圆角按钮</el-button>
+  <el-button type="primary" round>主要按钮</el-button>
+  <el-button type="success" round>成功按钮</el-button>
+  <el-button type="info" round>信息按钮</el-button>
+  <el-button type="warning" round>警告按钮</el-button>
+  <el-button type="danger" round>危险按钮</el-button>
+</el-row>
+
+<el-row>
+  <el-button icon="el-icon-search" circle></el-button>
+  <el-button type="primary" icon="el-icon-edit" circle></el-button>
+  <el-button type="success" icon="el-icon-check" circle></el-button>
+  <el-button type="info" icon="el-icon-message" circle></el-button>
+  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
+  <el-button type="danger" icon="el-icon-delete" circle></el-button>
+</el-row>
 ```
 :::
 
@@ -91,51 +77,48 @@
 :::demo 你可以使用`disabled`属性来定义按钮是否可用，它接受一个`Boolean`值。
 
 ```html
-<el-button :plain="true" :disabled="true">主要按钮</el-button>
-<el-button type="primary" :disabled="true">主要按钮</el-button>
-<el-button type="text" :disabled="true">文字按钮</el-button>
+<el-row>
+  <el-button disabled>默认按钮</el-button>
+  <el-button type="primary" disabled>主要按钮</el-button>
+  <el-button type="success" disabled>成功按钮</el-button>
+  <el-button type="info" disabled>信息按钮</el-button>
+  <el-button type="warning" disabled>警告按钮</el-button>
+  <el-button type="danger" disabled>危险按钮</el-button>
+</el-row>
+
+<el-row>
+  <el-button plain disabled>朴素按钮</el-button>
+  <el-button type="primary" plain disabled>主要按钮</el-button>
+  <el-button type="success" plain disabled>成功按钮</el-button>
+  <el-button type="info" plain disabled>信息按钮</el-button>
+  <el-button type="warning" plain disabled>警告按钮</el-button>
+  <el-button type="danger" plain disabled>危险按钮</el-button>
+</el-row>
 ```
 :::
 
-### 有颜色倾向
+### 文字按钮
 
-不同的颜色倾向代表不同的提示
-
-:::demo 朴素按钮同样设置了不同的`type`属性对应的样式（可选值同上），默认为`info`。设置`plain`属性，它接受一个`Boolean`。注意，在该情况下，`type`虽然可以为`text`，但是是没有意义的，会显示为`text button`的样式。
+没有边框和背景色的按钮。
 
+:::demo
 ```html
-<div class="block">
-  <span class="demonstration">默认显示颜色</span>
-  <span class="wrapper">
-    <el-button type="success">成功按钮</el-button>
-    <el-button type="warning">警告按钮</el-button>
-    <el-button type="danger">危险按钮</el-button>
-    <el-button type="info">信息按钮</el-button>
-  </span>
-</div>
-<div class="block">
-  <span class="demonstration">hover 显示颜色</span>
-  <span class="wrapper">
-    <el-button :plain="true" type="success">成功按钮</el-button>
-    <el-button :plain="true" type="warning">警告按钮</el-button>
-    <el-button :plain="true" type="danger">危险按钮</el-button>
-    <el-button :plain="true" type="info">信息按钮</el-button>
-  </span>
-</div>
+<el-button type="text">文字按钮</el-button>
+<el-button type="text" disabled>文字按钮</el-button>
 ```
 :::
 
 ### 图标按钮
 
-带图标的按钮可增强辨识度(有文字)或节省空间(无文字)。
+带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。
 
 :::demo 设置`icon`属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用`i`标签即可，可以使用自定义图标。
 
 ```html
-<el-button type="primary" icon="edit"></el-button>
-<el-button type="primary" icon="share"></el-button>
-<el-button type="primary" icon="delete"></el-button>
-<el-button type="primary" icon="search">搜索</el-button>
+<el-button type="primary" icon="el-icon-edit"></el-button>
+<el-button type="primary" icon="el-icon-share"></el-button>
+<el-button type="primary" icon="el-icon-delete"></el-button>
+<el-button type="primary" icon="el-icon-search">搜索</el-button>
 <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
 ```
 :::
@@ -148,13 +131,13 @@
 
 ```html
 <el-button-group>
-  <el-button type="primary" icon="arrow-left">上一页</el-button>
+  <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
   <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
 </el-button-group>
 <el-button-group>
-  <el-button type="primary" icon="edit"></el-button>
-  <el-button type="primary" icon="share"></el-button>
-  <el-button type="primary" icon="delete"></el-button>
+  <el-button type="primary" icon="el-icon-edit"></el-button>
+  <el-button type="primary" icon="el-icon-share"></el-button>
+  <el-button type="primary" icon="el-icon-delete"></el-button>
 </el-button-group>
 ```
 :::
@@ -174,24 +157,34 @@
 
 Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。
 
-:::demo 额外的尺寸：`large`、`small`、`mini`，通过设置`size`属性来配置它们。
+:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。
 
 ```html
-<el-button type="primary" size="large">大型按钮</el-button>
-<el-button type="primary">正常按钮</el-button>
-<el-button type="primary" size="small">小型按钮</el-button>
-<el-button type="primary" size="mini">超小按钮</el-button>
+<el-row>
+  <el-button>默认按钮</el-button>
+  <el-button size="medium">中等按钮</el-button>
+  <el-button size="small">小型按钮</el-button>
+  <el-button size="mini">超小按钮</el-button>
+</el-row>
+<el-row>
+  <el-button round>默认按钮</el-button>
+  <el-button size="medium" round>中等按钮</el-button>
+  <el-button size="small" round>小型按钮</el-button>
+  <el-button size="mini" round>超小按钮</el-button>
+</el-row>
 ```
 :::
 
 ### Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| size     | 尺寸   | string  |   large,small,mini            |    —     |
-| type     | 类型   | string    |   primary,success,warning,danger,info,text |     —    |
-| plain     | 是否朴素按钮   | Boolean    | — | false   |
-| loading     | 是否加载中状态   | Boolean    | — | false   |
+| size     | 尺寸   | string  |   medium / small / mini            |    —     |
+| type     | 类型   | string    |   primary / success / warning / danger / info / text |     —    |
+| plain     | 是否朴素按钮   | boolean    | — | false   |
+| round     | 是否圆角按钮   | boolean    | — | false   |
+| circle     | 是否圆形按钮   | boolean    | — | false   |
+| loading     | 是否加载中状态   | boolean    | — | false   |
 | disabled  | 是否禁用状态    | boolean   | —   | false   |
-| icon  | 图标，已有的图标库中的图标名 | string   |  —  |  —  |
+| icon  | 图标类名 | string   |  —  |  —  |
 | autofocus  | 是否默认聚焦 | boolean   |  —  |  false  |
-| native-type | 原生 type 属性 | string | button,submit,reset | button |
+| native-type | 原生 type 属性 | string | button / submit / reset | button |
diff --git a/examples/docs/zh-CN/card.md b/examples/docs/zh-CN/card.md
index c417540602..a25f89c0b5 100644
--- a/examples/docs/zh-CN/card.md
+++ b/examples/docs/zh-CN/card.md
@@ -25,7 +25,7 @@
   }
 
   .item {
-    padding: 18px 0;
+    margin-bottom: 18px;
   }
 
   .button {
@@ -58,8 +58,8 @@
 ```html
 <el-card class="box-card">
   <div slot="header" class="clearfix">
-    <span style="line-height: 36px;">卡片名称</span>
-    <el-button style="float: right;" type="primary">操作按钮</el-button>
+    <span>卡片名称</span>
+    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
   </div>
   <div v-for="o in 4" :key="o" class="text item">
     {{'列表内容 ' + o }}
@@ -72,16 +72,16 @@
   }
 
   .item {
-    padding: 18px 0;
+    margin-bottom: 18px;
   }
 
   .clearfix:before,
   .clearfix:after {
-      display: table;
-      content: "";
+    display: table;
+    content: "";
   }
   .clearfix:after {
-      clear: both
+    clear: both
   }
 
   .box-card {
@@ -184,8 +184,35 @@ export default {
 ```
 :::
 
+### 卡片阴影
+
+可对阴影的显示进行配置。
+
+:::demo 通过`shadow`属性设置卡片阴影出现的时机：`always`、`hover`或`never`。
+```html
+<el-row :gutter="12">
+  <el-col :span="8">
+    <el-card shadow="always">
+      总是显示
+    </el-card>
+  </el-col>
+  <el-col :span="8">
+    <el-card shadow="hover">
+      鼠标悬浮时显示
+    </el-card>
+  </el-col>
+  <el-col :span="8">
+    <el-card shadow="never">
+      从不显示
+    </el-card>
+  </el-col>
+</el-row>
+```
+:::
+
 ### Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | header | 设置 header，也可以通过 `slot#header` 传入 DOM | string| — | — |
 | body-style | 设置 body 的样式| object| — | { padding: '20px' } |
+| shadow | 设置阴影显示时机 | string | always / hover / never | always |
diff --git a/examples/docs/zh-CN/carousel.md b/examples/docs/zh-CN/carousel.md
index f88da431ba..d28da97830 100644
--- a/examples/docs/zh-CN/carousel.md
+++ b/examples/docs/zh-CN/carousel.md
@@ -15,7 +15,7 @@
     padding: 30px;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    float: left;
+    display: inline-block;
     width: 50%;
     box-sizing: border-box;
     &:last-child {
@@ -67,7 +67,7 @@
 
 适用广泛的基础用法
 
-::: demo 结合使用`el-carousel`和`el-carousel-item`标签就得到了一个走马灯。幻灯片的内容是任意的，需要放在`el-carousel-item`标签中。默认情况下，在鼠标 hover 底部的指示器时就会触发切换。通过设置`trigger`属性为`click`，可以达到点击触发的效果。
+:::demo 结合使用`el-carousel`和`el-carousel-item`标签就得到了一个走马灯。幻灯片的内容是任意的，需要放在`el-carousel-item`标签中。默认情况下，在鼠标 hover 底部的指示器时就会触发切换。通过设置`trigger`属性为`click`，可以达到点击触发的效果。
 ```html
 <template>
   <div class="block">
@@ -112,7 +112,7 @@
 
 可以将指示器的显示位置设置在容器外部
 
-::: demo `indicator-position`属性定义了指示器的位置。默认情况下，它会显示在走马灯内部，设置为`outside`则会显示在外部；设置为`none`则不会显示指示器。
+:::demo `indicator-position`属性定义了指示器的位置。默认情况下，它会显示在走马灯内部，设置为`outside`则会显示在外部；设置为`none`则不会显示指示器。
 ```html
 <template>
   <el-carousel indicator-position="outside">
@@ -145,7 +145,7 @@
 ### 切换箭头
 可以设置切换箭头的显示时机
 
-::: demo `arrow`属性定义了切换箭头的显示时机。默认情况下，切换箭头只有在鼠标 hover 到走马灯上时才会显示；若将`arrow`设置为`always`，则会一直显示；设置为`never`，则会一直隐藏。
+:::demo `arrow`属性定义了切换箭头的显示时机。默认情况下，切换箭头只有在鼠标 hover 到走马灯上时才会显示；若将`arrow`设置为`always`，则会一直显示；设置为`never`，则会一直隐藏。
 ```html
 <template>
   <el-carousel :interval="5000" arrow="always">
@@ -178,7 +178,7 @@
 ### 卡片化
 当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格
 
-::: demo 将`type`属性设置为`card`即可启用卡片模式。从交互上来说，卡片模式和一般模式的最大区别在于，可以通过直接点击两侧的幻灯片进行切换。
+:::demo 将`type`属性设置为`card`即可启用卡片模式。从交互上来说，卡片模式和一般模式的最大区别在于，可以通过直接点击两侧的幻灯片进行切换。
 ```html
 <template>
   <el-carousel :interval="4000" type="card" height="200px">
diff --git a/examples/docs/zh-CN/cascader.md b/examples/docs/zh-CN/cascader.md
index 4565aeaeaa..6dd3a6ffd4 100644
--- a/examples/docs/zh-CN/cascader.md
+++ b/examples/docs/zh-CN/cascader.md
@@ -263,7 +263,7 @@
     padding: 30px 0;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    float: left;
+    display: inline-block;
     width: 50%;
     box-sizing: border-box;
     &:last-child {
@@ -1669,6 +1669,7 @@
 | options | 可选项数据源，键名可通过 `props` 属性配置 | array | — | — |
 | props | 配置选项，具体见下表 | object | — | — |
 | value | 选中项绑定值   | array | — | — |
+| separator | 选项分隔符 | string | — | 斜杠'/' |
 | popper-class | 自定义浮层类名   | string | —  | — |
 | placeholder | 输入框占位文本 | string | — | 请选择 |
 | disabled | 是否禁用 | boolean | — | false |
@@ -1678,7 +1679,8 @@
 | filterable | 是否可搜索选项 | boolean | — | — |
 | debounce | 搜索关键词输入的去抖延迟，毫秒 | number | — | 300 |
 | change-on-select | 是否允许选择任意一级的选项 | boolean | — | false |
-| size | 尺寸 | string | large / small / mini | — |
+| size | 尺寸 | string | medium / small / mini | — |
+| before-filter | 筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选 | function(value) | — | — |
 
 ### props
 | 参数     | 说明              | 类型   | 可选值 | 默认值 |
@@ -1687,10 +1689,11 @@
 | label    | 指定选项标签为选项对象的某个属性值 | string | — | — |
 | children | 指定选项的子选项为选项对象的某个属性值 | string | — | — |
 | disabled | 指定选项的禁用为选项对象的某个属性值 | string | — | — |
-| before-filter | 可选参数, 筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选。 | function(value) | — | — |
 
 ### Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
 | change | 当绑定值变化时触发的事件 | 当前值 |
 | active-item-change | 当父级选项变化时触发的事件，仅在 `change-on-select` 为 `false` 时可用 | 各父级选项组成的数组 |
+| blur | 在 Cascader 失去焦点时触发 | (event: Event) |
+| focus | 在 Cascader 获得焦点时触发 | (event: Event) |
diff --git a/examples/docs/zh-CN/checkbox.md b/examples/docs/zh-CN/checkbox.md
index b29e8b95c7..def7b93813 100644
--- a/examples/docs/zh-CN/checkbox.md
+++ b/examples/docs/zh-CN/checkbox.md
@@ -8,6 +8,10 @@
         checked: true,
         checked1: false,
         checked2: true,
+        checked3: true,
+        checked4: false,
+        checked5: false,
+        checked6: true,
         isValid: '可用',
         checkAll: false,
         cities: cityOptions,
@@ -15,16 +19,19 @@
         checkedCities1: ['上海', '北京'],
         isIndeterminate: true,
         checkboxGroup1: ['上海'],
-        checkboxGroup2: ['北京'],
-        checkboxGroup3: ['广州']
+        checkboxGroup2: ['上海'],
+        checkboxGroup3: ['上海'],
+        checkboxGroup4: ['上海'],
+        checkboxGroup5: [],
+        checkboxGroup6: []
       };
     },
     methods: {
       handleChange(ev) {
         console.log(ev);
       },
-      handleCheckAllChange(event) {
-        this.checkedCities = event.target.checked ? cityOptions : [];
+      handleCheckAllChange(val) {
+        this.checkedCities = val ? cityOptions : [];
         this.isIndeterminate = false;
       },
       handleCheckedCitiesChange(value) {
@@ -35,18 +42,6 @@
     }
   };
 </script>
-
-<style>
-  .demo-box.demo-checkbox {
-    .checkbox {
-      margin-right: 5px;
-
-      & + .checkbox {
-        margin-left: 10px;
-      }
-    }
-  }
-</style>
 ## Checkbox 多选框
 一组备选项中进行多选
 
@@ -77,7 +72,7 @@
 
 多选框不可用状态。
 
-::: demo 设置`disabled`属性即可。
+:::demo 设置`disabled`属性即可。
 
 ```html
 <template>
@@ -145,15 +140,15 @@
   export default {
     data() {
       return {
-        checkAll: true,
+        checkAll: false,
         checkedCities: ['上海', '北京'],
         cities: cityOptions,
         isIndeterminate: true
       };
     },
     methods: {
-      handleCheckAllChange(event) {
-        this.checkedCities = event.target.checked ? cityOptions : [];
+      handleCheckAllChange(val) {
+        this.checkedCities = val ? cityOptions : [];
         this.isIndeterminate = false;
       },
       handleCheckedCitiesChange(value) {
@@ -201,21 +196,29 @@
 
 按钮样式的多选组合。
 
-:::demo 只需要把`el-checkbox`元素替换为`el-checkbox-button`元素即可。此外，Element 还提供了`size`属性，支持`large`和`small`两种。
+:::demo 只需要把`el-checkbox`元素替换为`el-checkbox-button`元素即可。此外，Element 还提供了`size`属性。
 ```html
 <template>
-  <div style="margin: 15px 0;"></div>
-  <el-checkbox-group v-model="checkboxGroup1">
-    <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
-  </el-checkbox-group>
-  <div style="margin: 15px 0;"></div>
-  <el-checkbox-group v-model="checkboxGroup2" size="small">
-    <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '深圳'" :key="city">{{city}}</el-checkbox-button>
-  </el-checkbox-group>
-  <div style="margin: 15px 0;"></div>
-  <el-checkbox-group v-model="checkboxGroup3" size="large" fill="#324057" text-color="#a4aebd" :min="1" :max="3">
-    <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
-  </el-checkbox-group>
+  <div>
+    <el-checkbox-group v-model="checkboxGroup1">
+      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup2" size="medium">
+      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup3" size="small">
+      <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '北京'" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
+      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
 </template>
 <script>
   const cityOptions = ['上海', '北京', '广州', '深圳'];
@@ -223,38 +226,100 @@
     data () {
       return {
         checkboxGroup1: ['上海'],
-        checkboxGroup2: ['北京'],
-        checkboxGroup3: ['广州'],
+        checkboxGroup2: ['上海'],
+        checkboxGroup3: ['上海'],
+        checkboxGroup4: ['上海'],
         cities: cityOptions
       };
     }
   }
 </script>
 ```
+:::
 
+### 带有边框
+
+:::demo 设置`border`属性可以渲染为带有边框的多选框。
+```html
+<template>
+  <div>
+    <el-checkbox v-model="checked3" label="备选项1" border></el-checkbox>
+    <el-checkbox v-model="checked4" label="备选项2" border></el-checkbox>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox v-model="checked5" label="备选项1" border size="medium"></el-checkbox>
+    <el-checkbox v-model="checked6" label="备选项2" border size="medium"></el-checkbox>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup5" size="small">
+      <el-checkbox label="备选项1" border></el-checkbox>
+      <el-checkbox label="备选项2" border disabled></el-checkbox>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
+      <el-checkbox label="备选项1" border></el-checkbox>
+      <el-checkbox label="备选项2" border></el-checkbox>
+    </el-checkbox-group>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        checked3: true,
+        checked4: false,
+        checked5: false,
+        checked6: true,
+        checkboxGroup5: [],
+        checkboxGroup6: []
+      };
+    }
+  }
+</script>
+```
 :::
 
 ### Checkbox Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| label     | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）| string    |       —        |     —    |
-| true-label | 选中时的值   | string, number | — |     —    |
-| false-label | 没有选中时的值   | string, number    |      —         |     —    |
+| label     | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）| string / number / boolean  |       —        |     —    |
+| true-label | 选中时的值   | string / number | — |     —    |
+| false-label | 没有选中时的值   | string / number    |      —         |     —    |
+| disabled  | 是否禁用    | boolean   |  — | false   |
+| border  | 是否显示边框  | boolean   | — | false   |
+| size  | Checkbox 的尺寸，仅在 border 为真时有效  | string  | medium / small / mini | — |
 | name | 原生 name 属性 | string    |      —         |     —    |
-| disabled  | 按钮禁用    | boolean   |  — | false   |
 | checked  | 当前是否勾选    | boolean   |  — | false   |
 | indeterminate  | 设置 indeterminate 状态，只负责样式控制    | boolean   |  — | false   |
 
+### Checkbox Events
+| 事件名称      | 说明    | 回调参数      |
+|---------- |-------- |---------- |
+| change  | 当绑定值变化时触发的事件 | 更新后的值 |
+
 ### Checkbox-group Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| size     | Checkbox 按钮组尺寸   | string  | large, small  |    —     |
-| fill  | 按钮激活时的填充色和边框色    | string   | — | #20a0ff   |
-| text-color  | 按钮激活时的文本颜色    | string   | — | #ffffff   |
+| size     | 多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效   | string  | medium / small / mini  |    —     |
+| disabled  | 是否禁用    | boolean   | — | false   |
 | min     | 可被勾选的 checkbox 的最小数量   | number    |       —        |     —    |
 | max     | 可被勾选的 checkbox 的最大数量   | number    |       —        |     —    |
+| text-color  | 按钮形式的 Checkbox 激活时的文本颜色    | string   | — | #ffffff   |
+| fill  | 按钮形式的 Checkbox 激活时的填充色和边框色    | string   | — | #409EFF   |
 
-### Checkbox Events
+### Checkbox-group Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
-| change  | 当绑定值变化时触发的事件 | event 事件对象 |
+| change  | 当绑定值变化时触发的事件 | 更新后的值 |
+
+### Checkbox-button Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| label     | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）| string / number / boolean  |       —        |     —    |
+| true-label | 选中时的值   | string / number | — |     —    |
+| false-label | 没有选中时的值   | string / number    |      —         |     —    |
+| disabled  | 是否禁用    | boolean   |  — | false   |
+| name | 原生 name 属性 | string    |      —         |     —    |
+| checked  | 当前是否勾选    | boolean   |  — | false   |
diff --git a/examples/docs/zh-CN/collapse.md b/examples/docs/zh-CN/collapse.md
index 441417f89d..20795efba1 100644
--- a/examples/docs/zh-CN/collapse.md
+++ b/examples/docs/zh-CN/collapse.md
@@ -58,6 +58,11 @@
       return {
         activeNames: ['1']
       };
+    },
+    methods: {
+      handleChange(val) {
+        console.log(val);
+      }
     }
   }
 </script>
@@ -110,7 +115,7 @@
 <el-collapse accordion>
   <el-collapse-item>
     <template slot="title">
-      一致性 Consistency<i class="header-icon el-icon-information"></i>
+      一致性 Consistency<i class="header-icon el-icon-info"></i>
     </template>
     <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
     <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
diff --git a/examples/docs/zh-CN/color-picker.md b/examples/docs/zh-CN/color-picker.md
index dc779275c3..8bee9b5d96 100644
--- a/examples/docs/zh-CN/color-picker.md
+++ b/examples/docs/zh-CN/color-picker.md
@@ -2,9 +2,27 @@
   export default {
     data() {
       return {
-        color1: '#20a0ff',
+        color1: '#409EFF',
         color2: null,
-        color3: 'rgba(19, 206, 102, 0.8)'
+        color3: 'rgba(19, 206, 102, 0.8)',
+        color4: '#409EFF',
+        color5: 'rgba(255, 69, 0, 0.68)',
+        predefineColors: [
+          '#ff4500',
+          '#ff8c00',
+          '#ffd700',
+          '#90ee90',
+          '#00ced1',
+          '#1e90ff',
+          '#c71585',
+          'rgba(255, 69, 0, 0.68)',
+          'rgb(255, 120, 0)',
+          'hsv(51, 100, 98)',
+          'hsva(120, 40, 94, 0.5)',
+          'hsl(181, 100%, 37%)',
+          'hsla(209, 100%, 56%, 0.73)',
+          '#c7158577'
+        ]
       };
     },
     mounted() {
@@ -21,7 +39,7 @@
     padding: 30px 0;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    float: left;
+    display: inline-block;
     width: 50%;
     box-sizing: border-box;
     &:last-child {
@@ -34,6 +52,9 @@
     font-size: 14px;
     margin-bottom: 20px;
   }
+  .demo-color-picker .el-color-picker + .el-color-picker {
+    margin-left: 20px;
+  }
 </style>
 
 ## ColorPicker 颜色选择器
@@ -57,7 +78,7 @@
   export default {
     data() {
       return {
-        color1: '#20a0ff',
+        color1: '#409EFF',
         color2: null
       }
     }
@@ -84,11 +105,74 @@
 ```
 :::
 
+### 预定义颜色
+
+:::demo ColorPicker 支持预定义颜色
+```html
+<el-color-picker
+  v-model="color5"
+  show-alpha
+  :predefine="predefineColors">
+</el-color-picker>
+
+<script>
+  export default {
+    data() {
+      return {
+        color5: 'rgba(255, 69, 0, 0.68)',
+        predefineColors: [
+          '#ff4500',
+          '#ff8c00',
+          '#ffd700',
+          '#90ee90',
+          '#00ced1',
+          '#1e90ff',
+          '#c71585',
+          'rgba(255, 69, 0, 0.68)',
+          'rgb(255, 120, 0)',
+          'hsv(51, 100, 98)',
+          'hsva(120, 40, 94, 0.5)',
+          'hsl(181, 100%, 37%)',
+          'hsla(209, 100%, 56%, 0.73)',
+          '#c7158577'
+        ]
+      }
+    }
+  };
+</script>
+```
+:::
+
+### 不同尺寸
+
+:::demo
+```html
+<el-color-picker v-model="color4"></el-color-picker>
+<el-color-picker v-model="color4" size="medium"></el-color-picker>
+<el-color-picker v-model="color4" size="small"></el-color-picker>
+<el-color-picker v-model="color4" size="mini"></el-color-picker>
+
+<script>
+  export default {
+    data() {
+      return {
+        color4: '#409EFF'
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
+| disabled | 是否禁用 | boolean | — | false |
+| size | 尺寸 | string | — | medium / small / mini |
 | show-alpha | 是否支持透明度选择 | boolean | — | false |
 | color-format | 写入 v-model 的颜色的格式 | string | hsl / hsv / hex / rgb | hex（show-alpha 为 false）/ rgb（show-alpha 为 true） |
+| popper-class | ColorPicker 下拉框的类名 | string | — | — |
+| predefine | 预定义颜色 | array | — | — |
 
 ### Events
 | 事件名称      | 说明    | 回调参数      |
diff --git a/examples/docs/zh-CN/color.md b/examples/docs/zh-CN/color.md
index 7a50c649a0..b5da767dcd 100644
--- a/examples/docs/zh-CN/color.md
+++ b/examples/docs/zh-CN/color.md
@@ -2,6 +2,7 @@
   .demo-color-box {
     border-radius: 4px;
     padding: 20px;
+    margin: 5px 0;
     height: 74px;
     box-sizing: border-box;
     color: #fff;
@@ -16,6 +17,7 @@
   .demo-color-box-group {
     .demo-color-box {
       border-radius: 0;
+      margin: 0;
     }
     .demo-color-box:first-child {
       border-radius: 4px 4px 0 0;
@@ -24,63 +26,51 @@
       border-radius: 0 0 4px 4px;
     }
   }
-  .bg-blue-light {
-    background-color: #58b7ff;
-  }
-  .bg-blue,
-  .bg-info {
-    background-color: #20a0ff;
-  }
-  .bg-blue-dark {
-    background-color: #1d8ce0;
+  .bg-blue {
+    background-color: #409EFF;
   }
 
   .bg-success {
-    background-color: #13CE66;
+    background-color: #67C23A;
   }
   .bg-warning {
-    background-color: #f7ba2a;
+    background-color: #E6A23C;
   }
   .bg-danger {
-    background-color: #ff4949;
-  }
-
-  .bg-black {
-    background-color: #1f2d3d;
-  }
-  .bg-black-light {
-    background-color: #324057;
+    background-color: #F56C6C;
   }
-  .bg-black-lighter {
-    background-color: #475669;
+  .bg-info {
+    background-color: #909399;
   }
 
-  .bg-silver {
-    background-color: #8492a6;
+  .bg-text-primary {
+    background-color: #303133;
+  }
+  .bg-text-regular {
+    background-color: #606266;
   }
-  .bg-silver-light {
-    background-color: #99a9bf;
+  .bg-text-secondary {
+    background-color: #909399;
   }
-  .bg-silver-lighter {
-    background-color: #c0ccda;
+  .bg-text-placeholder {
+    background-color: #c0c4cc;
   }
 
-  .bg-gray {
-    background-color: #d3dce6;
+  .bg-border-base {
+    background-color: #dcdfe6;
   }
-  .bg-gray-light {
-    background-color: #e5e9f2;
+  .bg-border-light {
+    background-color: #e4e7ed;
   }
-  .bg-gray-lighter {
-    background-color: #eff2f7;
+  .bg-border-lighter {
+    background-color: #ebeef5;
   }
-
-  .bg-white-dark {
-    background-color: #f9fafc;
+  .bg-border-extra-light {
+    background-color: #f2f6fc;
   }
 
-  .color-gray {
-    color: #5e6d82;
+  [class*=" bg-border-"] {
+    color: #303133;
   }
 </style>
 
@@ -93,14 +83,8 @@ Element 为了避免视觉传达差异，使用一套特定的调色板来规定
 Element 主要品牌颜色是鲜艳、友好的蓝色。
 
 <el-row :gutter="12">
-  <el-col :span="8">
-    <div class="demo-color-box bg-blue-light">Light Blue<div class="value">#58B7FF</div></div>
-  </el-col>
-  <el-col :span="8">
-    <div class="demo-color-box bg-blue">Blue<div class="value">#20A0FF</div></div>
-  </el-col>
-  <el-col :span="8">
-    <div class="demo-color-box bg-blue-dark">Dark Blue<div class="value">#1D8CE0</div></div>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box bg-blue">Blue<div class="value">#409EFF</div></div>
   </el-col>
 </el-row>
 
@@ -109,17 +93,17 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
 
 <el-row :gutter="12">
-  <el-col :span="6">
-    <div class="demo-color-box bg-info">Blue<div class="value">#20A0FF</div></div>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box bg-success">Success<div class="value">#67C23A</div></div>
   </el-col>
-  <el-col :span="6">
-    <div class="demo-color-box bg-success">Success<div class="value">#13CE66</div></div>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box bg-warning">Warning<div class="value">#E6A23C</div></div>
   </el-col>
-  <el-col :span="6">
-    <div class="demo-color-box bg-warning">Warning<div class="value">#F7BA2A</div></div>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box bg-danger">Danger<div class="value">#F56C6C</div></div>
   </el-col>
-  <el-col :span="6">
-    <div class="demo-color-box bg-danger">Danger<div class="value">#FF4949</div></div>
+  <el-col :span="6" :xs="{span: 12}">
+    <div class="demo-color-box bg-info">Info<div class="value">#909399</div></div>
   </el-col>
 </el-row>
 
@@ -128,31 +112,20 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
 
 <el-row :gutter="12">
-  <el-col :span="6">
-    <div class="demo-color-box-group">
-      <div class="demo-color-box bg-black">Black<div class="value">#1F2D3D</div></div>
-      <div class="demo-color-box bg-black-light">Light Black<div class="value">#324057</div></div>
-      <div class="demo-color-box bg-black-lighter">Extra Light Black<div class="value">#475669</div></div>
-    </div>
-  </el-col>
-  <el-col :span="6">
+  <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box-group">
-      <div class="demo-color-box bg-silver">Silver<div class="value">#8492A6</div></div>
-      <div class="demo-color-box bg-silver-light">Light Silver<div class="value">#99A9BF</div></div>
-      <div class="demo-color-box bg-silver-lighter">Extra Light Silver<div class="value">#C0CCDA</div></div>
+      <div class="demo-color-box bg-text-primary">主要文字<div class="value">#303133</div></div>
+      <div class="demo-color-box bg-text-regular">常规文字<div class="value">#606266</div></div>
+      <div class="demo-color-box bg-text-secondary">次要文字<div class="value">#909399</div></div>
+      <div class="demo-color-box bg-text-placeholder">占位文字<div class="value">#C0C4CC</div></div>
     </div>
   </el-col>
-  <el-col :span="6">
+  <el-col :span="6" :xs="{span: 12}">
     <div class="demo-color-box-group">
-      <div class="demo-color-box color-gray bg-gray">Gray<div class="value">#D3DCE6</div></div>
-      <div class="demo-color-box color-gray bg-gray-light">Light Gray<div class="value">#E5E9F2</div></div>
-      <div class="demo-color-box color-gray bg-gray-lighter">Extra Light Gray<div class="value">#EFF2F7</div></div>
-    </div>
-  </el-col>
-  <el-col :span="6">
-    <div class="demo-color-box-group" style="border: 1px solid #e0e6ed;border-radius: 4px;">
-      <div class="demo-color-box color-gray bg-white-dark">Dark White<div class="value">#F9FAFC</div></div>
-      <div class="demo-color-box color-gray bg-white">White<div class="value">#FFFFFF</div></div>
+      <div class="demo-color-box bg-border-base">一级边框<div class="value">#DCDFE6</div></div>
+      <div class="demo-color-box bg-border-light">二级边框<div class="value">#E4E7ED</div></div>
+      <div class="demo-color-box bg-border-lighter">三级边框<div class="value">#EBEEF5</div></div>
+      <div class="demo-color-box bg-border-extra-light">四级边框<div class="value">#F2F6FC</div></div>
     </div>
   </el-col>
 </el-row>
diff --git a/examples/docs/zh-CN/container.md b/examples/docs/zh-CN/container.md
new file mode 100644
index 0000000000..d650eebdb6
--- /dev/null
+++ b/examples/docs/zh-CN/container.md
@@ -0,0 +1,299 @@
+<style>
+  .el-header, .el-footer {
+    background-color: #B3C0D1;
+    color: #333;
+    line-height: 60px;
+  }
+  
+  .el-aside {
+    color: #333;
+  }
+  
+  #chang-jian-ye-mian-bu-ju + .demo-container {
+    .el-header, .el-footer {
+      text-align: center;
+    }
+  
+    .el-aside {
+      background-color: #D3DCE6;
+      text-align: center;
+      line-height: 200px;
+    }
+  
+    .el-main {
+      background-color: #E9EEF3;
+      color: #333;
+      text-align: center;
+      line-height: 160px;
+    }
+    
+    & > .source > .el-container {
+      margin-bottom: 40px;
+    
+      &:nth-child(5) .el-aside,
+      &:nth-child(6) .el-aside {
+        line-height: 260px;
+      }
+
+      &:nth-child(7) .el-aside {
+        line-height: 320px;
+      }
+    }
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      const item = {
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      };
+      return {
+        tableData: Array(20).fill(item)
+      }
+    }
+  };
+</script>
+
+## Container 布局容器
+用于布局的容器组件，方便快速搭建页面的基本结构：
+
+`<el-container>`：外层容器。当子元素中包含 `<el-header>` 或 `<el-footer>` 时，全部子元素会垂直上下排列，否则会水平左右排列。
+
+`<el-header>`：顶栏容器。
+
+`<el-aside>`：侧边栏容器。
+
+`<el-main>`：主要区域容器。
+
+`<el-footer>`：底栏容器。
+
+:::tip
+以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，`<el-container>` 的子元素只能是后四者，后四者的父元素也只能是 `<el-container>`。
+:::
+
+### 常见页面布局
+
+:::demo
+```html
+<el-container>
+  <el-header>Header</el-header>
+  <el-main>Main</el-main>
+</el-container>
+
+<el-container>
+  <el-header>Header</el-header>
+  <el-main>Main</el-main>
+  <el-footer>Footer</el-footer>
+</el-container>
+
+<el-container>
+  <el-aside width="200px">Aside</el-aside>
+  <el-main>Main</el-main>
+</el-container>
+
+<el-container>
+  <el-header>Header</el-header>
+  <el-container>
+    <el-aside width="200px">Aside</el-aside>
+    <el-main>Main</el-main>
+  </el-container>
+</el-container>
+
+<el-container>
+  <el-header>Header</el-header>
+  <el-container>
+    <el-aside width="200px">Aside</el-aside>
+    <el-container>
+      <el-main>Main</el-main>
+      <el-footer>Footer</el-footer>
+    </el-container>
+  </el-container>
+</el-container>
+
+<el-container>
+  <el-aside width="200px">Aside</el-aside>
+  <el-container>
+    <el-header>Header</el-header>
+    <el-main>Main</el-main>
+  </el-container>
+</el-container>
+
+<el-container>
+  <el-aside width="200px">Aside</el-aside>
+  <el-container>
+    <el-header>Header</el-header>
+    <el-main>Main</el-main>
+    <el-footer>Footer</el-footer>
+  </el-container>
+</el-container>
+
+<style>
+  .el-header, .el-footer {
+    background-color: #B3C0D1;
+    color: #333;
+    text-align: center;
+    line-height: 60px;
+  }
+  
+  .el-aside {
+    background-color: #D3DCE6;
+    color: #333;
+    text-align: center;
+    line-height: 200px;
+  }
+  
+  .el-main {
+    background-color: #E9EEF3;
+    color: #333;
+    text-align: center;
+    line-height: 160px;
+  }
+  
+  body > .el-container {
+    margin-bottom: 40px;
+  }
+  
+  .el-container:nth-child(5) .el-aside,
+  .el-container:nth-child(6) .el-aside {
+    line-height: 260px;
+  }
+  
+  .el-container:nth-child(7) .el-aside {
+    line-height: 320px;
+  }
+</style>
+```
+:::
+
+### 实例
+
+:::demo
+```html
+<el-container style="height: 500px; border: 1px solid #eee">
+  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
+    <el-menu :default-openeds="['1', '3']">
+      <el-submenu index="1">
+        <template slot="title"><i class="el-icon-message"></i>导航一</template>
+        <el-menu-item-group>
+          <template slot="title">分组一</template>
+          <el-menu-item index="1-1">选项1</el-menu-item>
+          <el-menu-item index="1-2">选项2</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="分组2">
+          <el-menu-item index="1-3">选项3</el-menu-item>
+        </el-menu-item-group>
+        <el-submenu index="1-4">
+          <template slot="title">选项4</template>
+          <el-menu-item index="1-4-1">选项4-1</el-menu-item>
+        </el-submenu>
+      </el-submenu>
+      <el-submenu index="2">
+        <template slot="title"><i class="el-icon-menu"></i>导航二</template>
+        <el-menu-item-group>
+          <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-group>
+        <el-menu-item-group title="分组2">
+          <el-menu-item index="2-3">选项3</el-menu-item>
+        </el-menu-item-group>
+        <el-submenu index="2-4">
+          <template slot="title">选项4</template>
+          <el-menu-item index="2-4-1">选项4-1</el-menu-item>
+        </el-submenu>
+      </el-submenu>
+      <el-submenu index="3">
+        <template slot="title"><i class="el-icon-setting"></i>导航三</template>
+        <el-menu-item-group>
+          <template slot="title">分组一</template>
+          <el-menu-item index="3-1">选项1</el-menu-item>
+          <el-menu-item index="3-2">选项2</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="分组2">
+          <el-menu-item index="3-3">选项3</el-menu-item>
+        </el-menu-item-group>
+        <el-submenu index="3-4">
+          <template slot="title">选项4</template>
+          <el-menu-item index="3-4-1">选项4-1</el-menu-item>
+        </el-submenu>
+      </el-submenu>
+    </el-menu>
+  </el-aside>
+  
+  <el-container>
+    <el-header style="text-align: right; font-size: 12px">
+      <el-dropdown>
+        <i class="el-icon-setting" style="margin-right: 15px"></i>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item>查看</el-dropdown-item>
+          <el-dropdown-item>新增</el-dropdown-item>
+          <el-dropdown-item>删除</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <span>王小虎</span>
+    </el-header>
+    
+    <el-main>
+      <el-table :data="tableData">
+        <el-table-column prop="date" label="日期" width="140">
+        </el-table-column>
+        <el-table-column prop="name" label="姓名" width="120">
+        </el-table-column>
+        <el-table-column prop="address" label="地址">
+        </el-table-column>
+      </el-table>
+    </el-main>
+  </el-container>
+</el-container>
+
+<style>
+  .el-header {
+    background-color: #B3C0D1;
+    color: #333;
+    line-height: 60px;
+  }
+  
+  .el-aside {
+    color: #333;
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      const item = {
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      };
+      return {
+        tableData: Array(20).fill(item)
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Container Attributes
+| 参数    | 说明     | 类型    | 可选值      | 默认值 |
+|---------|----------|---------|-------------|--------|
+| direction | 子元素的排列方向 | string | horizontal / vertical | 子元素中有 `el-header` 或 `el-footer` 时为 vertical，否则为 horizontal |
+
+### Header Attributes
+| 参数    | 说明     | 类型    | 可选值      | 默认值 |
+|---------|----------|---------|-------------|--------|
+| height | 顶栏高度 | string | — | 60px |
+
+### Aside Attributes
+| 参数    | 说明     | 类型    | 可选值      | 默认值 |
+|---------|----------|---------|-------------|--------|
+| width | 侧边栏宽度 | string | — | 300px |
+
+### Footer Attributes
+| 参数    | 说明     | 类型    | 可选值      | 默认值 |
+|---------|----------|---------|-------------|--------|
+| height | 底栏高度 | string | — | 60px |
\ No newline at end of file
diff --git a/examples/docs/zh-CN/custom-theme.md b/examples/docs/zh-CN/custom-theme.md
index 84a0e62448..50b36cd9cf 100644
--- a/examples/docs/zh-CN/custom-theme.md
+++ b/examples/docs/zh-CN/custom-theme.md
@@ -1,35 +1,56 @@
 ## 自定义主题
-Element 默认提供一套主题，CSS 命名采用 BEM 的风格方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面的方法。
+Element 默认提供一套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。我们提供了三种方法，可以进行不同程度的样式自定义。
 
-## 仅替换主题色
-如果仅希望更换 Element 的主题色，推荐使用[在线主题生成工具](https://elementui.github.io/theme-preview)。
-
-Element 默认的主题色是鲜艳、友好的蓝色。通过替换主题色，能够让 Element 的视觉更加符合具体项目的定位。
+### 仅替换主题色
+如果仅希望更换 Element 的主题色，推荐使用[在线主题生成工具](https://elementui.github.io/theme-chalk-preview)。Element 默认的主题色是鲜艳、友好的蓝色。通过替换主题色，能够让 Element 的视觉更加符合具体项目的定位。
 
 使用上述工具，可以很方便地实时预览主题色改变之后的视觉，同时它还可以基于新的主题色生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」和「搭配插件按需引入组件主题」部分）。
 
-如果希望进行除主题色之外的样式定制，请继续阅读。
+### 在项目中改变 SCSS 变量
+Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。新建一个样式文件，例如 `element-variables.scss`，写入以下内容：
+```html
+/* 改变主题色变量 */
+$--color-primary: teal;
+
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@import "~element-ui/packages/theme-chalk/src/index";
+```
+
+之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：
+```JS
+import Vue from 'vue'
+import Element from 'element-ui'
+import './element-variables.scss'
+
+Vue.use(Element)
+```
+
+:::tip
+需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。
+:::
 
-## 深层次的定制
-如果仅仅改变主题色不能满足你的需求，请按以下步骤进行更深层次的主题定制：
+### 命令行主题工具
+如果你的项目没有使用 SCSS，那么可以使用命令行主题工具进行深层次的主题定制：
 
-### 安装工具
+#### <strong>安装工具</strong>
 首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。
 ```shell
 npm i element-theme -g
 ```
 
-安装默认主题，可以从 npm 安装或者从 GitHub 拉取最新代码。
+安装白垩主题，可以从 npm 安装或者从 GitHub 拉取最新代码。
 ```shell
 # 从 npm
-npm i element-theme-default -D
+npm i element-theme-chalk -D
 
 # 从 GitHub
-npm i https://github.com/ElementUI/theme-default -D
+npm i https://github.com/ElementUI/theme-chalk -D
 ```
 
-### 初始化变量文件
-主题生成工具安装成功后，如果全局安装可以在命令行里通过 `et` 调用工具，如果安装在当前目录下，需要通过 `node_modules/.bin/et` 访问到命令。执行 `-i` 初始化变量文件。默认输出到 `element-variables.css`，当然你可以传参数指定文件输出目录。
+#### <strong>初始化变量文件</strong>
+主题生成工具安装成功后，如果全局安装可以在命令行里通过 `et` 调用工具，如果安装在当前目录下，需要通过 `node_modules/.bin/et` 访问到命令。执行 `-i` 初始化变量文件。默认输出到 `element-variables.scss`，当然你可以传参数指定文件输出目录。
 
 ```shell
 et -i [可以自定义变量文件]
@@ -37,32 +58,34 @@ et -i [可以自定义变量文件]
 > ✔ Generator variables file
 ```
 
-如果使用默认配置，执行后当前目录会有一个 `element-variables.css` 文件。内部包含了主题所用到的所有变量，它们使用 CSS4 的风格定义。大致结构如下：
+如果使用默认配置，执行后当前目录会有一个 `element-variables.scss` 文件。内部包含了主题所用到的所有变量，它们使用 SCSS 的格式定义。大致结构如下：
 ```css
-:root {
-
-  /* Colors
-  -------------------------- */
-  --color-primary: #20a0ff;
-  --color-success: #13ce66;
-  --color-warning: #f7ba2a;
-  --color-danger: #ff4949;
-  --color-info: #50BFFF;
-  --color-blue: #2e90fe;
-  --color-blue-light: #5da9ff;
-  --color-blue-lighter: rgba(var(--color-blue), 0.12);
-  --color-white: #fff;
-  --color-black: #000;
-  --color-grey: #C0CCDA;
+$--color-primary: #409EFF !default;
+$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
+$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
+$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
+$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
+$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
+$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
+$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
+$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
+$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
+
+$--color-success: #67c23a !default;
+$--color-warning: #e6a23c !default;
+$--color-danger: #f56c6c !default;
+$--color-info: #909399 !default;
+
+...
 ```
 
-### 修改变量
-直接编辑 `element-variables.css` 文件，例如修改主题色为红色。
+#### <strong>修改变量</strong>
+直接编辑 `element-variables.scss` 文件，例如修改主题色为红色。
 ```CSS
---color-primary: red;
+$--color-primary: red;
 ```
 
-### 编译主题
+#### <strong>编译主题</strong>
 保存文件后，到命令行里执行 `et` 编译主题，如果你想启用 `watch` 模式，实时编译主题，增加 `-w` 参数；如果你在初始化时指定了自定义变量文件，则需要增加 `-c` 参数，并带上你的变量文件名
 ```shell
 et
@@ -71,7 +94,7 @@ et
 > ✔ build element theme
 ```
 
-### 引入自定义主题
+#### <strong>引入自定义主题</strong>
 默认情况下编译的主题目录是放在 `./theme` 下，你可以通过 `-o` 参数指定打包目录。像引入默认主题一样，在代码里直接引用 `theme/index.css` 文件即可。
 
 ```javascript
@@ -82,7 +105,7 @@ import Vue from 'vue'
 Vue.use(ElementUI)
 ```
 
-### 搭配插件按需引入组件主题
+#### <strong>搭配插件按需引入组件主题</strong>
 如果是搭配 `babel-plugin-component` 一起使用，只需要修改 `.babelrc` 的配置，指定 `styleLibraryName` 路径为自定义主题相对于 `.babelrc` 的路径，注意要加 `~`。
 ```json
 {
@@ -95,4 +118,4 @@ Vue.use(ElementUI)
 }
 ```
 
-如果不清楚 `babel-plugin-component` 是什么，请阅读 <a href="./#/zh-CN/component/quickstart">快速上手</a> 一节。更多 `element-theme` 用法请参考[项目仓库](https://github.com/ElementUI/element-theme)。
+如果不清楚 `babel-plugin-component` 是什么，请阅读 <a href="./#/zh-CN/component/quickstart">快速上手</a> 一节。更多 `element-theme` 用法请参考[项目仓库](https://github.com/ElementUI/element-theme)。
\ No newline at end of file
diff --git a/examples/docs/zh-CN/date-picker.md b/examples/docs/zh-CN/date-picker.md
index b87ffc942f..1be2dbf8d1 100644
--- a/examples/docs/zh-CN/date-picker.md
+++ b/examples/docs/zh-CN/date-picker.md
@@ -2,14 +2,9 @@
   module.exports = {
     data() {
       return {
-        pickerOptions0: {
-          disabledDate(time) {
-            return time.getTime() < Date.now() - 8.64e7;
-          }
-        },
         pickerOptions1: {
           disabledDate(time) {
-            return time.getTime() < Date.now() - 8.64e7;
+            return time.getTime() > Date.now();
           },
           shortcuts: [{
             text: '今天',
@@ -65,7 +60,14 @@
         value4: '',
         value5: '',
         value6: '',
-        value7: ''
+        value7: '',
+        value8: '',
+        value9: '',
+        value10: '',
+        value11: '',
+        value12: '',
+        value13: '',
+        value14: ''
       };
     }
   };
@@ -75,6 +77,7 @@
   .demo-block.demo-date-picker .source {
     padding: 0;
     display: flex;
+    flex-wrap: wrap;
   }
 
   .demo-date-picker .block {
@@ -87,6 +90,20 @@
     }
   }
 
+  .demo-date-picker .container {
+    flex: 1;
+    border-right: solid 1px #EFF2F6;
+    .block {
+      border-right: none;
+      &:last-child {
+        border-top: solid 1px #EFF2F6;
+      }
+    }
+    &:last-child {
+      border-right: none;
+    }
+  }
+
   .demo-date-picker .demonstration {
     display: block;
     color: #8492a6;
@@ -111,8 +128,7 @@
     <el-date-picker
       v-model="value1"
       type="date"
-      placeholder="选择日期"
-      :picker-options="pickerOptions0">
+      placeholder="选择日期">
     </el-date-picker>
   </div>
   <div class="block">
@@ -131,12 +147,10 @@
   export default {
     data() {
       return {
-        pickerOptions0: {
-          disabledDate(time) {
-            return time.getTime() < Date.now() - 8.64e7;
-          }
-        },
         pickerOptions1: {
+          disabledDate(time) {
+            return time.getTime() > Date.now();
+          },
           shortcuts: [{
             text: '今天',
             onClick(picker) {
@@ -169,35 +183,46 @@
 
 ###  其他日期单位
 
-通过扩展基础的日期选择，可以选择周、月、年
+通过扩展基础的日期选择，可以选择周、月、年或多个日期
 
 :::demo
 ```html
-<div class="block">
-  <span class="demonstration">周</span>
-  <el-date-picker
-    v-model="value3"
-    type="week"
-    format="yyyy 第 WW 周"
-    placeholder="选择周">
-  </el-date-picker>
-</div>
-<div class="block">
-  <span class="demonstration">月</span>
-  <el-date-picker
-    v-model="value4"
-    type="month"
-    placeholder="选择月">
-  </el-date-picker>
+<div class="container">
+  <div class="block">
+    <span class="demonstration">周</span>
+    <el-date-picker
+      v-model="value3"
+      type="week"
+      format="yyyy 第 WW 周"
+      placeholder="选择周">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">月</span>
+    <el-date-picker
+      v-model="value4"
+      type="month"
+      placeholder="选择月">
+    </el-date-picker>
+  </div>
 </div>
-<div class="block">
-  <span class="demonstration">年</span>
-  <el-date-picker
-    v-model="value5"
-    align="right"
-    type="year"
-    placeholder="选择年">
-  </el-date-picker>
+<div class="container">
+  <div class="block">
+    <span class="demonstration">年</span>
+    <el-date-picker
+      v-model="value5"
+      type="year"
+      placeholder="选择年">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">多个日期</span>
+    <el-date-picker
+      type="dates"
+      v-model="value14"
+      placeholder="选择一个或多个日期">
+    </el-date-picker>
+  </div>
 </div>
 
 <script>
@@ -206,7 +231,8 @@
       return {
         value3: '',
         value4: '',
-        value5: ''
+        value5: '',
+        value14: ''
       };
     }
   };
@@ -218,15 +244,18 @@
 
 可在一个选择器中便捷地选择一个时间范围
 
-:::demo
+:::demo 在选择日期范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份，可以使用`unlink-panels`属性解除联动。
 ```html
 <template>
   <div class="block">
     <span class="demonstration">默认</span>
+    {{value6}}
     <el-date-picker
       v-model="value6"
       type="daterange"
-      placeholder="选择日期范围">
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期">
     </el-date-picker>
   </div>
   <div class="block">
@@ -235,7 +264,10 @@
       v-model="value7"
       type="daterange"
       align="right"
-      placeholder="选择日期范围"
+      unlink-panels
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
       :picker-options="pickerOptions2">
     </el-date-picker>
   </div>
@@ -281,6 +313,119 @@
 ```
 :::
 
+###  日期格式
+
+使用`format`指定输入框的格式；使用`value-format`指定绑定值的格式。
+
+默认情况下，组件接受并返回`Date`对象。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：
+
+:::warning
+请注意大小写
+:::
+
+| 格式 | 含义 | 备注 | 举例 |
+|------|------|------|------|------|
+| `yyyy` | 年 | | 2017 |
+| `M`  | 月 | 不补0 | 1 |
+| `MM` | 月 | | 01 |
+| `W`  | 周 | 仅周选择器的 `format` 可用；不补0 | 1 |
+| `WW` | 周 | 仅周选择器的 `format` 可用 | 01 |
+| `d`  | 日 | 不补0 | 2 |
+| `dd` | 日 | | 02 |
+| `H`  | 小时 | 24小时制；不补0 | 3 |
+| `HH` | 小时 | 24小时制 | 03 |
+| `h`  | 小时 | 12小时制，须和 `A` 或 `a` 使用；不补0 | 3 |
+| `hh` | 小时 | 12小时制，须和 `A` 或 `a` 使用 | 03 |
+| `m`  | 分钟 | 不补0 | 4 |
+| `mm` | 分钟 | | 04 |
+| `s`  | 秒 | 不补0 | 5 |
+| `ss` | 秒 | | 05 |
+| `A`  | AM/PM | 仅 `format` 可用，大写 | AM |
+| `a`  | am/pm | 仅 `format` 可用，小写 | am |
+| `timestamp` | JS时间戳 | 仅 `value-format` 可用；组件绑定值为`number`类型 | 1483326245000 |
+
+:::demo
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">默认为 Date 对象</span>
+    <div class="demonstration">值：{{ value10 }}</div>
+    <el-date-picker
+      v-model="value10"
+      type="date"
+      placeholder="选择日期"
+      format="yyyy 年 MM 月 dd 日">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">使用 value-format</span>
+    <div class="demonstration">值：{{ value11 }}</div>
+    <el-date-picker
+      v-model="value11"
+      type="date"
+      placeholder="选择日期"
+      format="yyyy 年 MM 月 dd 日"
+      value-format="yyyy-MM-dd">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">时间戳</span>
+    <div class="demonstration">值：{{ value12 }}</div>
+    <el-date-picker
+      v-model="value12"
+      type="date"
+      placeholder="选择日期"
+      format="yyyy 年 MM 月 dd 日"
+      value-format="timestamp">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value10: '',
+        value11: '',
+        value12: ''
+      };
+    }
+  };
+</script>
+```
+:::
+
+###  默认显示日期
+
+在选择日期范围时，指定起始日期和结束日期的默认时刻。
+
+:::demo 选择日期范围时，默认情况下，起始日期和结束日期的时间部分均为当天的 0 点 0 分 0 秒。通过`default-time`可以分别指定二者的具体时刻。`default-time`接受一个数组，其中的值为形如`12:00:00`的字符串，第一个值控制起始日期的时刻，第二个值控制结束日期的时刻。
+```html
+<template>
+  <div class="block">
+    <p>组件值：{{ value13 }}</p>
+    <el-date-picker
+      v-model="value13"
+      type="daterange"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      :default-time="['00:00:00', '23:59:59']">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value13: ''
+      };
+    }
+  };
+</script>
+```
+:::
+
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
@@ -289,14 +434,22 @@
 | editable | 文本框可输入 | boolean | — | true |
 | clearable | 是否显示清除按钮 | boolean | — | true |
 | size          | 输入框尺寸     | string          | large, small, mini  | — |
-| placeholder | 占位内容 | string | — | — |
-| type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
-| format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
+| placeholder | 非范围选择时的占位内容 | string | — | — |
+| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
+| end-placeholder | 范围选择时结束日期的占位内容 | string | — | — |
+| type | 显示类型 | string | year/month/date/dates/ week/datetime/datetimerange/daterange | date |
+| format | 显示在输入框中的格式 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | yyyy-MM-dd |
 | align | 对齐方式 | string | left, center, right | left |
 | popper-class | DatePicker 下拉框的类名 | string | — | — |
-|picker-options | 当前时间日期选择器特有的选项参考下表 | object |  — | {} |
-| range-separator | 选择范围时的分隔符 | string | - | ' - ' |
-| default-value | 可选，DatePicker打开时默认显示的时间 | Date | 可被new Date()解析 | - |
+| picker-options | 当前时间日期选择器特有的选项参考下表 | object |  — | {} |
+| range-separator | 选择范围时的分隔符 | string | — | '-' |
+| default-value | 可选，选择器打开时默认显示的时间 | Date | 可被`new Date()`解析 | — |
+| default-time | 范围选择时选中日期所使用的当日内具体时刻 | string[] | 数组，长度为 2，每项值为字符串，形如`12:00:00`，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 `00:00:00` | — |
+| value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | — |
+| name | 原生属性 | string | — | — |
+| unlink-panels | 在范围选择器里取消两个日期面板之间的联动 | boolean | — | false |
+| prefix-icon | 自定义头部图标的类名 | string | — | el-icon-date |
+| clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |
 
 ### Picker Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
@@ -304,7 +457,7 @@
 | shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — |
 | disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — |
 | firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |
-| onPick | 选中日期后会执行的回调，只有当 `daterange` 或 `datetimerange` 才生效 | Function({ maxDate, minDate }) | - | - |
+| onPick | 选中日期后会执行的回调，只有当 `daterange` 或 `datetimerange` 才生效 | Function({ maxDate, minDate }) | — | — |
 
 ### Shortcuts
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
@@ -315,5 +468,11 @@
 ### Events
 | 事件名称      | 说明    | 回调参数      |
 |---------|--------|---------|
-| change | 当 input 的值改变时触发，返回值和文本框一致 | 格式化后的值 |
+| change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致，可受 `value-format` 控制 |
+| blur | 当 input 失去焦点时触发 | 组件实例 |
+| focus | 当 input 获得焦点时触发 | 组件实例 |
 
+### Methods
+| 方法名 | 说明 | 参数 |
+| ---- | ---- | ---- |
+| focus | 使 input 获取焦点 | — |
diff --git a/examples/docs/zh-CN/datetime-picker.md b/examples/docs/zh-CN/datetime-picker.md
index e2b18de51f..8ba2e32927 100644
--- a/examples/docs/zh-CN/datetime-picker.md
+++ b/examples/docs/zh-CN/datetime-picker.md
@@ -53,20 +53,11 @@
         },
         value1: '',
         value2: '',
-        value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
-        value4: '',
+        value3: '',
+        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
         value5: '',
         value6: '',
-        value7: '',
-        value8: '',
-        value9: '',
-        value10: '',
-        value11: '',
-        value12: '',
-        value13: '',
-        value14: '',
-        value15: '',
-        value16: ''
+        value7: ''
       };
     }
   };
@@ -100,6 +91,10 @@
 
 在同一个选择器里选择日期和时间
 
+:::tip
+DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其他选项可以参照 DatePicker 和 TimePicker。
+:::
+
 ###  日期和时间点
 
 :::demo 通过设置`type`属性为`datetime`，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。
@@ -123,6 +118,15 @@
       :picker-options="pickerOptions1">
     </el-date-picker>
   </div>
+  <div class="block">
+    <span class="demonstration">设置默认时间</span>
+    <el-date-picker
+      v-model="value3"
+      type="datetime"
+      placeholder="选择日期时间"
+      default-time="12:00:00">
+    </el-date-picker>
+  </div>
 </template>
 
 <script>
@@ -152,7 +156,8 @@
           }]
         },
         value1: '',
-        value2: ''
+        value2: '',
+        value3: ''
       };
     }
   };
@@ -168,18 +173,22 @@
   <div class="block">
     <span class="demonstration">默认</span>
     <el-date-picker
-      v-model="value3"
+      v-model="value4"
       type="datetimerange"
-      placeholder="选择时间范围">
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期">
     </el-date-picker>
   </div>
   <div class="block">
     <span class="demonstration">带快捷选项</span>
     <el-date-picker
-      v-model="value4"
+      v-model="value5"
       type="datetimerange"
       :picker-options="pickerOptions2"
-      placeholder="选择时间范围"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
       align="right">
     </el-date-picker>
   </div>
@@ -216,8 +225,49 @@
             }
           }]
         },
-        value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
-        value4: ''
+        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+        value5: ''
+      };
+    }
+  };
+</script>
+```
+:::
+
+### 默认的起始与结束时刻
+
+:::demo 使用`datetimerange`进行范围选择时，在日期选择面板中选定起始与结束的日期，默认会使用该日期的`00:00:00`作为起始与结束的时刻；通过选项`default-time`可以控制选中起始与结束日期时所使用的具体时刻。`default-time`接受一个数组，数组每项值为字符串，形如`12:00:00`，其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">起始日期时刻为 12:00:00</span>
+    <el-date-picker
+      v-model="value6"
+      type="datetimerange"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      :default-time="['12:00:00']">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</span>
+    <el-date-picker
+      v-model="value7"
+      type="datetimerange"
+      align="right"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      :default-time="['12:00:00', '08:00:00']">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value6: '',
+        value7: ''
       };
     }
   };
@@ -233,19 +283,30 @@
 | editable | 文本框可输入 | boolean | — | true |
 | clearable | 是否显示清除按钮 | boolean | — | true |
 | size          | 输入框尺寸     | string          | large, small, mini  | — |
-| placeholder | 占位内容 | string | — | — |
+| placeholder | 非范围选择时的占位内容 | string | — | — |
+| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
+| end-placeholder | 范围选择时结束日期的占位内容 | string | — | — |
+| time-arrow-control | 是否使用箭头进行时间选择 | boolean | — | false |
 | type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
-| format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
+| format | 显示在输入框中的格式 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | yyyy-MM-dd |
 | align | 对齐方式 | string | left, center, right | left |
 | popper-class | DateTimePicker 下拉框的类名 | string | — | — |
 | picker-options | 当前时间日期选择器特有的选项参考下表 | object |  — | {} |
-| range-separator | 选择范围时的分隔符 | string | - | ' - ' |
+| range-separator | 选择范围时的分隔符 | string | - | '-' |
+| default-value | 可选，选择器打开时默认显示的时间 | Date | 可被`new Date()`解析 | — |
+| default-time | 选中日期后的默认具体时刻 | 非范围选择时：string / 范围选择时：string[] | 非范围选择时：形如`12:00:00`的字符串；范围选择时：数组，长度为 2，每项值为字符串，形如`12:00:00`，第一项指定开始日期的时刻，第二项指定结束日期的时刻。不指定会使用时刻 `00:00:00` | — |
+| value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | — |
+| name | 原生属性 | string | — | — |
+| unlink-panels | 在范围选择器里取消两个日期面板之间的联动 | boolean | — | false |
+| prefix-icon | 自定义头部图标的类名 | string | — | el-icon-date |
+| clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |
 
 ### Picker Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — |
 | disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — |
+| firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |
 
 ### Shortcuts
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
@@ -253,10 +314,14 @@
 | text | 标题文本 | string | — | — |
 | onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — |
 
-
 ### Events
 | Event Name | Description | Parameters |
 |---------|--------|---------|
-| change | 当 input 的值改变时触发，返回值和文本框一致 | formatted value |
-
+| change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致，可受 `value-format` 控制 |
+| blur | 当 input 失去焦点时触发 | 组件实例 |
+| focus | 当 input 获得焦点时触发 | 组件实例 |
 
+### Methods
+| 方法名 | 说明 | 参数 |
+| ---- | ---- | ---- |
+| focus | 使 input 获取焦点 | — |
diff --git a/examples/docs/zh-CN/dialog.md b/examples/docs/zh-CN/dialog.md
index 9b2d697ad6..091a423150 100644
--- a/examples/docs/zh-CN/dialog.md
+++ b/examples/docs/zh-CN/dialog.md
@@ -22,6 +22,9 @@
         dialogVisible: false,
         dialogTableVisible: false,
         dialogFormVisible: false,
+        outerVisible: false,
+        innerVisible: false,
+        centerDialogVisible: false,
         form: {
           name: '',
           region: '',
@@ -76,7 +79,7 @@
 
 Dialog 弹出一个对话框，适合需要定制性更大的场景。
 
-:::demo 需要设置`visible`属性，它接收`Boolean`，当为`true`时显示 Dialog。Dialog 分为两个部分：`body`和`footer`，`footer`需要具名为`footer`的`slot`。`title`属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了`beforeClose`的用法。
+:::demo 需要设置`visible`属性，它接收`Boolean`，当为`true`时显示 Dialog。Dialog 分为两个部分：`body`和`footer`，`footer`需要具名为`footer`的`slot`。`title`属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了`before-close`的用法。
 
 ```html
 <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
@@ -84,7 +87,7 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景。
 <el-dialog
   title="提示"
   :visible.sync="dialogVisible"
-  size="tiny"
+  width="30%"
   :before-close="handleClose">
   <span>这是一段信息</span>
   <span slot="footer" class="dialog-footer">
@@ -114,6 +117,10 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景。
 ```
 :::
 
+:::tip
+`before-close` 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 `footer` 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 `before-close` 的相关逻辑。
+:::
+
 ### 自定义内容
 
 Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例。
@@ -137,7 +144,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
 <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
   <el-form :model="form">
     <el-form-item label="活动名称" :label-width="formLabelWidth">
-      <el-input v-model="form.name" auto-complete="off"></el-input>
+      <el-input v-model="form.name" autocomplete="off"></el-input>
     </el-form-item>
     <el-form-item label="活动区域" :label-width="formLabelWidth">
       <el-select v-model="form.region" placeholder="请选择活动区域">
@@ -193,21 +200,99 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
 ```
 :::
 
+### 嵌套的 Dialog
+如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 `append-to-body` 属性。
+:::demo 正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，我们提供了`append-to-body`属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。
+```html
+<template>
+  <el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>
+  
+  <el-dialog title="外层 Dialog" :visible.sync="outerVisible">
+    <el-dialog
+      width="30%"
+      title="内层 Dialog"
+      :visible.sync="innerVisible"
+      append-to-body>
+    </el-dialog>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="outerVisible = false">取 消</el-button>
+      <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        outerVisible: false,
+        innerVisible: false
+      };
+    }
+  }
+</script>
+```
+:::
+
+### 居中布局
+
+标题和底部可水平居中
+
+:::demo 将`center`设置为`true`即可使标题和底部居中。`center`仅影响标题和底部区域。Dialog 的内容是任意的，在一些情况下，内容并不适合居中布局。如果需要内容也水平居中，请自行为其添加 CSS。
+
+```html
+<el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>
+
+<el-dialog
+  title="提示"
+  :visible.sync="centerDialogVisible"
+  width="30%"
+  center>
+  <span>需要注意的是内容是默认不居中的</span>
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="centerDialogVisible = false">取 消</el-button>
+    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
+  </span>
+</el-dialog>
+
+<script>
+  export default {
+    data() {
+      return {
+        centerDialogVisible: false
+      };
+    }
+  };
+</script>
+```
+:::
+
+:::tip
+Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 `ref` 获取相应组件，请在 `open` 事件回调中进行。
+:::
+
+:::tip
+如果 `visible` 属性绑定的变量位于 Vuex 的 store 内，那么 `.sync` 不会正常工作。此时需要去除 `.sync` 修饰符，同时监听 Dialog 的 `open` 和 `close` 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 `visible` 属性绑定的变量的值。
+:::
+
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | visible   | 是否显示 Dialog，支持 .sync 修饰符 | boolean | — | false |
 | title     | Dialog 的标题，也可通过具名 slot （见下表）传入 | string    | — | — |
-| size      | Dialog 的大小 | string    | tiny/small/large/full | small |
-| top       | Dialog CSS 中的 top 值（仅在 size 不为 full 时有效） | string | — | 15% |
+| width     | Dialog 的宽度 | string    | — | 50% |
+| fullscreen     | 是否为全屏 Dialog | boolean    | — | false |
+| top       | Dialog CSS 中的 margin-top 值 | string | — | 15vh |
 | modal     | 是否需要遮罩层   | boolean   | — | true |
 | modal-append-to-body     | 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上   | boolean   | — | true |
+| append-to-body     | Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true   | boolean   | — | false |
 | lock-scroll | 是否在 Dialog 出现时将 body 滚动锁定 | boolean | — | true |
 | custom-class      | Dialog 的自定义类名 | string    | — | — |
 | close-on-click-modal | 是否可以通过点击 modal 关闭 Dialog | boolean    | — | true |
 | close-on-press-escape | 是否可以通过按下 ESC 关闭 Dialog | boolean    | — | true |
 | show-close | 是否显示关闭按钮 | boolean    | — | true |
 | before-close | 关闭前的回调，会暂停 Dialog 的关闭 | function(done)，done 用于关闭 Dialog | — | — |
+| center | 是否对头部和底部采用居中布局 | boolean | — | false |
 
 ### Slot
 | name | 说明 |
@@ -219,5 +304,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
 ### Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
-| close  | Dialog 关闭的回调 | — |
 | open  | Dialog 打开的回调 | — |
+| opened  | Dialog 打开动画结束时的回调 | — |
+| close  | Dialog 关闭的回调 | — |
+| closed | Dialog 关闭动画结束时的回调 | — |
diff --git a/examples/docs/zh-CN/dropdown.md b/examples/docs/zh-CN/dropdown.md
index d367862e41..45c0cd45ce 100644
--- a/examples/docs/zh-CN/dropdown.md
+++ b/examples/docs/zh-CN/dropdown.md
@@ -9,9 +9,9 @@
     }
     .el-dropdown-link {
       cursor: pointer;
-      color: #20a0ff;
+      color: #409EFF;
     }
-    .el-icon-caret-bottom {
+    .el-icon-arrow-down {
       font-size: 12px;
     }
   }
@@ -63,7 +63,7 @@
 ```html
 <el-dropdown>
   <span class="el-dropdown-link">
-    下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>
+    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
   </span>
   <el-dropdown-menu slot="dropdown">
     <el-dropdown-item>黄金糕</el-dropdown-item>
@@ -74,6 +74,17 @@
   </el-dropdown-menu>
 </el-dropdown>
 ```
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+</style>
+
 :::
 
 ### 触发对象
@@ -85,7 +96,7 @@
 ```html
 <el-dropdown>
   <el-button type="primary">
-    更多菜单<i class="el-icon-caret-bottom el-icon--right"></i>
+    更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
   </el-button>
   <el-dropdown-menu slot="dropdown">
     <el-dropdown-item>黄金糕</el-dropdown-item>
@@ -106,6 +117,28 @@
   </el-dropdown-menu>
 </el-dropdown>
 
+<style>
+  .el-dropdown {
+    vertical-align: top;
+  }
+  .el-dropdown + .el-dropdown {
+    margin-left: 15px;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+</style>
+
+<script>
+  export default {
+    methods: {
+      handleClick() {
+        alert('button click');
+      }
+    }
+  }
+</script>
+
 ```
 :::
 
@@ -120,7 +153,7 @@
     <span class="demonstration">hover 激活</span>
     <el-dropdown>
       <span class="el-dropdown-link">
-        下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>
+        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
       </span>
       <el-dropdown-menu slot="dropdown">
         <el-dropdown-item>黄金糕</el-dropdown-item>
@@ -135,7 +168,7 @@
     <span class="demonstration">click 激活</span>
     <el-dropdown trigger="click">
       <span class="el-dropdown-link">
-        下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>
+        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
       </span>
       <el-dropdown-menu slot="dropdown">
         <el-dropdown-item>黄金糕</el-dropdown-item>
@@ -148,6 +181,23 @@
   </el-col>
 </el-row>
 ```
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+  .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+</style>
+
 :::
 
 ### 菜单隐藏方式
@@ -158,7 +208,7 @@
 ```html
 <el-dropdown :hide-on-click="false">
   <span class="el-dropdown-link">
-    下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>
+    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
   </span>
   <el-dropdown-menu slot="dropdown">
     <el-dropdown-item>黄金糕</el-dropdown-item>
@@ -168,6 +218,16 @@
     <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
   </el-dropdown-menu>
 </el-dropdown>
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+</style>
 ```
 :::
 
@@ -179,7 +239,7 @@
 ```html
 <el-dropdown @command="handleCommand">
   <span class="el-dropdown-link">
-    下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>
+    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
   </span>
   <el-dropdown-menu slot="dropdown">
     <el-dropdown-item command="a">黄金糕</el-dropdown-item>
@@ -189,6 +249,17 @@
     <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
   </el-dropdown-menu>
 </el-dropdown>
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+</style>
+
 <script>
   export default {
     methods: {
@@ -201,15 +272,77 @@
 ```
 :::
 
+### 不同尺寸
+
+Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的尺寸。
+
+:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。
+
+```html
+<el-dropdown split-button type="primary">
+  默认尺寸
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>黄金糕</el-dropdown-item>
+    <el-dropdown-item>狮子头</el-dropdown-item>
+    <el-dropdown-item>螺蛳粉</el-dropdown-item>
+    <el-dropdown-item>双皮奶</el-dropdown-item>
+    <el-dropdown-item>蚵仔煎</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<el-dropdown size="medium" split-button type="primary">
+  中等尺寸
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>黄金糕</el-dropdown-item>
+    <el-dropdown-item>狮子头</el-dropdown-item>
+    <el-dropdown-item>螺蛳粉</el-dropdown-item>
+    <el-dropdown-item>双皮奶</el-dropdown-item>
+    <el-dropdown-item>蚵仔煎</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<el-dropdown size="small" split-button type="primary">
+  小型尺寸
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>黄金糕</el-dropdown-item>
+    <el-dropdown-item>狮子头</el-dropdown-item>
+    <el-dropdown-item>螺蛳粉</el-dropdown-item>
+    <el-dropdown-item>双皮奶</el-dropdown-item>
+    <el-dropdown-item>蚵仔煎</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<el-dropdown size="mini" split-button type="primary">
+  超小尺寸
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>黄金糕</el-dropdown-item>
+    <el-dropdown-item>狮子头</el-dropdown-item>
+    <el-dropdown-item>螺蛳粉</el-dropdown-item>
+    <el-dropdown-item>双皮奶</el-dropdown-item>
+    <el-dropdown-item>蚵仔煎</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+```
+:::
+
 ### Dropdown Attributes
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 | type          | 菜单按钮类型，同 Button 组件(只在`split-button`为 true 的情况下有效)   | string  |          —             |    —     |
-| size          | 菜单按钮尺寸，同 Button 组件(只在`split-button`为 true 的情况下有效)     | string          | — | — |
+| size          | 菜单尺寸，在`split-button`为 true 的情况下也对触发按钮生效  | string | medium / small / mini | — |
 | split-button  | 下拉触发元素呈现为按钮组    | boolean  |    —  |  false |
-| menu-align    | 菜单水平对齐方向     | string          | start, end  | end |
+| placement    | 菜单弹出位置     | string | top/top-start/top-end/bottom/bottom-start/bottom-end  | bottom-end |
 | trigger       | 触发下拉的行为     | string          | hover, click  | hover |
 | hide-on-click | 是否在点击菜单项后隐藏菜单     | boolean          | — | true |
+| show-timeout  | 展开下拉菜单的延时（仅在 trigger 为 hover 时有效）| number          | — | 250 |
+| hide-timeout  | 收起下拉菜单的延时（仅在 trigger 为 hover 时有效）| number          | — | 150 |
+
+### Dropdown Slots
+
+| Name | 说明 |
+|------|--------|
+| — | 触发下拉列表显示的元素。 注意： 必须是一个元素或者或者组件  |
+| dropdown | 下拉列表，通常是 `<el-dropdown-menu>` 组件     |
 
 ### Dropdown Events
 | 事件名称      | 说明    | 回调参数      |
@@ -221,6 +354,6 @@
 ### Dropdown Menu Item Attributes
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
-| command       | 指令     | string          | — | — |
+| command       | 指令     | string/number/object          | — | — |
 | disabled      | 禁用     | boolean          | — | false |
 | divided       | 显示分割线     | boolean          | — | false |
diff --git a/examples/docs/zh-CN/form.md b/examples/docs/zh-CN/form.md
index 56970a540f..b237bea24e 100644
--- a/examples/docs/zh-CN/form.md
+++ b/examples/docs/zh-CN/form.md
@@ -47,6 +47,16 @@
           resource: '',
           desc: ''
         },
+        sizeForm: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
         formInline: {
           user: '',
           region: ''
@@ -156,10 +166,10 @@
 <style>
   .demo-form.demo-zh-CN {
     .el-select .el-input {
-      width: 360px;
+      width: 380px;
     }
     .el-form {
-      width: 440px;
+      width: 460px;
     }
 
     .line {
@@ -196,7 +206,7 @@
       }
     }
     .demo-form-normal {
-      width: 440px;
+      width: 460px;
     }
     .demo-form-inline {
       width: auto;
@@ -236,7 +246,7 @@
 
 包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。
 
-::: demo 在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker
+:::demo 在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker
 ```html
 <el-form ref="form" :model="form" label-width="80px">
   <el-form-item label="活动名称">
@@ -258,7 +268,7 @@
     </el-col>
   </el-form-item>
   <el-form-item label="即时配送">
-    <el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
+    <el-switch v-model="form.delivery"></el-switch>
   </el-form-item>
   <el-form-item label="活动性质">
     <el-checkbox-group v-model="form.type">
@@ -308,11 +318,18 @@
 ```
 :::
 
+:::tip
+W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2)：
+> <i>When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.</i>
+
+即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 `<el-form>` 标签上添加 `@submit.native.prevent`。
+:::
+
 ### 行内表单
 
 当垂直方向空间受限且表单较简单时，可以在一行内放置表单。
 
-::: demo 设置 `inline` 属性可以让表单域变为行内的表单域
+:::demo 设置 `inline` 属性可以让表单域变为行内的表单域
 ```html
 <el-form :inline="true" :model="formInline" class="demo-form-inline">
   <el-form-item label="审批人">
@@ -323,7 +340,8 @@
       <el-option label="区域一" value="shanghai"></el-option>
       <el-option label="区域二" value="beijing"></el-option>
     </el-select>
-  </el-form-item><el-form-item>
+  </el-form-item>
+  <el-form-item>
     <el-button type="primary" @click="onSubmit">查询</el-button>
   </el-form-item>
 </el-form>
@@ -351,7 +369,7 @@
 
 根据具体目标和制约因素，选择最佳的标签对齐方式。
 
-::: demo 通过设置 `label-position` 属性可以改变表单域标签的位置，可选值为 `top`、`left`，当设为 `top` 时标签会置于表单域的顶部
+:::demo 通过设置 `label-position` 属性可以改变表单域标签的位置，可选值为 `top`、`left`，当设为 `top` 时标签会置于表单域的顶部
 ```html
 <el-radio-group v-model="labelPosition" size="small">
   <el-radio-button label="left">左对齐</el-radio-button>
@@ -391,7 +409,7 @@
 
 在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。
 
-::: demo Form 组件提供了表单验证的功能，只需要通过 `rule` 属性传入约定的验证规则，并 Form-Item 的 `prop` 属性设置为需校验的字段名即可。校验规则参见 [async-validator](https://github.com/yiminghe/async-validator)
+:::demo Form 组件提供了表单验证的功能，只需要通过 `rules` 属性传入约定的验证规则，并将 Form-Item 的 `prop` 属性设置为需校验的字段名即可。校验规则参见 [async-validator](https://github.com/yiminghe/async-validator)
 ```html
 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
   <el-form-item label="活动名称" prop="name">
@@ -417,7 +435,7 @@
     </el-col>
   </el-form-item>
   <el-form-item label="即时配送" prop="delivery">
-    <el-switch on-text="" off-text="" v-model="ruleForm.delivery"></el-switch>
+    <el-switch v-model="ruleForm.delivery"></el-switch>
   </el-form-item>
   <el-form-item label="活动性质" prop="type">
     <el-checkbox-group v-model="ruleForm.type">
@@ -503,14 +521,16 @@
 
 ### 自定义校验规则
 
-::: demo 这个例子中展示了如何使用自定义验证规则来完成密码的二次验证
+这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。
+
+:::demo 本例还使用`status-icon`属性为输入框添加了表示校验结果的反馈图标。
 ```html
-<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
+<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
   <el-form-item label="密码" prop="pass">
-    <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
+    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
   </el-form-item>
   <el-form-item label="确认密码" prop="checkPass">
-    <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
+    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
   </el-form-item>
   <el-form-item label="年龄" prop="age">
     <el-input v-model.number="ruleForm2.age"></el-input>
@@ -599,7 +619,7 @@
 
 ### 动态增减表单项
 
-::: demo 除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则
+:::demo 除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则
 ```html
 <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
   <el-form-item
@@ -607,7 +627,7 @@
     label="邮箱"
     :rules="[
       { required: true, message: '请输入邮箱地址', trigger: 'blur' },
-      { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
+      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
     ]"
   >
     <el-input v-model="dynamicValidateForm.email"></el-input>
@@ -675,7 +695,7 @@
 
 ### 数字类型验证
 
-::: demo 数字类型的验证需要在 `v-model` 处加上 `.number` 的修饰符，这是 `Vue` 自身提供的用于将绑定值转化为 `number` 类型的修饰符。
+:::demo 数字类型的验证需要在 `v-model` 处加上 `.number` 的修饰符，这是 `Vue` 自身提供的用于将绑定值转化为 `number` 类型的修饰符。
 ```html
 <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
   <el-form-item
@@ -686,7 +706,7 @@
       { type: 'number', message: '年龄必须为数字值'}
     ]"
   >
-    <el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
+    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
   </el-form-item>
   <el-form-item>
     <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
@@ -726,6 +746,76 @@
 嵌套在 `el-form-item` 中的 `el-form-item` 标签宽度默认为零，不会继承 `el-form` 的 `label-width`。如果需要可以为其单独设置 `label-width` 属性。
 :::
 
+### 表单内组件尺寸控制
+
+通过设置 Form 上的 `size` 属性可以使该表单内所有可调节大小的组件继承该尺寸。Form-Item 也具有该属性。
+
+:::demo 如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的`size`属性，直接为这个表单项或表单组件设置自己的`size`即可。
+```html
+<el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
+  <el-form-item label="活动名称">
+    <el-input v-model="sizeForm.name"></el-input>
+  </el-form-item>
+  <el-form-item label="活动区域">
+    <el-select v-model="sizeForm.region" placeholder="请选择活动区域">
+      <el-option label="区域一" value="shanghai"></el-option>
+      <el-option label="区域二" value="beijing"></el-option>
+    </el-select>
+  </el-form-item>
+  <el-form-item label="活动时间">
+    <el-col :span="11">
+      <el-date-picker type="date" placeholder="选择日期" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>
+    </el-col>
+    <el-col class="line" :span="2">-</el-col>
+    <el-col :span="11">
+      <el-time-picker type="fixed-time" placeholder="选择时间" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
+    </el-col>
+  </el-form-item>
+  <el-form-item label="活动性质">
+    <el-checkbox-group v-model="sizeForm.type">
+      <el-checkbox-button label="美食/餐厅线上活动" name="type"></el-checkbox-button>
+      <el-checkbox-button label="地推活动" name="type"></el-checkbox-button>
+      <el-checkbox-button label="线下主题活动" name="type"></el-checkbox-button>
+    </el-checkbox-group>
+  </el-form-item>
+  <el-form-item label="特殊资源">
+    <el-radio-group v-model="sizeForm.resource" size="medium">
+      <el-radio border label="线上品牌商赞助"></el-radio>
+      <el-radio border label="线下场地免费"></el-radio>
+    </el-radio-group>
+  </el-form-item>
+  <el-form-item size="large">
+    <el-button type="primary" @click="onSubmit">立即创建</el-button>
+    <el-button>取消</el-button>
+  </el-form-item>
+</el-form>
+
+<script>
+  export default {
+    data() {
+      return {
+        sizeForm: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        }
+      };
+    },
+    methods: {
+      onSubmit() {
+        console.log('submit!');
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### Form Attributes
 
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
@@ -733,18 +823,30 @@
 | model   | 表单数据对象 | object      |                  —                |  — |
 | rules    | 表单验证规则 | object | — | — |
 | inline    | 行内表单模式 | boolean | — | false |
-| label-position | 表单域标签的位置 | string |  right/left/top            | right |
+| label-position | 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 `label-width` | string |  right/left/top            | right |
 | label-width | 表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值 | string | — | — |
 | label-suffix | 表单域标签的后缀 | string | — | — |
+| hide-required-asterisk | 是否显示必填字段的标签旁边的红色星号 | boolean | — | false |
 | show-message  | 是否显示校验错误信息 | boolean | — | true |
+| inline-message  | 是否以行内形式展示校验信息 | boolean | — | false |
+| status-icon  | 是否在输入框中显示校验结果反馈图标 | boolean | — | false |
+| validate-on-rule-change  | 是否在 `rules` 属性改变后立即触发一次验证 | boolean | — | true |
+| size  | 用于控制该表单内组件的尺寸 | string | medium / small / mini | — |
+| disabled | 是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效 | boolean | — | false |
 
 ### Form Methods
 
 | 方法名      | 说明          | 参数
 |---------- |-------------- | --------------
-| validate | 对整个表单进行校验的方法 | Function(callback: Function(boolean))
+| validate | 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise | Function(callback: Function(boolean, object))
 | validateField | 对部分表单字段进行校验的方法 | Function(prop: string, callback: Function(errorMessage: string))
-| resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | -
+| resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | —
+| clearValidate | 移除表单项的校验结果。传入待移除的表单项的 prop 属性组成的数组，如不传则移除整个表单的校验结果 | Function(props: array)
+
+### Form Events
+| 事件名称 | 说明    | 回调参数  |
+|--------- |-------- |---------- |
+| validate | 任一表单项被校验后触发 | 被校验的表单项 prop 值，校验是否通过，错误消息（如果存在） |
 
 ### Form-Item Attributes
 
@@ -753,13 +855,27 @@
 | prop    | 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 | string    | 传入 Form 组件的 `model` 中的字段 | — |
 | label | 标签文本 | string | — | — |
 | label-width | 表单域标签的的宽度，例如 '50px' | string |       —       | — |
-| required | 是否必填，如不设置，则会根据校验规则自动生成 | bolean | — | false |
+| required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | — | false |
 | rules    | 表单验证规则 | object | — | — |
 | error    | 表单域验证错误信息, 设置该值会使表单验证状态变为`error`，并显示该错误信息 | string | — | — |
 | show-message  | 是否显示校验错误信息 | boolean | — | true |
+| inline-message  | 以行内形式展示校验信息 | boolean | — | false |
+| size  | 用于控制该表单域下组件的尺寸 | string | medium / small / mini | - |
 
 ### Form-Item Slot
 | name | 说明 |
 |------|--------|
 | — | Form Item 的内容 |
 | label | 标签文本的内容 |
+
+### Form-Item Scoped Slot
+|  name  |   说明  |
+|--------|--------|
+|  error | 自定义表单校验信息的显示方式，参数为 { error } |
+
+### Form-Item Methods
+
+| 方法名      | 说明          | 参数
+|---------- |-------------- | --------------
+| resetField | 对该表单项进行重置，将其值重置为初始值并移除校验结果 | -
+| clearValidate | 移除该表单项的校验结果 | -
diff --git a/examples/docs/zh-CN/home.md b/examples/docs/zh-CN/home.md
deleted file mode 100644
index f6a32dde25..0000000000
--- a/examples/docs/zh-CN/home.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 组件说明文档
-
-<script>
-  import { addClass } from 'examples/dom/class.js';
-
-  module.exports = {
-    ready() {
-      addClass(this.$el.parentNode, 'no-toc')
-    }
-  }
-</script>
\ No newline at end of file
diff --git a/examples/docs/zh-CN/i18n.md b/examples/docs/zh-CN/i18n.md
index 871fd656ad..ee9c651187 100644
--- a/examples/docs/zh-CN/i18n.md
+++ b/examples/docs/zh-CN/i18n.md
@@ -114,7 +114,7 @@ const i18n = new VueI18n({
 })
 
 Vue.use(Element, {
-  i18n: (key, value) => i18n.vm._t(key, value)
+  i18n: (key, value) => i18n.t(key, value)
 })
 
 new Vue({ i18n }).$mount('#app')
@@ -209,7 +209,7 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
   <li>希腊语（el）</li>
   <li>斯洛伐克语（sk）</li>
   <li>加泰罗尼亚语（ca）</li>
-  <li>捷克语（cz）</li>
+  <li>捷克语（cs-CZ）</li>
   <li>乌克兰语（ua）</li>
   <li>土库曼语（tk）</li>
   <li>泰米尔语（ta）</li>
@@ -217,6 +217,17 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
   <li>南非荷兰语（af-ZA）</li>
   <li>爱沙尼亚语（ee）</li>
   <li>斯洛文尼亚语（sl）</li>
+  <li>阿拉伯语（ar）</li>
+  <li>希伯来语（he）</li>
+  <li>立陶宛语（lt）</li>
+  <li>蒙古语（mn）</li>
+  <li>哈萨克斯坦语（kz）</li>
+  <li>匈牙利语（hu）</li>
+  <li>罗马尼亚语（ro）</li>
+  <li>库尔德语（ku）</li>
+  <li>维吾尔语（ug-CN）</li>
+  <li>高棉语（km）</li>
+  <li>塞尔维亚语（sr）</li>
 </ul>
 
-如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/ElemeFE/element/tree/master/src/locale/lang) 添加一个语言配置文件即可。
+如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/ElemeFE/element/tree/dev/src/locale/lang) 添加一个语言配置文件即可。
diff --git a/examples/docs/zh-CN/icon.md b/examples/docs/zh-CN/icon.md
index d0388e41fd..35c5021f3a 100644
--- a/examples/docs/zh-CN/icon.md
+++ b/examples/docs/zh-CN/icon.md
@@ -11,8 +11,7 @@
 </script>
 <style>
   .demo-icon .source > i {
-    font-size: 24px;
-    color: #8492a6;
+    color: #606266;
     margin: 0 20px;
     font-size: 1.5em;
     vertical-align: middle;
@@ -22,7 +21,7 @@
     margin: 0 20px;
   }
 
-  .icon-list {
+  .page-component .content > ul.icon-list {
     overflow: hidden;
     list-style: none;
     padding: 0;
@@ -46,19 +45,28 @@
 
     @utils-vertical-center;
 
-    & span {
+    span {
       display: inline-block;
       line-height: normal;
       vertical-align: middle;
       font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
       color: #99a9bf;
     }
-    & i {
+    
+    i {
       display: block;
-      font-size: 24px;
+      font-size: 32px;
       margin-bottom: 15px;
-      color: #8492a6;
+      color: #606266;
     }
+    
+    .icon-name {
+      display: inline-block;
+      padding: 0 3px;
+      height: 1em;
+      color: #606266;
+    }
+    
     &:hover {
       color: rgb(92, 182, 255);
     }
@@ -77,7 +85,7 @@
 <i class="el-icon-edit"></i>
 <i class="el-icon-share"></i>
 <i class="el-icon-delete"></i>
-<el-button type="primary" icon="search">搜索</el-button>
+<el-button type="primary" icon="el-icon-search">搜索</el-button>
 
 ```
 :::
@@ -88,7 +96,7 @@
   <li v-for="name in icons" :key="name">
     <span>
       <i :class="'el-icon-' + name"></i>
-      {{'el-icon-' + name}}
+      <span class="icon-name">{{'el-icon-' + name}}</span>
     </span>
   </li>
 </ul>
diff --git a/examples/docs/zh-CN/input-number.md b/examples/docs/zh-CN/input-number.md
index cd9b09d681..26566440a4 100644
--- a/examples/docs/zh-CN/input-number.md
+++ b/examples/docs/zh-CN/input-number.md
@@ -7,7 +7,10 @@
         num3: 5,
         num4: 1,
         num5: 1,
-        num6: 1
+        num6: 1,
+        num7: 1,
+        num8: 1,
+        num9: 1
       }
     },
     methods: {
@@ -34,7 +37,7 @@
 :::demo 要使用它，只需要在`el-input-number`元素中使用`v-model`绑定变量即可，变量的初始值即为默认值。
 ```html
 <template>
-  <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>
+  <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
 </template>
 <script>
   export default {
@@ -95,17 +98,43 @@
 ```
 :::
 
+### 精度
+
+:::demo 设置 `precision` 属性可以控制数值精度，接收一个 `Number`。
+
+```html
+<template>
+  <el-input-number v-model="num9" :precision="2" :step="0.1" :max="10"></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num9: 1
+      }
+    }
+  };
+</script>
+```
+
+:::
+
+:::tip
+`precision` 的值必须是一个非负整数，并且不能小于 `step` 的小数位数。
+:::
+
 ### 尺寸
 
-额外提供了 `large`、`small` 两种尺寸的数字输入框
+额外提供了 `medium`、`small`、`mini` 三种尺寸的数字输入框
 
 :::demo
 
 ```html
 <template>
-  <el-input-number size="large" v-model="num4"></el-input-number>
-  <el-input-number v-model="num5"></el-input-number>
+  <el-input-number v-model="num4"></el-input-number>
+  <el-input-number size="medium" v-model="num5"></el-input-number>
   <el-input-number size="small" v-model="num6"></el-input-number>
+  <el-input-number size="mini" v-model="num7"></el-input-number>
 </template>
 <script>
   export default {
@@ -113,7 +142,32 @@
       return {
         num4: 1,
         num5: 1,
-        num6: 1
+        num6: 1,
+        num7: 1
+      }
+    }
+  };
+</script>
+```
+:::
+
+### 按钮位置
+
+:::demo 设置 `controls-position` 属性可以控制按钮位置。
+```html
+<template>
+  <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num8: 1
+      };
+    },
+    methods: {
+      handleChange(value) {
+        console.log(value);
       }
     }
   };
@@ -125,15 +179,24 @@
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |----------|-------------- |----------|--------------------------------  |-------- |
 | value    | 绑定值         | number | — | — |
-| min      | 设置计数器允许的最小值 | number | — | 0 |
+| min      | 设置计数器允许的最小值 | number | — | -Infinity |
 | max      | 设置计数器允许的最大值 | number | — | Infinity |
 | step     | 计数器步长           | number   | — | 1 |
+| precision| 数值精度             | number   | — | — |
 | size     | 计数器尺寸           | string   | large, small | — |
 | disabled | 是否禁用计数器        | boolean | — | false |
 | controls | 是否使用控制按钮        | boolean | — | true |
-| debounce | 输入时的去抖延迟，毫秒 | number | — | 300 |
-
+| controls-position | 控制按钮位置 | string | right | - |
+| name | 原生属性 | string | — | — |
+| label | 输入框关联的label文字 | string | — | — |
 ### Events
 | 事件名称 | 说明 | 回调参数 |
 |---------|--------|---------|
 | change | 绑定值被改变时触发 | 最后变更的值 |
+| blur | 在组件 Input 失去焦点时触发 | (event: Event) |
+| focus | 在组件 Input 获得焦点时触发 | (event: Event) |
+
+### Methods
+| 方法名 | 说明 | 参数 |
+| ---- | ---- | ---- |
+| focus | 使 input 获取焦点 | - |
diff --git a/examples/docs/zh-CN/input.md b/examples/docs/zh-CN/input.md
index 42168cc621..3da3ddd973 100644
--- a/examples/docs/zh-CN/input.md
+++ b/examples/docs/zh-CN/input.md
@@ -1,18 +1,4 @@
 <script>
-  import Vue from 'vue';
-  Vue.component('my-item-zh', {
-    functional: true,
-    render: function (h, ctx) {
-      var item = ctx.props.item;
-      return h('li', ctx.data, [
-        h('div', { attrs: { class: 'name' } }, [item.value]),
-        h('span', { attrs: { class: 'addr' } }, [item.address])
-      ]);
-    },
-    props: {
-      item: { type: Object, required: true }
-    }
-  });
   export default {
     data() {
       return {
@@ -20,6 +6,9 @@
         input: '',
         input1: '',
         input2: '',
+        input21: '',
+        input22: '',
+        input23: '',
         input3: '',
         input4: '',
         input5: '',
@@ -27,6 +16,7 @@
         input7: '',
         input8: '',
         input9: '',
+        input10: '',
         textarea: '',
         textarea2: '',
         textarea3: '',
@@ -107,7 +97,7 @@
       },
       createStateFilter(queryString) {
         return (state) => {
-          return (state.value.indexOf(queryString.toLowerCase()) === 0);
+          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
         };
       },
       handleSelect(item) {
@@ -126,7 +116,7 @@
 <style>
   .demo-input.demo-zh-CN {
     .el-select .el-input {
-      width: 110px;
+      width: 130px;
     }
     .el-input {
       width: 180px;
@@ -143,6 +133,9 @@
         margin: 0 10px 10px 0;
       }
     }
+    .input-with-select .el-input-group__prepend {
+      background-color: #fff;
+    }
     .demo-autocomplete {
       text-align: center;
 
@@ -179,6 +172,12 @@
       }
     }
   }
+  .demo-input-suffix {
+    margin-bottom: 15px;
+    .el-input {
+      margin-right: 15px;
+    }
+  }
 </style>
 
 ## Input 输入框
@@ -187,7 +186,7 @@
 
 ### 基础用法
 
-::: demo
+:::demo
 ```html
 <el-input v-model="input" placeholder="请输入内容"></el-input>
 
@@ -206,7 +205,7 @@ export default {
 
 ### 禁用状态
 
-::: demo 通过 `disabled` 属性指定是否禁用 input 组件
+:::demo 通过 `disabled` 属性指定是否禁用 input 组件
 ```html
 <el-input
   placeholder="请输入内容"
@@ -226,29 +225,70 @@ export default {
 ```
 :::
 
-### 带 icon 的输入框
+### 可清空
 
-带有图标标记输入类型
+:::demo 使用`clearable`属性即可得到一个可清空的输入框
 
-::: demo 可以通过 `icon` 属性在 input 组件尾部增加显示图标，可以通过 `on-icon-click` 钩子函数来在点击图标后执行需要的逻辑。
 ```html
 <el-input
-  placeholder="请选择日期"
-  icon="search"
-  v-model="input2"
-  :on-icon-click="handleIconClick">
+  placeholder="请输入内容"
+  v-model="input10"
+  clearable>
 </el-input>
 
+<script>
+  export default {
+    data() {
+      return {
+        input10: ''
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 带 icon 的输入框
+
+带有图标标记输入类型
+
+:::demo 可以通过 `prefix-icon` 和 `suffix-icon` 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。
+```html
+<div class="demo-input-suffix">
+  属性方式：
+  <el-input
+    placeholder="请选择日期"
+    suffix-icon="el-icon-date"
+    v-model="input2">
+  </el-input>
+  <el-input
+    placeholder="请输入内容"
+    prefix-icon="el-icon-search"
+    v-model="input21">
+  </el-input>
+</div>
+<div class="demo-input-suffix">
+  slot 方式：
+  <el-input
+    placeholder="请选择日期"
+    v-model="input22">
+    <i slot="suffix" class="el-input__icon el-icon-date"></i>
+  </el-input>
+  <el-input
+    placeholder="请输入内容"
+    v-model="input23">
+    <i slot="prefix" class="el-input__icon el-icon-search"></i>
+  </el-input>
+</div>
+
 <script>
 export default {
   data() {
     return {
-      input2: ''
-    }
-  },
-  methods: {
-    handleIconClick(ev) {
-      console.log(ev);
+      input2: '',
+      input21: '',
+      input22: '',
+      input23: ''
     }
   }
 }
@@ -260,7 +300,7 @@ export default {
 
 用于输入多行文本信息，通过将 `type` 属性的值指定为 textarea。
 
-::: demo 文本域高度可通过 `rows` 属性控制
+:::demo 文本域高度可通过 `rows` 属性控制
 ```html
 <el-input
   type="textarea"
@@ -285,7 +325,7 @@ export default {
 
 通过设置 `autosize` 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 `autosize` 还可以设定为一个对象，指定最小行数和最大行数。
 
-::: demo
+:::demo
 ```html
 <el-input
   type="textarea"
@@ -318,7 +358,7 @@ export default {
 
 可前置或后置元素，一般为标签或按钮
 
-::: demo 可通过 slot 来指定在 input 中前置或者后置内容。
+:::demo 可通过 slot 来指定在 input 中前置或者后置内容。
 ```html
 <div>
   <el-input placeholder="请输入内容" v-model="input3">
@@ -331,18 +371,21 @@ export default {
   </el-input>
 </div>
 <div style="margin-top: 15px;">
-  <el-input placeholder="请输入内容" v-model="input5">
+  <el-input placeholder="请输入内容" v-model="input5" class="input-with-select">
     <el-select v-model="select" slot="prepend" placeholder="请选择">
       <el-option label="餐厅名" value="1"></el-option>
       <el-option label="订单号" value="2"></el-option>
       <el-option label="用户电话" value="3"></el-option>
     </el-select>
-    <el-button slot="append" icon="search"></el-button>
+    <el-button slot="append" icon="el-icon-search"></el-button>
   </el-input>
 </div>
 <style>
   .el-select .el-input {
-    width: 110px;
+    width: 130px;
+  }
+  .input-with-select .el-input-group__prepend {
+    background-color: #fff;
   }
 </style>
 <script>
@@ -362,26 +405,30 @@ export default {
 
 ### 尺寸
 
-::: demo 可通过 `size` 属性指定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。
+:::demo 可通过 `size` 属性指定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。
 ```html
 <div class="demo-input-size">
   <el-input
-    size="large"
     placeholder="请输入内容"
+    suffix-icon="el-icon-date"
     v-model="input6">
   </el-input>
   <el-input
+    size="medium"
     placeholder="请输入内容"
+    suffix-icon="el-icon-date"
     v-model="input7">
   </el-input>
   <el-input
     size="small"
     placeholder="请输入内容"
+    suffix-icon="el-icon-date"
     v-model="input8">
   </el-input>
   <el-input
     size="mini"
     placeholder="请输入内容"
+    suffix-icon="el-icon-date"
     v-model="input9">
   </el-input>
 </div>
@@ -405,7 +452,7 @@ export default {
 
 根据输入内容提供对应的输入建议
 
-::: demo autocomplete 是一个可带输入建议的输入框组件，`fetch-suggestions` 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。
+:::demo autocomplete 是一个可带输入建议的输入框组件，`fetch-suggestions` 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。
 ```html
 <el-row class="demo-autocomplete">
   <el-col :span="12">
@@ -448,7 +495,7 @@ export default {
       },
       createFilter(queryString) {
         return (restaurant) => {
-          return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);
+          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
         };
       },
       loadAll() {
@@ -519,18 +566,24 @@ export default {
 
 可自定义输入建议的显示
 
-::: demo
+:::demo 使用`scoped slot`自定义输入建议的模板。该 scope 的参数为`item`，表示当前输入建议对象。
 ```html
 <el-autocomplete
   popper-class="my-autocomplete"
   v-model="state3"
   :fetch-suggestions="querySearch"
-  custom-item="my-item-zh"
   placeholder="请输入内容"
-  @select="handleSelect"
-  icon="edit"
-  :on-icon-click="handleIconClick"
-></el-autocomplete>
+  @select="handleSelect">
+  <i
+    class="el-icon-edit el-input__icon"
+    slot="suffix"
+    @click="handleIconClick">
+  </i>
+  <template slot-scope="{ item }">
+    <div class="name">{{ item.value }}</div>
+    <span class="addr">{{ item.address }}</span>
+  </template>
+</el-autocomplete>
 
 <style>
 .my-autocomplete {
@@ -555,19 +608,6 @@ export default {
 </style>
 
 <script>
-  Vue.component('my-item-zh', {
-    functional: true,
-    render: function (h, ctx) {
-      var item = ctx.props.item;
-      return h('li', ctx.data, [
-        h('div', { attrs: { class: 'name' } }, [item.value]),
-        h('span', { attrs: { class: 'addr' } }, [item.address])
-      ]);
-    },
-    props: {
-      item: { type: Object, required: true }
-    }
-  });
   export default {
     data() {
       return {
@@ -584,7 +624,7 @@ export default {
       },
       createFilter(queryString) {
         return (restaurant) => {
-          return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);
+          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
         };
       },
       loadAll() {
@@ -658,7 +698,7 @@ export default {
 
 从服务端搜索数据
 
-::: demo
+:::demo
 ```html
 <el-autocomplete
   v-model="state4"
@@ -739,7 +779,7 @@ export default {
       },
       createStateFilter(queryString) {
         return (state) => {
-          return (state.value.indexOf(queryString.toLowerCase()) === 0);
+          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
         };
       },
       handleSelect(item) {
@@ -758,17 +798,20 @@ export default {
 
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
-| type         | 类型   | string  | text/textarea | text |
-| value         | 绑定值           | string, number  | — | — |
-| maxlength     | 最大输入长度      | number          |  —  | — |
-| minlength     | 最小输入长度      | number          | — | — |
+| type         | 类型   | string  | text，textarea 和其他 [原生 input 的 type 值](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text |
+| value         | 绑定值           | string / number  | — | — |
+| maxlength     | 原生属性，最大输入长度      | number          |  —  | — |
+| minlength     | 原生属性，最小输入长度      | number          | — | — |
 | placeholder   | 输入框占位文本    | string          | — | — |
+| clearable     | 是否可清空        | boolean         | — | false |
 | disabled      | 禁用            | boolean         | — | false   |
-| size          | 输入框尺寸，只在 `type!="textarea"` 时有效      | string          | large, small, mini  | — |
-| icon          | 输入框尾部图标    | string          | — | — |
+| size          | 输入框尺寸，只在 `type!="textarea"` 时有效      | string          | medium / small / mini  | — |
+| prefix-icon   | 输入框头部图标    | string          | — | — |
+| suffix-icon   | 输入框尾部图标    | string          | — | — |
 | rows          | 输入框行数，只对 `type="textarea"` 有效  |  number | — |  2   |
-| autosize      | 自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }  |  boolean/object | — |  false   |
-| auto-complete | 原生属性，自动补全 | string | on, off | off |
+| autosize      | 自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }  |  boolean / object | — |  false   |
+| autocomplete | 原生属性，自动补全 | string | on, off | off |
+| auto-complete | 下个主版本弃用 | string | on, off | off |
 | name | 原生属性 | string | — | — |
 | readonly | 原生属性，是否只读 | boolean | — | false |
 | max | 原生属性，设置最大值 | — | — | — |
@@ -777,15 +820,31 @@ export default {
 | resize | 控制是否能被用户缩放 | string | none, both, horizontal, vertical | — |
 | autofocus | 原生属性，自动获取焦点 | boolean | true, false | false |
 | form | 原生属性 | string | — | — |
-| on-icon-click | 点击 Input 内的图标的钩子函数 | function | — | — |
+| label | 输入框关联的label文字 | string | — | — |
+| tabindex | 输入框的tabindex | string | - | - |
+
+### Input Slots
+| name | 说明 |
+|------|--------|
+| prefix | 输入框头部内容，只对 `type="text"` 有效 |
+| suffix | 输入框尾部内容，只对 `type="text"` 有效 |
+| prepend | 输入框前置内容，只对 `type="text"` 有效 |
+| append | 输入框后置内容，只对 `type="text"` 有效 |
 
 ### Input Events
 | 事件名称 | 说明 | 回调参数 |
 |---------|--------|---------|
-| click | 点击 Input 内的图标时触发 | (event: Event) |
 | blur | 在 Input 失去焦点时触发 | (event: Event) |
 | focus | 在 Input 获得焦点时触发 | (event: Event) |
 | change | 在 Input 值改变时触发 | (value: string \| number) |
+| clear | 在点击由 `clearable` 属性生成的清空按钮时触发 | — |
+
+### Input Methods
+| 方法名 | 说明 | 参数 |
+| ---- | ---- | ---- |
+| focus | 使 input 获取焦点 | — |
+| blur | 使 input 失去焦点 | — |
+| select | 选中 input 中的文字 | — |
 
 ### Autocomplete Attributes
 
@@ -793,22 +852,40 @@ export default {
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 | placeholder   | 输入框占位文本   | string          | — | — |
 | disabled      | 禁用            | boolean         | — | false   |
-| props | 配置选项，具体见下表 | object | — | — |
-| value         | 必填值输入绑定值   | string  | — | — |
-| custom-item  | 通过该参数指定自定义的输入建议列表项的组件名 | string  | — | — |
+| value-key | 输入建议对象中用于显示的键名 | string | — | value |
+| value         | 必填值，输入绑定值   | string  | — | — |
+| debounce      | 获取输入建议的去抖延时 | number         | — | 300 |
+| placement     | 菜单弹出位置 | string         | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start |
 | fetch-suggestions | 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它  | Function(queryString, callback)  | — | — |
 | popper-class | Autocomplete 下拉列表的类名 | string | — | — |
 | trigger-on-focus | 是否在输入框 focus 时显示建议列表 | boolean | — | true |
-| on-icon-click | 点击图标的回调函数 | function | — | — |
-| icon          | 输入框尾部图标    | string          | — | — |
-
-### props
-| 参数     | 说明              | 类型   | 可选值 | 默认值 |
-| -------- | ----------------- | ------ | ------ | ------ |
-| value    | 指定选项的值为选项对象的某个属性值 | string | — | value |
-| label    | 指定选项标签为选项对象的某个属性值 | string | — | value |
+| name | 原生属性 | string | — | — |
+| select-when-unmatched | 在输入没有任何匹配建议的情况下，按下回车是否触发 `select` 事件 | boolean | — | false |
+| label | 输入框关联的label文字 | string | — | — |
+| prefix-icon | 输入框头部图标 | string | — | — |
+| suffix-icon | 输入框尾部图标 | string | — | — |
+| hide-loading | 是否隐藏远程加载时的加载图标 | boolean | — | false |
+| popper-append-to-body | 是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时，可将该属性设置为 false | boolean | - | true |
+
+### Autocomplete Slots
+| name | 说明 |
+|------|--------|
+| prefix | 输入框头部内容 |
+| suffix | 输入框尾部内容 |
+| prepend | 输入框前置内容 |
+| append | 输入框后置内容 |
+
+### Autocomplete Scoped Slot
+| name | 说明 |
+|------|--------|
+| — | 自定义输入建议，参数为 { item } |
 
 ### Autocomplete Events
 | 事件名称 | 说明 | 回调参数 |
 |---------|--------|---------|
 | select | 点击选中建议项时触发 | 选中建议项 |
+
+### Autocomplete Methods
+| 方法名 | 说明 | 参数 |
+| ---- | ---- | ---- |
+| focus | 使 input 获取焦点 | - |
diff --git a/examples/docs/zh-CN/installation.md b/examples/docs/zh-CN/installation.md
index 3f1e12d0f6..8cc61968bc 100644
--- a/examples/docs/zh-CN/installation.md
+++ b/examples/docs/zh-CN/installation.md
@@ -1,6 +1,7 @@
 ## 安装
 
 ### npm 安装
+
 推荐使用 npm 的方式安装，它能更好地和 [webpack](https://webpack.js.org/) 打包工具配合使用。
 
 ```shell
@@ -8,46 +9,24 @@ npm i element-ui -S
 ```
 
 ### CDN
+
 目前可以通过 [unpkg.com/element-ui](https://unpkg.com/element-ui/) 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
 
 ```html
 <!-- 引入样式 -->
-<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
+<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 <!-- 引入组件库 -->
 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 ```
 
+:::tip
+我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 [unpkg.com](https://unpkg.com)。
+:::
+
 ### Hello world
-通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](http://codepen.io/QingWei-Li/pen/vXwJrY)
 
-```html
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <!-- 引入样式 -->
-  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
-</head>
-<body>
-  <div id="app">
-    <el-button @click="visible = true">按钮</el-button>
-    <el-dialog v-model="visible" title="Hello world">
-      <p>欢迎使用 Element</p>
-    </el-dialog>
-  </div>
-</body>
-  <!-- 先引入 Vue -->
-  <script src="https://unpkg.com/vue/dist/vue.js"></script>
-  <!-- 引入组件库 -->
-  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
-  <script>
-    new Vue({
-      el: '#app',
-      data: function() {
-        return { visible: false }
-      }
-    })
-  </script>
-</html>
-```
-如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。
+通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://jsfiddle.net/hzfpyvg6/14/)
+
+<iframe width="100%" height="600" src="//jsfiddle.net/hzfpyvg6/1213/embedded/html,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+
+如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：[快速上手](/#/zh-CN/component/quickstart)。
diff --git a/examples/docs/zh-CN/layout.md b/examples/docs/zh-CN/layout.md
index 98e2954767..fb89e92c66 100644
--- a/examples/docs/zh-CN/layout.md
+++ b/examples/docs/zh-CN/layout.md
@@ -37,7 +37,7 @@
 
 使用单一分栏创建基础的栅格布局。
 
-::: demo 通过 row 和 col 组件，并通过 col 组件的 `span` 属性我们就可以自由地组合布局。
+:::demo 通过 row 和 col 组件，并通过 col 组件的 `span` 属性我们就可以自由地组合布局。
 ```html
 <el-row>
   <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
@@ -101,7 +101,7 @@
 
 分栏之间存在间隔。
 
-::: demo Row 组件 提供 `gutter` 属性来指定每一栏之间的间隔，默认间隔为 0。
+:::demo Row 组件 提供 `gutter` 属性来指定每一栏之间的间隔，默认间隔为 0。
 ```html
 <el-row :gutter="20">
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
@@ -145,7 +145,7 @@
 
 通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。
 
-::: demo
+:::demo
 ```html
 <el-row :gutter="20">
   <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
@@ -198,7 +198,7 @@
 
 支持偏移指定的栏数。
 
-::: demo 通过制定 col 组件的 `offset` 属性可以指定分栏偏移的栏数。
+:::demo 通过制定 col 组件的 `offset` 属性可以指定分栏偏移的栏数。
 ```html
 <el-row :gutter="20">
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
@@ -247,7 +247,7 @@
 
 通过 `flex` 布局来对分栏进行灵活的对齐。
 
-::: demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。
+:::demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。
 ```html
 <el-row type="flex" class="row-bg">
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
@@ -308,15 +308,15 @@
 
 ### 响应式布局
 
-参照了 Bootstrap 的 响应式设计，预设了四个响应尺寸：`xs`、`sm`、`md`和`lg`。
+参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：`xs`、`sm`、`md`、`lg` 和 `xl`。
 
-::: demo
+:::demo
 ```html
 <el-row :gutter="10">
-  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>
-  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
 </el-row>
 
 <style>
@@ -340,6 +340,27 @@
 ```
 :::
 
+### 基于断点的隐藏类
+
+Element 额外提供了一系列类名，用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。如果需要，请自行引入以下文件：
+
+```js
+import 'element-ui/lib/theme-chalk/display.css';
+```
+
+包含的类名及其含义为：
+- `hidden-xs-only` - 当视口在 `xs` 尺寸时隐藏
+- `hidden-sm-only` - 当视口在 `sm` 尺寸时隐藏
+- `hidden-sm-and-down` - 当视口在 `sm` 及以下尺寸时隐藏
+- `hidden-sm-and-up` - 当视口在 `sm` 及以上尺寸时隐藏
+- `hidden-md-only` - 当视口在 `md` 尺寸时隐藏
+- `hidden-md-and-down` - 当视口在 `md` 及以下尺寸时隐藏
+- `hidden-md-and-up` - 当视口在 `md` 及以上尺寸时隐藏
+- `hidden-lg-only` - 当视口在 `lg` 尺寸时隐藏
+- `hidden-lg-and-down` - 当视口在 `lg` 及以下尺寸时隐藏
+- `hidden-lg-and-up` - 当视口在 `lg` 及以上尺寸时隐藏
+- `hidden-xl-only` - 当视口在 `xl` 尺寸时隐藏
+
 ### Row Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
@@ -352,12 +373,13 @@
 ### Col Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| span | 栅格占据的列数 | number | — | — |
+| span | 栅格占据的列数 | number | — | 24 |
 | offset | 栅格左侧的间隔格数 | number | — | 0 |
 | push |  栅格向右移动格数 | number | — | 0 |
 | pull |  栅格向左移动格数 | number | — | 0 |
 | xs | `<768px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
 | sm | `≥768px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
-| md | `≥992` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
-| lg | `≥1200` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
+| md | `≥992px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
+| lg | `≥1200px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
+| xl | `≥1920px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
 | tag | 自定义元素标签 | string | * | div |
diff --git a/examples/docs/zh-CN/loading.md b/examples/docs/zh-CN/loading.md
index 4592d431eb..51f7b354bb 100644
--- a/examples/docs/zh-CN/loading.md
+++ b/examples/docs/zh-CN/loading.md
@@ -32,7 +32,18 @@
         this.fullscreenLoading = true;
         setTimeout(() => {
           this.fullscreenLoading = false;
-        }, 3000);
+        }, 2000);
+      },
+      openFullScreen2() {
+        const loading = this.$loading({
+          lock: true,
+          text: 'Loading',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        });
+        setTimeout(() => {
+          loading.close();
+        }, 2000);
       }
     }
   }
@@ -49,7 +60,7 @@
 ```html
 <template>
   <el-table
-    v-loading.body="loading"
+    v-loading="loading"
     :data="tableData"
     style="width: 100%">
     <el-table-column
@@ -100,16 +111,18 @@
 ```
 :::
 
-### 加载文案
+### 自定义
 
-可自定义加载文案。
+可自定义加载文案、图标和背景色。
 
-:::demo 在绑定了`v-loading`指令的元素上添加`element-loading-text`属性，其值会被渲染为加载文案，并显示在加载图标的下方。
+:::demo 在绑定了`v-loading`指令的元素上添加`element-loading-text`属性，其值会被渲染为加载文案，并显示在加载图标的下方。类似地，`element-loading-spinner`和`element-loading-background`属性分别用来设定图标类名和背景色值。
 ```html
 <template>
   <el-table
     v-loading="loading2"
     element-loading-text="拼命加载中"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)"
     :data="tableData"
     style="width: 100%">
     <el-table-column
@@ -158,7 +171,7 @@
 
 页面数据加载时显示。
 
-:::demo 当需要全屏遮罩时，可使用`fullscreen`修饰符（此时遮罩会插入至 body 上）。此时若需要锁定屏幕的滚动，可以使用`lock`修饰符。
+:::demo 当使用指令方式时，全屏遮罩需要添加`fullscreen`修饰符（遮罩会插入至 body 上），此时若需要锁定屏幕的滚动，可以使用`lock`修饰符；当使用服务方式时，遮罩默认即为全屏，无需额外设置。
 
 ```html
 <template>
@@ -166,7 +179,12 @@
     type="primary"
     @click="openFullScreen"
     v-loading.fullscreen.lock="fullscreenLoading">
-    显示整页加载，3 秒后消失
+    指令方式
+  </el-button>
+  <el-button
+    type="primary"
+    @click="openFullScreen2">
+    服务方式
   </el-button>
 </template>
 
@@ -182,7 +200,18 @@
         this.fullscreenLoading = true;
         setTimeout(() => {
           this.fullscreenLoading = false;
-        }, 3000);
+        }, 2000);
+      },
+      openFullScreen2() {
+        const loading = this.$loading({
+          lock: true,
+          text: 'Loading',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        });
+        setTimeout(() => {
+          loading.close();
+        }, 2000);
       }
     }
   }
@@ -202,7 +231,9 @@ Loading.service(options);
 其中 `options` 参数为 Loading 的配置项，具体见下表。`LoadingService` 会返回一个 Loading 实例，可通过调用该实例的 `close` 方法来关闭它：
 ```javascript
 let loadingInstance = Loading.service(options);
-loadingInstance.close();
+this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
+  loadingInstance.close();
+});
 ```
 需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例：
 ```javascript
@@ -222,4 +253,6 @@ console.log(loadingInstance1 === loadingInstance2); // true
 | fullscreen | 同 `v-loading` 指令中的 `fullscreen` 修饰符 | boolean | — | true |
 | lock | 同 `v-loading` 指令中的 `lock` 修饰符 | boolean | — | false |
 | text | 显示在加载图标下方的加载文案 | string | — | — |
+| spinner | 自定义加载图标类名 | string | — | — |
+| background | 遮罩背景色 | string | — | — |
 | customClass | Loading 的自定义类名 | string | — | — |
\ No newline at end of file
diff --git a/examples/docs/zh-CN/menu.md b/examples/docs/zh-CN/menu.md
index 86697b6896..4aa3ff138e 100644
--- a/examples/docs/zh-CN/menu.md
+++ b/examples/docs/zh-CN/menu.md
@@ -4,7 +4,7 @@
       padding-left: 55px;
     }
     .el-menu-vertical-demo:not(.el-menu--collapse) {
-      width: 200px;
+      width: 240px;
       min-height: 400px;
     }
     .line {
@@ -59,29 +59,50 @@
 
 适用广泛的基础用法。
 
-::: demo 导航菜单默认为垂直模式，通过 `mode` 属性可以使导航菜单变更为水平模式。另外，在菜单中通过 `submenu` 组件可以生成二级菜单。
+:::demo 导航菜单默认为垂直模式，通过`mode`属性可以使导航菜单变更为水平模式。另外，在菜单中通过`submenu`组件可以生成二级菜单。Menu 还提供了`background-color`、`text-color`和`active-text-color`，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。
 
 ```html
-<el-menu theme="dark" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+<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 index="2-4">
+      <template slot="title">选项4</template>
+      <el-menu-item index="2-4-1">选项1</el-menu-item>
+      <el-menu-item index="2-4-2">选项2</el-menu-item>
+      <el-menu-item index="2-4-3">选项3</el-menu-item>
+    </el-submenu>
   </el-submenu>
-  <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
+  <el-menu-item index="3" disabled>消息中心</el-menu-item>
+  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
 </el-menu>
 <div class="line"></div>
-<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+<el-menu
+  :default-active="activeIndex2"
+  class="el-menu-demo"
+  mode="horizontal"
+  @select="handleSelect"
+  background-color="#545c64"
+  text-color="#fff"
+  active-text-color="#ffd04b">
   <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 index="2-4">
+      <template slot="title">选项4</template>
+      <el-menu-item index="2-4-1">选项1</el-menu-item>
+      <el-menu-item index="2-4-2">选项2</el-menu-item>
+      <el-menu-item index="2-4-3">选项3</el-menu-item>
+    </el-submenu>
   </el-submenu>
-  <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
+  <el-menu-item index="3" disabled>消息中心</el-menu-item>
+  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
 </el-menu>
 
 <script>
@@ -106,14 +127,21 @@
 
 垂直菜单，可内嵌子菜单。
 
-::: demo 通过 `el-menu-item-group` 组件可以实现菜单进行分组，分组名可以通过 `title` 属性直接设定也可以通过具名 slot 来设定。
+:::demo 通过`el-menu-item-group`组件可以实现菜单进行分组，分组名可以通过`title`属性直接设定，也可以通过具名 slot 来设定。
 ```html
 <el-row class="tac">
-  <el-col :span="8">
-    <h5>带 icon</h5>
-    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
+  <el-col :span="12">
+    <h5>默认颜色</h5>
+    <el-menu
+      default-active="2"
+      class="el-menu-vertical-demo"
+      @open="handleOpen"
+      @close="handleClose">
       <el-submenu index="1">
-        <template slot="title"><i class="el-icon-message"></i>导航一</template>
+        <template slot="title">
+          <i class="el-icon-location"></i>
+          <span>导航一</span>
+        </template>
         <el-menu-item-group>
           <template slot="title">分组一</template>
           <el-menu-item index="1-1">选项1</el-menu-item>
@@ -127,16 +155,37 @@
           <el-menu-item index="1-4-1">选项1</el-menu-item>
         </el-submenu>
       </el-submenu>
-      <el-menu-item index="2"><i class="el-icon-menu"></i>导航二</el-menu-item>
-      <el-menu-item index="3"><i class="el-icon-setting"></i>导航三</el-menu-item>
+      <el-menu-item index="2">
+        <i class="el-icon-menu"></i>
+        <span slot="title">导航二</span>
+      </el-menu-item>
+      <el-menu-item index="3" disabled>
+        <i class="el-icon-document"></i>
+        <span slot="title">导航三</span>
+      </el-menu-item>
+      <el-menu-item index="4">
+        <i class="el-icon-setting"></i>
+        <span slot="title">导航四</span>
+      </el-menu-item>
     </el-menu>
   </el-col>
-  <el-col :span="8">
-    <h5>不带 icon</h5>
-    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">
+  <el-col :span="12">
+    <h5>自定义颜色</h5>
+    <el-menu
+      default-active="2"
+      class="el-menu-vertical-demo"
+      @open="handleOpen"
+      @close="handleClose"
+      background-color="#545c64"
+      text-color="#fff"
+      active-text-color="#ffd04b">
       <el-submenu index="1">
-        <template slot="title">导航一</template>
-        <el-menu-item-group title="分组一">
+        <template slot="title">
+          <i class="el-icon-location"></i>
+          <span>导航一</span>
+        </template>
+        <el-menu-item-group>
+          <template slot="title">分组一</template>
           <el-menu-item index="1-1">选项1</el-menu-item>
           <el-menu-item index="1-2">选项2</el-menu-item>
         </el-menu-item-group>
@@ -148,21 +197,18 @@
           <el-menu-item index="1-4-1">选项1</el-menu-item>
         </el-submenu>
       </el-submenu>
-      <el-menu-item index="2">导航二</el-menu-item>
-      <el-menu-item index="3">导航三</el-menu-item>
-    </el-menu>
-  </el-col>
-  <el-col :span="8">
-    <h5>分组</h5>
-    <el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo">
-      <el-menu-item-group title="分组一">
-        <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
-        <el-menu-item index="2"><i class="el-icon-message"></i>导航二</el-menu-item>
-      </el-menu-item-group>
-      <el-menu-item-group title="分组二">
-        <el-menu-item index="3"><i class="el-icon-message"></i>导航三</el-menu-item>
-        <el-menu-item index="4"><i class="el-icon-message"></i>导航四</el-menu-item>
-      </el-menu-item-group>
+      <el-menu-item index="2">
+        <i class="el-icon-menu"></i>
+        <span slot="title">导航二</span>
+      </el-menu-item>
+      <el-menu-item index="3" disabled>
+        <i class="el-icon-document"></i>
+        <span slot="title">导航三</span>
+      </el-menu-item>
+      <el-menu-item index="4">
+        <i class="el-icon-setting"></i>
+        <span slot="title">导航四</span>
+      </el-menu-item>
     </el-menu>
   </el-col>
 </el-row>
@@ -184,7 +230,7 @@
 
 ### 折叠
 
-::: demo
+:::demo
 ```html
 <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
   <el-radio-button :label="false">展开</el-radio-button>
@@ -193,7 +239,7 @@
 <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
   <el-submenu index="1">
     <template slot="title">
-      <i class="el-icon-message"></i>
+      <i class="el-icon-location"></i>
       <span slot="title">导航一</span>
     </template>
     <el-menu-item-group>
@@ -213,17 +259,28 @@
     <i class="el-icon-menu"></i>
     <span slot="title">导航二</span>
   </el-menu-item>
-  <el-menu-item index="3">
-    <i class="el-icon-setting"></i>
+  <el-menu-item index="3" disabled>
+    <i class="el-icon-document"></i>
     <span slot="title">导航三</span>
   </el-menu-item>
+  <el-menu-item index="4">
+    <i class="el-icon-setting"></i>
+    <span slot="title">导航四</span>
+  </el-menu-item>
 </el-menu>
 
+<style>
+  .el-menu-vertical-demo:not(.el-menu--collapse) {
+    width: 200px;
+    min-height: 400px;
+  }
+</style>
+
 <script>
   export default {
     data() {
       return {
-        isCollapse: false
+        isCollapse: true
       };
     },
     methods: {
@@ -242,32 +299,47 @@
 ### Menu Attribute
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| mode     | 模式   | string  |   horizontal,vertical   | vertical |
+| mode     | 模式   | string  |   horizontal / vertical   | vertical |
 | collapse  | 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）| boolean  |   —   | false |
-| theme     | 主题色   | string    | light,dark | light |
+| background-color  | 菜单的背景色（仅支持 hex 格式） | string |   —   | #ffffff |
+| text-color  | 菜单的文字颜色（仅支持 hex 格式） | string |   —   | #303133 |
+| active-text-color  | 当前激活菜单的文字颜色（仅支持 hex 格式） | string |   —   | #409EFF |
 | default-active | 当前激活菜单的 index | string    | — | — |
-| default-openeds | 当前打开的submenu的 key 数组 | Array    | — | — |
+| default-openeds | 当前打开的 sub-menu 的 index 的数组 | Array    | — | — |
 | unique-opened  | 是否只保持一个子菜单的展开 | boolean   | — | false   |
-| menu-trigger  | 子菜单打开的触发方式(只在 mode 为 horizontal 时有效) | string   | — | hover   |
+| menu-trigger  | 子菜单打开的触发方式(只在 mode 为 horizontal 时有效) | string   | hover / click | hover |
 | router  | 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 | boolean   | — | false   |
+| collapse-transition  | 是否开启折叠动画 | boolean   | — | true   |
+
+### Menu Methods
+| 方法名称      | 说明    | 参数      |
+|---------- |-------- |---------- |
+| open  | 展开指定的 sub-menu | index: 需要打开的 sub-menu 的 index |
+| close  | 收起指定的 sub-menu | index: 需要收起的 sub-menu 的 index |
 
 ### Menu Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
-| select  | 菜单激活回调 | index: 选中菜单项的 indexPath: 选中菜单项的 index path  |
-| open  | SubMenu 展开的回调 | index: 打开的 subMenu 的 index， indexPath: 打开的 subMenu 的 index path  |
-| close  | SubMenu 收起的回调 | index: 收起的 subMenu 的 index， indexPath: 收起的 subMenu 的 index path  |
+| select  | 菜单激活回调 | index: 选中菜单项的 index, indexPath: 选中菜单项的 index path  |
+| open  | sub-menu 展开的回调 | index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index path  |
+| close  | sub-menu 收起的回调 | index: 收起的 sub-menu 的 index， indexPath: 收起的 sub-menu 的 index path  |
 
 ### SubMenu Attribute
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | index     | 唯一标志   | string  | — | — |
+| popper-class | 弹出菜单的自定义类名 | string | — | — |
+| show-timeout | 展开 sub-menu 的延时 | number | — | 300 |
+| hide-timeout | 收起 sub-menu 的延时 | number | — | 300 |
+| disabled  | 是否禁用 | boolean | — | false |
+| popper-append-to-body | 是否将弹出菜单插入至 body 元素。在菜单的定位出现问题时，可尝试修改该属性 | boolean | — | 一级子菜单：true / 非一级子菜单：false |
 
 ### Menu-Item Attribute
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | index     | 唯一标志   | string  | — | — |
 | route     | Vue Router 路径对象 | Object | — | — |
+| disabled  | 是否禁用 | boolean | — | false |
 
 ### Menu-Group Attribute
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
diff --git a/examples/docs/zh-CN/message-box.md b/examples/docs/zh-CN/message-box.md
index 664e9af1b4..a448a31c70 100644
--- a/examples/docs/zh-CN/message-box.md
+++ b/examples/docs/zh-CN/message-box.md
@@ -92,13 +92,63 @@
             });
           }, 200);
         });
-      }
+      },
+
+      open5() {
+        this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
+          dangerouslyUseHTMLString: true
+        });
+      },
+
+      open6() {
+        this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {
+          distinguishCancelAndClose: true,
+          confirmButtonText: '保存',
+          cancelButtonText: '放弃修改'
+        })
+          .then(() => {
+            this.$message({
+              type: 'info',
+              message: '保存修改'
+            });
+          })
+          .catch(action => {
+            this.$message({
+              type: 'info',
+              message: action === 'cancel'
+                ? '放弃保存并离开页面'
+                : '停留在当前页面'
+            })
+          });
+      },
 
+      open7() {
+        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+          center: true
+        }).then(() => {
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });
+        });
+      }
     }
   };
 </script>
 ## MessageBox 弹框
-模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、成功提示、错误提示、询问信息。
+模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。
+
+:::tip
+从场景上说，MessageBox 的作用是美化系统自带的 `alert`、`confirm` 和 `prompt`，因此适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用 Dialog。
+:::
 
 ### 消息提示
 
@@ -171,7 +221,7 @@
 
 当用户进行操作时会被触发，中断用户操作，提示用户进行输入的对话框。
 
-:::demo 调用`$prompt`方法即可打开消息提示，它模拟了系统的 `prompt`。可以用`inputPattern`字段自己规定匹配模式，或者用`inputValidator`规定校验函数，可以返回`Boolean`或`String`，`Boolean`为`false`或字符串时均表示校验未通过，`String`相当于定义了`inputErrorMessage`字段。此外，可以用`inputPlaceholder`字段来定义输入框的占位符。
+:::demo 调用`$prompt`方法即可打开消息提示，它模拟了系统的 `prompt`。可以用`inputPattern`字段自己规定匹配模式，或者用`inputValidator`规定校验函数，可以返回`Boolean`或`String`，返回`false`或字符串时均表示校验未通过，同时返回的字符串相当于定义了`inputErrorMessage`字段。此外，可以用`inputPlaceholder`字段来定义输入框的占位符。
 
 ```html
 <template>
@@ -250,7 +300,118 @@
             message: 'action: ' + action
           });
         });
-      },
+      }
+    }
+  }
+</script>
+```
+:::
+
+:::tip
+弹出层的内容可以是 `VNode`，所以我们能把一些自定义组件传入其中。每次弹出层打开后，Vue 会对新老 `VNode` 节点进行比对，然后将根据比较结果进行最小单位地修改视图。这也许会造成弹出层内容区域的组件没有重新渲染，例如 [#8931](https://github.com/ElemeFE/element/issues/8931)。当这类问题出现时，解决方案是给 `VNode` 加上一个不相同的 key，参考[这里](https://jsfiddle.net/zhiyang/ezmhq2ef/)。
+:::
+
+### 使用 HTML 片段
+
+`message` 属性支持传入 HTML 片段。
+
+:::demo 将`dangerouslyUseHTMLString`属性设置为 true，`message` 就会被当作 HTML 片段处理。
+
+```html
+<template>
+  <el-button type="text" @click="open5">点击打开 Message Box</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open5() {
+        this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
+          dangerouslyUseHTMLString: true
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+:::warning
+`message` 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此在 `dangerouslyUseHTMLString` 打开的情况下，请确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。
+:::
+
+### 区分取消与关闭
+
+有些场景下，点击取消按钮与点击关闭按钮有着不同的含义。
+
+:::demo 默认情况下，当用户触发取消（点击取消按钮）和触发关闭（点击关闭按钮或遮罩层、按下 ESC 键）时，Promise 的 reject 回调和`callback`回调的参数均为 'cancel'。如果将`distinguishCancelAndClose`属性设置为 true，则上述两种行为的参数分别为 'cancel' 和 'close'。
+
+```html
+<template>
+  <el-button type="text" @click="open6">点击打开 Message Box</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open6() {
+        this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {
+          distinguishCancelAndClose: true,
+          confirmButtonText: '保存',
+          cancelButtonText: '放弃修改'
+        })
+          .then(() => {
+            this.$message({
+              type: 'info',
+              message: '保存修改'
+            });
+          })
+          .catch(action => {
+            this.$message({
+              type: 'info',
+              message: action === 'cancel'
+                ? '放弃保存并离开页面'
+                : '停留在当前页面'
+            })
+          });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 居中布局
+内容支持居中布局
+
+:::demo 将 `center` 设置为 `true` 即可开启居中布局
+
+```html
+<template>
+  <el-button type="text" @click="open7">点击打开 Message Box</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open7() {
+        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+          center: true
+        }).then(() => {
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });
+        });
+      }
     }
   }
 </script>
@@ -259,17 +420,21 @@
 
 ### 全局方法
 
-Element 为 Vue.prototype 添加了如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 vue instance 中可以采用本页面中的方式调用 `MessageBox`。
+如果你完整引入了 Element，它会为 Vue.prototype 添加如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 Vue instance 中可以采用本页面中的方式调用 `MessageBox`。调用参数为：
+- `$msgbox(options)`
+- `$alert(message, title, options)` 或 `$alert(message, options)`
+- `$confirm(message, title, options)` 或 `$confirm(message, options)`
+- `$prompt(message, title, options)` 或 `$prompt(message, options)`
 
 ### 单独引用
 
-单独引入 `MessageBox`：
+如果单独引入 `MessageBox`：
 
 ```javascript
 import { MessageBox } from 'element-ui';
 ```
 
-对应于上述四个全局方法的调用方法依次为：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt。
+那么对应于上述四个全局方法的调用方法依次为：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt，调用参数与全局方法相同。
 
 ### Options
 
@@ -277,10 +442,14 @@ import { MessageBox } from 'element-ui';
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | title | MessageBox 标题 | string | — | — |
 | message | MessageBox 消息正文内容 | string / VNode | — | — |
-| type | 消息类型，用于显示图标 | string | success/info/warning/error | — |
+| dangerouslyUseHTMLString | 是否将 message 属性作为 HTML 片段处理 | boolean | — | false |
+| type | 消息类型，用于显示图标 | string | success / info / warning / error | — |
+| iconClass | 自定义图标的类名，会覆盖 `type` | string | — | — |
 | customClass | MessageBox 的自定义类名 | string | — | — |
-| callback | 若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调 | function(action, instance)，action 的值为'confirm'或'cancel', instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法 | — | — |
-| beforeClose | MessageBox 关闭前的回调，会暂停实例的关闭 | function(action, instance, done)，action 的值为'confirm'或'cancel'；instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法；done 用于关闭 MessageBox 实例 | — | — |
+| callback | 若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调 | function(action, instance)，action 的值为'confirm', 'cancel'或'close', instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法 | — | — |
+| showClose | MessageBox 是否显示右上角关闭按钮 | boolean | — | true |
+| beforeClose | MessageBox 关闭前的回调，会暂停实例的关闭 | function(action, instance, done)，action 的值为'confirm', 'cancel'或'close'；instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法；done 用于关闭 MessageBox 实例 | — | — |
+| distinguishCancelAndClose | 是否将取消（点击取消按钮）与关闭（点击关闭按钮或遮罩层、按下 ESC 键）进行区分 | boolean | — | false |
 | lockScroll | 是否在 MessageBox 出现时将 body 滚动锁定 | boolean | — | true |
 | showCancelButton | 是否显示取消按钮 | boolean | — | false（以 confirm 和 prompt 方式调用时为 true） |
 | showConfirmButton | 是否显示确定按钮 | boolean | — | true |
@@ -290,9 +459,13 @@ import { MessageBox } from 'element-ui';
 | confirmButtonClass | 确定按钮的自定义类名 | string | — | — |
 | closeOnClickModal | 是否可通过点击遮罩关闭 MessageBox | boolean | — | true（以 alert 方式调用时为 false） |
 | closeOnPressEscape | 是否可通过按下 ESC 键关闭 MessageBox | boolean | — | true（以 alert 方式调用时为 false） |
+| closeOnHashChange | 是否在 hashchange 时关闭 MessageBox | boolean | — | true |
 | showInput | 是否显示输入框 | boolean | — | false（以 prompt 方式调用时为 true）|
 | inputPlaceholder | 输入框的占位符 | string | — | — |
+| inputType | 输入框的类型 | string | — | text |
 | inputValue | 输入框的初始文本 | string | — | — |
 | inputPattern | 输入框的校验表达式 | regexp | — | — |
 | inputValidator | 输入框的校验函数。可以返回布尔值或字符串，若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage | function | — | — |
 | inputErrorMessage | 校验未通过时的提示文本 | string | — | 输入的数据不合法! |
+| center | 是否居中布局 | boolean | — | false |
+| roundButton | 是否使用圆角按钮 | boolean | — | false |
diff --git a/examples/docs/zh-CN/message.md b/examples/docs/zh-CN/message.md
index 29b8722362..d2225814c1 100644
--- a/examples/docs/zh-CN/message.md
+++ b/examples/docs/zh-CN/message.md
@@ -62,6 +62,20 @@
           message: '错了哦，这是一条错误消息',
           type: 'error'
         });
+      },
+
+      openCenter() {
+        this.$message({
+          message: '居中的文字',
+          center: true
+        });
+      },
+
+      openHTML() {
+        this.$message({
+          dangerouslyUseHTMLString: true,
+          message: '<strong>这是 <i>HTML</i> 片段</strong>'
+        });
       }
     }
   };
@@ -75,7 +89,7 @@
 
 从顶部出现，3 秒后自动消失。
 
-:::demo Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释，文末有 options 列表，可以结合 Notification 的文档理解它们。Element 注册了一个`$message`方法用于调用，Message 可以接收一个字符串作为参数，它会被显示为正文内容。
+:::demo Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释，文末有 options 列表，可以结合 Notification 的文档理解它们。Element 注册了一个`$message`方法用于调用，Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。
 
 ```html
 <template>
@@ -199,6 +213,60 @@
 ```
 :::
 
+### 文字居中
+使用 `center` 属性让文字水平居中。
+
+:::demo
+
+```html
+<template>
+  <el-button :plain="true" @click="openCenter">文字居中</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      openCenter() {
+        this.$message({
+          message: '居中的文字',
+          center: true
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 使用 HTML 片段
+`message` 属性支持传入 HTML 片段
+
+:::demo 将`dangerouslyUseHTMLString`属性设置为 true，`message` 就会被当作 HTML 片段处理。
+
+```html
+<template>
+  <el-button :plain="true" @click="openHTML">使用 HTML 片段</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      openHTML() {
+        this.$message({
+          dangerouslyUseHTMLString: true,
+          message: '<strong>这是 <i>HTML</i> 片段</strong>'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+:::warning
+`message` 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此在 `dangerouslyUseHTMLString` 打开的情况下，请确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。
+:::
+
 ### 全局方法
 
 Element 为 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本页面中的方式调用 `Message`。
@@ -211,8 +279,7 @@ Element 为 Vue.prototype 添加了全局方法 $message。因此在 vue instanc
 import { Message } from 'element-ui';
 ```
 
-此时调用方法为 `Message(options)`。我们也为每个 type 定义了各自的方法，如 `Message.success(options)`。
-并且可以调用 `Message.closeAll()` 手动关闭所有实例。
+此时调用方法为 `Message(options)`。我们也为每个 type 定义了各自的方法，如 `Message.success(options)`。并且可以调用 `Message.closeAll()` 手动关闭所有实例。
 
 ### Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
@@ -220,9 +287,11 @@ import { Message } from 'element-ui';
 | message | 消息文字 | string / VNode | — | — |
 | type | 主题 | string | success/warning/info/error | info |
 | iconClass | 自定义图标的类名，会覆盖 `type` | string | — | — |
+| dangerouslyUseHTMLString | 是否将 message 属性作为 HTML 片段处理 | boolean | — | false |
 | customClass | 自定义类名 | string | — | — |
 | duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 3000 |
 | showClose | 是否显示关闭按钮 | boolean | — | false |
+| center | 文字是否居中 | boolean | — | false |
 | onClose | 关闭时的回调函数, 参数为被关闭的 message 实例 | function | — | — |
 
 ### 方法
diff --git a/examples/docs/zh-CN/notification.md b/examples/docs/zh-CN/notification.md
index 4cbb9b5c3d..9876f785a9 100644
--- a/examples/docs/zh-CN/notification.md
+++ b/examples/docs/zh-CN/notification.md
@@ -49,13 +49,60 @@
       },
 
       open7() {
-        this.$notify.success({
-          title: '成功',
-          message: '这是一条成功的提示消息',
+        this.$notify({
+          title: '自定义位置',
+          message: '右上角弹出的消息'
+        });
+      },
+
+      open8() {
+        this.$notify({
+          title: '自定义位置',
+          message: '右下角弹出的消息',
+          position: 'bottom-right'
+        });
+      },
+
+      open9() {
+        this.$notify({
+          title: '自定义位置',
+          message: '左下角弹出的消息',
+          position: 'bottom-left'
+        });
+      },
+
+      open10() {
+        this.$notify({
+          title: '自定义位置',
+          message: '左上角弹出的消息',
+          position: 'top-left'
+        });
+      },
+
+      open11() {
+        this.$notify({
+          title: '偏移',
+          message: '这是一条带有偏移的提示消息',
           offset: 100
         });
       },
 
+      open12() {
+        this.$notify({
+          title: 'HTML 片段',
+          dangerouslyUseHTMLString: true,
+          message: '<strong>这是 <i>HTML</i> 片段</strong>'
+        });
+      },
+
+      open13() {
+        this.$notify.success({
+          title: 'Info',
+          message: '这是一条没有关闭按钮的消息',
+          showClose: false
+        });
+      },
+
       onClose() {
         console.log('Notification 已关闭');
       }
@@ -65,13 +112,13 @@
 
 ## Notification 通知
 
-悬浮出现在页面右上角，显示全局的通知提醒消息。
+悬浮出现在页面角落，显示全局的通知提醒消息。
 
 ### 基本用法
 
 适用性广泛的通知栏
 
-::: demo Notification 组件提供通知功能，Element 注册了`$notify`方法，接收一个`options`字面量参数，在最简单的情况下，你可以设置`title`字段和`message`字段，用于设置通知的标题和正文。默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置`duration`，可以控制关闭的时间间隔，特别的是，如果设置为`0`，则不会自动关闭。注意：`duration`接收一个`Number`，单位为毫秒，默认为`4500`。
+:::demo Notification 组件提供通知功能，Element 注册了`$notify`方法，接收一个`options`字面量参数，在最简单的情况下，你可以设置`title`字段和`message`字段，用于设置通知的标题和正文。默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置`duration`，可以控制关闭的时间间隔，特别的是，如果设置为`0`，则不会自动关闭。注意：`duration`接收一个`Number`，单位为毫秒，默认为`4500`。
 ```html
 <template>
   <el-button
@@ -115,7 +162,7 @@
 
 带有 icon，常用来显示「成功、警告、消息、错误」类的系统消息
 
-::: demo Element 为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。通过`type`字段来设置，除此以外的值将被忽略。同时，我们也为 Notification 的各种 type 注册了方法，可以在不传入`type`字段的情况下像`open5`和`open6`那样直接调用。
+:::demo Element 为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。通过`type`字段来设置，除此以外的值将被忽略。同时，我们也为 Notification 的各种 type 注册了方法，可以在不传入`type`字段的情况下像`open5`和`open6`那样直接调用。
 ```html
 <template>
   <el-button
@@ -178,16 +225,84 @@
 ```
 :::
 
+### 自定义弹出位置
+
+可以让 Notification 从屏幕四角中的任意一角弹出
+
+:::demo 使用`position`属性定义 Notification 的弹出位置，支持四个选项：`top-right`、`top-left`、`bottom-right`、`bottom-left`，默认为`top-right`。
+```html
+<template>
+  <el-button
+    plain
+    @click="open7">
+    右上角
+  </el-button>
+  <el-button
+    plain
+    @click="open8">
+    右下角
+  </el-button>
+  <el-button
+    plain
+    @click="open9">
+    左下角
+  </el-button>
+  <el-button
+    plain
+    @click="open10">
+    左上角
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open7() {
+        this.$notify({
+          title: '自定义位置',
+          message: '右上角弹出的消息'
+        });
+      },
+
+      open8() {
+        this.$notify({
+          title: '自定义位置',
+          message: '右下角弹出的消息',
+          position: 'bottom-right'
+        });
+      },
+
+      open9() {
+        this.$notify({
+          title: '自定义位置',
+          message: '左下角弹出的消息',
+          position: 'bottom-left'
+        });
+      },
+
+      open10() {
+        this.$notify({
+          title: '自定义位置',
+          message: '左上角弹出的消息',
+          position: 'top-left'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### 带有偏移
 
 让 Notification 偏移一些位置
 
-::: demo Notification 提供设置偏移量的功能，通过设置 `offset` 字段，可以使弹出的消息距屏幕顶部偏移一段距离。注意在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量。
+:::demo Notification 提供设置偏移量的功能，通过设置 `offset` 字段，可以使弹出的消息距屏幕边缘偏移一段距离。注意在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量。
 ```html
 <template>
   <el-button
     plain
-    @click="open7">
+    @click="open11">
     偏移的消息
   </el-button>
 </template>
@@ -195,10 +310,10 @@
 <script>
   export default {
     methods: {
-      open7() {
-        this.$notify.success({
-          title: '成功',
-          message: '这是一条成功的提示消息',
+      open11() {
+        this.$notify({
+          title: '偏移',
+          message: '这是一条带有偏移的提示消息',
           offset: 100
         });
       }
@@ -208,6 +323,69 @@
 ```
 :::
 
+### 使用 HTML 片段
+`message` 属性支持传入 HTML 片段
+
+:::demo 将`dangerouslyUseHTMLString`属性设置为 true，`message` 就会被当作 HTML 片段处理。
+```html
+<template>
+  <el-button
+    plain
+    @click="open12">
+    使用 HTML 片段
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open12() {
+        this.$notify({
+          title: 'HTML 片段',
+          dangerouslyUseHTMLString: true,
+          message: '<strong>这是 <i>HTML</i> 片段</strong>'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+:::warning
+`message` 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此在 `dangerouslyUseHTMLString` 打开的情况下，请确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。
+:::
+
+### 隐藏关闭按钮
+
+可以不显示关闭按钮
+
+:::demo 将`showClose`属性设置为`false`即可隐藏关闭按钮。
+```html
+<template>
+  <el-button
+    plain
+    @click="open13">
+    隐藏关闭按钮
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open13() {
+        this.$notify.success({
+          title: 'Info',
+          message: '这是一条没有关闭按钮的消息',
+          showClose: false
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### 全局方法
 
 Element 为 `Vue.prototype` 添加了全局方法 `$notify`。因此在 vue instance 中可以采用本页面中的方式调用 Notification。
@@ -220,17 +398,20 @@ Element 为 `Vue.prototype` 添加了全局方法 `$notify`。因此在 vue inst
 import { Notification } from 'element-ui';
 ```
 
-此时调用方法为 `Notification(options)`。我们也为每个 type 定义了各自的方法，如 `Notification.success(options)`。
+此时调用方法为 `Notification(options)`。我们也为每个 type 定义了各自的方法，如 `Notification.success(options)`。并且可以调用 `Notification.closeAll()` 手动关闭所有实例。
 
 ### Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | title | 标题 | string | — | — |
 | message | 说明文字 | string/Vue.VNode | — | — |
+| dangerouslyUseHTMLString | 是否将 message 属性作为 HTML 片段处理 | boolean | — | false |
 | type | 主题样式，如果不在可选值内将被忽略 | string | success/warning/info/error | — |
 | iconClass | 自定义图标的类名。若设置了 `type`，则 `iconClass` 会被覆盖 | string | — | — |
 | customClass | 自定义类名 | string | — | — |
 | duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 4500 |
+| position | 自定义弹出位置 | string | top-right/top-left/bottom-right/bottom-left | top-right |
+| showClose | 是否显示关闭按钮 | boolean | — | true |
 | onClose | 关闭时的回调函数 | function | — | — |
 | onClick | 点击 Notification 时的回调函数 | function | — | — |
 | offset | 偏移的距离，在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量 | number | — | 0 |
diff --git a/examples/docs/zh-CN/pagination.md b/examples/docs/zh-CN/pagination.md
index a5df7a7fa7..5d8e96a8ef 100644
--- a/examples/docs/zh-CN/pagination.md
+++ b/examples/docs/zh-CN/pagination.md
@@ -4,7 +4,7 @@
 
 ### 基础用法
 
-:::demo 设置`layout`，表示需要显示的内容，用逗号分隔，布局元素会依次显示。`prev`表示上一页，`next`为下一页，`pager`表示页码列表，除此以外还提供了`jumper`和`total`，`size`和特殊的布局符号`->`，`->`后的元素会靠右显示，`jumper`表示跳页元素，`total`表示显示页码总数，`size`用于设置每页显示的页码数量。
+:::demo 设置`layout`，表示需要显示的内容，用逗号分隔，布局元素会依次显示。`prev`表示上一页，`next`为下一页，`pager`表示页码列表，除此以外还提供了`jumper`和`total`，`size`和特殊的布局符号`->`，`->`后的元素会靠右显示，`jumper`表示跳页元素，`total`表示总条目数，`size`用于设置每页显示的页码数量。
 ```html
 <div class="block">
   <span class="demonstration">页数较少时的效果</span>
@@ -23,6 +23,31 @@
 ```
 :::
 
+### 设置最大页码按钮数
+
+:::demo 默认情况下，当总页数超过 7 页时，Pagination 会折叠多余的页码按钮。通过`pager-count`属性可以设置最大页码按钮数。
+```html
+<el-pagination
+  :page-size="20"
+  :pager-count="11"
+  layout="prev, pager, next"
+  :total="1000">
+</el-pagination>
+```
+:::
+
+### 带有背景色的分页
+
+:::demo 设置`background`属性可以为分页按钮添加背景色。
+```html
+<el-pagination
+  background
+  layout="prev, pager, next"
+  :total="1000">
+</el-pagination>
+```
+:::
+
 ### 小型分页
 
 在空间有限的情况下，可以使用简单的小型分页。
@@ -153,7 +178,7 @@
     padding: 30px 0;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    float: left;
+    display: inline-block;
     width: 50%;
     box-sizing: border-box;
 
@@ -198,19 +223,27 @@
 ### Attributes
 | 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
 |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
-| small | 是否使用小型分页样式 | Boolean | — | false |
-| page-size | 每页显示条目个数 | Number | — | 10 |
-| total | 总条目数 | Number | — | — |
+| small | 是否使用小型分页样式 | boolean | — | false |
+| background | 是否为分页按钮添加背景色 | boolean | — | false |
+| page-size | 每页显示条目个数，支持 .sync 修饰符 | number | — | 10 |
+| total | 总条目数 | number | — | — |
 | page-count | 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 | Number | — | — |
-| current-page | 当前页数，支持 .sync 修饰符 | Number | — | 1 |
+| pager-count | 页码按钮的数量，当总页数超过该值时会折叠 | number | 大于等于 5 且小于等于 21 的奇数 | 7 |
+| current-page | 当前页数，支持 .sync 修饰符 | number | — | 1 |
 | layout | 组件布局，子组件名用逗号分隔| String | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total'  |
-| page-sizes | 每页显示个数选择器的选项设置 | Number[] | — |  [10, 20, 30, 40, 50, 100] |
+| page-sizes | 每页显示个数选择器的选项设置 | number[] | — |  [10, 20, 30, 40, 50, 100] |
+| popper-class | 每页显示个数选择器的下拉框类名 | string | — | — |
+| prev-text | 替代图标显示的上一页文字 | string | — | — |
+| next-text | 替代图标显示的下一页文字 | string | — | — |
+| disabled | 是否禁用 | boolean | — | false |
 
 ### Events
 | 事件名称 | 说明 | 回调参数 |
 |---------|--------|---------|
-| size-change | pageSize 改变时会触发 | 每页条数`size` |
-| current-change | currentPage 改变时会触发 | 当前页`currentPage` |
+| size-change | pageSize 改变时会触发 | 每页条数 |
+| current-change | currentPage 改变时会触发 | 当前页 |
+| prev-click | 用户点击上一页按钮改变当前页后触发 | 当前页 |
+| next-click | 用户点击下一页按钮改变当前页后触发 | 当前页 |
 
 ### Slot
 | name | 说明 |
diff --git a/examples/docs/zh-CN/popover.md b/examples/docs/zh-CN/popover.md
index 4498748825..2cc0a2c195 100644
--- a/examples/docs/zh-CN/popover.md
+++ b/examples/docs/zh-CN/popover.md
@@ -2,6 +2,7 @@
   export default {
     data() {
       return {
+        visible: false,
         visible2: false,
         gridData: [{
           date: '2016-05-02',
@@ -74,27 +75,8 @@
           date: '2016-05-07',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
-        }],
-        singleSelection: {},
-        multipleSelection: [],
-        model: ''
+        }]
       };
-    },
-
-    watch: {
-      singleSelection(val) {
-        console.log('selection: ', val);
-      },
-
-      multipleSelection(val) {
-        console.log('selection: ', val);
-      }
-    },
-
-    events: {
-      handleClick(row) {
-        console.log('you clicked ', row);
-      }
     }
   };
 </script>
@@ -118,36 +100,57 @@
 ### 基础用法
 Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。
 
-:::demo 设置索引`ref`，在按钮中，我们注册了自定义指令`v-popover`，指向索引ID。`trigger`属性用于设置何时触发 Popover ，提供三种触发方式：`hover`, `click` 和 `focus`。第二种用法通过 `slot` 指定 reference。
+:::demo `trigger`属性用于设置何时触发 Popover，支持四种触发方式：`hover`，`click`，`focus` 和 `manual`。对于触发 Popover 的元素，有两种写法：使用 `slot="reference"` 的具名插槽，或使用自定义指令`v-popover`指向 Popover 的索引`ref`。
 ```html
-<el-popover
-  ref="popover1"
-  placement="top-start"
-  title="标题"
-  width="200"
-  trigger="hover"
-  content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
-</el-popover>
+<template>
+  <el-popover
+    placement="top-start"
+    title="标题"
+    width="200"
+    trigger="hover"
+    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
+    <el-button slot="reference">hover 激活</el-button>
+  </el-popover>
 
-<el-popover
-  ref="popover2"
-  placement="bottom"
-  title="标题"
-  width="200"
-  trigger="click"
-  content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
-</el-popover>
+  <el-popover
+    placement="bottom"
+    title="标题"
+    width="200"
+    trigger="click"
+    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
+    <el-button slot="reference">click 激活</el-button>
+  </el-popover>
 
-<el-button v-popover:popover1>hover 激活</el-button>
-<el-button v-popover:popover2>click 激活</el-button>
-<el-popover
-  placement="right"
-  title="标题"
-  width="200"
-  trigger="focus"
-  content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
-  <el-button slot="reference">focus 激活</el-button>
-</el-popover>
+  <el-popover
+    ref="popover"
+    placement="right"
+    title="标题"
+    width="200"
+    trigger="focus"
+    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
+  </el-popover>
+  <el-button v-popover:popover>focus 激活</el-button>
+
+  <el-popover
+    placement="bottom"
+    title="标题"
+    width="200"
+    trigger="manual"
+    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
+    v-model="visible">
+    <el-button slot="reference" @click="visible = !visible">手动激活</el-button>
+  </el-popover>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        visible: false
+      };
+    }
+  };
+</script>
 ```
 :::
 
@@ -158,7 +161,6 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
 :::demo 利用分发取代`content`属性
 ```html
 <el-popover
-  ref="popover4"
   placement="right"
   width="400"
   trigger="click">
@@ -167,10 +169,9 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
     <el-table-column width="100" property="name" label="姓名"></el-table-column>
     <el-table-column width="300" property="address" label="地址"></el-table-column>
   </el-table>
+  <el-button slot="reference">click 激活</el-button>
 </el-popover>
 
-<el-button v-popover:popover4>click 激活</el-button>
-
 <script>
   export default {
     data() {
@@ -206,7 +207,6 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
 :::demo
 ```html
 <el-popover
-  ref="popover5"
   placement="top"
   width="160"
   v-model="visible2">
@@ -215,10 +215,9 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
     <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
     <el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>
   </div>
+  <el-button slot="reference">删除</el-button>
 </el-popover>
 
-<el-button v-popover:popover5>删除</el-button>
-
 <script>
   export default {
     data() {
@@ -258,4 +257,6 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
 | 事件名称 | 说明 | 回调参数 |
 |---------|--------|---------|
 | show | 显示时触发 | — |
+| after-enter | 显示动画播放完毕后触发 | — |
 | hide | 隐藏时触发 | — |
+| after-leave | 隐藏动画播放完毕后触发 | — |
diff --git a/examples/docs/zh-CN/progress.md b/examples/docs/zh-CN/progress.md
index c80d561510..a6b1b9c9fe 100644
--- a/examples/docs/zh-CN/progress.md
+++ b/examples/docs/zh-CN/progress.md
@@ -21,6 +21,7 @@
 ```html
 <el-progress :percentage="0"></el-progress>
 <el-progress :percentage="70"></el-progress>
+<el-progress :percentage="80" color="#8e71c7"></el-progress>
 <el-progress :percentage="100" status="success"></el-progress>
 <el-progress :percentage="50" status="exception"></el-progress>
 ```
@@ -35,6 +36,7 @@
 ```html
 <el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
 <el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
+<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>
 <el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
 <el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>
 ```
@@ -47,6 +49,7 @@
 ```html
 <el-progress type="circle" :percentage="0"></el-progress>
 <el-progress type="circle" :percentage="25"></el-progress>
+<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>
 <el-progress type="circle" :percentage="100" status="success"></el-progress>
 <el-progress type="circle" :percentage="50" status="exception"></el-progress>
 ```
@@ -58,7 +61,8 @@
 | **percentage** | **百分比（必填）**   | number          |     0-100          |     0    |
 | type          | 进度条类型           | string         | line/circle | line |
 | stroke-width  | 进度条的宽度，单位 px | number          | — | 6 |
-| text-inside  | 进度条显示文字内置在进度条内（只在 type=line 时可用） | Boolean | — | false |
+| text-inside  | 进度条显示文字内置在进度条内（只在 type=line 时可用） | boolean | — | false |
 | status  | 进度条当前状态 | string | success/exception | — |
+| color  | 进度条背景色（会覆盖 status 状态颜色） | string | — | — |
 | width  | 环形进度条画布宽度（只在 type=circle 时可用） | number |  | 126 |
 | show-text  | 是否显示进度条文字内容 | boolean | — | true |
diff --git a/examples/docs/zh-CN/quickstart.md b/examples/docs/zh-CN/quickstart.md
index 863d57c5f9..5177315e26 100644
--- a/examples/docs/zh-CN/quickstart.md
+++ b/examples/docs/zh-CN/quickstart.md
@@ -2,130 +2,15 @@
 
 本节将介绍如何在项目中使用 Element。
 
-### 使用 Starter Kit
-
-我们提供了通用的[项目模板](https://github.com/ElementUI/element-starter)，你可以直接使用。对于熟悉 [cooking](https://github.com/ElementUI/element-cooking-starter) 或 [Laravel](https://github.com/ElementUI/element-in-laravel-starter) 的用户，我们也准备了相应的模板，同样可以直接下载使用。
+### 使用 vue-cli@3
 
-如果不希望使用我们提供的模板，请继续阅读。
+我们为新版的 vue-cli 准备了相应的 [Element 插件](https://github.com/ElementUI/vue-cli-plugin-element)，你可以用它们快速地搭建一个基于 Element 的项目。
 
-### 配置文件
-
-新建项目，项目结构为
-```text
-|- src/  --------------------- 项目源代码
-    |- App.vue
-    |- main.js  -------------- 入口文件
-|- .babelrc  ----------------- babel 配置文件
-|- index.html  --------------- HTML 模板
-|- package.json  ------------- npm 配置文件
-|- README.md  ---------------- 项目帮助文档
-|- webpack.config.js  -------- webpack 配置文件
-```
-
-几个配置文件的典型配置如下：
-
-**.babelrc**
-```json
-{
-  "presets": ["vue-app"]
-}
-```
-
-<br>
-
-**package.json**
-```json
-{
-  "name": "element-starter",
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 8086",
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
-  },
-  "dependencies": {
-    "element-ui": "^1.0.0",
-    "vue": "^2.1.6"
-  },
-  "devDependencies": {
-    "babel-core": "^6.0.0",
-    "babel-loader": "^6.0.0",
-    "babel-preset-vue-app": "^1.2.0",
-    "cross-env": "^1.0.6",
-    "css-loader": "^0.23.1",
-    "file-loader": "^0.8.5",
-    "style-loader": "^0.13.1",
-    "vue-loader": "^9.8.0",
-    "webpack": "beta",
-    "webpack-dev-server": "beta"
-  }
-}
-```
+### 使用 Starter Kit
 
-<br>
+我们提供了通用的[项目模板](https://github.com/ElementUI/element-starter)，你可以直接使用。对于 Laravel 用户，我们也准备了相应的[模板](https://github.com/ElementUI/element-in-laravel-starter)，同样可以直接下载使用。
 
-**webpack.config.js**
-```javascript
-var path = require('path')
-var webpack = require('webpack')
-
-module.exports = {
-  entry: './src/main.js',
-  output: {
-    path: path.resolve(__dirname, './dist'),
-    publicPath: '/dist/',
-    filename: 'build.js'
-  },
-  module: {
-    loaders: [
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader'
-      },
-      {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        exclude: /node_modules/
-      },
-      {
-        test: /\.css$/,
-        loader: 'style-loader!css-loader'
-      },
-      {
-        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
-        loader: 'file-loader'
-      },
-      {
-        test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
-        loader: 'file-loader',
-        query: {
-          name: '[name].[ext]?[hash]'
-        }
-      }
-    ]
-  },
-  devServer: {
-    historyApiFallback: true,
-    noInfo: true
-  },
-  devtool: '#eval-source-map'
-}
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports.devtool = '#source-map'
-  // http://vue-loader.vuejs.org/en/workflow/production.html
-  module.exports.plugins = (module.exports.plugins || []).concat([
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"production"'
-      }
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
-    })
-  ])
-}
-```
+如果不希望使用我们提供的模板，请继续阅读。
 
 ### 引入 Element
 
@@ -134,19 +19,21 @@ if (process.env.NODE_ENV === 'production') {
 #### 完整引入
 
 在 main.js 中写入以下内容：
+
 ```javascript
-import Vue from 'vue'
-import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-default/index.css'
-import App from './App.vue'
+import Vue from 'vue';
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import App from './App.vue';
 
-Vue.use(ElementUI)
+Vue.use(ElementUI);
 
 new Vue({
   el: '#app',
   render: h => h(App)
-})
+});
 ```
+
 以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。
 
 #### 按需引入
@@ -160,29 +47,31 @@ npm install babel-plugin-component -D
 ```
 
 然后，将 .babelrc 修改为：
+
 ```json
 {
-  "presets": [
-    ["es2015", { "modules": false }]
-  ],
-  "plugins": [["component", [
-    {
-      "libraryName": "element-ui",
-      "styleLibraryName": "theme-default"
-    }
-  ]]]
+  "presets": [["es2015", { "modules": false }]],
+  "plugins": [
+    [
+      "component",
+      {
+        "libraryName": "element-ui",
+        "styleLibraryName": "theme-chalk"
+      }
+    ]
+  ]
 }
 ```
 
 接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：
 
 ```javascript
-import Vue from 'vue'
-import { Button, Select } from 'element-ui'
-import App from './App.vue'
+import Vue from 'vue';
+import { Button, Select } from 'element-ui';
+import App from './App.vue';
 
-Vue.component(Button.name, Button)
-Vue.component(Select.name, Select)
+Vue.component(Button.name, Button);
+Vue.component(Select.name, Select);
 /* 或写为
  * Vue.use(Button)
  * Vue.use(Select)
@@ -191,13 +80,13 @@ Vue.component(Select.name, Select)
 new Vue({
   el: '#app',
   render: h => h(App)
-})
+});
 ```
 
-完整组件列表和引入方式（完整组件列表以 [components.json](https://github.com/ElemeFE/element/blob/dev/components.json) 为准）
+完整组件列表和引入方式（完整组件列表以 [components.json](https://github.com/ElemeFE/element/blob/master/components.json) 为准）
 
 ```javascript
-import Vue from 'vue'
+import Vue from 'vue';
 import {
   Pagination,
   Dialog,
@@ -215,6 +104,7 @@ import {
   RadioGroup,
   RadioButton,
   Checkbox,
+  CheckboxButton,
   CheckboxGroup,
   Switch,
   Select,
@@ -244,107 +134,137 @@ import {
   Col,
   Upload,
   Progress,
-  Spinner,
   Badge,
   Card,
   Rate,
   Steps,
   Step,
   Carousel,
-  Scrollbar,
   CarouselItem,
   Collapse,
   CollapseItem,
   Cascader,
   ColorPicker,
+  Transfer,
+  Container,
+  Header,
+  Aside,
+  Main,
+  Footer,
   Loading,
   MessageBox,
   Message,
   Notification
-} from 'element-ui'
-
-Vue.use(Pagination)
-Vue.use(Dialog)
-Vue.use(Autocomplete)
-Vue.use(Dropdown)
-Vue.use(DropdownMenu)
-Vue.use(DropdownItem)
-Vue.use(Menu)
-Vue.use(Submenu)
-Vue.use(MenuItem)
-Vue.use(MenuItemGroup)
-Vue.use(Input)
-Vue.use(InputNumber)
-Vue.use(Radio)
-Vue.use(RadioGroup)
-Vue.use(RadioButton)
-Vue.use(Checkbox)
-Vue.use(CheckboxGroup)
-Vue.use(Switch)
-Vue.use(Select)
-Vue.use(Option)
-Vue.use(OptionGroup)
-Vue.use(Button)
-Vue.use(ButtonGroup)
-Vue.use(Table)
-Vue.use(TableColumn)
-Vue.use(DatePicker)
-Vue.use(TimeSelect)
-Vue.use(TimePicker)
-Vue.use(Popover)
-Vue.use(Tooltip)
-Vue.use(Breadcrumb)
-Vue.use(BreadcrumbItem)
-Vue.use(Form)
-Vue.use(FormItem)
-Vue.use(Tabs)
-Vue.use(TabPane)
-Vue.use(Tag)
-Vue.use(Tree)
-Vue.use(Alert)
-Vue.use(Slider)
-Vue.use(Icon)
-Vue.use(Row)
-Vue.use(Col)
-Vue.use(Upload)
-Vue.use(Progress)
-Vue.use(Spinner)
-Vue.use(Badge)
-Vue.use(Card)
-Vue.use(Rate)
-Vue.use(Steps)
-Vue.use(Step)
-Vue.use(Carousel)
-Vue.use(Scrollbar)
-Vue.use(CarouselItem)
-Vue.use(Collapse)
-Vue.use(CollapseItem)
-Vue.use(Cascader)
-Vue.use(ColorPicker)
-
-Vue.use(Loading.directive)
-
-Vue.prototype.$loading = Loading.service
-Vue.prototype.$msgbox = MessageBox
-Vue.prototype.$alert = MessageBox.alert
-Vue.prototype.$confirm = MessageBox.confirm
-Vue.prototype.$prompt = MessageBox.prompt
-Vue.prototype.$notify = Notification
-Vue.prototype.$message = Message
+} from 'element-ui';
+
+Vue.use(Pagination);
+Vue.use(Dialog);
+Vue.use(Autocomplete);
+Vue.use(Dropdown);
+Vue.use(DropdownMenu);
+Vue.use(DropdownItem);
+Vue.use(Menu);
+Vue.use(Submenu);
+Vue.use(MenuItem);
+Vue.use(MenuItemGroup);
+Vue.use(Input);
+Vue.use(InputNumber);
+Vue.use(Radio);
+Vue.use(RadioGroup);
+Vue.use(RadioButton);
+Vue.use(Checkbox);
+Vue.use(CheckboxButton);
+Vue.use(CheckboxGroup);
+Vue.use(Switch);
+Vue.use(Select);
+Vue.use(Option);
+Vue.use(OptionGroup);
+Vue.use(Button);
+Vue.use(ButtonGroup);
+Vue.use(Table);
+Vue.use(TableColumn);
+Vue.use(DatePicker);
+Vue.use(TimeSelect);
+Vue.use(TimePicker);
+Vue.use(Popover);
+Vue.use(Tooltip);
+Vue.use(Breadcrumb);
+Vue.use(BreadcrumbItem);
+Vue.use(Form);
+Vue.use(FormItem);
+Vue.use(Tabs);
+Vue.use(TabPane);
+Vue.use(Tag);
+Vue.use(Tree);
+Vue.use(Alert);
+Vue.use(Slider);
+Vue.use(Icon);
+Vue.use(Row);
+Vue.use(Col);
+Vue.use(Upload);
+Vue.use(Progress);
+Vue.use(Badge);
+Vue.use(Card);
+Vue.use(Rate);
+Vue.use(Steps);
+Vue.use(Step);
+Vue.use(Carousel);
+Vue.use(CarouselItem);
+Vue.use(Collapse);
+Vue.use(CollapseItem);
+Vue.use(Cascader);
+Vue.use(ColorPicker);
+Vue.use(Transfer);
+Vue.use(Container);
+Vue.use(Header);
+Vue.use(Aside);
+Vue.use(Main);
+Vue.use(Footer);
+
+Vue.use(Loading.directive);
+
+Vue.prototype.$loading = Loading.service;
+Vue.prototype.$msgbox = MessageBox;
+Vue.prototype.$alert = MessageBox.alert;
+Vue.prototype.$confirm = MessageBox.confirm;
+Vue.prototype.$prompt = MessageBox.prompt;
+Vue.prototype.$notify = Notification;
+Vue.prototype.$message = Message;
 ```
 
-### 开始使用
+### 全局配置
 
-至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。启动开发模式：
+在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 `size` 与 `zIndex` 字段。`size` 用于改变组件的默认尺寸，`zIndex` 设置弹框的初始 z-index（默认值：2000）。按照引入 Element 的方式，具体操作如下：
 
-```bash
-# 执行如下命令后访问 localhost:8086
-npm run dev
+完整引入 Element：
+
+```js
+import Vue from 'vue';
+import Element from 'element-ui';
+Vue.use(Element, { size: 'small', zIndex: 3000 });
 ```
 
-编译：
+按需引入 Element：
 
-```bash
-npm run build
+```js
+import Vue from 'vue';
+import { Button } from 'element-ui';
+
+Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
+Vue.use(Button);
 ```
-各个组件的使用方法请参阅它们各自的文档。
+
+按照以上设置，项目中所有拥有 `size` 属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。
+
+### 开始使用
+
+至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。
+
+### 使用 Nuxt.js
+
+我们还可以使用 [Nuxt.js](https://nuxtjs.org)：
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe src="https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true" alt="nuxt-with-element on glitch" style="height: 100%; width: 100%; border: 0;"></iframe>
+</div>
+
diff --git a/examples/docs/zh-CN/radio.md b/examples/docs/zh-CN/radio.md
index 858135bd11..3ae648e3ad 100644
--- a/examples/docs/zh-CN/radio.md
+++ b/examples/docs/zh-CN/radio.md
@@ -7,7 +7,12 @@
         radio2: 3,
         radio3: '上海',
         radio4: '上海',
-        radio5: '上海'
+        radio5: '上海',
+        radio6: '上海',
+        radio7: '1',
+        radio8: '1',
+        radio9: '1',
+        radio10: '1'
       };
     }
   };
@@ -21,12 +26,12 @@
 
 由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。
 
-:::demo 要使用 Radio 组件，只需要设置`v-model`绑定变量，选中意味着变量的值为相应 Radio `label`属性的值，`label`可以是`String`或者`Number`。
+:::demo 要使用 Radio 组件，只需要设置`v-model`绑定变量，选中意味着变量的值为相应 Radio `label`属性的值，`label`可以是`String`、`Number`或`Boolean`。
 
 ```html
 <template>
-  <el-radio class="radio" v-model="radio" label="1">备选项</el-radio>
-  <el-radio class="radio" v-model="radio" label="2">备选项</el-radio>
+  <el-radio v-model="radio" label="1">备选项</el-radio>
+  <el-radio v-model="radio" label="2">备选项</el-radio>
 </template>
 
 <script>
@@ -45,7 +50,7 @@
 
 单选框不可用的状态。
 
-:::demo 注意：请牢记，选中的条件是绑定的变量值等于`label`中的值。只要在`el-radio`元素中设置`disabled`属性即可，它接受一个`Boolean`，`true`为禁用。
+:::demo 只要在`el-radio`元素中设置`disabled`属性即可，它接受一个`Boolean`，`true`为禁用。
 ```html
 <template>
   <el-radio disabled v-model="radio1" label="禁用">备选项</el-radio>
@@ -95,29 +100,41 @@
 
 按钮样式的单选组合。
 
-:::demo 只需要把`el-radio`元素换成`el-radio-button`元素即可，此外，Element 还提供了`size`属性给按钮组，支持`large`和`small`两种（如果不设定为默认）。
+:::demo 只需要把`el-radio`元素换成`el-radio-button`元素即可，此外，Element 还提供了`size`属性。
 ```html
 <template>
-  <el-radio-group v-model="radio3">
-    <el-radio-button label="上海"></el-radio-button>
-    <el-radio-button label="北京"></el-radio-button>
-    <el-radio-button label="广州"></el-radio-button>
-    <el-radio-button label="深圳"></el-radio-button>
-  </el-radio-group>
-  <div style="margin: 15px 0;"></div>
-  <el-radio-group v-model="radio4">
-    <el-radio-button label="上海"></el-radio-button>
-    <el-radio-button label="北京" :disabled="true"></el-radio-button>
-    <el-radio-button label="广州"></el-radio-button>
-    <el-radio-button label="深圳"></el-radio-button>
-  </el-radio-group>
-  <div style="margin: 15px 0;"></div>
-  <el-radio-group v-model="radio5" :disabled="true">
-    <el-radio-button label="上海"></el-radio-button>
-    <el-radio-button label="北京"></el-radio-button>
-    <el-radio-button label="广州"></el-radio-button>
-    <el-radio-button label="深圳"></el-radio-button>
-  </el-radio-group>
+  <div>
+    <el-radio-group v-model="radio3">
+      <el-radio-button label="上海"></el-radio-button>
+      <el-radio-button label="北京"></el-radio-button>
+      <el-radio-button label="广州"></el-radio-button>
+      <el-radio-button label="深圳"></el-radio-button>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio4" size="medium">
+      <el-radio-button label="上海" ></el-radio-button>
+      <el-radio-button label="北京"></el-radio-button>
+      <el-radio-button label="广州"></el-radio-button>
+      <el-radio-button label="深圳"></el-radio-button>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio5" size="small">
+      <el-radio-button label="上海"></el-radio-button>
+      <el-radio-button label="北京" disabled ></el-radio-button>
+      <el-radio-button label="广州"></el-radio-button>
+      <el-radio-button label="深圳"></el-radio-button>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio6" disabled size="mini">
+      <el-radio-button label="上海"></el-radio-button>
+      <el-radio-button label="北京"></el-radio-button>
+      <el-radio-button label="广州"></el-radio-button>
+      <el-radio-button label="深圳"></el-radio-button>
+    </el-radio-group>
+  </div>
 </template>
 
 <script>
@@ -126,7 +143,50 @@
       return {
         radio3: '上海',
         radio4: '上海',
-        radio5: '上海'
+        radio5: '上海',
+        radio6: '上海'
+      };
+    }
+  }
+</script>
+```
+:::
+
+### 带有边框
+
+:::demo 设置`border`属性可以渲染为带有边框的单选框。
+```html
+<template>
+  <div>
+    <el-radio v-model="radio7" label="1" border>备选项1</el-radio>
+    <el-radio v-model="radio7" label="2" border>备选项2</el-radio>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio v-model="radio8" label="1" border size="medium">备选项1</el-radio>
+    <el-radio v-model="radio8" label="2" border size="medium">备选项2</el-radio>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio9" size="small">
+      <el-radio label="1" border>备选项1</el-radio>
+      <el-radio label="2" border disabled>备选项2</el-radio>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio10" size="mini" disabled>
+      <el-radio label="1" border>备选项1</el-radio>
+      <el-radio label="2" border>备选项2</el-radio>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        radio7: '1',
+        radio8: '1',
+        radio9: '1',
+        radio10: '1'
       };
     }
   }
@@ -137,16 +197,24 @@
 ### Radio Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| label     | Radio 的 value   | string,number,boolean    |       —        |      —   |
+| label     | Radio 的 value   | string / number / boolean    |       —        |      —   |
 | disabled  | 是否禁用    | boolean   | — | false   |
+| border  | 是否显示边框  | boolean   | — | false   |
+| size  | Radio 的尺寸，仅在 border 为真时有效  | string  | medium / small / mini | — |
 | name | 原生 name 属性 | string    |      —         |     —    |
 
+### Radio Events
+| 事件名称 | 说明 | 回调参数 |
+|---------- |-------- |---------- |
+| change  | 绑定值变化时触发的事件 |  选中的 Radio label 值  |
+
 ### Radio-group Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| size     | Radio 按钮组尺寸   | string  | large, small  |    —     |
-| fill  | 按钮激活时的填充色和边框色    | string   | — | #20a0ff   |
-| text-color  | 按钮激活时的文本颜色    | string   | — | #ffffff   |
+| size     | 单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效   | string  | medium / small / mini |    —     |
+| disabled  | 是否禁用    | boolean   | — | false   |
+| text-color  | 按钮形式的 Radio 激活时的文本颜色    | string   | — | #ffffff   |
+| fill  | 按钮形式的 Radio 激活时的填充色和边框色    | string   | — | #409EFF   |
 
 ### Radio-group Events
 | 事件名称 | 说明 | 回调参数 |
@@ -156,5 +224,6 @@
 ### Radio-button Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| label     | Radio 的 value  | string,number  |        —       |     —    |
+| label     | Radio 的 value  | string / number  |        —       |     —    |
 | disabled  | 是否禁用    | boolean   | — | false   |
+| name | 原生 name 属性 | string    |      —         |     —    |
diff --git a/examples/docs/zh-CN/rate.md b/examples/docs/zh-CN/rate.md
index 98a4d02ca7..6e54a63e6a 100644
--- a/examples/docs/zh-CN/rate.md
+++ b/examples/docs/zh-CN/rate.md
@@ -22,7 +22,7 @@
     padding: 30px 0;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    float: left;
+    display: inline-block;
     width: 50%;
     box-sizing: border-box;
     &:last-child {
@@ -123,14 +123,14 @@
 
 只读的评分用来展示分数，允许出现半星
 
-:::demo 为组件设置 `disabled` 属性表示组件为只读，支持小数分值。此时若设置 `show-text`，则会在右侧显示目前的分值。可以提供 `text-template` 作为显示模板，模板为一个包含了 `{value}` 的字符串，`{value}` 会被解析为分值。
+:::demo 为组件设置 `disabled` 属性表示组件为只读，支持小数分值。此时若设置 `show-score`，则会在右侧显示目前的分值。可以提供 `score-template` 作为显示模板，模板为一个包含了 `{value}` 的字符串，`{value}` 会被解析为分值。
 ``` html
 <el-rate
   v-model="value5"
   disabled
-  show-text
+  show-score
   text-color="#ff9900"
-  text-template="{value}">
+  score-template="{value}">
 </el-rate>
 
 <script>
@@ -159,10 +159,11 @@
 | 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 | 是否显示辅助文字 | boolean | — | false |
+| show-text | 是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容 | boolean | — | false |
+| show-score | 是否显示当前分数，show-score 和 show-text 不能同时为真 | boolean | — | false |
 | text-color | 辅助文字的颜色 | string | — | #1F2D3D |
 | texts | 辅助文字数组 | array | — | ['极差', '失望', '一般', '满意', '惊喜'] |
-| text-template | 只读时的辅助文字模板 | string | — | {value} |
+| score-template | 分数显示模板 | string | — | {value} |
 
 ### Events
 | 事件名称      | 说明    | 回调参数      |
diff --git a/examples/docs/zh-CN/select.md b/examples/docs/zh-CN/select.md
index d524085b8c..4b858df112 100644
--- a/examples/docs/zh-CN/select.md
+++ b/examples/docs/zh-CN/select.md
@@ -101,6 +101,7 @@
         value8: '',
         value9: '',
         value10: [],
+        value11: [],
         loading: false,
         states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
       };
@@ -319,7 +320,7 @@
 
 适用性较广的基础多选，用 Tag 展示已选项
 
-:::demo 为`el-select`设置`multiple`属性即可启用多选，此时`v-model`的值为当前选中值所组成的数组
+:::demo 为`el-select`设置`multiple`属性即可启用多选，此时`v-model`的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置`collapse-tags`属性将它们合并为一段文字。
 ```html
 <template>
   <el-select v-model="value5" multiple placeholder="请选择">
@@ -330,6 +331,20 @@
       :value="item.value">
     </el-option>
   </el-select>
+
+  <el-select
+    v-model="value11"
+    multiple
+    collapse-tags
+    style="margin-left: 20px;"
+    placeholder="请选择">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
 </template>
 
 <script>
@@ -352,7 +367,8 @@
           value: '选项5',
           label: '北京烤鸭'
         }],
-        value5: []
+        value5: [],
+        value11: []
       }
     }
   }
@@ -525,6 +541,7 @@
     multiple
     filterable
     remote
+    reserve-keyword
     placeholder="请输入关键词"
     :remote-method="remoteMethod"
     :loading="loading">
@@ -592,7 +609,7 @@
 
 ### 创建条目
 可以创建并选中选项中不存在的条目
-:::demo 使用`allow-create`属性即可通过在输入框中输入文字来创建新的条目。注意此时`filterable`必须为真。
+:::demo 使用`allow-create`属性即可通过在输入框中输入文字来创建新的条目。注意此时`filterable`必须为真。本例还使用了`default-first-option`属性，在该属性打开的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。
 ```html
 <template>
   <el-select
@@ -600,6 +617,7 @@
     multiple
     filterable
     allow-create
+    default-first-option
     placeholder="请选择文章标签">
     <el-option
       v-for="item in options5"
@@ -636,20 +654,23 @@
 如果 Select 的绑定值为对象类型，请务必指定 `value-key` 作为它的唯一性标识。
 :::
 
-### Select Attributes 
+### Select Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | multiple | 是否多选 | boolean | — | false |
 | disabled | 是否禁用 | boolean | — | false |
 | value-key | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | string | — | value |
-| size | 输入框尺寸 | string | large/small/mini | — |
-| clearable | 单选时是否可以清空选项 | boolean | — | false |
+| size | 输入框尺寸 | string | medium/small/mini | — |
+| clearable | 是否可以清空选项 | boolean | — | false |
+| collapse-tags | 多选时是否将选中值按文字的形式展示 | boolean | — | false |
 | multiple-limit | 多选时用户最多可以选择的项目数，为 0 则不限制 | number | — | 0 |
 | name | select input 的 name 属性 | string | — | — |
+| autocomplete | select input 的 autocomplete 属性 | string | — | off |
+| auto-complete | 下个主版本弃用 | string | — | off |
 | placeholder | 占位符 | string | — | 请选择 |
 | filterable | 是否可搜索 | boolean | — | false |
 | allow-create | 是否允许用户创建新条目，需配合 `filterable` 使用 | boolean | — | false |
-| filter-method | 自定义过滤方法 | function | — | — |
+| filter-method | 自定义搜索方法 | function | — | — |
 | remote | 是否为远程搜索 | boolean | — | false |
 | remote-method | 远程搜索方法 | function | — | — |
 | loading | 是否正在从远程获取数据 | boolean | — | false |
@@ -657,7 +678,10 @@
 | no-match-text | 搜索条件无匹配时显示的文字 | string | — | 无匹配数据 |
 | no-data-text | 选项为空时显示的文字 | string | — | 无数据 |
 | popper-class | Select 下拉框的类名 | string | — | — |
+| reserve-keyword | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | boolean | — | false |
 | default-first-option | 在输入框按下回车，选择第一个匹配项。需配合 `filterable` 或 `remote` 使用 | boolean | - | false |
+| popper-append-to-body | 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false | boolean | - | true |
+| automatic-dropdown | 对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单 | boolean | - | false |
 
 ### Select Events
 | 事件名称 | 说明 | 回调参数 |
@@ -666,6 +690,14 @@
 | visible-change | 下拉框出现/隐藏时触发 | 出现则为 true，隐藏则为 false |
 | remove-tag | 多选模式下移除tag时触发 | 移除的tag值 |
 | clear | 可清空的单选模式下用户点击清空按钮时触发 | — |
+| blur | 当 input 失去焦点时触发 | (event: Event) |
+| focus | 当 input 获得焦点时触发 | (event: Event) |
+
+### Select Slots
+|   name  | 说明     |
+|---------|---------|
+|    —    | Option 组件列表 |
+| prefix  | Select 组件头部内容 |
 
 ### Option Group Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
@@ -679,3 +711,9 @@
 | value | 选项的值 | string/number/object | — | — |
 | label | 选项的标签，若不设置则默认与 `value` 相同 | string/number | — | — |
 | disabled | 是否禁用该选项 | boolean | — | false |
+
+### Methods
+| 方法名 | 说明 | 参数 |
+| ---- | ---- | ---- |
+| focus | 使 input 获取焦点 | - |
+| blur | 使 input 失去焦点，并隐藏下拉框 | - |
diff --git a/examples/docs/zh-CN/slider.md b/examples/docs/zh-CN/slider.md
index d6f4ae0633..1245cd291d 100644
--- a/examples/docs/zh-CN/slider.md
+++ b/examples/docs/zh-CN/slider.md
@@ -107,7 +107,7 @@
 
 选项可以是离散的
 
-:::demo 改变`step`的值可以改变步长，通过设置`show-step`属性可以显示间断点
+:::demo 改变`step`的值可以改变步长，通过设置`show-stops`属性可以显示间断点
 ```html
 <template>
   <div class="block">
@@ -230,13 +230,17 @@
 | disabled | 是否禁用 | boolean | — | false |
 | step | 步长 | number | — | 1 |
 | show-input | 是否显示输入框，仅在非范围选择时有效 | boolean | — | false |
-| show-input-controls | 在显示输入框的情况下，是否显示输入框的控制按钮 | boolean | — | true|
+| show-input-controls | 在显示输入框的情况下，是否显示输入框的控制按钮 | boolean | — | true |
+| input-size | 输入框的尺寸 | string | large / medium / small / mini | small |
 | show-stops | 是否显示间断点 | boolean | — | false |
 | show-tooltip | 是否显示 tooltip | boolean | — | true |
-| format-tooltip | 格式化 tooltip message | Function(value) | — | — |
+| format-tooltip | 格式化 tooltip message | function(value) | — | — |
 | range | 是否为范围选择 | boolean | — | false |
 | vertical | 是否竖向模式 | boolean | — | false |
-| height | Slider 高度，竖向模式时必填 | String | — | — |
+| height | Slider 高度，竖向模式时必填 | string | — | — |
+| label | 屏幕阅读器标签 | string | — | — |
+| debounce | 输入时的去抖延迟，毫秒，仅在`show-input`等于true时有效 | number | — | 300 |
+| tooltip-class | tooltip 的自定义类名 | string | — | — |
 
 ### Events
 | 事件名称      | 说明    | 回调参数      |
diff --git a/examples/docs/zh-CN/steps.md b/examples/docs/zh-CN/steps.md
index a8e9630c42..f6eede7f0a 100644
--- a/examples/docs/zh-CN/steps.md
+++ b/examples/docs/zh-CN/steps.md
@@ -23,7 +23,7 @@
 
 :::demo 设置`active`属性，接受一个`Number`，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置`space`属性即可，它接受`Boolean`，单位为`px`，如果不设置，则为自适应。设置`finish-status`属性可以改变已经完成的步骤的状态。
 ```html
-<el-steps :space="100" :active="active" finish-status="success">
+<el-steps :active="active" finish-status="success">
   <el-step title="步骤 1"></el-step>
   <el-step title="步骤 2"></el-step>
   <el-step title="步骤 3"></el-step>
@@ -55,7 +55,7 @@
 
 :::demo 也可以使用`title`具名分发，可以用`slot`的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。
 ```html
-<el-steps :space="100" :active="1" finish-status="success">
+<el-steps :space="200" :active="1" finish-status="success">
   <el-step title="已完成"></el-step>
   <el-step title="进行中"></el-step>
   <el-step title="步骤 3"></el-step>
@@ -69,10 +69,25 @@
 
 :::demo
 ```html
-<el-steps :space="200" :active="1">
+<el-steps :active="1">
   <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>
   <el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>
-  <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>
+  <el-step title="步骤 3" description="这段就没那么长了"></el-step>
+</el-steps>
+```
+:::
+
+### 居中的步骤条
+
+标题和描述都将居中。
+
+:::demo
+```html
+<el-steps :active="2" align-center>
+  <el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>
+  <el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>
+  <el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>
+  <el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step>
 </el-steps>
 ```
 :::
@@ -82,10 +97,11 @@
 
 :::demo 通过`icon`属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过具名`slot`来使用自定义的图标。
 ```html
-<el-steps :space="100" :active="1">
-  <el-step title="步骤 1" icon="edit"></el-step>
-  <el-step title="步骤 2" icon="upload"></el-step>
-  <el-step title="步骤 3" icon="picture"></el-step>
+
+<el-steps :active="1">
+  <el-step title="步骤 1" icon="el-icon-edit"></el-step>
+  <el-step title="步骤 2" icon="el-icon-upload"></el-step>
+  <el-step title="步骤 3" icon="el-icon-picture"></el-step>
 </el-steps>
 ```
 :::
@@ -96,10 +112,32 @@
 
 :::demo 只需要在`el-steps`元素中设置`direction`属性为`vertical`即可。
 ```html
-<el-steps :space="100" direction="vertical" :active="1">
-  <el-step title="步骤 1"></el-step>
-  <el-step title="步骤 2"></el-step>
-  <el-step title="步骤 3"></el-step>
+<div style="height: 300px;">
+  <el-steps direction="vertical" :active="1">
+    <el-step title="步骤 1"></el-step>
+    <el-step title="步骤 2"></el-step>
+    <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>
+  </el-steps>
+</div>
+```
+:::
+
+### 简洁风格的步骤条
+设置 `simple` 可应用简洁风格，该条件下 `align-center` / `description` / `direction` / `space` 都将失效。
+
+:::demo
+```html
+
+<el-steps :active="1" simple>
+  <el-step title="步骤 1" icon="el-icon-edit"></el-step>
+  <el-step title="步骤 2" icon="el-icon-upload"></el-step>
+  <el-step title="步骤 3" icon="el-icon-picture"></el-step>
+</el-steps>
+
+<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
+  <el-step title="步骤 1" ></el-step>
+  <el-step title="步骤 2" ></el-step>
+  <el-step title="步骤 3" ></el-step>
 </el-steps>
 ```
 :::
@@ -108,21 +146,21 @@
 
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| space | 每个 step 的间距，不填写将自适应间距。支持百分比。 | Number,String | — | — |
+| space | 每个 step 的间距，不填写将自适应间距。支持百分比。 | number / string | — | — |
 | direction | 显示方向 | string | vertical/horizontal | horizontal |
 | active | 设置当前激活步骤  | number | — | 0 |
-| process-status | 设置当前步骤的状态 | string | wait/process/finish/error/success | process |
-| finish-status | 设置结束步骤的状态 | string | wait/process/finish/error/success | finish |
-| align-center | 标题描述居中对齐 | boolean | - | false |
-| center | 组件居中显示 | boolean | - | false |
+| process-status | 设置当前步骤的状态 | string | wait / process / finish / error / success | process |
+| finish-status | 设置结束步骤的状态 | string | wait / process / finish / error / success | finish |
+| align-center | 进行居中对齐 | boolean | - | false |
+| simple | 是否应用简洁风格 | boolean | - | false |
 
 ### Step Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | title | 标题 | string | — | — |
 | description | 描述性文字 | string | — | — |
-| icon | 图标 | Element Icon 提供的图标，如果要使用自定义图标可以通过 slot 方式写入 | string | — |
-| status | 设置当前步骤的状态，不设置则根据 steps 确定状态 | wait/process/finish/error/success | - |
+| icon | 图标 | 传入 icon 的 class 全名来自定义 icon，也支持 slot 方式写入 | string | — |
+| status | 设置当前步骤的状态，不设置则根据 steps 确定状态 | wait / process / finish / error / success | - |
 
 ### Step Slot
 | name | 说明  |
diff --git a/examples/docs/zh-CN/switch.md b/examples/docs/zh-CN/switch.md
index 20ab6b79ca..08fbec58f2 100644
--- a/examples/docs/zh-CN/switch.md
+++ b/examples/docs/zh-CN/switch.md
@@ -12,8 +12,11 @@
       return {
         value1: true,
         value2: true,
-        value3: '100',
-        value4: true
+        value3: true,
+        value4: true,
+        value5: '100',
+        value6: true,
+        value7: false
       }
     }
   };
@@ -25,18 +28,13 @@
 
 ### 基本用法
 
-:::demo 绑定`v-model`到一个`Boolean`类型的变量。可以使用`on-text`属性与`off-text`属性来设置开关的文字描述，使用`on-color`属性与`off-color`属性来设置开关的背景色。
+:::demo 绑定`v-model`到一个`Boolean`类型的变量。可以使用`active-color`属性与`inactive-color`属性来设置开关的背景色。
 
 ```html
-<el-switch
-  v-model="value1"
-  on-text=""
-  off-text="">
-</el-switch>
 <el-switch
   v-model="value2"
-  on-color="#13ce66"
-  off-color="#ff4949">
+  active-color="#13ce66"
+  inactive-color="#ff4949">
 </el-switch>
 
 <script>
@@ -52,18 +50,50 @@
 ```
 :::
 
+### 文字描述
+
+:::demo 使用`active-text`属性与`inactive-text`属性来设置开关的文字描述。
+
+```html
+<el-switch
+  v-model="value3"
+  active-text="按月付费"
+  inactive-text="按年付费">
+</el-switch>
+<el-switch
+  style="display: block"
+  v-model="value4"
+  active-color="#13ce66"
+  inactive-color="#ff4949"
+  active-text="按月付费"
+  inactive-text="按年付费">
+</el-switch>
+
+<script>
+  export default {
+    data() {
+      return {
+        value3: true,
+        value4: true
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### 扩展的 value 类型
 
-:::demo 设置`on-value`和`off-value`属性，接受`Boolean`, `String`或`Number`类型的值。
+:::demo 设置`active-value`和`inactive-value`属性，接受`Boolean`, `String`或`Number`类型的值。
 
 ```html
-<el-tooltip :content="'Switch value: ' + value3" placement="top">
+<el-tooltip :content="'Switch value: ' + value5" placement="top">
   <el-switch
-    v-model="value3"
-    on-color="#13ce66"
-    off-color="#ff4949"
-    on-value="100"
-    off-value="0">
+    v-model="value5"
+    active-color="#13ce66"
+    inactive-color="#ff4949"
+    active-value="100"
+    inactive-value="0">
   </el-switch>
 </el-tooltip>
 
@@ -71,7 +101,7 @@
   export default {
     data() {
       return {
-        value3: '100'
+        value5: '100'
       }
     }
   };
@@ -87,20 +117,19 @@
 
 ```html
 <el-switch
-  v-model="value4"
-  on-text=""
-  off-text=""
+  v-model="value6"
   disabled>
 </el-switch>
 <el-switch
-  v-model="value4"
+  v-model="value7"
   disabled>
 </el-switch>
 <script>
   export default {
     data() {
       return {
-        value4: true
+        value6: true,
+        value7: false
       }
     }
   };
@@ -114,18 +143,23 @@
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | disabled  | 是否禁用    | boolean   | — | false   |
-| width  | switch 的宽度（像素）    | number   | — | 58（有文字）/ 46（无文字） |
-| on-icon-class  | switch 打开时所显示图标的类名，设置此项会忽略 `on-text`    | string   | — | — |
-| off-icon-class  | switch 关闭时所显示图标的类名，设置此项会忽略 `off-text`    | string   | — | — |
-| on-text  | switch 打开时的文字    | string   | — | ON |
-| off-text  | switch 关闭时的文字    | string   | — | OFF |
-| on-value  | switch 打开时的值    | boolean / string / number | — | true |
-| off-value  | switch 关闭时的值    | boolean / string / number | — | false |
-| on-color  | switch 打开时的背景色    | string   | — | #20A0FF |
-| off-color  | switch 关闭时的背景色    | string   | — | #C0CCDA |
+| width  | switch 的宽度（像素）    | number   | — | 40 |
+| active-icon-class  | switch 打开时所显示图标的类名，设置此项会忽略 `active-text`    | string   | — | — |
+| inactive-icon-class  | switch 关闭时所显示图标的类名，设置此项会忽略 `inactive-text`    | string   | — | — |
+| active-text  | switch 打开时的文字描述    | string   | — | — |
+| inactive-text  | switch 关闭时的文字描述    | string   | — | — |
+| active-value  | switch 打开时的值    | boolean / string / number | — | true |
+| inactive-value  | switch 关闭时的值    | boolean / string / number | — | false |
+| active-color  | switch 打开时的背景色    | string   | — | #409EFF |
+| inactive-color  | switch 关闭时的背景色    | string   | — | #C0CCDA |
 | name  | switch 对应的 name 属性    | string   | — | — |
 
 ### Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
 | change  | switch 状态发生变化时的回调函数    | 新状态的值 |
+
+### Methods
+| 方法名 | 说明 | 参数 |
+| ---- | ---- | ---- |
+| focus | 使 Switch 获取焦点 | - |
\ No newline at end of file
diff --git a/examples/docs/zh-CN/table.md b/examples/docs/zh-CN/table.md
index 8ad9d6c554..41f31eea90 100644
--- a/examples/docs/zh-CN/table.md
+++ b/examples/docs/zh-CN/table.md
@@ -225,8 +225,26 @@
           amount2: '4.1',
           amount3: 15
         }],
+        tableData7: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }],
         currentRow: null,
-        multipleSelection: []
+        multipleSelection: [],
+        search: '',
       };
     },
 
@@ -270,8 +288,8 @@
         }
       },
 
-      handleClick() {
-        console.log('click');
+      handleClick(row) {
+        console.log(row);
       },
 
       handleEdit(index, row) {
@@ -298,17 +316,52 @@
         return row.tag === value;
       },
 
-      tableRowClassName(row, index) {
-        if (index === 1) {
-          return 'info-row';
-        } else if (index === 3) {
-          return 'positive-row';
+      filterHandler(value, row, column) {
+        const property = column['property'];
+        return row[property] === value;
+      },
+
+      tableRowClassName({row, rowIndex}) {
+        if (rowIndex === 1) {
+          return 'warning-row';
+        } else if (rowIndex === 3) {
+          return 'success-row';
         }
         return '';
       },
 
       deleteRow(index, rows) {
         rows.splice(index, 1);
+      },
+
+      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
+        if (rowIndex % 2 === 0) {
+          if (columnIndex === 0) {
+            return [1, 2];
+          } else if (columnIndex === 1) {
+            return [0, 0];
+          }
+        }
+      },
+
+      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+        if (columnIndex === 0) {
+          if (rowIndex % 2 === 0) {
+            return {
+              rowspan: 2,
+              colspan: 1
+            };
+          } else {
+            return {
+              rowspan: 0,
+              colspan: 0
+            };
+          }
+        }
+      },
+
+      indexMethod(index) {
+        return index * 2;
       }
     },
 
@@ -321,12 +374,12 @@
 </script>
 
 <style>
-  .el-table .info-row {
-    background: #c9e5f5;
+  .el-table .warning-row {
+    background: oldlace;
   }
 
-  .el-table .positive-row {
-    background: #e2f0e4;
+  .el-table .success-row {
+    background: #f0f9eb;
   }
 
   .demo-table .name-wrapper {
@@ -544,23 +597,23 @@
 </template>
 
 <style>
-  .el-table .info-row {
-    background: #c9e5f5;
+  .el-table .warning-row {
+    background: oldlace;
   }
 
-  .el-table .positive-row {
-    background: #e2f0e4;
+  .el-table .success-row {
+    background: #f0f9eb;
   }
 </style>
 
 <script>
   export default {
     methods: {
-      tableRowClassName(row, index) {
-        if (index === 1) {
-          return 'info-row';
-        } else if (index === 3) {
-          return 'positive-row';
+      tableRowClassName({row, rowIndex}) {
+        if (rowIndex === 1) {
+          return 'warning-row';
+        } else if (rowIndex === 3) {
+          return 'success-row';
         }
         return '';
       }
@@ -706,8 +759,8 @@
       fixed="right"
       label="操作"
       width="100">
-      <template scope="scope">
-        <el-button @click="handleClick" type="text" size="small">查看</el-button>
+      <template slot-scope="scope">
+        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
         <el-button type="text" size="small">编辑</el-button>
       </template>
     </el-table-column>
@@ -717,8 +770,8 @@
 <script>
   export default {
     methods: {
-      handleClick() {
-        console.log(1);
+      handleClick(row) {
+        console.log(row);
       }
     },
 
@@ -769,7 +822,6 @@
 <template>
   <el-table
     :data="tableData3"
-    border
     style="width: 100%"
     height="250">
     <el-table-column
@@ -876,7 +928,6 @@
 <template>
   <el-table
     :data="tableData4"
-    border
     style="width: 100%"
     max-height="250">
     <el-table-column
@@ -914,7 +965,7 @@
       fixed="right"
       label="操作"
       width="120">
-      <template scope="scope">
+      <template slot-scope="scope">
         <el-button
           @click.native.prevent="deleteRow(scope.$index, tableData4)"
           type="text"
@@ -1001,7 +1052,6 @@
 <template>
   <el-table
     :data="tableData3"
-    border
     style="width: 100%">
     <el-table-column
       prop="date"
@@ -1187,7 +1237,6 @@
   <el-table
     ref="multipleTable"
     :data="tableData3"
-    border
     tooltip-effect="dark"
     style="width: 100%"
     @selection-change="handleSelectionChange">
@@ -1198,7 +1247,7 @@
     <el-table-column
       label="日期"
       width="120">
-      <template scope="scope">{{ scope.row.date }}</template>
+      <template slot-scope="scope">{{ scope.row.date }}</template>
     </el-table-column>
     <el-table-column
       prop="name"
@@ -1277,12 +1326,11 @@
 
 对表格进行排序，可快速查找或对比数据。
 
-:::demo 在列中设置`sortable`属性即可实现以该列为基准的排序，接受一个`Boolean`，默认为`false`。可以通过 Table 的`default-sort`属性设置默认的排序列和排序顺序。可以使用`sort-method`使用自定义的排序规则。如果需要后端排序，需将`sortable`设置为`custom`，同时在 Table 上监听`sort-change`事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了`formatter`属性，它用于格式化指定列的值，接受一个`Function`，会传入两个参数：`row`和`column`，可以根据自己的需求进行处理。
+:::demo 在列中设置`sortable`属性即可实现以该列为基准的排序，接受一个`Boolean`，默认为`false`。可以通过 Table 的`default-sort`属性设置默认的排序列和排序顺序。可以使用`sort-method`或者`sort-by`使用自定义的排序规则。如果需要后端排序，需将`sortable`设置为`custom`，同时在 Table 上监听`sort-change`事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了`formatter`属性，它用于格式化指定列的值，接受一个`Function`，会传入两个参数：`row`和`column`，可以根据自己的需求进行处理。
 ```html
 <template>
   <el-table
     :data="tableData"
-    border
     style="width: 100%"
     :default-sort = "{prop: 'date', order: 'descending'}"
     >
@@ -1343,18 +1391,20 @@
 
 对表格进行筛选，可快速查找到自己想看的数据。
 
-:::demo 在列中设置`filters` `filter-method`属性即可开启该列的筛选，filters 是一个数组，`filter-method`是一个方法，它用于决定某些数据是否显示，会传入两个参数：`value`和`row`。
+:::demo 在列中设置`filters` `filter-method`属性即可开启该列的筛选，filters 是一个数组，`filter-method`是一个方法，它用于决定某些数据是否显示，会传入三个参数：`value`, `row` 和 `column`。
 ```html
 <template>
   <el-table
     :data="tableData"
-    border
     style="width: 100%">
     <el-table-column
       prop="date"
       label="日期"
       sortable
-      width="180">
+      width="180"
+      :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
+      :filter-method="filterHandler"
+    >
     </el-table-column>
     <el-table-column
       prop="name"
@@ -1373,10 +1423,10 @@
       :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
       :filter-method="filterTag"
       filter-placement="bottom-end">
-      <template scope="scope">
+      <template slot-scope="scope">
         <el-tag
           :type="scope.row.tag === '家' ? 'primary' : 'success'"
-          close-transition>{{scope.row.tag}}</el-tag>
+          disable-transitions>{{scope.row.tag}}</el-tag>
       </template>
     </el-table-column>
   </el-table>
@@ -1415,6 +1465,10 @@
       },
       filterTag(value, row) {
         return row.tag === value;
+      },
+      filterHandler(value, row, column) {
+        const property = column['property'];
+        return row[property] === value;
       }
     }
   }
@@ -1425,41 +1479,40 @@
 ### 自定义列模板
 
 自定义列的显示内容，可组合其他组件使用。
-:::demo 通过 `Scoped slot` 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。(`1.1` 后支持通过 [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots) 自定义模板。之前的 `inline-template` 同样适用，但不推荐。)
+:::demo 通过 `Scoped slot` 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。
 ```html
 <template>
   <el-table
     :data="tableData"
-    border
     style="width: 100%">
     <el-table-column
       label="日期"
       width="180">
-      <template scope="scope">
-        <el-icon name="time"></el-icon>
+      <template slot-scope="scope">
+        <i class="el-icon-time"></i>
         <span style="margin-left: 10px">{{ scope.row.date }}</span>
       </template>
     </el-table-column>
     <el-table-column
       label="姓名"
       width="180">
-      <template scope="scope">
+      <template slot-scope="scope">
         <el-popover trigger="hover" placement="top">
           <p>姓名: {{ scope.row.name }}</p>
           <p>住址: {{ scope.row.address }}</p>
           <div slot="reference" class="name-wrapper">
-            <el-tag>{{ scope.row.name }}</el-tag>
+            <el-tag size="medium">{{ scope.row.name }}</el-tag>
           </div>
         </el-popover>
       </template>
     </el-table-column>
     <el-table-column label="操作">
-      <template scope="scope">
+      <template slot-scope="scope">
         <el-button
-          size="small"
+          size="mini"
           @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
         <el-button
-          size="small"
+          size="mini"
           type="danger"
           @click="handleDelete(scope.$index, scope.row)">删除</el-button>
       </template>
@@ -1513,7 +1566,7 @@
     :data="tableData5"
     style="width: 100%">
     <el-table-column type="expand">
-      <template scope="props">
+      <template slot-scope="props">
         <el-form label-position="left" inline class="demo-table-expand">
           <el-form-item label="商品名称">
             <span>{{ props.row.name }}</span>
@@ -1613,6 +1666,78 @@
 ```
 :::
 
+### 自定义表头
+
+表头支持自定义。
+
+:::demo 通过设置 [Scoped slot](https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD) 来自定义表头。
+```html
+<template>
+  <el-table
+    :data="tableData7.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
+    style="width: 100%">
+    <el-table-column
+      label="Date"
+      prop="date">
+    </el-table-column>
+    <el-table-column
+      label="Name"
+      prop="name">
+    </el-table-column>
+    <el-table-column
+      align="right">
+      <template slot="header" slot-scope="slot">
+        <el-input
+          v-model="search"
+          size="mini"
+          placeholder="Type to search"/>
+      </template>
+      <template slot-scope="scope">
+        <el-button
+          size="mini"
+          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
+        <el-button
+          size="mini"
+          type="danger"
+          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }],
+        search: ''
+      }
+    },
+    methods: {
+      handleEdit(){},
+      handleDelete(){}
+    },
+  }
+</script>
+```
+:::
+
 ### 表尾合计行
 
 若表格展示的是各类数字，可以在表尾显示各列的合计。
@@ -1649,7 +1774,7 @@
       label="数值 3">
     </el-table-column>
   </el-table>
-  
+
   <el-table
     :data="tableData6"
     border
@@ -1751,29 +1876,256 @@
 ```
 :::
 
+### 合并行或列
+
+多行或多列共用一个数据时，可以合并行或列。
+:::demo 通过给`table`传入`span-method`方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行`row`、当前列`column`、当前行号`rowIndex`、当前列号`columnIndex`四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表`rowspan`，第二个元素代表`colspan`。 也可以返回一个键名为`rowspan`和`colspan`的对象。
+
+```html
+<template>
+  <div>
+    <el-table
+      :data="tableData6"
+      :span-method="arraySpanMethod"
+      border
+      style="width: 100%">
+      <el-table-column
+        prop="id"
+        label="ID"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="姓名">
+      </el-table-column>
+      <el-table-column
+        prop="amount1"
+        sortable
+        label="数值 1">
+      </el-table-column>
+      <el-table-column
+        prop="amount2"
+        sortable
+        label="数值 2">
+      </el-table-column>
+      <el-table-column
+        prop="amount3"
+        sortable
+        label="数值 3">
+      </el-table-column>
+    </el-table>
+
+    <el-table
+      :data="tableData6"
+      :span-method="objectSpanMethod"
+      border
+      style="width: 100%; margin-top: 20px">
+      <el-table-column
+        prop="id"
+        label="ID"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="姓名">
+      </el-table-column>
+      <el-table-column
+        prop="amount1"
+        label="数值 1（元）">
+      </el-table-column>
+      <el-table-column
+        prop="amount2"
+        label="数值 2（元）">
+      </el-table-column>
+      <el-table-column
+        prop="amount3"
+        label="数值 3（元）">
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData6: [{
+          id: '12987122',
+          name: '王小虎',
+          amount1: '234',
+          amount2: '3.2',
+          amount3: 10
+        }, {
+          id: '12987123',
+          name: '王小虎',
+          amount1: '165',
+          amount2: '4.43',
+          amount3: 12
+        }, {
+          id: '12987124',
+          name: '王小虎',
+          amount1: '324',
+          amount2: '1.9',
+          amount3: 9
+        }, {
+          id: '12987125',
+          name: '王小虎',
+          amount1: '621',
+          amount2: '2.2',
+          amount3: 17
+        }, {
+          id: '12987126',
+          name: '王小虎',
+          amount1: '539',
+          amount2: '4.1',
+          amount3: 15
+        }]
+      };
+    },
+    methods: {
+      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
+        if (rowIndex % 2 === 0) {
+          if (columnIndex === 0) {
+            return [1, 2];
+          } else if (columnIndex === 1) {
+            return [0, 0];
+          }
+        }
+      },
+
+      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+        if (columnIndex === 0) {
+          if (rowIndex % 2 === 0) {
+            return {
+              rowspan: 2,
+              colspan: 1
+            };
+          } else {
+            return {
+              rowspan: 0,
+              colspan: 0
+            };
+          }
+        }
+      }
+    }
+  };
+</script>
+```
+:::
+
+### 自定义索引
+
+自定义 `type=index` 列的行号。
+:::demo 通过给 `type=index` 的列传入 `index` 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 `0` 开始）作为参数，返回值将作为索引展示。
+
+```html
+<template>
+  <el-table
+    :data="tableData"
+    style="width: 100%">
+    <el-table-column
+      type="index"
+      :index="indexMethod">
+    </el-table-column>
+    <el-table-column
+      prop="date"
+      label="日期"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="姓名"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="地址">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333,
+          tag: '家'
+        }, {
+          date: '2016-05-02',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333,
+          tag: '公司'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333,
+          tag: '家'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333,
+          tag: '公司'
+        }],
+      }
+    },
+    methods: {
+      indexMethod(index) {
+        return index * 2;
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### Table Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | data | 显示的数据 | array | — | — |
-| height | Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则 Table 的高度受控于外部样式。  | string/number | — | — |
+| height | Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。  | string/number | — | — |
 | max-height | Table 的最大高度 | string/number | — | — |
 | stripe | 是否为斑马纹 table | boolean | — | false |
 | border | 是否带有纵向边框 | boolean | — | false |
+| size | Table 的尺寸 | string | medium / small / mini | — |
 | fit | 列的宽度是否自撑开 | boolean | — | true |
 | show-header | 是否显示表头 | boolean | — | true |
 | highlight-current-row | 是否要高亮当前行 | boolean | — | false |
 | current-row-key | 当前行的 key，只写属性 | String,Number | — | — |
-| row-class-name | 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 | Function(row, index)/String | — | — |
-| row-style | 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 | Function(row, index)/Object | — | — |
+| row-class-name | 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 | Function({row, rowIndex})/String | — | — |
+| row-style | 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 | Function({row, rowIndex})/Object | — | — |
+| cell-class-name | 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。 | Function({row, column, rowIndex, columnIndex})/String | — | — |
+| cell-style | 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 | Function({row, column, rowIndex, columnIndex})/Object | — | — |
+| header-row-class-name | 表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。 | Function({row, rowIndex})/String | — | — |
+| header-row-style | 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。 | Function({row, rowIndex})/Object | — | — |
+| header-cell-class-name | 表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。 | Function({row, column, rowIndex, columnIndex})/String | — | — |
+| header-cell-style | 表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 | Function({row, column, rowIndex, columnIndex})/Object | — | — |
 | row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的。类型为 String 时，支持多层访问：`user.info.id`，但不支持 `user.info[0].id`，此种情况请使用 `Function`。 | Function(row)/String | — | — |
 | empty-text | 空数据时显示的文本内容，也可以通过 `slot="empty"` 设置 | String | — | 暂无数据 |
 | default-expand-all | 是否默认展开所有行，当 Table 中存在 type="expand" 的 Column 的时候有效 | Boolean | — | false |
 | expand-row-keys | 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。| Array | — | |
-| default-sort | 默认的排序列的prop和顺序。它的`prop`属性指定默认的排序的列，`order`指定默认排序的顺序| Object | `order`: ascending, descending | 如果只指定了`prop`, 没有指定`order`, 则默认顺序是ascending |
+| default-sort | 默认的排序列的 prop 和顺序。它的`prop`属性指定默认的排序的列，`order`指定默认排序的顺序| Object | `order`: ascending, descending | 如果只指定了`prop`, 没有指定`order`, 则默认顺序是ascending |
 | tooltip-effect | tooltip `effect` 属性 | String | dark/light | | dark |
 | show-summary | 是否在表尾显示合计行 | Boolean | — | false |
 | sum-text | 合计行第一列的文本 | String | — | 合计 |
 | summary-method | 自定义的合计计算方法 | Function({ columns, data }) | — | — |
+| span-method | 合并行或列的计算方法 | Function({ row, column, rowIndex, columnIndex }) | — | — |
+| select-on-indeterminate | 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行 | Boolean | — | true |
 
 ### Table Events
 | 事件名 | 说明 | 参数 |
@@ -1789,28 +2141,36 @@
 | row-contextmenu | 当某一行被鼠标右键点击时会触发该事件 | row, event |
 | row-dblclick | 当某一行被双击时会触发该事件 | row, event |
 | header-click | 当某一列的表头被点击时会触发该事件 | column, event |
+| header-contextmenu | 当某一列的表头被鼠标右键点击时触发该事件 | column, event |
 | sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } |
 | filter-change | 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。 | filters |
 | current-change | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | currentRow, oldCurrentRow |
 | header-dragend | 当拖动表头改变了列的宽度的时候会触发该事件 | newWidth, oldWidth, column, event |
-| expand | 当用户对某一行展开或者关闭的上会触发该事件 | row, expanded |
+| expand-change | 当用户对某一行展开或者关闭的时候会触发该事件 | row, expandedRows |
 
 ### Table Methods
 | 方法名 | 说明 | 参数 |
 | ---- | ---- | ---- |
-| clearSelection | 用于多选表格，清空用户的选择，当使用 reserve-selection 功能的时候，可能会需要使用此方法 | selection |
+| clearSelection | 用于多选表格，清空用户的选择 | — |
 | toggleRowSelection | 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） | row, selected |
+| toggleAllSelection | 用于多选表格，切换所有行的选中状态 | - |
+| toggleRowExpansion | 用于可展开表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开） | row, expanded |
 | setCurrentRow | 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。 | row |
+| clearSort | 用于清空排序条件，数据会恢复成未排序的状态 | — |
+| clearFilter | 用于清空过滤条件，数据会恢复成未过滤的状态 | — |
+| doLayout | 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法 | — |
+| sort | 手动对 Table 进行排序。参数`prop`属性指定排序列，`order`指定排序顺序。 | prop: string, order: string |
 
 ### Table Slot
 | name | 说明 |
 |------|--------|
-| append | 插入至表格最后一行之后的内容，仍然位于 `<tbody>` 标签内。如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。若表格有合计行，该 slot 会位于合计行之上。 |
+| append | 插入至表格最后一行之后的内容，如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。若表格有合计行，该 slot 会位于合计行之上。 |
 
 ### Table-column Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| type | 对应列的类型。如果设置了 `selection` 则显示多选框；如果设置了 `index` 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮 | string | selection/index/expand | — |
+| type | 对应列的类型。如果设置了 `selection` 则显示多选框；如果设置了 `index` 则显示该行的索引（从 1 开始计算）；如果设置了 `expand` 则显示为一个可展开的按钮 | string | selection/index/expand | — |
+| index | 如果设置了 `type=index`，可以通过传递 `index` 属性来自定义索引 | string, Function(index) | - | - |
 | column-key | column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 | string | — | — |
 | label | 显示的标题 | string | — | — |
 | prop | 对应列内容的字段名，也可以使用 property 属性 | string | — | — |
@@ -1819,18 +2179,26 @@
 | fixed | 列是否固定在左侧或者右侧，true 表示固定在左侧 | string, boolean | true, left, right | — |
 | render-header | 列标题 Label 区域渲染使用的 Function | Function(h, { column, $index }) | — | — |
 | sortable | 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 | boolean, string | true, false, 'custom' | false |
-| sort-method | 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个布尔值 | Function(a, b) | — | — |
+| sort-method | 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致 | Function(a, b) | — | — |
+| sort-by | 指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推 | String/Array/Function(row, index) | — | — |
+| sort-orders | 数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序 | array | 数组中的元素需为以下三者之一：`ascending` 表示升序，`descending` 表示降序，`null` 表示还原为原始顺序 | ['ascending', 'descending', null] |
 | resizable | 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） | boolean | — | true |
-| formatter | 用来格式化内容 | Function(row, column, cellValue) | — | — |
+| formatter | 用来格式化内容 | Function(row, column, cellValue, index) | — | — |
 | show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip | Boolean | — | false |
 | align | 对齐方式 | String | left/center/right | left |
 | header-align | 表头对齐方式，若不设置该项，则使用表格的对齐方式 | String | left/center/right | — |
 | class-name | 列的 className | string | — | — |
 | label-class-name | 当前列标题的自定义类名 | string | — | — |
 | selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function(row, index) | — | — |
-| reserve-selection | 仅对 type=selection 的列有效，类型为 Boolean，为 true 则代表会保留之前数据的选项，需要配合 Table 的 clearSelection 方法使用。 | Boolean | — | false |
+| reserve-selection | 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 `row-key`） | Boolean | — | false |
 | filters | 数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。 | Array[{ text, value }] | — | — |
 | filter-placement | 过滤弹出框的定位 | String | 与 Tooltip 的 `placement` 属性相同 | — |
 | filter-multiple | 数据过滤的选项是否多选 | Boolean | — | true |
-| filter-method | 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。 | Function(value, row) | — | — |
+| filter-method | 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。 | Function(value, row, column) | — | — |
 | filtered-value | 选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。 | Array | — | — |
+
+### Table-column Scoped Slot
+| name | 说明 |
+|------|--------|
+| — | 自定义列的内容，参数为 { row, column, $index } |
+| header | 自定义表头的内容. 参数为 { column, $index } |
\ No newline at end of file
diff --git a/examples/docs/zh-CN/tabs.md b/examples/docs/zh-CN/tabs.md
index 24110a1765..74b4b3c873 100644
--- a/examples/docs/zh-CN/tabs.md
+++ b/examples/docs/zh-CN/tabs.md
@@ -24,7 +24,8 @@
           name: '2',
           content: 'Tab 2 content'
         }],
-        tabIndex: 2
+        tabIndex: 2,
+        tabPosition: 'top'
       }
     },
     methods: {
@@ -172,6 +173,40 @@
 ```
 :::
 
+### 位置
+
+可以通过 `tab-position` 设置标签的位置
+
+:::demo 标签一共有四个方向的设置 `tabPosition="left|right|top|bottom"`
+
+```html
+<template>
+  <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
+    <el-radio-button label="top">top</el-radio-button>
+    <el-radio-button label="right">right</el-radio-button>
+    <el-radio-button label="bottom">bottom</el-radio-button>
+    <el-radio-button label="left">left</el-radio-button>
+  </el-radio-group>
+
+  <el-tabs :tab-position="tabPosition" style="height: 200px;">
+    <el-tab-pane label="用户管理">用户管理</el-tab-pane>
+    <el-tab-pane label="配置管理">配置管理</el-tab-pane>
+    <el-tab-pane label="角色管理">角色管理</el-tab-pane>
+    <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
+  </el-tabs>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        tabPosition: 'top'
+      };
+    }
+  };
+</script>
+```
+:::
+
 ### 自定义标签页
 
 可以通过具名 `slot` 来实现自定义标签页的内容
@@ -337,8 +372,10 @@
 | closable  | 标签是否可关闭   | boolean   | — |  false  |
 | addable  | 标签是否可增加   | boolean   | — |  false  |
 | editable  | 标签是否同时可增加和关闭   | boolean   | — |  false  |
-| active-name(deprecated)  | 选中选项卡的 name  | string   |  —  |  第一个选项卡的 name |
 | value  | 绑定值，选中选项卡的 name  | string   |  —  |  第一个选项卡的 name |
+| tab-position  | 选项卡所在位置 | string   |  top/right/bottom/left  |  top |
+| stretch  | 标签的宽度是否自撑开 | boolean   |  -  |  false |
+| before-leave | 切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。 | Function(activeName, oldActiveName) | — | — |
 
 ### Tabs Events
 | 事件名称 | 说明 | 回调参数 |
@@ -355,3 +392,4 @@
 | disabled | 是否禁用 | boolean | — | false |
 | name      | 与选项卡 activeName 对应的标识符，表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1' |
 | closable  | 标签是否可关闭   | boolean   | — |  false  |
+| lazy  | 标签是否延迟渲染   | boolean   | — |  false  |
diff --git a/examples/docs/zh-CN/tag.md b/examples/docs/zh-CN/tag.md
index 9cb2e2e523..8a02563bda 100644
--- a/examples/docs/zh-CN/tag.md
+++ b/examples/docs/zh-CN/tag.md
@@ -4,11 +4,10 @@
       return {
         tags: [
           { name: '标签一', type: '' },
-          { name: '标签二', type: 'gray' },
-          { name: '标签三', type: 'primary' },
-          { name: '标签四', type: 'success' },
-          { name: '标签五', type: 'warning' },
-          { name: '标签六', type: 'danger' }
+          { name: '标签二', type: 'success' },
+          { name: '标签三', type: 'info' },
+          { name: '标签四', type: 'warning' },
+          { name: '标签五', type: 'danger' }
         ],
         dynamicTags: ['标签一', '标签二', '标签三'],
         inputVisible: false,
@@ -46,18 +45,14 @@
     }
     .button-new-tag {
       margin-left: 10px;
-      height: 24px;
-      line-height: 22px;
+      height: 32px;
+      line-height: 30px;
       padding: 0 *;
     }
     .input-new-tag {
-      width: 78px;
+      width: 90px;
       margin-left: 10px;
       vertical-align: bottom;
-
-      .el-input__inner {
-        height: 24px;
-      }
     }
   }
 </style>
@@ -72,26 +67,24 @@
 
 ```html
 <el-tag>标签一</el-tag>
-<el-tag type="gray">标签二</el-tag>
-<el-tag type="primary">标签三</el-tag>
-<el-tag type="success">标签四</el-tag>
-<el-tag type="warning">标签五</el-tag>
-<el-tag type="danger">标签六</el-tag>
+<el-tag type="success">标签二</el-tag>
+<el-tag type="info">标签三</el-tag>
+<el-tag type="warning">标签四</el-tag>
+<el-tag type="danger">标签五</el-tag>
 ```
 :::
 
 ### 可移除标签
 
-:::demo 设置`closable`属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置`close-transition`属性，它接受一个`Boolean`，true 为关闭。
+:::demo 设置`closable`属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置`disable-transitions`属性，它接受一个`Boolean`，true 为关闭。
 
 ```html
 <el-tag
   v-for="tag in tags"
   :key="tag.name"
-  :closable="true"
-  :type="tag.type"
->
-{{tag.name}}
+  closable
+  :type="tag.type">
+  {{tag.name}}
 </el-tag>
 
 <script>
@@ -100,11 +93,10 @@
       return {
         tags: [
           { name: '标签一', type: '' },
-          { name: '标签二', type: 'gray' },
-          { name: '标签三', type: 'primary' },
-          { name: '标签四', type: 'success' },
-          { name: '标签五', type: 'warning' },
-          { name: '标签六', type: 'danger' }
+          { name: '标签二', type: 'success' },
+          { name: '标签三', type: 'info' },
+          { name: '标签四', type: 'warning' },
+          { name: '标签五', type: 'danger' }
         ]
       };
     }
@@ -122,23 +114,41 @@
 <el-tag
   :key="tag"
   v-for="tag in dynamicTags"
-  :closable="true"
-  :close-transition="false"
-  @close="handleClose(tag)"
->
-{{tag}}
+  closable
+  :disable-transitions="false"
+  @close="handleClose(tag)">
+  {{tag}}
 </el-tag>
 <el-input
   class="input-new-tag"
   v-if="inputVisible"
   v-model="inputValue"
   ref="saveTagInput"
-  size="mini"
+  size="small"
   @keyup.enter.native="handleInputConfirm"
   @blur="handleInputConfirm"
 >
 </el-input>
 <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
+
+<style>
+  .el-tag + .el-tag {
+    margin-left: 10px;
+  }
+  .button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
+</style>
+
 <script>
   export default {
     data() {
@@ -174,17 +184,32 @@
 ```
 :::
 
+### 不同尺寸
+
+Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。
+
+:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。
+
+```html
+<el-tag closable>默认标签</el-tag>
+<el-tag size="medium" closable>中等标签</el-tag>
+<el-tag size="small" closable>小型标签</el-tag>
+<el-tag size="mini" closable>超小标签</el-tag>
+```
+:::
+
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| type | 主题 | string | primary/gray/success/warning/danger | — |
+| type | 主题 | string | success/info/warning/danger | — |
 | closable | 是否可关闭 | boolean | — | false |
-| close-transition | 是否禁用渐变动画 | boolean | — | false |
+| disable-transitions | 是否禁用渐变动画 | boolean | — | false |
 | hit | 是否有边框描边 | boolean | — | false |
 | color | 背景色 | string | — | — |
+| size | 尺寸 | string | medium / small / mini | — |
 
 
 ### Events
 | 事件名称 | 说明 | 回调参数 |
 |---------- |-------- |---------- |
-| close | 关闭tag时触发的事件 | — |
+| close | 关闭 Tag 时触发的事件 | — |
diff --git a/examples/docs/zh-CN/time-picker.md b/examples/docs/zh-CN/time-picker.md
index 1f4c5d3834..8a605d7532 100644
--- a/examples/docs/zh-CN/time-picker.md
+++ b/examples/docs/zh-CN/time-picker.md
@@ -42,7 +42,7 @@
 
 可以选择任意时间
 
-:::demo 使用 el-time-picker 标签，通过`selectableRange`限制可选时间范围
+:::demo 使用 el-time-picker 标签，通过`selectableRange`限制可选时间范围。提供了两种交互方式：默认情况下通过鼠标滚轮进行选择，打开`arrow-control`属性则通过界面上的箭头进行选择。
 ```html
 <template>
   <el-time-picker
@@ -52,13 +52,22 @@
     }"
     placeholder="任意时间点">
   </el-time-picker>
+  <el-time-picker
+    arrow-control
+    v-model="value3"
+    :picker-options="{
+      selectableRange: '18:30:00 - 20:30:00'
+    }"
+    placeholder="任意时间点">
+  </el-time-picker>
 </template>
 
 <script>
   export default {
     data() {
       return {
-        value2: new Date(2016, 9, 10, 18, 40)
+        value2: new Date(2016, 9, 10, 18, 40),
+        value3: new Date(2016, 9, 10, 18, 40)
       };
     }
   }
@@ -111,12 +120,24 @@
 
 可选择任意的时间范围
 
-:::demo 添加`is-range`属性即可选择时间范围
+:::demo 添加`is-range`属性即可选择时间范围，同样支持`arrow-control`属性。
 ```html
 <template>
   <el-time-picker
     is-range
-    v-model="value3"
+    v-model="value4"
+    range-separator="至"
+    start-placeholder="开始时间"
+    end-placeholder="结束时间"
+    placeholder="选择时间范围">
+  </el-time-picker>
+  <el-time-picker
+    is-range
+    arrow-control
+    v-model="value5"
+    range-separator="至"
+    start-placeholder="开始时间"
+    end-placeholder="结束时间"
     placeholder="选择时间范围">
   </el-time-picker>
 </template>
@@ -125,7 +146,8 @@
   export default {
     data() {
       return {
-        value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
+        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
       };
     }
   }
@@ -139,7 +161,9 @@
       return {
         value1: '',
         value2: new Date(2016, 9, 10, 18, 40),
-        value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        value3: new Date(2016, 9, 10, 18, 40),
+        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
         startTime: '',
         endTime: ''
       };
@@ -154,12 +178,22 @@
 | disabled | 禁用 | boolean | — | false |
 | editable | 文本框可输入 | boolean | — | true |
 | clearable | 是否显示清除按钮 | boolean | — | true |
-| size          | 输入框尺寸     | string          | large, small, mini  | — |
-| placeholder | 占位内容 | string | — | — |
-| value | 绑定值 | TimePicker: DateTimeSelect: String | — | — |
-| align | 对齐方式 | string | left, center, right | left |
+| size          | 输入框尺寸     | string          | medium / small / mini  | — |
+| placeholder | 非范围选择时的占位内容 | string | — | — |
+| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
+| end-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
+| is-range | 是否为时间范围选择，仅对`<el-time-picker>`有效 | boolean | — | false |
+| arrow-control | 是否使用箭头进行时间选择，仅对`<el-time-picker>`有效 | boolean | — | false |
+| value | 绑定值 | date(TimePicker) / string(TimeSelect) | — | — |
+| align | 对齐方式 | string | left / center / right | left |
 | popper-class | TimePicker 下拉框的类名 | string | — | — |
 | picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
+| range-separator | 选择范围时的分隔符 | string | - | '-' |
+| value-format | 可选，仅TimePicker时可用，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | — |
+| default-value | 可选，选择器打开时默认显示的时间 | Date(TimePicker) / string(TimeSelect) | 可被`new Date()`解析(TimePicker) / 可选值(TimeSelect) | — |
+| name | 原生属性 | string | — | — |
+| prefix-icon | 自定义头部图标的类名 | string | — | el-icon-time |
+| clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |
 
 ### Time Select Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
@@ -173,14 +207,17 @@
 ### Time Picker Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| selectableRange | 可选时间段，例如`'18:30:00 - 20:30:00'`或者传入数组`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string/array | — | — |
-| format | 时间格式化(TimePicker) | string | 小时：`HH`，分：`mm`，秒：`ss` | 'HH:mm:ss' |
-
+| selectableRange | 可选时间段，例如`'18:30:00 - 20:30:00'`或者传入数组`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | — | — |
+| format | 时间格式化(TimePicker) | string | 小时：`HH`，分：`mm`，秒：`ss`，AM/PM `A` | 'HH:mm:ss' |
 
 ### Events
-| Event Name | Description | Parameters |
+| 事件名 | 说明 | 参数 |
 |---------|--------|---------|
-| change | 当 input 的值改变时触发，返回值和文本框一致 | formatted value |
-
-
-
+| change | 用户确认选定的值时触发 | 组件绑定值 |
+| blur | 当 input 失去焦点时触发 | 组件实例 |
+| focus | 当 input 获得焦点时触发 | 组件实例 |
+
+### Methods
+| 方法名 | 说明 | 参数 |
+| ---- | ---- | ---- |
+| focus | 使 input 获取焦点 | - |
diff --git a/examples/docs/zh-CN/tooltip.md b/examples/docs/zh-CN/tooltip.md
index 0522516e5a..07eb8d03f7 100644
--- a/examples/docs/zh-CN/tooltip.md
+++ b/examples/docs/zh-CN/tooltip.md
@@ -215,3 +215,4 @@ tooltip 内不支持 disabled form 元素，参考[MDN](https://developer.mozill
 | manual | 手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效 | Boolean | — | false |
 | popper-class | 为 Tooltip 的 popper 添加类名 | String | — | — |
 | enterable | 鼠标是否可进入到 tooltip 中 | Boolean | — | true |
+| hide-after | Tooltip 出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏 | number | — | 0 |
diff --git a/examples/docs/zh-CN/transfer.md b/examples/docs/zh-CN/transfer.md
index 590b964f86..e8cc4e7766 100644
--- a/examples/docs/zh-CN/transfer.md
+++ b/examples/docs/zh-CN/transfer.md
@@ -1,7 +1,7 @@
 <style>
   .demo-transfer {
     .transfer-footer {
-      margin-left: 20px;
+      margin-left: 15px;
       padding: 6px 5px;
     }
   }
@@ -52,7 +52,8 @@
         value1: [1, 4],
         value2: [],
         value3: [1],
-        value4: [],
+        value4: [1],
+        value5: [],
         filterMethod(query, item) {
           return item.pinyin.indexOf(query) > -1;
         },
@@ -152,26 +153,51 @@
 
 可以对列表标题文案、按钮文案、数据项的渲染函数、列表底部的勾选状态文案、列表底部的内容区等进行自定义。
 
-:::demo 可以使用 `titles`、`button-texts`、`render-content` 和 `footer-format` 属性分别对列表标题文案、按钮文案、数据项的渲染函数和列表底部的勾选状态文案进行自定义。对于列表底部的内容区，提供了两个具名 slot：`left-footer` 和 `right-footer`。此外，如果希望某些数据项在初始化时就被勾选，可以使用 `left-default-checked` 和 `right-default-checked` 属性。最后，本例还展示了 `change` 事件的用法。注意：由于 jsfiddle 不支持 JSX 语法，所以本例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。
+:::demo 可以使用 `titles`、`button-texts`、`render-content` 和 `format` 属性分别对列表标题文案、按钮文案、数据项的渲染函数和列表顶部的勾选状态文案进行自定义。数据项的渲染还可以使用 `scoped-slot` 进行自定义。对于列表底部的内容区，提供了两个具名 slot：`left-footer` 和 `right-footer`。此外，如果希望某些数据项在初始化时就被勾选，可以使用 `left-default-checked` 和 `right-default-checked` 属性。最后，本例还展示了 `change` 事件的用法。注意：由于 jsfiddle 不支持 JSX 语法，所以使用 `render-content` 自定义数据项的例子在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。
 ```html
 <template>
-  <el-transfer
-    v-model="value3"
-    filterable
-    :left-default-checked="[2, 3]"
-    :right-default-checked="[1]"
-    :render-content="renderFunc"
-    :titles="['Source', 'Target']"
-    :button-texts="['到左边', '到右边']"
-    :footer-format="{
-      noChecked: '${total}',
-      hasChecked: '${checked}/${total}'
-    }"
-    @change="handleChange"
-    :data="data">
-    <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
-    <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>
-  </el-transfer>
+  <p style="text-align: center; margin: 0 0 20px">使用 render-content 自定义数据项</p>
+  <div style="text-align: center">
+    <el-transfer
+      style="text-align: left; display: inline-block"
+      v-model="value3"
+      filterable
+      :left-default-checked="[2, 3]"
+      :right-default-checked="[1]"
+      :render-content="renderFunc"
+      :titles="['Source', 'Target']"
+      :button-texts="['到左边', '到右边']"
+      :format="{
+        noChecked: '${total}',
+        hasChecked: '${checked}/${total}'
+      }"
+      @change="handleChange"
+      :data="data">
+      <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
+      <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>
+    </el-transfer>
+  </div>
+  <p style="text-align: center; margin: 50px 0 20px">使用 scoped-slot 自定义数据项</p>
+  <div style="text-align: center">
+    <el-transfer
+      style="text-align: left; display: inline-block"
+      v-model="value4"
+      filterable
+      :left-default-checked="[2, 3]"
+      :right-default-checked="[1]"
+      :titles="['Source', 'Target']"
+      :button-texts="['到左边', '到右边']"
+      :format="{
+        noChecked: '${total}',
+        hasChecked: '${checked}/${total}'
+      }"
+      @change="handleChange"
+      :data="data">
+      <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
+      <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
+      <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>
+    </el-transfer>
+  </div>
 </template>
 
 <style>
@@ -198,6 +224,7 @@
       return {
         data: generateData(),
         value3: [1],
+        value4: [1],
         renderFunc(h, option) {
           return <span>{ option.key } - { option.label }</span>;
         }
@@ -221,7 +248,7 @@
 ```html
 <template>
   <el-transfer
-    v-model="value4"
+    v-model="value5"
     :props="{
       key: 'value',
       label: 'desc'
@@ -246,7 +273,7 @@
       };
       return {
         data3: generateData3(),
-        value4: []
+        value5: []
       };
     }
   };
@@ -261,10 +288,11 @@
 | filterable | 是否可搜索 | boolean | — | false |
 | filter-placeholder | 搜索框占位符 | string | — | 请输入搜索内容 |
 | filter-method | 自定义搜索方法 | function | — | — |
+| target-order | 右侧列表元素的排序策略：若为 `original`，则保持与数据源相同的顺序；若为 `push`，则新加入的元素排在最后；若为 `unshift`，则新加入的元素排在最前 | string | original / push / unshift | original |
 | titles | 自定义列表标题 | array | — | ['列表 1', '列表 2'] |
 | button-texts | 自定义按钮文案 | array | — | [ ] |
 | render-content | 自定义数据项渲染函数 | function(h, option) | — | — |
-| footer-format | 列表底部勾选状态文案 | object{noChecked, hasChecked} | — | { noChecked: '共 ${total} 项', hasChecked: '已选 ${checked}/${total} 项' } |
+| format | 列表顶部勾选状态文案 | object{noChecked, hasChecked} | — | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } |
 | props | 数据源的字段别名 | object{key, label, disabled} | — | — |
 | left-default-checked | 初始状态下左侧列表的已勾选项的 key 数组 | array | — | [ ] |
 | right-default-checked | 初始状态下右侧列表的已勾选项的 key 数组 | array | — | [ ] |
@@ -275,7 +303,19 @@
 | left-footer | 左侧列表底部的内容 |
 | right-footer | 右侧列表底部的内容 |
 
+### Scoped Slot
+| name | 说明 |
+|------|--------|
+| — | 自定义数据项的内容，参数为 { option } |
+
+### Methods
+| 方法名 | 说明 | 参数 |
+| ---- | ---- | ---- |
+| clearQuery | 清空某个面板的搜索关键词 | 'left' / 'right'，指定需要清空的面板 |
+
 ### Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
 | change | 右侧列表元素变化时触发 | 当前值、数据移动的方向（'left' / 'right'）、发生移动的数据 key 数组 |
+| left-check-change | 左侧列表元素被用户选中 / 取消选中时触发 | 当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组 |
+| right-check-change | 右侧列表元素被用户选中 / 取消选中时触发 | 当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组 |
diff --git a/examples/docs/zh-CN/transition.md b/examples/docs/zh-CN/transition.md
index ed1abb7781..02a7a9a129 100644
--- a/examples/docs/zh-CN/transition.md
+++ b/examples/docs/zh-CN/transition.md
@@ -35,7 +35,7 @@ Element 内应用在部分组件的过渡动画，你也可以直接使用。在
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #20A0FF;
+    background-color: #409EFF;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
@@ -84,7 +84,7 @@ Element 内应用在部分组件的过渡动画，你也可以直接使用。在
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #20A0FF;
+    background-color: #409EFF;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
@@ -131,7 +131,7 @@ Element 内应用在部分组件的过渡动画，你也可以直接使用。在
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #20A0FF;
+    background-color: #409EFF;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
@@ -146,7 +146,7 @@ Element 内应用在部分组件的过渡动画，你也可以直接使用。在
 
 ```js
 // fade/zoom 等
-import 'element-ui/lib/theme-defaut/base.css';
+import 'element-ui/lib/theme-chalk/base.css';
 // collapse 展开折叠
 import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
 import Vue from 'vue'
@@ -160,7 +160,7 @@ Vue.component(CollapseTransition.name, CollapseTransition)
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #20A0FF;
+    background-color: #409EFF;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
diff --git a/examples/docs/zh-CN/tree.md b/examples/docs/zh-CN/tree.md
index 6403032653..ed01238c5a 100644
--- a/examples/docs/zh-CN/tree.md
+++ b/examples/docs/zh-CN/tree.md
@@ -17,6 +17,35 @@
     .filter-tree {
       margin-top: 20px;
     }
+    
+    .custom-tree-container {
+      display: flex;
+      margin: -24px;
+    }
+    
+    .block {
+      flex: 1;
+      padding: 8px 24px 24px;
+      
+      &:first-child {
+        border-right: solid 1px #eff2f6;
+      }
+      
+      > p {
+        text-align: center;
+        margin: 0;
+        line-height: 4;
+      }
+    }
+    
+    .custom-tree-node {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 14px;
+      padding-right: 8px;
+    }
   }
 </style>
 
@@ -122,6 +151,52 @@
     }]
   }];
 
+  const data6 = [{
+    id: 1,
+    label: '一级 1',
+    children: [{
+      id: 4,
+      label: '二级 1-1',
+      children: [{
+        id: 9,
+        label: '三级 1-1-1'
+      }, {
+        id: 10,
+        label: '三级 1-1-2'
+      }]
+    }]
+  }, {
+    id: 2,
+    label: '一级 2',
+    children: [{
+      id: 5,
+      label: '二级 2-1'
+    }, {
+      id: 6,
+      label: '二级 2-2'
+    }]
+  }, {
+    id: 3,
+    label: '一级 3',
+    children: [{
+      id: 7,
+      label: '二级 3-1'
+    }, {
+      id: 8,
+      label: '二级 3-2',
+      children: [{
+       id: 11,
+        label: '三级 3-2-1'
+      }, {
+        id: 12,
+        label: '三级 3-2-2'
+      }, {
+        id: 13,
+        label: '三级 3-2-3'
+      }]
+    }]
+  }];
+
   let id = 1000;
 
   const regions = [{
@@ -137,6 +212,12 @@
     children: 'zones'
   };
 
+  const props1 = {
+    label: 'name',
+    children: 'zones',
+    isLeaf: 'leaf'
+  };
+
   const defaultProps = {
     children: 'children',
     label: 'label'
@@ -156,6 +237,34 @@
       handleNodeClick(data) {
         console.log(data);
       },
+      handleDragStart(node, ev) {
+        console.log('drag start', node);
+      },
+      handleDragEnter(draggingNode, dropNode, ev) {
+        console.log('tree drag enter: ', dropNode.label);
+      },
+      handleDragLeave(draggingNode, dropNode, ev) {
+        console.log('tree drag leave: ', dropNode.label);
+      },
+      handleDragOver(draggingNode, dropNode, ev) {
+        console.log('tree drag over: ', dropNode.label);
+      },
+      handleDragEnd(draggingNode, dropNode, dropType, ev) {
+        console.log('tree drag end: ', dropNode && dropNode.label, dropType);
+      },
+      handleDrop(draggingNode, dropNode, dropType, ev) {
+        console.log('tree drop: ', dropNode.label, dropType);
+      },
+      allowDrop(draggingNode, dropNode, type) {
+        if (dropNode.data.label === '二级 3-1') {
+          return type !== 'inner';
+        } else {
+          return true;
+        }
+      },
+      allowDrag(draggingNode) {
+        return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
+      },
       loadNode(node, resolve) {
         if (node.level === 0) {
           return resolve([{ name: 'region1' }, { name: 'region2' }]);
@@ -185,6 +294,23 @@
           resolve(data);
         }, 500);
       },
+      loadNode1(node, resolve) {
+        if (node.level === 0) {
+          return resolve([{ name: 'region' }]);
+        }
+        if (node.level > 1) return resolve([]);
+
+        setTimeout(() => {
+          const data = [{
+            name: 'leaf',
+            leaf: true
+          }, {
+            name: 'zone'
+          }];
+
+          resolve(data);
+        }, 500);
+      },
       getCheckedNodes() {
         console.log(this.$refs.tree.getCheckedNodes());
       },
@@ -209,23 +335,28 @@
       resetChecked() {
         this.$refs.tree.setCheckedKeys([]);
       },
-      append(store, data) {
-        store.append({ id: id++, label: 'testtest', children: [] }, data);
+      append(data) {
+        const newChild = { id: id++, label: 'testtest', children: [] };
+        if (!data.children) {
+          this.$set(data, 'children', []);
+        }
+        data.children.push(newChild);
       },
 
-      remove(store, data) {
-        store.remove(data);
+      remove(node, data) {
+        const parent = node.parent;
+        const children = parent.data.children || parent.data;
+        const index = children.findIndex(d => d.id === data.id);
+        children.splice(index, 1);
       },
 
-      renderContent(h, { node, data, store }) {
+      renderContent(h, { node, data }) {
         return (
-          <span style="white-space: normal">
+          <span class="custom-tree-node">
+            <span>{node.label}</span>
             <span>
-              <span>{node.label}</span>
-            </span>
-            <span style="float: right; margin-right: 20px">
-              <el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
-              <el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button>
+              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
+              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
             </span>
           </span>);
       },
@@ -241,9 +372,13 @@
         data,
         data2,
         data3,
+        data4: JSON.parse(JSON.stringify(data2)),
+        data5: JSON.parse(JSON.stringify(data2)),
+        data6,
         regions,
         defaultProps,
         props,
+        props1,
         defaultCheckedKeys: [5],
         defaultExpandedKeys: [2, 3],
         filterText: ''
@@ -260,7 +395,7 @@
 
 基础的树形结构展示。
 
-::: demo
+:::demo
 ```html
 <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
 
@@ -321,12 +456,11 @@
 
 ### 可选择
 
-适用于需要选择层级时使用。在下例中，由于在点击时才进行该层数据的获取，导致层级不可预知，如果没有下层数据，则点击后下拉按钮会消失。
+适用于需要选择层级时使用。
 
-::: demo
+:::demo 本例还展示了动态加载节点数据的方法。
 ```html
 <el-tree
-  :data="regions"
   :props="props"
   :load="loadNode"
   lazy
@@ -338,11 +472,6 @@
   export default {
     data() {
       return {
-        regions: [{
-          'name': 'region1'
-        }, {
-          'name': 'region2'
-        }],
         props: {
           label: 'name',
           children: 'zones'
@@ -393,10 +522,56 @@
 ```
 :::
 
+### 懒加载自定义叶子节点
+
+:::demo 由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。
+```html
+<el-tree
+  :props="props1"
+  :load="loadNode1"
+  lazy
+  show-checkbox>
+</el-tree>
+
+<script>
+  export default {
+    data() {
+      return {
+        props1: {
+          label: 'name',
+          children: 'zones',
+          isLeaf: 'leaf'
+        },
+      };
+    },
+    methods: {
+      loadNode1(node, resolve) {
+        if (node.level === 0) {
+          return resolve([{ name: 'region' }]);
+        }
+        if (node.level > 1) return resolve([]);
+
+        setTimeout(() => {
+          const data = [{
+            name: 'leaf',
+            leaf: true
+          }, {
+            name: 'zone'
+          }];
+
+          resolve(data);
+        }, 500);
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### 默认展开和默认选中
 可将 Tree 的某些节点设置为默认展开或默认选中
 
-::: demo 分别通过`default-expanded-keys`和`default-checked-keys`设置默认展开和默认选中的节点。需要注意的是，此时必须设置`node-key`，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。
+:::demo 分别通过`default-expanded-keys`和`default-checked-keys`设置默认展开和默认选中的节点。需要注意的是，此时必须设置`node-key`，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。
 ```html
 <el-tree
   :data="data2"
@@ -460,7 +635,7 @@
 ### 禁用状态
 可将 Tree 的某些节点设置为禁用状态
 
-::: demo 通过`disabled`设置禁用状态。
+:::demo 通过`disabled`设置禁用状态。
 ```html
 <el-tree
   :data="data3"
@@ -515,7 +690,7 @@
 
 ### 树节点的选择
 
-::: demo 本例展示如何获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置`node-key`。
+:::demo 本例展示如何获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置`node-key`。
 ```html
 <el-tree
   :data="data2"
@@ -612,97 +787,142 @@
 ### 自定义节点内容
 节点的内容支持自定义，可以在节点区添加按钮或图标等内容
 
-::: demo 使用`render-content`指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。注意：由于 jsfiddle 不支持 JSX 语法，所以本例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。
+:::demo 可以通过两种方法进行树节点内容的自定义：`render-content`和 scoped slot。使用`render-content`指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。使用 scoped slot 会传入两个参数`node`和`data`，分别表示当前节点的 Node 对象和当前节点的数据。注意：由于 jsfiddle 不支持 JSX 语法，所以`render-content`示例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。
 ```html
-<el-tree
-  :data="data2"
-  :props="defaultProps"
-  show-checkbox
-  node-key="id"
-  default-expand-all
-  :expand-on-click-node="false"
-  :render-content="renderContent">
-</el-tree>
+<div class="custom-tree-container">
+  <div class="block">
+    <p>使用 render-content</p>
+    <el-tree
+      :data="data4"
+      show-checkbox
+      node-key="id"
+      default-expand-all
+      :expand-on-click-node="false"
+      :render-content="renderContent">
+    </el-tree>
+  </div>
+  <div class="block">
+    <p>使用 scoped slot</p>
+    <el-tree
+      :data="data5"
+      show-checkbox
+      node-key="id"
+      default-expand-all
+      :expand-on-click-node="false">
+      <span class="custom-tree-node" slot-scope="{ node, data }">
+        <span>{{ node.label }}</span>
+        <span>
+          <el-button
+            type="text"
+            size="mini"
+            @click="() => append(data)">
+            Append
+          </el-button>
+          <el-button
+            type="text"
+            size="mini"
+            @click="() => remove(node, data)">
+            Delete
+          </el-button>
+        </span>
+      </span>
+    </el-tree>
+  </div>
+</div>
 
 <script>
   let id = 1000;
 
   export default {
     data() {
-      return {
-        data2: [{
-          id: 1,
-          label: '一级 1',
+      const data = [{
+        id: 1,
+        label: '一级 1',
+        children: [{
+          id: 4,
+          label: '二级 1-1',
           children: [{
-            id: 4,
-            label: '二级 1-1',
-            children: [{
-              id: 9,
-              label: '三级 1-1-1'
-            }, {
-              id: 10,
-              label: '三级 1-1-2'
-            }]
-          }]
-        }, {
-          id: 2,
-          label: '一级 2',
-          children: [{
-            id: 5,
-            label: '二级 2-1'
+            id: 9,
+            label: '三级 1-1-1'
           }, {
-            id: 6,
-            label: '二级 2-2'
+            id: 10,
+            label: '三级 1-1-2'
           }]
+        }]
+      }, {
+        id: 2,
+        label: '一级 2',
+        children: [{
+          id: 5,
+          label: '二级 2-1'
         }, {
-          id: 3,
-          label: '一级 3',
-          children: [{
-            id: 7,
-            label: '二级 3-1'
-          }, {
-            id: 8,
-            label: '二级 3-2'
-          }]
-        }],
-        defaultProps: {
-          children: 'children',
-          label: 'label'
-        }
+          id: 6,
+          label: '二级 2-2'
+        }]
+      }, {
+        id: 3,
+        label: '一级 3',
+        children: [{
+          id: 7,
+          label: '二级 3-1'
+        }, {
+          id: 8,
+          label: '二级 3-2'
+        }]
+      }];
+      return {
+        data4: JSON.parse(JSON.stringify(data)),
+        data5: JSON.parse(JSON.stringify(data))
       }
     },
 
     methods: {
-      append(store, data) {
-        store.append({ id: id++, label: 'testtest', children: [] }, data);
+      append(data) {
+        const newChild = { id: id++, label: 'testtest', children: [] };
+        if (!data.children) {
+          this.$set(data, 'children', []);
+        }
+        data.children.push(newChild);
       },
 
-      remove(store, data) {
-        store.remove(data);
+      remove(node, data) {
+        const parent = node.parent;
+        const children = parent.data.children || parent.data;
+        const index = children.findIndex(d => d.id === data.id);
+        children.splice(index, 1);
       },
 
       renderContent(h, { node, data, store }) {
         return (
-          <span>
+          <span class="custom-tree-node">
+            <span>{node.label}</span>
             <span>
-              <span>{node.label}</span>
-            </span>
-            <span style="float: right; margin-right: 20px">
-              <el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
-              <el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button>
+              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
+              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
             </span>
           </span>);
       }
     }
   };
 </script>
+
+<style>
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+  }
+</style>
 ```
 :::
 
 ### 节点过滤
 通过关键字过滤树节点
 
-::: demo 在需要对节点进行过滤时，调用 Tree 实例的`filter`方法，参数为关键字。需要注意的是，此时需要设置`filter-node-method`，值为过滤函数。
+:::demo 在需要对节点进行过滤时，调用 Tree 实例的`filter`方法，参数为关键字。需要注意的是，此时需要设置`filter-node-method`，值为过滤函数。
 ```html
 <el-input
   placeholder="输入关键字进行过滤"
@@ -786,7 +1006,7 @@
 
 对于同一级的节点，每次只能展开一个
 
-::: demo
+:::demo
 ```html
 <el-tree
   :data="data"
@@ -850,51 +1070,195 @@
 ```
 :::
 
+### 可拖拽节点
+
+通过 draggable 属性可让节点变为可拖拽。
+
+:::demo
+```html
+<el-tree
+  :data="data6"
+  node-key="id"
+  default-expand-all
+  @node-drag-start="handleDragStart"
+  @node-drag-enter="handleDragEnter"
+  @node-drag-leave="handleDragLeave"
+  @node-drag-over="handleDragOver"
+  @node-drag-end="handleDragEnd"
+  @node-drop="handleDrop"
+  draggable
+  :allow-drop="allowDrop"
+  :allow-drag="allowDrag">
+</el-tree>
+
+<script>
+  export default {
+    data() {
+      return {
+        data6: [{
+          id: 1,
+          label: '一级 1',
+          children: [{
+            id: 4,
+            label: '二级 1-1',
+            children: [{
+              id: 9,
+              label: '三级 1-1-1'
+            }, {
+              id: 10,
+              label: '三级 1-1-2'
+            }]
+          }]
+        }, {
+          id: 2,
+          label: '一级 2',
+          children: [{
+            id: 5,
+            label: '二级 2-1'
+          }, {
+            id: 6,
+            label: '二级 2-2'
+          }]
+        }, {
+          id: 3,
+          label: '一级 3',
+          children: [{
+            id: 7,
+            label: '二级 3-1'
+          }, {
+            id: 8,
+            label: '二级 3-2',
+            children: [{
+             id: 11,
+              label: '三级 3-2-1'
+            }, {
+              id: 12,
+              label: '三级 3-2-2'
+            }, {
+              id: 13,
+              label: '三级 3-2-3'
+            }]
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
+      };
+    },
+    methods: {
+      handleDragStart(node, ev) {
+        console.log('drag start', node);
+      },
+      handleDragEnter(draggingNode, dropNode, ev) {
+        console.log('tree drag enter: ', dropNode.label);
+      },
+      handleDragLeave(draggingNode, dropNode, ev) {
+        console.log('tree drag leave: ', dropNode.label);
+      },
+      handleDragOver(draggingNode, dropNode, ev) {
+        console.log('tree drag over: ', dropNode.label);
+      },
+      handleDragEnd(draggingNode, dropNode, dropType, ev) {
+        console.log('tree drag end: ', dropNode && dropNode.label, dropType);
+      },
+      handleDrop(draggingNode, dropNode, dropType, ev) {
+        console.log('tree drop: ', dropNode.label, dropType);
+      },
+      allowDrop(draggingNode, dropNode, type) {
+        if (dropNode.data.label === '二级 3-1') {
+          return type !== 'inner';
+        } else {
+          return true;
+        }
+      },
+      allowDrag(draggingNode) {
+        return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### Attributes
-| 参数                    | 说明                                       | 类型                          | 可选值  | 默认值   |
+| 参数                  | 说明                                               | 类型                        | 可选值  | 默认值   |
 | --------------------- | ---------------------------------------- | --------------------------- | ---- | ----- |
-| data                  | 展示数据                                     | array                       | —    | —     |
-| empty-text            | 内容为空的时候展示的文本                             | String                      | —    | —     |
-| node-key              | 每个树节点用来作为唯一标识的属性，整颗树应该是唯一的               | String                      | —    | —     |
+| data                  | 展示数据                                           | array                       | —    | —     |
+| empty-text            | 内容为空的时候展示的文本                           | String                      | —    | —     |
+| node-key              | 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的               | String                      | —    | —     |
 | props                 | 配置选项，具体看下表                               | object                      | —    | —     |
-| load                  | 加载子树数据的方法                                | function(node, resolve)     | —    | —     |
-| render-content        | 树节点的内容区的渲染 Function                      | Function(h, { node }        | —    | —     |
-| highlight-current     | 是否高亮当前选中节点，默认值是 false。                   | boolean                     | —    | false |
-| current-node-key      | 当前选中节点的 key，只写属性                         | string, number              | —    | —     |
+| render-after-expand   | 是否在第一次展开某个树节点后才渲染其子节点         | boolean                      | —    | true |
+| load                  | 加载子树数据的方法，仅当 lazy 属性为true 时生效    | function(node, resolve)     | —    | —     |
+| render-content        | 树节点的内容区的渲染 Function                      | Function(h, { node, data, store }        | —    | —     |
+| highlight-current     | 是否高亮当前选中节点，默认值是 false。             | boolean                     | —    | false |
 | default-expand-all    | 是否默认展开所有节点                               | boolean                     | —    | false |
 | expand-on-click-node  | 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。 | boolean                     | —    | true  |
-| auto-expand-parent    | 展开子节点的时候是否自动展开父节点                        | boolean                     | —    | true  |
-| default-expanded-keys | 默认展开的节点的 key 的数组                         | array                       | —    | —     |
-| show-checkbox         | 节点是否可被选择                                 | boolean                     | —    | false |
+| check-on-click-node   | 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。 | boolean                     | —    | false |
+| auto-expand-parent    | 展开子节点的时候是否自动展开父节点                 | boolean                     | —    | true  |
+| default-expanded-keys | 默认展开的节点的 key 的数组                        | array                       | —    | —     |
+| show-checkbox         | 节点是否可被选择                                   | boolean                     | —    | false |
 | check-strictly        | 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false   | boolean                     | —    | false |
-| default-checked-keys  | 默认勾选的节点的 key 的数组                         | array                       | —    | —     |
+| default-checked-keys  | 默认勾选的节点的 key 的数组                        | array                       | —    | —     |
 | filter-node-method    | 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏 | Function(value, data, node) | —    | —     |
-| accordion             | 是否每次只打开一个同级树节点展开                         | boolean                     | —    | false |
-| indent                | 相邻级节点间的水平缩进，单位为像素                        | number                     | —    | 16 |
+| accordion             | 是否每次只打开一个同级树节点展开                   | boolean                     | —    | false |
+| indent                | 相邻级节点间的水平缩进，单位为像素                 | number                     | —    | 16 |
+| lazy                  | 是否懒加载子节点，需与 load 方法结合使用           | boolean                     | —    | false |
+| draggable             | 是否开启拖拽节点功能                                   | boolean            | —    | false |
+| allow-drag            | 判断节点能否被拖拽                  | Function(node)  | —  | —  |
+| allow-drop            | 拖拽时判定目标节点能否被放置。`type` 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后 | Function(draggingNode, dropNode, type)  | —    | —     |
 
 ### props
 | 参数       | 说明                | 类型     | 可选值  | 默认值  |
 | -------- | ----------------- | ------ | ---- | ---- |
 | label    | 指定节点标签为节点对象的某个属性值 | string, function(data, node) | —    | —    |
-| children | 指定子树为节点对象的某个属性值 | string, function(data, node) | —    | —    |
-| disabled | 指定节点选择框是否禁用 |  boolean, function(data, node) | —    | —    |
+| children | 指定子树为节点对象的某个属性值 | string | —    | —    |
+| disabled | 指定节点选择框是否禁用为节点对象的某个属性值 | boolean, function(data, node) | —    | —    |
+| isLeaf | 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效 | boolean, function(data, node) | —    | —    |
 
 ### 方法
-`Tree` 拥有如下方法，返回目前被选中的节点数组：
+`Tree` 内部使用了 Node 类型的对象来包装用户传入的数据，用来保存目前节点的状态。
+`Tree` 拥有如下方法：
+
 | 方法名             | 说明                                       | 参数                                       |
 | --------------- | ---------------------------------------- | ---------------------------------------- |
 | filter          | 对树节点进行筛选操作                               | 接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数 |
-| getCheckedNodes | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则仅返回被选中的叶子节点，默认值为 `false` |
+| updateKeyChildren | 通过 keys 设置节点子元素，使用此方法必须设置 node-key 属性 | (key, data) 接收两个参数，1. 节点 key 2. 节点数据的数组 |
+| getCheckedNodes | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前被选中的节点所组成的数组 | (leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 `false` 2. 是否包含半选节点，默认值为 `false` |
 | setCheckedNodes | 设置目前勾选的节点，使用此方法必须设置 node-key 属性          | (nodes) 接收勾选节点数据的数组                      |
-| getCheckedKeys  | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前被选中的节点所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则仅返回被选中的叶子节点的 keys，默认值为 `false` |
+| getCheckedKeys  | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前被选中的节点的 key 所组成的数组 | (leafOnly) 接收一个 boolean 类型的参数，若为 `true` 则仅返回被选中的叶子节点的 keys，默认值为 `false` |
 | setCheckedKeys  | 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性  | (keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 `true` 则仅设置叶子节点的选中状态，默认值为 `false` |
 | setChecked      | 通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性 | (key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中  3. boolean 类型，是否设置子节点 ，默认为 false |
+| getHalfCheckedNodes | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前半选中的节点所组成的数组  | - |
+| getHalfCheckedKeys | 若节点可被选择（即 `show-checkbox` 为 `true`），则返回目前半选中的节点的 key 所组成的数组 | - |
+| getCurrentKey   | 获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null | — |
+| getCurrentNode  | 获取当前被选中节点的 node，若没有节点被选中则返回 null | — |
+| setCurrentKey   | 通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 | (key) 待被选节点的 key，若为 null 则取消当前高亮的节点 |
+| setCurrentNode  | 通过 node 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性 | (node) 待被选节点的 node |
+| getNode         | 根据 data 或者 key 拿到 Tree 组件中的 node | (data) 要获得 node 的 key 或者 data |
+| remove          | 删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性  | (data) 要删除的节点的 data 或者 node |
+| append          | 为 Tree 中的一个节点追加一个子节点 | (data, parentNode) 接收两个参数，1. 要追加的子节点的 data 2. 子节点的 parent 的 data、key 或者 node |
+| insertBefore    | 为 Tree 的一个节点的前面增加一个节点  | (data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node |
+| insertAfter     | 为 Tree 的一个节点的后面增加一个节点  | (data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的前一个节点的 data、key 或者 node |
 
 ### Events
 | 事件名称           | 说明             | 回调参数                                     |
 | -------------- | -------------- | ---------------------------------------- |
 | node-click     | 节点被点击时的回调      | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
+| node-contextmenu | 当某一节点被鼠标右键点击时会触发该事件 | 共四个参数，依次为：event、传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
 | check-change   | 节点选中状态发生变化时的回调 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点 |
+| check          | 当复选框被点击的时候触发 | 共两个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性 |
 | current-change | 当前选中节点变化时触发的事件 | 共两个参数，依次为：当前节点的数据，当前节点的 Node 对象          |
-| node-expand    | 节点被展开时触发的事件    | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
-| node-collapse  | 节点被关闭时触发的事件    | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
+| node-expand    | 节点被展开时触发的事件    | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身 |
+| node-collapse  | 节点被关闭时触发的事件    | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身 |
+| node-drag-start | 节点开始拖拽时触发的事件  | 共两个参数，依次为：被拖拽节点对应的 Node、event |
+| node-drag-enter | 拖拽进入其他节点时触发的事件  | 共三个参数，依次为：被拖拽节点对应的 Node、所进入节点对应的 Node、event |
+| node-drag-leave | 拖拽离开某个节点时触发的事件  | 共三个参数，依次为：被拖拽节点对应的 Node、所离开节点对应的 Node、event |
+| node-drag-over | 在拖拽节点时触发的事件（类似浏览器的 mouseover 事件） | 共三个参数，依次为：被拖拽节点对应的 Node、当前进入节点对应的 Node、event |
+| node-drag-end  | 拖拽结束时（可能未成功）触发的事件  | 共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、event |
+| node-drop  | 拖拽成功完成时触发的事件  | 共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event |
+
+### Scoped Slot
+| name | 说明 |
+|------|--------|
+| — | 自定义树节点的内容，参数为 { node, data } |
diff --git a/examples/docs/zh-CN/upload.md b/examples/docs/zh-CN/upload.md
index d7828e9bae..f87094c3ce 100644
--- a/examples/docs/zh-CN/upload.md
+++ b/examples/docs/zh-CN/upload.md
@@ -18,8 +18,8 @@
         position: relative;
         overflow: hidden;
 
-        &:hover {
-          border-color: #20a0ff;
+        &:hover, &:focus {
+          border-color: #409EFF;
         }
       }
       .avatar-uploader-icon {
@@ -44,30 +44,24 @@
       return {
         fileList: [{
           name: 'food.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
-          status: 'finished'
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
         }, {
           name: 'food2.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
-          status: 'finished'
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
         }],
         fileList2: [{
           name: 'food.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
-          status: 'finished'
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
         }, {
           name: 'food2.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
-          status: 'finished'
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
         }],
         fileList3: [{
           name: 'food.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
-          status: 'finished'
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
         }, {
           name: 'food2.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
-          status: 'finished'
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
         }],
         imageUrl: '',
         dialogImageUrl: '',
@@ -112,6 +106,12 @@
       },
       handleChange(file, fileList) {
         this.fileList3 = fileList.slice(-3);
+      },
+      handleExceed(files, fileList) {
+        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+      },
+      beforeRemove(file, fileList) {
+        return this.$confirm(`确定移除 ${ file.name }？`);
       }
     }
   }
@@ -123,13 +123,17 @@
 
 ### 点击上传
 
-::: demo 通过 slot 你可以传入自定义的上传按钮类型和文字提示。
+:::demo 通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置`limit`和`on-exceed`来限制上传文件的个数和定义超出限制时的行为。可通过设置`before-remove`来阻止文件移除操作。
 ```html
 <el-upload
   class="upload-demo"
   action="https://jsonplaceholder.typicode.com/posts/"
   :on-preview="handlePreview"
   :on-remove="handleRemove"
+  :before-remove="beforeRemove"
+  multiple
+  :limit="3"
+  :on-exceed="handleExceed"
   :file-list="fileList">
   <el-button size="small" type="primary">点击上传</el-button>
   <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
@@ -147,6 +151,12 @@
       },
       handlePreview(file) {
         console.log(file);
+      },
+      handleExceed(files, fileList) {
+        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+      },
+      beforeRemove(file, fileList) {
+        return this.$confirm(`确定移除 ${ file.name }？`);
       }
     }
   }
@@ -158,7 +168,7 @@
 
 使用 `before-upload` 限制用户上传的图片格式和大小。
 
-::: demo
+:::demo
 ```html
 <el-upload
   class="avatar-uploader"
@@ -179,7 +189,7 @@
     overflow: hidden;
   }
   .avatar-uploader .el-upload:hover {
-    border-color: #20a0ff;
+    border-color: #409EFF;
   }
   .avatar-uploader-icon {
     font-size: 28px;
@@ -229,7 +239,7 @@
 
 使用 `list-type` 属性来设置文件列表的样式。
 
-::: demo
+:::demo
 ```html
 <el-upload
   action="https://jsonplaceholder.typicode.com/posts/"
@@ -238,7 +248,7 @@
   :on-remove="handleRemove">
   <i class="el-icon-plus"></i>
 </el-upload>
-<el-dialog v-model="dialogVisible" size="tiny">
+<el-dialog :visible.sync="dialogVisible">
   <img width="100%" :src="dialogImageUrl" alt="">
 </el-dialog>
 <script>
@@ -265,7 +275,7 @@
 
 ### 图片列表缩略图
 
-::: demo
+:::demo
 ```html
 <el-upload
   class="upload-demo"
@@ -301,7 +311,7 @@
 
 通过 `on-change` 钩子函数来对列表进行控制
 
-::: demo
+:::demo
 ```html
 <el-upload
   class="upload-demo"
@@ -317,12 +327,10 @@
       return {
         fileList3: [{
           name: 'food.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
-          status: 'finished'
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
         }, {
           name: 'food2.jpeg',
-          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
-          status: 'finished'
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
         }]
       };
     },
@@ -338,7 +346,7 @@
 
 ### 拖拽上传
 
-::: demo
+:::demo
 ```html
 <el-upload
   class="upload-demo"
@@ -354,7 +362,7 @@
 
 ### 手动上传
 
-::: demo
+:::demo
 ```html
 <el-upload
   class="upload-demo"
@@ -394,30 +402,40 @@
 ### Attribute
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| action | 必选参数, 上传的地址 | string | — | — |
-| headers | 可选参数, 设置上传的请求头部 | object | — | — |
-| multiple | 可选参数, 是否支持多选文件 | boolean | — | — |
-| data | 可选参数, 上传时附带的额外参数 | object | — | — |
-| name | 可选参数, 上传的文件字段名 | string | — | file |
+| action | 必选参数，上传的地址 | string | — | — |
+| headers | 设置上传的请求头部 | object | — | — |
+| multiple | 是否支持多选文件 | boolean | — | — |
+| data | 上传时附带的额外参数 | object | — | — |
+| name | 上传的文件字段名 | string | — | file |
 | with-credentials | 支持发送 cookie 凭证信息 | boolean | — | false |
 | show-file-list | 是否显示已上传文件列表 | boolean | — | true |
 | drag | 是否启用拖拽上传 | boolean | — | false |
-| accept | 可选参数, 接受上传的[文件类型](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept)（thumbnail-mode 模式下此参数无效）| string | — | — |
-| on-preview | 可选参数, 点击已上传的文件链接时的钩子, 可以通过 file.response 拿到服务端返回数据 | function(file) | — | — |
-| on-remove | 可选参数, 文件列表移除文件时的钩子 | function(file, fileList) | — | — |
-| on-success | 可选参数, 文件上传成功时的钩子 | function(response, file, fileList) | — | — |
-| on-error | 可选参数, 文件上传失败时的钩子 | function(err, file, fileList) | — | — |
-| on-progress | 可选参数, 文件上传时的钩子 | function(event, file, fileList) | — | — |
-| on-change | 可选参数, 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 | function(file, fileList) | — | — |
-| before-upload | 可选参数, 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function(file) | — | — |
+| accept | 接受上传的[文件类型](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept)（thumbnail-mode 模式下此参数无效）| string | — | — |
+| on-preview | 点击文件列表中已上传的文件时的钩子 | function(file) | — | — |
+| on-remove | 文件列表移除文件时的钩子 | function(file, fileList) | — | — |
+| on-success | 文件上传成功时的钩子 | function(response, file, fileList) | — | — |
+| on-error | 文件上传失败时的钩子 | function(err, file, fileList) | — | — |
+| on-progress | 文件上传时的钩子 | function(event, file, fileList) | — | — |
+| on-change | 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 | function(file, fileList) | — | — |
+| before-upload | 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function(file) | — | — |
+| before-remove | 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。| function(file, fileList) | — | — |
 | list-type | 文件列表的类型 | string | text/picture/picture-card | text |
 | auto-upload | 是否在选取文件后立即进行上传 | boolean | — | true |
-| file-list | 上传的文件列表, 例如: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}] | array | — | [] |
+| file-list | 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | [] |
 | http-request | 覆盖默认的上传行为，可以自定义上传的实现 | function | — | — |
 | disabled | 是否禁用 | boolean | — | false |
+| limit | 最大允许上传个数 |  number | — | — |
+| on-exceed | 文件超出个数限制时的钩子 | function(files, fileList) | — | - |
+
+### Slot
+| name | 说明 |
+|------|--------|
+| trigger | 触发文件选择框的内容 |
+| tip | 提示说明文字 |
 
 ### Methods
 | 方法名      | 说明          | 参数 |
-|---------- |-------------- | -- |
+|----------- |-------------- | -- |
 | clearFiles | 清空已上传的文件列表（该方法不支持在 before-upload 中调用） | — |
-| abort | 取消上传请求 | （ file: fileList 中的 file 对象 ） |
+| abort      | 取消上传请求    | （ file: fileList 中的 file 对象 ） |
+| submit     | 手动上传文件列表 |  —                                |
diff --git a/examples/entry.js b/examples/entry.js
index 8d39375070..4e127584e0 100644
--- a/examples/entry.js
+++ b/examples/entry.js
@@ -1,9 +1,9 @@
 import Vue from 'vue';
 import entry from './app';
 import VueRouter from 'vue-router';
-import routes from './route.config';
 import Element from 'main/index.js';
-import 'packages/theme-default/src/index.css';
+import 'packages/theme-chalk/src/index.scss';
+import routes from './route.config';
 import demoBlock from './components/demo-block.vue';
 import MainFooter from './components/footer.vue';
 import MainHeader from './components/header.vue';
diff --git a/examples/i18n/component.json b/examples/i18n/component.json
index f40b969109..0563c8a389 100644
--- a/examples/i18n/component.json
+++ b/examples/i18n/component.json
@@ -8,6 +8,15 @@
       "tooltip-text": "前往 jsfiddle.net 运行此示例"
     },
     "footer": {
+      "links": "链接",
+      "repo": "代码仓库",
+      "community": "社区",
+      "changelog": "更新日志",
+      "theme": "自定义主题工具",
+      "preview": "在线主题生成",
+      "faq": "常见问题",
+      "gitter": "在线讨论",
+      "starter": "脚手架",
       "feedback": "反馈建议",
       "contribution": "贡献指南",
       "eleme": "饿了么"
@@ -30,6 +39,15 @@
       "tooltip-text": "Run this demo on jsfiddle.net"
     },
     "footer": {
+      "links": "Links",
+      "repo": "GitHub",
+      "community": "Community",
+      "changelog": "Changelog",
+      "theme": "Theme CLI tool",
+      "preview": "Online theme generator",
+      "faq": "FAQ",
+      "gitter": "Gitter",
+      "starter": "Starter kit",
       "feedback": "Feedback",
       "contribution": "Contribution",
       "eleme": "Eleme"
@@ -42,5 +60,36 @@
     "nav": {
       "dropdown": "Version: "
     }
+  },
+  {
+    "lang": "es",
+    "demo-block": {
+      "hide-text": "Ocultar",
+      "show-text": "Mostrar",
+      "button-text": "Probar",
+      "tooltip-text": "Prueba este ejemplo en jsfiddle.net"
+    },
+    "footer": {
+      "links": "Enlaces",
+      "repo": "GitHub",
+      "community": "Comunidad",
+      "changelog": "Lista de cambios",
+      "theme": "Generador de temas por CLI",
+      "preview": "Generador de temas en línea",
+      "faq": "FAQ",
+      "gitter": "Gitter",
+      "starter": "Kit de inicio",
+      "feedback": "Comentarios",
+      "contribution": "Contribución",
+      "eleme": "Eleme"
+    },
+    "header": {
+      "guide": "Guía",
+      "components": "Componentes",
+      "resource": "Recursos"
+    },
+    "nav": {
+      "dropdown": "Versión: "
+    }
   }
 ]
diff --git a/examples/i18n/page.json b/examples/i18n/page.json
index 70cf61fed4..d91967a7dc 100644
--- a/examples/i18n/page.json
+++ b/examples/i18n/page.json
@@ -3,22 +3,18 @@
     "lang": "zh-CN",
     "pages": {
       "index": {
-        "lang": "zh-CN",
-        "titleSize": "46",
-        "theatreSize": "46",
-        "paraHeight": "1.8",
-        "theatreParam": "",
-        "typingFunc": ".addScene('产品设计师', 1800, -5, 800)\n          .addScene('交互设计师', 1800, -5, 500)\n          .addScene('视觉设计师', 1800, -5, 700)\n          .addScene('产品经理', 1800, -4, 600)\n          .addScene('前端工程师', 1800, -5, 800)",
-        "typingInvoke": ".addActor('line2', { speed: 0.5, accuracy: 1 })\n        .addScene(2600)\n        .addScene('line2:只为守护世界和平', 300, -6, 1000)\n        .addScene('让你少加班', 300, -5)\n        .addScene('line2:只为这样的你: ', 400)",
         "1": "网站快速成型工具",
-        "2": "Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。",
+        "2": "Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库",
         "3": "指南",
         "4": "了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。",
         "5": "查看详情",
         "6": "组件",
         "7": "使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。",
         "8": "资源",
-        "9": "下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。"
+        "9": "下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。",
+        "lang": "zh-CN",
+        "titleSize": "34",
+        "paraSize": "18"
       },
       "component": {},
       "changelog": {
@@ -80,16 +76,18 @@
         "15": "适用于导航较少，页面篇幅较长的网站。"
       },
       "resource": {
-        "paraHeight": "1.8",
         "1": "资源",
-        "2": "这里提供 Element 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。",
+        "2": "整理中",
         "3": "Axure Components",
         "4": "通过在 Axure 中导入 Element 组件库，可以在交互设计阶段方便地调用常用的组件",
         "5": "下载",
         "6": "Sketch Template",
         "7": "从 Element Template 快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格",
         "8": "组件交互文档",
-        "9": "进一步查看 Element 交互文档，从一个较为微观的角度详细地了解各个组件的交互细节"
+        "9": "进一步查看 Element 交互文档，从一个较为微观的角度详细地了解各个组件的交互细节",
+        "paraHeight": "1.8",
+        "placeholder1": "整理中",
+        "placeholder2": "设计资源正在整理和完善中"
       }
     }
   },
@@ -97,13 +95,6 @@
     "lang": "en-US",
     "pages": {
       "index": {
-        "lang": "en-US",
-        "titleSize": "50",
-        "theatreSize": "42",
-        "paraHeight": "1.6",
-        "theatreParam": "{ maxSpeed: 100 }",
-        "typingFunc": ".addScene('product designers', 1800, -17, 800)\n          .addScene('UI designers', 1800, -12, 800)\n          .addScene('UX designers', 1800, -12, 800)\n          .addScene('product managers', 1800, -16, 800)\n          .addScene('FE developers', 1800, -13, 800)",
-        "typingInvoke": ".addActor('line2', { speed: 1, accuracy: 1 })\n        .addScene(2600)\n        .addScene('line2:For ', 500)",
         "1": "A Desktop UI Library",
         "2": "Element, a Vue 2.0 based component library for developers, designers and product managers",
         "3": "Guide",
@@ -112,7 +103,10 @@
         "6": "Component",
         "7": "Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.",
         "8": "Resource",
-        "9": "Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency."
+        "9": "Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.",
+        "lang": "en-US",
+        "titleSize": "34",
+        "paraSize": "18"
       },
       "component": {},
       "changelog": {
@@ -174,16 +168,110 @@
         "15": "Suitable for sites with few navigations and large chunks."
       },
       "resource": {
-        "paraHeight": "1.6",
         "1": "Resource",
-        "2": "Here you can download design resources and tools that shaped Element UI. More design resources are being prepared.",
+        "2": "Under construction.",
         "3": "Axure Components",
         "4": "By importing Element UI in Axure, you can easily apply all the components we provide during interaction design.",
         "5": "Download",
         "6": "Sketch Template",
         "7": "Apply components from Element template, so you can improve design efficiency while keeping a unified visual style.",
         "8": "Interaction Design Documentation",
-        "9": "Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective."
+        "9": "Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective.",
+        "paraHeight": "1.6",
+        "placeholder1": "Under construction",
+        "placeholder2": "More resources are being developed"
+      }
+    }
+  },
+  {
+    "lang": "es",
+    "pages": {
+      "index": {
+        "1": "Un kit de interfaz de usuario para la web",
+        "2": "Element, una librería de componentes basada en Vue 2.0 para desarrolladores, diseñadores y jefes de producto",
+        "3": "Guía",
+        "4": "Entender los líneamientos de diseño, ayudando a diseñadores a crear productos que sean lógicos, razonablemente estructurados y fáciles de usar.",
+        "5": "Ver detalle",
+        "6": "Componentes",
+        "7": "Experimenta la interacción al pasear con los ejemplos de los componentes. Utiliza el código encapsulado para mejorar la eficiencia en el desarrollo.",
+        "8": "Recursos",
+        "9": "Descarga los recursos de diseño relevantes para dar forma a un prototipo o borrador, aumentando la eficiencia del diseño.",
+        "lang": "es",
+        "titleSize": "34",
+        "paraSize": "18"
+      },
+      "component": {},
+      "changelog": {
+        "1": "Lista de cambios",
+        "2": "es"
+      },
+      "design": {
+        "1": "Disciplinas de diseño",
+        "2": "Consistencia",
+        "3": "",
+        "4": "Comentarios",
+        "5": "",
+        "6": "Eficiencia",
+        "7": "",
+        "8": "Control",
+        "9": "",
+        "10": "Consistencia",
+        "11": "Consistente con la vida real: ",
+        "12": "en línea con el proceso y la vida real, y cumple con los idiomas y hábitos a los que los usuarios están acostumbrados.",
+        "13": "Consistente dentro de la interfaz: ",
+        "14": "todos los elementos deben ser consistentes, como: estilo de diseño, iconos y texto, posición de los elementos, etc.",
+        "15": "Comentarios",
+        "16": "Comentarios sobre la operación: ",
+        "17": "Permite a los usuarios percibir claramente las operaciones mediante actualizaciones de estilo y efectos interactivos.",
+        "18": "Comentarios visuales: ",
+        "19": "Refleja el estado actual al actualizar o reorganizar los elementos de la página.",
+        "20": "Eficiencia",
+        "21": "Simplifica el proceso: ",
+        "22": "Mantiene el proceso operativo simple e intuitivo.",
+        "23": "Bien definido y claro: ",
+        "24": "Expresa las intenciones claramente para que los usuarios puedan comprender y tomar decisiones rápidamente.",
+        "25": "Fácil de identificar: ",
+        "26": "La interfaz debe ser sencilla, lo que permitirá a los usuarios a identificar y liberarlos de la memorización y recuerdos.",
+        "27": "Control",
+        "28": "Toma de decisiones: ",
+        "29": "Brindar consejos sobres las operaciones es aceptable, pero no tomar desiciones para los usuarios.",
+        "30": "Consecuencias controladas: ",
+        "31": "Los usuarios deben tener la libertad de operar, incluida la cancelación, el aborto o la terminación de las operaciones actuales."
+      },
+      "guide": {
+        "1": "Disciplinas de diseño",
+        "2": "Navegación"
+      },
+      "nav": {
+        "1": "Navegación",
+        "2": "La navegación se centra en resolver los problemas de los usuarios sobre donde ir y como llegar ahí. En general, se puede categorizar en 'navegación de barra lateral' y 'navegación superior'.",
+        "3": "Elige la navegación correcta",
+        "4": "Una navegación apropiada provee a los usuarios una mejor experiencia, mientras que una inapropiada genera confusión. Esta es la diferencia entre la navegación de la barra lateral y la navegación superior.",
+        "5": "Navegación lateral",
+        "6": "Fija la navegación del lado izquierdo, esto permitirá una mejor visibilidad, lo que facilitará el cambio de pagina. En este caso, el área superior de la pagina contiene herramientas comúnmente utilizadas, por ejemplo, barra de búsqueda, botón de ayuda, botón de aviso, etc. Adecuado para sitios web de gestión.",
+        "7": "Categorías de Nivel 1",
+        "8": "Adecuado para sitios con una estructura simple con un solo nivel de páginas. No se necesita un 'breadcrumb'.",
+        "9": "Categorías de Nivel 2",
+        "10": "La barra lateral muestra hasta dos niveles de navegación. Se recomienda utilizar un 'breadcrumb' en combinación con la navegación de segundo nivel, lo que facilita la localización y navegación de los usuarios.",
+        "11": "Categorías de Nivel 3",
+        "12": "Adecuado para sitios web bastante complejos. La barra lateral izquierda contiene navegación de primer nivel, y la columna central muestra navegación de segundo nivel u otras opciones de utilidad.",
+        "13": "Navegación superior",
+        "14": "Se ajusta de acuerdo a la exploración normal de arriba a abajo, lo que hace que las cosas sean más naturales. La cantidad de navegación y la longitud del texto están limitadas al ancho de la parte superior.",
+        "15": "Adecuado para sitios con pocas navegaciones y grandes trozos."
+      },
+      "resource": {
+        "1": "Recursos",
+        "2": "En construcción",
+        "3": "Componetes de Axure",
+        "4": "Mediante la importación de elementos de interfaz de usuario en Axure, se puede aplicar fácilmente a todos los componentes que proporcionamos durante el diseño de interacción.",
+        "5": "Descarga",
+        "6": "Plantilla de Sketch",
+        "7": "Aplica componentes de la plantilla Element para que pueda mejorarla eficiencia del diseño manteniendo un estilo visual unificado.",
+        "8": "Documentación de diseño de interacción",
+        "9": "Eche un vistazo más de cerca a la documentación de diseño de interacción. Conoce más detalles de cada componente desde una perspectiva microcósmica.",
+        "paraHeight": "1.6",
+        "placeholder1": "En construcción",
+        "placeholder2": "Se están desarrollando más recursos"
       }
     }
   }
diff --git a/examples/i18n/route.json b/examples/i18n/route.json
index d9e7749ff4..ad93c4a3c8 100644
--- a/examples/i18n/route.json
+++ b/examples/i18n/route.json
@@ -4,5 +4,8 @@
   },
   {
     "lang": "en-US"
+  },
+  {
+    "lang": "es"
   }
 ]
diff --git a/examples/i18n/title.json b/examples/i18n/title.json
index 38eda0f8e6..91e57f36e0 100644
--- a/examples/i18n/title.json
+++ b/examples/i18n/title.json
@@ -10,5 +10,11 @@
     "guide": "Guide | Element",
     "component": "Component | Element",
     "resource": "Resource | Element"
+  },
+  "es": {
+    "home": "Element - Un kit de interfaz de usuario para la web",
+    "guide": "Guía | Element",
+    "component": "Componentes | Element",
+    "resource": "Recursos | Element"
   }
 }
diff --git a/examples/icon.json b/examples/icon.json
index b3e8f6f5d1..0355a88654 100644
--- a/examples/icon.json
+++ b/examples/icon.json
@@ -1 +1 @@
-["arrow-down","arrow-left","arrow-right","arrow-up","caret-bottom","caret-left","caret-right","caret-top","check","circle-check","circle-close","circle-cross","close","upload","d-arrow-left","d-arrow-right","d-caret","date","delete","document","edit","information","loading","menu","message","minus","more","picture","plus","search","setting","share","star-off","star-on","time","warning","delete2","upload2","view"]
\ No newline at end of file
+["info","error","success","warning","question","back","arrow-left","arrow-down","arrow-right","arrow-up","caret-left","caret-bottom","caret-top","caret-right","d-arrow-left","d-arrow-right","minus","plus","remove","circle-plus","remove-outline","circle-plus-outline","close","check","circle-close","circle-check","circle-close-outline","circle-check-outline","zoom-out","zoom-in","d-caret","sort","sort-down","sort-up","tickets","document","goods","sold-out","news","message","date","printer","time","bell","mobile-phone","service","view","menu","more","more-outline","star-on","star-off","location","location-outline","phone","phone-outline","picture","picture-outline","delete","search","edit","edit-outline","rank","refresh","share","setting","upload","upload2","download","loading"]
\ No newline at end of file
diff --git a/examples/index.tpl b/examples/index.tpl
index 9066e56726..f6d791ba79 100644
--- a/examples/index.tpl
+++ b/examples/index.tpl
@@ -3,14 +3,19 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <link rel="stylesheet" href="//at.alicdn.com/t/font_1473762766_7074292.css">
-    <link rel='mask-icon' href="https://raw.githubusercontent.com/ElemeFE/element/dev/examples/assets/images/element-logo-small.svg" color="#20a0ff">
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_137970_p1tpzmomxp9cnmi.css">
+    <link rel='mask-icon' href="https://raw.githubusercontent.com/ElemeFE/element/dev/examples/assets/images/element-logo-small.svg" color="#409EFF">
     <title>Element</title>
   </head>
   <body>
+    <script>
+      if (!window.Promise) {
+        document.write('<script src="//cdn.jsdelivr.net/npm/es6-promise@4.1.1/dist/es6-promise.min.js"><\/script><script>ES6Promise.polyfill()<\/script>')
+      }
+    </script>
     <div id="app"></div><% if (process.env.NODE_ENV === 'production') { %>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.runtime.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/vue-router/2.1.1/vue-router.min.js"></script><% } %>
+    <script src="//cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.runtime.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/vue-router@2.7.0/dist/vue-router.min.js"></script><% } %>
   </body>
   <% if (process.env.NODE_ENV === 'production') { %><script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
diff --git a/examples/nav.config.json b/examples/nav.config.json
index 5b4b93ba47..651e6910fb 100644
--- a/examples/nav.config.json
+++ b/examples/nav.config.json
@@ -1,5 +1,17 @@
 {
   "zh-CN": [
+    {
+      "name": "更新日志",
+      "path": "/changelog"
+    },
+    {
+      "name": "Element React",
+      "href": "https://elemefe.github.io/element-react/"
+    },
+    {
+      "name": "Element Angular",
+      "href": "https://element-angular.faas.ele.me/"
+    },
     {
       "name": "开发指南",
       "children": [
@@ -26,15 +38,7 @@
       ]
     },
     {
-      "name": "更新日志",
-      "path": "/changelog"
-    },
-    {
-      "name": "Element React",
-      "href": "https://eleme.github.io/element-react/"
-    },
-    {
-      "name": "基础组件",
+      "name": "组件",
       "groups": [
         {
           "groupName": "Basic",
@@ -43,6 +47,10 @@
               "path": "/layout",
               "title": "Layout 布局"
             },
+            {
+              "path": "/container",
+              "title": "Container 布局容器"
+            },
             {
               "path": "/color",
               "title": "Color 色彩"
@@ -242,6 +250,18 @@
     }
   ],
   "en-US": [
+    {
+      "name": "Changelog",
+      "path": "/changelog"
+    },
+    {
+      "name": "Element React",
+      "href": "https://elemefe.github.io/element-react/"
+    },
+    {
+      "name": "Element Angular",
+      "href": "https://element-angular.faas.ele.me/"
+    },
     {
       "name": "Development",
       "children": [
@@ -267,13 +287,255 @@
         }
       ]
     },
+    {
+      "name": "Components",
+      "groups": [
+        {
+          "groupName": "Basic",
+          "list": [
+            {
+              "path": "/layout",
+              "title": "Layout"
+            },
+            {
+              "path": "/container",
+              "title": "Layout Container"
+            },
+            {
+              "path": "/color",
+              "title": "Color"
+            },
+            {
+              "path": "/typography",
+              "title": "Typography"
+            },
+            {
+              "path": "/icon",
+              "title": "Icon"
+            },
+            {
+              "path": "/button",
+              "title": "Button"
+            }
+          ]
+        },
+        {
+          "groupName": "Form",
+          "list": [
+            {
+              "path": "/radio",
+              "title": "Radio"
+            },
+            {
+              "path": "/checkbox",
+              "title": "Checkbox"
+            },
+            {
+              "path": "/input",
+              "title": "Input"
+            },
+            {
+              "path": "/input-number",
+              "title": "InputNumber"
+            },
+            {
+              "path": "/select",
+              "title": "Select"
+            },
+            {
+              "path": "/cascader",
+              "title": "Cascader"
+            },
+            {
+              "path": "/switch",
+              "title": "Switch"
+            },
+            {
+              "path": "/slider",
+              "title": "Slider"
+            },
+            {
+              "path": "/time-picker",
+              "title": "TimePicker"
+            },
+            {
+              "path": "/date-picker",
+              "title": "DatePicker"
+            },
+            {
+              "path": "/datetime-picker",
+              "title": "DateTimePicker"
+            },
+            {
+              "path": "/upload",
+              "title": "Upload"
+            },
+            {
+              "path": "/rate",
+              "title": "Rate"
+            },
+            {
+              "path": "/color-picker",
+              "title": "ColorPicker"
+            },
+            {
+              "path": "/transfer",
+              "title": "Transfer"
+            },
+            {
+              "path": "/form",
+              "title": "Form"
+            }
+          ]
+        },
+        {
+          "groupName": "Data",
+          "list": [
+            {
+              "path": "/table",
+              "title": "Table"
+            },
+            {
+              "path": "/tag",
+              "title": "Tag"
+            },
+            {
+              "path": "/progress",
+              "title": "Progress"
+            },
+            {
+              "path": "/tree",
+              "title": "Tree"
+            },
+            {
+              "path": "/pagination",
+              "title": "Pagination"
+            },
+            {
+              "path": "/badge",
+              "title": "Badge"
+            }
+          ]
+        },
+        {
+          "groupName": "Notice",
+          "list": [
+            {
+              "path": "/alert",
+              "title": "Alert"
+            },
+            {
+              "path": "/loading",
+              "title": "Loading"
+            },
+            {
+              "path": "/message",
+              "title": "Message"
+            },
+            {
+              "path": "/message-box",
+              "title": "MessageBox"
+            },
+            {
+              "path": "/notification",
+              "title": "Notification"
+            }
+          ]
+        },
+        {
+          "groupName": "Navigation",
+          "list": [
+            {
+              "path": "/menu",
+              "title": "NavMenu"
+            },
+            {
+              "path": "/tabs",
+              "title": "Tabs"
+            },
+            {
+              "path": "/breadcrumb",
+              "title": "Breadcrumb"
+            },
+            {
+              "path": "/dropdown",
+              "title": "Dropdown"
+            },
+            {
+              "path": "/steps",
+              "title": "Steps"
+            }
+          ]
+        },
+        {
+          "groupName": "Others",
+          "list": [
+            {
+              "path": "/dialog",
+              "title": "Dialog"
+            },
+            {
+              "path": "/tooltip",
+              "title": "Tooltip"
+            },
+            {
+              "path": "/popover",
+              "title": "Popover"
+            },
+            {
+              "path": "/card",
+              "title": "Card"
+            },
+            {
+              "path": "/carousel",
+              "title": "Carousel"
+            },
+            {
+              "path": "/collapse",
+              "title": "Collapse"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "es": [
     {
       "name": "Changelog",
       "path": "/changelog"
     },
     {
       "name": "Element React",
-      "href": "https://eleme.github.io/element-react/"
+      "href": "https://elemefe.github.io/element-react/"
+    },
+    {
+      "name": "Element Angular",
+      "href": "https://element-angular.faas.ele.me/"
+    },
+    {
+      "name": "Development",
+      "children": [
+        {
+          "path": "/installation",
+          "name": "Installation"
+        },
+        {
+          "path": "/quickstart",
+          "name": "Quick Start"
+        },
+        {
+          "path": "/i18n",
+          "name": "Internationalization"
+        },
+        {
+          "path": "/custom-theme",
+          "name": "Custom Theme"
+        },
+        {
+          "path": "/transition",
+          "name": "Built-in transition"
+        }
+      ]
     },
     {
       "name": "Components",
@@ -285,6 +547,10 @@
               "path": "/layout",
               "title": "Layout"
             },
+            {
+              "path": "/container",
+              "title": "Layout Container"
+            },
             {
               "path": "/color",
               "title": "Color"
diff --git a/examples/pages/template/changelog.tpl b/examples/pages/template/changelog.tpl
index 5f8233e0e9..35bb18b7f8 100644
--- a/examples/pages/template/changelog.tpl
+++ b/examples/pages/template/changelog.tpl
@@ -5,66 +5,66 @@
     .fr {
       float: right;
       padding: 0;
+
+      &.el-button {
+        transform: translateY(-3px);
+      }
+
       a {
         display: block;
         padding: 10px 15px;
-        color: #475669;
+        color: #333;
       }
+
       &:hover a {
-        color: #20a0ff;
+        color: #409EFF;
       }
     }
+
     .heading {
-      margin-bottom: 40px;
+      font-size: 24px;
+      margin-bottom: 60px;
+      color: #333;
     }
+
     .timeline {
-      margin: 0 0 0 105px;
-      padding-left: 25px;
+      padding: 0;
+      padding-bottom: 10px;
       position: relative;
       color: #5e6d82;
 
-      &:before {
-        content: '';
-        width: 1px;
-        height: 100%;
-        position: absolute;
-        left: 0;
-        top: 10px;
-        background-color: #eaeefa;
-      }
-
       > li {
-        list-style: none;
         position: relative;
+        padding-bottom: 15px;
+        list-style: none;
         line-height: 1.8;
+        border: 1px solid #ddd;
+        border-radius: 4px;
 
         &:not(:last-child) {
           margin-bottom: 50px;
         }
-
-        &:first-child {
-          margin-top: -10px;
-
-          h3:before {
-            left: -33px;
-            top: 10px;
-            width: 17px;
-            height: @width;
-            background-color: #20a0ff;
-            border: 0;
-          }
-        }
       }
 
       ul {
-        padding-left: 0;
+        padding: 30px 30px 15px;
+
         ul {
-          padding-left: 20px;
+          padding: 0;
+          padding-top: 5px;
+          padding-left: 27px;
+
+          li {
+            padding-left: 0;
+            color: #555;
+            word-break: normal;
+          }
+
           li::before {
             content: '';
             circle: 4px #fff;
-            border: solid 1px #5e6d82;
-            margin-right: 5px;
+            border: solid 1px #333;
+            margin-right: -12px;
             display: inline-block;
             vertical-align: middle;
           }
@@ -72,56 +72,64 @@
       }
 
       li li {
-        font-size: 14px;
+        font-size: 16px;
         list-style: none;
-        padding-left: 0;
+        padding-left: 20px;
+        padding-bottom: 5px;
+        color: #333;
         word-break: break-all;
 
         &:before {
           content: '';
-          circle: 4px #5e6d82;
-          margin-right: 5px;
+          circle: 6px #333;
+          transform: translateX(-20px);
           display: inline-block;
           vertical-align: middle;
         }
       }
+  
+      i {
+        padding: 0 20px;
+        display: inline-block;
+      }
 
       h3 {
-        margin: 0 0 10px;
-
-        &:before {
-          content: '';
-          display: block;
-          position: absolute;
-          left: -31px;
-          top: 13px;
-          circle: 13px transparent;
-          border: 2px solid #20a0ff;
-          box-sizing: border-box;
-          background-color: #fff;
-        }
+        margin:0;
+        padding: 15px 30px;
+        border-bottom: 1px solid #ddd;
+        font-size: 20px;
+        color: #333;
+        font-weight: bold;
 
         a {
           opacity: 1;
+          font-size: 20px;
           float: none;
           margin-left: 0;
-          color: inherit;
+          color: #333;
         }
       }
+
       h4 {
-        margin: 50px 0 10px;
+        margin: 0;
+        margin-bottom: -10px;
+        font-size: 18px;
+        padding-left: 54px;
+        padding-top: 30px;
+        font-weight: bold;
       }
+
       p {
         margin: 0;
       }
 
       em {
         position: absolute;
-        left: -127px;
+        right: 30px;
         font-style: normal;
-        top: 6px;
-        font-size: 14px;
-        color: #99a9bf;
+        top: 23px;
+        font-size: 16px;
+        color: #666;
       }
     }
   }
@@ -130,7 +138,7 @@
   <div class="page-changelog">
     <div class="heading">
       <el-button class="fr">
-        <a href="https://github.com/ElemeFE/element/releases" target="_blank">Github Releases</a>
+        <a href="https://github.com/ElemeFE/element/releases" target="_blank">GitHub Releases</a>
       </el-button>
       <%= 1 >
     </div>
@@ -141,6 +149,7 @@
 </template>
 <script>
   import ChangeLog from '../../../CHANGELOG.<%= 2 >.md';
+
   export default {
     components: {
       ChangeLog
diff --git a/examples/pages/template/component.tpl b/examples/pages/template/component.tpl
index f3276f0ddc..df6c181423 100644
--- a/examples/pages/template/component.tpl
+++ b/examples/pages/template/component.tpl
@@ -1,19 +1,67 @@
 <style>
+  .page-component__scroll {
+    height: calc(100% - 80px);
+    margin-top: 80px;
+
+    .el-scrollbar__wrap {
+      overflow-x: auto;
+    }
+  }
+
   .page-component {
-    padding-bottom: 95px;
     box-sizing: border-box;
+    height: 100%;
+  
+    &.page-container {
+      padding: 0;
+    }
+
+    .page-component__nav {
+      width: 240px;
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      margin-top: 80px;
+      transition: padding-top .3s;
+
+      .el-scrollbar__wrap {
+        height: 100%;
+      }
+
+      &.is-extended {
+        padding-top: 0;
+      }
+    }
+
+    .side-nav {
+      height: 100%;
+      padding-top: 50px;
+      padding-bottom: 50px;
+      padding-right: 0;
+
+      & > ul {
+        padding-bottom: 50px;
+      }
+    }
+
+    .page-component__content {
+      padding-left: 270px;
+      padding-bottom: 100px;
+      box-sizing: border-box;
+    }
+
     .content {
-      margin-left: -1px;
+      padding-top: 50px;
 
       > {
         h3 {
-          margin: 45px 0 15px;
+          margin: 55px 0 20px;
         }
+
         table {
           border-collapse: collapse;
           width: 100%;
           background-color: #fff;
-          color: #5e6d82;
           font-size: 14px;
           margin-bottom: 45px;
           line-height: 1.5em;
@@ -21,40 +69,59 @@
           strong {
             font-weight: normal;
           }
+
+          td, th {
+            border-bottom: 1px solid #d8d8d8;
+            padding: 15px;
+            max-width: 250px;
+          }
+
           th {
             text-align: left;
-            border-top: 1px solid #eaeefb;
-            background-color: #EFF2F7;
             white-space: nowrap;
+            color: #666;
+            font-weight: normal;
           }
-          td, th {
-            border-bottom: 1px solid #eaeefb;
-            padding: 10px;
-            max-width: 250px;
+
+          td {
+            color: #333;
           }
+
           th:first-child, td:first-child {
             padding-left: 10px;
           }
         }
+
+        ul:not(.timeline) {
+          margin: 10px 0;
+          padding: 0 0 0 20px;
+          font-size: 14px;
+          color: #5e6d82;
+          line-height: 2em;
+        }
       }
     }
+
     .page-component-up {
-      background-color: #58b7ff;
+      background-color: #fff;
       position: fixed;
       right: 100px;
       bottom: 150px;
-      size: 50px;
-      border-radius: 25px;
+      size: 40px;
+      border-radius: 20px;
       cursor: pointer;
-      opacity: 0.4;
       transition: .3s;
+      box-shadow: 0 0 6px rgba(0,0,0, .12);
+      z-index: 5;
+
       i {
-        color: #fff;
+        color: #409EFF;
         display: block;
-        line-height: 50px;
+        line-height: 40px;
         text-align: center;
-        font-size: 22px;
+        font-size: 18px;
       }
+
       &.hover {
         opacity: 1;
       }
@@ -65,18 +132,45 @@
       opacity: 0;
     }
   }
+
+  @media (max-width: 768px) {
+    .page-component {
+      .page-component__nav {
+        width: 100%;
+        position: static;
+        margin-top: 0;
+      }
+      .side-nav {
+        padding-top: 0;
+        padding-left: 50px;
+      }
+      .page-component__content {
+        padding-left: 10px;
+        padding-right: 10px;
+      }
+      .content {
+        padding-top: 0;
+      }
+      .content > table {
+        overflow: auto;
+        display: block;
+      }
+      .page-component-up {
+        display: none;
+      }
+    }
+  }
 </style>
 <template>
+  <el-scrollbar class="page-component__scroll" ref="componentScrollBar">
   <div class="page-container page-component">
-    <el-row>
-      <el-col :xs="24" :sm="6">
-        <side-nav :data="navsData[lang]" :base="`/${ lang }/component`"></side-nav>
-      </el-col>
-      <el-col :xs="24" :sm="18">
-        <router-view class="content"></router-view>
-        <footer-nav></footer-nav>
-      </el-col>
-    </el-row>
+    <el-scrollbar class="page-component__nav">
+      <side-nav :data="navsData[lang]" :base="`/${ lang }/component`"></side-nav>
+    </el-scrollbar>
+    <div class="page-component__content">
+      <router-view class="content"></router-view>
+      <footer-nav></footer-nav>
+    </div>
     <transition name="back-top-fade">
       <div
         class="page-component-up"
@@ -89,36 +183,107 @@
       </div>
     </transition>
   </div>
+  </el-scrollbar>
 </template>
 <script>
+  import bus from '../../bus';
   import navsData from '../../nav.config.json';
   import throttle from 'throttle-debounce/throttle';
+
   export default {
     data() {
       return {
         lang: this.$route.meta.lang,
         navsData,
         hover: false,
-        showBackToTop: false
+        showBackToTop: false,
+        scrollTop: 0,
+        showHeader: true,
+        componentScrollBar: null,
+        componentScrollBoxElement: null
       };
     },
+    watch: {
+      '$route.path'() {
+        // 触发伪滚动条更新
+        this.componentScrollBox.scrollTop = 0;
+        this.$nextTick(() => {
+          this.componentScrollBar.update();
+        });
+      }
+    },
     methods: {
+      renderAnchorHref() {
+        if (/changelog/g.test(location.href)) return;
+        const anchors = document.querySelectorAll('h2 a,h3 a');
+        const basePath = location.href.split('#').splice(0, 2).join('#');
+
+        [].slice.call(anchors).forEach(a => {
+          const href = a.getAttribute('href');
+          a.href = basePath + href;
+        });
+      },
+
+      goAnchor() {
+        if (location.href.match(/#/g).length > 1) {
+          const anchor = location.href.match(/#[^#]+$/g);
+          if (!anchor) return;
+          const elm = document.querySelector(anchor[0]);
+          if (!elm) return;
+
+          setTimeout(_ => {
+            this.componentScrollBox.scrollTop = elm.offsetTop;
+          }, 50);
+        }
+      },
       toTop() {
         this.hover = false;
         this.showBackToTop = false;
-        document.body.scrollTop = 0;
-        document.documentElement.scrollTop = 0;
+        this.componentScrollBox.scrollTop = 0;
       },
+
       handleScroll() {
-        this.showBackToTop = (document.body.scrollTop || document.documentElement.scrollTop) >= 0.5 * document.body.clientHeight;
+        const scrollTop = this.componentScrollBox.scrollTop;
+        this.showBackToTop = scrollTop >= 0.5 * document.body.clientHeight;
+        if (this.showHeader !== this.scrollTop > scrollTop) {
+          this.showHeader = this.scrollTop > scrollTop;
+        }
+        if (scrollTop === 0) {
+          this.showHeader = true;
+        }
+        if (!this.navFaded) {
+          bus.$emit('fadeNav');
+        }
+        this.scrollTop = scrollTop;
       }
     },
+    created() {
+      bus.$on('navFade', val => {
+        this.navFaded = val;
+      });
+      window.addEventListener('hashchange', () => {
+        if (location.href.match(/#/g).length < 2) {
+          document.documentElement.scrollTop = document.body.scrollTop = 0;
+          this.renderAnchorHref();
+        } else {
+          this.goAnchor();
+        }
+      });
+    },
     mounted() {
+      this.componentScrollBar = this.$refs.componentScrollBar;
+      this.componentScrollBox = this.componentScrollBar.$el.querySelector('.el-scrollbar__wrap');
       this.throttledScrollHandler = throttle(300, this.handleScroll);
-      document.addEventListener('scroll', this.throttledScrollHandler);
+      this.componentScrollBox.addEventListener('scroll', this.throttledScrollHandler);
+      this.renderAnchorHref();
+      this.goAnchor();
+      document.body.classList.add('is-component');
+    },
+    destroyed() {
+      document.body.classList.remove('is-component');
     },
     beforeDestroy() {
-      document.removeEventListener('scroll', this.throttledScrollHandler);
+      this.componentScrollBox.removeEventListener('scroll', this.throttledScrollHandler);
     }
   };
 </script>
diff --git a/examples/pages/template/index.tpl b/examples/pages/template/index.tpl
index 148ed3e959..d79af5046e 100644
--- a/examples/pages/template/index.tpl
+++ b/examples/pages/template/index.tpl
@@ -1,68 +1,128 @@
 <style scoped>
-  .actor {
-    min-height: 65px;
+  .banner {
+    text-align: center;
+  }
+  .banner-desc {
+    padding-top: 20px;
 
-    &:after {
-      content: '';
-      width: 6px;
-      height: 50px;
-      vertical-align: -8px;
-      margin-left: 5px;
-      background-color: #fff;
-      display: inline-block;
-      animation: blink 400ms infinite alternate;
+    h1 {
+      font-size: <%= titleSize >px;
+      margin: 0;
+      line-height: 48px;
+      color: #555;
+    }
+
+    p {
+      font-size: <%= paraSize >px;
+      line-height: 28px;
+      color: #888;
+      margin: 10px 0 5px;
     }
   }
-  .banner {
+  .sponsors {
+    display: flex;
+    justify-content: center;
+  }
+  .sponsor {
+    margin: 0 20px 50px;
+    display: inline-flex;
+    width: 300px;
+    height: 100px;
+    justify-content: center;
+
+    img {
+      margin-right: 20px;
+    }
+
+    div {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    p {
+      margin: 0;
+      line-height: 1.8;
+      color: #999;
+      font-size: 14px;
+    }
+  }
+  .jumbotron {
+    width: 890px;
+    height: 465px;
+    margin: 30px auto;
     position: relative;
-    height: 420px;
-    color: #fff;
-    margin-bottom: 130px;
 
-    .container {
-      position: relative;
+    div {
+      width: 100%;
+      height: 100%;
+      background-color: transparent;
+      position: absolute;
+      top: 0;
+      left: 0;
     }
 
     img {
       position: absolute;
-      top: 15px;
-      right: -10px;
     }
-  }
-  .banner-sky {
-    position: absolute;
-    top: -150px;
-    bottom: -15px;
-    width: 100%;
-    margin-top: -140px;
-    transform: skewY(-5deg);
-    transform-origin: center;
-    background-image: linear-gradient(180deg, #0d1a44 13%, #3c4f91 56%, #5fc1e4 100%);
-  }
-  img.banner-stars {
-    top: -10px;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-  .banner-desc {
-    padding-top: 110px;
-    padding-left: 30px;
-    font-size: <%= theatreSize >px;
-    position: relative;
-    z-index: 10;
 
-    h2 {
-      font-size: <%= titleSize >px;
-      margin: 0;
-      color: #fff;
+    .jumbotron-cloud-1 {
+      right: 0;
+      top: 0;
+      height: 55px;
     }
 
-    p {
-      font-size: 14px;
-      opacity: .8;
-      width: 420px;
-      line-height: <%= paraHeight >;
-      padding-left: 3px;
+    .jumbotron-plant-2 {
+      left: 60px;
+      top: 200px;
+    }
+
+    .jumbotron-web {
+      height: 385px;
+      top: 35px;
+      left: 110px;
+    }
+
+    .jumbotron-cloud-2 {
+      left: 0;
+      top: 50px;
+      height: 55px;
+    }
+
+    .jumbotron-compo-1 {
+      left: 94px;
+      height: 90px;
+      top: 220px;
+    }
+
+    .jumbotron-compo-2 {
+      right: 73px;
+      top: 60px;
+      height: 124px;
+    }
+
+    .jumbotron-compo-3 {
+      right: 42px;
+      top: 200px;
+      height: 120px;
+    }
+
+    .jumbotron-plant-1 {
+      bottom: 0;
+      left: 30px;
+      height: 185px;
+    }
+
+    .jumbotron-figure-1 {
+      bottom: 0;
+      right: 180px;
+      height: 140px;
+    }
+
+    .jumbotron-figure-2 {
+      bottom: 0;
+      right: 10px;
+      height: 68px;
     }
   }
   .cards {
@@ -114,13 +174,13 @@
       font-size: 14px;
       color: #99a9bf;
       padding: 0 25px;
-      line-height: <%= paraHeight >;
+      line-height: 20px;
     }
     a {
       height: 53px;
       line-height: 52px;
       font-size: 14px;
-      color: #20a0ff;
+      color: #409EFF;
       text-align: center;
       border: 0;
       border-top: 1px solid #eaeefb;
@@ -138,23 +198,20 @@
 
       &:hover {
         color: #fff;
-        background: #20a0ff;
+        background: #409EFF;
       }
     }
     &:hover {
       bottom: 6px;
-      box-shadow: 0px 6px 18px 0px rgba(232,237,250,0.50);
+      box-shadow: 0 6px 18px 0 rgba(232,237,250,0.50);
     }
   }
-  @keyframes blink {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }
   @media (max-width: 1140px) {
     .cards {
       width: 100%;
       .container {
         width: 100%;
+        margin: 0;
       }
     }
     .banner .container {
@@ -172,6 +229,9 @@
         display: none;
       }
     }
+    .jumbotron {
+      display: none;
+    }
   }
 
   @media (max-width: 768px) {
@@ -205,17 +265,52 @@
 <template>
   <div>
     <div class="banner">
-      <div class="banner-sky"></div>
-      <img class="banner-stars" src="~examples/assets/images/stars.png" alt="Element">
-      <div class="container">
-        <div class="banner-desc">
-          <h2><%= 1 ></h2>
-          <div id="line2" class="actor"></div>
-          <p><%= 2 ></p>
-        </div>
-        <img src="~examples/assets/images/banner-bg.svg" alt="Element">
+      <div class="banner-desc">
+        <h1><%= 1 ></h1>
+        <p><%= 2 ></p>
       </div>
     </div>
+    <div class="jumbotron">
+      <div>
+        <img class="jumbotron-plant-2" src="~examples/assets/images/plant-2.png" alt="">
+        <img class="jumbotron-web" src="~examples/assets/images/web.png" alt="">
+        <img class="jumbotron-plant-1" src="~examples/assets/images/plant-1.png" alt="">
+        <img class="jumbotron-figure-1" src="~examples/assets/images/figure-1.png" alt="">
+        <img class="jumbotron-figure-2" src="~examples/assets/images/figure-2.png" alt="">
+      </div>
+      <div data-hover-layer="0">
+        <img class="jumbotron-cloud-1" src="~examples/assets/images/cloud-1.png" alt="">
+        <img class="jumbotron-cloud-2" src="~examples/assets/images/cloud-2.png" alt="">
+      </div>
+      <div data-hover-layer="1">
+        <img class="jumbotron-compo-1" src="~examples/assets/images/compo-1.png" alt="">
+        <img class="jumbotron-compo-2" src="~examples/assets/images/compo-2.png" alt="">
+        <img class="jumbotron-compo-3" src="~examples/assets/images/compo-3.png" alt="">
+      </div>
+    </div>
+    <div class="sponsors">
+      <a class="sponsor" href="https://tipe.io/?ref=element" target="_blank" v-show="lang !== 'zh-CN'">
+        <img width="35px" src="~examples/assets/images/tipe.svg" alt="tipe.io">
+        <div>
+          <p>Sponsored by Tipe.io</p>
+          <p>Next Generation API-first CMS</p>
+        </div>
+      </a>
+      <a class="sponsor" href="https://www.duotai.net/?utm_source=element" target="_blank">
+        <img width="42px" src="~examples/assets/images/duotai.svg" alt="duotai">
+        <div>
+          <p>Sponsored by 多态</p>
+          <p>多元化的数据收集和整理工具</p>
+        </div>
+      </a>
+      <a class="sponsor" href="https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index" target="_blank">
+        <img width="45px" src="~examples/assets/images/duohui.svg" alt="duohui">
+        <div>
+          <p>Sponsored by 多会</p>
+          <p>炫酷的新一代活动票务系统</p>
+        </div>
+      </a>
+    </div>
     <div class="cards">
       <ul class="container">
         <li>
@@ -259,32 +354,27 @@
   </div>
 </template>
 <script>
-  import theaterJS from 'theaterjs';
+  import { Hover } from 'perspective.js';
 
   export default {
+    data() {
+      return {
+        lang: this.$route.meta.lang
+      };
+    },
     mounted() {
-      function typing(theater) {
-        theater
-          <%= typingFunc >
-          .addScene((done) => {
-            typing(theater);
-            done();
-          });
-      }
-      var theater = theaterJS(<%= theatreParam >);
-      theater
-        .on('type:start, erase:start', function() {
-          theater.getCurrentActor().$element.classList.add('typing');
-        })
-        .on('type:end, erase:end', function() {
-          theater.getCurrentActor().$element.classList.remove('typing');
-        });
-      theater
-        <%= typingInvoke >
-        .addScene((done) => {
-          typing(theater);
-          done();
-        });
+      new Hover('.jumbotron', { // eslint-disable-line
+        max: 3,
+        scale: 1,
+        perspective: 700,
+        layers: [{
+          multiple: 0.01,
+          reverseTranslate: true
+        }, {
+          multiple: 0.02,
+          reverseTranslate: true
+        }]
+      });
     }
   };
 </script>
diff --git a/examples/pages/template/resource.tpl b/examples/pages/template/resource.tpl
index 99949d7cff..c88ad76fc1 100644
--- a/examples/pages/template/resource.tpl
+++ b/examples/pages/template/resource.tpl
@@ -2,6 +2,29 @@
   .page-resource {
     padding-top: 55px;
     box-sizing: border-box;
+    
+    .resource-placeholder {
+      margin: 50px auto 100px;
+      text-align: center;
+      
+      img {
+        width: 150px;
+      }
+      
+      h4 {
+        margin: 20px 0 16px;
+        font-size: 16px;
+        color: #1f2f3d;
+        line-height: 1;
+      }
+      
+      p {
+        margin: 0;
+        font-size: 14px;
+        color: #99a9bf;
+        line-height: 1;
+      }
+    }
   }
   .cards {
     margin: 35px auto 110px;
@@ -65,7 +88,7 @@
       display: inline-block;
       line-height: @height;
       font-size: 14px;
-      background-color: #20a0ff;
+      background-color: #409EFF;
       color: #fff;
       text-align: center;
       border: 0;
@@ -98,33 +121,39 @@
 <template>
   <div class="page-container page-resource">
     <h2><%= 1 ></h2>
-    <p><%= 2 ></p>
+    <!--<div class="resource-placeholder">-->
+      <!--<img src="~examples/assets/images/resource-placeholder.svg" alt="">-->
+      <!--<h4><%= placeholder1 ></h4>-->
+      <!--<p><%= placeholder2 ></p>-->
+    <!--</div>-->
+    
+    <p><%= placeholder2 ></p>
     <div class="cards">
       <ul class="container">
-        <li>
-          <div class="card">
-            <img src="~examples/assets/images/Axure-Components.svg" alt="">
-            <h3><%= 3 ></h3>
-            <p><%= 4 ></p>
-            <a href="https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib"><%= 5 ></a>
-          </div>
-        </li>
+        <!--<li>-->
+          <!--<div class="card">-->
+            <!--<img src="~examples/assets/images/Axure-Components.svg" alt="">-->
+            <!--<h3><%= 3 ></h3>-->
+            <!--<p><%= 4 ></p>-->
+            <!--<a href="https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib"><%= 5 ></a>-->
+          <!--</div>-->
+        <!--</li>-->
         <li>
           <div class="card">
             <img src="~examples/assets/images/Sketch-Template.svg" alt="">
             <h3><%= 6 ></h3>
             <p><%= 7 ></p>
-            <a href="https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v1.3.sketch"><%= 5 ></a>
-          </div>
-        </li>
-        <li>
-          <div class="card">
-            <img src="~examples/assets/images/Module.svg" alt="">
-            <h3><%= 8 ></h3>
-            <p><%= 9 ></p>
-            <a href="https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip"><%= 5 ></a>
+            <a href="https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"><%= 5 ></a>
           </div>
         </li>
+        <!--<li>-->
+          <!--<div class="card">-->
+            <!--<img src="~examples/assets/images/Module.svg" alt="">-->
+            <!--<h3><%= 8 ></h3>-->
+            <!--<p><%= 9 ></p>-->
+            <!--<a href="https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip"><%= 5 ></a>-->
+          <!--</div>-->
+        <!--</li>-->
       </ul>
     </div>
   </div>
diff --git a/examples/play.js b/examples/play.js
index e6452bb53a..77f4e92bfb 100644
--- a/examples/play.js
+++ b/examples/play.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import Element from 'main/index.js';
 import App from './play/index.vue';
-import 'packages/theme-default/src/index.css';
+import 'packages/theme-chalk/src/index.scss';
 
 Vue.use(Element);
 
diff --git a/examples/play/component.vue b/examples/play/component.vue
deleted file mode 100644
index 4a257ab762..0000000000
--- a/examples/play/component.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div>
-    <el-button @click="value = '#fff'">Change Value</el-button>
-    <div>Value: {{ value }}</div>
-    <el-color-picker v-model="value"></el-color-picker>
-
-    <div>Value2: {{ value2 }}</div>
-    <el-color-picker v-model="value2" show-alpha></el-color-picker>
-  </div>
-</template>
-
-<style scoped>
-</style>
-
-<script type="text/ecmascript-6">
-  export default {
-    methods: {
-    },
-
-    data() {
-      return {
-        value: '#bfcbd9',
-        value2: null
-      };
-    }
-  };
-</script>
diff --git a/examples/play/index.vue b/examples/play/index.vue
index d0e6856e77..a1b8e0c857 100644
--- a/examples/play/index.vue
+++ b/examples/play/index.vue
@@ -1,14 +1,8 @@
 <template>
   <div style="margin: 20px;">
-    <!-- Write your component in component.vue -->
-    <play-component></play-component>
   </div>
 </template>
 <script>
-  import PlayComponent from './component.vue';
   export default {
-    components: {
-      PlayComponent
-    }
   };
 </script>
diff --git a/examples/route.config.js b/examples/route.config.js
index cbf214491a..d881e896fd 100644
--- a/examples/route.config.js
+++ b/examples/route.config.js
@@ -11,6 +11,11 @@ const LOAD_MAP = {
     return r => require.ensure([], () =>
       r(require(`./pages/en-US/${name}.vue`)),
     'en-US');
+  },
+  'es': name => {
+    return r => require.ensure([], () =>
+      r(require(`./pages/es/${name}.vue`)),
+    'es');
   }
 };
 
@@ -28,6 +33,11 @@ const LOAD_DOCS_MAP = {
     return r => require.ensure([], () =>
       r(require(`./docs/en-US${path}.md`)),
     'en-US');
+  },
+  'es': path => {
+    return r => require.ensure([], () =>
+      r(require(`./docs/es${path}.md`)),
+    'es');
   }
 };
 
@@ -73,7 +83,7 @@ const registerRoute = (navConfig) => {
         description: page.description,
         lang
       },
-      name: 'component-' + (page.title || page.name),
+      name: 'component-' + lang + (page.title || page.name),
       component: component.default || component
     };
 
@@ -134,6 +144,8 @@ let userLanguage = localStorage.getItem('ELEMENT_LANGUAGE') || window.navigator.
 let defaultPath = '/en-US';
 if (userLanguage.indexOf('zh-') !== -1) {
   defaultPath = '/zh-CN';
+} else if (userLanguage.indexOf('es') !== -1) {
+  defaultPath = '/es';
 }
 
 route = route.concat([{
diff --git a/examples/versions.json b/examples/versions.json
index 536b881071..49dcd47ce8 100644
--- a/examples/versions.json
+++ b/examples/versions.json
@@ -1 +1 @@
-{"1.0.9":"1.0","1.1.6":"1.1","1.2.9":"1.2","1.3.7":"1.3","1.4.1":"1.4"}
\ No newline at end of file
+{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.9":"2.4"}
\ No newline at end of file
diff --git a/lerna.json b/lerna.json
deleted file mode 100644
index 6b3c592bb8..0000000000
--- a/lerna.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "lerna": "2.0.0-beta.32",
-  "version": "independent",
-  "publishConfig": {
-    "ignore": [
-      "node_modules",
-      "log.*"
-    ]
-  },
-  "packages": ["packages/carousel", "packages/table", "packages/upload", "packages/date-picker", "packages/loading", "packages/pagination"]
-}
diff --git a/package.json b/package.json
index 7b77d2994e..eafb69adf5 100644
--- a/package.json
+++ b/package.json
@@ -1,32 +1,36 @@
 {
   "name": "element-ui",
-  "version": "1.4.1",
+  "version": "2.4.9",
   "description": "A Component Library for Vue.js.",
   "main": "lib/element-ui.common.js",
   "files": [
     "lib",
     "src",
-    "packages"
+    "packages",
+    "types"
   ],
+  "typings": "types/index.d.ts",
   "scripts": {
     "bootstrap": "yarn || npm i",
     "build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js",
-    "build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-default/gulpfile.js && cp-cli packages/theme-default/lib lib/theme-default",
+    "build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk",
     "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
     "build:umd": "node build/bin/build-locale.js",
-    "clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage && lerna clean --yes",
-    "deploy": "npm run deploy:build && gh-pages -d examples/element-ui --remote eleme && del examples/element-ui",
-    "deploy:build": "npm run build:file && cooking build -c build/cooking.demo.js -p && echo element.eleme.io>>examples/element-ui/CNAME",
-    "dev": "npm run bootstrap && npm run build:file && cooking watch -c build/cooking.demo.js -p",
-    "dev:play": "npm run build:file && cross-env PLAY_ENV=true cooking watch -c build/cooking.demo.js -p",
-    "dist": "npm run clean && npm run build:file && npm run lint && cooking build -c build/cooking.conf.js,build/cooking.common.js,build/cooking.component.js -p && npm run build:utils && npm run build:umd && npm run build:theme",
-    "dist:all": "node build/bin/build-all.js && npm run build:theme",
+    "clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage",
+    "deploy": "npm run deploy:build && gh-pages -d examples/element-ui --remote eleme && rimraf examples/element-ui",
+    "deploy:build": "npm run build:file && cross-env NODE_ENV=production webpack --config build/webpack.demo.js && echo element.eleme.io>>examples/element-ui/CNAME",
+    "dev": "npm run bootstrap && npm run build:file && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js & node build/bin/template.js",
+    "dev:play": "npm run build:file && cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config build/webpack.demo.js",
+    "dist": "npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme",
     "i18n": "node build/bin/i18n.js",
-    "lint": "eslint src/**/* test/**/* packages/**/*.{js,vue} build/**/* --quiet",
-    "pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh",
-    "pub:all": "npm run dist:all && lerna publish --skip-git && git commit -am 'publish independent packages' && git push eleme dev",
-    "test": "npm run lint && cross-env CI_ENV=/dev/ karma start test/unit/karma.conf.js --single-run",
-    "test:watch": "karma start test/unit/karma.conf.js"
+    "lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet",
+    "pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js && sh build/deploy-faas.sh",
+    "test": "npm run lint && npm run build:theme && cross-env CI_ENV=/dev/ karma start test/unit/karma.conf.js --single-run",
+    "test:watch": "npm run build:theme && karma start test/unit/karma.conf.js"
+  },
+  "faas": {
+    "domain": "element",
+    "public": "temp_web/element"
   },
   "repository": {
     "type": "git",
@@ -43,20 +47,23 @@
     "url": "https://github.com/ElemeFE/element/issues"
   },
   "unpkg": "lib/index.js",
-  "style": "lib/theme-default/index.css",
+  "style": "lib/theme-chalk/index.css",
   "dependencies": {
-    "async-validator": "1.6.9",
+    "async-validator": "~1.8.1",
     "babel-helper-vue-jsx-merge-props": "^2.0.0",
     "deepmerge": "^1.2.0",
+    "normalize-wheel": "^1.0.1",
+    "resize-observer-polyfill": "^1.5.0",
     "throttle-debounce": "^1.0.1"
   },
   "peerDependencies": {
-    "vue": "^2.3.0"
+    "vue": "^2.5.2"
   },
   "devDependencies": {
+    "algoliasearch": "^3.24.5",
     "babel-cli": "^6.14.0",
     "babel-core": "^6.14.0",
-    "babel-loader": "^6.2.5",
+    "babel-loader": "^7.1.2",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-module-resolver": "^2.2.0",
     "babel-plugin-syntax-jsx": "^6.8.0",
@@ -64,64 +71,69 @@
     "babel-preset-es2015": "^6.14.0",
     "chai": "^3.5.0",
     "cheerio": "^0.18.0",
-    "cooking": "^1.2.0",
-    "cooking-lint": "^0.1.3",
-    "cooking-vue2": "^0.3.0",
-    "copy-webpack-plugin": "^4.0.1",
+    "chokidar": "^1.7.0",
+    "copy-webpack-plugin": "^4.1.1",
     "coveralls": "^2.11.14",
     "cp-cli": "^1.0.2",
     "cross-env": "^3.1.3",
-    "css-loader": "^0.24.0",
+    "css-loader": "^0.28.7",
     "es6-promise": "^4.0.5",
-    "eslint": "^3.10.2",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "^0.9.0",
+    "eslint": "4.14.0",
+    "eslint-config-elemefe": "0.1.1",
+    "eslint-loader": "^1.9.0",
+    "eslint-plugin-html": "^4.0.1",
+    "eslint-plugin-json": "^1.2.0",
+    "extract-text-webpack-plugin": "^3.0.1",
+    "file-loader": "^1.1.5",
     "file-save": "^0.2.0",
     "gh-pages": "^0.11.0",
     "gulp": "^3.9.1",
+    "gulp-autoprefixer": "^4.0.0",
     "gulp-cssmin": "^0.1.7",
     "gulp-postcss": "^6.1.1",
+    "gulp-sass": "^3.1.0",
     "highlight.js": "^9.3.0",
-    "html-loader": "^0.4.3",
-    "html-webpack-plugin": "^2.22.0",
-    "inject-loader": "^3.0.0-beta2",
+    "html-loader": "^0.5.1",
+    "html-webpack-plugin": "^2.30.1",
+    "inject-loader": "^3.0.1",
     "isparta-loader": "^2.0.0",
-    "json-loader": "^0.5.4",
+    "json-loader": "^0.5.7",
     "json-templater": "^1.0.4",
     "karma": "^1.3.0",
+    "karma-chrome-launcher": "^2.2.0",
     "karma-coverage": "^1.1.1",
     "karma-mocha": "^1.2.0",
-    "karma-phantomjs-launcher": "^1.0.2",
     "karma-sinon-chai": "^1.2.4",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.26",
-    "karma-webpack": "^1.8.0",
-    "lerna": "^2.0.0-beta.32",
+    "karma-webpack": "^3.0.0",
     "lolex": "^1.5.1",
     "markdown-it": "^6.1.1",
     "markdown-it-anchor": "^2.5.0",
     "markdown-it-container": "^2.0.0",
     "mocha": "^3.1.1",
-    "phantomjs-prebuilt": "^2.1.13",
+    "node-sass": "^4.5.3",
+    "perspective.js": "^1.0.0",
     "postcss": "^5.1.2",
-    "postcss-loader": "^0.11.1",
+    "postcss-loader": "0.11.1",
     "postcss-salad": "^1.0.8",
+    "progress-bar-webpack-plugin": "^1.11.0",
     "rimraf": "^2.5.4",
+    "sass-loader": "^6.0.6",
     "sinon": "^1.17.6",
     "sinon-chai": "^2.8.0",
-    "style-loader": "^0.13.1",
-    "theaterjs": "^3.0.0",
+    "style-loader": "^0.19.0",
     "transliteration": "^1.1.11",
     "uppercamelcase": "^1.1.0",
-    "url-loader": "^0.5.7",
-    "vue": "^2.3.0",
-    "vue-loader": "^12.0.2",
-    "vue-markdown-loader": "^0.5.1",
-    "vue-router": "^2.0.0",
-    "vue-template-compiler": "^2.3.0",
-    "vue-template-es2015-compiler": "^1.5.2",
-    "webpack": "^1.13.2",
-    "webpack-dev-server": "^1.15.1",
-    "webpack-node-externals": "^1.5.4"
+    "url-loader": "^0.6.2",
+    "vue": "^2.5.2",
+    "vue-loader": "^13.3.0",
+    "vue-markdown-loader": "1",
+    "vue-router": "2.7.0",
+    "vue-template-compiler": "^2.5.2",
+    "vue-template-es2015-compiler": "^1.6.0",
+    "webpack": "^3.7.1",
+    "webpack-dev-server": "^2.9.1",
+    "webpack-node-externals": "^1.6.0"
   }
 }
diff --git a/packages/alert/src/main.vue b/packages/alert/src/main.vue
index e1d033d9b7..20a529a7de 100644
--- a/packages/alert/src/main.vue
+++ b/packages/alert/src/main.vue
@@ -1,9 +1,16 @@
 <template>
   <transition name="el-alert-fade">
-    <div class="el-alert" :class="[ typeClass ]" v-show="visible">
+    <div
+      class="el-alert"
+      :class="[typeClass, center ? 'is-center' : '']"
+      v-show="visible"
+      role="alert"
+    >
       <i class="el-alert__icon" :class="[ iconClass, isBigIcon ]" v-if="showIcon"></i>
       <div class="el-alert__content">
-        <span class="el-alert__title" :class="[ isBoldTitle ]" v-if="title">{{ title }}</span>
+        <span class="el-alert__title" :class="[ isBoldTitle ]" v-if="title || $slots.title">
+          <slot name="title">{{ title }}</slot>
+        </span>
         <slot>
           <p class="el-alert__description" v-if="description">{{ description }}</p>
         </slot>
@@ -15,9 +22,9 @@
 
 <script type="text/babel">
   const TYPE_CLASSES_MAP = {
-    'success': 'el-icon-circle-check',
+    'success': 'el-icon-success',
     'warning': 'el-icon-warning',
-    'error': 'el-icon-circle-cross'
+    'error': 'el-icon-error'
   };
   export default {
     name: 'ElAlert',
@@ -44,10 +51,8 @@
         type: String,
         default: ''
       },
-      showIcon: {
-        type: Boolean,
-        default: false
-      }
+      showIcon: Boolean,
+      center: Boolean
     },
 
     data() {
@@ -69,15 +74,15 @@
       },
 
       iconClass() {
-        return TYPE_CLASSES_MAP[this.type] || 'el-icon-information';
+        return TYPE_CLASSES_MAP[this.type] || 'el-icon-info';
       },
 
       isBigIcon() {
-        return this.description ? 'is-big' : '';
+        return this.description || this.$slots.default ? 'is-big' : '';
       },
 
       isBoldTitle() {
-        return this.description ? 'is-bold' : '';
+        return this.description || this.$slots.default ? 'is-bold' : '';
       }
     }
   };
diff --git a/packages/aside/index.js b/packages/aside/index.js
new file mode 100644
index 0000000000..530b4f550d
--- /dev/null
+++ b/packages/aside/index.js
@@ -0,0 +1,8 @@
+import Aside from './src/main';
+
+/* istanbul ignore next */
+Aside.install = function(Vue) {
+  Vue.component(Aside.name, Aside);
+};
+
+export default Aside;
diff --git a/packages/aside/src/main.vue b/packages/aside/src/main.vue
new file mode 100644
index 0000000000..3ecb24e647
--- /dev/null
+++ b/packages/aside/src/main.vue
@@ -0,0 +1,20 @@
+<template>
+  <aside class="el-aside" :style="{ width }">
+    <slot></slot>
+  </aside>
+</template>
+
+<script>
+  export default {
+    name: 'ElAside',
+
+    componentName: 'ElAside',
+
+    props: {
+      width: {
+        type: String,
+        default: '300px'
+      }
+    }
+  };
+</script>
diff --git a/packages/autocomplete/src/autocomplete-suggestions.vue b/packages/autocomplete/src/autocomplete-suggestions.vue
index 84b580446a..f492b2ed59 100644
--- a/packages/autocomplete/src/autocomplete-suggestions.vue
+++ b/packages/autocomplete/src/autocomplete-suggestions.vue
@@ -2,33 +2,17 @@
   <transition name="el-zoom-in-top" @after-leave="doDestroy">
     <div
       v-show="showPopper"
-      class="el-autocomplete-suggestion"
-      :class="{ 'is-loading': parent.loading }"
+      class="el-autocomplete-suggestion el-popper"
+      :class="{ 'is-loading': !parent.hideLoading && parent.loading }"
       :style="{ width: dropdownWidth }"
-    >
+      role="region">
       <el-scrollbar
         tag="ul"
         wrap-class="el-autocomplete-suggestion__wrap"
-        view-class="el-autocomplete-suggestion__list"
-      >
-        <li v-if="parent.loading"><i class="el-icon-loading"></i></li>
-        <template v-for="(item, index) in suggestions" v-else>
-          <li
-            v-if="!parent.customItem"
-            :class="{'highlighted': parent.highlightedIndex === index}"
-            @click="select(item)"
-          >
-            {{item[props.label]}}
-          </li>
-          <component
-            v-else
-            :class="{'highlighted': parent.highlightedIndex === index}"
-            @click="select(item)"
-            :is="parent.customItem"
-            :item="item"
-            :index="index">
-          </component>
-        </template>
+        view-class="el-autocomplete-suggestion__list">
+        <li v-if="!parent.hideLoading && parent.loading"><i class="el-icon-loading"></i></li>
+        <slot v-else>
+        </slot>
       </el-scrollbar>
     </div>
   </transition>
@@ -52,16 +36,14 @@
     },
 
     props: {
-      props: Object,
-      suggestions: Array,
       options: {
         default() {
           return {
-            forceAbsolute: true,
             gpuAcceleration: false
           };
         }
-      }
+      },
+      id: String
     },
 
     methods: {
@@ -72,13 +54,16 @@
 
     updated() {
       this.$nextTick(_ => {
-        this.updatePopper();
+        this.popperJS && this.updatePopper();
       });
     },
 
     mounted() {
       this.$parent.popperElm = this.popperElm = this.$el;
       this.referenceElm = this.$parent.$refs.input.$refs.input;
+      this.referenceList = this.$el.querySelector('.el-autocomplete-suggestion__list');
+      this.referenceList.setAttribute('role', 'listbox');
+      this.referenceList.setAttribute('id', this.id);
     },
 
     created() {
diff --git a/packages/autocomplete/src/autocomplete.vue b/packages/autocomplete/src/autocomplete.vue
index 8b02949fbb..59587e623e 100644
--- a/packages/autocomplete/src/autocomplete.vue
+++ b/packages/autocomplete/src/autocomplete.vue
@@ -1,22 +1,22 @@
 <template>
-  <div class="el-autocomplete" v-clickoutside="close">
+  <div
+    class="el-autocomplete"
+    v-clickoutside="close"
+    aria-haspopup="listbox"
+    role="combobox"
+    :aria-expanded="suggestionVisible"
+    :aria-owns="id"
+  >
     <el-input
       ref="input"
-      :value="value"
-      :disabled="disabled"
-      :placeholder="placeholder"
-      :name="name"
-      :size="size"
-      :icon="icon"
-      :on-icon-click="onIconClick"
-      @compositionstart.native="handleComposition"
-      @compositionupdate.native="handleComposition"
-      @compositionend.native="handleComposition"
-      @change="handleChange"
+      v-bind="[$props, $attrs]"
+      @input="handleChange"
       @focus="handleFocus"
+      @blur="handleBlur"
       @keydown.up.native.prevent="highlight(highlightedIndex - 1)"
       @keydown.down.native.prevent="highlight(highlightedIndex + 1)"
-      @keydown.enter.native.prevent="handleKeyEnter"
+      @keydown.enter.native="handleKeyEnter"
+      @keydown.native.tab="close"
     >
       <template slot="prepend" v-if="$slots.prepend">
         <slot name="prepend"></slot>
@@ -24,26 +24,53 @@
       <template slot="append" v-if="$slots.append">
         <slot name="append"></slot>
       </template>
+      <template slot="prefix" v-if="$slots.prefix">
+        <slot name="prefix"></slot>
+      </template>
+      <template slot="suffix" v-if="$slots.suffix">
+        <slot name="suffix"></slot>
+      </template>
     </el-input>
     <el-autocomplete-suggestions
-      :props="props"
+      visible-arrow
       :class="[popperClass ? popperClass : '']"
+      :popper-options="popperOptions"
+      :append-to-body="popperAppendToBody"
       ref="suggestions"
-      :suggestions="suggestions"
-    >
+      :placement="placement"
+      :id="id">
+      <li
+        v-for="(item, index) in suggestions"
+        :key="index"
+        :class="{'highlighted': highlightedIndex === index}"
+        @click="select(item)"
+        :id="`${id}-item-${index}`"
+        role="option"
+        :aria-selected="highlightedIndex === index"
+      >
+        <slot :item="item">
+          {{ item[valueKey] }}
+        </slot>
+      </li>
     </el-autocomplete-suggestions>
   </div>
 </template>
 <script>
+  import debounce from 'throttle-debounce/debounce';
   import ElInput from 'element-ui/packages/input';
   import Clickoutside from 'element-ui/src/utils/clickoutside';
   import ElAutocompleteSuggestions from './autocomplete-suggestions.vue';
   import Emitter from 'element-ui/src/mixins/emitter';
+  import Migrating from 'element-ui/src/mixins/migrating';
+  import { generateId } from 'element-ui/src/utils/util';
+  import Focus from 'element-ui/src/mixins/focus';
 
   export default {
     name: 'ElAutocomplete',
 
-    mixins: [Emitter],
+    mixins: [Emitter, Focus('input'), Migrating],
+
+    inheritAttrs: false,
 
     componentName: 'ElAutocomplete',
 
@@ -55,21 +82,19 @@
     directives: { Clickoutside },
 
     props: {
-      props: {
-        type: Object,
-        default() {
-          return {
-            label: 'value',
-            value: 'value'
-          };
-        }
+      valueKey: {
+        type: String,
+        default: 'value'
       },
       popperClass: String,
+      popperOptions: Object,
       placeholder: String,
       disabled: Boolean,
       name: String,
       size: String,
       value: String,
+      maxlength: Number,
+      minlength: Number,
       autofocus: Boolean,
       fetchSuggestions: Function,
       triggerOnFocus: {
@@ -77,16 +102,34 @@
         default: true
       },
       customItem: String,
-      icon: String,
-      onIconClick: Function
+      selectWhenUnmatched: {
+        type: Boolean,
+        default: false
+      },
+      prefixIcon: String,
+      suffixIcon: String,
+      label: String,
+      debounce: {
+        type: Number,
+        default: 300
+      },
+      placement: {
+        type: String,
+        default: 'bottom-start'
+      },
+      hideLoading: Boolean,
+      popperAppendToBody: {
+        type: Boolean,
+        default: true
+      }
     },
     data() {
       return {
         activated: false,
-        isOnComposition: false,
         suggestions: [],
         loading: false,
-        highlightedIndex: -1
+        highlightedIndex: -1,
+        suggestionDisabled: false
       };
     },
     computed: {
@@ -94,6 +137,9 @@
         const suggestions = this.suggestions;
         let isValidData = Array.isArray(suggestions) && suggestions.length > 0;
         return (isValidData || this.loading) && this.activated;
+      },
+      id() {
+        return `el-autocomplete-${generateId()}`;
       }
     },
     watch: {
@@ -102,57 +148,80 @@
       }
     },
     methods: {
+      getMigratingConfig() {
+        return {
+          props: {
+            'custom-item': 'custom-item is removed, use scoped slot instead.',
+            'props': 'props is removed, use value-key instead.'
+          }
+        };
+      },
       getData(queryString) {
+        if (this.suggestionDisabled) {
+          return;
+        }
         this.loading = true;
         this.fetchSuggestions(queryString, (suggestions) => {
           this.loading = false;
+          if (this.suggestionDisabled) {
+            return;
+          }
           if (Array.isArray(suggestions)) {
             this.suggestions = suggestions;
           } else {
-            console.error('autocomplete suggestions must be an array');
+            console.error('[Element Error][Autocomplete]autocomplete suggestions must be an array');
           }
         });
       },
-      handleComposition(event) {
-        if (event.type === 'compositionend') {
-          this.isOnComposition = false;
-          this.handleChange(this.value);
-        } else {
-          this.isOnComposition = true;
-        }
-      },
       handleChange(value) {
         this.$emit('input', value);
-        if (this.isOnComposition || (!this.triggerOnFocus && !value)) {
+        this.suggestionDisabled = false;
+        if (!this.triggerOnFocus && !value) {
+          this.suggestionDisabled = true;
           this.suggestions = [];
           return;
         }
-        this.getData(value);
+        this.debouncedGetData(value);
       },
-      handleFocus() {
+      handleFocus(event) {
         this.activated = true;
+        this.$emit('focus', event);
         if (this.triggerOnFocus) {
-          this.getData(this.value);
+          this.debouncedGetData(this.value);
         }
       },
+      handleBlur(event) {
+        this.$emit('blur', event);
+      },
       close(e) {
         this.activated = false;
       },
-      handleKeyEnter() {
+      handleKeyEnter(e) {
         if (this.suggestionVisible && this.highlightedIndex >= 0 && this.highlightedIndex < this.suggestions.length) {
+          e.preventDefault();
           this.select(this.suggestions[this.highlightedIndex]);
+        } else if (this.selectWhenUnmatched) {
+          this.$emit('select', {value: this.value});
+          this.$nextTick(_ => {
+            this.suggestions = [];
+            this.highlightedIndex = -1;
+          });
         }
       },
       select(item) {
-        this.$emit('input', item[this.props.value]);
+        this.$emit('input', item[this.valueKey]);
         this.$emit('select', item);
         this.$nextTick(_ => {
           this.suggestions = [];
+          this.highlightedIndex = -1;
         });
       },
       highlight(index) {
         if (!this.suggestionVisible || this.loading) { return; }
-        if (index < 0) index = 0;
+        if (index < 0) {
+          this.highlightedIndex = -1;
+          return;
+        }
         if (index >= this.suggestions.length) {
           index = this.suggestions.length - 1;
         }
@@ -169,14 +238,20 @@
         if (offsetTop < scrollTop) {
           suggestion.scrollTop -= highlightItem.scrollHeight;
         }
-
         this.highlightedIndex = index;
+        this.$el.querySelector('.el-input__inner').setAttribute('aria-activedescendant', `${this.id}-item-${this.highlightedIndex}`);
       }
     },
     mounted() {
+      this.debouncedGetData = debounce(this.debounce, this.getData);
       this.$on('item-click', item => {
         this.select(item);
       });
+      let $input = this.$el.querySelector('.el-input__inner');
+      $input.setAttribute('role', 'textbox');
+      $input.setAttribute('aria-autocomplete', 'list');
+      $input.setAttribute('aria-controls', 'id');
+      $input.setAttribute('aria-activedescendant', `${this.id}-item-${this.highlightedIndex}`);
     },
     beforeDestroy() {
       this.$refs.suggestions.$destroy();
diff --git a/packages/badge/src/main.vue b/packages/badge/src/main.vue
index c527fbaae5..d89e187ed2 100644
--- a/packages/badge/src/main.vue
+++ b/packages/badge/src/main.vue
@@ -3,10 +3,16 @@
     <slot></slot>
     <transition name="el-zoom-in-center">
       <sup
-        v-show="!hidden && ( content || isDot )"
+        v-show="!hidden && (content || content === 0 || isDot)"
         v-text="content"
         class="el-badge__content"
-        :class="{ 'is-fixed': $slots.default, 'is-dot': isDot }">
+        :class="[
+          'el-badge__content--' + type,
+          {
+            'is-fixed': $slots.default,
+            'is-dot': isDot
+          }
+        ]">
       </sup>
     </transition>
   </div>
@@ -20,7 +26,13 @@ export default {
     value: {},
     max: Number,
     isDot: Boolean,
-    hidden: Boolean
+    hidden: Boolean,
+    type: {
+      type: String,
+      validator(val) {
+        return ['primary', 'success', 'warning', 'info', 'danger'].indexOf(val) > -1;
+      }
+    }
   },
 
   computed: {
diff --git a/packages/breadcrumb/src/breadcrumb-item.vue b/packages/breadcrumb/src/breadcrumb-item.vue
index 4130795639..6053da07f5 100644
--- a/packages/breadcrumb/src/breadcrumb-item.vue
+++ b/packages/breadcrumb/src/breadcrumb-item.vue
@@ -1,6 +1,13 @@
 <template>
   <span class="el-breadcrumb__item">
-    <span class="el-breadcrumb__item__inner" ref="link"><slot></slot></span><span class="el-breadcrumb__separator">{{separator}}</span>
+    <span
+      :class="['el-breadcrumb__inner', to ? 'is-link' : '']"
+      ref="link"
+      role="link">
+      <slot></slot>
+    </span>
+    <i v-if="separatorClass" class="el-breadcrumb__separator" :class="separatorClass"></i>
+    <span v-else class="el-breadcrumb__separator" role="presentation">{{separator}}</span>
   </span>
 </template>
 <script>
@@ -12,20 +19,23 @@
     },
     data() {
       return {
-        separator: ''
+        separator: '',
+        separatorClass: ''
       };
     },
+
+    inject: ['elBreadcrumb'],
+
     mounted() {
-      this.separator = this.$parent.separator;
-      var self = this;
-      if (this.to) {
-        let link = this.$refs.link;
-        link.addEventListener('click', _ => {
-          let to = this.to;
-          self.replace ? self.$router.replace(to)
-                       : self.$router.push(to);
-        });
-      }
+      this.separator = this.elBreadcrumb.separator;
+      this.separatorClass = this.elBreadcrumb.separatorClass;
+      const link = this.$refs.link;
+      link.setAttribute('role', 'link');
+      link.addEventListener('click', _ => {
+        const { to, $router } = this;
+        if (!to || !$router) return;
+        this.replace ? $router.replace(to) : $router.push(to);
+      });
     }
   };
 </script>
diff --git a/packages/breadcrumb/src/breadcrumb.vue b/packages/breadcrumb/src/breadcrumb.vue
index eb4738d4bc..c5d0f021ce 100644
--- a/packages/breadcrumb/src/breadcrumb.vue
+++ b/packages/breadcrumb/src/breadcrumb.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="el-breadcrumb">
+  <div class="el-breadcrumb" aria-label="Breadcrumb" role="navigation">
     <slot></slot>
   </div>
 </template>
@@ -11,6 +11,23 @@
       separator: {
         type: String,
         default: '/'
+      },
+      separatorClass: {
+        type: String,
+        default: ''
+      }
+    },
+
+    provide() {
+      return {
+        elBreadcrumb: this
+      };
+    },
+
+    mounted() {
+      const items = this.$el.querySelectorAll('.el-breadcrumb__item');
+      if (items.length) {
+        items[items.length - 1].setAttribute('aria-current', 'page');
       }
     }
   };
diff --git a/packages/button/src/button-group.vue b/packages/button/src/button-group.vue
index e562986a55..5aace90f62 100644
--- a/packages/button/src/button-group.vue
+++ b/packages/button/src/button-group.vue
@@ -4,12 +4,6 @@
   </div>
 </template>
 <script>
-  /**
-   * button
-   * @module components/basic/menu
-   * @desc 用于按钮组
-   * @param {string} label - 名称
-   */
   export default {
     name: 'ElButtonGroup'
   };
diff --git a/packages/button/src/button.vue b/packages/button/src/button.vue
index 8d2803bbbb..3a9c72b910 100644
--- a/packages/button/src/button.vue
+++ b/packages/button/src/button.vue
@@ -1,20 +1,24 @@
 <template>
-  <button :disabled="disabled" class="el-button"
+  <button
+    class="el-button"
     @click="handleClick"
+    :disabled="buttonDisabled || loading"
     :autofocus="autofocus"
     :type="nativeType"
     :class="[
       type ? 'el-button--' + type : '',
-      size ? 'el-button--' + size : '',
+      buttonSize ? 'el-button--' + buttonSize : '',
       {
-        'is-disabled': disabled,
+        'is-disabled': buttonDisabled,
         'is-loading': loading,
-        'is-plain': plain
+        'is-plain': plain,
+        'is-round': round,
+        'is-circle': circle
       }
     ]"
   >
     <i class="el-icon-loading" v-if="loading"></i>
-    <i :class="'el-icon-' + icon" v-if="icon && !loading"></i>
+    <i :class="icon" v-if="icon && !loading"></i>
     <span v-if="$slots.default"><slot></slot></span>
   </button>
 </template>
@@ -22,6 +26,15 @@
   export default {
     name: 'ElButton',
 
+    inject: {
+      elForm: {
+        default: ''
+      },
+      elFormItem: {
+        default: ''
+      }
+    },
+
     props: {
       type: {
         type: String,
@@ -39,7 +52,21 @@
       loading: Boolean,
       disabled: Boolean,
       plain: Boolean,
-      autofocus: Boolean
+      autofocus: Boolean,
+      round: Boolean,
+      circle: Boolean
+    },
+
+    computed: {
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+      buttonSize() {
+        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+      },
+      buttonDisabled() {
+        return this.disabled || (this.elForm || {}).disabled;
+      }
     },
 
     methods: {
diff --git a/packages/card/src/main.vue b/packages/card/src/main.vue
index e678bbfd8f..81e27c1ce3 100644
--- a/packages/card/src/main.vue
+++ b/packages/card/src/main.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="el-card">
+  <div class="el-card" :class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'">
     <div class="el-card__header" v-if="$slots.header || header">
       <slot name="header">{{ header }}</slot>
     </div>
@@ -12,7 +12,12 @@
 <script>
   export default {
     name: 'ElCard',
-
-    props: ['header', 'bodyStyle']
+    props: {
+      header: {},
+      bodyStyle: {},
+      shadow: {
+        type: String
+      }
+    }
   };
 </script>
diff --git a/packages/carousel/_index.js b/packages/carousel/_index.js
deleted file mode 100644
index b92c3ff681..0000000000
--- a/packages/carousel/_index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import ElCarousel from './src/main';
-import ElCarouselItem from './src/item';
-
-/* istanbul ignore next */
-export default function(Vue) {
-  Vue.component(ElCarousel.name, ElCarousel);
-  Vue.component(ElCarouselItem.name, ElCarouselItem);
-};
-
-export { ElCarousel, ElCarouselItem };
diff --git a/packages/carousel/cooking.conf.js b/packages/carousel/cooking.conf.js
deleted file mode 100644
index e2201c661e..0000000000
--- a/packages/carousel/cooking.conf.js
+++ /dev/null
@@ -1,6 +0,0 @@
-var cooking = require('cooking');
-var gen = require('../../build/gen-single-config');
-
-cooking.set(gen(__dirname, 'ElCarousel', '_index.js'));
-
-module.exports = cooking.resolve();
diff --git a/packages/carousel/package.json b/packages/carousel/package.json
deleted file mode 100644
index f96ab9e9e8..0000000000
--- a/packages/carousel/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "name": "element-carousel",
-  "version": "1.0.0",
-  "description": "A carousel component for Vue.js.",
-  "main": "lib/index.js",
-  "keywords": [
-    "element",
-    "vue",
-    "component"
-  ],
-  "repository": "https://github.com/ElemeFE/element/tree/master/packages/carousel",
-  "author": "elemefe",
-  "license": "MIT",
-  "dependencies": {
-    "throttle-debounce": "^1.0.1"
-  }
-}
diff --git a/packages/carousel/src/item.vue b/packages/carousel/src/item.vue
index 76a0d3ee4f..8bfe520f1f 100644
--- a/packages/carousel/src/item.vue
+++ b/packages/carousel/src/item.vue
@@ -6,7 +6,8 @@
       'is-active': active,
       'el-carousel__item--card': $parent.type === 'card',
       'is-in-stage': inStage,
-      'is-hover': hover
+      'is-hover': hover,
+      'is-animating': animating
     }"
     @click="handleItemClick"
     :style="{
@@ -43,7 +44,8 @@
         scale: 1,
         active: false,
         ready: false,
-        inStage: false
+        inStage: false,
+        animating: false
       };
     },
 
@@ -71,9 +73,12 @@
         }
       },
 
-      translateItem(index, activeIndex) {
+      translateItem(index, activeIndex, oldIndex) {
         const parentWidth = this.$parent.$el.offsetWidth;
         const length = this.$parent.items.length;
+        if (this.$parent.type !== 'card' && oldIndex !== undefined) {
+          this.animating = index === activeIndex || index === oldIndex;
+        }
         if (index !== activeIndex && length > 2) {
           index = this.processIndex(index, activeIndex, length);
         }
diff --git a/packages/carousel/src/main.vue b/packages/carousel/src/main.vue
index 9ce59da6a2..f335836499 100644
--- a/packages/carousel/src/main.vue
+++ b/packages/carousel/src/main.vue
@@ -9,6 +9,7 @@
       :style="{ height: height }">
       <transition name="carousel-arrow-left">
         <button
+          type="button"
           v-if="arrow !== 'never'"
           v-show="arrow === 'always' || hover"
           @mouseenter="handleButtonEnter('left')"
@@ -20,6 +21,7 @@
       </transition>
       <transition name="carousel-arrow-right">
         <button
+          type="button"
           v-if="arrow !== 'never'"
           v-show="arrow === 'always' || hover"
           @mouseenter="handleButtonEnter('right')"
@@ -106,7 +108,7 @@ export default {
     },
 
     activeIndex(val, oldVal) {
-      this.resetItemPosition();
+      this.resetItemPosition(oldVal);
       this.$emit('change', val, oldVal);
     },
 
@@ -156,9 +158,9 @@ export default {
       this.items = this.$children.filter(child => child.$options.name === 'ElCarouselItem');
     },
 
-    resetItemPosition() {
+    resetItemPosition(oldIndex) {
       this.items.forEach((item, index) => {
-        item.translateItem(index, this.activeIndex);
+        item.translateItem(index, this.activeIndex, oldIndex);
       });
     },
 
@@ -193,6 +195,7 @@ export default {
         return;
       }
       let length = this.items.length;
+      const oldIndex = this.activeIndex;
       if (index < 0) {
         this.activeIndex = length - 1;
       } else if (index >= length) {
@@ -200,6 +203,9 @@ export default {
       } else {
         this.activeIndex = index;
       }
+      if (oldIndex === this.activeIndex) {
+        this.resetItemPosition(oldIndex);
+      }
     },
 
     prev() {
diff --git a/packages/cascader/cooking.conf.js b/packages/cascader/cooking.conf.js
deleted file mode 100644
index 3bbec53def..0000000000
--- a/packages/cascader/cooking.conf.js
+++ /dev/null
@@ -1,18 +0,0 @@
-var cooking = require('cooking');
-var path = require('path');
-var config = require('../../build/config');
-
-cooking.set({
-  entry: {
-    index: path.join(__dirname, 'index.js')
-  },
-  dist: path.join(__dirname, 'lib'),
-  template: false,
-  format: 'umd',
-  moduleName: 'ElCascader',
-  extends: ['vue2'],
-  alias: config.alias,
-  externals: { vue: config.vue }
-});
-
-module.exports = cooking.resolve();
diff --git a/packages/cascader/package.json b/packages/cascader/package.json
deleted file mode 100644
index 65e1961f9e..0000000000
--- a/packages/cascader/package.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "name": "element-cascader",
-  "version": "0.0.0",
-  "description": "A cascader component for Vue.js.",
-  "keywords": [
-    "element",
-    "vue",
-    "component"
-  ],
-  "main": "./lib/index.js",
-  "repository": "https://github.com/ElemeFE/element/tree/master/packages/cascader",
-  "author": "elemefe",
-  "license": "MIT",
-  "dependencies": {}
-}
diff --git a/packages/cascader/src/main.vue b/packages/cascader/src/main.vue
index 670944df64..65d8dbfa99 100644
--- a/packages/cascader/src/main.vue
+++ b/packages/cascader/src/main.vue
@@ -4,27 +4,35 @@
     :class="[
       {
         'is-opened': menuVisible,
-        'is-disabled': disabled
+        'is-disabled': cascaderDisabled
       },
-      size ? 'el-cascader--' + size : ''
+      cascaderSize ? 'el-cascader--' + cascaderSize : ''
     ]"
     @click="handleClick"
     @mouseenter="inputHover = true"
+    @focus="inputHover = true"
     @mouseleave="inputHover = false"
+    @blur="inputHover = false"
     ref="reference"
     v-clickoutside="handleClickoutside"
+    @keydown="handleKeydown"
   >
     <el-input
       ref="input"
-      :readonly="!filterable"
+      :readonly="readonly"
       :placeholder="currentLabels.length ? undefined : placeholder"
       v-model="inputValue"
-      @change="debouncedInputChange"
+      @input="debouncedInputChange"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @compositionstart.native="handleComposition"
+      @compositionend.native="handleComposition"
       :validate-event="false"
       :size="size"
-      :disabled="disabled"
+      :disabled="cascaderDisabled"
+      :class="{ 'is-focus': menuVisible }"
     >
-      <template slot="icon">
+      <template slot="suffix">
         <i
           key="1"
           v-if="clearable && inputHover && currentLabels.length"
@@ -34,16 +42,16 @@
         <i
           key="2"
           v-else
-          class="el-input__icon el-icon-caret-bottom"
+          class="el-input__icon el-icon-arrow-down"
           :class="{ 'is-reverse': menuVisible }"
         ></i>
       </template>
     </el-input>
-    <span class="el-cascader__label" v-show="inputValue === ''">
+    <span class="el-cascader__label" v-show="inputValue === '' && !isOnComposition">
       <template v-if="showAllLevels">
         <template v-for="(label, index) in currentLabels">
           {{ label }}
-          <span v-if="index < currentLabels.length - 1"> / </span>
+          <span v-if="index < currentLabels.length - 1" :key="index"> {{ separator }} </span>
         </template>
       </template>
       <template v-else>
@@ -63,6 +71,7 @@ import emitter from 'element-ui/src/mixins/emitter';
 import Locale from 'element-ui/src/mixins/locale';
 import { t } from 'element-ui/src/locale';
 import debounce from 'throttle-debounce/debounce';
+import { generateId, escapeRegexpString, isIE, isEdge } from 'element-ui/src/utils/util';
 
 const popperMixin = {
   props: {
@@ -71,6 +80,7 @@ const popperMixin = {
       default: 'bottom-start'
     },
     appendToBody: Popper.props.appendToBody,
+    arrowOffset: Popper.props.arrowOffset,
     offset: Popper.props.offset,
     boundariesPadding: Popper.props.boundariesPadding,
     popperOptions: Popper.props.popperOptions
@@ -87,6 +97,15 @@ export default {
 
   mixins: [popperMixin, emitter, Locale],
 
+  inject: {
+    elForm: {
+      default: ''
+    },
+    elFormItem: {
+      default: ''
+    }
+  },
+
   components: {
     ElInput
   },
@@ -113,6 +132,10 @@ export default {
         return [];
       }
     },
+    separator: {
+      type: String,
+      default: '/'
+    },
     placeholder: {
       type: String,
       default() {
@@ -143,6 +166,10 @@ export default {
     beforeFilter: {
       type: Function,
       default: () => (() => {})
+    },
+    hoverThreshold: {
+      type: Number,
+      default: 500
     }
   },
 
@@ -154,7 +181,10 @@ export default {
       menuVisible: false,
       inputHover: false,
       inputValue: '',
-      flatOptions: null
+      flatOptions: null,
+      id: generateId(),
+      needFocus: true,
+      isOnComposition: false
     };
   },
 
@@ -168,6 +198,9 @@ export default {
     childrenKey() {
       return this.props.children || 'children';
     },
+    disabledKey() {
+      return this.props.disabled || 'disabled';
+    },
     currentLabels() {
       let options = this.options;
       let labels = [];
@@ -179,11 +212,24 @@ export default {
         }
       });
       return labels;
+    },
+    _elFormItemSize() {
+      return (this.elFormItem || {}).elFormItemSize;
+    },
+    cascaderSize() {
+      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+    },
+    cascaderDisabled() {
+      return this.disabled || (this.elForm || {}).disabled;
+    },
+    readonly() {
+      return !this.filterable || (!isIE() && !isEdge() && !this.menuVisible);
     }
   },
 
   watch: {
     menuVisible(value) {
+      this.$refs.input.$refs.input.setAttribute('aria-expanded', value);
       value ? this.showMenu() : this.hideMenu();
     },
     value(value) {
@@ -192,6 +238,10 @@ export default {
     currentValue(value) {
       this.dispatch('ElFormItem', 'el.form.change', [value]);
     },
+    currentLabels(value) {
+      const inputLabel = this.showAllLevels ? value.join('/') : value[value.length - 1] ;
+      this.$refs.input.$refs.input.setAttribute('value', inputLabel);
+    },
     options: {
       deep: true,
       handler(value) {
@@ -212,10 +262,13 @@ export default {
       this.menu.expandTrigger = this.expandTrigger;
       this.menu.changeOnSelect = this.changeOnSelect;
       this.menu.popperClass = this.popperClass;
+      this.menu.hoverThreshold = this.hoverThreshold;
       this.popperElm = this.menu.$el;
+      this.menu.$refs.menus[0].setAttribute('id', `cascader-menu-${this.id}`);
       this.menu.$on('pick', this.handlePick);
       this.menu.$on('activeItemChange', this.handleActiveItemChange);
       this.menu.$on('menuLeave', this.doDestroy);
+      this.menu.$on('closeInside', this.handleClickoutside);
     },
     showMenu() {
       if (!this.menu) {
@@ -233,6 +286,11 @@ export default {
     hideMenu() {
       this.inputValue = '';
       this.menu.visible = false;
+      if (this.needFocus) {
+        this.$refs.input.focus();
+      } else {
+        this.needFocus = true;
+      }
     },
     handleActiveItemChange(value) {
       this.$nextTick(_ => {
@@ -240,6 +298,23 @@ export default {
       });
       this.$emit('active-item-change', value);
     },
+    handleKeydown(e) {
+      const keyCode = e.keyCode;
+      if (keyCode === 13) {
+        this.handleClick();
+      } else if (keyCode === 40) { // down
+        this.menuVisible = true; // 打开
+        setTimeout(() => {
+          const firstMenu = this.popperElm.querySelectorAll('.el-cascader-menu')[0];
+          firstMenu.querySelectorAll("[tabindex='-1']")[0].focus();
+        });
+        e.stopPropagation();
+        e.preventDefault();
+      } else if (keyCode === 27 || keyCode === 9) { // esc  tab
+        this.inputValue = '';
+        if (this.menu) this.menu.visible = false;
+      }
+    },
     handlePick(value, close = true) {
       this.currentValue = value;
       this.$emit('input', value);
@@ -262,7 +337,8 @@ export default {
       }
 
       let filteredFlatOptions = flatOptions.filter(optionsStack => {
-        return optionsStack.some(option => new RegExp(value, 'i').test(option[this.labelKey]));
+        return optionsStack.some(option => new RegExp(escapeRegexpString(value), 'i')
+          .test(option[this.labelKey]));
       });
 
       if (filteredFlatOptions.length > 0) {
@@ -270,7 +346,8 @@ export default {
           return {
             __IS__FLAT__OPTIONS: true,
             value: optionStack.map(item => item[this.valueKey]),
-            label: this.renderFilteredOptionLabel(value, optionStack)
+            label: this.renderFilteredOptionLabel(value, optionStack),
+            disabled: optionStack.some(item => item[this.disabledKey])
           };
         });
       } else {
@@ -320,17 +397,29 @@ export default {
       ev.stopPropagation();
       this.handlePick([], true);
     },
-    handleClickoutside() {
+    handleClickoutside(pickFinished = false) {
+      if (this.menuVisible && !pickFinished) {
+        this.needFocus = false;
+      }
       this.menuVisible = false;
     },
     handleClick() {
-      if (this.disabled) return;
+      if (this.cascaderDisabled) return;
+      this.$refs.input.focus();
       if (this.filterable) {
         this.menuVisible = true;
-        this.$refs.input.$refs.input.focus();
         return;
       }
       this.menuVisible = !this.menuVisible;
+    },
+    handleFocus(event) {
+      this.$emit('focus', event);
+    },
+    handleBlur(event) {
+      this.$emit('blur', event);
+    },
+    handleComposition(event) {
+      this.isOnComposition = event.type !== 'compositionend';
     }
   },
 
diff --git a/packages/cascader/src/menu.vue b/packages/cascader/src/menu.vue
index 8f14be8977..511a0d9e04 100644
--- a/packages/cascader/src/menu.vue
+++ b/packages/cascader/src/menu.vue
@@ -1,6 +1,31 @@
 <script>
   import { isDef } from 'element-ui/src/utils/shared';
   import scrollIntoView from 'element-ui/src/utils/scroll-into-view';
+  import { generateId } from 'element-ui/src/utils/util';
+
+  const copyArray = (arr, props) => {
+    if (!arr || !Array.isArray(arr) || !props) return arr;
+    const result = [];
+    const configurableProps = ['__IS__FLAT__OPTIONS', 'label', 'value', 'disabled'];
+    const childrenProp = props.children || 'children';
+    arr.forEach(item => {
+      const itemCopy = {};
+      configurableProps.forEach(prop => {
+        let name = props[prop];
+        let value = item[name];
+        if (value === undefined) {
+          name = prop;
+          value = item[name];
+        }
+        if (value !== undefined) itemCopy[name] = value;
+      });
+      if (Array.isArray(item[childrenProp])) {
+        itemCopy[childrenProp] = copyArray(item[childrenProp], props);
+      }
+      result.push(itemCopy);
+    });
+    return result;
+  };
 
   export default {
     name: 'ElCascaderMenu',
@@ -15,7 +40,10 @@
         value: [],
         expandTrigger: 'click',
         changeOnSelect: false,
-        popperClass: ''
+        popperClass: '',
+        hoverTimer: 0,
+        clicking: false,
+        id: generateId()
       };
     },
 
@@ -45,7 +73,7 @@
               if (option.__IS__FLAT__OPTIONS) return;
               configurableProps.forEach(prop => {
                 const value = option[this.props[prop] || prop];
-                if (value) option[prop] = value;
+                if (value !== undefined) option[prop] = value;
               });
               if (Array.isArray(option.children)) {
                 formatOptions(option.children);
@@ -66,8 +94,9 @@
             return activeOptions;
           };
 
-          formatOptions(this.options);
-          return loadActiveOptions(this.options);
+          const optionsCopy = copyArray(this.options, this.props);
+          formatOptions(optionsCopy);
+          return loadActiveOptions(optionsCopy);
         }
       }
     },
@@ -81,7 +110,7 @@
         } else {
           this.activeValue = [item.value];
         }
-        this.$emit('pick', this.activeValue);
+        this.$emit('pick', this.activeValue.slice());
       },
       handleMenuLeave() {
         this.$emit('menuLeave');
@@ -91,7 +120,7 @@
         this.activeValue.splice(menuIndex, len, item.value);
         this.activeOptions.splice(menuIndex + 1, len, item.children);
         if (this.changeOnSelect) {
-          this.$emit('pick', this.activeValue, false);
+          this.$emit('pick', this.activeValue.slice(), false);
         } else {
           this.$emit('activeItemChange', this.activeValue);
         }
@@ -110,11 +139,43 @@
         activeOptions,
         visible,
         expandTrigger,
-        popperClass
+        popperClass,
+        hoverThreshold
       } = this;
+      let itemId = null;
+      let itemIndex = 0;
+
+      let hoverMenuRefs = {};
+      const hoverMenuHandler = e => {
+        const activeMenu = hoverMenuRefs.activeMenu;
+        if (!activeMenu) return;
+        const offsetX = e.offsetX;
+        const width = activeMenu.offsetWidth;
+        const height = activeMenu.offsetHeight;
+
+        if (e.target === hoverMenuRefs.activeItem) {
+          clearTimeout(this.hoverTimer);
+          const {activeItem} = hoverMenuRefs;
+          const offsetY_top = activeItem.offsetTop;
+          const offsetY_Bottom = offsetY_top + activeItem.offsetHeight;
+
+          hoverMenuRefs.hoverZone.innerHTML = `
+            <path style="pointer-events: auto;" fill="transparent" d="M${offsetX} ${offsetY_top} L${width} 0 V${offsetY_top} Z" />
+            <path style="pointer-events: auto;" fill="transparent" d="M${offsetX} ${offsetY_Bottom} L${width} ${height} V${offsetY_Bottom} Z" />
+          `;
+        } else {
+          if (!this.hoverTimer) {
+            this.hoverTimer = setTimeout(() => {
+              hoverMenuRefs.hoverZone.innerHTML = '';
+            }, hoverThreshold);
+          }
+        }
+      };
 
       const menus = this._l(activeOptions, (menu, menuIndex) => {
         let isFlat = false;
+        const menuId = `menu-${this.id}-${ menuIndex}`;
+        const ownsId = `menu-${this.id}-${ menuIndex + 1 }`;
         const items = this._l(menu, item => {
           const events = {
             on: {}
@@ -123,18 +184,78 @@
           if (item.__IS__FLAT__OPTIONS) isFlat = true;
 
           if (!item.disabled) {
+            // keydown up/down/left/right/enter
+            events.on.keydown = (ev) => {
+              const keyCode = ev.keyCode;
+              if ([37, 38, 39, 40, 13, 9, 27].indexOf(keyCode) < 0) {
+                return;
+              }
+              const currentEle = ev.target;
+              const parentEle = this.$refs.menus[menuIndex];
+              const menuItemList = parentEle.querySelectorAll("[tabindex='-1']");
+              const currentIndex = Array.prototype.indexOf.call(menuItemList, currentEle); // 当前索引
+              let nextIndex, nextMenu;
+              if ([38, 40].indexOf(keyCode) > -1) {
+                if (keyCode === 38) { // up键
+                  nextIndex = currentIndex !== 0 ? (currentIndex - 1) : currentIndex;
+                } else if (keyCode === 40) { // down
+                  nextIndex = currentIndex !== (menuItemList.length - 1) ? currentIndex + 1 : currentIndex;
+                }
+                menuItemList[nextIndex].focus();
+              } else if (keyCode === 37) { // left键
+                if (menuIndex !== 0) {
+                  const previousMenu = this.$refs.menus[menuIndex - 1];
+                  previousMenu.querySelector('[aria-expanded=true]').focus();
+                }
+              } else if (keyCode === 39) { // right
+                if (item.children) {
+                  // 有子menu 选择子menu的第一个menuitem
+                  nextMenu = this.$refs.menus[menuIndex + 1];
+                  nextMenu.querySelectorAll("[tabindex='-1']")[0].focus();
+                }
+              } else if (keyCode === 13) {
+                if (!item.children) {
+                  const id = currentEle.getAttribute('id');
+                  parentEle.setAttribute('aria-activedescendant', id);
+                  this.select(item, menuIndex);
+                  this.$nextTick(() => this.scrollMenu(this.$refs.menus[menuIndex]));
+                }
+              } else if (keyCode === 9 || keyCode === 27) { // esc tab
+                this.$emit('closeInside');
+              }
+            };
             if (item.children) {
               let triggerEvent = {
                 click: 'click',
                 hover: 'mouseenter'
               }[expandTrigger];
-              events.on[triggerEvent] = () => {
-                this.activeItem(item, menuIndex);
-                this.$nextTick(() => {
-                  // adjust self and next level
-                  this.scrollMenu(this.$refs.menus[menuIndex]);
-                  this.scrollMenu(this.$refs.menus[menuIndex + 1]);
-                });
+              const triggerHandler = () => {
+                if (this.visible) {
+                  this.activeItem(item, menuIndex);
+                  this.$nextTick(() => {
+                    // adjust self and next level
+                    this.scrollMenu(this.$refs.menus[menuIndex]);
+                    this.scrollMenu(this.$refs.menus[menuIndex + 1]);
+                  });
+                }
+              };
+              events.on[triggerEvent] = triggerHandler;
+              if (triggerEvent === 'mouseenter' && this.changeOnSelect) {
+                events.on.click = () => {
+                  if (this.activeValue.indexOf(item.value) !== -1) {
+                    this.$emit('closeInside', true);
+                  }
+                };
+              }
+              events.on['mousedown'] = () => {
+                this.clicking = true;
+              };
+              events.on['focus'] = () => { // focus 选中
+                if (this.clicking) {
+                  this.clicking = false;
+                  return;
+                }
+                triggerHandler();
               };
             } else {
               events.on.click = () => {
@@ -143,7 +264,10 @@
               };
             }
           }
-
+          if (!item.disabled && !item.children) { // no children set id
+            itemId = `${menuId}-${itemIndex}`;
+            itemIndex++;
+          }
           return (
             <li
               class={{
@@ -152,7 +276,14 @@
                 'is-active': item.value === activeValue[menuIndex],
                 'is-disabled': item.disabled
               }}
+              ref={item.value === activeValue[menuIndex] ? 'activeItem' : null}
               {...events}
+              tabindex= { item.disabled ? null : -1 }
+              role="menuitem"
+              aria-haspopup={ !!item.children }
+              aria-expanded={ item.value === activeValue[menuIndex] }
+              id = { itemId }
+              aria-owns = { !item.children ? null : ownsId }
             >
               {item.label}
             </li>
@@ -163,29 +294,79 @@
           menuStyle.minWidth = this.inputWidth + 'px';
         }
 
+        const isHoveredMenu = expandTrigger === 'hover' && activeValue.length - 1 === menuIndex;
+        const hoverMenuEvent = {
+          on: {
+          }
+        };
+
+        if (isHoveredMenu) {
+          hoverMenuEvent.on.mousemove = hoverMenuHandler;
+          menuStyle.position = 'relative';
+        }
+
         return (
           <ul
             class={{
               'el-cascader-menu': true,
               'el-cascader-menu--flexible': isFlat
             }}
+            {...hoverMenuEvent}
             style={menuStyle}
             refInFor
-            ref="menus">
+            ref="menus"
+            role="menu"
+            id = { menuId }
+          >
             {items}
+            {
+              isHoveredMenu
+                ? (<svg
+                  ref="hoverZone"
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    height: '100%',
+                    width: '100%',
+                    left: 0,
+                    pointerEvents: 'none'
+                  }}
+                ></svg>) : null
+            }
           </ul>
         );
       });
+
+      if (expandTrigger === 'hover') {
+        this.$nextTick(() => {
+          const activeItem = this.$refs.activeItem;
+
+          if (activeItem) {
+            const activeMenu = activeItem.parentElement;
+            const hoverZone = this.$refs.hoverZone;
+
+            hoverMenuRefs = {
+              activeMenu,
+              activeItem,
+              hoverZone
+            };
+          } else {
+            hoverMenuRefs = {};
+          }
+        });
+      }
+
       return (
         <transition name="el-zoom-in-top" on-before-enter={this.handleMenuEnter} on-after-leave={this.handleMenuLeave}>
           <div
             v-show={visible}
             class={[
-              'el-cascader-menus',
+              'el-cascader-menus el-popper',
               popperClass
             ]}
             ref="wrapper"
           >
+            <div x-arrow class="popper__arrow"></div>
             {menus}
           </div>
         </transition>
diff --git a/packages/checkbox/src/checkbox-button.vue b/packages/checkbox/src/checkbox-button.vue
index e96a848d52..61fc1d617d 100644
--- a/packages/checkbox/src/checkbox-button.vue
+++ b/packages/checkbox/src/checkbox-button.vue
@@ -3,17 +3,20 @@
     class="el-checkbox-button"
       :class="[
         size ? 'el-checkbox-button--' + size : '',
-        { 'is-disabled': disabled },
+        { 'is-disabled': isDisabled },
         { 'is-checked': isChecked },
         { 'is-focus': focus },
       ]"
+    role="checkbox"
+    :aria-checked="isChecked"
+    :aria-disabled="isDisabled"
     >
     <input
       v-if="trueLabel || falseLabel"
       class="el-checkbox-button__original"
       type="checkbox"
       :name="name"
-      :disabled="disabled"
+      :disabled="isDisabled"
       :true-value="trueLabel"
       :false-value="falseLabel"
       v-model="model"
@@ -25,7 +28,7 @@
       class="el-checkbox-button__original"
       type="checkbox"
       :name="name"
-      :disabled="disabled"
+      :disabled="isDisabled"
       :value="label"
       v-model="model"
       @change="handleChange"
@@ -48,10 +51,20 @@
 
     mixins: [Emitter],
 
+    inject: {
+      elForm: {
+        default: ''
+      },
+      elFormItem: {
+        default: ''
+      }
+    },
+
     data() {
       return {
         selfModel: false,
-        focus: false
+        focus: false,
+        isLimitExceeded: false
       };
     },
 
@@ -69,21 +82,21 @@
         get() {
           return this._checkboxGroup
             ? this.store : this.value !== undefined
-            ? this.value : this.selfModel;
+              ? this.value : this.selfModel;
         },
 
         set(val) {
           if (this._checkboxGroup) {
-            let isLimitExceeded = false;
+            this.isLimitExceeded = false;
             (this._checkboxGroup.min !== undefined &&
               val.length < this._checkboxGroup.min &&
-              (isLimitExceeded = true));
+              (this.isLimitExceeded = true));
 
             (this._checkboxGroup.max !== undefined &&
               val.length > this._checkboxGroup.max &&
-              (isLimitExceeded = true));
+              (this.isLimitExceeded = true));
 
-            isLimitExceeded === false &&
+            this.isLimitExceeded === false &&
             this.dispatch('ElCheckboxGroup', 'input', [val]);
           } else if (this.value !== undefined) {
             this.$emit('input', val);
@@ -129,8 +142,18 @@
         };
       },
 
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+
       size() {
-        return this._checkboxGroup.size;
+        return this._checkboxGroup.checkboxGroupSize || this._elFormItemSize || (this.$ELEMENT || {}).size;
+      },
+
+      isDisabled() {
+        return this._checkboxGroup
+          ? this._checkboxGroup.disabled || this.disabled || (this.elForm || {}).disabled
+          : this.disabled || (this.elForm || {}).disabled;
       }
     },
     methods: {
@@ -145,12 +168,19 @@
         }
       },
       handleChange(ev) {
-        this.$emit('change', ev);
-        if (this._checkboxGroup) {
-          this.$nextTick(_ => {
-            this.dispatch('ElCheckboxGroup', 'change', [this._checkboxGroup.value]);
-          });
+        if (this.isLimitExceeded) return;
+        let value;
+        if (ev.target.checked) {
+          value = this.trueLabel === undefined ? true : this.trueLabel;
+        } else {
+          value = this.falseLabel === undefined ? false : this.falseLabel;
         }
+        this.$emit('change', value, ev);
+        this.$nextTick(() => {
+          if (this._checkboxGroup) {
+            this.dispatch('ElCheckboxGroup', 'change', [this._checkboxGroup.value]);
+          }
+        });
       }
     },
 
diff --git a/packages/checkbox/src/checkbox-group.vue b/packages/checkbox/src/checkbox-group.vue
index 4e4835473c..9585e980af 100644
--- a/packages/checkbox/src/checkbox-group.vue
+++ b/packages/checkbox/src/checkbox-group.vue
@@ -8,8 +8,15 @@
 
     mixins: [Emitter],
 
+    inject: {
+      elFormItem: {
+        default: ''
+      }
+    },
+
     props: {
       value: {},
+      disabled: Boolean,
       min: Number,
       max: Number,
       size: String,
@@ -17,6 +24,15 @@
       textColor: String
     },
 
+    computed: {
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+      checkboxGroupSize() {
+        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+      }
+    },
+
     watch: {
       value(value) {
         this.dispatch('ElFormItem', 'el.form.change', [value]);
@@ -26,7 +42,7 @@
 </script>
 
 <template>
-  <div class="el-checkbox-group">
+  <div class="el-checkbox-group" role="group" aria-label="checkbox-group">
     <slot></slot>
   </div>
 </template>
diff --git a/packages/checkbox/src/checkbox.vue b/packages/checkbox/src/checkbox.vue
index 02a9931d09..f30f4b2d66 100644
--- a/packages/checkbox/src/checkbox.vue
+++ b/packages/checkbox/src/checkbox.vue
@@ -1,20 +1,34 @@
 <template>
-  <label class="el-checkbox">
+  <label
+    class="el-checkbox"
+    :class="[
+      border && checkboxSize ? 'el-checkbox--' + checkboxSize : '',
+      { 'is-disabled': isDisabled },
+      { 'is-bordered': border },
+      { 'is-checked': isChecked }
+    ]"
+    role="checkbox"
+    :aria-checked="indeterminate ? 'mixed': isChecked"
+    :aria-disabled="isDisabled"
+    :id="id"
+  >
     <span class="el-checkbox__input"
       :class="{
-        'is-disabled': disabled,
+        'is-disabled': isDisabled,
         'is-checked': isChecked,
         'is-indeterminate': indeterminate,
         'is-focus': focus
       }"
+       aria-checked="mixed"
     >
       <span class="el-checkbox__inner"></span>
       <input
         v-if="trueLabel || falseLabel"
         class="el-checkbox__original"
         type="checkbox"
+        aria-hidden="true"
         :name="name"
-        :disabled="disabled"
+        :disabled="isDisabled"
         :true-value="trueLabel"
         :false-value="falseLabel"
         v-model="model"
@@ -25,7 +39,8 @@
         v-else
         class="el-checkbox__original"
         type="checkbox"
-        :disabled="disabled"
+        aria-hidden="true"
+        :disabled="isDisabled"
         :value="label"
         :name="name"
         v-model="model"
@@ -47,12 +62,22 @@
 
     mixins: [Emitter],
 
+    inject: {
+      elForm: {
+        default: ''
+      },
+      elFormItem: {
+        default: ''
+      }
+    },
+
     componentName: 'ElCheckbox',
 
     data() {
       return {
         selfModel: false,
-        focus: false
+        focus: false,
+        isLimitExceeded: false
       };
     },
 
@@ -61,21 +86,21 @@
         get() {
           return this.isGroup
             ? this.store : this.value !== undefined
-            ? this.value : this.selfModel;
+              ? this.value : this.selfModel;
         },
 
         set(val) {
           if (this.isGroup) {
-            let isLimitExceeded = false;
+            this.isLimitExceeded = false;
             (this._checkboxGroup.min !== undefined &&
               val.length < this._checkboxGroup.min &&
-              (isLimitExceeded = true));
+              (this.isLimitExceeded = true));
 
             (this._checkboxGroup.max !== undefined &&
               val.length > this._checkboxGroup.max &&
-              (isLimitExceeded = true));
+              (this.isLimitExceeded = true));
 
-            isLimitExceeded === false &&
+            this.isLimitExceeded === false &&
             this.dispatch('ElCheckboxGroup', 'input', [val]);
           } else {
             this.$emit('input', val);
@@ -109,6 +134,23 @@
 
       store() {
         return this._checkboxGroup ? this._checkboxGroup.value : this.value;
+      },
+
+      isDisabled() {
+        return this.isGroup
+          ? this._checkboxGroup.disabled || this.disabled || (this.elForm || {}).disabled
+          : this.disabled || (this.elForm || {}).disabled;
+      },
+
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+
+      checkboxSize() {
+        const temCheckboxSize = this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+        return this.isGroup
+          ? this._checkboxGroup.checkboxGroupSize || temCheckboxSize
+          : temCheckboxSize;
       }
     },
 
@@ -120,7 +162,11 @@
       checked: Boolean,
       name: String,
       trueLabel: [String, Number],
-      falseLabel: [String, Number]
+      falseLabel: [String, Number],
+      id: String, /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/
+      controls: String, /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/
+      border: Boolean,
+      size: String
     },
 
     methods: {
@@ -135,17 +181,35 @@
         }
       },
       handleChange(ev) {
-        this.$emit('change', ev);
-        if (this.isGroup) {
-          this.$nextTick(_ => {
-            this.dispatch('ElCheckboxGroup', 'change', [this._checkboxGroup.value]);
-          });
+        if (this.isLimitExceeded) return;
+        let value;
+        if (ev.target.checked) {
+          value = this.trueLabel === undefined ? true : this.trueLabel;
+        } else {
+          value = this.falseLabel === undefined ? false : this.falseLabel;
         }
+        this.$emit('change', value, ev);
+        this.$nextTick(() => {
+          if (this.isGroup) {
+            this.dispatch('ElCheckboxGroup', 'change', [this._checkboxGroup.value]);
+          }
+        });
       }
     },
 
     created() {
       this.checked && this.addToStore();
+    },
+    mounted() { // 为indeterminate元素 添加aria-controls 属性
+      if (this.indeterminate) {
+        this.$el.setAttribute('aria-controls', this.controls);
+      }
+    },
+
+    watch: {
+      value(value) {
+        this.dispatch('ElFormItem', 'el.form.change', value);
+      }
     }
   };
 </script>
diff --git a/packages/col/src/col.js b/packages/col/src/col.js
index 6a312c1ac5..0fb75eb994 100644
--- a/packages/col/src/col.js
+++ b/packages/col/src/col.js
@@ -16,7 +16,8 @@ export default {
     xs: [Number, Object],
     sm: [Number, Object],
     md: [Number, Object],
-    lg: [Number, Object]
+    lg: [Number, Object],
+    xl: [Number, Object]
   },
 
   computed: {
@@ -38,16 +39,16 @@ export default {
     }
 
     ['span', 'offset', 'pull', 'push'].forEach(prop => {
-      if (this[prop]) {
+      if (this[prop] || this[prop] === 0) {
         classList.push(
           prop !== 'span'
-          ? `el-col-${prop}-${this[prop]}`
-          : `el-col-${this[prop]}`
+            ? `el-col-${prop}-${this[prop]}`
+            : `el-col-${this[prop]}`
         );
       }
     });
 
-    ['xs', 'sm', 'md', 'lg'].forEach(size => {
+    ['xs', 'sm', 'md', 'lg', 'xl'].forEach(size => {
       if (typeof this[size] === 'number') {
         classList.push(`el-col-${size}-${this[size]}`);
       } else if (typeof this[size] === 'object') {
@@ -55,8 +56,8 @@ export default {
         Object.keys(props).forEach(prop => {
           classList.push(
             prop !== 'span'
-            ? `el-col-${size}-${prop}-${props[prop]}`
-            : `el-col-${size}-${props[prop]}`
+              ? `el-col-${size}-${prop}-${props[prop]}`
+              : `el-col-${size}-${props[prop]}`
           );
         });
       }
diff --git a/packages/collapse/src/collapse-item.vue b/packages/collapse/src/collapse-item.vue
index 25ac9ffb51..a749ac36bf 100644
--- a/packages/collapse/src/collapse-item.vue
+++ b/packages/collapse/src/collapse-item.vue
@@ -1,11 +1,41 @@
 <template>
   <div class="el-collapse-item" :class="{'is-active': isActive}">
-    <div class="el-collapse-item__header" @click="handleHeaderClick">
-      <i class="el-collapse-item__header__arrow el-icon-arrow-right"></i>
-      <slot name="title">{{title}}</slot>
+    <div
+      role="tab"
+      :aria-expanded="isActive"
+      :aria-controls="`el-collapse-content-${id}`"
+      :aria-describedby ="`el-collapse-content-${id}`"
+    >
+      <div
+        class="el-collapse-item__header"
+        @click="handleHeaderClick"
+        role="button"
+        :id="`el-collapse-head-${id}`"
+        tabindex="0"
+        @keyup.space.enter.stop="handleEnterClick"
+        :class="{
+          'focusing': focusing,
+          'is-active': isActive
+        }"
+        @focus="handleFocus"
+        @blur="focusing = false"
+      >
+        <i
+          class="el-collapse-item__arrow el-icon-arrow-right"
+          :class="{'is-active': isActive}">
+        </i>
+        <slot name="title">{{title}}</slot>
+      </div>
     </div>
     <el-collapse-transition>
-      <div class="el-collapse-item__wrap" v-show="isActive">
+      <div
+        class="el-collapse-item__wrap"
+        v-show="isActive"
+        role="tabpanel"
+        :aria-hidden="!isActive"
+        :aria-labelledby="`el-collapse-head-${id}`"
+        :id="`el-collapse-content-${id}`"
+      >
         <div class="el-collapse-item__content">
           <slot></slot>
         </div>
@@ -16,6 +46,7 @@
 <script>
   import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition';
   import Emitter from 'element-ui/src/mixins/emitter';
+  import { generateId } from 'element-ui/src/utils/util';
 
   export default {
     name: 'ElCollapseItem',
@@ -32,10 +63,14 @@
           height: 'auto',
           display: 'block'
         },
-        contentHeight: 0
+        contentHeight: 0,
+        focusing: false,
+        isClick: false
       };
     },
 
+    inject: ['collapse'],
+
     props: {
       title: String,
       name: {
@@ -48,22 +83,31 @@
 
     computed: {
       isActive() {
-        return this.$parent.activeNames.indexOf(this.name) > -1;
-      }
-    },
-
-    watch: {
-      'isActive'(value) {
+        return this.collapse.activeNames.indexOf(this.name) > -1;
+      },
+      id() {
+        return generateId();
       }
     },
 
     methods: {
+      handleFocus() {
+        setTimeout(() => {
+          if (!this.isClick) {
+            this.focusing = true;
+          } else {
+            this.isClick = false;
+          }
+        }, 50);
+      },
       handleHeaderClick() {
         this.dispatch('ElCollapse', 'item-click', this);
+        this.focusing = false;
+        this.isClick = true;
+      },
+      handleEnterClick() {
+        this.dispatch('ElCollapse', 'item-click', this);
       }
-    },
-
-    mounted() {
     }
   };
 </script>
diff --git a/packages/collapse/src/collapse.vue b/packages/collapse/src/collapse.vue
index 647c4bfc5b..c87e525120 100644
--- a/packages/collapse/src/collapse.vue
+++ b/packages/collapse/src/collapse.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="el-collapse">
+  <div class="el-collapse" role="tablist" aria-multiselectable="true">
     <slot></slot>
   </div>
 </template>
@@ -25,6 +25,12 @@
       };
     },
 
+    provide() {
+      return {
+        collapse: this
+      };
+    },
+
     watch: {
       value(value) {
         this.activeNames = [].concat(value);
@@ -44,7 +50,7 @@
           this.setActiveNames(
             (this.activeNames[0] || this.activeNames[0] === 0) &&
             this.activeNames[0] === item.name
-            ? '' : item.name
+              ? '' : item.name
           );
         } else {
           let activeNames = this.activeNames.slice(0);
diff --git a/packages/color-picker/cooking.conf.js b/packages/color-picker/cooking.conf.js
deleted file mode 100644
index e19746a239..0000000000
--- a/packages/color-picker/cooking.conf.js
+++ /dev/null
@@ -1,6 +0,0 @@
-var cooking = require('cooking');
-var gen = require('../../build/gen-single-config');
-
-cooking.set(gen(__dirname, 'ElColorPicker'));
-
-module.exports = cooking.resolve();
diff --git a/packages/color-picker/package.json b/packages/color-picker/package.json
deleted file mode 100644
index 1da298ec27..0000000000
--- a/packages/color-picker/package.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "name": "element-color-picker",
-  "version": "0.0.0",
-  "description": "A color-picker component for Vue.js.",
-  "keywords": [
-    "element",
-    "vue",
-    "component"
-  ],
-  "main": "./lib/index.js",
-  "repository": "https://github.com/ElemeFE/element/tree/master/packages/color-picker",
-  "author": "elemefe",
-  "license": "MIT",
-  "dependencies": {}
-}
diff --git a/packages/color-picker/src/color.js b/packages/color-picker/src/color.js
index 93d6038666..8dee3c84df 100644
--- a/packages/color-picker/src/color.js
+++ b/packages/color-picker/src/color.js
@@ -202,9 +202,9 @@ export default class Color {
     }
 
     const fromHSV = (h, s, v) => {
-      this._hue = h;
-      this._saturation = s;
-      this._value = v;
+      this._hue = Math.max(0, Math.min(360, h));
+      this._saturation = Math.max(0, Math.min(100, s));
+      this._value = Math.max(0, Math.min(100, v));
 
       this.doOnChange();
     };
@@ -215,6 +215,8 @@ export default class Color {
 
       if (parts.length === 4) {
         this._alpha = Math.floor(parseFloat(parts[3]) * 100);
+      } else if (parts.length === 3) {
+        this._alpha = 100;
       }
       if (parts.length >= 3) {
         const { h, s, v } = hsl2hsv(parts[0], parts[1], parts[2]);
@@ -226,6 +228,8 @@ export default class Color {
 
       if (parts.length === 4) {
         this._alpha = Math.floor(parseFloat(parts[3]) * 100);
+      } else if (parts.length === 3) {
+        this._alpha = 100;
       }
       if (parts.length >= 3) {
         fromHSV(parts[0], parts[1], parts[2]);
@@ -236,6 +240,8 @@ export default class Color {
 
       if (parts.length === 4) {
         this._alpha = Math.floor(parseFloat(parts[3]) * 100);
+      } else if (parts.length === 3) {
+        this._alpha = 100;
       }
       if (parts.length >= 3) {
         const { h, s, v } = rgb2hsv(parts[0], parts[1], parts[2]);
@@ -249,10 +255,16 @@ export default class Color {
         r = parseHexChannel(hex[0] + hex[0]);
         g = parseHexChannel(hex[1] + hex[1]);
         b = parseHexChannel(hex[2] + hex[2]);
-      } else if (hex.length === 6) {
+      } else if (hex.length === 6 || hex.length === 8) {
         r = parseHexChannel(hex.substring(0, 2));
         g = parseHexChannel(hex.substring(2, 4));
-        b = parseHexChannel(hex.substring(4));
+        b = parseHexChannel(hex.substring(4, 6));
+      }
+
+      if (hex.length === 8) {
+        this._alpha = Math.floor(parseHexChannel(hex.substring(6)) / 255 * 100);
+      } else if (hex.length === 3 || hex.length === 6) {
+        this._alpha = 100;
       }
 
       const { h, s, v } = rgb2hsv(r, g, b);
@@ -260,6 +272,13 @@ export default class Color {
     }
   }
 
+  compare(color) {
+    return Math.abs(color._hue - this._hue) < 2 &&
+      Math.abs(color._saturation - this._saturation) < 1 &&
+      Math.abs(color._value - this._value) < 1 &&
+      Math.abs(color._alpha - this._alpha) < 1;
+  }
+
   doOnChange() {
     const { _hue, _saturation, _value, _alpha, format } = this;
 
diff --git a/packages/color-picker/src/components/picker-dropdown.vue b/packages/color-picker/src/components/picker-dropdown.vue
index e9572b8f54..b50f85ae62 100644
--- a/packages/color-picker/src/components/picker-dropdown.vue
+++ b/packages/color-picker/src/components/picker-dropdown.vue
@@ -8,10 +8,30 @@
         <sv-panel ref="sl" :color="color"></sv-panel>
       </div>
       <alpha-slider v-if="showAlpha" ref="alpha" :color="color"></alpha-slider>
+      <predefine v-if="predefine" :color="color" :colors="predefine"></predefine>
       <div class="el-color-dropdown__btns">
-        <span class="el-color-dropdown__value">{{ currentColor }}</span>
-        <a href="JavaScript:" class="el-color-dropdown__link-btn" @click="$emit('clear')">{{ t('el.colorpicker.clear') }}</a>
-        <button class="el-color-dropdown__btn" @click="confirmValue">{{ t('el.colorpicker.confirm') }}</button>
+        <span class="el-color-dropdown__value">
+          <el-input
+            v-model="customInput"
+            @keyup.native.enter="handleConfirm"
+            @blur="handleConfirm"
+            size="mini">
+          </el-input>
+        </span>
+        <el-button
+          size="mini"
+          type="text"
+          class="el-color-dropdown__link-btn"
+          @click="$emit('clear')">
+          {{ t('el.colorpicker.clear') }}
+        </el-button>
+        <el-button
+          plain
+          size="mini"
+          class="el-color-dropdown__btn"
+          @click="confirmValue">
+          {{ t('el.colorpicker.confirm') }}
+        </el-button>
       </div>
     </div>
   </transition>
@@ -21,8 +41,11 @@
   import SvPanel from './sv-panel';
   import HueSlider from './hue-slider';
   import AlphaSlider from './alpha-slider';
+  import Predefine from './predefine';
   import Popper from 'element-ui/src/utils/vue-popper';
   import Locale from 'element-ui/src/mixins/locale';
+  import ElInput from 'element-ui/packages/input';
+  import ElButton from 'element-ui/packages/button';
 
   export default {
     name: 'el-color-picker-dropdown',
@@ -32,14 +55,24 @@
     components: {
       SvPanel,
       HueSlider,
-      AlphaSlider
+      AlphaSlider,
+      ElInput,
+      ElButton,
+      Predefine
     },
 
     props: {
       color: {
         required: true
       },
-      showAlpha: Boolean
+      showAlpha: Boolean,
+      predefine: Array
+    },
+
+    data() {
+      return {
+        customInput: ''
+      };
     },
 
     computed: {
@@ -52,6 +85,10 @@
     methods: {
       confirmValue() {
         this.$emit('pick');
+      },
+
+      handleConfirm() {
+        this.color.fromString(this.customInput);
       }
     },
 
@@ -70,6 +107,10 @@
             alpha && alpha.update();
           });
         }
+      },
+
+      currentColor(val) {
+        this.customInput = val;
       }
     }
   };
diff --git a/packages/color-picker/src/components/predefine.vue b/packages/color-picker/src/components/predefine.vue
new file mode 100644
index 0000000000..1387c48a25
--- /dev/null
+++ b/packages/color-picker/src/components/predefine.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="el-color-predefine">
+    <div class="el-color-predefine__colors">
+      <div class="el-color-predefine__color-selector"
+           :class="{selected: item.selected, 'is-alpha': item._alpha < 100}"
+           v-for="(item, index) in rgbaColors"
+           :key="colors[index]"
+           @click="handleSelect(index)">
+        <div :style="{'background-color': item.value}">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Color from '../color';
+
+  export default {
+    props: {
+      colors: { type: Array, required: true },
+      color: { required: true }
+    },
+    data() {
+      return {
+        rgbaColors: this.parseColors(this.colors, this.color)
+      };
+    },
+    methods: {
+      handleSelect(index) {
+        this.color.fromString(this.colors[index]);
+      },
+      parseColors(colors, color) {
+        return colors.map(value => {
+          const c = new Color();
+          c.enableAlpha = true;
+          c.format = 'rgba';
+          c.fromString(value);
+          c.selected = c.value === color.value;
+          return c;
+        });
+      }
+    },
+    watch: {
+      '$parent.currentColor'(val) {
+        const color = new Color();
+        color.fromString(val);
+
+        this.rgbaColors.forEach(item => {
+          item.selected = color.compare(item);
+        });
+      },
+      colors(newVal) {
+        this.rgbaColors = this.parseColors(newVal, this.color);
+      },
+      color(newVal) {
+        this.rgbaColors = this.parseColors(this.colors, newVal);
+      }
+    }
+  };
+</script>
\ No newline at end of file
diff --git a/packages/color-picker/src/components/sv-panel.vue b/packages/color-picker/src/components/sv-panel.vue
index be670080d3..66676a608c 100644
--- a/packages/color-picker/src/components/sv-panel.vue
+++ b/packages/color-picker/src/components/sv-panel.vue
@@ -47,9 +47,7 @@
         const value = this.color.get('value');
 
         const el = this.$el;
-        let { width, height } = el.getBoundingClientRect();
-
-        if (!height) height = width * 3 / 4;
+        let { clientWidth: width, clientHeight: height } = el;
 
         this.cursorLeft = saturation * width / 100;
         this.cursorTop = (100 - value) * height / 100;
diff --git a/packages/color-picker/src/main.vue b/packages/color-picker/src/main.vue
index 13f66901ea..e324230786 100644
--- a/packages/color-picker/src/main.vue
+++ b/packages/color-picker/src/main.vue
@@ -1,6 +1,13 @@
 <template>
-  <div class="el-color-picker" v-clickoutside="hide">
-    <div class="el-color-picker__trigger" @click="showPicker = !showPicker">
+  <div
+    :class="[
+      'el-color-picker',
+      colorDisabled ? 'is-disabled' : '',
+      colorSize ? `el-color-picker--${ colorSize }` : ''
+    ]"
+    v-clickoutside="hide">
+    <div class="el-color-picker__mask" v-if="colorDisabled"></div>
+    <div class="el-color-picker__trigger" @click="handleTrigger">
       <span class="el-color-picker__color" :class="{ 'is-alpha': showAlpha }">
         <span class="el-color-picker__color-inner"
           :style="{
@@ -8,16 +15,17 @@
           }"></span>
         <span class="el-color-picker__empty el-icon-close" v-if="!value && !showPanelColor"></span>
       </span>
-      <span class="el-color-picker__icon el-icon-caret-bottom"></span>
+      <span class="el-color-picker__icon el-icon-arrow-down" v-show="value || showPanelColor"></span>
     </div>
     <picker-dropdown
        ref="dropdown"
-       class="el-color-picker__panel"
+       :class="['el-color-picker__panel', popperClass || '']"
        v-model="showPicker"
        @pick="confirmValue"
        @clear="clearValue"
        :color="color"
-       :show-alpha="showAlpha">
+       :show-alpha="showAlpha"
+       :predefine="predefine">
     </picker-dropdown>
   </div>
 </template>
@@ -31,14 +39,21 @@
     name: 'ElColorPicker',
 
     props: {
-      value: {
-        type: String
-      },
-      showAlpha: {
-        type: Boolean
+      value: String,
+      showAlpha: Boolean,
+      colorFormat: String,
+      disabled: Boolean,
+      size: String,
+      popperClass: String,
+      predefine: Array
+    },
+
+    inject: {
+      elForm: {
+        default: ''
       },
-      colorFormat: {
-        type: String
+      elFormItem: {
+        default: ''
       }
     },
 
@@ -48,12 +63,21 @@
       displayedColor() {
         if (!this.value && !this.showPanelColor) {
           return 'transparent';
-        } else {
-          const { r, g, b } = this.color.toRgb();
-          return this.showAlpha
-            ? `rgba(${ r }, ${ g }, ${ b }, ${ this.color.get('alpha') / 100 })`
-            : `rgb(${ r }, ${ g }, ${ b })`;
         }
+
+        return this.displayedRgb(this.color, this.showAlpha);
+      },
+
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+
+      colorSize() {
+        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+      },
+
+      colorDisabled() {
+        return this.disabled || (this.elForm || {}).disabled;
       }
     },
 
@@ -72,11 +96,25 @@
         }
       },
       displayedColor(val) {
-        this.$emit('active-change', val);
+        if (!this.showPicker) return;
+        const currentValueColor = new Color({
+          enableAlpha: this.showAlpha,
+          format: this.colorFormat
+        });
+        currentValueColor.fromString(this.value);
+
+        const currentValueColorRgb = this.displayedRgb(currentValueColor, this.showAlpha);
+        if (val !== currentValueColorRgb) {
+          this.$emit('active-change', val);
+        }
       }
     },
 
     methods: {
+      handleTrigger() {
+        if (this.colorDisabled) return;
+        this.showPicker = !this.showPicker;
+      },
       confirmValue(value) {
         this.$emit('input', this.color.value);
         this.$emit('change', this.color.value);
@@ -101,6 +139,16 @@
             this.showPanelColor = false;
           }
         });
+      },
+      displayedRgb(color, showAlpha) {
+        if (!(color instanceof Color)) {
+          throw Error('color should be instance of Color Class');
+        }
+
+        const { r, g, b } = color.toRgb();
+        return showAlpha
+          ? `rgba(${ r }, ${ g }, ${ b }, ${ color.get('alpha') / 100 })`
+          : `rgb(${ r }, ${ g }, ${ b })`;
       }
     },
 
diff --git a/packages/container/index.js b/packages/container/index.js
new file mode 100644
index 0000000000..1fe67ce071
--- /dev/null
+++ b/packages/container/index.js
@@ -0,0 +1,8 @@
+import Container from './src/main';
+
+/* istanbul ignore next */
+Container.install = function(Vue) {
+  Vue.component(Container.name, Container);
+};
+
+export default Container;
diff --git a/packages/container/src/main.vue b/packages/container/src/main.vue
new file mode 100644
index 0000000000..4cabbc79f9
--- /dev/null
+++ b/packages/container/src/main.vue
@@ -0,0 +1,33 @@
+<template>
+  <section class="el-container" :class="{ 'is-vertical': isVertical }">
+    <slot></slot>
+  </section>
+</template>
+
+<script>
+  export default {
+    name: 'ElContainer',
+
+    componentName: 'ElContainer',
+
+    props: {
+      direction: String
+    },
+
+    computed: {
+      isVertical() {
+        if (this.direction === 'vertical') {
+          return true;
+        } else if (this.direction === 'horizontal') {
+          return false;
+        }
+        return this.$slots && this.$slots.default
+          ? this.$slots.default.some(vnode => {
+            const tag = vnode.componentOptions && vnode.componentOptions.tag;
+            return tag === 'el-header' || tag === 'el-footer';
+          })
+          : false;
+      }
+    }
+  };
+</script>
diff --git a/packages/date-picker/README.md b/packages/date-picker/README.md
deleted file mode 100644
index 5a8c029d15..0000000000
--- a/packages/date-picker/README.md
+++ /dev/null
@@ -1,64 +0,0 @@
-# element-datepicker
-
-
-## Installation
-```shell
-npm i element-datepicker -S
-```
-
-## Usage
-
-A:
-```javascript
-import Vue from 'vue'
-import ElDatePicker from 'element-datepicker'
-
-Vue.use(ElDatePicker)
-```
-
-B:
-```javascript
-import Vue from 'vue'
-import { DatePicker, TimePicker, TimeSelect } from 'element-datepicker'
-
-Vue.component(DatePicker.name, DatePicker);
-Vue.component(TimePicker.name, TimePicker);
-Vue.component(TimeSelect.name, TimeSelect);
-```
-
-C:
-```html
-<script src="path/to/vue/dist/vue.js"></script>
-<script src="path/to/el-datepicker/index.js"></script>
-<script>
-  Vue.use(ElDatePicker);
-</script>
-```
-
-### Attributes
-| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
-|---------- |-------------- |---------- |--------------------------------  |-------- |
-| readonly | 完全只读 | boolean | — | false |
-| disabled | 禁用 | boolean | - | false |
-| editable | 文本框可输入 | boolean | - | true |
-| size          | 输入框尺寸     | string          | large, small, mini  | — |
-| placeholder | 占位内容 | string | — | — |
-| type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
-| format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
-| align | 对齐方式 | string | left, center, right | left |
-|picker-options | 当前时间日期选择器特有的选项参考下表 | object |  — | {} |
-
-### Picker Options
-| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
-|---------- |-------------- |---------- |--------------------------------  |-------- |
-| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | - | - |
-| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | - | - |
-
-### Shortcuts
-| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
-|---------- |-------------- |---------- |--------------------------------  |-------- |
-| text | 标题文本 | string | — | — |
-| onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — |
-
-## License
-MIT
diff --git a/packages/date-picker/_index.js b/packages/date-picker/_index.js
deleted file mode 100644
index 4443bd8980..0000000000
--- a/packages/date-picker/_index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import DatePicker from './src/picker/date-picker';
-import TimePicker from './src/picker/time-picker';
-import TimeSelect from './src/picker/time-select';
-
-/* istanbul ignore next */
-export default function install(Vue) {
-  Vue.component(DatePicker.name, DatePicker);
-  Vue.component(TimePicker.name, TimePicker);
-  Vue.component(TimeSelect.name, TimeSelect);
-};
-
-export { DatePicker, TimePicker, TimeSelect };
diff --git a/packages/date-picker/cooking.conf.js b/packages/date-picker/cooking.conf.js
deleted file mode 100644
index 8cda5464af..0000000000
--- a/packages/date-picker/cooking.conf.js
+++ /dev/null
@@ -1,6 +0,0 @@
-var cooking = require('cooking');
-var gen = require('../../build/gen-single-config');
-
-cooking.set(gen(__dirname, 'ElDatePicker', '_index.js'));
-
-module.exports = cooking.resolve();
diff --git a/packages/date-picker/package.json b/packages/date-picker/package.json
deleted file mode 100644
index f85940d548..0000000000
--- a/packages/date-picker/package.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "name": "element-datepicker",
-  "version": "1.2.0",
-  "description": "A datepicker component for Vue.",
-  "keywords": [
-    "element",
-    "vue",
-    "component"
-  ],
-  "main": "./lib/index.js",
-  "repository": "https://github.com/ElemeFE/element/tree/master/packages/date-picker",
-  "author": "long.zhang@ele.me",
-  "license": "MIT",
-  "dependencies": {}
-}
diff --git a/packages/date-picker/src/basic/date-table.vue b/packages/date-picker/src/basic/date-table.vue
index 50cbe79405..f145cf3f6a 100644
--- a/packages/date-picker/src/basic/date-table.vue
+++ b/packages/date-picker/src/basic/date-table.vue
@@ -9,25 +9,33 @@
     <tbody>
     <tr>
       <th v-if="showWeekNumber">{{ t('el.datepicker.week') }}</th>
-      <th v-for="week in WEEKS">{{ t('el.datepicker.weeks.' + week) }}</th>
+      <th v-for="(week, key) in WEEKS" :key="key">{{ t('el.datepicker.weeks.' + week) }}</th>
     </tr>
     <tr
       class="el-date-table__row"
-      v-for="row in rows"
-      :class="{ current: isWeekActive(row[1]) }">
+      v-for="(row, key) in rows"
+      :class="{ current: isWeekActive(row[1]) }"
+      :key="key">
       <td
-        v-for="cell in row"
+        v-for="(cell, key) in row"
         :class="getCellClasses(cell)"
-        v-text="cell.type === 'today' ? t('el.datepicker.today') : cell.text"></td>
+        :key="key">
+        <div>
+          <span>
+            {{ cell.text }}
+          </span>
+        </div>
+      </td>
     </tr>
     </tbody>
   </table>
 </template>
 
 <script>
-  import { getFirstDayOfMonth, getDayCountOfMonth, getWeekNumber, getStartDateOfMonth, DAY_DURATION } from '../util';
+  import { getFirstDayOfMonth, getDayCountOfMonth, getWeekNumber, getStartDateOfMonth, nextDate, isDate } from '../util';
   import { hasClass } from 'element-ui/src/utils/dom';
   import Locale from 'element-ui/src/mixins/locale';
+  import { arrayFindIndex, arrayFind, coerceTruthyValueToArray } from 'element-ui/src/utils/util';
 
   const WEEKS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
   const clearHours = function(time) {
@@ -36,6 +44,14 @@
     return cloneDate.getTime();
   };
 
+  // remove the first element that satisfies `pred` from arr
+  // return a new array if modification occurs
+  // return the original array otherwise
+  const removeFromArray = function(arr, pred) {
+    const idx = typeof pred === 'function' ? arrayFindIndex(arr, pred) : arr.indexOf(pred);
+    return idx >= 0 ? [...arr.slice(0, idx), ...arr.slice(idx + 1)] : arr;
+  };
+
   export default {
     mixins: [Locale],
 
@@ -46,13 +62,16 @@
         validator: val => val >= 1 && val <= 7
       },
 
-      date: {},
+      value: {},
 
-      year: {},
-
-      month: {},
+      defaultValue: {
+        validator(val) {
+          // either: null, valid Date object, Array of valid Date objects
+          return val === null || isDate(val) || (Array.isArray(val) && val.every(isDate));
+        }
+      },
 
-      week: {},
+      date: {},
 
       selectionMode: {
         default: 'day'
@@ -93,8 +112,12 @@
         return WEEKS.concat(WEEKS).slice(week, week + 7);
       },
 
-      monthDate() {
-        return this.date.getDate();
+      year() {
+        return this.date.getFullYear();
+      },
+
+      month() {
+        return this.date.getMonth();
       },
 
       startDate() {
@@ -102,6 +125,7 @@
       },
 
       rows() {
+        // TODO: refactory rows / getCellClasses
         const date = new Date(this.year, this.month, 1);
         let day = getFirstDayOfMonth(date); // day of first day
         const dateCountOfMonth = getDayCountOfMonth(date.getFullYear(), date.getMonth());
@@ -116,18 +140,19 @@
 
         const startDate = this.startDate;
         const disabledDate = this.disabledDate;
+        const selectedDate = this.selectionMode === 'dates' ? coerceTruthyValueToArray(this.value) : [];
         const now = clearHours(new Date());
 
-        for (var i = 0; i < 6; i++) {
+        for (let i = 0; i < 6; i++) {
           const row = rows[i];
 
           if (this.showWeekNumber) {
             if (!row[0]) {
-              row[0] = { type: 'week', text: getWeekNumber(new Date(startDate.getTime() + DAY_DURATION * (i * 7 + 1))) };
+              row[0] = { type: 'week', text: getWeekNumber(nextDate(startDate, i * 7 + 1)) };
             }
           }
 
-          for (var j = 0; j < 7; j++) {
+          for (let j = 0; j < 7; j++) {
             let cell = row[this.showWeekNumber ? j + 1 : j];
             if (!cell) {
               cell = { row: i, column: j, type: 'normal', inRange: false, start: false, end: false };
@@ -136,7 +161,7 @@
             cell.type = 'normal';
 
             const index = i * 7 + j;
-            const time = startDate.getTime() + DAY_DURATION * (index - offset);
+            const time = nextDate(startDate, index - offset).getTime();
             cell.inRange = time >= clearHours(this.minDate) && time <= clearHours(this.maxDate);
             cell.start = this.minDate && time === clearHours(this.minDate);
             cell.end = this.maxDate && time === clearHours(this.maxDate);
@@ -168,7 +193,9 @@
               }
             }
 
-            cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
+            let cellDate = new Date(time);
+            cell.disabled = typeof disabledDate === 'function' && disabledDate(cellDate);
+            cell.selected = arrayFind(selectedDate, date => date.getTime() === cellDate.getTime());
 
             this.$set(row, this.showWeekNumber ? j + 1 : j, cell);
           }
@@ -212,10 +239,6 @@
         if (newVal && !oldVal) {
           this.rangeState.selecting = false;
           this.markRange(newVal);
-          this.$emit('pick', {
-            minDate: this.minDate,
-            maxDate: this.maxDate
-          });
         }
       }
     },
@@ -227,9 +250,16 @@
     },
 
     methods: {
+      cellMatchesDate(cell, date) {
+        const value = new Date(date);
+        return this.year === value.getFullYear() &&
+          this.month === value.getMonth() &&
+          Number(cell.text) === value.getDate();
+      },
+
       getCellClasses(cell) {
         const selectionMode = this.selectionMode;
-        const monthDate = this.monthDate;
+        const defaultValue = this.defaultValue ? Array.isArray(this.defaultValue) ? this.defaultValue : [this.defaultValue] : [];
 
         let classes = [];
         if ((cell.type === 'normal' || cell.type === 'today') && !cell.disabled) {
@@ -241,8 +271,11 @@
           classes.push(cell.type);
         }
 
-        if (selectionMode === 'day' && (cell.type === 'normal' || cell.type === 'today') &&
-          Number(this.year) === this.date.getFullYear() && this.month === this.date.getMonth() && monthDate === Number(cell.text)) {
+        if (cell.type === 'normal' && defaultValue.some(date => this.cellMatchesDate(cell, date))) {
+          classes.push('default');
+        }
+
+        if (selectionMode === 'day' && (cell.type === 'normal' || cell.type === 'today') && this.cellMatchesDate(cell, this.value)) {
           classes.push('current');
         }
 
@@ -262,26 +295,16 @@
           classes.push('disabled');
         }
 
+        if (cell.selected) {
+          classes.push('selected');
+        }
+
         return classes.join(' ');
       },
 
       getDateOfCell(row, column) {
-        const startDate = this.startDate;
-
-        return new Date(startDate.getTime() + (row * 7 + (column - (this.showWeekNumber ? 1 : 0)) - this.offsetDay) * DAY_DURATION);
-      },
-
-      getCellByDate(date) {
-        const startDate = this.startDate;
-        const rows = this.rows;
-        const index = (date - startDate) / DAY_DURATION;
-        const row = rows[Math.floor(index / 7)];
-
-        if (this.showWeekNumber) {
-          return row[index % 7 + 1];
-        } else {
-          return row[index % 7];
-        }
+        const offsetFromStart = row * 7 + (column - (this.showWeekNumber ? 1 : 0)) - this.offsetDay;
+        return nextDate(this.startDate, offsetFromStart);
       },
 
       isWeekActive(cell) {
@@ -302,7 +325,8 @@
 
         newDate.setDate(parseInt(cell.text, 10));
 
-        return getWeekNumber(newDate) === this.week;
+        const valueYear = isDate(this.value) ? this.value.getFullYear() : null;
+        return year === valueYear && getWeekNumber(newDate) === getWeekNumber(this.value);
       },
 
       markRange(maxDate) {
@@ -313,18 +337,24 @@
 
         const rows = this.rows;
         const minDate = this.minDate;
-        for (var i = 0, k = rows.length; i < k; i++) {
+        for (let i = 0, k = rows.length; i < k; i++) {
           const row = rows[i];
-          for (var j = 0, l = row.length; j < l; j++) {
+          for (let j = 0, l = row.length; j < l; j++) {
             if (this.showWeekNumber && j === 0) continue;
 
             const cell = row[j];
             const index = i * 7 + j + (this.showWeekNumber ? -1 : 0);
-            const time = startDate.getTime() + DAY_DURATION * (index - this.offsetDay);
+            const time = nextDate(startDate, index - this.offsetDay).getTime();
 
-            cell.inRange = minDate && time >= clearHours(minDate) && time <= clearHours(maxDate);
-            cell.start = minDate && time === clearHours(minDate.getTime());
-            cell.end = maxDate && time === clearHours(maxDate.getTime());
+            if (maxDate && maxDate < minDate) {
+              cell.inRange = minDate && time >= clearHours(maxDate) && time <= clearHours(minDate);
+              cell.start = maxDate && time === clearHours(maxDate.getTime());
+              cell.end = minDate && time === clearHours(minDate.getTime());
+            } else {
+              cell.inRange = minDate && time >= clearHours(minDate) && time <= clearHours(maxDate);
+              cell.start = minDate && time === clearHours(minDate.getTime());
+              cell.end = maxDate && time === clearHours(maxDate.getTime());
+            }
           }
         }
       },
@@ -338,7 +368,13 @@
           rangeState: this.rangeState
         });
 
-        const target = event.target;
+        let target = event.target;
+        if (target.tagName === 'SPAN') {
+          target = target.parentNode.parentNode;
+        }
+        if (target.tagName === 'DIV') {
+          target = target.parentNode;
+        }
         if (target.tagName !== 'TD') return;
 
         const column = target.cellIndex;
@@ -355,11 +391,17 @@
 
       handleClick(event) {
         let target = event.target;
+        if (target.tagName === 'SPAN') {
+          target = target.parentNode.parentNode;
+        }
+        if (target.tagName === 'DIV') {
+          target = target.parentNode;
+        }
 
         if (target.tagName !== 'TD') return;
         if (hasClass(target, 'disabled') || hasClass(target, 'week')) return;
 
-        var selectionMode = this.selectionMode;
+        const selectionMode = this.selectionMode;
 
         if (selectionMode === 'week') {
           target = target.parentNode.cells[1];
@@ -407,6 +449,9 @@
             this.$emit('pick', { minDate, maxDate }, false);
             this.rangeState.selecting = true;
             this.markRange(this.minDate);
+            this.$nextTick(() => {
+              this.handleMouseMove(event);
+            });
           } else if (this.minDate && !this.maxDate) {
             if (newDate >= this.minDate) {
               const maxDate = new Date(newDate.getTime());
@@ -418,8 +463,9 @@
               });
             } else {
               const minDate = new Date(newDate.getTime());
+              this.rangeState.selecting = false;
 
-              this.$emit('pick', { minDate, maxDate: this.maxDate }, false);
+              this.$emit('pick', { minDate, maxDate: this.minDate });
             }
           } else if (!this.minDate) {
             const minDate = new Date(newDate.getTime());
@@ -431,7 +477,7 @@
         } else if (selectionMode === 'day') {
           this.$emit('pick', newDate);
         } else if (selectionMode === 'week') {
-          var weekNumber = getWeekNumber(newDate);
+          const weekNumber = getWeekNumber(newDate);
 
           const value = newDate.getFullYear() + 'w' + weekNumber;
           this.$emit('pick', {
@@ -440,6 +486,12 @@
             value: value,
             date: newDate
           });
+        } else if (selectionMode === 'dates') {
+          const value = this.value || [];
+          const newValue = cell.selected
+            ? removeFromArray(value, date => date.getTime() === newDate.getTime())
+            : [...value, newDate];
+          this.$emit('pick', newValue);
         }
       }
     }
diff --git a/packages/date-picker/src/basic/month-table.vue b/packages/date-picker/src/basic/month-table.vue
index 7781498c05..a343cb4be4 100644
--- a/packages/date-picker/src/basic/month-table.vue
+++ b/packages/date-picker/src/basic/month-table.vue
@@ -49,44 +49,43 @@
 
 <script type="text/babel">
   import Locale from 'element-ui/src/mixins/locale';
+  import { isDate, range, getDayCountOfMonth, nextDate } from '../util';
   import { hasClass } from 'element-ui/src/utils/dom';
+  import { arrayFindIndex, coerceTruthyValueToArray } from 'element-ui/src/utils/util';
+
+  const datesInMonth = (year, month) => {
+    const numOfDays = getDayCountOfMonth(year, month);
+    const firstDay = new Date(year, month, 1);
+    return range(numOfDays).map(n => nextDate(firstDay, n));
+  };
 
   export default {
     props: {
       disabledDate: {},
-      date: {},
-      month: {
-        type: Number
-      }
+      value: {},
+      defaultValue: {
+        validator(val) {
+          // null or valid Date Object
+          return val === null || (val instanceof Date && isDate(val));
+        }
+      },
+      date: {}
     },
     mixins: [Locale],
     methods: {
       getCellStyle(month) {
         const style = {};
+        const year = this.date.getFullYear();
+        const today = new Date();
 
-        var year = this.date.getFullYear();
-        var date = new Date(0);
-        date.setFullYear(year);
-        date.setMonth(month);
-        date.setHours(0);
-        var nextMonth = new Date(date);
-        nextMonth.setMonth(month + 1);
-
-        var flag = false;
-        if (typeof this.disabledDate === 'function') {
-
-          while (date < nextMonth) {
-            if (this.disabledDate(date)) {
-              date = new Date(date.getTime() + 8.64e7);
-            } else {
-              break;
-            }
-          }
-          if ((date - nextMonth) === 0) flag = true;
-        }
-
-        style.disabled = flag;
-        style.current = this.month === month;
+        style.disabled = typeof this.disabledDate === 'function'
+          ? datesInMonth(year, month).every(this.disabledDate)
+          : false;
+        style.current = arrayFindIndex(coerceTruthyValueToArray(this.value), date => date.getFullYear() === year && date.getMonth() === month) >= 0;
+        style.today = today.getFullYear() === year && today.getMonth() === month;
+        style.default = this.defaultValue &&
+          this.defaultValue.getFullYear() === year &&
+          this.defaultValue.getMonth() === month;
 
         return style;
       },
diff --git a/packages/date-picker/src/basic/time-spinner.vue b/packages/date-picker/src/basic/time-spinner.vue
index 012669977c..ffacaaeea1 100644
--- a/packages/date-picker/src/basic/time-spinner.vue
+++ b/packages/date-picker/src/basic/time-spinner.vue
@@ -1,157 +1,207 @@
 <template>
   <div class="el-time-spinner" :class="{ 'has-seconds': showSeconds }">
-    <el-scrollbar
-      @mouseenter.native="emitSelectRange('hours')"
-      class="el-time-spinner__wrapper"
-      wrap-style="max-height: inherit;"
-      view-class="el-time-spinner__list"
-      noresize
-      tag="ul"
-      ref="hour">
-      <li
-        @click="handleClick('hours', { value: hour, disabled: disabled }, true)"
-        v-for="(disabled, hour) in hoursList"
-        track-by="hour"
-        class="el-time-spinner__item"
-        :class="{ 'active': hour === hours, 'disabled': disabled }"
-        v-text="hour"></li>
-    </el-scrollbar>
-    <el-scrollbar
-      @mouseenter.native="emitSelectRange('minutes')"
-      class="el-time-spinner__wrapper"
-      wrap-style="max-height: inherit;"
-      view-class="el-time-spinner__list"
-      noresize
-      tag="ul"
-      ref="minute">
-      <li
-        @click="handleClick('minutes', key, true)"
-        v-for="(minute, key) in 60"
-        class="el-time-spinner__item"
-        :class="{ 'active': key === minutes }"
-        v-text="key"></li>
-    </el-scrollbar>
-    <el-scrollbar
-      v-show="showSeconds"
-      @mouseenter.native="emitSelectRange('seconds')"
-      class="el-time-spinner__wrapper"
-      wrap-style="max-height: inherit;"
-      view-class="el-time-spinner__list"
-      noresize
-      tag="ul"
-      ref="second">
-      <li
-        @click="handleClick('seconds', key, true)"
-        v-for="(second, key) in 60"
-        class="el-time-spinner__item"
-        :class="{ 'active': key === seconds }"
-        v-text="key"></li>
-    </el-scrollbar>
+    <template v-if="!arrowControl">
+      <el-scrollbar
+        @mouseenter.native="emitSelectRange('hours')"
+        @mousemove.native="adjustCurrentSpinner('hours')"
+        class="el-time-spinner__wrapper"
+        wrap-style="max-height: inherit;"
+        view-class="el-time-spinner__list"
+        noresize
+        tag="ul"
+        ref="hours">
+        <li
+          @click="handleClick('hours', { value: hour, disabled: disabled })"
+          v-for="(disabled, hour) in hoursList"
+          class="el-time-spinner__item"
+          :class="{ 'active': hour === hours, 'disabled': disabled }">{{ ('0' + (amPmMode ? (hour % 12 || 12) : hour )).slice(-2) }}{{ amPm(hour) }}</li>
+      </el-scrollbar>
+      <el-scrollbar
+        @mouseenter.native="emitSelectRange('minutes')"
+        @mousemove.native="adjustCurrentSpinner('minutes')"
+        class="el-time-spinner__wrapper"
+        wrap-style="max-height: inherit;"
+        view-class="el-time-spinner__list"
+        noresize
+        tag="ul"
+        ref="minutes">
+        <li
+          @click="handleClick('minutes', { value: key, disabled: false })"
+          v-for="(enabled, key) in minutesList"
+          class="el-time-spinner__item"
+          :class="{ 'active': key === minutes, disabled: !enabled }">{{ ('0' + key).slice(-2) }}</li>
+      </el-scrollbar>
+      <el-scrollbar
+        v-show="showSeconds"
+        @mouseenter.native="emitSelectRange('seconds')"
+        @mousemove.native="adjustCurrentSpinner('seconds')"
+        class="el-time-spinner__wrapper"
+        wrap-style="max-height: inherit;"
+        view-class="el-time-spinner__list"
+        noresize
+        tag="ul"
+        ref="seconds">
+        <li
+          @click="handleClick('seconds', { value: key, disabled: false })"
+          v-for="(second, key) in 60"
+          class="el-time-spinner__item"
+          :class="{ 'active': key === seconds }"
+          :key="key">{{ ('0' + key).slice(-2) }}</li>
+      </el-scrollbar>
+    </template>
+    <template v-if="arrowControl">
+      <div
+        @mouseenter="emitSelectRange('hours')"
+        class="el-time-spinner__wrapper is-arrow">
+        <i v-repeat-click="decrease" class="el-time-spinner__arrow el-icon-arrow-up"></i>
+        <i v-repeat-click="increase" class="el-time-spinner__arrow el-icon-arrow-down"></i>
+        <ul class="el-time-spinner__list" ref="hours">
+          <li
+            class="el-time-spinner__item"
+            :class="{ 'active': hour === hours, 'disabled': hoursList[hour] }"
+            v-for="(hour, key) in arrowHourList"
+            :key="key">{{ hour === undefined ? '' : ('0' + (amPmMode ? (hour % 12 || 12) : hour )).slice(-2) + amPm(hour) }}</li>
+        </ul>
+      </div>
+      <div
+        @mouseenter="emitSelectRange('minutes')"
+        class="el-time-spinner__wrapper is-arrow">
+        <i v-repeat-click="decrease" class="el-time-spinner__arrow el-icon-arrow-up"></i>
+        <i v-repeat-click="increase" class="el-time-spinner__arrow el-icon-arrow-down"></i>
+        <ul class="el-time-spinner__list" ref="minutes">
+          <li
+            class="el-time-spinner__item"
+            :class="{ 'active': minute === minutes }"
+            v-for="(minute, key) in arrowMinuteList"
+            :key="key">
+            {{ minute === undefined ? '' : ('0' + minute).slice(-2) }}
+          </li>
+        </ul>
+      </div>
+      <div
+        @mouseenter="emitSelectRange('seconds')"
+        class="el-time-spinner__wrapper is-arrow"
+        v-if="showSeconds">
+        <i v-repeat-click="decrease" class="el-time-spinner__arrow el-icon-arrow-up"></i>
+        <i v-repeat-click="increase" class="el-time-spinner__arrow el-icon-arrow-down"></i>
+        <ul class="el-time-spinner__list" ref="seconds">
+          <li
+            v-for="(second, key) in arrowSecondList"
+            class="el-time-spinner__item"
+            :class="{ 'active': second === seconds }"
+            :key="key">
+            {{ second === undefined ? '' : ('0' + second).slice(-2) }}
+          </li>
+        </ul>
+      </div>
+    </template>
   </div>
 </template>
 
 <script type="text/babel">
-  import { getRangeHours } from '../util';
+  import { getRangeHours, getRangeMinutes, modifyTime } from '../util';
   import ElScrollbar from 'element-ui/packages/scrollbar';
-  import debounce from 'throttle-debounce/debounce';
+  import RepeatClick from 'element-ui/src/directives/repeat-click';
 
   export default {
     components: { ElScrollbar },
 
-    props: {
-      hours: {
-        type: Number,
-        default: 0
-      },
-
-      minutes: {
-        type: Number,
-        default: 0
-      },
-
-      seconds: {
-        type: Number,
-        default: 0
-      },
+    directives: {
+      repeatClick: RepeatClick
+    },
 
+    props: {
+      date: {},
+      defaultValue: {}, // reserved for future use
       showSeconds: {
         type: Boolean,
         default: true
-      }
-    },
-
-    watch: {
-      hoursPrivate(newVal, oldVal) {
-        if (!(newVal >= 0 && newVal <= 23)) {
-          this.hoursPrivate = oldVal;
-        }
-        this.ajustElTop('hour', newVal);
-        this.$emit('change', { hours: newVal });
       },
-
-      minutesPrivate(newVal, oldVal) {
-        if (!(newVal >= 0 && newVal <= 59)) {
-          this.minutesPrivate = oldVal;
-        }
-        this.ajustElTop('minute', newVal);
-        this.$emit('change', { minutes: newVal });
-      },
-
-      secondsPrivate(newVal, oldVal) {
-        if (!(newVal >= 0 && newVal <= 59)) {
-          this.secondsPrivate = oldVal;
-        }
-        this.ajustElTop('second', newVal);
-        this.$emit('change', { seconds: newVal });
+      arrowControl: Boolean,
+      amPmMode: {
+        type: String,
+        default: '' // 'a': am/pm; 'A': AM/PM
       }
     },
 
     computed: {
+      hours() {
+        return this.date.getHours();
+      },
+      minutes() {
+        return this.date.getMinutes();
+      },
+      seconds() {
+        return this.date.getSeconds();
+      },
       hoursList() {
         return getRangeHours(this.selectableRange);
       },
-
-      hourEl() {
-        return this.$refs.hour.wrap;
+      minutesList() {
+        return getRangeMinutes(this.selectableRange, this.hours);
       },
-
-      minuteEl() {
-        return this.$refs.minute.wrap;
+      arrowHourList() {
+        const hours = this.hours;
+        return [
+          hours > 0 ? hours - 1 : undefined,
+          hours,
+          hours < 23 ? hours + 1 : undefined
+        ];
       },
-
-      secondEl() {
-        return this.$refs.second.wrap;
+      arrowMinuteList() {
+        const minutes = this.minutes;
+        return [
+          minutes > 0 ? minutes - 1 : undefined,
+          minutes,
+          minutes < 59 ? minutes + 1 : undefined
+        ];
+      },
+      arrowSecondList() {
+        const seconds = this.seconds;
+        return [
+          seconds > 0 ? seconds - 1 : undefined,
+          seconds,
+          seconds < 59 ? seconds + 1 : undefined
+        ];
       }
     },
 
     data() {
       return {
-        hoursPrivate: 0,
-        minutesPrivate: 0,
-        secondsPrivate: 0,
-        selectableRange: []
+        selectableRange: [],
+        currentScrollbar: null
       };
     },
 
-    created() {
-      this.debounceAjustElTop = debounce(100, type => this.ajustElTop(type, this[`${type}s`]));
-    },
-
     mounted() {
       this.$nextTick(() => {
-        this.bindScrollEvent();
+        !this.arrowControl && this.bindScrollEvent();
       });
     },
 
     methods: {
-      handleClick(type, value, disabled) {
-        if (value.disabled) {
-          return;
-        }
+      increase() {
+        this.scrollDown(1);
+      },
+
+      decrease() {
+        this.scrollDown(-1);
+      },
 
-        this[type + 'Private'] = value.value >= 0 ? value.value : value;
+      modifyDateField(type, value) {
+        switch (type) {
+          case 'hours': this.$emit('change', modifyTime(this.date, value, this.minutes, this.seconds)); break;
+          case 'minutes': this.$emit('change', modifyTime(this.date, this.hours, value, this.seconds)); break;
+          case 'seconds': this.$emit('change', modifyTime(this.date, this.hours, this.minutes, value)); break;
+        }
+      },
 
-        this.emitSelectRange(type);
+      handleClick(type, {value, disabled}) {
+        if (!disabled) {
+          this.modifyDateField(type, value);
+          this.emitSelectRange(type);
+          this.adjustSpinner(type, value);
+        }
       },
 
       emitSelectRange(type) {
@@ -162,32 +212,89 @@
         } else if (type === 'seconds') {
           this.$emit('select-range', 6, 8);
         }
+        this.currentScrollbar = type;
       },
 
       bindScrollEvent() {
         const bindFuntion = (type) => {
-          this[`${type}El`].onscroll = (e) => this.handleScroll(type, e);
+          this.$refs[type].wrap.onscroll = (e) => {
+            // TODO: scroll is emitted when set scrollTop programatically
+            // should find better solutions in the future!
+            this.handleScroll(type, e);
+          };
         };
-        bindFuntion('hour');
-        bindFuntion('minute');
-        bindFuntion('second');
+        bindFuntion('hours');
+        bindFuntion('minutes');
+        bindFuntion('seconds');
       },
 
       handleScroll(type) {
-        const ajust = {};
-        ajust[`${type}s`] = Math.min(Math.floor((this[`${type}El`].scrollTop - 80) / 32 + 3), 59);
-        this.debounceAjustElTop(type);
-        this.$emit('change', ajust);
+        const value = Math.min(Math.floor((this.$refs[type].wrap.scrollTop - (this.scrollBarHeight(type) * 0.5 - 10) / this.typeItemHeight(type) + 3) / this.typeItemHeight(type)), (type === 'hours' ? 23 : 59));
+        this.modifyDateField(type, value);
+      },
+
+      // NOTE: used by datetime / date-range panel
+      //       renamed from adjustScrollTop
+      //       should try to refactory it
+      adjustSpinners() {
+        this.adjustSpinner('hours', this.hours);
+        this.adjustSpinner('minutes', this.minutes);
+        this.adjustSpinner('seconds', this.seconds);
       },
 
-      ajustScrollTop() {
-        this.ajustElTop('hour', this.hours);
-        this.ajustElTop('minute', this.minutes);
-        this.ajustElTop('second', this.seconds);
+      adjustCurrentSpinner(type) {
+        this.adjustSpinner(type, this[type]);
       },
 
-      ajustElTop(type, value) {
-        this[`${type}El`].scrollTop = Math.max(0, (value - 2.5) * 32 + 80);
+      adjustSpinner(type, value) {
+        if (this.arrowControl) return;
+        const el = this.$refs[type].wrap;
+        if (el) {
+          el.scrollTop = Math.max(0, value * this.typeItemHeight(type));
+        }
+      },
+
+      scrollDown(step) {
+        if (!this.currentScrollbar) {
+          this.emitSelectRange('hours');
+        }
+
+        const label = this.currentScrollbar;
+        const hoursList = this.hoursList;
+        let now = this[label];
+
+        if (this.currentScrollbar === 'hours') {
+          let total = Math.abs(step);
+          step = step > 0 ? 1 : -1;
+          let length = hoursList.length;
+          while (length-- && total) {
+            now = (now + step + hoursList.length) % hoursList.length;
+            if (hoursList[now]) {
+              continue;
+            }
+            total--;
+          }
+          if (hoursList[now]) return;
+        } else {
+          now = (now + step + 60) % 60;
+        }
+
+        this.modifyDateField(label, now);
+        this.adjustSpinner(label, now);
+      },
+      amPm(hour) {
+        let shouldShowAmPm = this.amPmMode.toLowerCase() === 'a';
+        if (!shouldShowAmPm) return '';
+        let isCapital = this.amPmMode === 'A';
+        let content = (hour < 12) ? ' am' : ' pm';
+        if (isCapital) content = content.toUpperCase();
+        return content;
+      },
+      typeItemHeight(type) {
+        return this.$refs[type].$el.querySelector('li').offsetHeight;
+      },
+      scrollBarHeight(type) {
+        return this.$refs[type].$el.offsetHeight;
       }
     }
   };
diff --git a/packages/date-picker/src/basic/year-table.vue b/packages/date-picker/src/basic/year-table.vue
index 8bc2e8cba9..607aef6d22 100644
--- a/packages/date-picker/src/basic/year-table.vue
+++ b/packages/date-picker/src/basic/year-table.vue
@@ -45,58 +45,49 @@
 
 <script type="text/babel">
   import { hasClass } from 'element-ui/src/utils/dom';
+  import { isDate, range, nextDate, getDayCountOfYear } from '../util';
+  import { arrayFindIndex, coerceTruthyValueToArray } from 'element-ui/src/utils/util';
+
+  const datesInYear = year => {
+    const numOfDays = getDayCountOfYear(year);
+    const firstDay = new Date(year, 0, 1);
+    return range(numOfDays).map(n => nextDate(firstDay, n));
+  };
 
   export default {
     props: {
       disabledDate: {},
-      date: {},
-      year: {}
+      value: {},
+      defaultValue: {
+        validator(val) {
+          // null or valid Date Object
+          return val === null || (val instanceof Date && isDate(val));
+        }
+      },
+      date: {}
     },
 
     computed: {
       startYear() {
-        return Math.floor(this.year / 10) * 10;
+        return Math.floor(this.date.getFullYear() / 10) * 10;
       }
     },
 
     methods: {
       getCellStyle(year) {
         const style = {};
+        const today = new Date();
 
-        var date = new Date(0);
-        date.setFullYear(year);
-        date.setHours(0);
-        var nextYear = new Date(date);
-        nextYear.setFullYear(year + 1);
-
-        var flag = false;
-        if (typeof this.disabledDate === 'function') {
-
-          while (date < nextYear) {
-            if (this.disabledDate(date)) {
-              date = new Date(date.getTime() + 8.64e7);
-            } else {
-              break;
-            }
-          }
-          if ((date - nextYear) === 0) flag = true;
-
-        }
-
-        style.disabled = flag;
-        style.current = Number(this.year) === year;
+        style.disabled = typeof this.disabledDate === 'function'
+          ? datesInYear(year).every(this.disabledDate)
+          : false;
+        style.current = arrayFindIndex(coerceTruthyValueToArray(this.value), date => date.getFullYear() === year) >= 0;
+        style.today = today.getFullYear() === year;
+        style.default = this.defaultValue && this.defaultValue.getFullYear() === year;
 
         return style;
       },
 
-      nextTenYear() {
-        this.$emit('pick', Number(this.year) + 10, false);
-      },
-
-      prevTenYear() {
-        this.$emit('pick', Number(this.year) - 10, false);
-      },
-
       handleYearTableClick(event) {
         const target = event.target;
         if (target.tagName === 'A') {
diff --git a/packages/date-picker/src/panel/date-range.vue b/packages/date-picker/src/panel/date-range.vue
index c417a33f62..de3c8dd0db 100644
--- a/packages/date-picker/src/panel/date-range.vue
+++ b/packages/date-picker/src/panel/date-range.vue
@@ -2,8 +2,7 @@
   <transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')">
     <div
       v-show="visible"
-      :style="{ width: width + 'px' }"
-      class="el-picker-panel el-date-range-picker"
+      class="el-picker-panel el-date-range-picker el-popper"
       :class="[{
         'has-sidebar': $slots.sidebar || shortcuts,
         'has-time': showTime
@@ -14,7 +13,8 @@
           <button
             type="button"
             class="el-picker-panel__shortcut"
-            v-for="shortcut in shortcuts"
+            v-for="(shortcut, key) in shortcuts"
+            :key="key"
             @click="handleShortcutClick(shortcut)">{{shortcut.text}}</button>
         </div>
         <div class="el-picker-panel__body">
@@ -23,6 +23,7 @@
               <span class="el-date-range-picker__time-picker-wrap">
                 <el-input
                   size="small"
+                  :disabled="rangeState.selecting"
                   ref="minInput"
                   :placeholder="t('el.datepicker.startDate')"
                   class="el-date-range-picker__editor"
@@ -30,20 +31,21 @@
                   @input.native="handleDateInput($event, 'min')"
                   @change.native="handleDateChange($event, 'min')" />
               </span>
-              <span class="el-date-range-picker__time-picker-wrap">
+              <span class="el-date-range-picker__time-picker-wrap" v-clickoutside="handleMinTimeClose">
                 <el-input
                   size="small"
+                  :disabled="rangeState.selecting"
                   :placeholder="t('el.datepicker.startTime')"
                   class="el-date-range-picker__editor"
                   :value="minVisibleTime"
-                  @focus="minTimePickerVisible = !minTimePickerVisible"
+                  @focus="minTimePickerVisible = true"
                   @change.native="handleTimeChange($event, 'min')" />
                 <time-picker
-                  :picker-width="minPickerWidth"
                   ref="minTimePicker"
-                  :date="minDate"
                   @pick="handleMinTimePick"
-                  :visible="minTimePickerVisible">
+                  :time-arrow-control="arrowControl"
+                  :visible="minTimePickerVisible"
+                  @mounted="$refs.minTimePicker.format=timeFormat">
                 </time-picker>
               </span>
             </span>
@@ -52,6 +54,7 @@
               <span class="el-date-range-picker__time-picker-wrap">
                 <el-input
                   size="small"
+                  :disabled="rangeState.selecting"
                   :placeholder="t('el.datepicker.endDate')"
                   class="el-date-range-picker__editor"
                   :value="maxVisibleDate"
@@ -59,22 +62,24 @@
                   @input.native="handleDateInput($event, 'max')"
                   @change.native="handleDateChange($event, 'max')" />
               </span>
-              <span class="el-date-range-picker__time-picker-wrap">
+              <span class="el-date-range-picker__time-picker-wrap" v-clickoutside="handleMaxTimeClose">
                 <el-input
                   size="small"
+                  :disabled="rangeState.selecting"
                   ref="maxInput"
                   :placeholder="t('el.datepicker.endTime')"
                   class="el-date-range-picker__editor"
                   :value="maxVisibleTime"
-                  @focus="minDate && (maxTimePickerVisible = !maxTimePickerVisible)"
+                  @focus="minDate && (maxTimePickerVisible = true)"
                   :readonly="!minDate"
                   @change.native="handleTimeChange($event, 'max')" />
                 <time-picker
-                  :picker-width="maxPickerWidth"
                   ref="maxTimePicker"
-                  :date="maxDate"
                   @pick="handleMaxTimePick"
-                  :visible="maxTimePickerVisible"></time-picker>
+                  :time-arrow-control="arrowControl"
+                  :visible="maxTimePickerVisible"
+                  @mounted="$refs.maxTimePicker.format=timeFormat">
+                </time-picker>
               </span>
             </span>
           </div>
@@ -82,19 +87,32 @@
             <div class="el-date-range-picker__header">
               <button
                 type="button"
-                @click="prevYear"
+                @click="leftPrevYear"
                 class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
               <button
                 type="button"
-                @click="prevMonth"
+                @click="leftPrevMonth"
                 class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
+              <button
+                type="button"
+                @click="leftNextYear"
+                v-if="unlinkPanels"
+                :disabled="!enableYearArrow"
+                :class="{ 'is-disabled': !enableYearArrow }"
+                class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
+              <button
+                type="button"
+                @click="leftNextMonth"
+                v-if="unlinkPanels"
+                :disabled="!enableMonthArrow"
+                :class="{ 'is-disabled': !enableMonthArrow }"
+                class="el-picker-panel__icon-btn el-icon-arrow-right"></button>
               <div>{{ leftLabel }}</div>
             </div>
             <date-table
               selection-mode="range"
-              :date="date"
-              :year="leftYear"
-              :month="leftMonth"
+              :date="leftDate"
+              :default-value="defaultValue"
               :min-date="minDate"
               :max-date="maxDate"
               :range-state="rangeState"
@@ -108,19 +126,32 @@
             <div class="el-date-range-picker__header">
               <button
                 type="button"
-                @click="nextYear"
+                @click="rightPrevYear"
+                v-if="unlinkPanels"
+                :disabled="!enableYearArrow"
+                :class="{ 'is-disabled': !enableYearArrow }"
+                class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
+              <button
+                type="button"
+                @click="rightPrevMonth"
+                v-if="unlinkPanels"
+                :disabled="!enableMonthArrow"
+                :class="{ 'is-disabled': !enableMonthArrow }"
+                class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
+              <button
+                type="button"
+                @click="rightNextYear"
                 class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
               <button
                 type="button"
-                @click="nextMonth"
+                @click="rightNextMonth"
                 class="el-picker-panel__icon-btn el-icon-arrow-right"></button>
               <div>{{ rightLabel }}</div>
             </div>
             <date-table
               selection-mode="range"
               :date="rightDate"
-              :year="rightYear"
-              :month="rightMonth"
+              :default-value="defaultValue"
               :min-date="minDate"
               :max-date="maxDate"
               :range-state="rangeState"
@@ -133,36 +164,74 @@
         </div>
       </div>
       <div class="el-picker-panel__footer" v-if="showTime">
-        <a
+        <el-button
+          size="mini"
+          type="text"
+          class="el-picker-panel__link-btn"
+          @click="handleClear">
+          {{ t('el.datepicker.clear') }}
+        </el-button>
+        <el-button
+          plain
+          size="mini"
           class="el-picker-panel__link-btn"
-          @click="handleClear">{{ t('el.datepicker.clear') }}</a>
-        <button
-          type="button"
-          class="el-picker-panel__btn"
-          @click="handleConfirm()"
-          :disabled="btnDisabled">{{ t('el.datepicker.confirm') }}</button>
+          :disabled="btnDisabled"
+          @click="handleConfirm(false)">
+          {{ t('el.datepicker.confirm') }}
+        </el-button>
       </div>
     </div>
   </transition>
 </template>
 
 <script type="text/babel">
-  import { nextMonth, prevMonth, toDate, formatDate, parseDate } from '../util';
+  import {
+    formatDate,
+    parseDate,
+    isDate,
+    modifyDate,
+    modifyTime,
+    modifyWithTimeString,
+    prevYear,
+    nextYear,
+    prevMonth,
+    nextMonth,
+    extractDateFormat,
+    extractTimeFormat
+  } from '../util';
+  import Clickoutside from 'element-ui/src/utils/clickoutside';
   import Locale from 'element-ui/src/mixins/locale';
   import TimePicker from './time';
   import DateTable from '../basic/date-table';
   import ElInput from 'element-ui/packages/input';
+  import ElButton from 'element-ui/packages/button';
+
+  const advanceDate = (date, amount) => {
+    return new Date(new Date(date).getTime() + amount);
+  };
+
+  const calcDefaultValue = (defaultValue) => {
+    if (Array.isArray(defaultValue)) {
+      return [new Date(defaultValue[0]), new Date(defaultValue[1])];
+    } else if (defaultValue) {
+      return [new Date(defaultValue), advanceDate(defaultValue, 24 * 60 * 60 * 1000)];
+    } else {
+      return [new Date(), advanceDate(Date.now(), 24 * 60 * 60 * 1000)];
+    }
+  };
 
   export default {
     mixins: [Locale],
 
+    directives: { Clickoutside },
+
     computed: {
       btnDisabled() {
-        return !(this.minDate && this.maxDate && !this.selecting);
+        return !(this.minDate && this.maxDate && !this.selecting && this.isValidValue([this.minDate, this.maxDate]));
       },
 
       leftLabel() {
-        return this.date.getFullYear() + ' ' + this.t('el.datepicker.year') + ' ' + this.t(`el.datepicker.month${ this.date.getMonth() + 1 }`);
+        return this.leftDate.getFullYear() + ' ' + this.t('el.datepicker.year') + ' ' + this.t(`el.datepicker.month${ this.leftDate.getMonth() + 1 }`);
       },
 
       rightLabel() {
@@ -170,11 +239,15 @@
       },
 
       leftYear() {
-        return this.date.getFullYear();
+        return this.leftDate.getFullYear();
       },
 
       leftMonth() {
-        return this.date.getMonth();
+        return this.leftDate.getMonth();
+      },
+
+      leftMonthDate() {
+        return this.leftDate.getDate();
       },
 
       rightYear() {
@@ -185,45 +258,63 @@
         return this.rightDate.getMonth();
       },
 
+      rightMonthDate() {
+        return this.rightDate.getDate();
+      },
+
       minVisibleDate() {
-        return this.minDate ? formatDate(this.minDate) : '';
+        return this.minDate ? formatDate(this.minDate, this.dateFormat) : '';
       },
 
       maxVisibleDate() {
-        return (this.maxDate || this.minDate) ? formatDate(this.maxDate || this.minDate) : '';
+        return (this.maxDate || this.minDate) ? formatDate(this.maxDate || this.minDate, this.dateFormat) : '';
       },
 
       minVisibleTime() {
-        return this.minDate ? formatDate(this.minDate, 'HH:mm:ss') : '';
+        return this.minDate ? formatDate(this.minDate, this.timeFormat) : '';
       },
 
       maxVisibleTime() {
-        return (this.maxDate || this.minDate) ? formatDate(this.maxDate || this.minDate, 'HH:mm:ss') : '';
+        return (this.maxDate || this.minDate) ? formatDate(this.maxDate || this.minDate, this.timeFormat) : '';
       },
 
-      rightDate() {
-        const newDate = new Date(this.date);
-        const month = newDate.getMonth();
-        newDate.setDate(1);
+      timeFormat() {
+        if (this.format) {
+          return extractTimeFormat(this.format);
+        } else {
+          return 'HH:mm:ss';
+        }
+      },
 
-        if (month === 11) {
-          newDate.setFullYear(newDate.getFullYear() + 1);
-          newDate.setMonth(0);
+      dateFormat() {
+        if (this.format) {
+          return extractDateFormat(this.format);
         } else {
-          newDate.setMonth(month + 1);
+          return 'yyyy-MM-dd';
         }
-        return newDate;
+      },
+
+      enableMonthArrow() {
+        const nextMonth = (this.leftMonth + 1) % 12;
+        const yearOffset = this.leftMonth + 1 >= 12 ? 1 : 0;
+        return this.unlinkPanels && new Date(this.leftYear + yearOffset, nextMonth) < new Date(this.rightYear, this.rightMonth);
+      },
+
+      enableYearArrow() {
+        return this.unlinkPanels && this.rightYear * 12 + this.rightMonth - (this.leftYear * 12 + this.leftMonth + 1) >= 12;
       }
     },
 
     data() {
       return {
         popperClass: '',
-        minPickerWidth: 0,
-        maxPickerWidth: 0,
-        date: new Date(),
+        value: [],
+        defaultValue: null,
+        defaultTime: null,
         minDate: '',
         maxDate: '',
+        leftDate: new Date(),
+        rightDate: nextMonth(new Date()),
         rangeState: {
           endDate: null,
           selecting: false,
@@ -232,36 +323,22 @@
         },
         showTime: false,
         shortcuts: '',
-        value: '',
         visible: '',
         disabledDate: '',
         firstDayOfWeek: 7,
         minTimePickerVisible: false,
         maxTimePickerVisible: false,
-        width: 0
+        format: '',
+        arrowControl: false,
+        unlinkPanels: false
       };
     },
 
     watch: {
-      showTime(val) {
-        if (!val) return;
-        this.$nextTick(_ => {
-          const minInputElm = this.$refs.minInput.$el;
-          const maxInputElm = this.$refs.maxInput.$el;
-          if (minInputElm) {
-            this.minPickerWidth = minInputElm.getBoundingClientRect().width + 10;
-          }
-          if (maxInputElm) {
-            this.maxPickerWidth = maxInputElm.getBoundingClientRect().width + 10;
-          }
-        });
-      },
-
-      minDate() {
+      minDate(val) {
         this.$nextTick(() => {
-          if (this.maxDate && this.maxDate < this.minDate) {
+          if (this.$refs.maxTimePicker && this.maxDate && this.maxDate < this.minDate) {
             const format = 'HH:mm:ss';
-
             this.$refs.maxTimePicker.selectableRange = [
               [
                 parseDate(formatDate(this.minDate, format), format),
@@ -270,14 +347,37 @@
             ];
           }
         });
+        if (val && this.$refs.minTimePicker) {
+          this.$refs.minTimePicker.date = val;
+          this.$refs.minTimePicker.value = val;
+        }
+      },
+
+      maxDate(val) {
+        if (val && this.$refs.maxTimePicker) {
+          this.$refs.maxTimePicker.date = val;
+          this.$refs.maxTimePicker.value = val;
+        }
       },
 
       minTimePickerVisible(val) {
-        if (val) this.$nextTick(() => this.$refs.minTimePicker.ajustScrollTop());
+        if (val) {
+          this.$nextTick(() => {
+            this.$refs.minTimePicker.date = this.minDate;
+            this.$refs.minTimePicker.value = this.minDate;
+            this.$refs.minTimePicker.adjustSpinners();
+          });
+        }
       },
 
       maxTimePickerVisible(val) {
-        if (val) this.$nextTick(() => this.$refs.maxTimePicker.ajustScrollTop());
+        if (val) {
+          this.$nextTick(() => {
+            this.$refs.maxTimePicker.date = this.maxDate;
+            this.$refs.maxTimePicker.value = this.maxDate;
+            this.$refs.maxTimePicker.adjustSpinners();
+          });
+        }
       },
 
       value(newVal) {
@@ -285,10 +385,35 @@
           this.minDate = null;
           this.maxDate = null;
         } else if (Array.isArray(newVal)) {
-          this.minDate = newVal[0] ? toDate(newVal[0]) : null;
-          this.maxDate = newVal[1] ? toDate(newVal[1]) : null;
-          if (this.minDate) this.date = new Date(this.minDate);
-          this.handleConfirm(true);
+          this.minDate = isDate(newVal[0]) ? new Date(newVal[0]) : null;
+          this.maxDate = isDate(newVal[1]) ? new Date(newVal[1]) : null;
+          if (this.minDate) {
+            this.leftDate = this.minDate;
+            if (this.unlinkPanels && this.maxDate) {
+              const minDateYear = this.minDate.getFullYear();
+              const minDateMonth = this.minDate.getMonth();
+              const maxDateYear = this.maxDate.getFullYear();
+              const maxDateMonth = this.maxDate.getMonth();
+              this.rightDate = minDateYear === maxDateYear && minDateMonth === maxDateMonth
+                ? nextMonth(this.maxDate)
+                : this.maxDate;
+            } else {
+              this.rightDate = nextMonth(this.leftDate);
+            }
+          } else {
+            this.leftDate = calcDefaultValue(this.defaultValue)[0];
+            this.rightDate = nextMonth(this.leftDate);
+          }
+        }
+      },
+
+      defaultValue(val) {
+        if (!Array.isArray(this.value)) {
+          const [left, right] = calcDefaultValue(val);
+          this.leftDate = left;
+          this.rightDate = val && val[1] && this.unlinkPanels
+            ? right
+            : nextMonth(this.leftDate);
         }
       }
     },
@@ -297,51 +422,52 @@
       handleClear() {
         this.minDate = null;
         this.maxDate = null;
-        this.handleConfirm(false);
+        this.leftDate = calcDefaultValue(this.defaultValue)[0];
+        this.rightDate = nextMonth(this.leftDate);
+        this.$emit('pick', null);
+      },
+
+      handleChangeRange(val) {
+        this.minDate = val.minDate;
+        this.maxDate = val.maxDate;
+        this.rangeState = val.rangeState;
       },
 
       handleDateInput(event, type) {
         const value = event.target.value;
-        const parsedValue = parseDate(value, 'yyyy-MM-dd');
+        if (value.length !== this.dateFormat.length) return;
+        const parsedValue = parseDate(value, this.dateFormat);
 
         if (parsedValue) {
           if (typeof this.disabledDate === 'function' &&
             this.disabledDate(new Date(parsedValue))) {
             return;
           }
-          const target = new Date(type === 'min' ? this.minDate : this.maxDate);
-          if (target) {
-            target.setFullYear(parsedValue.getFullYear());
-            target.setMonth(parsedValue.getMonth(), parsedValue.getDate());
+          if (type === 'min') {
+            this.minDate = new Date(parsedValue);
+            this.leftDate = new Date(parsedValue);
+            this.rightDate = nextMonth(this.leftDate);
+          } else {
+            this.maxDate = new Date(parsedValue);
+            this.leftDate = prevMonth(parsedValue);
+            this.rightDate = new Date(parsedValue);
           }
         }
       },
 
-      handleChangeRange(val) {
-        this.minDate = val.minDate;
-        this.maxDate = val.maxDate;
-        this.rangeState = val.rangeState;
-      },
-
       handleDateChange(event, type) {
         const value = event.target.value;
-        const parsedValue = parseDate(value, 'yyyy-MM-dd');
+        const parsedValue = parseDate(value, this.dateFormat);
         if (parsedValue) {
-          const target = new Date(type === 'min' ? this.minDate : this.maxDate);
-          if (target) {
-            target.setFullYear(parsedValue.getFullYear());
-            target.setMonth(parsedValue.getMonth(), parsedValue.getDate());
-          }
           if (type === 'min') {
-            if (target < this.maxDate) {
-              this.minDate = new Date(target.getTime());
+            this.minDate = modifyDate(this.minDate, parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate());
+            if (this.minDate > this.maxDate) {
+              this.maxDate = this.minDate;
             }
           } else {
-            if (target > this.minDate) {
-              this.maxDate = new Date(target.getTime());
-              if (this.minDate && this.minDate > this.maxDate) {
-                this.minDate = null;
-              }
+            this.maxDate = modifyDate(this.maxDate, parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate());
+            if (this.maxDate < this.minDate) {
+              this.minDate = this.maxDate;
             }
           }
         }
@@ -349,122 +475,166 @@
 
       handleTimeChange(event, type) {
         const value = event.target.value;
-        const parsedValue = parseDate(value, 'HH:mm:ss');
+        const parsedValue = parseDate(value, this.timeFormat);
         if (parsedValue) {
-          const target = new Date(type === 'min' ? this.minDate : this.maxDate);
-          if (target) {
-            target.setHours(parsedValue.getHours());
-            target.setMinutes(parsedValue.getMinutes());
-            target.setSeconds(parsedValue.getSeconds());
-          }
           if (type === 'min') {
-            if (target < this.maxDate) {
-              this.minDate = new Date(target.getTime());
+            this.minDate = modifyTime(this.minDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds());
+            if (this.minDate > this.maxDate) {
+              this.maxDate = this.minDate;
             }
+            this.$refs.minTimePicker.value = this.minDate;
+            this.minTimePickerVisible = false;
           } else {
-            if (target > this.minDate) {
-              this.maxDate = new Date(target.getTime());
+            this.maxDate = modifyTime(this.maxDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds());
+            if (this.maxDate < this.minDate) {
+              this.minDate = this.maxDate;
             }
+            this.$refs.maxTimePicker.value = this.minDate;
+            this.maxTimePickerVisible = false;
           }
-          this.$refs[type + 'TimePicker'].value = target;
-          this[type + 'TimePickerVisible'] = false;
         }
       },
 
       handleRangePick(val, close = true) {
-        if (this.maxDate === val.maxDate && this.minDate === val.minDate) {
+        const defaultTime = this.defaultTime || [];
+        const minDate = modifyWithTimeString(val.minDate, defaultTime[0]);
+        const maxDate = modifyWithTimeString(val.maxDate, defaultTime[1]);
+
+        if (this.maxDate === maxDate && this.minDate === minDate) {
           return;
         }
         this.onPick && this.onPick(val);
-        this.maxDate = val.maxDate;
-        this.minDate = val.minDate;
+        this.maxDate = maxDate;
+        this.minDate = minDate;
+
+        // workaround for https://github.com/ElemeFE/element/issues/7539, should remove this block when we don't have to care about Chromium 55 - 57
+        setTimeout(() => {
+          this.maxDate = maxDate;
+          this.minDate = minDate;
+        }, 10);
         if (!close || this.showTime) return;
         this.handleConfirm();
       },
 
-      changeToToday() {
-        this.date = new Date();
-      },
-
       handleShortcutClick(shortcut) {
         if (shortcut.onClick) {
           shortcut.onClick(this);
         }
       },
 
-      resetView() {
-        this.minTimePickerVisible = false;
-        this.maxTimePickerVisible = false;
-      },
-
-      setTime(date, value) {
-        let oldDate = new Date(date.getTime());
-        let hour = value.getHours();
-        let minute = value.getMinutes();
-        let second = value.getSeconds();
-        oldDate.setHours(hour);
-        oldDate.setMinutes(minute);
-        oldDate.setSeconds(second);
-        return new Date(oldDate.getTime());
-      },
-
       handleMinTimePick(value, visible, first) {
         this.minDate = this.minDate || new Date();
         if (value) {
-          this.minDate = this.setTime(this.minDate, value);
+          this.minDate = modifyTime(this.minDate, value.getHours(), value.getMinutes(), value.getSeconds());
         }
 
         if (!first) {
           this.minTimePickerVisible = visible;
         }
-      },
 
-      handleMaxTimePick(value, visible, first) {
-        if (!this.maxDate) {
-          const now = new Date();
-          if (now >= this.minDate) {
-            this.maxDate = new Date();
-          }
+        if (!this.maxDate || this.maxDate && this.maxDate.getTime() < this.minDate.getTime()) {
+          this.maxDate = new Date(this.minDate);
         }
+      },
 
+      handleMinTimeClose() {
+        this.minTimePickerVisible = false;
+      },
+
+      handleMaxTimePick(value, visible, first) {
         if (this.maxDate && value) {
-          this.maxDate = this.setTime(this.maxDate, value);
+          this.maxDate = modifyTime(this.maxDate, value.getHours(), value.getMinutes(), value.getSeconds());
         }
 
         if (!first) {
           this.maxTimePickerVisible = visible;
         }
+
+        if (this.maxDate && this.minDate && this.minDate.getTime() > this.maxDate.getTime()) {
+          this.minDate = new Date(this.maxDate);
+        }
       },
 
-      prevMonth() {
-        this.date = prevMonth(this.date);
+      handleMaxTimeClose() {
+        this.maxTimePickerVisible = false;
       },
 
-      nextMonth() {
-        this.date = nextMonth(this.date);
+      // leftPrev*, rightNext* need to take care of `unlinkPanels`
+      leftPrevYear() {
+        this.leftDate = prevYear(this.leftDate);
+        if (!this.unlinkPanels) {
+          this.rightDate = nextMonth(this.leftDate);
+        }
       },
 
-      nextYear() {
-        const date = this.date;
-        date.setFullYear(date.getFullYear() + 1);
-        this.resetDate();
+      leftPrevMonth() {
+        this.leftDate = prevMonth(this.leftDate);
+        if (!this.unlinkPanels) {
+          this.rightDate = nextMonth(this.leftDate);
+        }
       },
 
-      prevYear() {
-        const date = this.date;
-        date.setFullYear(date.getFullYear() - 1);
-        this.resetDate();
+      rightNextYear() {
+        if (!this.unlinkPanels) {
+          this.leftDate = nextYear(this.leftDate);
+          this.rightDate = nextMonth(this.leftDate);
+        } else {
+          this.rightDate = nextYear(this.rightDate);
+        }
+      },
+
+      rightNextMonth() {
+        if (!this.unlinkPanels) {
+          this.leftDate = nextMonth(this.leftDate);
+          this.rightDate = nextMonth(this.leftDate);
+        } else {
+          this.rightDate = nextMonth(this.rightDate);
+        }
+      },
+
+      // leftNext*, rightPrev* are called when `unlinkPanels` is true
+      leftNextYear() {
+        this.leftDate = nextYear(this.leftDate);
+      },
+
+      leftNextMonth() {
+        this.leftDate = nextMonth(this.leftDate);
+      },
+
+      rightPrevYear() {
+        this.rightDate = prevYear(this.rightDate);
+      },
+
+      rightPrevMonth() {
+        this.rightDate = prevMonth(this.rightDate);
       },
 
       handleConfirm(visible = false) {
-        this.$emit('pick', [this.minDate, this.maxDate], visible);
+        if (this.isValidValue([this.minDate, this.maxDate])) {
+          this.$emit('pick', [this.minDate, this.maxDate], visible);
+        }
       },
 
-      resetDate() {
-        this.date = new Date(this.date);
+      isValidValue(value) {
+        return Array.isArray(value) &&
+          value && value[0] && value[1] &&
+          isDate(value[0]) && isDate(value[1]) &&
+          value[0].getTime() <= value[1].getTime() && (
+          typeof this.disabledDate === 'function'
+            ? !this.disabledDate(value[0]) && !this.disabledDate(value[1])
+            : true
+        );
+      },
+
+      resetView() {
+        // NOTE: this is a hack to reset {min, max}Date on picker open.
+        // TODO: correct way of doing so is to refactor {min, max}Date to be dependent on value and internal selection state
+        //       an alternative would be resetView whenever picker becomes visible, should also investigate date-panel's resetView
+        this.minDate = this.value && isDate(this.value[0]) ? new Date(this.value[0]) : null;
+        this.maxDate = this.value && isDate(this.value[0]) ? new Date(this.value[1]) : null;
       }
     },
 
-    components: { TimePicker, DateTable, ElInput }
+    components: { TimePicker, DateTable, ElInput, ElButton }
   };
 </script>
diff --git a/packages/date-picker/src/panel/date.vue b/packages/date-picker/src/panel/date.vue
index adbd855088..88afe7647c 100644
--- a/packages/date-picker/src/panel/date.vue
+++ b/packages/date-picker/src/panel/date.vue
@@ -1,11 +1,8 @@
 <template>
-  <transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')">
+  <transition name="el-zoom-in-top" @after-enter="handleEnter" @after-leave="handleLeave">
     <div
       v-show="visible"
-      :style="{
-        width: width + 'px'
-      }"
-      class="el-picker-panel el-date-picker"
+      class="el-picker-panel el-date-picker el-popper"
       :class="[{
         'has-sidebar': $slots.sidebar || shortcuts,
         'has-time': showTime
@@ -16,7 +13,8 @@
           <button
             type="button"
             class="el-picker-panel__shortcut"
-            v-for="shortcut in shortcuts"
+            v-for="(shortcut, key) in shortcuts"
+            :key="key"
             @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</button>
         </div>
         <div class="el-picker-panel__body">
@@ -26,55 +24,65 @@
                 :placeholder="t('el.datepicker.selectDate')"
                 :value="visibleDate"
                 size="small"
-                @change.native="visibleDate = $event.target.value" />
+                @input="val => userInputDate = val"
+                @change="handleVisibleDateChange" />
             </span>
-            <span class="el-date-picker__editor-wrap">
+            <span class="el-date-picker__editor-wrap" v-clickoutside="handleTimePickClose">
               <el-input
                 ref="input"
-                @focus="timePickerVisible = !timePickerVisible"
+                @focus="timePickerVisible = true"
                 :placeholder="t('el.datepicker.selectTime')"
                 :value="visibleTime"
                 size="small"
-                @change.native="visibleTime = $event.target.value" />
+                @input="val => userInputTime = val"
+                @change="handleVisibleTimeChange" />
               <time-picker
                 ref="timepicker"
-                :date="date"
-                :picker-width="pickerWidth"
+                :time-arrow-control="arrowControl"
                 @pick="handleTimePick"
                 :visible="timePickerVisible"
-                @mounted="$refs.timepicker.format=timeFormat">
+                @mounted="proxyTimePickerDataProperties">
               </time-picker>
             </span>
           </div>
-          <div class="el-date-picker__header" v-show="currentView !== 'time'">
+          <div
+            class="el-date-picker__header"
+            :class="{ 'el-date-picker__header--bordered': currentView === 'year' || currentView === 'month' }"
+            v-show="currentView !== 'time'">
             <button
               type="button"
               @click="prevYear"
+              :aria-label="t(`el.datepicker.prevYear`)"
               class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left">
             </button>
             <button
               type="button"
               @click="prevMonth"
               v-show="currentView === 'date'"
+              :aria-label="t(`el.datepicker.prevMonth`)"
               class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left">
             </button>
             <span
               @click="showYearPicker"
+              role="button"
               class="el-date-picker__header-label">{{ yearLabel }}</span>
             <span
               @click="showMonthPicker"
               v-show="currentView === 'date'"
+              role="button"
               class="el-date-picker__header-label"
               :class="{ active: currentView === 'month' }">{{t(`el.datepicker.month${ month + 1 }`)}}</span>
             <button
               type="button"
               @click="nextYear"
+              :aria-label="t(`el.datepicker.nextYear`)"
               class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right">
             </button>
             <button
               type="button"
               @click="nextMonth"
               v-show="currentView === 'date'"
+              :aria-label="t(`el.datepicker.nextMonth`)"
               class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right">
             </button>
           </div>
@@ -83,27 +91,27 @@
             <date-table
               v-show="currentView === 'date'"
               @pick="handleDatePick"
-              :year="year"
-              :month="month"
-              :date="date"
-              :week="week"
               :selection-mode="selectionMode"
               :first-day-of-week="firstDayOfWeek"
+              :value="value"
+              :default-value="defaultValue ? new Date(defaultValue) : null"
+              :date="date"
               :disabled-date="disabledDate">
             </date-table>
             <year-table
-              ref="yearTable"
-              :year="year"
-              :date="date"
               v-show="currentView === 'year'"
               @pick="handleYearPick"
+              :value="value"
+              :default-value="defaultValue ? new Date(defaultValue) : null"
+              :date="date"
               :disabled-date="disabledDate">
             </year-table>
             <month-table
-              :month="month"
-              :date="date"
               v-show="currentView === 'month'"
               @pick="handleMonthPick"
+              :value="value"
+              :default-value="defaultValue ? new Date(defaultValue) : null"
+              :date="date"
               :disabled-date="disabledDate">
             </month-table>
           </div>
@@ -113,23 +121,49 @@
       <div
         class="el-picker-panel__footer"
         v-show="footerVisible && currentView === 'date'">
-        <a
-          href="JavaScript:"
+        <el-button
+          size="mini"
+          type="text"
+          class="el-picker-panel__link-btn"
+          @click="changeToNow"
+          v-show="selectionMode !== 'dates'">
+          {{ t('el.datepicker.now') }}
+        </el-button>
+        <el-button
+          plain
+          size="mini"
           class="el-picker-panel__link-btn"
-          @click="changeToNow">{{ t('el.datepicker.now') }}</a>
-        <button
-          type="button"
-          class="el-picker-panel__btn"
-          @click="confirm">{{ t('el.datepicker.confirm') }}</button>
+          @click="confirm">
+          {{ t('el.datepicker.confirm') }}
+        </el-button>
       </div>
     </div>
   </transition>
 </template>
 
 <script type="text/babel">
-  import { formatDate, parseDate, getWeekNumber } from '../util';
+  import {
+    formatDate,
+    parseDate,
+    getWeekNumber,
+    isDate,
+    modifyDate,
+    modifyTime,
+    modifyWithTimeString,
+    clearMilliseconds,
+    clearTime,
+    prevYear,
+    nextYear,
+    prevMonth,
+    nextMonth,
+    changeYearMonthAndClampDate,
+    extractDateFormat,
+    extractTimeFormat
+  } from '../util';
+  import Clickoutside from 'element-ui/src/utils/clickoutside';
   import Locale from 'element-ui/src/mixins/locale';
   import ElInput from 'element-ui/packages/input';
+  import ElButton from 'element-ui/packages/button';
   import TimePicker from './time';
   import YearTable from '../basic/year-table';
   import MonthTable from '../basic/month-table';
@@ -138,6 +172,8 @@
   export default {
     mixins: [Locale],
 
+    directives: { Clickoutside },
+
     watch: {
       showTime(val) {
         /* istanbul ignore if */
@@ -150,23 +186,23 @@
         });
       },
 
-      value(newVal) {
-        if (!newVal) return;
-        newVal = new Date(newVal);
-        if (!isNaN(newVal)) {
-          if (typeof this.disabledDate === 'function' &&
-            this.disabledDate(new Date(newVal))) {
-            return;
-          }
-          this.date = newVal;
-          this.year = newVal.getFullYear();
-          this.month = newVal.getMonth();
-          this.$emit('pick', newVal, false);
+      value(val) {
+        if (this.selectionMode === 'dates' && this.value) return;
+        if (isDate(val)) {
+          this.date = new Date(val);
+        } else {
+          this.date = this.getDefaultValue();
+        }
+      },
+
+      defaultValue(val) {
+        if (!isDate(this.value)) {
+          this.date = val ? new Date(val) : new Date();
         }
       },
 
       timePickerVisible(val) {
-        if (val) this.$nextTick(() => this.$refs.timepicker.ajustScrollTop());
+        if (val) this.$nextTick(() => this.$refs.timepicker.adjustSpinners());
       },
 
       selectionMode(newVal) {
@@ -175,28 +211,48 @@
           if (this.currentView !== 'year' || this.currentView !== 'month') {
             this.currentView = 'month';
           }
-        } else if (newVal === 'week') {
-          this.week = getWeekNumber(this.date);
+        } else if (newVal === 'dates') {
+          this.currentView = 'date';
         }
-      },
-
-      date(newVal) {
-        this.year = newVal.getFullYear();
-        this.month = newVal.getMonth();
-        if (this.selectionMode === 'week') this.week = getWeekNumber(newVal);
       }
     },
 
     methods: {
+      proxyTimePickerDataProperties() {
+        const format = timeFormat => {this.$refs.timepicker.format = timeFormat;};
+        const value = value => {this.$refs.timepicker.value = value;};
+        const date = date => {this.$refs.timepicker.date = date;};
+
+        this.$watch('value', value);
+        this.$watch('date', date);
+
+        format(this.timeFormat);
+        value(this.value);
+        date(this.date);
+      },
+
       handleClear() {
-        this.date = this.$options.defaultValue ? new Date(this.$options.defaultValue) : new Date();
-        this.$emit('pick');
+        this.date = this.getDefaultValue();
+        this.$emit('pick', null);
       },
 
-      resetDate() {
-        this.date = new Date(this.date);
+      emit(value, ...args) {
+        if (!value) {
+          this.$emit('pick', value, ...args);
+        } else if (Array.isArray(value)) {
+          const dates = value.map(date => this.showTime ? clearMilliseconds(date) : clearTime(date));
+          this.$emit('pick', dates, ...args);
+        } else {
+          this.$emit('pick', this.showTime ? clearMilliseconds(value) : clearTime(value), ...args);
+        }
+        this.userInputDate = null;
+        this.userInputTime = null;
       },
 
+      // resetDate() {
+      //   this.date = new Date(this.date);
+      // },
+
       showMonthPicker() {
         this.currentView = 'month';
       },
@@ -215,38 +271,26 @@
       // },
 
       prevMonth() {
-        this.month--;
-        if (this.month < 0) {
-          this.month = 11;
-          this.year--;
-        }
+        this.date = prevMonth(this.date);
       },
 
       nextMonth() {
-        this.month++;
-        if (this.month > 11) {
-          this.month = 0;
-          this.year++;
-        }
+        this.date = nextMonth(this.date);
       },
 
-      nextYear() {
+      prevYear() {
         if (this.currentView === 'year') {
-          this.$refs.yearTable.nextTenYear();
+          this.date = prevYear(this.date, 10);
         } else {
-          this.year++;
-          this.date.setFullYear(this.year);
-          this.resetDate();
+          this.date = prevYear(this.date);
         }
       },
 
-      prevYear() {
+      nextYear() {
         if (this.currentView === 'year') {
-          this.$refs.yearTable.prevTenYear();
+          this.date = nextYear(this.date, 10);
         } else {
-          this.year--;
-          this.date.setFullYear(this.year);
-          this.resetDate();
+          this.date = nextYear(this.date);
         }
       },
 
@@ -256,77 +300,83 @@
         }
       },
 
-      handleTimePick(picker, visible, first) {
-        if (picker) {
-          let oldDate = new Date(this.date.getTime());
-          let hour = picker.getHours();
-          let minute = picker.getMinutes();
-          let second = picker.getSeconds();
-          oldDate.setHours(hour);
-          oldDate.setMinutes(minute);
-          oldDate.setSeconds(second);
-          this.date = new Date(oldDate.getTime());
+      handleTimePick(value, visible, first) {
+        if (isDate(value)) {
+          const newDate = this.value
+            ? modifyTime(this.value, value.getHours(), value.getMinutes(), value.getSeconds())
+            : modifyWithTimeString(this.getDefaultValue(), this.defaultTime);
+          this.date = newDate;
+          this.emit(this.date, true);
+        } else {
+          this.emit(value, true);
         }
-
         if (!first) {
           this.timePickerVisible = visible;
         }
       },
 
+      handleTimePickClose() {
+        this.timePickerVisible = false;
+      },
+
       handleMonthPick(month) {
-        this.month = month;
-        const selectionMode = this.selectionMode;
-        if (selectionMode !== 'month') {
-          this.date.setMonth(month);
-          this.currentView = 'date';
-          this.resetDate();
+        if (this.selectionMode === 'month') {
+          this.date = modifyDate(this.date, this.year, month, 1);
+          this.emit(this.date);
         } else {
-          this.date.setMonth(month);
-          this.year && this.date.setFullYear(this.year);
-          this.resetDate();
-          const value = new Date(this.date.getFullYear(), month, 1);
-          this.$emit('pick', value);
+          this.date = changeYearMonthAndClampDate(this.date, this.year, month);
+          // TODO: should emit intermediate value ??
+          // this.emit(this.date);
+          this.currentView = 'date';
         }
       },
 
       handleDatePick(value) {
         if (this.selectionMode === 'day') {
-          if (!this.showTime) {
-            this.$emit('pick', new Date(value.getTime()));
-          }
-          this.date.setFullYear(value.getFullYear());
-          this.date.setMonth(value.getMonth(), value.getDate());
+          this.date = this.value
+            ? modifyDate(this.value, value.getFullYear(), value.getMonth(), value.getDate())
+            : modifyWithTimeString(value, this.defaultTime);
+          this.emit(this.date, this.showTime);
         } else if (this.selectionMode === 'week') {
-          this.week = value.week;
-          this.$emit('pick', value.date);
+          this.emit(value.date);
+        } else if (this.selectionMode === 'dates') {
+          this.emit(value, true); // set false to keep panel open
         }
-
-        this.resetDate();
       },
 
-      handleYearPick(year, close = true) {
-        this.year = year;
-        if (!close) return;
-
-        this.date.setFullYear(year);
+      handleYearPick(year) {
         if (this.selectionMode === 'year') {
-          this.$emit('pick', new Date(year, 0, 1));
+          this.date = modifyDate(this.date, year, 0, 1);
+          this.emit(this.date);
         } else {
+          this.date = changeYearMonthAndClampDate(this.date, year, this.month);
+          // TODO: should emit intermediate value ??
+          // this.emit(this.date, true);
           this.currentView = 'month';
         }
-
-        this.resetDate();
       },
 
       changeToNow() {
-        this.date.setTime(+new Date());
-        this.$emit('pick', new Date(this.date.getTime()));
-        this.resetDate();
+        // NOTE: not a permanent solution
+        //       consider disable "now" button in the future
+        if (!this.disabledDate || !this.disabledDate(new Date())) {
+          this.date = new Date();
+          this.emit(this.date);
+        }
       },
 
       confirm() {
-        this.date.setMilliseconds(0);
-        this.$emit('pick', this.date);
+        if (this.selectionMode === 'dates') {
+          this.emit(this.value);
+        } else {
+          // value were emitted in handle{Date,Time}Pick, nothing to update here
+          // deal with the scenario where: user opens the picker, then confirm without doing anything
+          const value = this.value
+            ? this.value
+            : modifyWithTimeString(this.getDefaultValue(), this.defaultTime);
+          this.date = new Date(value); // refresh date
+          this.emit(value);
+        }
       },
 
       resetView() {
@@ -337,31 +387,113 @@
         } else {
           this.currentView = 'date';
         }
+      },
+
+      handleEnter() {
+        document.body.addEventListener('keydown', this.handleKeydown);
+      },
+
+      handleLeave() {
+        this.$emit('dodestroy');
+        document.body.removeEventListener('keydown', this.handleKeydown);
+      },
+
+      handleKeydown(event) {
+        const keyCode = event.keyCode;
+        const list = [38, 40, 37, 39];
+        if (this.visible && !this.timePickerVisible) {
+          if (list.indexOf(keyCode) !== -1) {
+            this.handleKeyControl(keyCode);
+            event.stopPropagation();
+            event.preventDefault();
+          }
+          if (keyCode === 13 && this.userInputDate === null && this.userInputTime === null) { // Enter
+            this.emit(this.date, false);
+          }
+        }
+      },
+
+      handleKeyControl(keyCode) {
+        const mapping = {
+          'year': {
+            38: -4, 40: 4, 37: -1, 39: 1, offset: (date, step) => date.setFullYear(date.getFullYear() + step)
+          },
+          'month': {
+            38: -4, 40: 4, 37: -1, 39: 1, offset: (date, step) => date.setMonth(date.getMonth() + step)
+          },
+          'week': {
+            38: -1, 40: 1, 37: -1, 39: 1, offset: (date, step) => date.setDate(date.getDate() + step * 7)
+          },
+          'day': {
+            38: -7, 40: 7, 37: -1, 39: 1, offset: (date, step) => date.setDate(date.getDate() + step)
+          }
+        };
+        const mode = this.selectionMode;
+        const year = 3.1536e10;
+        const now = this.date.getTime();
+        const newDate = new Date(this.date.getTime());
+        while (Math.abs(now - newDate.getTime()) <= year) {
+          const map = mapping[mode];
+          map.offset(newDate, map[keyCode]);
+          if (typeof this.disabledDate === 'function' && this.disabledDate(newDate)) {
+            continue;
+          }
+          this.date = newDate;
+          this.$emit('pick', newDate, true);
+          break;
+        }
+      },
+
+      handleVisibleTimeChange(value) {
+        const time = parseDate(value, this.timeFormat);
+        if (time) {
+          this.date = modifyDate(time, this.year, this.month, this.monthDate);
+          this.userInputTime = null;
+          this.$refs.timepicker.value = this.date;
+          this.timePickerVisible = false;
+          this.emit(this.date, true);
+        }
+      },
 
-        if (this.selectionMode !== 'week') {
-          this.year = this.date.getFullYear();
-          this.month = this.date.getMonth();
+      handleVisibleDateChange(value) {
+        const date = parseDate(value, this.dateFormat);
+        if (date) {
+          if (typeof this.disabledDate === 'function' && this.disabledDate(date)) {
+            return;
+          }
+          this.date = modifyTime(date, this.date.getHours(), this.date.getMinutes(), this.date.getSeconds());
+          this.userInputDate = null;
+          this.resetView();
+          this.emit(this.date, true);
         }
+      },
+
+      isValidValue(value) {
+        return value && !isNaN(value) && (
+          typeof this.disabledDate === 'function'
+            ? !this.disabledDate(value)
+            : true
+        );
+      },
+
+      getDefaultValue() {
+        // if default-value is set, return it
+        // otherwise, return now (the moment this method gets called)
+        return this.defaultValue ? new Date(this.defaultValue) : new Date();
       }
     },
 
     components: {
-      TimePicker, YearTable, MonthTable, DateTable, ElInput
-    },
-
-    mounted() {
-      if (this.date && !this.year) {
-        this.year = this.date.getFullYear();
-        this.month = this.date.getMonth();
-      }
+      TimePicker, YearTable, MonthTable, DateTable, ElInput, ElButton
     },
 
     data() {
       return {
         popperClass: '',
-        pickerWidth: 0,
-        date: this.$options.defaultValue ? new Date(this.$options.defaultValue) : new Date(),
+        date: new Date(),
         value: '',
+        defaultValue: null, // use getDefaultValue() for time computation
+        defaultTime: null,
         showTime: false,
         selectionMode: 'day',
         shortcuts: '',
@@ -369,68 +501,56 @@
         currentView: 'date',
         disabledDate: '',
         firstDayOfWeek: 7,
-        year: null,
-        month: null,
-        week: null,
         showWeekNumber: false,
         timePickerVisible: false,
-        width: 0,
-        format: ''
+        format: '',
+        arrowControl: false,
+        userInputDate: null,
+        userInputTime: null
       };
     },
 
     computed: {
+      year() {
+        return this.date.getFullYear();
+      },
+
+      month() {
+        return this.date.getMonth();
+      },
+
+      week() {
+        return getWeekNumber(this.date);
+      },
+
+      monthDate() {
+        return this.date.getDate();
+      },
+
       footerVisible() {
-        return this.showTime;
-      },
-
-      visibleTime: {
-        get() {
-          return formatDate(this.date, this.timeFormat);
-        },
-
-        set(val) {
-          if (val) {
-            const date = parseDate(val, this.timeFormat);
-            if (date) {
-              date.setFullYear(this.date.getFullYear());
-              date.setMonth(this.date.getMonth());
-              date.setDate(this.date.getDate());
-              this.date = date;
-              this.$refs.timepicker.value = date;
-              this.timePickerVisible = false;
-            }
-          }
-        }
+        return this.showTime || this.selectionMode === 'dates';
       },
 
-      visibleDate: {
-        get() {
-          return formatDate(this.date, this.dateFormat);
-        },
+      visibleTime() {
+        if (this.userInputTime !== null) {
+          return this.userInputTime;
+        } else {
+          return formatDate(this.value || this.defaultValue, this.timeFormat);
+        }
+      },
 
-        set(val) {
-          const date = parseDate(val, this.dateFormat);
-          if (!date) {
-            return;
-          }
-          if (typeof this.disabledDate === 'function' && this.disabledDate(date)) {
-            return;
-          }
-          date.setHours(this.date.getHours());
-          date.setMinutes(this.date.getMinutes());
-          date.setSeconds(this.date.getSeconds());
-          this.date = date;
-          this.resetView();
+      visibleDate() {
+        if (this.userInputDate !== null) {
+          return this.userInputDate;
+        } else {
+          return formatDate(this.value || this.defaultValue, this.dateFormat);
         }
       },
 
       yearLabel() {
-        const year = this.year;
-        if (!year) return '';
         const yearTranslation = this.t('el.datepicker.year');
         if (this.currentView === 'year') {
-          const startYear = Math.floor(year / 10) * 10;
+          const startYear = Math.floor(this.year / 10) * 10;
           if (yearTranslation) {
             return startYear + ' ' + yearTranslation + ' - ' + (startYear + 9) + ' ' + yearTranslation;
           }
@@ -440,8 +560,8 @@
       },
 
       timeFormat() {
-        if (this.format && this.format.indexOf('ss') === -1) {
-          return 'HH:mm';
+        if (this.format) {
+          return extractTimeFormat(this.format);
         } else {
           return 'HH:mm:ss';
         }
@@ -449,7 +569,7 @@
 
       dateFormat() {
         if (this.format) {
-          return this.format.replace('HH:mm', '').replace(':ss', '').trim();
+          return extractDateFormat(this.format);
         } else {
           return 'yyyy-MM-dd';
         }
diff --git a/packages/date-picker/src/panel/time-range.vue b/packages/date-picker/src/panel/time-range.vue
index fca298d03f..f65772e95d 100644
--- a/packages/date-picker/src/panel/time-range.vue
+++ b/packages/date-picker/src/panel/time-range.vue
@@ -1,43 +1,41 @@
 <template>
   <transition
     name="el-zoom-in-top"
-    @before-enter="panelCreated"
     @after-leave="$emit('dodestroy')">
     <div
       v-show="visible"
-      :style="{ width: width + 'px' }"
-      class="el-time-range-picker el-picker-panel"
+      class="el-time-range-picker el-picker-panel el-popper"
       :class="popperClass">
       <div class="el-time-range-picker__content">
         <div class="el-time-range-picker__cell">
           <div class="el-time-range-picker__header">{{ t('el.datepicker.startTime') }}</div>
           <div
-            :class="{ 'has-seconds': showSeconds }"
+            :class="{ 'has-seconds': showSeconds, 'is-arrow': arrowControl }"
             class="el-time-range-picker__body el-time-panel__content">
             <time-spinner
               ref="minSpinner"
               :show-seconds="showSeconds"
+              :am-pm-mode="amPmMode"
               @change="handleMinChange"
+              :arrow-control="arrowControl"
               @select-range="setMinSelectionRange"
-              :hours="minHours"
-              :minutes="minMinutes"
-              :seconds="minSeconds">
+              :date="minDate">
             </time-spinner>
           </div>
         </div>
         <div class="el-time-range-picker__cell">
           <div class="el-time-range-picker__header">{{ t('el.datepicker.endTime') }}</div>
           <div
-            :class="{ 'has-seconds': showSeconds }"
+            :class="{ 'has-seconds': showSeconds, 'is-arrow': arrowControl }"
             class="el-time-range-picker__body el-time-panel__content">
             <time-spinner
               ref="maxSpinner"
               :show-seconds="showSeconds"
+              :am-pm-mode="amPmMode"
               @change="handleMaxChange"
+              :arrow-control="arrowControl"
               @select-range="setMaxSelectionRange"
-              :hours="maxHours"
-              :minutes="maxMinutes"
-              :seconds="maxSeconds">
+              :date="maxDate">
             </time-spinner>
           </div>
         </div>
@@ -58,27 +56,30 @@
 </template>
 
 <script type="text/babel">
-  import { parseDate, limitRange } from '../util';
+  import {
+    parseDate,
+    limitTimeRange,
+    modifyDate,
+    clearMilliseconds,
+    timeWithinRange
+  } from '../util';
   import Locale from 'element-ui/src/mixins/locale';
   import TimeSpinner from '../basic/time-spinner';
 
   const MIN_TIME = parseDate('00:00:00', 'HH:mm:ss');
   const MAX_TIME = parseDate('23:59:59', 'HH:mm:ss');
-  const isDisabled = function(minTime, maxTime) {
-    const minValue = minTime.getHours() * 3600 + minTime.getMinutes() * 60 + minTime.getSeconds();
-    const maxValue = maxTime.getHours() * 3600 + maxTime.getMinutes() * 60 + maxTime.getSeconds();
 
-    return minValue > maxValue;
+  const minTimeOfDay = function(date) {
+    return modifyDate(MIN_TIME, date.getFullYear(), date.getMonth(), date.getDate());
   };
-  const clacTime = function(time) {
-    time = Array.isArray(time) ? time : [time];
-    const minTime = time[0] || new Date();
-    const date = new Date();
-    date.setHours(date.getHours() + 1);
-    const maxTime = time[1] || date;
-
-    if (minTime > maxTime) return clacTime();
-    return { minTime, maxTime };
+  
+  const maxTimeOfDay = function(date) {
+    return modifyDate(MAX_TIME, date.getFullYear(), date.getMonth(), date.getDate());
+  };
+
+  // increase time by amount of milliseconds, but within the range of day
+  const advanceTime = function(date, amount) {
+    return new Date(Math.min(date.getTime() + amount, maxTimeOfDay(date).getTime()));
   };
 
   export default {
@@ -89,136 +90,159 @@
     computed: {
       showSeconds() {
         return (this.format || '').indexOf('ss') !== -1;
+      },
+
+      offset() {
+        return this.showSeconds ? 11 : 8;
+      },
+
+      spinner() {
+        return this.selectionRange[0] < this.offset ? this.$refs.minSpinner : this.$refs.maxSpinner;
+      },
+
+      btnDisabled() {
+        return this.minDate.getTime() > this.maxDate.getTime();
+      },
+      amPmMode() {
+        if ((this.format || '').indexOf('A') !== -1) return 'A';
+        if ((this.format || '').indexOf('a') !== -1) return 'a';
+        return '';
       }
     },
 
-    props: ['value'],
-
     data() {
-      const time = clacTime(this.$options.defaultValue);
-
       return {
         popperClass: '',
-        minTime: time.minTime,
-        maxTime: time.maxTime,
-        btnDisabled: isDisabled(time.minTime, time.maxTime),
-        maxHours: time.maxTime.getHours(),
-        maxMinutes: time.maxTime.getMinutes(),
-        maxSeconds: time.maxTime.getSeconds(),
-        minHours: time.minTime.getHours(),
-        minMinutes: time.minTime.getMinutes(),
-        minSeconds: time.minTime.getSeconds(),
+        minDate: new Date(),
+        maxDate: new Date(),
+        value: [],
+        oldValue: [new Date(), new Date()],
+        defaultValue: null,
         format: 'HH:mm:ss',
         visible: false,
-        width: 0
+        selectionRange: [0, 2],
+        arrowControl: false
       };
     },
 
     watch: {
-      value(newVal) {
-        this.panelCreated();
-        this.$nextTick(_ => this.ajustScrollTop());
+      value(value) {
+        if (Array.isArray(value)) {
+          this.minDate = new Date(value[0]);
+          this.maxDate = new Date(value[1]);
+        } else {
+          if (Array.isArray(this.defaultValue)) {
+            this.minDate = new Date(this.defaultValue[0]);
+            this.maxDate = new Date(this.defaultValue[1]);
+          } else if (this.defaultValue) {
+            this.minDate = new Date(this.defaultValue);
+            this.maxDate = advanceTime(new Date(this.defaultValue), 60 * 60 * 1000);
+          } else {
+            this.minDate = new Date();
+            this.maxDate = advanceTime(new Date(), 60 * 60 * 1000);
+          }
+        }
+      },
+
+      visible(val) {
+        if (val) {
+          this.oldValue = this.value;
+          this.$nextTick(() => this.$refs.minSpinner.emitSelectRange('hours'));
+        }
       }
     },
 
     methods: {
-      panelCreated() {
-        const time = clacTime(this.value);
-        if (time.minTime === this.minTime && time.maxTime === this.maxTime) {
-          return;
-        }
-
-        this.handleMinChange({
-          hours: time.minTime.getHours(),
-          minutes: time.minTime.getMinutes(),
-          seconds: time.minTime.getSeconds()
-        });
-        this.handleMaxChange({
-          hours: time.maxTime.getHours(),
-          minutes: time.maxTime.getMinutes(),
-          seconds: time.maxTime.getSeconds()
-        });
-      },
-
       handleClear() {
-        this.handleCancel();
+        this.$emit('pick', null);
       },
 
       handleCancel() {
-        this.$emit('pick');
+        this.$emit('pick', this.oldValue);
       },
 
-      handleChange() {
-        if (this.minTime > this.maxTime) return;
-        MIN_TIME.setFullYear(this.minTime.getFullYear());
-        MIN_TIME.setMonth(this.minTime.getMonth(), this.minTime.getDate());
-        MAX_TIME.setFullYear(this.maxTime.getFullYear());
-        MAX_TIME.setMonth(this.maxTime.getMonth(), this.maxTime.getDate());
-        this.$refs.minSpinner.selectableRange = [[MIN_TIME, this.maxTime]];
-        this.$refs.maxSpinner.selectableRange = [[this.minTime, MAX_TIME]];
-        this.handleConfirm(true);
+      handleMinChange(date) {
+        this.minDate = clearMilliseconds(date);
+        this.handleChange();
       },
 
       handleMaxChange(date) {
-        if (date.hours !== undefined) {
-          this.maxTime.setHours(date.hours);
-          this.maxHours = this.maxTime.getHours();
-        }
-        if (date.minutes !== undefined) {
-          this.maxTime.setMinutes(date.minutes);
-          this.maxMinutes = this.maxTime.getMinutes();
-        }
-        if (date.seconds !== undefined) {
-          this.maxTime.setSeconds(date.seconds);
-          this.maxSeconds = this.maxTime.getSeconds();
-        }
+        this.maxDate = clearMilliseconds(date);
         this.handleChange();
       },
 
-      handleMinChange(date) {
-        if (date.hours !== undefined) {
-          this.minTime.setHours(date.hours);
-          this.minHours = this.minTime.getHours();
-        }
-        if (date.minutes !== undefined) {
-          this.minTime.setMinutes(date.minutes);
-          this.minMinutes = this.minTime.getMinutes();
-        }
-        if (date.seconds !== undefined) {
-          this.minTime.setSeconds(date.seconds);
-          this.minSeconds = this.minTime.getSeconds();
+      handleChange() {
+        if (this.isValidValue([this.minDate, this.maxDate])) {
+          this.$refs.minSpinner.selectableRange = [[minTimeOfDay(this.minDate), this.maxDate]];
+          this.$refs.maxSpinner.selectableRange = [[this.minDate, maxTimeOfDay(this.maxDate)]];
+          this.$emit('pick', [this.minDate, this.maxDate], true);
         }
-
-        this.handleChange();
       },
 
       setMinSelectionRange(start, end) {
-        this.$emit('select-range', start, end);
+        this.$emit('select-range', start, end, 'min');
+        this.selectionRange = [start, end];
       },
 
       setMaxSelectionRange(start, end) {
-        this.$emit('select-range', start + 11, end + 11);
+        this.$emit('select-range', start, end, 'max');
+        this.selectionRange = [start + this.offset, end + this.offset];
       },
 
-      handleConfirm(visible = false, first = false) {
+      handleConfirm(visible = false) {
         const minSelectableRange = this.$refs.minSpinner.selectableRange;
         const maxSelectableRange = this.$refs.maxSpinner.selectableRange;
 
-        this.minTime = limitRange(this.minTime, minSelectableRange);
-        this.maxTime = limitRange(this.maxTime, maxSelectableRange);
+        this.minDate = limitTimeRange(this.minDate, minSelectableRange, this.format);
+        this.maxDate = limitTimeRange(this.maxDate, maxSelectableRange, this.format);
 
-        if (first) return;
-        this.$emit('pick', [this.minTime, this.maxTime], visible, first);
+        this.$emit('pick', [this.minDate, this.maxDate], visible);
       },
 
-      ajustScrollTop() {
-        this.$refs.minSpinner.ajustScrollTop();
-        this.$refs.maxSpinner.ajustScrollTop();
-      }
-    },
+      adjustSpinners() {
+        this.$refs.minSpinner.adjustSpinners();
+        this.$refs.maxSpinner.adjustSpinners();
+      },
 
-    mounted() {
-      this.$nextTick(() => this.handleConfirm(true, true));
+      changeSelectionRange(step) {
+        const list = this.showSeconds ? [0, 3, 6, 11, 14, 17] : [0, 3, 8, 11];
+        const mapping = ['hours', 'minutes'].concat(this.showSeconds ? ['seconds'] : []);
+        const index = list.indexOf(this.selectionRange[0]);
+        const next = (index + step + list.length) % list.length;
+        const half = list.length / 2;
+        if (next < half) {
+          this.$refs.minSpinner.emitSelectRange(mapping[next]);
+        } else {
+          this.$refs.maxSpinner.emitSelectRange(mapping[next - half]);
+        }
+      },
+
+      isValidValue(date) {
+        return Array.isArray(date) &&
+          timeWithinRange(this.minDate, this.$refs.minSpinner.selectableRange) &&
+          timeWithinRange(this.maxDate, this.$refs.maxSpinner.selectableRange);
+      },
+
+      handleKeydown(event) {
+        const keyCode = event.keyCode;
+        const mapping = { 38: -1, 40: 1, 37: -1, 39: 1 };
+
+        // Left or Right
+        if (keyCode === 37 || keyCode === 39) {
+          const step = mapping[keyCode];
+          this.changeSelectionRange(step);
+          event.preventDefault();
+          return;
+        }
+
+        // Up or Down
+        if (keyCode === 38 || keyCode === 40) {
+          const step = mapping[keyCode];
+          this.spinner.scrollDown(step);
+          event.preventDefault();
+          return;
+        }
+      }
     }
   };
 </script>
diff --git a/packages/date-picker/src/panel/time-select.vue b/packages/date-picker/src/panel/time-select.vue
index 7c227a2e48..230cfaf27e 100644
--- a/packages/date-picker/src/panel/time-select.vue
+++ b/packages/date-picker/src/panel/time-select.vue
@@ -5,11 +5,11 @@
       v-show="visible"
       :style="{ width: width + 'px' }"
       :class="popperClass"
-      class="el-picker-panel time-select">
+      class="el-picker-panel time-select el-popper">
       <el-scrollbar noresize wrap-class="el-picker-panel__content">
         <div class="time-select-item"
           v-for="item in items"
-          :class="{ selected: value === item.value, disabled: item.disabled }"
+          :class="{ selected: value === item.value, disabled: item.disabled, default: item.value === defaultValue }"
           :disabled="item.disabled"
           @click="handleClick(item)">{{ item.value }}</div>
       </el-scrollbar>
@@ -78,11 +78,6 @@
     watch: {
       value(val) {
         if (!val) return;
-        if (this.minTime && compareTime(val, this.minTime) < 0) {
-          this.$emit('pick');
-        } else if (this.maxTime && compareTime(val, this.maxTime) > 0) {
-          this.$emit('pick');
-        }
         this.$nextTick(() => this.scrollToOption());
       }
     },
@@ -95,16 +90,48 @@
       },
 
       handleClear() {
-        this.$emit('pick');
+        this.$emit('pick', null);
       },
 
-      scrollToOption(className = 'selected') {
+      scrollToOption(selector = '.selected') {
         const menu = this.$refs.popper.querySelector('.el-picker-panel__content');
-        scrollIntoView(menu, menu.getElementsByClassName(className)[0]);
+        scrollIntoView(menu, menu.querySelector(selector));
       },
 
       handleMenuEnter() {
-        this.$nextTick(() => this.scrollToOption());
+        const selected = this.items.map(item => item.value).indexOf(this.value) !== -1;
+        const hasDefault = this.items.map(item => item.value).indexOf(this.defaultValue) !== -1;
+        const option = (selected && '.selected') || (hasDefault && '.default') || '.time-select-item:not(.disabled)';
+        this.$nextTick(() => this.scrollToOption(option));
+      },
+
+      scrollDown(step) {
+        const items = this.items;
+        const length = items.length;
+        let total = items.length;
+        let index = items.map(item => item.value).indexOf(this.value);
+        while (total--) {
+          index = (index + step + length) % length;
+          if (!items[index].disabled) {
+            this.$emit('pick', items[index].value, true);
+            return;
+          }
+        }
+      },
+
+      isValidValue(date) {
+        return this.items.filter(item => !item.disabled).map(item => item.value).indexOf(date) !== -1;
+      },
+
+      handleKeydown(event) {
+        const keyCode = event.keyCode;
+        if (keyCode === 38 || keyCode === 40) {
+          const mapping = { 40: 1, 38: -1 };
+          const offset = mapping[keyCode.toString()];
+          this.scrollDown(offset);
+          event.stopPropagation();
+          return;
+        }
       }
     },
 
@@ -115,6 +142,7 @@
         end: '18:00',
         step: '00:30',
         value: '',
+        defaultValue: '',
         visible: false,
         minTime: '',
         maxTime: '',
diff --git a/packages/date-picker/src/panel/time.vue b/packages/date-picker/src/panel/time.vue
index 0d2c11a97f..e5bef1f81c 100644
--- a/packages/date-picker/src/panel/time.vue
+++ b/packages/date-picker/src/panel/time.vue
@@ -1,19 +1,18 @@
 <template>
   <transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')">
     <div
-      v-show="currentVisible"
-      :style="{width: width + 'px'}"
-      class="el-time-panel"
+      v-show="visible"
+      class="el-time-panel el-popper"
       :class="popperClass">
       <div class="el-time-panel__content" :class="{ 'has-seconds': showSeconds }">
         <time-spinner
           ref="spinner"
           @change="handleChange"
+          :arrow-control="useArrow"
           :show-seconds="showSeconds"
+          :am-pm-mode="amPmMode"
           @select-range="setSelectionRange"
-          :hours="hours"
-          :minutes="minutes"
-          :seconds="seconds">
+          :date="date">
         </time-spinner>
       </div>
       <div class="el-time-panel__footer">
@@ -23,7 +22,8 @@
           @click="handleCancel">{{ t('el.datepicker.cancel') }}</button>
         <button
           type="button"
-          class="el-time-panel__btn confirm"
+          class="el-time-panel__btn"
+          :class="{confirm: !disabled}"
           @click="handleConfirm()">{{ t('el.datepicker.confirm') }}</button>
       </div>
     </div>
@@ -31,53 +31,55 @@
 </template>
 
 <script type="text/babel">
-  import { limitRange } from '../util';
+  import { limitTimeRange, isDate, clearMilliseconds, timeWithinRange } from '../util';
   import Locale from 'element-ui/src/mixins/locale';
+  import TimeSpinner from '../basic/time-spinner';
 
   export default {
     mixins: [Locale],
 
     components: {
-      TimeSpinner: require('../basic/time-spinner')
+      TimeSpinner
     },
 
     props: {
-      pickerWidth: {},
-      date: {
-        default() {
-          return new Date();
-        }
-      },
-      visible: Boolean
+      visible: Boolean,
+      timeArrowControl: Boolean
     },
 
     watch: {
       visible(val) {
-        this.currentVisible = val;
-      },
-
-      pickerWidth(val) {
-        this.width = val;
+        if (val) {
+          this.oldValue = this.value;
+          this.$nextTick(() => this.$refs.spinner.emitSelectRange('hours'));
+        } else {
+          this.needInitAdjust = true;
+        }
       },
 
       value(newVal) {
         let date;
         if (newVal instanceof Date) {
-          date = limitRange(newVal, this.selectableRange);
+          date = limitTimeRange(newVal, this.selectableRange, this.format);
         } else if (!newVal) {
-          date = new Date();
+          date = this.defaultValue ? new Date(this.defaultValue) : new Date();
         }
 
-        this.handleChange({
-          hours: date.getHours(),
-          minutes: date.getMinutes(),
-          seconds: date.getSeconds()
-        });
-        this.$nextTick(_ => this.ajustScrollTop());
+        this.date = date;
+        if (this.visible && this.needInitAdjust) {
+          this.$nextTick(_ => this.adjustSpinners());
+          this.needInitAdjust = false;
+        }
       },
 
       selectableRange(val) {
         this.$refs.spinner.selectableRange = val;
+      },
+
+      defaultValue(val) {
+        if (!isDate(this.value)) {
+          this.date = val ? new Date(val) : new Date();
+        }
       }
     },
 
@@ -86,67 +88,94 @@
         popperClass: '',
         format: 'HH:mm:ss',
         value: '',
-        hours: 0,
-        minutes: 0,
-        seconds: 0,
+        defaultValue: null,
+        date: new Date(),
+        oldValue: new Date(),
         selectableRange: [],
-        currentDate: this.$options.defaultValue || this.date || new Date(),
-        currentVisible: this.visible || false,
-        width: this.pickerWidth || 0
+        selectionRange: [0, 2],
+        disabled: false,
+        arrowControl: false,
+        needInitAdjust: true
       };
     },
 
     computed: {
       showSeconds() {
         return (this.format || '').indexOf('ss') !== -1;
+      },
+      useArrow() {
+        return this.arrowControl || this.timeArrowControl || false;
+      },
+      amPmMode() {
+        if ((this.format || '').indexOf('A') !== -1) return 'A';
+        if ((this.format || '').indexOf('a') !== -1) return 'a';
+        return '';
       }
     },
 
     methods: {
-      handleClear() {
-        this.$emit('pick');
-      },
-
       handleCancel() {
-        this.$emit('pick');
+        this.$emit('pick', this.oldValue, false);
       },
 
       handleChange(date) {
-        if (date.hours !== undefined) {
-          this.currentDate.setHours(date.hours);
-          this.hours = this.currentDate.getHours();
-        }
-        if (date.minutes !== undefined) {
-          this.currentDate.setMinutes(date.minutes);
-          this.minutes = this.currentDate.getMinutes();
+        // this.visible avoids edge cases, when use scrolls during panel closing animation
+        if (this.visible) {
+          this.date = clearMilliseconds(date);
+          // if date is out of range, do not emit
+          if (this.isValidValue(this.date)) {
+            this.$emit('pick', this.date, true);
+          }
         }
-        if (date.seconds !== undefined) {
-          this.currentDate.setSeconds(date.seconds);
-          this.seconds = this.currentDate.getSeconds();
-        }
-
-        this.handleConfirm(true);
       },
 
       setSelectionRange(start, end) {
         this.$emit('select-range', start, end);
+        this.selectionRange = [start, end];
       },
 
       handleConfirm(visible = false, first) {
         if (first) return;
-        const date = new Date(limitRange(this.currentDate, this.selectableRange, 'HH:mm:ss'));
+        const date = clearMilliseconds(limitTimeRange(this.date, this.selectableRange, this.format));
         this.$emit('pick', date, visible, first);
       },
 
-      ajustScrollTop() {
-        return this.$refs.spinner.ajustScrollTop();
-      }
-    },
+      handleKeydown(event) {
+        const keyCode = event.keyCode;
+        const mapping = { 38: -1, 40: 1, 37: -1, 39: 1 };
+
+        // Left or Right
+        if (keyCode === 37 || keyCode === 39) {
+          const step = mapping[keyCode];
+          this.changeSelectionRange(step);
+          event.preventDefault();
+          return;
+        }
+
+        // Up or Down
+        if (keyCode === 38 || keyCode === 40) {
+          const step = mapping[keyCode];
+          this.$refs.spinner.scrollDown(step);
+          event.preventDefault();
+          return;
+        }
+      },
+
+      isValidValue(date) {
+        return timeWithinRange(date, this.selectableRange, this.format);
+      },
 
-    created() {
-      this.hours = this.currentDate.getHours();
-      this.minutes = this.currentDate.getMinutes();
-      this.seconds = this.currentDate.getSeconds();
+      adjustSpinners() {
+        return this.$refs.spinner.adjustSpinners();
+      },
+
+      changeSelectionRange(step) {
+        const list = [0, 3].concat(this.showSeconds ? [6] : []);
+        const mapping = ['hours', 'minutes'].concat(this.showSeconds ? ['seconds'] : []);
+        const index = list.indexOf(this.selectionRange[0]);
+        const next = (index + step + list.length) % list.length;
+        this.$refs.spinner.emitSelectRange(mapping[next]);
+      }
     },
 
     mounted() {
diff --git a/packages/date-picker/src/picker.vue b/packages/date-picker/src/picker.vue
index 8de9d2ce2f..a2265fcb29 100644
--- a/packages/date-picker/src/picker.vue
+++ b/packages/date-picker/src/picker.vue
@@ -2,45 +2,105 @@
   <el-input
     class="el-date-editor"
     :class="'el-date-editor--' + type"
-    :readonly="!editable || readonly"
-    :disabled="disabled"
-    :size="size"
+    :readonly="!editable || readonly || type === 'dates'"
+    :disabled="pickerDisabled"
+    :size="pickerSize"
+    :name="name"
+    v-bind="firstInputId"
+    v-if="!ranged"
     v-clickoutside="handleClose"
     :placeholder="placeholder"
     @focus="handleFocus"
-    @blur="handleBlur"
     @keydown.native="handleKeydown"
     :value="displayValue"
-    @change.native="displayValue = $event.target.value"
+    @input="value => userInput = value"
+    @change="handleChange"
+    @mouseenter.native="handleMouseEnter"
+    @mouseleave.native="showClose = false"
     :validateEvent="false"
     ref="reference">
-    <i slot="icon"
+    <i slot="prefix"
+      class="el-input__icon"
+      :class="triggerClass"
+      @click="handleFocus">
+    </i>
+    <i slot="suffix"
       class="el-input__icon"
       @click="handleClickIcon"
-      :class="[showClose ? 'el-icon-close' : triggerClass]"
-      @mouseenter="handleMouseEnterIcon"
-      @mouseleave="showClose = false"
+      :class="[showClose ? '' + clearIcon : '']"
       v-if="haveTrigger">
     </i>
   </el-input>
+  <div
+    class="el-date-editor el-range-editor el-input__inner"
+    :class="[
+      'el-date-editor--' + type,
+      pickerSize ? `el-range-editor--${ pickerSize }` : '',
+      pickerDisabled ? 'is-disabled' : '',
+      pickerVisible ? 'is-active' : ''
+    ]"
+    @click="handleRangeClick"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="showClose = false"
+    @keydown="handleKeydown"
+    ref="reference"
+    v-clickoutside="handleClose"
+    v-else>
+    <i :class="['el-input__icon', 'el-range__icon', triggerClass]"></i>
+    <input
+      autocomplete="off"
+      :placeholder="startPlaceholder"
+      :value="displayValue && displayValue[0]"
+      :disabled="pickerDisabled"
+      v-bind="firstInputId"
+      :readonly="!editable || readonly"
+      :name="name && name[0]"
+      @input="handleStartInput"
+      @change="handleStartChange"
+      @focus="handleFocus"
+      class="el-range-input">
+    <span class="el-range-separator">{{ rangeSeparator }}</span>
+    <input
+      autocomplete="off"
+      :placeholder="endPlaceholder"
+      :value="displayValue && displayValue[1]"
+      :disabled="pickerDisabled"
+      v-bind="secondInputId"
+      :readonly="!editable || readonly"
+      :name="name && name[1]"
+      @input="handleEndInput"
+      @change="handleEndChange"
+      @focus="handleFocus"
+      class="el-range-input">
+    <i
+      @click="handleClickIcon"
+      v-if="haveTrigger"
+      :class="[showClose ? '' + clearIcon : '']"
+      class="el-input__icon el-range__close-icon">
+    </i>
+  </div>
 </template>
 
 <script>
 import Vue from 'vue';
 import Clickoutside from 'element-ui/src/utils/clickoutside';
-import { formatDate, parseDate, getWeekNumber, equalDate, isDate } from './util';
+import { formatDate, parseDate, isDateObject, getWeekNumber } from './util';
 import Popper from 'element-ui/src/utils/vue-popper';
 import Emitter from 'element-ui/src/mixins/emitter';
 import ElInput from 'element-ui/packages/input';
+import merge from 'element-ui/src/utils/merge';
 
 const NewPopper = {
   props: {
     appendToBody: Popper.props.appendToBody,
     offset: Popper.props.offset,
-    boundariesPadding: Popper.props.boundariesPadding
+    boundariesPadding: Popper.props.boundariesPadding,
+    arrowOffset: Popper.props.arrowOffset
   },
   methods: Popper.methods,
-  data: Popper.data,
+  data() {
+    return merge({ visibleArrow: true }, Popper.data);
+  },
   beforeDestroy: Popper.beforeDestroy
 };
 
@@ -65,32 +125,37 @@ const HAVE_TRIGGER_TYPES = [
   'year',
   'daterange',
   'timerange',
-  'datetimerange'
+  'datetimerange',
+  'dates'
 ];
 const DATE_FORMATTER = function(value, format) {
+  if (format === 'timestamp') return value.getTime();
   return formatDate(value, format);
 };
 const DATE_PARSER = function(text, format) {
+  if (format === 'timestamp') return new Date(Number(text));
   return parseDate(text, format);
 };
-const RANGE_FORMATTER = function(value, format, separator) {
+const RANGE_FORMATTER = function(value, format) {
   if (Array.isArray(value) && value.length === 2) {
     const start = value[0];
     const end = value[1];
 
     if (start && end) {
-      return formatDate(start, format) + separator + formatDate(end, format);
+      return [DATE_FORMATTER(start, format), DATE_FORMATTER(end, format)];
     }
   }
   return '';
 };
-const RANGE_PARSER = function(text, format, separator) {
-  const array = text.split(separator);
+const RANGE_PARSER = function(array, format, separator) {
+  if (!Array.isArray(array)) {
+    array = array.split(separator);
+  }
   if (array.length === 2) {
     const range1 = array[0];
     const range2 = array[1];
 
-    return [parseDate(range1, format), parseDate(range2, format)];
+    return [DATE_PARSER(range1, format), DATE_PARSER(range2, format)];
   }
   return [];
 };
@@ -107,12 +172,18 @@ const TYPE_VALUE_RESOLVER_MAP = {
   },
   week: {
     formatter(value, format) {
-      let date = formatDate(value, format);
-      const week = getWeekNumber(value);
+      let week = getWeekNumber(value);
+      let month = value.getMonth();
+      const trueDate = new Date(value);
+      if (week === 1 && month === 11) {
+        trueDate.setHours(0, 0, 0, 0);
+        trueDate.setDate(trueDate.getDate() + 3 - (trueDate.getDay() + 6) % 7);
+      }
+      let date = formatDate(trueDate, format);
 
       date = /WW/.test(date)
-            ? date.replace(/WW/, week < 10 ? '0' + week : week)
-            : date.replace(/W/, week);
+        ? date.replace(/WW/, week < 10 ? '0' + week : week)
+        : date.replace(/W/, week);
       return date;
     },
     parser(text) {
@@ -174,6 +245,15 @@ const TYPE_VALUE_RESOLVER_MAP = {
         return null;
       }
     }
+  },
+  dates: {
+    formatter(value, format) {
+      return value.map(date => DATE_FORMATTER(date, format));
+    },
+    parser(value, format) {
+      return (typeof value === 'string' ? value.split(', ') : value)
+        .map(date => date instanceof Date ? date : DATE_PARSER(date, format));
+    }
   }
 };
 const PLACEMENT_MAP = {
@@ -182,33 +262,112 @@ const PLACEMENT_MAP = {
   right: 'bottom-end'
 };
 
-// only considers date-picker's value: Date or [Date, Date]
+const parseAsFormatAndType = (value, customFormat, type, rangeSeparator = '-') => {
+  if (!value) return null;
+  const parser = (
+    TYPE_VALUE_RESOLVER_MAP[type] ||
+    TYPE_VALUE_RESOLVER_MAP['default']
+  ).parser;
+  const format = customFormat || DEFAULT_FORMATS[type];
+  return parser(value, format, rangeSeparator);
+};
+
+const formatAsFormatAndType = (value, customFormat, type) => {
+  if (!value) return null;
+  const formatter = (
+    TYPE_VALUE_RESOLVER_MAP[type] ||
+    TYPE_VALUE_RESOLVER_MAP['default']
+  ).formatter;
+  const format = customFormat || DEFAULT_FORMATS[type];
+  return formatter(value, format);
+};
+
+/*
+ * Considers:
+ *   1. Date object
+ *   2. date string
+ *   3. array of 1 or 2
+ */
 const valueEquals = function(a, b) {
+  // considers Date object and string
+  const dateEquals = function(a, b) {
+    const aIsDate = a instanceof Date;
+    const bIsDate = b instanceof Date;
+    if (aIsDate && bIsDate) {
+      return a.getTime() === b.getTime();
+    }
+    if (!aIsDate && !bIsDate) {
+      return a === b;
+    }
+    return false;
+  };
+
   const aIsArray = a instanceof Array;
   const bIsArray = b instanceof Array;
   if (aIsArray && bIsArray) {
-    return new Date(a[0]).getTime() === new Date(b[0]).getTime() &&
-           new Date(a[1]).getTime() === new Date(b[1]).getTime();
+    if (a.length !== b.length) {
+      return false;
+    }
+    return a.every((item, index) => dateEquals(item, b[index]));
   }
   if (!aIsArray && !bIsArray) {
-    return new Date(a).getTime() === new Date(b).getTime();
+    return dateEquals(a, b);
   }
   return false;
 };
 
+const isString = function(val) {
+  return typeof val === 'string' || val instanceof String;
+};
+
+const validator = function(val) {
+  // either: String, Array of String, null / undefined
+  return (
+    val === null ||
+    val === undefined ||
+    isString(val) ||
+    (Array.isArray(val) && val.length === 2 && val.every(isString))
+  );
+};
+
 export default {
   mixins: [Emitter, NewPopper],
 
+  inject: {
+    elForm: {
+      default: ''
+    },
+    elFormItem: {
+      default: ''
+    }
+  },
+
   props: {
     size: String,
     format: String,
+    valueFormat: String,
     readonly: Boolean,
     placeholder: String,
+    startPlaceholder: String,
+    endPlaceholder: String,
+    prefixIcon: String,
+    clearIcon: {
+      type: String,
+      default: 'el-icon-circle-close'
+    },
+    name: {
+      default: '',
+      validator
+    },
     disabled: Boolean,
     clearable: {
       type: Boolean,
       default: true
     },
+    id: {
+      default: '',
+      validator
+    },
     popperClass: String,
     editable: {
       type: Boolean,
@@ -220,10 +379,12 @@ export default {
     },
     value: {},
     defaultValue: {},
+    defaultTime: {},
     rangeSeparator: {
-      default: ' - '
+      default: '-'
     },
-    pickerOptions: {}
+    pickerOptions: {},
+    unlinkPanels: Boolean
   },
 
   components: { ElInput },
@@ -234,49 +395,67 @@ export default {
     return {
       pickerVisible: false,
       showClose: false,
-      currentValue: '',
+      userInput: null,
+      valueOnOpen: null, // value when picker opens, used to determine whether to emit change
       unwatchPickerOptions: null
     };
   },
 
   watch: {
     pickerVisible(val) {
-      if (!val) this.dispatch('ElFormItem', 'el.form.blur');
-      if (this.readonly || this.disabled) return;
-      val ? this.showPicker() : this.hidePicker();
-    },
-    currentValue(val) {
-      if (val) return;
-      if (this.picker && typeof this.picker.handleClear === 'function') {
-        this.picker.handleClear();
+      if (this.readonly || this.pickerDisabled) return;
+      if (val) {
+        this.showPicker();
+        this.valueOnOpen = Array.isArray(this.value) ? [...this.value] : this.value;
       } else {
-        this.$emit('input');
+        this.hidePicker();
+        this.emitChange(this.value);
+        this.userInput = null;
+        this.dispatch('ElFormItem', 'el.form.blur');
+        this.$emit('blur', this);
+        this.blur();
       }
     },
-    value: {
+    parsedValue: {
       immediate: true,
       handler(val) {
-        this.currentValue = isDate(val) ? new Date(val) : val;
+        if (this.picker) {
+          this.picker.value = val;
+        }
+      }
+    },
+    defaultValue(val) {
+      // NOTE: should eventually move to jsx style picker + panel ?
+      if (this.picker) {
+        this.picker.defaultValue = val;
       }
     },
-    displayValue(val) {
-      this.$emit('change', val);
-      this.dispatch('ElFormItem', 'el.form.change');
+    value(val, oldVal) {
+      if (!valueEquals(val, oldVal) && !this.pickerVisible) {
+        this.dispatch('ElFormItem', 'el.form.change', val);
+      }
     }
   },
 
   computed: {
+    ranged() {
+      return this.type.indexOf('range') > -1;
+    },
+
     reference() {
-      return this.$refs.reference.$el;
+      const reference = this.$refs.reference;
+      return reference.$el || reference;
     },
 
     refInput() {
-      if (this.reference) return this.reference.querySelector('input');
-      return {};
+      if (this.reference) {
+        return [].slice.call(this.reference.querySelectorAll('input'));
+      }
+      return [];
     },
 
     valueIsEmpty() {
-      const val = this.currentValue;
+      const val = this.value;
       if (Array.isArray(val)) {
         for (let i = 0, len = val.length; i < len; i++) {
           if (val[i]) {
@@ -292,7 +471,7 @@ export default {
     },
 
     triggerClass() {
-      return this.type.indexOf('time') !== -1 ? 'el-icon-time' : 'el-icon-date';
+      return this.prefixIcon || (this.type.indexOf('time') !== -1 ? 'el-icon-time' : 'el-icon-date');
     },
 
     selectionMode() {
@@ -302,6 +481,8 @@ export default {
         return 'month';
       } else if (this.type === 'year') {
         return 'year';
+      } else if (this.type === 'dates') {
+        return 'dates';
       }
 
       return 'day';
@@ -314,37 +495,74 @@ export default {
       return HAVE_TRIGGER_TYPES.indexOf(this.type) !== -1;
     },
 
-    displayValue: {
-      get() {
-        const value = this.currentValue;
-        if (!value) return;
-        const formatter = (
-          TYPE_VALUE_RESOLVER_MAP[this.type] ||
-          TYPE_VALUE_RESOLVER_MAP['default']
-        ).formatter;
-        const format = DEFAULT_FORMATS[this.type];
+    displayValue() {
+      const formattedValue = formatAsFormatAndType(this.parsedValue, this.format, this.type, this.rangeSeparator);
+      if (Array.isArray(this.userInput)) {
+        return [
+          this.userInput[0] || (formattedValue && formattedValue[0]) || '',
+          this.userInput[1] || (formattedValue && formattedValue[1]) || ''
+        ];
+      } else if (this.userInput !== null) {
+        return this.userInput;
+      } else if (formattedValue) {
+        return this.type === 'dates'
+          ? formattedValue.join(', ')
+          : formattedValue;
+      } else {
+        return '';
+      }
+    },
 
-        return formatter(value, this.format || format, this.rangeSeparator);
-      },
+    parsedValue() {
+      if (!this.value) return this.value; // component value is not set
+      if (this.type === 'time-select') return this.value; // time-select does not require parsing, this might change in next major version
 
-      set(value) {
-        if (value) {
-          const type = this.type;
-          const parser = (
-            TYPE_VALUE_RESOLVER_MAP[type] ||
-            TYPE_VALUE_RESOLVER_MAP['default']
-          ).parser;
-          const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type], this.rangeSeparator);
-
-          if (parsedValue && this.picker) {
-            this.picker.value = parsedValue;
-          }
-        } else {
-          this.$emit('input', value);
-          this.picker.value = value;
-        }
-        this.$forceUpdate();
+      const valueIsDateObject = isDateObject(this.value) || (Array.isArray(this.value) && this.value.every(isDateObject));
+      if (valueIsDateObject) {
+        return this.value;
+      }
+
+      if (this.valueFormat) {
+        return parseAsFormatAndType(this.value, this.valueFormat, this.type, this.rangeSeparator) || this.value;
+      }
+
+      // NOTE: deal with common but incorrect usage, should remove in next major version
+      // user might provide string / timestamp without value-format, coerce them into date (or array of date)
+      return Array.isArray(this.value) ? this.value.map(val => new Date(val)) : new Date(this.value);
+    },
+
+    _elFormItemSize() {
+      return (this.elFormItem || {}).elFormItemSize;
+    },
+
+    pickerSize() {
+      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+    },
+
+    pickerDisabled() {
+      return this.disabled || (this.elForm || {}).disabled;
+    },
+
+    firstInputId() {
+      const obj = {};
+      let id;
+      if (this.ranged) {
+        id = this.id && this.id[0];
+      } else {
+        id = this.id;
+      }
+      if (id) obj.id = id;
+      return obj;
+    },
+
+    secondInputId() {
+      const obj = {};
+      let id;
+      if (this.ranged) {
+        id = this.id && this.id[1];
       }
+      if (id) obj.id = id;
+      return obj;
     }
   },
 
@@ -355,42 +573,149 @@ export default {
       gpuAcceleration: false
     };
     this.placement = PLACEMENT_MAP[this.align] || PLACEMENT_MAP.left;
+
+    this.$on('fieldReset', this.handleFieldReset);
   },
 
   methods: {
-    handleMouseEnterIcon() {
-      if (this.readonly || this.disabled) return;
+    focus() {
+      if (!this.ranged) {
+        this.$refs.reference.focus();
+      } else {
+        this.handleFocus();
+      }
+    },
+
+    blur() {
+      this.refInput.forEach(input => input.blur());
+    },
+
+    // {parse, formatTo} Value deals maps component value with internal Date
+    parseValue(value) {
+      const isParsed = isDateObject(value) || (Array.isArray(value) && value.every(isDateObject));
+      if (this.valueFormat && !isParsed) {
+        return parseAsFormatAndType(value, this.valueFormat, this.type, this.rangeSeparator) || value;
+      } else {
+        return value;
+      }
+    },
+
+    formatToValue(date) {
+      const isFormattable = isDateObject(date) || (Array.isArray(date) && date.every(isDateObject));
+      if (this.valueFormat && isFormattable) {
+        return formatAsFormatAndType(date, this.valueFormat, this.type, this.rangeSeparator);
+      } else {
+        return date;
+      }
+    },
+
+    // {parse, formatTo} String deals with user input
+    parseString(value) {
+      const type = Array.isArray(value) ? this.type : this.type.replace('range', '');
+      return parseAsFormatAndType(value, this.format, type);
+    },
+
+    formatToString(value) {
+      const type = Array.isArray(value) ? this.type : this.type.replace('range', '');
+      return formatAsFormatAndType(value, this.format, type);
+    },
+
+    handleMouseEnter() {
+      if (this.readonly || this.pickerDisabled) return;
       if (!this.valueIsEmpty && this.clearable) {
         this.showClose = true;
       }
     },
 
-    handleClickIcon() {
-      if (this.readonly || this.disabled) return;
-      if (this.showClose) {
-        this.currentValue = this.$options.defaultValue || '';
-        this.showClose = false;
+    handleChange() {
+      if (this.userInput) {
+        const value = this.parseString(this.displayValue);
+        if (value) {
+          this.picker.value = value;
+          if (this.isValidValue(value)) {
+            this.emitInput(value);
+            this.userInput = null;
+          }
+        }
+      }
+      if (this.userInput === '') {
+        this.emitInput(null);
+        this.emitChange(null);
+        this.userInput = null;
+      }
+    },
+
+    handleStartInput(event) {
+      if (this.userInput) {
+        this.userInput = [event.target.value, this.userInput[1]];
       } else {
-        this.pickerVisible = !this.pickerVisible;
+        this.userInput = [event.target.value, null];
       }
     },
 
-    dateChanged(dateA, dateB) {
-      if (Array.isArray(dateA)) {
-        let len = dateA.length;
-        if (!dateB) return true;
-        while (len--) {
-          if (!equalDate(dateA[len], dateB[len])) return true;
-        }
+    handleEndInput(event) {
+      if (this.userInput) {
+        this.userInput = [this.userInput[0], event.target.value];
       } else {
-        if (!equalDate(dateA, dateB)) return true;
+        this.userInput = [null, event.target.value];
       }
+    },
 
-      return false;
+    handleStartChange(event) {
+      const value = this.parseString(this.userInput && this.userInput[0]);
+      if (value) {
+        this.userInput = [this.formatToString(value), this.displayValue[1]];
+        const newValue = [value, this.picker.value && this.picker.value[1]];
+        this.picker.value = newValue;
+        if (this.isValidValue(newValue)) {
+          this.emitInput(newValue);
+          this.userInput = null;
+        }
+      }
+    },
+
+    handleEndChange(event) {
+      const value = this.parseString(this.userInput && this.userInput[1]);
+      if (value) {
+        this.userInput = [this.displayValue[0], this.formatToString(value)];
+        const newValue = [this.picker.value && this.picker.value[0], value];
+        this.picker.value = newValue;
+        if (this.isValidValue(newValue)) {
+          this.emitInput(newValue);
+          this.userInput = null;
+        }
+      }
+    },
+
+    handleClickIcon(event) {
+      if (this.readonly || this.pickerDisabled) return;
+      if (this.showClose) {
+        this.valueOnOpen = this.value;
+        event.stopPropagation();
+        this.emitInput(null);
+        this.emitChange(null);
+        this.showClose = false;
+        if (this.picker && typeof this.picker.handleClear === 'function') {
+          this.picker.handleClear();
+        }
+      } else {
+        this.pickerVisible = !this.pickerVisible;
+      }
     },
 
     handleClose() {
+      if (!this.pickerVisible) return;
       this.pickerVisible = false;
+
+      if (this.type === 'dates') {
+        // restore to former value
+        const oldValue = parseAsFormatAndType(this.valueOnOpen, this.valueFormat, this.type, this.rangeSeparator) || this.valueOnOpen;
+        this.emitInput(oldValue);
+      }
+    },
+
+    handleFieldReset(initialValue) {
+      this.userInput = initialValue === '' ? null : initialValue;
     },
 
     handleFocus() {
@@ -402,18 +727,66 @@ export default {
       this.$emit('focus', this);
     },
 
-    handleBlur() {
-      this.$emit('blur', this);
-    },
-
     handleKeydown(event) {
       const keyCode = event.keyCode;
 
-      // TAB or ESC
-      if (keyCode === 9 || keyCode === 27) {
+      // ESC
+      if (keyCode === 27) {
         this.pickerVisible = false;
         event.stopPropagation();
+        return;
       }
+
+      // Tab
+      if (keyCode === 9) {
+        if (!this.ranged) {
+          this.handleChange();
+          this.pickerVisible = this.picker.visible = false;
+          this.blur();
+          event.stopPropagation();
+        } else {
+          // user may change focus between two input
+          setTimeout(() => {
+            if (this.refInput.indexOf(document.activeElement) === -1) {
+              this.pickerVisible = false;
+              this.blur();
+              event.stopPropagation();
+            }
+          }, 0);
+        }
+        return;
+      }
+
+      // Enter
+      if (keyCode === 13) {
+        if (this.userInput === '' || this.isValidValue(this.parseString(this.displayValue))) {
+          this.handleChange();
+          this.pickerVisible = this.picker.visible = false;
+          this.blur();
+        }
+        event.stopPropagation();
+        return;
+      }
+
+      // if user is typing, do not let picker handle key input
+      if (this.userInput) {
+        event.stopPropagation();
+        return;
+      }
+
+      // delegate other keys to panel
+      if (this.picker && this.picker.handleKeydown) {
+        this.picker.handleKeydown(event);
+      }
+    },
+
+    handleRangeClick() {
+      const type = this.type;
+
+      if (HAVE_TRIGGER_TYPES.indexOf(type) !== -1 && !this.pickerVisible) {
+        this.pickerVisible = true;
+      }
+      this.$emit('focus', this);
     },
 
     hidePicker() {
@@ -433,29 +806,28 @@ export default {
 
       this.updatePopper();
 
-      if (this.currentValue instanceof Date) {
-        this.picker.date = new Date(this.currentValue.getTime());
-      } else {
-        this.picker.value = this.currentValue;
-      }
+      this.picker.value = this.parsedValue;
       this.picker.resetView && this.picker.resetView();
 
       this.$nextTick(() => {
-        this.picker.ajustScrollTop && this.picker.ajustScrollTop();
+        this.picker.adjustSpinners && this.picker.adjustSpinners();
       });
     },
 
     mountPicker() {
-      this.panel.defaultValue = this.defaultValue || this.currentValue;
       this.picker = new Vue(this.panel).$mount();
+      this.picker.defaultValue = this.defaultValue;
+      this.picker.defaultTime = this.defaultTime;
       this.picker.popperClass = this.popperClass;
       this.popperElm = this.picker.$el;
       this.picker.width = this.reference.getBoundingClientRect().width;
       this.picker.showTime = this.type === 'datetime' || this.type === 'datetimerange';
       this.picker.selectionMode = this.selectionMode;
-      if (this.format) {
-        this.picker.format = this.format;
-      }
+      this.picker.unlinkPanels = this.unlinkPanels;
+      this.picker.arrowControl = this.arrowControl || this.timeArrowControl || false;
+      this.$watch('format', (format) => {
+        this.picker.format = format;
+      });
 
       const updateOptions = () => {
         const options = this.pickerOptions;
@@ -476,6 +848,11 @@ export default {
             this.picker[option] = options[option];
           }
         }
+
+        // main format must prevail over undocumented pickerOptions.format
+        if (this.format) {
+          this.picker.format = this.format;
+        }
       };
       updateOptions();
       this.unwatchPickerOptions = this.$watch('pickerOptions', () => updateOptions(), { deep: true });
@@ -485,17 +862,21 @@ export default {
 
       this.picker.$on('dodestroy', this.doDestroy);
       this.picker.$on('pick', (date = '', visible = false) => {
-        // do not emit if values are same
-        if (!valueEquals(this.value, date)) {
-          this.$emit('input', date);
-        }
+        this.userInput = null;
         this.pickerVisible = this.picker.visible = visible;
+        this.emitInput(date);
         this.picker.resetView && this.picker.resetView();
       });
 
-      this.picker.$on('select-range', (start, end) => {
-        this.refInput.setSelectionRange(start, end);
-        this.refInput.focus();
+      this.picker.$on('select-range', (start, end, pos) => {
+        if (this.refInput.length === 0) return;
+        if (!pos || pos === 'min') {
+          this.refInput[0].setSelectionRange(start, end);
+          this.refInput[0].focus();
+        } else if (pos === 'max') {
+          this.refInput[1].setSelectionRange(start, end);
+          this.refInput[1].focus();
+        }
       });
     },
 
@@ -508,6 +889,33 @@ export default {
         }
         this.picker.$el.parentNode.removeChild(this.picker.$el);
       }
+    },
+
+    emitChange(val) {
+      // determine user real change only
+      if (!valueEquals(val, this.valueOnOpen)) {
+        this.$emit('change', val);
+        this.dispatch('ElFormItem', 'el.form.change', val);
+        this.valueOnOpen = val;
+      }
+    },
+
+    emitInput(val) {
+      const formatted = this.formatToValue(val);
+      if (!valueEquals(this.value, formatted)) {
+        this.$emit('input', formatted);
+      }
+    },
+
+    isValidValue(value) {
+      if (!this.picker) {
+        this.mountPicker();
+      }
+      if (this.picker.isValidValue) {
+        return value && this.picker.isValidValue(value);
+      } else {
+        return true;
+      }
     }
   }
 };
diff --git a/packages/date-picker/src/picker/date-picker.js b/packages/date-picker/src/picker/date-picker.js
index b4e815188d..63a7df366f 100644
--- a/packages/date-picker/src/picker/date-picker.js
+++ b/packages/date-picker/src/picker/date-picker.js
@@ -18,7 +18,8 @@ export default {
     type: {
       type: String,
       default: 'date'
-    }
+    },
+    timeArrowControl: Boolean
   },
 
   watch: {
diff --git a/packages/date-picker/src/picker/time-picker.js b/packages/date-picker/src/picker/time-picker.js
index 6834e515b8..7cb3d9c66e 100644
--- a/packages/date-picker/src/picker/time-picker.js
+++ b/packages/date-picker/src/picker/time-picker.js
@@ -8,7 +8,8 @@ export default {
   name: 'ElTimePicker',
 
   props: {
-    isRange: Boolean
+    isRange: Boolean,
+    arrowControl: Boolean
   },
 
   data() {
diff --git a/packages/date-picker/src/picker/time-select.js b/packages/date-picker/src/picker/time-select.js
index fca8d56486..7fba4d0418 100644
--- a/packages/date-picker/src/picker/time-select.js
+++ b/packages/date-picker/src/picker/time-select.js
@@ -6,8 +6,16 @@ export default {
 
   name: 'ElTimeSelect',
 
+  componentName: 'ElTimeSelect',
+
+  props: {
+    type: {
+      type: String,
+      default: 'time-select'
+    }
+  },
+
   beforeCreate() {
-    this.type = 'time-select';
     this.panel = Panel;
   }
 };
diff --git a/packages/date-picker/src/util/index.js b/packages/date-picker/src/util/index.js
index 96d2cadbbc..7833f3e96a 100644
--- a/packages/date-picker/src/util/index.js
+++ b/packages/date-picker/src/util/index.js
@@ -3,12 +3,14 @@ import { t } from 'element-ui/src/locale';
 
 const weeks = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
 const months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
-
-dateUtil.i18n = {
-  dayNamesShort: weeks.map(week => t(`el.datepicker.weeks.${ week }`)),
-  dayNames: weeks.map(week => t(`el.datepicker.weeks.${ week }`)),
-  monthNamesShort: months.map(month => t(`el.datepicker.months.${ month }`)),
-  monthNames: months.map((month, index) => t(`el.datepicker.month${ index + 1 }`))
+const getI18nSettings = () => {
+  return {
+    dayNamesShort: weeks.map(week => t(`el.datepicker.weeks.${ week }`)),
+    dayNames: weeks.map(week => t(`el.datepicker.weeks.${ week }`)),
+    monthNamesShort: months.map(month => t(`el.datepicker.months.${ month }`)),
+    monthNames: months.map((month, index) => t(`el.datepicker.month${ index + 1 }`)),
+    amPm: ['am', 'pm']
+  };
 };
 
 const newArray = function(start, end) {
@@ -19,10 +21,6 @@ const newArray = function(start, end) {
   return result;
 };
 
-export const equalDate = function(dateA, dateB) {
-  return dateA === dateB || new Date(dateA).getTime() === new Date(dateB).getTime();
-};
-
 export const toDate = function(date) {
   return isDate(date) ? new Date(date) : null;
 };
@@ -30,17 +28,22 @@ export const toDate = function(date) {
 export const isDate = function(date) {
   if (date === null || date === undefined) return false;
   if (isNaN(new Date(date).getTime())) return false;
+  if (Array.isArray(date)) return false; // deal with `new Date([ new Date() ]) -> new Date()`
   return true;
 };
 
+export const isDateObject = function(val) {
+  return val instanceof Date;
+};
+
 export const formatDate = function(date, format) {
   date = toDate(date);
   if (!date) return '';
-  return dateUtil.format(date, format || 'yyyy-MM-dd');
+  return dateUtil.format(date, format || 'yyyy-MM-dd', getI18nSettings());
 };
 
 export const parseDate = function(string, format) {
-  return dateUtil.parse(string, format || 'yyyy-MM-dd');
+  return dateUtil.parse(string, format || 'yyyy-MM-dd', getI18nSettings());
 };
 
 export const getDayCountOfMonth = function(year, month) {
@@ -59,28 +62,41 @@ export const getDayCountOfMonth = function(year, month) {
   return 31;
 };
 
+export const getDayCountOfYear = function(year) {
+  const isLeapYear = year % 400 === 0 || (year % 100 !== 0 && year % 4 === 0);
+  return isLeapYear ? 366 : 365;
+};
+
 export const getFirstDayOfMonth = function(date) {
   const temp = new Date(date.getTime());
   temp.setDate(1);
   return temp.getDay();
 };
 
-export const DAY_DURATION = 86400000;
+// see: https://stackoverflow.com/questions/3674539/incrementing-a-date-in-javascript
+// {prev, next} Date should work for Daylight Saving Time
+// Adding 24 * 60 * 60 * 1000 does not work in the above scenario
+export const prevDate = function(date, amount = 1) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate() - amount);
+};
+
+export const nextDate = function(date, amount = 1) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);
+};
 
 export const getStartDateOfMonth = function(year, month) {
   const result = new Date(year, month, 1);
   const day = result.getDay();
 
   if (day === 0) {
-    result.setTime(result.getTime() - DAY_DURATION * 7);
+    return prevDate(result, 7);
   } else {
-    result.setTime(result.getTime() - DAY_DURATION * day);
+    return prevDate(result, day);
   }
-
-  return result;
 };
 
 export const getWeekNumber = function(src) {
+  if (!isDate(src)) return null;
   const date = new Date(src.getTime());
   date.setHours(0, 0, 0, 0);
   // Thursday in current week decides the year.
@@ -88,47 +104,10 @@ export const getWeekNumber = function(src) {
   // January 4 is always in week 1.
   const week1 = new Date(date.getFullYear(), 0, 4);
   // Adjust to Thursday in week 1 and count number of weeks from date to week 1.
+  // Rounding should be fine for Daylight Saving Time. Its shift should never be more than 12 hours.
   return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7);
 };
 
-export const prevMonth = function(src) {
-  const year = src.getFullYear();
-  const month = src.getMonth();
-  const date = src.getDate();
-
-  const newYear = month === 0 ? year - 1 : year;
-  const newMonth = month === 0 ? 11 : month - 1;
-
-  const newMonthDayCount = getDayCountOfMonth(newYear, newMonth);
-  if (newMonthDayCount < date) {
-    src.setDate(newMonthDayCount);
-  }
-
-  src.setMonth(newMonth);
-  src.setFullYear(newYear);
-
-  return new Date(src.getTime());
-};
-
-export const nextMonth = function(src) {
-  const year = src.getFullYear();
-  const month = src.getMonth();
-  const date = src.getDate();
-
-  const newYear = month === 11 ? year + 1 : year;
-  const newMonth = month === 11 ? 0 : month + 1;
-
-  const newMonthDayCount = getDayCountOfMonth(newYear, newMonth);
-  if (newMonthDayCount < date) {
-    src.setDate(newMonthDayCount);
-  }
-
-  src.setMonth(newMonth);
-  src.setFullYear(newYear);
-
-  return new Date(src.getTime());
-};
-
 export const getRangeHours = function(ranges) {
   const hours = [];
   let disabledHours = [];
@@ -152,26 +131,143 @@ export const getRangeHours = function(ranges) {
   return hours;
 };
 
-export const limitRange = function(date, ranges, format = 'yyyy-MM-dd HH:mm:ss') {
-  if (!ranges || !ranges.length) return date;
+function setRangeData(arr, start, end, value) {
+  for (let i = start; i < end; i++) {
+    arr[i] = value;
+  }
+}
+
+export const getRangeMinutes = function(ranges, hour) {
+  const minutes = new Array(60);
+
+  if (ranges.length > 0) {
+    ranges.forEach(range => {
+      const start = range[0];
+      const end = range[1];
+      const startHour = start.getHours();
+      const startMinute = start.getMinutes();
+      const endHour = end.getHours();
+      const endMinute = end.getMinutes();
+      if (startHour === hour && endHour !== hour) {
+        setRangeData(minutes, startMinute, 60, true);
+      } else if (startHour === hour && endHour === hour) {
+        setRangeData(minutes, startMinute, endMinute + 1, true);
+      } else if (startHour !== hour && endHour === hour) {
+        setRangeData(minutes, 0, endMinute + 1, true);
+      } else if (startHour < hour && endHour > hour) {
+        setRangeData(minutes, 0, 60, true);
+      }
+    });
+  } else {
+    setRangeData(minutes, 0, 60, true);
+  }
+  return minutes;
+};
+
+export const range = function(n) {
+  // see https://stackoverflow.com/questions/3746725/create-a-javascript-array-containing-1-n
+  return Array.apply(null, {length: n}).map((_, n) => n);
+};
+
+export const modifyDate = function(date, y, m, d) {
+  return new Date(y, m, d, date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
+};
 
-  const len = ranges.length;
+export const modifyTime = function(date, h, m, s) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate(), h, m, s, date.getMilliseconds());
+};
 
-  date = dateUtil.parse(dateUtil.format(date, format), format);
-  for (let i = 0; i < len; i++) {
-    const range = ranges[i];
-    if (date >= range[0] && date <= range[1]) {
-      return date;
-    }
+export const modifyWithTimeString = (date, time) => {
+  if (date == null || !time) {
+    return date;
   }
+  time = parseDate(time, 'HH:mm:ss');
+  return modifyTime(date, time.getHours(), time.getMinutes(), time.getSeconds());
+};
 
-  let maxDate = ranges[0][0];
-  let minDate = ranges[0][0];
+export const clearTime = function(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+};
+
+export const clearMilliseconds = function(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), 0);
+};
+
+export const limitTimeRange = function(date, ranges, format = 'HH:mm:ss') {
+  // TODO: refactory a more elegant solution
+  if (ranges.length === 0) return date;
+  const normalizeDate = date => dateUtil.parse(dateUtil.format(date, format), format);
+  const ndate = normalizeDate(date);
+  const nranges = ranges.map(range => range.map(normalizeDate));
+  if (nranges.some(nrange => ndate >= nrange[0] && ndate <= nrange[1])) return date;
 
-  ranges.forEach(range => {
-    minDate = new Date(Math.min(range[0], minDate));
-    maxDate = new Date(Math.max(range[1], maxDate));
+  let minDate = nranges[0][0];
+  let maxDate = nranges[0][0];
+
+  nranges.forEach(nrange => {
+    minDate = new Date(Math.min(nrange[0], minDate));
+    maxDate = new Date(Math.max(nrange[1], minDate));
   });
 
-  return date < minDate ? minDate : maxDate;
+  const ret = ndate < minDate ? minDate : maxDate;
+  // preserve Year/Month/Date
+  return modifyDate(
+    ret,
+    date.getFullYear(),
+    date.getMonth(),
+    date.getDate()
+  );
+};
+
+export const timeWithinRange = function(date, selectableRange, format) {
+  const limitedDate = limitTimeRange(date, selectableRange, format);
+  return limitedDate.getTime() === date.getTime();
+};
+
+export const changeYearMonthAndClampDate = function(date, year, month) {
+  // clamp date to the number of days in `year`, `month`
+  // eg: (2010-1-31, 2010, 2) => 2010-2-28
+  const monthDate = Math.min(date.getDate(), getDayCountOfMonth(year, month));
+  return modifyDate(date, year, month, monthDate);
+};
+
+export const prevMonth = function(date) {
+  const year = date.getFullYear();
+  const month = date.getMonth();
+  return month === 0
+    ? changeYearMonthAndClampDate(date, year - 1, 11)
+    : changeYearMonthAndClampDate(date, year, month - 1);
+};
+
+export const nextMonth = function(date) {
+  const year = date.getFullYear();
+  const month = date.getMonth();
+  return month === 11
+    ? changeYearMonthAndClampDate(date, year + 1, 0)
+    : changeYearMonthAndClampDate(date, year, month + 1);
+};
+
+export const prevYear = function(date, amount = 1) {
+  const year = date.getFullYear();
+  const month = date.getMonth();
+  return changeYearMonthAndClampDate(date, year - amount, month);
+};
+
+export const nextYear = function(date, amount = 1) {
+  const year = date.getFullYear();
+  const month = date.getMonth();
+  return changeYearMonthAndClampDate(date, year + amount, month);
+};
+
+export const extractDateFormat = function(format) {
+  return format
+    .replace(/\W?m{1,2}|\W?ZZ/g, '')
+    .replace(/\W?h{1,2}|\W?s{1,3}|\W?a/gi, '')
+    .trim();
+};
+
+export const extractTimeFormat = function(format) {
+  return format
+    .replace(/\W?D{1,2}|\W?Do|\W?d{1,4}|\W?M{1,4}|\W?y{2,4}/g, '')
+    .trim();
 };
diff --git a/packages/dialog/src/component.vue b/packages/dialog/src/component.vue
index 2a03d7797f..c4543a9860 100644
--- a/packages/dialog/src/component.vue
+++ b/packages/dialog/src/component.vue
@@ -1,17 +1,27 @@
 <template>
-  <transition name="dialog-fade">
+  <transition
+    name="dialog-fade"
+    @after-enter="afterEnter"
+    @after-leave="afterLeave">
     <div class="el-dialog__wrapper" v-show="visible" @click.self="handleWrapperClick">
       <div
+        role="dialog"
+        aria-modal="true"
+        :aria-label="title || 'dialog'"
         class="el-dialog"
-        :class="[sizeClass, customClass]"
+        :class="[{ 'is-fullscreen': fullscreen, 'el-dialog--center': center }, customClass]"
         ref="dialog"
         :style="style">
         <div class="el-dialog__header">
           <slot name="title">
-            <span class="el-dialog__title">{{title}}</span>
+            <span class="el-dialog__title">{{ title }}</span>
           </slot>
-          <button type="button" class="el-dialog__headerbtn" aria-label="Close" 
-                  v-if="showClose" @click="handleClose">
+          <button
+            type="button"
+            class="el-dialog__headerbtn"
+            aria-label="Close"
+            v-if="showClose"
+            @click="handleClose">
             <i class="el-dialog__close el-icon el-icon-close"></i>
           </button>
         </div>
@@ -26,12 +36,13 @@
 
 <script>
   import Popup from 'element-ui/src/utils/popup';
+  import Migrating from 'element-ui/src/mixins/migrating';
   import emitter from 'element-ui/src/mixins/emitter';
 
   export default {
     name: 'ElDialog',
 
-    mixins: [Popup, emitter],
+    mixins: [Popup, emitter, Migrating],
 
     props: {
       title: {
@@ -43,12 +54,17 @@
         type: Boolean,
         default: true
       },
-  
+
       modalAppendToBody: {
         type: Boolean,
         default: true
       },
 
+      appendToBody: {
+        type: Boolean,
+        default: false
+      },
+
       lockScroll: {
         type: Boolean,
         default: true
@@ -69,10 +85,9 @@
         default: true
       },
 
-      size: {
-        type: String,
-        default: 'small'
-      },
+      width: String,
+
+      fullscreen: Boolean,
 
       customClass: {
         type: String,
@@ -81,37 +96,61 @@
 
       top: {
         type: String,
-        default: '15%'
+        default: '15vh'
       },
-      beforeClose: Function
+      beforeClose: Function,
+      center: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    data() {
+      return {
+        closed: false
+      };
     },
 
     watch: {
       visible(val) {
-        this.$emit('update:visible', val);
         if (val) {
+          this.closed = false;
           this.$emit('open');
           this.$el.addEventListener('scroll', this.updatePopper);
           this.$nextTick(() => {
             this.$refs.dialog.scrollTop = 0;
           });
+          if (this.appendToBody) {
+            document.body.appendChild(this.$el);
+          }
         } else {
           this.$el.removeEventListener('scroll', this.updatePopper);
-          this.$emit('close');
+          if (!this.closed) this.$emit('close');
         }
       }
     },
 
     computed: {
-      sizeClass() {
-        return `el-dialog--${ this.size }`;
-      },
       style() {
-        return this.size === 'full' ? {} : { 'top': this.top };
+        let style = {};
+        if (!this.fullscreen) {
+          style.marginTop = this.top;
+          if (this.width) {
+            style.width = this.width;
+          }
+        }
+        return style;
       }
     },
 
     methods: {
+      getMigratingConfig() {
+        return {
+          props: {
+            'size': 'size is removed.'
+          }
+        };
+      },
       handleWrapperClick() {
         if (!this.closeOnClickModal) return;
         this.handleClose();
@@ -126,12 +165,19 @@
       hide(cancel) {
         if (cancel !== false) {
           this.$emit('update:visible', false);
-          this.$emit('visible-change', false);
+          this.$emit('close');
+          this.closed = true;
         }
       },
       updatePopper() {
         this.broadcast('ElSelectDropdown', 'updatePopper');
         this.broadcast('ElDropdownMenu', 'updatePopper');
+      },
+      afterEnter() {
+        this.$emit('opened');
+      },
+      afterLeave() {
+        this.$emit('closed');
       }
     },
 
@@ -139,6 +185,16 @@
       if (this.visible) {
         this.rendered = true;
         this.open();
+        if (this.appendToBody) {
+          document.body.appendChild(this.$el);
+        }
+      }
+    },
+
+    destroyed() {
+      // if appendToBody is true, remove DOM node after destroy
+      if (this.appendToBody && this.$el && this.$el.parentNode) {
+        this.$el.parentNode.removeChild(this.$el);
       }
     }
   };
diff --git a/packages/dropdown/src/dropdown-item.vue b/packages/dropdown/src/dropdown-item.vue
index 0580b057ea..9af930a686 100644
--- a/packages/dropdown/src/dropdown-item.vue
+++ b/packages/dropdown/src/dropdown-item.vue
@@ -6,6 +6,8 @@
       'el-dropdown-menu__item--divided': divided
     }"
     @click="handleClick"
+    :aria-disabled="disabled"
+    :tabindex="disabled ? null : -1"
   >
     <slot></slot>
   </li>
@@ -19,7 +21,7 @@
     mixins: [Emitter],
 
     props: {
-      command: null,
+      command: {},
       disabled: Boolean,
       divided: Boolean
     },
diff --git a/packages/dropdown/src/dropdown-menu.vue b/packages/dropdown/src/dropdown-menu.vue
index 327783897a..1b64892bbb 100644
--- a/packages/dropdown/src/dropdown-menu.vue
+++ b/packages/dropdown/src/dropdown-menu.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="el-zoom-in-top" @after-leave="doDestroy">
-    <ul class="el-dropdown-menu" v-show="showPopper">
+    <ul class="el-dropdown-menu el-popper" :class="[size && `el-dropdown-menu--${size}`]" v-show="showPopper">
       <slot></slot>
     </ul>
   </transition>
@@ -15,6 +15,25 @@
 
     mixins: [Popper],
 
+    props: {
+      visibleArrow: {
+        type: Boolean,
+        default: true
+      },
+      arrowOffset: {
+        type: Number,
+        default: 0
+      }
+    },
+
+    data() {
+      return {
+        size: this.dropdown.dropdownSize
+      };
+    },
+
+    inject: ['dropdown'],
+
     created() {
       this.$on('updatePopper', () => {
         if (this.showPopper) this.updatePopper();
@@ -30,10 +49,10 @@
     },
 
     watch: {
-      '$parent.menuAlign': {
+      'dropdown.placement': {
         immediate: true,
         handler(val) {
-          this.currentPlacement = `bottom-${val}`;
+          this.currentPlacement = val;
         }
       }
     }
diff --git a/packages/dropdown/src/dropdown.vue b/packages/dropdown/src/dropdown.vue
index 8cab6e4ff3..2daa550300 100644
--- a/packages/dropdown/src/dropdown.vue
+++ b/packages/dropdown/src/dropdown.vue
@@ -1,15 +1,17 @@
 <script>
   import Clickoutside from 'element-ui/src/utils/clickoutside';
   import Emitter from 'element-ui/src/mixins/emitter';
+  import Migrating from 'element-ui/src/mixins/migrating';
   import ElButton from 'element-ui/packages/button';
   import ElButtonGroup from 'element-ui/packages/button-group';
+  import { generateId } from 'element-ui/src/utils/util';
 
   export default {
     name: 'ElDropdown',
 
     componentName: 'ElDropdown',
 
-    mixins: [Emitter],
+    mixins: [Emitter, Migrating],
 
     directives: { Clickoutside },
 
@@ -18,75 +20,214 @@
       ElButtonGroup
     },
 
+    provide() {
+      return {
+        dropdown: this
+      };
+    },
+
     props: {
       trigger: {
         type: String,
         default: 'hover'
       },
-      menuAlign: {
+      type: String,
+      size: {
         type: String,
-        default: 'end'
+        default: ''
       },
-      type: String,
-      size: String,
       splitButton: Boolean,
       hideOnClick: {
         type: Boolean,
         default: true
+      },
+      placement: {
+        type: String,
+        default: 'bottom-end'
+      },
+      visibleArrow: {
+        default: true
+      },
+      showTimeout: {
+        type: Number,
+        default: 250
+      },
+      hideTimeout: {
+        type: Number,
+        default: 150
       }
     },
 
     data() {
       return {
         timeout: null,
-        visible: false
+        visible: false,
+        triggerElm: null,
+        menuItems: null,
+        menuItemsArray: null,
+        dropdownElm: null,
+        focusing: false,
+        listId: `dropdown-menu-${generateId()}`
       };
     },
 
+    computed: {
+      dropdownSize() {
+        return this.size || (this.$ELEMENT || {}).size;
+      }
+    },
+
     mounted() {
       this.$on('menu-item-click', this.handleMenuItemClick);
       this.initEvent();
+      this.initAria();
     },
 
     watch: {
       visible(val) {
         this.broadcast('ElDropdownMenu', 'visible', val);
         this.$emit('visible-change', val);
+      },
+      focusing(val) {
+        const selfDefine = this.$el.querySelector('.el-dropdown-selfdefine');
+        if (selfDefine) { // 自定义
+          if (val) {
+            selfDefine.className += ' focusing';
+          } else {
+            selfDefine.className = selfDefine.className.replace('focusing', '');
+          }
+        }
       }
     },
 
     methods: {
+      getMigratingConfig() {
+        return {
+          props: {
+            'menu-align': 'menu-align is renamed to placement.'
+          }
+        };
+      },
       show() {
+        if (this.triggerElm.disabled) return;
         clearTimeout(this.timeout);
         this.timeout = setTimeout(() => {
           this.visible = true;
-        }, 250);
+        }, this.trigger === 'click' ? 0 : this.showTimeout);
       },
       hide() {
+        if (this.triggerElm.disabled) return;
+        this.removeTabindex();
+        this.resetTabindex(this.triggerElm);
         clearTimeout(this.timeout);
         this.timeout = setTimeout(() => {
           this.visible = false;
-        }, 150);
+        }, this.trigger === 'click' ? 0 : this.hideTimeout);
       },
       handleClick() {
-        this.visible = !this.visible;
+        if (this.triggerElm.disabled) return;
+        if (this.visible) {
+          this.hide();
+        } else {
+          this.show();
+        }
+      },
+      handleTriggerKeyDown(ev) {
+        const keyCode = ev.keyCode;
+        if ([38, 40].indexOf(keyCode) > -1) { // up/down
+          this.removeTabindex();
+          this.resetTabindex(this.menuItems[0]);
+          this.menuItems[0].focus();
+          ev.preventDefault();
+          ev.stopPropagation();
+        } else if (keyCode === 13) { // space enter选中
+          this.handleClick();
+        } else if ([9, 27].indexOf(keyCode) > -1) { // tab || esc
+          this.hide();
+        }
+        return;
+      },
+      handleItemKeyDown(ev) {
+        const keyCode = ev.keyCode;
+        const target = ev.target;
+        const currentIndex = this.menuItemsArray.indexOf(target);
+        const max = this.menuItemsArray.length - 1;
+        let nextIndex;
+        if ([38, 40].indexOf(keyCode) > -1) { // up/down
+          if (keyCode === 38) { // up
+            nextIndex = currentIndex !== 0 ? currentIndex - 1 : 0;
+          } else { // down
+            nextIndex = currentIndex < max ? currentIndex + 1 : max;
+          }
+          this.removeTabindex();
+          this.resetTabindex(this.menuItems[nextIndex]);
+          this.menuItems[nextIndex].focus();
+          ev.preventDefault();
+          ev.stopPropagation();
+        } else if (keyCode === 13) { // enter选中
+          this.triggerElm.focus();
+          target.click();
+          if (this.hideOnClick) { // click关闭
+            this.visible = false;
+          }
+        } else if ([9, 27].indexOf(keyCode) > -1) { // tab // esc
+          this.hide();
+          this.triggerElm.focus();
+        }
+        return;
+      },
+      resetTabindex(ele) { // 下次tab时组件聚焦元素
+        this.removeTabindex();
+        ele.setAttribute('tabindex', '0'); // 下次期望的聚焦元素
+      },
+      removeTabindex() {
+        this.triggerElm.setAttribute('tabindex', '-1');
+        this.menuItemsArray.forEach((item) => {
+          item.setAttribute('tabindex', '-1');
+        });
+      },
+      initAria() {
+        this.dropdownElm.setAttribute('id', this.listId);
+        this.triggerElm.setAttribute('aria-haspopup', 'list');
+        this.triggerElm.setAttribute('aria-controls', this.listId);
+        this.menuItems = this.dropdownElm.querySelectorAll("[tabindex='-1']");
+        this.menuItemsArray = Array.prototype.slice.call(this.menuItems);
+
+        if (!this.splitButton) { // 自定义
+          this.triggerElm.setAttribute('role', 'button');
+          this.triggerElm.setAttribute('tabindex', '0');
+          this.triggerElm.setAttribute('class', (this.triggerElm.getAttribute('class') || '') + ' el-dropdown-selfdefine'); // 控制
+        }
       },
       initEvent() {
-        let { trigger, show, hide, handleClick, splitButton } = this;
-        let triggerElm = splitButton
+        let { trigger, show, hide, handleClick, splitButton, handleTriggerKeyDown, handleItemKeyDown } = this;
+        this.triggerElm = splitButton
           ? this.$refs.trigger.$el
           : this.$slots.default[0].elm;
 
-        if (trigger === 'hover') {
-          triggerElm.addEventListener('mouseenter', show);
-          triggerElm.addEventListener('mouseleave', hide);
-
-          let dropdownElm = this.$slots.dropdown[0].elm;
+        let dropdownElm = this.dropdownElm = this.$slots.dropdown[0].elm;
 
+        this.triggerElm.addEventListener('keydown', handleTriggerKeyDown); // triggerElm keydown
+        dropdownElm.addEventListener('keydown', handleItemKeyDown, true); // item keydown
+        // 控制自定义元素的样式
+        if (!splitButton) {
+          this.triggerElm.addEventListener('focus', () => {
+            this.focusing = true;
+          });
+          this.triggerElm.addEventListener('blur', () => {
+            this.focusing = false;
+          });
+          this.triggerElm.addEventListener('click', () => {
+            this.focusing = false;
+          });
+        }
+        if (trigger === 'hover') {
+          this.triggerElm.addEventListener('mouseenter', show);
+          this.triggerElm.addEventListener('mouseleave', hide);
           dropdownElm.addEventListener('mouseenter', show);
           dropdownElm.addEventListener('mouseleave', hide);
         } else if (trigger === 'click') {
-          triggerElm.addEventListener('click', handleClick);
+          this.triggerElm.addEventListener('click', handleClick);
         }
       },
       handleMenuItemClick(command, instance) {
@@ -94,26 +235,30 @@
           this.visible = false;
         }
         this.$emit('command', command, instance);
+      },
+      focus() {
+        this.triggerElm.focus && this.triggerElm.focus();
       }
     },
 
     render(h) {
-      let { hide, splitButton, type, size } = this;
+      let { hide, splitButton, type, dropdownSize } = this;
 
-      var handleClick = _ => {
-        this.$emit('click');
+      const handleMainButtonClick = (event) => {
+        this.$emit('click', event);
+        hide();
       };
 
       let triggerElm = !splitButton
         ? this.$slots.default
         : (<el-button-group>
-            <el-button type={type} size={size} nativeOn-click={handleClick}>
-              {this.$slots.default}
-            </el-button>
-            <el-button ref="trigger" type={type} size={size} class="el-dropdown__caret-button">
-              <i class="el-dropdown__icon el-icon-caret-bottom"></i>
-            </el-button>
-          </el-button-group>);
+          <el-button type={type} size={dropdownSize} nativeOn-click={handleMainButtonClick}>
+            {this.$slots.default}
+          </el-button>
+          <el-button ref="trigger" type={type} size={dropdownSize} class="el-dropdown__caret-button">
+            <i class="el-dropdown__icon el-icon-arrow-down"></i>
+          </el-button>
+        </el-button-group>);
 
       return (
         <div class="el-dropdown" v-clickoutside={hide}>
diff --git a/packages/footer/index.js b/packages/footer/index.js
new file mode 100644
index 0000000000..5e991b03f7
--- /dev/null
+++ b/packages/footer/index.js
@@ -0,0 +1,8 @@
+import Footer from './src/main';
+
+/* istanbul ignore next */
+Footer.install = function(Vue) {
+  Vue.component(Footer.name, Footer);
+};
+
+export default Footer;
diff --git a/packages/footer/src/main.vue b/packages/footer/src/main.vue
new file mode 100644
index 0000000000..ff02ca6091
--- /dev/null
+++ b/packages/footer/src/main.vue
@@ -0,0 +1,20 @@
+<template>
+  <footer class="el-footer" :style="{ height }">
+    <slot></slot>
+  </footer>
+</template>
+
+<script>
+  export default {
+    name: 'ElFooter',
+
+    componentName: 'ElFooter',
+
+    props: {
+      height: {
+        type: String,
+        default: '60px'
+      }
+    }
+  };
+</script>
diff --git a/packages/form/src/form-item.vue b/packages/form/src/form-item.vue
index 5923765dce..e55967d2cb 100644
--- a/packages/form/src/form-item.vue
+++ b/packages/form/src/form-item.vue
@@ -1,16 +1,35 @@
 <template>
-  <div class="el-form-item" :class="{
-    'is-error': validateState === 'error',
-    'is-validating': validateState === 'validating',
-    'is-required': isRequired || required
-  }">
-    <label :for="prop" class="el-form-item__label" v-bind:style="labelStyle" v-if="label || $slots.label">
+  <div class="el-form-item" :class="[{
+      'el-form-item--feedback': elForm && elForm.statusIcon,
+      'is-error': validateState === 'error',
+      'is-validating': validateState === 'validating',
+      'is-success': validateState === 'success',
+      'is-required': isRequired || required,
+      'is-no-asterisk': elForm && elForm.hideRequiredAsterisk
+    },
+    sizeClass ? 'el-form-item--' + sizeClass : ''
+  ]">
+    <label :for="labelFor" class="el-form-item__label" :style="labelStyle" v-if="label || $slots.label">
       <slot name="label">{{label + form.labelSuffix}}</slot>
     </label>
-    <div class="el-form-item__content" v-bind:style="contentStyle">
+    <div class="el-form-item__content" :style="contentStyle">
       <slot></slot>
       <transition name="el-zoom-in-top">
-        <div class="el-form-item__error" v-if="validateState === 'error' && showMessage && form.showMessage">{{validateMessage}}</div>
+        <slot 
+          v-if="validateState === 'error' && showMessage && form.showMessage" 
+          name="error" 
+          :error="validateMessage">
+          <div
+            class="el-form-item__error"
+            :class="{
+              'el-form-item__error--inline': typeof inlineMessage === 'boolean'
+                ? inlineMessage
+                : (elForm && elForm.inlineMessage || false)
+            }"
+          >
+            {{validateMessage}}
+          </div>
+        </slot>
       </transition>
     </div>
   </div>
@@ -18,31 +37,8 @@
 <script>
   import AsyncValidator from 'async-validator';
   import emitter from 'element-ui/src/mixins/emitter';
-
-  function noop() {}
-
-  function getPropByPath(obj, path) {
-    let tempObj = obj;
-    path = path.replace(/\[(\w+)\]/g, '.$1');
-    path = path.replace(/^\./, '');
-
-    let keyArr = path.split('.');
-    let i = 0;
-
-    for (let len = keyArr.length; i < len - 1; ++i) {
-      let key = keyArr[i];
-      if (key in tempObj) {
-        tempObj = tempObj[key];
-      } else {
-        throw new Error('please transfer a valid prop path to form item!');
-      }
-    }
-    return {
-      o: tempObj,
-      k: keyArr[i],
-      v: tempObj[keyArr[i]]
-    };
-  }
+  import objectAssign from 'element-ui/src/utils/merge';
+  import { noop, getPropByPath } from 'element-ui/src/utils/util';
 
   export default {
     name: 'ElFormItem',
@@ -51,44 +47,67 @@
 
     mixins: [emitter],
 
+    provide() {
+      return {
+        elFormItem: this
+      };
+    },
+
+    inject: ['elForm'],
+
     props: {
       label: String,
       labelWidth: String,
       prop: String,
-      required: Boolean,
+      required: {
+        type: Boolean,
+        default: undefined
+      },
       rules: [Object, Array],
       error: String,
       validateStatus: String,
+      for: String,
+      inlineMessage: {
+        type: [String, Boolean],
+        default: ''
+      },
       showMessage: {
         type: Boolean,
         default: true
-      }
+      },
+      size: String
     },
     watch: {
-      error(value) {
-        this.validateMessage = value;
-        this.validateState = value ? 'error' : '';
+      error: {
+        immediate: true,
+        handler(value) {
+          this.validateMessage = value;
+          this.validateState = value ? 'error' : '';
+        }
       },
       validateStatus(value) {
         this.validateState = value;
       }
     },
     computed: {
+      labelFor() {
+        return this.for || this.prop;
+      },
       labelStyle() {
-        var ret = {};
+        const ret = {};
         if (this.form.labelPosition === 'top') return ret;
-        var labelWidth = this.labelWidth || this.form.labelWidth;
+        const labelWidth = this.labelWidth || this.form.labelWidth;
         if (labelWidth) {
           ret.width = labelWidth;
         }
         return ret;
       },
       contentStyle() {
-        var ret = {};
+        const ret = {};
         const label = this.label;
         if (this.form.labelPosition === 'top' || this.form.inline) return ret;
         if (!label && !this.labelWidth && this.isNested) return ret;
-        var labelWidth = this.labelWidth || this.form.labelWidth;
+        const labelWidth = this.labelWidth || this.form.labelWidth;
         if (labelWidth) {
           ret.marginLeft = labelWidth;
         }
@@ -106,19 +125,16 @@
         }
         return parent;
       },
-      fieldValue: {
-        cache: false,
-        get() {
-          var model = this.form.model;
-          if (!model || !this.prop) { return; }
-
-          var path = this.prop;
-          if (path.indexOf(':') !== -1) {
-            path = path.replace(/:/, '.');
-          }
+      fieldValue() {
+        const model = this.form.model;
+        if (!model || !this.prop) { return; }
 
-          return getPropByPath(model, path).v;
+        let path = this.prop;
+        if (path.indexOf(':') !== -1) {
+          path = path.replace(/:/, '.');
         }
+
+        return getPropByPath(model, path, true).v;
       },
       isRequired() {
         let rules = this.getRules();
@@ -134,6 +150,15 @@
           });
         }
         return isRequired;
+      },
+      _formSize() {
+        return this.elForm.size;
+      },
+      elFormItemSize() {
+        return this.size || this._formSize;
+      },
+      sizeClass() {
+        return this.elFormItemSize || (this.$ELEMENT || {}).size;
       }
     },
     data() {
@@ -147,29 +172,41 @@
     },
     methods: {
       validate(trigger, callback = noop) {
-        var rules = this.getFilteredRule(trigger);
-        if (!rules || rules.length === 0) {
+        this.validateDisabled = false;
+        const rules = this.getFilteredRule(trigger);
+        if ((!rules || rules.length === 0) && this.required === undefined) {
           callback();
           return true;
         }
 
         this.validateState = 'validating';
 
-        var descriptor = {};
+        const descriptor = {};
+        if (rules && rules.length > 0) {
+          rules.forEach(rule => {
+            delete rule.trigger;
+          });
+        }
         descriptor[this.prop] = rules;
 
-        var validator = new AsyncValidator(descriptor);
-        var model = {};
+        const validator = new AsyncValidator(descriptor);
+        const model = {};
 
         model[this.prop] = this.fieldValue;
 
-        validator.validate(model, { firstFields: true }, (errors, fields) => {
+        validator.validate(model, { firstFields: true }, (errors, invalidFields) => {
           this.validateState = !errors ? 'success' : 'error';
           this.validateMessage = errors ? errors[0].message : '';
 
-          callback(this.validateMessage);
+          callback(this.validateMessage, invalidFields);
+          this.elForm && this.elForm.$emit('validate', this.prop, !errors, this.validateMessage || null);
         });
       },
+      clearValidate() {
+        this.validateState = '';
+        this.validateMessage = '';
+        this.validateDisabled = false;
+      },
       resetField() {
         this.validateState = '';
         this.validateMessage = '';
@@ -181,30 +218,38 @@
           path = path.replace(/:/, '.');
         }
 
-        let prop = getPropByPath(model, path);
+        let prop = getPropByPath(model, path, true);
 
+        this.validateDisabled = true;
         if (Array.isArray(value)) {
-          this.validateDisabled = true;
           prop.o[prop.k] = [].concat(this.initialValue);
         } else {
-          this.validateDisabled = true;
           prop.o[prop.k] = this.initialValue;
         }
+
+        this.broadcast('ElTimeSelect', 'fieldReset', this.initialValue);
       },
       getRules() {
-        var formRules = this.form.rules;
-        var selfRuels = this.rules;
+        let formRules = this.form.rules;
+        const selfRules = this.rules;
+        const requiredRule = this.required !== undefined ? { required: !!this.required } : [];
 
-        formRules = formRules ? formRules[this.prop] : [];
+        const prop = getPropByPath(formRules, this.prop || '');
+        formRules = formRules ? (prop.o[this.prop || ''] || prop.v) : [];
 
-        return [].concat(selfRuels || formRules || []);
+        return [].concat(selfRules || formRules || []).concat(requiredRule);
       },
       getFilteredRule(trigger) {
-        var rules = this.getRules();
+        const rules = this.getRules();
 
         return rules.filter(rule => {
-          return !rule.trigger || rule.trigger.indexOf(trigger) !== -1;
-        });
+          if (!rule.trigger || trigger === '') return true;
+          if (Array.isArray(rule.trigger)) {
+            return rule.trigger.indexOf(trigger) > -1;
+          } else {
+            return rule.trigger === trigger;
+          }
+        }).map(rule => objectAssign({}, rule));
       },
       onFieldBlur() {
         this.validate('blur');
@@ -232,7 +277,7 @@
 
         let rules = this.getRules();
 
-        if (rules.length) {
+        if (rules.length || this.required !== undefined) {
           this.$on('el.form.blur', this.onFieldBlur);
           this.$on('el.form.change', this.onFieldChange);
         }
diff --git a/packages/form/src/form.vue b/packages/form/src/form.vue
index ab255a7782..b55501b4c3 100644
--- a/packages/form/src/form.vue
+++ b/packages/form/src/form.vue
@@ -7,11 +7,19 @@
   </form>
 </template>
 <script>
+  import objectAssign from 'element-ui/src/utils/merge';
+
   export default {
     name: 'ElForm',
 
     componentName: 'ElForm',
 
+    provide() {
+      return {
+        elForm: this
+      };
+    },
+
     props: {
       model: Object,
       rules: Object,
@@ -22,14 +30,28 @@
         default: ''
       },
       inline: Boolean,
+      inlineMessage: Boolean,
+      statusIcon: Boolean,
       showMessage: {
         type: Boolean,
         default: true
+      },
+      size: String,
+      disabled: Boolean,
+      validateOnRuleChange: {
+        type: Boolean,
+        default: true
+      },
+      hideRequiredAsterisk: {
+        type: Boolean,
+        default: false
       }
     },
     watch: {
       rules() {
-        this.validate();
+        if (this.validateOnRuleChange) {
+          this.validate(() => {});
+        }
       }
     },
     data() {
@@ -61,30 +83,57 @@
           field.resetField();
         });
       },
+      clearValidate(props = []) {
+        const fields = props.length
+          ? (typeof props === 'string'
+            ? this.fields.filter(field => props === field.prop)
+            : this.fields.filter(field => props.indexOf(field.prop) > -1)
+          ) : this.fields;
+        fields.forEach(field => {
+          field.clearValidate();
+        });
+      },
       validate(callback) {
         if (!this.model) {
           console.warn('[Element Warn][Form]model is required for validate to work!');
           return;
-        };
+        }
+
+        let promise;
+        // if no callback, return promise
+        if (typeof callback !== 'function' && window.Promise) {
+          promise = new window.Promise((resolve, reject) => {
+            callback = function(valid) {
+              valid ? resolve(valid) : reject(valid);
+            };
+          });
+        }
+
         let valid = true;
         let count = 0;
         // 如果需要验证的fields为空，调用验证时立刻返回callback
         if (this.fields.length === 0 && callback) {
           callback(true);
         }
-        this.fields.forEach((field, index) => {
-          field.validate('', errors => {
-            if (errors) {
+        let invalidFields = {};
+        this.fields.forEach(field => {
+          field.validate('', (message, field) => {
+            if (message) {
               valid = false;
             }
+            invalidFields = objectAssign({}, invalidFields, field);
             if (typeof callback === 'function' && ++count === this.fields.length) {
-              callback(valid);
+              callback(valid, invalidFields);
             }
           });
         });
+
+        if (promise) {
+          return promise;
+        }
       },
       validateField(prop, cb) {
-        var field = this.fields.filter(field => field.prop === prop)[0];
+        let field = this.fields.filter(field => field.prop === prop)[0];
         if (!field) { throw new Error('must call validateField with valid prop string!'); }
 
         field.validate('', cb);
diff --git a/packages/header/index.js b/packages/header/index.js
new file mode 100644
index 0000000000..a3dba893a1
--- /dev/null
+++ b/packages/header/index.js
@@ -0,0 +1,8 @@
+import Header from './src/main';
+
+/* istanbul ignore next */
+Header.install = function(Vue) {
+  Vue.component(Header.name, Header);
+};
+
+export default Header;
diff --git a/packages/header/src/main.vue b/packages/header/src/main.vue
new file mode 100644
index 0000000000..304be1700f
--- /dev/null
+++ b/packages/header/src/main.vue
@@ -0,0 +1,20 @@
+<template>
+  <header class="el-header" :style="{ height }">
+    <slot></slot>
+  </header>
+</template>
+
+<script>
+  export default {
+    name: 'ElHeader',
+
+    componentName: 'ElHeader',
+
+    props: {
+      height: {
+        type: String,
+        default: '60px'
+      }
+    }
+  };
+</script>
diff --git a/packages/input-number/src/input-number.vue b/packages/input-number/src/input-number.vue
index a21fa69f09..1a73fdd440 100644
--- a/packages/input-number/src/input-number.vue
+++ b/packages/input-number/src/input-number.vue
@@ -1,78 +1,67 @@
 <template>
-  <div class="el-input-number"
+  <div
+    @dragstart.prevent
     :class="[
-      size ? 'el-input-number--' + size : '',
-      { 'is-disabled': disabled },
-      { 'is-without-controls': !controls}
-    ]"
-  >
+      'el-input-number',
+      inputNumberSize ? 'el-input-number--' + inputNumberSize : '',
+      { 'is-disabled': inputNumberDisabled },
+      { 'is-without-controls': !controls },
+      { 'is-controls-right': controlsAtRight }
+    ]">
     <span
-      v-if="controls"
       class="el-input-number__decrease"
-      :class="{'is-disabled': minDisabled}"
+      role="button"
+      v-if="controls"
       v-repeat-click="decrease"
-    >
-      <i class="el-icon-minus"></i>
+      :class="{'is-disabled': minDisabled}"
+      @keydown.enter="decrease">
+      <i :class="`el-icon-${controlsAtRight ? 'arrow-down' : 'minus'}`"></i>
     </span>
     <span
-      v-if="controls"
       class="el-input-number__increase"
-      :class="{'is-disabled': maxDisabled}"
+      role="button"
+      v-if="controls"
       v-repeat-click="increase"
-    >
-      <i class="el-icon-plus"></i>
+      :class="{'is-disabled': maxDisabled}"
+      @keydown.enter="increase">
+      <i :class="`el-icon-${controlsAtRight ? 'arrow-up' : 'plus'}`"></i>
     </span>
     <el-input
-      :value="currentValue"
+      ref="input"
+      :value="currentInputValue"
+      :disabled="inputNumberDisabled"
+      :size="inputNumberSize"
+      :max="max"
+      :min="min"
+      :name="name"
+      :label="label"
       @keydown.up.native.prevent="increase"
       @keydown.down.native.prevent="decrease"
       @blur="handleBlur"
-      @input="debounceHandleInput"
-      :disabled="disabled"
-      :size="size"
-      :max="max"
-      :min="min"
-      ref="input"
-    >
-        <template slot="prepend" v-if="$slots.prepend">
-          <slot name="prepend"></slot>
-        </template>
-        <template slot="append" v-if="$slots.append">
-          <slot name="append"></slot>
-        </template> 
+      @focus="handleFocus"
+      @change="handleInputChange">
     </el-input>
   </div>
 </template>
 <script>
   import ElInput from 'element-ui/packages/input';
-  import { once, on } from 'element-ui/src/utils/dom';
-  import debounce from 'throttle-debounce/debounce';
+  import Focus from 'element-ui/src/mixins/focus';
+  import RepeatClick from 'element-ui/src/directives/repeat-click';
 
   export default {
     name: 'ElInputNumber',
-    directives: {
-      repeatClick: {
-        bind(el, binding, vnode) {
-          let interval = null;
-          let startTime;
-          const handler = () => vnode.context[binding.expression].apply();
-          const clear = () => {
-            if (new Date() - startTime < 100) {
-              handler();
-            }
-            clearInterval(interval);
-            interval = null;
-          };
-
-          on(el, 'mousedown', () => {
-            startTime = new Date();
-            once(document, 'mouseup', clear);
-            clearInterval(interval);
-            interval = setInterval(handler, 100);
-          });
-        }
+    mixins: [Focus('input')],
+    inject: {
+      elForm: {
+        default: ''
+      },
+      elFormItem: {
+        default: ''
       }
     },
+    directives: {
+      repeatClick: RepeatClick
+    },
     components: {
       ElInput
     },
@@ -89,18 +78,24 @@
         type: Number,
         default: -Infinity
       },
-      value: {
-        default: 0
-      },
+      value: {},
       disabled: Boolean,
       size: String,
       controls: {
         type: Boolean,
         default: true
       },
-      debounce: {
+      controlsPosition: {
+        type: String,
+        default: ''
+      },
+      name: String,
+      label: String,
+      precision: {
         type: Number,
-        default: 300
+        validator(val) {
+          return val >= 0 && val === parseInt(val, 10);
+        }
       }
     },
     data() {
@@ -112,8 +107,15 @@
       value: {
         immediate: true,
         handler(value) {
-          let newVal = Number(value);
-          if (isNaN(newVal)) return;
+          let newVal = value === undefined ? value : Number(value);
+          if (newVal !== undefined) {
+            if (isNaN(newVal)) {
+              return;
+            }
+            if (this.precision !== undefined) {
+              newVal = this.toPrecision(newVal, this.precision);
+            }
+          }
           if (newVal >= this.max) newVal = this.max;
           if (newVal <= this.min) newVal = this.min;
           this.currentValue = newVal;
@@ -128,17 +130,46 @@
       maxDisabled() {
         return this._increase(this.value, this.step) > this.max;
       },
-      precision() {
-        const { value, step, getPrecision } = this;
-        return Math.max(getPrecision(value), getPrecision(step));
+      numPrecision() {
+        const { value, step, getPrecision, precision } = this;
+        const stepPrecision = getPrecision(step);
+        if (precision !== undefined) {
+          if (stepPrecision > precision) {
+            console.warn('[Element Warn][InputNumber]precision should not be less than the decimal places of step');
+          }
+          return precision;
+        } else {
+          return Math.max(getPrecision(value), stepPrecision);
+        }
+      },
+      controlsAtRight() {
+        return this.controls && this.controlsPosition === 'right';
+      },
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+      inputNumberSize() {
+        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+      },
+      inputNumberDisabled() {
+        return this.disabled || (this.elForm || {}).disabled;
+      },
+      currentInputValue() {
+        const currentValue = this.currentValue;
+        if (typeof currentValue === 'number' && this.precision !== undefined) {
+          return currentValue.toFixed(this.precision);
+        } else {
+          return currentValue;
+        }
       }
     },
     methods: {
       toPrecision(num, precision) {
-        if (precision === undefined) precision = this.precision;
+        if (precision === undefined) precision = this.numPrecision;
         return parseFloat(parseFloat(Number(num).toFixed(precision)));
       },
       getPrecision(value) {
+        if (value === undefined) return 0;
         const valueString = value.toString();
         const dotPosition = valueString.indexOf('.');
         let precision = 0;
@@ -148,64 +179,72 @@
         return precision;
       },
       _increase(val, step) {
-        if (typeof val !== 'number') return this.currentValue;
-
-        const precisionFactor = Math.pow(10, this.precision);
+        if (typeof val !== 'number' && val !== undefined) return this.currentValue;
 
+        const precisionFactor = Math.pow(10, this.numPrecision);
+        // Solve the accuracy problem of JS decimal calculation by converting the value to integer.
         return this.toPrecision((precisionFactor * val + precisionFactor * step) / precisionFactor);
       },
       _decrease(val, step) {
-        if (typeof val !== 'number') return this.currentValue;
+        if (typeof val !== 'number' && val !== undefined) return this.currentValue;
 
-        const precisionFactor = Math.pow(10, this.precision);
+        const precisionFactor = Math.pow(10, this.numPrecision);
 
         return this.toPrecision((precisionFactor * val - precisionFactor * step) / precisionFactor);
       },
       increase() {
-        if (this.disabled || this.maxDisabled) return;
+        if (this.inputNumberDisabled || this.maxDisabled) return;
         const value = this.value || 0;
         const newVal = this._increase(value, this.step);
-        if (newVal > this.max) return;
         this.setCurrentValue(newVal);
       },
       decrease() {
-        if (this.disabled || this.minDisabled) return;
+        if (this.inputNumberDisabled || this.minDisabled) return;
         const value = this.value || 0;
         const newVal = this._decrease(value, this.step);
-        if (newVal < this.min) return;
         this.setCurrentValue(newVal);
       },
-      handleBlur() {
-        this.$refs.input.setCurrentValue(this.currentValue);
+      handleBlur(event) {
+        this.$emit('blur', event);
+        this.$refs.input.setCurrentValue(this.currentInputValue);
+      },
+      handleFocus(event) {
+        this.$emit('focus', event);
       },
       setCurrentValue(newVal) {
         const oldVal = this.currentValue;
+        if (typeof newVal === 'number' && this.precision !== undefined) {
+          newVal = this.toPrecision(newVal, this.precision);
+        }
         if (newVal >= this.max) newVal = this.max;
         if (newVal <= this.min) newVal = this.min;
         if (oldVal === newVal) {
-          this.$refs.input.setCurrentValue(this.currentValue);
+          this.$refs.input.setCurrentValue(this.currentInputValue);
           return;
         }
-        this.$emit('change', newVal, oldVal);
         this.$emit('input', newVal);
+        this.$emit('change', newVal, oldVal);
         this.currentValue = newVal;
       },
-      handleInput(value) {
-        if (value === '') {
-          return;
-        }
-        const newVal = Number(value);
-        if (!isNaN(newVal)) {
+      handleInputChange(value) {
+        const newVal = value === '' ? undefined : Number(value);
+        if (!isNaN(newVal) || value === '') {
           this.setCurrentValue(newVal);
-        } else {
-          this.$refs.input.setCurrentValue(this.currentValue);
         }
       }
     },
-    created() {
-      this.debounceHandleInput = debounce(this.debounce, value => {
-        this.handleInput(value);
-      });
+    mounted() {
+      let innerInput = this.$refs.input.$refs.input;
+      innerInput.setAttribute('role', 'spinbutton');
+      innerInput.setAttribute('aria-valuemax', this.max);
+      innerInput.setAttribute('aria-valuemin', this.min);
+      innerInput.setAttribute('aria-valuenow', this.currentValue);
+      innerInput.setAttribute('aria-disabled', this.inputNumberDisabled);
+    },
+    updated() {
+      if (!this.$refs || !this.$refs.input) return;
+      const innerInput = this.$refs.input.$refs.input;
+      innerInput.setAttribute('aria-valuenow', this.currentValue);
     }
   };
 </script>
diff --git a/packages/input/src/calcTextareaHeight.js b/packages/input/src/calcTextareaHeight.js
index 61ea977494..39f3dc2516 100644
--- a/packages/input/src/calcTextareaHeight.js
+++ b/packages/input/src/calcTextareaHeight.js
@@ -28,8 +28,8 @@ const CONTEXT_STYLE = [
   'box-sizing'
 ];
 
-function calculateNodeStyling(node) {
-  const style = window.getComputedStyle(node);
+function calculateNodeStyling(targetElement) {
+  const style = window.getComputedStyle(targetElement);
 
   const boxSizing = style.getPropertyValue('box-sizing');
 
@@ -51,8 +51,8 @@ function calculateNodeStyling(node) {
 }
 
 export default function calcTextareaHeight(
-  targetNode,
-  minRows = null,
+  targetElement,
+  minRows = 1,
   maxRows = null
 ) {
   if (!hiddenTextarea) {
@@ -65,12 +65,13 @@ export default function calcTextareaHeight(
     borderSize,
     boxSizing,
     contextStyle
-  } = calculateNodeStyling(targetNode);
+  } = calculateNodeStyling(targetElement);
 
   hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);
-  hiddenTextarea.value = targetNode.value || targetNode.placeholder || '';
+  hiddenTextarea.value = targetElement.value || targetElement.placeholder || '';
 
   let height = hiddenTextarea.scrollHeight;
+  const result = {};
 
   if (boxSizing === 'border-box') {
     height = height + borderSize;
@@ -87,6 +88,7 @@ export default function calcTextareaHeight(
       minHeight = minHeight + paddingSize + borderSize;
     }
     height = Math.max(minHeight, height);
+    result.minHeight = `${ minHeight }px`;
   }
   if (maxRows !== null) {
     let maxHeight = singleRowHeight * maxRows;
@@ -95,6 +97,8 @@ export default function calcTextareaHeight(
     }
     height = Math.min(maxHeight, height);
   }
-
-  return { height: height + 'px'};
+  result.height = `${ height }px`;
+  hiddenTextarea.parentNode && hiddenTextarea.parentNode.removeChild(hiddenTextarea);
+  hiddenTextarea = null;
+  return result;
 };
diff --git a/packages/input/src/input.vue b/packages/input/src/input.vue
index 88f01e806c..239d4554e5 100644
--- a/packages/input/src/input.vue
+++ b/packages/input/src/input.vue
@@ -1,42 +1,74 @@
 <template>
   <div :class="[
     type === 'textarea' ? 'el-textarea' : 'el-input',
-    size ? 'el-input--' + size : '',
+    inputSize ? 'el-input--' + inputSize : '',
     {
-      'is-disabled': disabled,
+      'is-disabled': inputDisabled,
       'el-input-group': $slots.prepend || $slots.append,
       'el-input-group--append': $slots.append,
-      'el-input-group--prepend': $slots.prepend
+      'el-input-group--prepend': $slots.prepend,
+      'el-input--prefix': $slots.prefix || prefixIcon,
+      'el-input--suffix': $slots.suffix || suffixIcon || clearable
     }
-  ]">
+    ]"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
     <template v-if="type !== 'textarea'">
       <!-- 前置元素 -->
       <div class="el-input-group__prepend" v-if="$slots.prepend">
         <slot name="prepend"></slot>
       </div>
-      <!-- input 图标 -->
-      <slot name="icon">
-        <i class="el-input__icon"
-          :class="[
-            'el-icon-' + icon,
-            onIconClick ? 'is-clickable' : ''
-          ]"
-          v-if="icon"
-          @click="handleIconClick">
-        </i>
-      </slot>
       <input
+        :tabindex="tabindex"
         v-if="type !== 'textarea'"
         class="el-input__inner"
-        v-bind="$props"
-        :autocomplete="autoComplete"
+        v-bind="$attrs"
+        :type="type"
+        :disabled="inputDisabled"
+        :readonly="readonly"
+        :autocomplete="autoComplete || autocomplete"
         :value="currentValue"
         ref="input"
+        @compositionstart="handleComposition"
+        @compositionupdate="handleComposition"
+        @compositionend="handleComposition"
         @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"
+        @change="handleChange"
+        :aria-label="label"
       >
-      <i class="el-input__icon el-icon-loading" v-if="validating"></i>
+      <!-- 前置内容 -->
+      <span class="el-input__prefix" v-if="$slots.prefix || prefixIcon">
+        <slot name="prefix"></slot>
+        <i class="el-input__icon"
+           v-if="prefixIcon"
+           :class="prefixIcon">
+        </i>
+      </span>
+      <!-- 后置内容 -->
+      <span
+        class="el-input__suffix"
+        v-if="$slots.suffix || suffixIcon || showClear || validateState && needStatusIcon">
+        <span class="el-input__suffix-inner">
+          <template v-if="!showClear">
+            <slot name="suffix"></slot>
+            <i class="el-input__icon"
+              v-if="suffixIcon"
+              :class="suffixIcon">
+            </i>
+          </template>
+          <i v-else
+            class="el-input__icon el-icon-circle-close el-input__clear"
+            @click="clear"
+          ></i>
+        </span>
+        <i class="el-input__icon"
+          v-if="validateState"
+          :class="['el-input__validateIcon', validateIcon]">
+        </i>
+      </span>
       <!-- 后置元素 -->
       <div class="el-input-group__append" v-if="$slots.append">
         <slot name="append"></slot>
@@ -44,142 +76,275 @@
     </template>
     <textarea
       v-else
+      :tabindex="tabindex"
       class="el-textarea__inner"
       :value="currentValue"
+      @compositionstart="handleComposition"
+      @compositionupdate="handleComposition"
+      @compositionend="handleComposition"
       @input="handleInput"
       ref="textarea"
-      v-bind="$props"
+      v-bind="$attrs"
+      :disabled="inputDisabled"
+      :readonly="readonly"
+      :autocomplete="autoComplete || autocomplete"
       :style="textareaStyle"
       @focus="handleFocus"
-      @blur="handleBlur">
+      @blur="handleBlur"
+      @change="handleChange"
+      :aria-label="label"
+    >
     </textarea>
   </div>
 </template>
 <script>
   import emitter from 'element-ui/src/mixins/emitter';
+  import Migrating from 'element-ui/src/mixins/migrating';
   import calcTextareaHeight from './calcTextareaHeight';
   import merge from 'element-ui/src/utils/merge';
+  import { isKorean } from 'element-ui/src/utils/shared';
 
   export default {
     name: 'ElInput',
 
     componentName: 'ElInput',
 
-    mixins: [emitter],
+    mixins: [emitter, Migrating],
+
+    inheritAttrs: false,
+
+    inject: {
+      elForm: {
+        default: ''
+      },
+      elFormItem: {
+        default: ''
+      }
+    },
 
     data() {
       return {
-        currentValue: this.value,
-        textareaCalcStyle: {}
+        currentValue: this.value === undefined || this.value === null
+          ? ''
+          : this.value,
+        textareaCalcStyle: {},
+        hovering: false,
+        focused: false,
+        isOnComposition: false,
+        valueBeforeComposition: null
       };
     },
 
     props: {
       value: [String, Number],
-      placeholder: String,
       size: String,
       resize: String,
-      readonly: Boolean,
-      autofocus: Boolean,
-      icon: String,
+      form: String,
       disabled: Boolean,
+      readonly: Boolean,
       type: {
         type: String,
         default: 'text'
       },
-      name: String,
       autosize: {
         type: [Boolean, Object],
         default: false
       },
-      rows: {
-        type: Number,
-        default: 2
+      autocomplete: {
+        type: String,
+        default: 'off'
       },
+      /** @Deprecated in next major version */
       autoComplete: {
         type: String,
-        default: 'off'
+        validator(val) {
+          process.env.NODE_ENV !== 'production' &&
+            console.warn('[Element Warn][Input]\'auto-complete\' property will be deprecated in next major version. please use \'autocomplete\' instead.');
+          return true;
+        }
       },
-      form: String,
-      maxlength: Number,
-      minlength: Number,
-      max: {},
-      min: {},
-      step: {},
       validateEvent: {
         type: Boolean,
         default: true
       },
-      onIconClick: Function
+      suffixIcon: String,
+      prefixIcon: String,
+      label: String,
+      clearable: {
+        type: Boolean,
+        default: false
+      },
+      tabindex: String
     },
 
     computed: {
-      validating() {
-        return this.$parent.validateState === 'validating';
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+      validateState() {
+        return this.elFormItem ? this.elFormItem.validateState : '';
+      },
+      needStatusIcon() {
+        return this.elForm ? this.elForm.statusIcon : false;
+      },
+      validateIcon() {
+        return {
+          validating: 'el-icon-loading',
+          success: 'el-icon-circle-check',
+          error: 'el-icon-circle-close'
+        }[this.validateState];
       },
       textareaStyle() {
         return merge({}, this.textareaCalcStyle, { resize: this.resize });
+      },
+      inputSize() {
+        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+      },
+      inputDisabled() {
+        return this.disabled || (this.elForm || {}).disabled;
+      },
+      showClear() {
+        return this.clearable &&
+          !this.disabled &&
+          !this.readonly &&
+          this.currentValue !== '' &&
+          (this.focused || this.hovering);
       }
     },
 
     watch: {
-      'value'(val, oldValue) {
+      value(val, oldValue) {
         this.setCurrentValue(val);
       }
     },
 
     methods: {
+      focus() {
+        (this.$refs.input || this.$refs.textarea).focus();
+      },
+      blur() {
+        (this.$refs.input || this.$refs.textarea).blur();
+      },
+      getMigratingConfig() {
+        return {
+          props: {
+            'icon': 'icon is removed, use suffix-icon / prefix-icon instead.',
+            'on-icon-click': 'on-icon-click is removed.'
+          },
+          events: {
+            'click': 'click is removed.'
+          }
+        };
+      },
       handleBlur(event) {
+        this.focused = false;
         this.$emit('blur', event);
         if (this.validateEvent) {
           this.dispatch('ElFormItem', 'el.form.blur', [this.currentValue]);
         }
       },
-      inputSelect() {
-        this.$refs.input.select();
+      select() {
+        (this.$refs.input || this.$refs.textarea).select();
       },
       resizeTextarea() {
         if (this.$isServer) return;
-        var { autosize, type } = this;
-        if (!autosize || type !== 'textarea') return;
+        const { autosize, type } = this;
+        if (type !== 'textarea') return;
+        if (!autosize) {
+          this.textareaCalcStyle = {
+            minHeight: calcTextareaHeight(this.$refs.textarea).minHeight
+          };
+          return;
+        }
         const minRows = autosize.minRows;
         const maxRows = autosize.maxRows;
 
         this.textareaCalcStyle = calcTextareaHeight(this.$refs.textarea, minRows, maxRows);
       },
       handleFocus(event) {
+        this.focused = true;
         this.$emit('focus', event);
       },
+      handleComposition(event) {
+        if (event.type === 'compositionend') {
+          this.isOnComposition = false;
+          this.currentValue = this.valueBeforeComposition;
+          this.valueBeforeComposition = null;
+          this.handleInput(event);
+        } else {
+          const text = event.target.value;
+          const lastCharacter = text[text.length - 1] || '';
+          this.isOnComposition = !isKorean(lastCharacter);
+          if (this.isOnComposition && event.type === 'compositionstart') {
+            this.valueBeforeComposition = text;
+          }
+        }
+      },
       handleInput(event) {
         const value = event.target.value;
-        this.$emit('input', value);
         this.setCurrentValue(value);
-        this.$emit('change', value);
+        if (this.isOnComposition) return;
+        this.$emit('input', value);
       },
-      handleIconClick(event) {
-        if (this.onIconClick) {
-          this.onIconClick(event);
-        }
-        this.$emit('click', event);
+      handleChange(event) {
+        this.$emit('change', event.target.value);
       },
       setCurrentValue(value) {
-        if (value === this.currentValue) return;
-        this.$nextTick(_ => {
-          this.resizeTextarea();
-        });
+        if (this.isOnComposition && value === this.valueBeforeComposition) return;
         this.currentValue = value;
-        if (this.validateEvent) {
+        if (this.isOnComposition) return;
+        this.$nextTick(this.resizeTextarea);
+        if (this.validateEvent && this.currentValue === this.value) {
           this.dispatch('ElFormItem', 'el.form.change', [value]);
         }
+      },
+      calcIconOffset(place) {
+        let elList = [].slice.call(this.$el.querySelectorAll(`.el-input__${place}`) || []);
+        if (!elList.length) return;
+        let el = null;
+        for (let i = 0; i < elList.length; i++) {
+          if (elList[i].parentNode === this.$el) {
+            el = elList[i];
+            break;
+          }
+        }
+        if (!el) return;
+        const pendantMap = {
+          suffix: 'append',
+          prefix: 'prepend'
+        };
+
+        const pendant = pendantMap[place];
+        if (this.$slots[pendant]) {
+          el.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${this.$el.querySelector(`.el-input-group__${pendant}`).offsetWidth}px)`;
+        } else {
+          el.removeAttribute('style');
+        }
+      },
+      updateIconOffset() {
+        this.calcIconOffset('prefix');
+        this.calcIconOffset('suffix');
+      },
+      clear() {
+        this.$emit('input', '');
+        this.$emit('change', '');
+        this.$emit('clear');
+        this.setCurrentValue('');
+        this.focus();
       }
     },
 
     created() {
-      this.$on('inputSelect', this.inputSelect);
+      this.$on('inputSelect', this.select);
     },
 
     mounted() {
       this.resizeTextarea();
+      this.updateIconOffset();
+    },
+
+    updated() {
+      this.$nextTick(this.updateIconOffset);
     }
   };
 </script>
diff --git a/packages/loading/README.md b/packages/loading/README.md
deleted file mode 100644
index f281596d49..0000000000
--- a/packages/loading/README.md
+++ /dev/null
@@ -1,66 +0,0 @@
-# element-loading
-> A element-loading component for Vue.js.
-
-## Demo
-http://element-component.github.io/element-loading
-
-## Installation
-```shell
-npm i element-loading -D
-```
-
-## Usage
-```javascript
-import Vue from 'vue'
-import ElLoading from 'element-loading'
-import 'element-theme-default/dist/loading.css'
-
-Vue.use(ElLoading)
-```
-
-### 服务
-Loading 还可以以服务的方式调用。引入 Loading 服务：
-
-在需要调用时：
-```javascript
-Loading.service(options);
-```
-其中 `options` 参数为 Loading 的配置项，具体见下表。`LoadingService` 会返回一个 Loading 实例，可通过调用该实例的 `close` 方法来关闭它：
-```javascript
-let loadingInstance = Loading.service(options);
-loadingInstance.close();
-```
-需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例：
-```javascript
-let loadingInstance1 = Loading.service({ fullscreen: true });
-let loadingInstance2 = Loading.service({ fullscreen: true });
-console.log(loadingInstance1 === loadingInstance2); // true
-```
-此时调用它们中任意一个的 `close` 方法都能关闭这个全屏 Loading。
-
-如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 `$loading`，它的调用方式为：`this.$loading(options)`，同样会返回一个 Loading 实例。
-
-### Options
-| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
-|---------- |-------------- |---------- |--------------------------------  |-------- |
-| target | Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 `document.querySelector`以获取到对应 DOM 节点 | object/string | — | document.body |
-| body | 同 `v-loading` 指令中的 `body` 修饰符 | boolean | — | false |
-| fullscreen | 同 `v-loading` 指令中的 `fullscreen` 修饰符 | boolean | — | true |
-| lock | 同 `v-loading` 指令中的 `lock` 修饰符 | boolean | — | false |
-| text | 显示在加载图标下方的加载文案 | string | — | — |
-| customClass | Loading 的自定义类名 | string | — | — |
-
-
-## Development
-```shell
-make dev
-
-## test
-make test
-
-## build
-make build
-```
-
-# License
-[MIT](https://opensource.org/licenses/MIT)
diff --git a/packages/loading/cooking.conf.js b/packages/loading/cooking.conf.js
deleted file mode 100644
index 34c82fcb98..0000000000
--- a/packages/loading/cooking.conf.js
+++ /dev/null
@@ -1,6 +0,0 @@
-var cooking = require('cooking');
-var gen = require('../../build/gen-single-config');
-
-cooking.set(gen(__dirname, 'ElLoading'));
-
-module.exports = cooking.resolve();
diff --git a/packages/loading/package.json b/packages/loading/package.json
deleted file mode 100644
index babc01be8b..0000000000
--- a/packages/loading/package.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "name": "element-loading",
-  "version": "1.0.0",
-  "description": "A loading component for Vue.js.",
-  "keywords": [
-    "element",
-    "vue",
-    "component"
-  ],
-  "main": "./lib/index.js",
-  "repository": "https://github.com/ElemeFE/element/tree/master/packages/loading",
-  "author": "elemefe",
-  "license": "MIT",
-  "dependencies": {}
-}
diff --git a/packages/loading/src/directive.js b/packages/loading/src/directive.js
index 2efcf34a3d..e96237ea0e 100644
--- a/packages/loading/src/directive.js
+++ b/packages/loading/src/directive.js
@@ -1,15 +1,20 @@
 import Vue from 'vue';
+import Loading from './loading.vue';
 import { addClass, removeClass, getStyle } from 'element-ui/src/utils/dom';
-let Mask = Vue.extend(require('./loading.vue'));
+import { PopupManager } from 'element-ui/src/utils/popup';
+import afterLeave from 'element-ui/src/utils/after-leave';
+const Mask = Vue.extend(Loading);
 
-exports.install = Vue => {
+const loadingDirective = {};
+loadingDirective.install = Vue => {
   if (Vue.prototype.$isServer) return;
-  let toggleLoading = (el, binding) => {
+  const toggleLoading = (el, binding) => {
     if (binding.value) {
       Vue.nextTick(() => {
         if (binding.modifiers.fullscreen) {
-          el.originalPosition = document.body.style.position;
-          el.originalOverflow = document.body.style.overflow;
+          el.originalPosition = getStyle(document.body, 'position');
+          el.originalOverflow = getStyle(document.body, 'overflow');
+          el.maskStyle.zIndex = PopupManager.nextZIndex();
 
           addClass(el.mask, 'is-fullscreen');
           insertDom(document.body, el, binding);
@@ -17,11 +22,15 @@ exports.install = Vue => {
           removeClass(el.mask, 'is-fullscreen');
 
           if (binding.modifiers.body) {
-            el.originalPosition = document.body.style.position;
+            el.originalPosition = getStyle(document.body, 'position');
 
             ['top', 'left'].forEach(property => {
-              let scroll = property === 'top' ? 'scrollTop' : 'scrollLeft';
-              el.maskStyle[property] = el.getBoundingClientRect()[property] + document.body[scroll] + document.documentElement[scroll] + 'px';
+              const scroll = property === 'top' ? 'scrollTop' : 'scrollLeft';
+              el.maskStyle[property] = el.getBoundingClientRect()[property] +
+                document.body[scroll] +
+                document.documentElement[scroll] -
+                parseInt(getStyle(document.body, `margin-${ property }`), 10) +
+                'px';
             });
             ['height', 'width'].forEach(property => {
               el.maskStyle[property] = el.getBoundingClientRect()[property] + 'px';
@@ -29,56 +38,65 @@ exports.install = Vue => {
 
             insertDom(document.body, el, binding);
           } else {
-            el.originalPosition = el.style.position;
+            el.originalPosition = getStyle(el, 'position');
             insertDom(el, el, binding);
           }
         }
       });
     } else {
-      if (el.domVisible) {
-        el.instance.$on('after-leave', _ => {
-          el.domVisible = false;
-          if (binding.modifiers.fullscreen && el.originalOverflow !== 'hidden') {
-            document.body.style.overflow = el.originalOverflow;
-          }
-          if (binding.modifiers.fullscreen || binding.modifiers.body) {
-            document.body.style.position = el.originalPosition;
-          } else {
-            el.style.position = el.originalPosition;
-          }
-        });
-        el.instance.visible = false;
-      }
+      afterLeave(el.instance, _ => {
+        el.domVisible = false;
+        const target = binding.modifiers.fullscreen || binding.modifiers.body
+          ? document.body
+          : el;
+        removeClass(target, 'el-loading-parent--relative');
+        removeClass(target, 'el-loading-parent--hidden');
+        el.instance.hiding = false;
+      }, 300, true);
+      el.instance.visible = false;
+      el.instance.hiding = true;
     }
   };
-  let insertDom = (parent, el, binding) => {
+  const insertDom = (parent, el, binding) => {
     if (!el.domVisible && getStyle(el, 'display') !== 'none' && getStyle(el, 'visibility') !== 'hidden') {
       Object.keys(el.maskStyle).forEach(property => {
         el.mask.style[property] = el.maskStyle[property];
       });
 
-      if (el.originalPosition !== 'absolute') {
-        parent.style.position = 'relative';
+      if (el.originalPosition !== 'absolute' && el.originalPosition !== 'fixed') {
+        addClass(parent, 'el-loading-parent--relative');
       }
       if (binding.modifiers.fullscreen && binding.modifiers.lock) {
-        parent.style.overflow = 'hidden';
+        addClass(parent, 'el-loading-parent--hidden');
       }
       el.domVisible = true;
 
       parent.appendChild(el.mask);
       Vue.nextTick(() => {
-        el.instance.visible = true;
+        if (el.instance.hiding) {
+          el.instance.$emit('after-leave');
+        } else {
+          el.instance.visible = true;
+        }
       });
       el.domInserted = true;
     }
   };
 
   Vue.directive('loading', {
-    bind: function(el, binding) {
-      let mask = new Mask({
+    bind: function(el, binding, vnode) {
+      const textExr = el.getAttribute('element-loading-text');
+      const spinnerExr = el.getAttribute('element-loading-spinner');
+      const backgroundExr = el.getAttribute('element-loading-background');
+      const customClassExr = el.getAttribute('element-loading-custom-class');
+      const vm = vnode.context;
+      const mask = new Mask({
         el: document.createElement('div'),
         data: {
-          text: el.getAttribute('element-loading-text'),
+          text: vm && vm[textExr] || textExr,
+          spinner: vm && vm[spinnerExr] || spinnerExr,
+          background: vm && vm[backgroundExr] || backgroundExr,
+          customClass: vm && vm[customClassExr] || customClassExr,
           fullscreen: !!binding.modifiers.fullscreen
         }
       });
@@ -86,7 +104,7 @@ exports.install = Vue => {
       el.mask = mask.$el;
       el.maskStyle = {};
 
-      toggleLoading(el, binding);
+      binding.value && toggleLoading(el, binding);
     },
 
     update: function(el, binding) {
@@ -98,14 +116,13 @@ exports.install = Vue => {
 
     unbind: function(el, binding) {
       if (el.domInserted) {
-        if (binding.modifiers.fullscreen || binding.modifiers.body) {
-          document.body.removeChild(el.mask);
-        } else {
-          el.mask &&
-          el.mask.parentNode &&
-          el.mask.parentNode.removeChild(el.mask);
-        }
+        el.mask &&
+        el.mask.parentNode &&
+        el.mask.parentNode.removeChild(el.mask);
+        toggleLoading(el, { value: false, modifiers: binding.modifiers });
       }
     }
   });
 };
+
+export default loadingDirective;
diff --git a/packages/loading/src/index.js b/packages/loading/src/index.js
index 7841d07797..97e175dea4 100644
--- a/packages/loading/src/index.js
+++ b/packages/loading/src/index.js
@@ -1,5 +1,8 @@
 import Vue from 'vue';
 import loadingVue from './loading.vue';
+import { addClass, removeClass, getStyle } from 'element-ui/src/utils/dom';
+import { PopupManager } from 'element-ui/src/utils/popup';
+import afterLeave from 'element-ui/src/utils/after-leave';
 import merge from 'element-ui/src/utils/merge';
 
 const LoadingConstructor = Vue.extend(loadingVue);
@@ -18,33 +21,31 @@ LoadingConstructor.prototype.originalPosition = '';
 LoadingConstructor.prototype.originalOverflow = '';
 
 LoadingConstructor.prototype.close = function() {
-  if (this.fullscreen && this.originalOverflow !== 'hidden') {
-    document.body.style.overflow = this.originalOverflow;
-  }
-  if (this.fullscreen || this.body) {
-    document.body.style.position = this.originalPosition;
-  } else {
-    this.target.style.position = this.originalPosition;
-  }
   if (this.fullscreen) {
     fullscreenLoading = undefined;
   }
-  this.$on('after-leave', _ => {
-    this.$el &&
-    this.$el.parentNode &&
-    this.$el.parentNode.removeChild(this.$el);
+  afterLeave(this, _ => {
+    const target = this.fullscreen || this.body
+      ? document.body
+      : this.target;
+    removeClass(target, 'el-loading-parent--relative');
+    removeClass(target, 'el-loading-parent--hidden');
+    if (this.$el && this.$el.parentNode) {
+      this.$el.parentNode.removeChild(this.$el);
+    }
     this.$destroy();
-  });
+  }, 300);
   this.visible = false;
 };
 
 const addStyle = (options, parent, instance) => {
   let maskStyle = {};
   if (options.fullscreen) {
-    instance.originalPosition = document.body.style.position;
-    instance.originalOverflow = document.body.style.overflow;
+    instance.originalPosition = getStyle(document.body, 'position');
+    instance.originalOverflow = getStyle(document.body, 'overflow');
+    maskStyle.zIndex = PopupManager.nextZIndex();
   } else if (options.body) {
-    instance.originalPosition = document.body.style.position;
+    instance.originalPosition = getStyle(document.body, 'position');
     ['top', 'left'].forEach(property => {
       let scroll = property === 'top' ? 'scrollTop' : 'scrollLeft';
       maskStyle[property] = options.target.getBoundingClientRect()[property] +
@@ -56,7 +57,7 @@ const addStyle = (options, parent, instance) => {
       maskStyle[property] = options.target.getBoundingClientRect()[property] + 'px';
     });
   } else {
-    instance.originalPosition = parent.style.position;
+    instance.originalPosition = getStyle(parent, 'position');
   }
   Object.keys(maskStyle).forEach(property => {
     instance.$el.style[property] = maskStyle[property];
@@ -86,11 +87,11 @@ const Loading = (options = {}) => {
   });
 
   addStyle(options, parent, instance);
-  if (instance.originalPosition !== 'absolute') {
-    parent.style.position = 'relative';
+  if (instance.originalPosition !== 'absolute' && instance.originalPosition !== 'fixed') {
+    addClass(parent, 'el-loading-parent--relative');
   }
   if (options.fullscreen && options.lock) {
-    parent.style.overflow = 'hidden';
+    addClass(parent, 'el-loading-parent--hidden');
   }
   parent.appendChild(instance.$el);
   Vue.nextTick(() => {
diff --git a/packages/loading/src/loading.vue b/packages/loading/src/loading.vue
index 183fced09c..59df409341 100644
--- a/packages/loading/src/loading.vue
+++ b/packages/loading/src/loading.vue
@@ -3,11 +3,13 @@
     <div
       v-show="visible"
       class="el-loading-mask"
+      :style="{ backgroundColor: background || '' }"
       :class="[customClass, { 'is-fullscreen': fullscreen }]">
       <div class="el-loading-spinner">
-        <svg class="circular" viewBox="25 25 50 50">
+        <svg v-if="!spinner" class="circular" viewBox="25 25 50 50">
           <circle class="path" cx="50" cy="50" r="20" fill="none"/>
         </svg>
+        <i v-else :class="spinner"></i>
         <p v-if="text" class="el-loading-text">{{ text }}</p>
       </div>
     </div>
@@ -19,6 +21,8 @@
     data() {
       return {
         text: null,
+        spinner: null,
+        background: null,
         fullscreen: true,
         visible: false,
         customClass: ''
diff --git a/packages/main/index.js b/packages/main/index.js
new file mode 100644
index 0000000000..a501614315
--- /dev/null
+++ b/packages/main/index.js
@@ -0,0 +1,8 @@
+import Main from './src/main';
+
+/* istanbul ignore next */
+Main.install = function(Vue) {
+  Vue.component(Main.name, Main);
+};
+
+export default Main;
diff --git a/packages/main/src/main.vue b/packages/main/src/main.vue
new file mode 100644
index 0000000000..48fdaf6c4d
--- /dev/null
+++ b/packages/main/src/main.vue
@@ -0,0 +1,12 @@
+<template>
+  <main class="el-main">
+    <slot></slot>
+  </main>
+</template>
+
+<script>
+  export default {
+    name: 'ElMain',
+    componentName: 'ElMain'
+  };
+</script>
diff --git a/packages/menu/src/menu-item-group.vue b/packages/menu/src/menu-item-group.vue
index 617a63601e..772faea950 100644
--- a/packages/menu/src/menu-item-group.vue
+++ b/packages/menu/src/menu-item-group.vue
@@ -28,7 +28,7 @@
     },
     computed: {
       levelPadding() {
-        let padding = 10;
+        let padding = 20;
         let parent = this.$parent;
         if (this.rootMenu.collapse) return 20;
         while (parent && parent.$options.componentName !== 'ElMenu') {
@@ -37,7 +37,6 @@
           }
           parent = parent.$parent;
         }
-        padding === 10 && (padding = 20);
         return padding;
       }
     }
diff --git a/packages/menu/src/menu-item.vue b/packages/menu/src/menu-item.vue
index ac0df06a25..a4e7aac617 100644
--- a/packages/menu/src/menu-item.vue
+++ b/packages/menu/src/menu-item.vue
@@ -1,13 +1,20 @@
 <template>
   <li class="el-menu-item"
-    :style="paddingStyle"
-    @click="handleClick"
+    role="menuitem"
+    tabindex="-1"
+    :style="[paddingStyle, itemStyle, { backgroundColor }]"
     :class="{
       'is-active': active,
       'is-disabled': disabled
-    }">
+    }"
+    @click="handleClick"
+    @mouseenter="onMouseEnter"
+    @focus="onMouseEnter"
+    @blur="onMouseLeave"
+    @mouseleave="onMouseLeave"
+  >
     <el-tooltip
-      v-if="$parent === rootMenu && rootMenu.collapse"
+      v-if="parentMenu.$options.componentName === 'ElMenu' && rootMenu.collapse && $slots.title"
       effect="dark"
       placement="right">
       <div slot="content"><slot name="title"></slot></div>
@@ -23,6 +30,7 @@
 </template>
 <script>
   import Menu from './menu-mixin';
+  import ElTooltip from 'element-ui/packages/tooltip';
   import Emitter from 'element-ui/src/mixins/emitter';
 
   export default {
@@ -32,32 +40,67 @@
 
     mixins: [Menu, Emitter],
 
+    components: { ElTooltip },
+
     props: {
       index: {
         type: String,
         required: true
       },
-      route: {
-        type: Object,
-        required: false
-      },
-      disabled: {
-        type: Boolean,
-        required: false
-      }
+      route: [String, Object],
+      disabled: Boolean
     },
     computed: {
       active() {
-        return this.index === this.rootMenu.activedIndex;
+        return this.index === this.rootMenu.activeIndex;
+      },
+      hoverBackground() {
+        return this.rootMenu.hoverBackground;
+      },
+      backgroundColor() {
+        return this.rootMenu.backgroundColor || '';
+      },
+      activeTextColor() {
+        return this.rootMenu.activeTextColor || '';
+      },
+      textColor() {
+        return this.rootMenu.textColor || '';
+      },
+      mode() {
+        return this.rootMenu.mode;
+      },
+      itemStyle() {
+        const style = {
+          color: this.active ? this.activeTextColor : this.textColor
+        };
+        if (this.mode === 'horizontal' && !this.isNested) {
+          style.borderBottomColor = this.active
+            ? (this.rootMenu.activeTextColor ? this.activeTextColor : '')
+            : 'transparent';
+        }
+        return style;
+      },
+      isNested() {
+        return this.parentMenu !== this.rootMenu;
       }
     },
     methods: {
+      onMouseEnter() {
+        if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
+        this.$el.style.backgroundColor = this.hoverBackground;
+      },
+      onMouseLeave() {
+        if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
+        this.$el.style.backgroundColor = this.backgroundColor;
+      },
       handleClick() {
-        this.dispatch('ElMenu', 'item-click', this);
-        this.$emit('click', this);
+        if (!this.disabled) {
+          this.dispatch('ElMenu', 'item-click', this);
+          this.$emit('click', this);
+        }
       }
     },
-    created() {
+    mounted() {
       this.parentMenu.addItem(this);
       this.rootMenu.addItem(this);
     },
diff --git a/packages/menu/src/menu-mixin.js b/packages/menu/src/menu-mixin.js
index 56479bbbb8..453b264505 100644
--- a/packages/menu/src/menu-mixin.js
+++ b/packages/menu/src/menu-mixin.js
@@ -1,8 +1,9 @@
 export default {
+  inject: ['rootMenu'],
   computed: {
     indexPath() {
-      var path = [this.index];
-      var parent = this.$parent;
+      const path = [this.index];
+      let parent = this.$parent;
       while (parent.$options.componentName !== 'ElMenu') {
         if (parent.index) {
           path.unshift(parent.index);
@@ -11,16 +12,6 @@ export default {
       }
       return path;
     },
-    rootMenu() {
-      var parent = this.$parent;
-      while (
-        parent &&
-        parent.$options.componentName !== 'ElMenu'
-      ) {
-        parent = parent.$parent;
-      }
-      return parent;
-    },
     parentMenu() {
       let parent = this.$parent;
       while (
diff --git a/packages/menu/src/menu.vue b/packages/menu/src/menu.vue
index 4993e18852..ca448e3c39 100644
--- a/packages/menu/src/menu.vue
+++ b/packages/menu/src/menu.vue
@@ -1,89 +1,42 @@
-<template>
-  <el-menu-collapse-transition>
-    <ul class="el-menu"
-      :key="+collapse"
-      :class="{
-        'el-menu--horizontal': mode === 'horizontal',
-        'el-menu--dark': theme === 'dark',
-        'el-menu--collapse': collapse
-      }"
-    >
-      <slot></slot>
-    </ul>
-  </el-menu-collapse-transition>
-</template>
-<script>
-  import Vue from 'vue';
+<script type="text/jsx">
   import emitter from 'element-ui/src/mixins/emitter';
+  import Migrating from 'element-ui/src/mixins/migrating';
+  import Menubar from 'element-ui/src/utils/menu/aria-menubar';
   import { addClass, removeClass, hasClass } from 'element-ui/src/utils/dom';
 
-  Vue.component('el-menu-collapse-transition', {
-    functional: true,
-    render(createElement, context) {
-      const data = {
-        props: {
-          mode: 'out-in'
-        },
-        on: {
-          beforeEnter(el) {
-            el.style.opacity = 0.2;
-          },
-
-          enter(el) {
-            addClass(el, 'el-opacity-transition');
-            el.style.opacity = 1;
-          },
-
-          afterEnter(el) {
-            removeClass(el, 'el-opacity-transition');
-            el.style.opacity = '';
-          },
-
-          beforeLeave(el) {
-            if (!el.dataset) el.dataset = {};
-
-            if (hasClass(el, 'el-menu--collapse')) {
-              removeClass(el, 'el-menu--collapse');
-              el.dataset.oldOverflow = el.style.overflow;
-              el.dataset.scrollWidth = el.scrollWidth;
-              addClass(el, 'el-menu--collapse');
-            }
-
-            el.style.width = el.scrollWidth + 'px';
-            el.style.overflow = 'hidden';
-          },
-
-          leave(el) {
-            if (!hasClass(el, 'el-menu--collapse')) {
-              addClass(el, 'horizontal-collapse-transition');
-              el.style.width = '64px';
-            } else {
-              addClass(el, 'horizontal-collapse-transition');
-              el.style.width = el.dataset.scrollWidth + 'px';
-            }
-          },
-
-          afterLeave(el) {
-            removeClass(el, 'horizontal-collapse-transition');
-            if (hasClass(el, 'el-menu--collapse')) {
-              el.style.width = el.dataset.scrollWidth + 'px';
-            } else {
-              el.style.width = '64px';
-            }
-            el.style.overflow = el.dataset.oldOverflow;
-          }
-        }
-      };
-      return createElement('transition', data, context.children);
-    }
-  });
-
   export default {
     name: 'ElMenu',
 
+    render (h) {
+      const component = (
+        <ul
+          role="menubar"
+          key={ +this.collapse }
+          style={{ backgroundColor: this.backgroundColor || '' }}
+          class={{
+            'el-menu--horizontal': this.mode === 'horizontal',
+            'el-menu--collapse': this.collapse,
+            "el-menu": true
+          }}
+        >
+          { this.$slots.default }
+        </ul>
+      );
+
+      if (this.collapseTransition) {
+        return (
+          <el-menu-collapse-transition>
+            { component }
+          </el-menu-collapse-transition>
+        );
+      } else {
+        return component;
+      }
+    },
+
     componentName: 'ElMenu',
 
-    mixins: [emitter],
+    mixins: [emitter, Migrating],
 
     provide() {
       return {
@@ -91,6 +44,59 @@
       };
     },
 
+    components: {
+      'el-menu-collapse-transition': {
+        functional: true,
+        render(createElement, context) {
+          const data = {
+            props: {
+              mode: 'out-in'
+            },
+            on: {
+              beforeEnter(el) {
+                el.style.opacity = 0.2;
+              },
+
+              enter(el) {
+                addClass(el, 'el-opacity-transition');
+                el.style.opacity = 1;
+              },
+
+              afterEnter(el) {
+                removeClass(el, 'el-opacity-transition');
+                el.style.opacity = '';
+              },
+
+              beforeLeave(el) {
+                if (!el.dataset) el.dataset = {};
+
+                if (hasClass(el, 'el-menu--collapse')) {
+                  removeClass(el, 'el-menu--collapse');
+                  el.dataset.oldOverflow = el.style.overflow;
+                  el.dataset.scrollWidth = el.clientWidth;
+                  addClass(el, 'el-menu--collapse');
+                } else {
+                  addClass(el, 'el-menu--collapse');
+                  el.dataset.oldOverflow = el.style.overflow;
+                  el.dataset.scrollWidth = el.clientWidth;
+                  removeClass(el, 'el-menu--collapse');
+                }
+
+                el.style.width = el.scrollWidth + 'px';
+                el.style.overflow = 'hidden';
+              },
+
+              leave(el) {
+                addClass(el, 'horizontal-collapse-transition');
+                el.style.width = el.dataset.scrollWidth + 'px';
+              }
+            }
+          };
+          return createElement('transition', data, context.children);
+        }
+      }
+    },
+
     props: {
       mode: {
         type: String,
@@ -101,42 +107,105 @@
         default: ''
       },
       defaultOpeneds: Array,
-      theme: {
-        type: String,
-        default: 'light'
-      },
       uniqueOpened: Boolean,
       router: Boolean,
       menuTrigger: {
         type: String,
         default: 'hover'
       },
-      collapse: Boolean
+      collapse: Boolean,
+      backgroundColor: String,
+      textColor: String,
+      activeTextColor: String,
+      collapseTransition: {
+        type: Boolean,
+        default: true
+      }
     },
     data() {
       return {
-        activedIndex: this.defaultActive,
-        openedMenus: this.defaultOpeneds ? this.defaultOpeneds.slice(0) : [],
+        activeIndex: this.defaultActive,
+        openedMenus: (this.defaultOpeneds && !this.collapse) ? this.defaultOpeneds.slice(0) : [],
         items: {},
         submenus: {}
       };
     },
+    computed: {
+      hoverBackground() {
+        return this.backgroundColor ? this.mixColor(this.backgroundColor, 0.2) : '';
+      },
+      isMenuPopup() {
+        return this.mode === 'horizontal' || (this.mode === 'vertical' && this.collapse);
+      }
+    },
     watch: {
-      defaultActive(value) {
-        const item = this.items[value];
+      defaultActive: 'updateActiveIndex',
+
+      defaultOpeneds(value) {
+        if (!this.collapse) {
+          this.openedMenus = value;
+        }
+      },
+
+      collapse(value) {
+        if (value) this.openedMenus = [];
+        this.broadcast('ElSubmenu', 'toggle-collapse', value);
+      }
+    },
+    methods: {
+      updateActiveIndex(val) {
+        const item = this.items[val] || this.items[this.activeIndex] || this.items[this.defaultActive];
         if (item) {
-          this.activedIndex = item.index;
+          this.activeIndex = item.index;
           this.initOpenedMenu();
         } else {
-          this.activedIndex = '';
+          this.activeIndex = null;
         }
+      },
 
+      getMigratingConfig() {
+        return {
+          props: {
+            'theme': 'theme is removed.'
+          }
+        };
+      },
+      getColorChannels(color) {
+        color = color.replace('#', '');
+        if (/^[0-9a-fA-F]{3}$/.test(color)) {
+          color = color.split('');
+          for (let i = 2; i >= 0; i--) {
+            color.splice(i, 0, color[i]);
+          }
+          color = color.join('');
+        }
+        if (/^[0-9a-fA-F]{6}$/.test(color)) {
+          return {
+            red: parseInt(color.slice(0, 2), 16),
+            green: parseInt(color.slice(2, 4), 16),
+            blue: parseInt(color.slice(4, 6), 16)
+          };
+        } else {
+          return {
+            red: 255,
+            green: 255,
+            blue: 255
+          };
+        }
+      },
+      mixColor(color, percent) {
+        let { red, green, blue } = this.getColorChannels(color);
+        if (percent > 0) { // shade given color
+          red *= 1 - percent;
+          green *= 1 - percent;
+          blue *= 1 - percent;
+        } else { // tint given color
+          red += (255 - red) * percent;
+          green += (255 - green) * percent;
+          blue += (255 - blue) * percent;
+        }
+        return `rgb(${ Math.round(red) }, ${ Math.round(green) }, ${ Math.round(blue) })`;
       },
-      defaultOpeneds(value) {
-        this.openedMenus = value;
-      }
-    },
-    methods: {
       addItem(item) {
         this.$set(this.items, item.index, item);
       },
@@ -153,6 +222,7 @@
         let openedMenus = this.openedMenus;
         if (openedMenus.indexOf(index) !== -1) return;
         // 将不在该菜单路径下的其余菜单收起
+        // collapse all menu that are not under current menu item
         if (this.uniqueOpened) {
           this.openedMenus = openedMenus.filter(index => {
             return indexPath.indexOf(index) !== -1;
@@ -160,15 +230,18 @@
         }
         this.openedMenus.push(index);
       },
-      closeMenu(index, indexPath) {
-        this.openedMenus.splice(this.openedMenus.indexOf(index), 1);
+      closeMenu(index) {
+        const i = this.openedMenus.indexOf(index);
+        if (i !== -1) {
+          this.openedMenus.splice(i, 1);
+        }
       },
       handleSubmenuClick(submenu) {
         const { index, indexPath } = submenu;
         let isOpened = this.openedMenus.indexOf(index) !== -1;
 
         if (isOpened) {
-          this.closeMenu(index, indexPath);
+          this.closeMenu(index);
           this.$emit('close', index, indexPath);
         } else {
           this.openMenu(index, indexPath);
@@ -176,8 +249,10 @@
         }
       },
       handleItemClick(item) {
-        let { index, indexPath } = item;
-        this.activedIndex = item.index;
+        const { index, indexPath } = item;
+        const oldActiveIndex = this.activeIndex;
+
+        this.activeIndex = item.index;
         this.$emit('select', index, indexPath, item);
 
         if (this.mode === 'horizontal' || this.collapse) {
@@ -185,36 +260,52 @@
         }
 
         if (this.router) {
-          this.routeToItem(item);
+          this.routeToItem(item, (error) => {
+            this.activeIndex = oldActiveIndex;
+            if (error) console.error(error);
+          });
         }
       },
       // 初始化展开菜单
+      // initialize opened menu
       initOpenedMenu() {
-        const index = this.activedIndex;
+        const index = this.activeIndex;
         const activeItem = this.items[index];
         if (!activeItem || this.mode === 'horizontal' || this.collapse) return;
 
         let indexPath = activeItem.indexPath;
 
         // 展开该菜单项的路径上所有子菜单
+        // expand all submenus of the menu item
         indexPath.forEach(index => {
           let submenu = this.submenus[index];
           submenu && this.openMenu(index, submenu.indexPath);
         });
       },
-      routeToItem(item) {
+      routeToItem(item, onError) {
         let route = item.route || item.index;
         try {
-          this.$router.push(route);
+          this.$router.push(route, () => {}, onError);
         } catch (e) {
           console.error(e);
         }
+      },
+      open(index) {
+        const { indexPath } = this.submenus[index.toString()];
+        indexPath.forEach(i => this.openMenu(i, indexPath));
+      },
+      close(index) {
+        this.closeMenu(index);
       }
     },
     mounted() {
       this.initOpenedMenu();
       this.$on('item-click', this.handleItemClick);
       this.$on('submenu-click', this.handleSubmenuClick);
+      if (this.mode === 'horizontal') {
+        new Menubar(this.$el); // eslint-disable-line
+      }
+      this.$watch('items', this.updateActiveIndex);
     }
   };
 </script>
diff --git a/packages/menu/src/submenu.vue b/packages/menu/src/submenu.vue
index 4fdcab005f..3759669332 100644
--- a/packages/menu/src/submenu.vue
+++ b/packages/menu/src/submenu.vue
@@ -1,44 +1,31 @@
-<template>
-  <li
-    :class="{
-      'el-submenu': true,
-      'is-active': active,
-      'is-opened': opened
-    }"
-    @mouseenter="handleMouseenter"
-    @mouseleave="handleMouseleave"
-  >
-    <div class="el-submenu__title" ref="submenu-title" @click="handleClick" :style="paddingStyle">
-      <slot name="title"></slot>
-      <i :class="{
-        'el-submenu__icon-arrow': true,
-        'el-icon-caret-bottom': rootMenu.mode === 'horizontal',
-        'el-icon-arrow-down': rootMenu.mode === 'vertical' && !rootMenu.collapse,
-        'el-icon-caret-right': rootMenu.mode === 'vertical' && rootMenu.collapse
-      }">
-      </i>
-    </div>
-    <template v-if="rootMenu.mode === 'horizontal' || (rootMenu.mode === 'vertical' && rootMenu.collapse)">
-      <transition :name="menuTransitionName">
-        <ul class="el-menu" v-show="opened"><slot></slot></ul>
-      </transition>
-    </template>
-    <el-collapse-transition v-else>
-      <ul class="el-menu" v-show="opened"><slot></slot></ul>
-    </el-collapse-transition>
-  </li>
-</template>
 <script>
   import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition';
   import menuMixin from './menu-mixin';
   import Emitter from 'element-ui/src/mixins/emitter';
+  import Popper from 'element-ui/src/utils/vue-popper';
+
+  const poperMixins = {
+    props: {
+      transformOrigin: {
+        type: [Boolean, String],
+        default: false
+      },
+      offset: Popper.props.offset,
+      boundariesPadding: Popper.props.boundariesPadding,
+      popperOptions: Popper.props.popperOptions
+    },
+    data: Popper.data,
+    methods: Popper.methods,
+    beforeDestroy: Popper.beforeDestroy,
+    deactivated: Popper.deactivated
+  };
 
   export default {
     name: 'ElSubmenu',
 
     componentName: 'ElSubmenu',
 
-    mixins: [menuMixin, Emitter],
+    mixins: [menuMixin, Emitter, poperMixins],
 
     components: { ElCollapseTransition },
 
@@ -46,47 +33,128 @@
       index: {
         type: String,
         required: true
+      },
+      showTimeout: {
+        type: Number,
+        default: 300
+      },
+      hideTimeout: {
+        type: Number,
+        default: 300
+      },
+      popperClass: String,
+      disabled: Boolean,
+      popperAppendToBody: {
+        type: Boolean,
+        default: undefined
       }
     },
 
     data() {
       return {
+        popperJS: null,
         timeout: null,
         items: {},
-        submenus: {}
+        submenus: {},
+        mouseInChild: false
       };
     },
+    watch: {
+      opened(val) {
+        if (this.isMenuPopup) {
+          this.$nextTick(_ => {
+            this.updatePopper();
+          });
+        }
+      }
+    },
     computed: {
+      // popper option
+      appendToBody() {
+        return this.popperAppendToBody === undefined
+          ? this.isFirstLevel
+          : this.popperAppendToBody;
+      },
       menuTransitionName() {
         return this.rootMenu.collapse ? 'el-zoom-in-left' : 'el-zoom-in-top';
       },
       opened() {
         return this.rootMenu.openedMenus.indexOf(this.index) > -1;
       },
-      active: {
-        cache: false,
-        get() {
-          let isActive = false;
-          const submenus = this.submenus;
-          const items = this.items;
+      active() {
+        let isActive = false;
+        const submenus = this.submenus;
+        const items = this.items;
 
-          Object.keys(items).forEach(index => {
-            if (items[index].active) {
-              isActive = true;
-            }
-          });
+        Object.keys(items).forEach(index => {
+          if (items[index].active) {
+            isActive = true;
+          }
+        });
 
-          Object.keys(submenus).forEach(index => {
-            if (submenus[index].active) {
-              isActive = true;
-            }
-          });
+        Object.keys(submenus).forEach(index => {
+          if (submenus[index].active) {
+            isActive = true;
+          }
+        });
 
-          return isActive;
+        return isActive;
+      },
+      hoverBackground() {
+        return this.rootMenu.hoverBackground;
+      },
+      backgroundColor() {
+        return this.rootMenu.backgroundColor || '';
+      },
+      activeTextColor() {
+        return this.rootMenu.activeTextColor || '';
+      },
+      textColor() {
+        return this.rootMenu.textColor || '';
+      },
+      mode() {
+        return this.rootMenu.mode;
+      },
+      isMenuPopup() {
+        return this.rootMenu.isMenuPopup;
+      },
+      titleStyle() {
+        if (this.mode !== 'horizontal') {
+          return {
+            color: this.textColor
+          };
+        }
+        return {
+          borderBottomColor: this.active
+            ? (this.rootMenu.activeTextColor ? this.activeTextColor : '')
+            : 'transparent',
+          color: this.active
+            ? this.activeTextColor
+            : this.textColor
+        };
+      },
+      isFirstLevel() {
+        let isFirstLevel = true;
+        let parent = this.$parent;
+        while (parent && parent !== this.rootMenu) {
+          if (['ElSubmenu', 'ElMenuItemGroup'].indexOf(parent.$options.componentName) > -1) {
+            isFirstLevel = false;
+            break;
+          } else {
+            parent = parent.$parent;
+          }
         }
+        return isFirstLevel;
       }
     },
     methods: {
+      handleCollapseToggle(value) {
+        if (value) {
+          this.initPopper();
+        } else {
+          this.doDestroy();
+        }
+      },
       addItem(item) {
         this.$set(this.items, item.index, item);
       },
@@ -100,27 +168,30 @@
         delete this.submenus[item.index];
       },
       handleClick() {
-        const {rootMenu} = this;
+        const { rootMenu, disabled } = this;
         if (
           (rootMenu.menuTrigger === 'hover' && rootMenu.mode === 'horizontal') ||
-          (rootMenu.collapse && rootMenu.mode === 'vertical')
+          (rootMenu.collapse && rootMenu.mode === 'vertical') ||
+          disabled
         ) {
           return;
         }
         this.dispatch('ElMenu', 'submenu-click', this);
       },
       handleMouseenter() {
-        const {rootMenu} = this;
+        const { rootMenu, disabled } = this;
         if (
           (rootMenu.menuTrigger === 'click' && rootMenu.mode === 'horizontal') ||
-          (!rootMenu.collapse && rootMenu.mode === 'vertical')
+          (!rootMenu.collapse && rootMenu.mode === 'vertical') ||
+          disabled
         ) {
           return;
         }
+        this.dispatch('ElSubmenu', 'mouse-enter-child');
         clearTimeout(this.timeout);
         this.timeout = setTimeout(() => {
           this.rootMenu.openMenu(this.index, this.indexPath);
-        }, 300);
+        }, this.showTimeout);
       },
       handleMouseleave() {
         const {rootMenu} = this;
@@ -130,19 +201,135 @@
         ) {
           return;
         }
+        this.dispatch('ElSubmenu', 'mouse-leave-child');
         clearTimeout(this.timeout);
         this.timeout = setTimeout(() => {
-          this.rootMenu.closeMenu(this.index, this.indexPath);
-        }, 300);
+          !this.mouseInChild && this.rootMenu.closeMenu(this.index);
+        }, this.hideTimeout);
+      },
+      handleTitleMouseenter() {
+        if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
+        const title = this.$refs['submenu-title'];
+        title && (title.style.backgroundColor = this.rootMenu.hoverBackground);
+      },
+      handleTitleMouseleave() {
+        if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
+        const title = this.$refs['submenu-title'];
+        title && (title.style.backgroundColor = this.rootMenu.backgroundColor || '');
+      },
+      updatePlacement() {
+        this.currentPlacement = this.mode === 'horizontal' && this.isFirstLevel
+          ? 'bottom-start'
+          : 'right-start';
+      },
+      initPopper() {
+        this.referenceElm = this.$el;
+        this.popperElm = this.$refs.menu;
+        this.updatePlacement();
       }
     },
     created() {
+      this.$on('toggle-collapse', this.handleCollapseToggle);
+      this.$on('mouse-enter-child', () => {
+        this.mouseInChild = true;
+        clearTimeout(this.timeout);
+      });
+      this.$on('mouse-leave-child', () => {
+        this.mouseInChild = false;
+        clearTimeout(this.timeout);
+      });
+    },
+    mounted() {
       this.parentMenu.addSubmenu(this);
       this.rootMenu.addSubmenu(this);
+      this.initPopper();
     },
     beforeDestroy() {
       this.parentMenu.removeSubmenu(this);
       this.rootMenu.removeSubmenu(this);
+    },
+    render(h) {
+      const {
+        active,
+        opened,
+        paddingStyle,
+        titleStyle,
+        backgroundColor,
+        rootMenu,
+        currentPlacement,
+        menuTransitionName,
+        mode,
+        disabled,
+        popperClass,
+        $slots,
+        isFirstLevel
+      } = this;
+
+      const popupMenu = (
+        <transition name={menuTransitionName}>
+          <div
+            ref="menu"
+            v-show={opened}
+            class={[`el-menu--${mode}`, popperClass]}
+            on-mouseenter={this.handleMouseenter}
+            on-mouseleave={this.handleMouseleave}
+            on-focus={this.handleMouseenter}>
+            <ul
+              role="menu"
+              class={['el-menu el-menu--popup', `el-menu--popup-${currentPlacement}`]}
+              style={{ backgroundColor: rootMenu.backgroundColor || '' }}>
+              {$slots.default}
+            </ul>
+          </div>
+        </transition>
+      );
+
+      const inlineMenu = (
+        <el-collapse-transition>
+          <ul
+            role="menu"
+            class="el-menu el-menu--inline"
+            v-show={opened}
+            style={{ backgroundColor: rootMenu.backgroundColor || '' }}>
+            {$slots.default}
+          </ul>
+        </el-collapse-transition>
+      );
+
+      const submenuTitleIcon = (
+        rootMenu.mode === 'horizontal' && isFirstLevel ||
+        rootMenu.mode === 'vertical' && !rootMenu.collapse
+      ) ? 'el-icon-arrow-down' : 'el-icon-arrow-right';
+
+      return (
+        <li
+          class={{
+            'el-submenu': true,
+            'is-active': active,
+            'is-opened': opened,
+            'is-disabled': disabled
+          }}
+          role="menuitem"
+          aria-haspopup="true"
+          aria-expanded={opened}
+          on-mouseenter={this.handleMouseenter}
+          on-mouseleave={this.handleMouseleave}
+          on-focus={this.handleMouseenter}
+        >
+          <div
+            class="el-submenu__title"
+            ref="submenu-title"
+            on-click={this.handleClick}
+            on-mouseenter={this.handleTitleMouseenter}
+            on-mouseleave={this.handleTitleMouseleave}
+            style={[paddingStyle, titleStyle, { backgroundColor }]}
+          >
+            {$slots.title}
+            <i class={[ 'el-submenu__icon-arrow', submenuTitleIcon ]}></i>
+          </div>
+          {this.isMenuPopup ? popupMenu : inlineMenu}
+        </li>
+      );
     }
   };
 </script>
diff --git a/packages/message-box/src/main.js b/packages/message-box/src/main.js
index a351fb26a7..7b9a7fd39d 100644
--- a/packages/message-box/src/main.js
+++ b/packages/message-box/src/main.js
@@ -1,15 +1,18 @@
 const defaults = {
-  title: undefined,
+  title: null,
   message: '',
   type: '',
+  iconClass: '',
   showInput: false,
   showClose: true,
   modalFade: true,
   lockScroll: true,
   closeOnClickModal: true,
   closeOnPressEscape: true,
+  closeOnHashChange: true,
   inputValue: null,
   inputPlaceholder: '',
+  inputType: 'text',
   inputPattern: null,
   inputValidator: null,
   inputErrorMessage: '',
@@ -23,7 +26,11 @@ const defaults = {
   confirmButtonClass: '',
   cancelButtonClass: '',
   customClass: '',
-  beforeClose: null
+  beforeClose: null,
+  dangerouslyUseHTMLString: false,
+  center: false,
+  roundButton: false,
+  distinguishCancelAndClose: false
 };
 
 import Vue from 'vue';
@@ -53,7 +60,7 @@ const defaultCallback = action => {
         } else {
           currentMsg.resolve(action);
         }
-      } else if (action === 'cancel' && currentMsg.reject) {
+      } else if (currentMsg.reject && (action === 'cancel' || action === 'close')) {
         currentMsg.reject(action);
       }
     }
@@ -99,7 +106,7 @@ const showNextMsg = () => {
       } else {
         delete instance.$slots.default;
       }
-      ['modal', 'showClose', 'closeOnClickModal', 'closeOnPressEscape'].forEach(prop => {
+      ['modal', 'showClose', 'closeOnClickModal', 'closeOnPressEscape', 'closeOnHashChange'].forEach(prop => {
         if (instance[prop] === undefined) {
           instance[prop] = true;
         }
@@ -115,16 +122,13 @@ const showNextMsg = () => {
 
 const MessageBox = function(options, callback) {
   if (Vue.prototype.$isServer) return;
-  if (typeof options === 'string') {
+  if (typeof options === 'string' || isVNode(options)) {
     options = {
       message: options
     };
-    if (arguments[1]) {
+    if (typeof arguments[1] === 'string') {
       options.title = arguments[1];
     }
-    if (arguments[2]) {
-      options.type = arguments[2];
-    }
   } else if (options.callback && !callback) {
     callback = options.callback;
   }
@@ -158,6 +162,8 @@ MessageBox.alert = (message, title, options) => {
   if (typeof title === 'object') {
     options = title;
     title = '';
+  } else if (title === undefined) {
+    title = '';
   }
   return MessageBox(merge({
     title: title,
@@ -172,6 +178,8 @@ MessageBox.confirm = (message, title, options) => {
   if (typeof title === 'object') {
     options = title;
     title = '';
+  } else if (title === undefined) {
+    title = '';
   }
   return MessageBox(merge({
     title: title,
@@ -185,6 +193,8 @@ MessageBox.prompt = (message, title, options) => {
   if (typeof title === 'object') {
     options = title;
     title = '';
+  } else if (title === undefined) {
+    title = '';
   }
   return MessageBox(merge({
     title: title,
@@ -196,6 +206,7 @@ MessageBox.prompt = (message, title, options) => {
 };
 
 MessageBox.close = () => {
+  instance.doClose();
   instance.visible = false;
   msgQueue = [];
   currentMsg = null;
diff --git a/packages/message-box/src/main.vue b/packages/message-box/src/main.vue
index 9b868e42e2..92f6f22f74 100644
--- a/packages/message-box/src/main.vue
+++ b/packages/message-box/src/main.vue
@@ -1,21 +1,50 @@
 <template>
   <transition name="msgbox-fade">
-    <div class="el-message-box__wrapper" tabindex="-1" v-show="visible" @click.self="handleWrapperClick">
-      <div class="el-message-box" :class="customClass">
-        <div class="el-message-box__header" v-if="title !== undefined">
-          <div class="el-message-box__title">{{ title || t('el.messagebox.title') }}</div>
-          <button type="button" class="el-message-box__headerbtn" aria-label="Close" 
-                  v-if="showClose" @click="handleAction('cancel')">
+    <div
+      class="el-message-box__wrapper"
+      tabindex="-1"
+      v-show="visible"
+      @click.self="handleWrapperClick"
+      role="dialog"
+      aria-modal="true"
+      :aria-label="title || 'dialog'">
+      <div class="el-message-box" :class="[customClass, center && 'el-message-box--center']">
+        <div class="el-message-box__header" v-if="title !== null">
+          <div class="el-message-box__title">
+            <div
+              :class="['el-message-box__status', icon]"
+              v-if="icon && center">
+            </div>
+            <span>{{ title }}</span>
+          </div>
+          <button
+            type="button"
+            class="el-message-box__headerbtn"
+            aria-label="Close"
+            v-if="showClose"
+            @click="handleAction(distinguishCancelAndClose ? 'close' : 'cancel')"
+            @keydown.enter="handleAction(distinguishCancelAndClose ? 'close' : 'cancel')">
             <i class="el-message-box__close el-icon-close"></i>
           </button>
         </div>
-        <div class="el-message-box__content" v-if="message !== ''">
-          <div class="el-message-box__status" :class="[ typeClass ]"></div>
-          <div class="el-message-box__message" :style="{ 'margin-left': typeClass ? '50px' : '0' }">
-            <slot><p>{{ message }}</p></slot>
+        <div class="el-message-box__content">
+          <div
+            :class="['el-message-box__status', icon]"
+            v-if="icon && !center && message !== ''">
+          </div>
+          <div class="el-message-box__message" v-if="message !== ''">
+            <slot>
+              <p v-if="!dangerouslyUseHTMLString">{{ message }}</p>
+              <p v-else v-html="message"></p>
+            </slot>
           </div>
           <div class="el-message-box__input" v-show="showInput">
-            <el-input v-model="inputValue" @keyup.enter.native="handleAction('confirm')" :placeholder="inputPlaceholder" ref="input"></el-input>
+            <el-input
+              v-model="inputValue"
+              :type="inputType"
+              @keydown.enter.native="handleInputEnter"
+              :placeholder="inputPlaceholder"
+              ref="input"></el-input>
             <div class="el-message-box__errormsg" :style="{ visibility: !!editorErrorMessage ? 'visible' : 'hidden' }">{{ editorErrorMessage }}</div>
           </div>
         </div>
@@ -23,8 +52,11 @@
           <el-button
             :loading="cancelButtonLoading"
             :class="[ cancelButtonClasses ]"
-            v-show="showCancelButton"
-            @click.native="handleAction('cancel')">
+            v-if="showCancelButton"
+            :round="roundButton"
+            size="small"
+            @click.native="handleAction('cancel')"
+            @keydown.enter="handleAction('cancel')">
             {{ cancelButtonText || t('el.messagebox.cancel') }}
           </el-button>
           <el-button
@@ -32,7 +64,10 @@
             ref="confirm"
             :class="[ confirmButtonClasses ]"
             v-show="showConfirmButton"
-            @click.native="handleAction('confirm')">
+            :round="roundButton"
+            size="small"
+            @click.native="handleAction('confirm')"
+            @keydown.enter="handleAction('confirm')">
             {{ confirmButtonText || t('el.messagebox.confirm') }}
           </el-button>
         </div>
@@ -48,12 +83,14 @@
   import ElButton from 'element-ui/packages/button';
   import { addClass, removeClass } from 'element-ui/src/utils/dom';
   import { t } from 'element-ui/src/locale';
+  import Dialog from 'element-ui/src/utils/aria-dialog';
 
+  let messageBox;
   let typeMap = {
-    success: 'circle-check',
-    info: 'information',
+    success: 'success',
+    info: 'info',
     warning: 'warning',
-    error: 'circle-cross'
+    error: 'error'
   };
 
   export default {
@@ -75,6 +112,17 @@
       },
       closeOnPressEscape: {
         default: true
+      },
+      closeOnHashChange: {
+        default: true
+      },
+      center: {
+        default: false,
+        type: Boolean
+      },
+      roundButton: {
+        default: false,
+        type: Boolean
       }
     },
 
@@ -84,8 +132,9 @@
     },
 
     computed: {
-      typeClass() {
-        return this.type && typeMap[this.type] ? `el-icon-${ typeMap[this.type] }` : '';
+      icon() {
+        const { type, iconClass } = this;
+        return iconClass || (type && typeMap[type] ? `el-icon-${ typeMap[type] }` : '');
       },
 
       confirmButtonClasses() {
@@ -111,28 +160,26 @@
         this._closing = true;
 
         this.onClose && this.onClose();
-
+        messageBox.closeDialog(); // 解绑
         if (this.lockScroll) {
-          setTimeout(() => {
-            if (this.modal && this.bodyOverflow !== 'hidden') {
-              document.body.style.overflow = this.bodyOverflow;
-              document.body.style.paddingRight = this.bodyPaddingRight;
-            }
-            this.bodyOverflow = null;
-            this.bodyPaddingRight = null;
-          }, 200);
+          setTimeout(this.restoreBodyStyle, 200);
         }
         this.opened = false;
-
-        if (!this.transition) {
-          this.doAfterClose();
-        }
-        if (this.action) this.callback(this.action, this);
+        this.doAfterClose();
+        setTimeout(() => {
+          if (this.action) this.callback(this.action, this);
+        });
       },
 
       handleWrapperClick() {
         if (this.closeOnClickModal) {
-          this.handleAction('cancel');
+          this.handleAction(this.distinguishCancelAndClose ? 'close' : 'cancel');
+        }
+      },
+
+      handleInputEnter() {
+        if (this.inputType !== 'textarea') {
+          return this.handleAction('confirm');
         }
       },
 
@@ -151,29 +198,39 @@
 
       validate() {
         if (this.$type === 'prompt') {
-          var inputPattern = this.inputPattern;
+          const inputPattern = this.inputPattern;
           if (inputPattern && !inputPattern.test(this.inputValue || '')) {
             this.editorErrorMessage = this.inputErrorMessage || t('el.messagebox.error');
-            addClass(this.$refs.input.$el.querySelector('input'), 'invalid');
+            addClass(this.getInputElement(), 'invalid');
             return false;
           }
-          var inputValidator = this.inputValidator;
+          const inputValidator = this.inputValidator;
           if (typeof inputValidator === 'function') {
-            var validateResult = inputValidator(this.inputValue);
+            const validateResult = inputValidator(this.inputValue);
             if (validateResult === false) {
               this.editorErrorMessage = this.inputErrorMessage || t('el.messagebox.error');
-              addClass(this.$refs.input.$el.querySelector('input'), 'invalid');
+              addClass(this.getInputElement(), 'invalid');
               return false;
             }
             if (typeof validateResult === 'string') {
               this.editorErrorMessage = validateResult;
+              addClass(this.getInputElement(), 'invalid');
               return false;
             }
           }
         }
         this.editorErrorMessage = '';
-        removeClass(this.$refs.input.$el.querySelector('input'), 'invalid');
+        removeClass(this.getInputElement(), 'invalid');
         return true;
+      },
+      getFirstFocus() {
+        const btn = this.$el.querySelector('.el-message-box__btns .el-button');
+        const title = this.$el.querySelector('.el-message-box__btns .el-message-box__title');
+        return btn || title;
+      },
+      getInputElement() {
+        const inputRefs = this.$refs.input.$refs;
+        return inputRefs.input || inputRefs.textarea;
       }
     },
 
@@ -190,36 +247,61 @@
       },
 
       visible(val) {
-        if (val) this.uid++;
-        if (this.$type === 'alert' || this.$type === 'confirm') {
-          this.$nextTick(() => {
-            this.$refs.confirm.$el.focus();
-          });
+        if (val) {
+          this.uid++;
+          if (this.$type === 'alert' || this.$type === 'confirm') {
+            this.$nextTick(() => {
+              this.$refs.confirm.$el.focus();
+            });
+          }
+          this.focusAfterClosed = document.activeElement;
+          messageBox = new Dialog(this.$el, this.focusAfterClosed, this.getFirstFocus());
         }
+
+        // prompt
         if (this.$type !== 'prompt') return;
         if (val) {
           setTimeout(() => {
             if (this.$refs.input && this.$refs.input.$el) {
-              this.$refs.input.$el.querySelector('input').focus();
+              this.getInputElement().focus();
             }
           }, 500);
         } else {
           this.editorErrorMessage = '';
-          removeClass(this.$refs.input.$el.querySelector('input'), 'invalid');
+          removeClass(this.getInputElement(), 'invalid');
         }
       }
     },
 
+    mounted() {
+      this.$nextTick(() => {
+        if (this.closeOnHashChange) {
+          window.addEventListener('hashchange', this.close);
+        }
+      });
+    },
+
+    beforeDestroy() {
+      if (this.closeOnHashChange) {
+        window.removeEventListener('hashchange', this.close);
+      }
+      setTimeout(() => {
+        messageBox.closeDialog();
+      });
+    },
+
     data() {
       return {
         uid: 1,
         title: undefined,
         message: '',
         type: '',
+        iconClass: '',
         customClass: '',
         showInput: false,
         inputValue: null,
         inputPlaceholder: '',
+        inputType: 'text',
         inputPattern: null,
         inputValidator: null,
         inputErrorMessage: '',
@@ -234,7 +316,11 @@
         confirmButtonDisabled: false,
         cancelButtonClass: '',
         editorErrorMessage: null,
-        callback: null
+        callback: null,
+        dangerouslyUseHTMLString: false,
+        focusAfterClosed: null,
+        isOnComposition: false,
+        distinguishCancelAndClose: false
       };
     }
   };
diff --git a/packages/message/assets/error.svg b/packages/message/assets/error.svg
deleted file mode 100644
index 92ff470720..0000000000
--- a/packages/message/assets/error.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
-    <title>icon_danger</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Element-guideline-v0.2.4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Message" transform="translate(-60.000000, -332.000000)">
-            <g id="带倾向_信息" transform="translate(60.000000, 332.000000)">
-                <g id="Rectangle-2">
-                    <g id="icon_danger">
-                        <rect id="Rectangle-2" fill="#FF4949" x="0" y="0" width="40" height="40"></rect>
-                        <path d="M25.8172627,16.3451796 C25.9390902,16.2233483 26,16.0761418 26,15.9035523 C26,15.7309628 25.9390902,15.5837563 25.8172627,15.4619289 L24.5076157,14.1827411 C24.3857882,14.0609137 24.2436575,14 24.0812196,14 C23.9187817,14 23.776651,14.0609137 23.6548235,14.1827411 L20,17.8375635 L16.3147216,14.1827411 C16.1928902,14.0609137 16.0507595,14 15.8883216,14 C15.7258876,14 15.5837569,14.0609137 15.4619294,14.1827411 L14.1522824,15.4619289 C14.0507582,15.5837563 14,15.7309628 14,15.9035523 C14,16.0761418 14.0507582,16.2233483 14.1522824,16.3451796 L17.8375608,20.0000019 L14.1522824,23.6548243 C14.0507582,23.7766517 14,23.9238582 14,24.0964477 C14,24.2690372 14.0507582,24.4162437 14.1522824,24.5380711 L15.4619294,25.8172589 C15.5837569,25.9390863 15.7258876,26 15.8883216,26 C16.0507595,26 16.1928902,25.9390863 16.3147216,25.8172589 L20,22.1624365 L23.6548235,25.8172589 C23.776651,25.9390863 23.9187817,26 24.0812196,26 C24.2436575,26 24.3857882,25.9390863 24.5076157,25.8172589 L25.8172627,24.5380711 C25.9390902,24.4162437 26,24.2690372 26,24.0964477 C26,23.9238582 25.9390902,23.7766517 25.8172627,23.6548243 L22.1319804,20.0000019 L25.8172627,16.3451796 Z" id="Path" fill="#FFFFFF"></path>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/packages/message/assets/info.svg b/packages/message/assets/info.svg
deleted file mode 100644
index 8144fe9ae6..0000000000
--- a/packages/message/assets/info.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
-    <title>icon_info</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Element-guideline-v0.2.4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Message" transform="translate(-60.000000, -152.000000)">
-            <g id="带倾向_信息" transform="translate(60.000000, 152.000000)">
-                <g id="Rectangle-2">
-                    <g id="icon_info">
-                        <rect id="Rectangle-2" fill="#50BFFF" x="0" y="0" width="40" height="40"></rect>
-                        <path d="M21.6153846,26.5432099 C21.6153846,26.9478751 21.4583348,27.2918368 21.1442308,27.5751029 C20.8301268,27.8583689 20.4487194,28 20,28 C19.5512806,28 19.1698732,27.8583689 18.8557692,27.5751029 C18.5416652,27.2918368 18.3846154,26.9478751 18.3846154,26.5432099 L18.3846154,19.744856 C18.3846154,19.3401907 18.5416652,18.996229 18.8557692,18.712963 C19.1698732,18.4296969 19.5512806,18.2880658 20,18.2880658 C20.4487194,18.2880658 20.8301268,18.4296969 21.1442308,18.712963 C21.4583348,18.996229 21.6153846,19.3401907 21.6153846,19.744856 L21.6153846,26.5432099 Z M20,15.8042981 C19.4444427,15.8042981 18.972224,15.6193687 18.5833333,15.2495046 C18.1944427,14.8796406 18,14.4305255 18,13.9021491 C18,13.3737726 18.1944427,12.9246575 18.5833333,12.5547935 C18.972224,12.1849295 19.4444427,12 20,12 C20.5555573,12 21.027776,12.1849295 21.4166667,12.5547935 C21.8055573,12.9246575 22,13.3737726 22,13.9021491 C22,14.4305255 21.8055573,14.8796406 21.4166667,15.2495046 C21.027776,15.6193687 20.5555573,15.8042981 20,15.8042981 Z" id="Combined-Shape" fill="#FFFFFF"></path>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/packages/message/assets/success.svg b/packages/message/assets/success.svg
deleted file mode 100644
index a6aa15ebaa..0000000000
--- a/packages/message/assets/success.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
-    <title>icon_success</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Element-guideline-v0.2.4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Message" transform="translate(-60.000000, -212.000000)">
-            <g id="带倾向_信息" transform="translate(60.000000, 212.000000)">
-                <g id="Rectangle-2">
-                    <g id="icon_success">
-                        <rect id="Rectangle-2" fill="#13CE66" x="0" y="0" width="40" height="40"></rect>
-                        <path d="M27.8255814,17.1484357 L19.01744,25.8281213 C18.9011609,25.9427083 18.7655033,26 18.610467,26 C18.455427,26 18.3197693,25.9427083 18.2034865,25.8281213 L18.0290716,25.65625 L13.1744186,20.84375 C13.0581395,20.729163 13,20.5954837 13,20.4427047 C13,20.2899293 13.0581395,20.15625 13.1744186,20.0416667 L14.3662772,18.8671857 C14.48256,18.7526023 14.6182177,18.6953107 14.7732577,18.6953107 C14.928294,18.6953107 15.0639516,18.7526023 15.1802307,18.8671857 L18.610467,22.276038 L25.8197693,15.1718713 C25.9360484,15.057288 26.071706,15 26.2267423,15 C26.3817823,15 26.51744,15.057288 26.6337228,15.1718713 L27.8255814,16.3463523 C27.9418605,16.4609357 28,16.594615 28,16.747394 C28,16.900173 27.9418605,17.0338523 27.8255814,17.1484357 L27.8255814,17.1484357 Z" id="Path" fill="#FFFFFF"></path>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/packages/message/assets/warning.svg b/packages/message/assets/warning.svg
deleted file mode 100644
index 1c161c8837..0000000000
--- a/packages/message/assets/warning.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
-    <title>icon_warning</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Message" transform="translate(-60.000000, -272.000000)">
-            <g id="带倾向_信息-copy" transform="translate(60.000000, 272.000000)">
-                <g id="Rectangle-2">
-                    <g id="icon_warning">
-                        <rect id="Rectangle-2" fill="#F7BA2A" x="0" y="0" width="40" height="40"></rect>
-                        <path d="M21.6153846,26.5432099 C21.6153846,26.9478751 21.4583348,27.2918368 21.1442308,27.5751029 C20.8301268,27.8583689 20.4487194,28 20,28 C19.5512806,28 19.1698732,27.8583689 18.8557692,27.5751029 C18.5416652,27.2918368 18.3846154,26.9478751 18.3846154,26.5432099 L18.3846154,19.744856 C18.3846154,19.3401907 18.5416652,18.996229 18.8557692,18.712963 C19.1698732,18.4296969 19.5512806,18.2880658 20,18.2880658 C20.4487194,18.2880658 20.8301268,18.4296969 21.1442308,18.712963 C21.4583348,18.996229 21.6153846,19.3401907 21.6153846,19.744856 L21.6153846,26.5432099 Z M20,15.8042981 C19.4444427,15.8042981 18.972224,15.6193687 18.5833333,15.2495046 C18.1944427,14.8796406 18,14.4305255 18,13.9021491 C18,13.3737726 18.1944427,12.9246575 18.5833333,12.5547935 C18.972224,12.1849295 19.4444427,12 20,12 C20.5555573,12 21.027776,12.1849295 21.4166667,12.5547935 C21.8055573,12.9246575 22,13.3737726 22,13.9021491 C22,14.4305255 21.8055573,14.8796406 21.4166667,15.2495046 C21.027776,15.6193687 20.5555573,15.8042981 20,15.8042981 Z" id="Combined-Shape" fill="#FFFFFF" transform="translate(20.000000, 20.000000) scale(1, -1) translate(-20.000000, -20.000000) "></path>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/packages/message/src/main.js b/packages/message/src/main.js
index f707613a00..bfc228b7ab 100644
--- a/packages/message/src/main.js
+++ b/packages/message/src/main.js
@@ -1,13 +1,14 @@
 import Vue from 'vue';
+import Main from './main.vue';
 import { PopupManager } from 'element-ui/src/utils/popup';
 import { isVNode } from 'element-ui/src/utils/vdom';
-let MessageConstructor = Vue.extend(require('./main.vue'));
+let MessageConstructor = Vue.extend(Main);
 
 let instance;
 let instances = [];
 let seed = 1;
 
-var Message = function(options) {
+const Message = function(options) {
   if (Vue.prototype.$isServer) return;
   options = options || {};
   if (typeof options === 'string') {
diff --git a/packages/message/src/main.vue b/packages/message/src/main.vue
index 77b71937f8..8e9e5d22b2 100644
--- a/packages/message/src/main.vue
+++ b/packages/message/src/main.vue
@@ -1,21 +1,36 @@
 <template>
   <transition name="el-message-fade">
     <div
-      class="el-message"
-      :class="customClass"
+      :class="[
+        'el-message',
+        type && !iconClass ? `el-message--${ type }` : '',
+        center ? 'is-center' : '',
+        showClose ? 'is-closable' : '',
+        customClass
+      ]"
       v-show="visible"
       @mouseenter="clearTimer"
-      @mouseleave="startTimer">
-      <img class="el-message__img" :src="typeImg" alt="" v-if="!iconClass">
-      <div class="el-message__group" :class="{ 'is-with-icon': iconClass }">
-        <slot><p><i class="el-message__icon" :class="iconClass" v-if="iconClass"></i>{{ message }}</p></slot>
-        <div v-if="showClose" class="el-message__closeBtn el-icon-close" @click="close"></div>
-      </div>
+      @mouseleave="startTimer"
+      role="alert">
+      <i :class="iconClass" v-if="iconClass"></i>
+      <i :class="typeClass" v-else></i>
+      <slot>
+        <p v-if="!dangerouslyUseHTMLString" class="el-message__content">{{ message }}</p>
+        <p v-else v-html="message" class="el-message__content"></p>
+      </slot>
+      <i v-if="showClose" class="el-message__closeBtn el-icon-close" @click="close"></i>
     </div>
   </transition>
 </template>
 
 <script type="text/babel">
+  const typeMap = {
+    success: 'success',
+    info: 'info',
+    warning: 'warning',
+    error: 'error'
+  };
+
   export default {
     data() {
       return {
@@ -28,13 +43,17 @@
         onClose: null,
         showClose: false,
         closed: false,
-        timer: null
+        timer: null,
+        dangerouslyUseHTMLString: false,
+        center: false
       };
     },
 
     computed: {
-      typeImg() {
-        return require(`../assets/${ this.type }.svg`);
+      typeClass() {
+        return this.type && !this.iconClass
+          ? `el-message__icon el-icon-${ typeMap[this.type] }`
+          : '';
       }
     },
 
@@ -73,11 +92,21 @@
             }
           }, this.duration);
         }
+      },
+      keydown(e) {
+        if (e.keyCode === 27) { // esc关闭消息
+          if (!this.closed) {
+            this.close();
+          }
+        }
       }
     },
-
     mounted() {
       this.startTimer();
+      document.addEventListener('keydown', this.keydown);
+    },
+    beforeDestroy() {
+      document.removeEventListener('keydown', this.keydown);
     }
   };
 </script>
diff --git a/packages/notification/src/main.js b/packages/notification/src/main.js
index c8de6fc557..0843339f4c 100644
--- a/packages/notification/src/main.js
+++ b/packages/notification/src/main.js
@@ -1,17 +1,19 @@
 import Vue from 'vue';
+import Main from './main.vue';
 import { PopupManager } from 'element-ui/src/utils/popup';
 import { isVNode } from 'element-ui/src/utils/vdom';
-let NotificationConstructor = Vue.extend(require('./main.vue'));
+const NotificationConstructor = Vue.extend(Main);
 
 let instance;
 let instances = [];
 let seed = 1;
 
-var Notification = function(options) {
+const Notification = function(options) {
   if (Vue.prototype.$isServer) return;
   options = options || {};
-  let userOnClose = options.onClose;
-  let id = 'notification_' + seed++;
+  const userOnClose = options.onClose;
+  const id = 'notification_' + seed++;
+  const position = options.position || 'top-right';
 
   options.onClose = function() {
     Notification.close(id, userOnClose);
@@ -23,24 +25,23 @@ var Notification = function(options) {
 
   if (isVNode(options.message)) {
     instance.$slots.default = [options.message];
-    options.message = '';
+    options.message = 'REPLACED_BY_VNODE';
   }
   instance.id = id;
-  instance.vm = instance.$mount();
-  document.body.appendChild(instance.vm.$el);
-  instance.vm.visible = true;
-  instance.dom = instance.vm.$el;
+  instance.$mount();
+  document.body.appendChild(instance.$el);
+  instance.visible = true;
+  instance.dom = instance.$el;
   instance.dom.style.zIndex = PopupManager.nextZIndex();
 
-  const offset = options.offset || 0;
-  let topDist = offset;
-  for (let i = 0, len = instances.length; i < len; i++) {
-    topDist += instances[i].$el.offsetHeight + 16;
-  }
-  topDist += 16;
-  instance.top = topDist;
+  let verticalOffset = options.offset || 0;
+  instances.filter(item => item.position === position).forEach(item => {
+    verticalOffset += item.$el.offsetHeight + 16;
+  });
+  verticalOffset += 16;
+  instance.verticalOffset = verticalOffset;
   instances.push(instance);
-  return instance.vm;
+  return instance;
 };
 
 ['success', 'warning', 'info', 'error'].forEach(type => {
@@ -56,25 +57,37 @@ var Notification = function(options) {
 });
 
 Notification.close = function(id, userOnClose) {
-  let index;
-  let removedHeight;
-  for (var i = 0, len = instances.length; i < len; i++) {
-    if (id === instances[i].id) {
-      if (typeof userOnClose === 'function') {
-        userOnClose(instances[i]);
-      }
+  let index = -1;
+  const len = instances.length;
+  const instance = instances.filter((instance, i) => {
+    if (instance.id === id) {
       index = i;
-      removedHeight = instances[i].dom.offsetHeight;
-      instances.splice(i, 1);
-      break;
+      return true;
     }
+    return false;
+  })[0];
+  if (!instance) return;
+
+  if (typeof userOnClose === 'function') {
+    userOnClose(instance);
   }
+  instances.splice(index, 1);
 
-  if (len > 1) {
-    for (i = index; i < len - 1 ; i++) {
-      instances[i].dom.style.top = parseInt(instances[i].dom.style.top, 10) - removedHeight - 16 + 'px';
+  if (len <= 1) return;
+  const position = instance.position;
+  const removedHeight = instance.dom.offsetHeight;
+  for (let i = index; i < len - 1 ; i++) {
+    if (instances[i].position === position) {
+      instances[i].dom.style[instance.verticalProperty] =
+        parseInt(instances[i].dom.style[instance.verticalProperty], 10) - removedHeight - 16 + 'px';
     }
   }
 };
 
+Notification.closeAll = function() {
+  for (let i = instances.length - 1; i >= 0; i--) {
+    instances[i].close();
+  }
+};
+
 export default Notification;
diff --git a/packages/notification/src/main.vue b/packages/notification/src/main.vue
index cce71d9e81..c25c9d7b0e 100644
--- a/packages/notification/src/main.vue
+++ b/packages/notification/src/main.vue
@@ -1,13 +1,14 @@
 <template>
   <transition name="el-notification-fade">
     <div
-      class="el-notification"
-      :class="customClass"
+      :class="['el-notification', customClass, horizontalClass]"
       v-show="visible"
-      :style="{ top: top ? top + 'px' : 'auto' }"
+      :style="positionStyle"
       @mouseenter="clearTimer()"
       @mouseleave="startTimer()"
-      @click="click">
+      @click="click"
+      role="alert"
+    >
       <i
         class="el-notification__icon"
         :class="[ typeClass, iconClass ]"
@@ -15,8 +16,16 @@
       </i>
       <div class="el-notification__group" :class="{ 'is-with-icon': typeClass || iconClass }">
         <h2 class="el-notification__title" v-text="title"></h2>
-        <div class="el-notification__content"><slot>{{ message }}</slot></div>
-        <div class="el-notification__closeBtn el-icon-close" @click.stop="close"></div>
+        <div class="el-notification__content" v-show="message">
+          <slot>
+            <p v-if="!dangerouslyUseHTMLString">{{ message }}</p>
+            <p v-else v-html="message"></p>
+          </slot>
+        </div>
+        <div
+          class="el-notification__closeBtn el-icon-close"
+          v-if="showClose"
+          @click.stop="close"></div>
       </div>
     </div>
   </transition>
@@ -24,10 +33,10 @@
 
 <script type="text/babel">
   let typeMap = {
-    success: 'circle-check',
-    info: 'information',
+    success: 'success',
+    info: 'info',
     warning: 'warning',
-    error: 'circle-cross'
+    error: 'error'
   };
 
   export default {
@@ -38,19 +47,36 @@
         message: '',
         duration: 4500,
         type: '',
+        showClose: true,
         customClass: '',
         iconClass: '',
         onClose: null,
         onClick: null,
         closed: false,
-        top: null,
-        timer: null
+        verticalOffset: 0,
+        timer: null,
+        dangerouslyUseHTMLString: false,
+        position: 'top-right'
       };
     },
 
     computed: {
       typeClass() {
         return this.type && typeMap[this.type] ? `el-icon-${ typeMap[this.type] }` : '';
+      },
+
+      horizontalClass() {
+        return this.position.indexOf('right') > -1 ? 'right' : 'left';
+      },
+
+      verticalProperty() {
+        return /^top-/.test(this.position) ? 'top' : 'bottom';
+      },
+
+      positionStyle() {
+        return {
+          [this.verticalProperty]: `${ this.verticalOffset }px`
+        };
       }
     },
 
@@ -95,9 +121,19 @@
             }
           }, this.duration);
         }
+      },
+      keydown(e) {
+        if (e.keyCode === 46 || e.keyCode === 8) {
+          this.clearTimer(); // detele 取消倒计时
+        } else if (e.keyCode === 27) { // esc关闭消息
+          if (!this.closed) {
+            this.close();
+          }
+        } else {
+          this.startTimer(); // 恢复倒计时
+        }
       }
     },
-
     mounted() {
       if (this.duration > 0) {
         this.timer = setTimeout(() => {
@@ -106,6 +142,11 @@
           }
         }, this.duration);
       }
+      document.addEventListener('keydown', this.keydown);
+    },
+    beforeDestroy() {
+      document.removeEventListener('keydown', this.keydown);
     }
   };
 </script>
+
diff --git a/packages/pagination/README.md b/packages/pagination/README.md
deleted file mode 100644
index 1e1ea333c9..0000000000
--- a/packages/pagination/README.md
+++ /dev/null
@@ -1,59 +0,0 @@
-# element-pagination
-> A element-pagination component for Vue.js.
-
-## Demo
-http://element-component.github.io/element-pagination
-
-## Installation
-```shell
-npm i element-pagination -D
-```
-
-## Usage
-```javascript
-import Vue from 'vue'
-import ElPagination from 'element-pagination'
-import 'element-theme-default/dist/pagination.css'
-
-Vue.use(ElPagination)
-```
-
-or
-
-```javascript
-import Vue from 'vue'
-import ElPagination from 'element-pagination'
-
-Vue.component('el-pagination', ElPagination)
-```
-
-### Attributes
-| 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
-|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
-| small | 是否使用小型分页样式 | Boolean | — | false |
-| page-size | 每页显示条目个数 | Number | — | 10 |
-| total | 总条目数 | Number | — | - |
-| page-count | 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 | Number | — | - |
-| current-page | 当前页数 | Number | — | 1 |
-| layout | 组件布局，子组件名用逗号分隔| String | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total` | 'prev, pager, next, jumper, ->, total'  |
-| page-sizes | 每页显示个数选择器的选项设置 | Number[] | — |  [10, 20, 30, 40, 50, 100] |
-
-### Events
-| 事件名称 | 说明 | 回调参数 |
-|---------|--------|---------|
-| size-change | pageSize 改变时会触发 | 每页条数`size` |
-| current-change | currentPage 改变时会触发 | 当前页`currentPage` |
-
-## Development
-```shell
-make dev
-
-## test
-make test
-
-## build
-make build
-```
-
-# License
-[MIT](https://opensource.org/licenses/MIT)
diff --git a/packages/pagination/cooking.conf.js b/packages/pagination/cooking.conf.js
deleted file mode 100644
index a525ddc8c2..0000000000
--- a/packages/pagination/cooking.conf.js
+++ /dev/null
@@ -1,6 +0,0 @@
-var cooking = require('cooking');
-var gen = require('../../build/gen-single-config');
-
-cooking.set(gen(__dirname, 'ElPagination'));
-
-module.exports = cooking.resolve();
diff --git a/packages/pagination/package.json b/packages/pagination/package.json
deleted file mode 100644
index bf25baf892..0000000000
--- a/packages/pagination/package.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "name": "element-pagination",
-  "version": "1.1.0",
-  "description": "A pagination component for Vue.js.",
-  "keywords": [
-    "element",
-    "vue",
-    "component"
-  ],
-  "main": "./lib/index.js",
-  "repository": "https://github.com/ElemeFE/element/tree/master/packages/pagination",
-  "author": "qingwei-li<qingwei.li@ele.me>",
-  "license": "MIT",
-  "dependencies": {}
-}
diff --git a/packages/pagination/src/pager.vue b/packages/pagination/src/pager.vue
index 62f716ea45..487e28f1ed 100644
--- a/packages/pagination/src/pager.vue
+++ b/packages/pagination/src/pager.vue
@@ -1,29 +1,30 @@
 <template>
   <ul @click="onPagerClick" class="el-pager">
     <li
-      :class="{ active: currentPage === 1 }"
+      :class="{ active: currentPage === 1, disabled }"
       v-if="pageCount > 0"
       class="number">1</li>
     <li
       class="el-icon more btn-quickprev"
-      :class="[quickprevIconClass]"
+      :class="[quickprevIconClass, { disabled }]"
       v-if="showPrevMore"
-      @mouseenter="quickprevIconClass = 'el-icon-d-arrow-left'"
+      @mouseenter="onMouseenter('left')"
       @mouseleave="quickprevIconClass = 'el-icon-more'">
     </li>
     <li
       v-for="pager in pagers"
-      :class="{ active: currentPage === pager }"
+      :key="pager"
+      :class="{ active: currentPage === pager, disabled }"
       class="number">{{ pager }}</li>
     <li
       class="el-icon more btn-quicknext"
-      :class="[quicknextIconClass]"
+      :class="[quicknextIconClass, { disabled }]"
       v-if="showNextMore"
-      @mouseenter="quicknextIconClass = 'el-icon-d-arrow-right'"
+      @mouseenter="onMouseenter('right')"
       @mouseleave="quicknextIconClass = 'el-icon-more'">
     </li>
     <li
-      :class="{ active: currentPage === pageCount }"
+      :class="{ active: currentPage === pageCount, disabled }"
       class="number"
       v-if="pageCount > 1">{{ pageCount }}</li>
   </ul>
@@ -36,7 +37,11 @@
     props: {
       currentPage: Number,
 
-      pageCount: Number
+      pageCount: Number,
+
+      pagerCount: Number,
+
+      disabled: Boolean
     },
 
     watch: {
@@ -52,19 +57,20 @@
     methods: {
       onPagerClick(event) {
         const target = event.target;
-        if (target.tagName === 'UL') {
+        if (target.tagName === 'UL' || this.disabled) {
           return;
         }
 
         let newPage = Number(event.target.textContent);
         const pageCount = this.pageCount;
         const currentPage = this.currentPage;
+        const pagerCountOffset = this.pagerCount - 2;
 
         if (target.className.indexOf('more') !== -1) {
           if (target.className.indexOf('quickprev') !== -1) {
-            newPage = currentPage - 5;
+            newPage = currentPage - pagerCountOffset;
           } else if (target.className.indexOf('quicknext') !== -1) {
-            newPage = currentPage + 5;
+            newPage = currentPage + pagerCountOffset;
           }
         }
 
@@ -82,12 +88,22 @@
         if (newPage !== currentPage) {
           this.$emit('change', newPage);
         }
+      },
+
+      onMouseenter(direction) {
+        if (this.disabled) return;
+        if (direction === 'left') {
+          this.quickprevIconClass = 'el-icon-d-arrow-left';
+        } else {
+          this.quicknextIconClass = 'el-icon-d-arrow-right';
+        }
       }
     },
 
     computed: {
       pagers() {
-        const pagerCount = 7;
+        const pagerCount = this.pagerCount;
+        const halfPagerCount = (pagerCount - 1) / 2;
 
         const currentPage = Number(this.currentPage);
         const pageCount = Number(this.pageCount);
@@ -96,11 +112,11 @@
         let showNextMore = false;
 
         if (pageCount > pagerCount) {
-          if (currentPage > pagerCount - 3) {
+          if (currentPage > pagerCount - halfPagerCount) {
             showPrevMore = true;
           }
 
-          if (currentPage < pageCount - 3) {
+          if (currentPage < pageCount - halfPagerCount) {
             showNextMore = true;
           }
         }
diff --git a/packages/pagination/src/pagination.js b/packages/pagination/src/pagination.js
index 8642d0147f..0bb2c67cdf 100644
--- a/packages/pagination/src/pagination.js
+++ b/packages/pagination/src/pagination.js
@@ -1,7 +1,9 @@
 import Pager from './pager.vue';
 import ElSelect from 'element-ui/packages/select';
 import ElOption from 'element-ui/packages/option';
+import ElInput from 'element-ui/packages/input';
 import Locale from 'element-ui/src/mixins/locale';
+import { valueEquals } from 'element-ui/src/utils/util';
 
 export default {
   name: 'ElPagination',
@@ -18,6 +20,14 @@ export default {
 
     pageCount: Number,
 
+    pagerCount: {
+      type: Number,
+      validator(value) {
+        return (value | 0) === value && value > 4 && value < 22 && (value % 2) === 1;
+      },
+      default: 7
+    },
+
     currentPage: {
       type: Number,
       default: 1
@@ -32,24 +42,39 @@ export default {
       default() {
         return [10, 20, 30, 40, 50, 100];
       }
-    }
+    },
+
+    popperClass: String,
+
+    prevText: String,
+
+    nextText: String,
+
+    background: Boolean,
+
+    disabled: Boolean
   },
 
   data() {
     return {
       internalCurrentPage: 1,
-      internalPageSize: 0
+      internalPageSize: 0,
+      lastEmittedPage: -1,
+      userChangePageSize: false
     };
   },
 
   render(h) {
-    let template = <div class='el-pagination'></div>;
+    let template = <div class={['el-pagination', {
+      'is-background': this.background,
+      'el-pagination--small': this.small
+    }] }></div>;
     const layout = this.layout || '';
     if (!layout) return;
     const TEMPLATE_MAP = {
       prev: <prev></prev>,
       jumper: <jumper></jumper>,
-      pager: <pager currentPage={ this.internalCurrentPage } pageCount={ this.internalPageCount } on-change={ this.handleCurrentChange }></pager>,
+      pager: <pager currentPage={ this.internalCurrentPage } pageCount={ this.internalPageCount } pagerCount={ this.pagerCount } on-change={ this.handleCurrentChange } disabled={ this.disabled }></pager>,
       next: <next></next>,
       sizes: <sizes pageSizes={ this.pageSizes }></sizes>,
       slot: <my-slot></my-slot>,
@@ -59,10 +84,8 @@ export default {
     const rightWrapper = <div class="el-pagination__rightwrapper"></div>;
     let haveRightWrapper = false;
 
-    if (this.small) {
-      template.data.class += ' el-pagination--small';
-    }
-
+    template.children = template.children || [];
+    rightWrapper.children = rightWrapper.children || [];
     components.forEach(compo => {
       if (compo === '->') {
         haveRightWrapper = true;
@@ -88,8 +111,8 @@ export default {
       render(h) {
         return (
           this.$parent.$slots.default
-          ? this.$parent.$slots.default[0]
-          : ''
+            ? this.$parent.$slots.default[0]
+            : ''
         );
       }
     },
@@ -98,9 +121,14 @@ export default {
         return (
           <button
             type="button"
-            class={['btn-prev', { disabled: this.$parent.internalCurrentPage <= 1 }]}
+            class="btn-prev"
+            disabled={ this.$parent.disabled || this.$parent.internalCurrentPage <= 1 }
             on-click={ this.$parent.prev }>
-            <i class="el-icon el-icon-arrow-left"></i>
+            {
+              this.$parent.prevText
+                ? <span>{ this.$parent.prevText }</span>
+                : <i class="el-icon el-icon-arrow-left"></i>
+            }
           </button>
         );
       }
@@ -111,12 +139,14 @@ export default {
         return (
           <button
             type="button"
-            class={[
-              'btn-next',
-              { disabled: this.$parent.internalCurrentPage === this.$parent.internalPageCount || this.$parent.internalPageCount === 0 }
-            ]}
+            class="btn-next"
+            disabled={ this.$parent.disabled || this.$parent.internalCurrentPage === this.$parent.internalPageCount || this.$parent.internalPageCount === 0 }
             on-click={ this.$parent.next }>
-            <i class="el-icon el-icon-arrow-right"></i>
+            {
+              this.$parent.nextText
+                ? <span>{ this.$parent.nextText }</span>
+                : <i class="el-icon el-icon-arrow-right"></i>
+            }
           </button>
         );
       }
@@ -132,9 +162,10 @@ export default {
       watch: {
         pageSizes: {
           immediate: true,
-          handler(value) {
-            if (Array.isArray(value)) {
-              this.$parent.internalPageSize = value.indexOf(this.$parent.pageSize) > -1
+          handler(newVal, oldVal) {
+            if (valueEquals(newVal, oldVal)) return;
+            if (Array.isArray(newVal)) {
+              this.$parent.internalPageSize = newVal.indexOf(this.$parent.pageSize) > -1
                 ? this.$parent.pageSize
                 : this.pageSizes[0];
             }
@@ -147,12 +178,15 @@ export default {
           <span class="el-pagination__sizes">
             <el-select
               value={ this.$parent.internalPageSize }
-              on-input={ this.handleChange }>
+              popperClass={ this.$parent.popperClass || '' }
+              size="mini"
+              on-input={ this.handleChange }
+              disabled={ this.$parent.disabled }>
               {
                 this.pageSizes.map(item =>
                   <el-option
                     value={ item }
-                    label={ item + ' ' + this.t('el.pagination.pagesize') }>
+                    label={ item + this.t('el.pagination.pagesize') }>
                   </el-option>
                 )
               }
@@ -170,6 +204,8 @@ export default {
         handleChange(val) {
           if (val !== this.$parent.internalPageSize) {
             this.$parent.internalPageSize = val = parseInt(val, 10);
+            this.$parent.userChangePageSize = true;
+            this.$parent.$emit('update:pageSize', val);
             this.$parent.$emit('size-change', val);
           }
         }
@@ -185,14 +221,50 @@ export default {
         };
       },
 
+      components: { ElInput },
+
+      watch: {
+        '$parent.internalPageSize'() {
+          this.$nextTick(() => {
+            this.$refs.input.$el.querySelector('input').value = this.$parent.internalCurrentPage;
+          });
+        }
+      },
+
       methods: {
         handleFocus(event) {
           this.oldValue = event.target.value;
         },
-
-        handleChange({ target }) {
-          this.$parent.internalCurrentPage = this.$parent.getValidCurrentPage(target.value);
+        handleBlur({ target }) {
+          this.resetValueIfNeed(target.value);
+          this.reassignMaxValue(target.value);
+        },
+        handleKeyup({ keyCode, target }) {
+          if (keyCode === 13 && this.oldValue && target.value !== this.oldValue) {
+            this.handleChange(target.value);
+          }
+        },
+        handleChange(value) {
+          this.$parent.internalCurrentPage = this.$parent.getValidCurrentPage(value);
+          this.$parent.emitChange();
           this.oldValue = null;
+          this.resetValueIfNeed(value);
+        },
+        resetValueIfNeed(value) {
+          const num = parseInt(value, 10);
+          if (!isNaN(num)) {
+            if (num < 1) {
+              this.$refs.input.setCurrentValue(1);
+            } else {
+              this.reassignMaxValue(value);
+            }
+          }
+        },
+        reassignMaxValue(value) {
+          const { internalPageCount } = this.$parent;
+          if (+value > internalPageCount) {
+            this.$refs.input.setCurrentValue(internalPageCount || 1);
+          }
         }
       },
 
@@ -200,16 +272,19 @@ export default {
         return (
           <span class="el-pagination__jump">
             { this.t('el.pagination.goto') }
-            <input
-              class="el-pagination__editor"
-              type="number"
+            <el-input
+              class="el-pagination__editor is-in-pagination"
               min={ 1 }
-              max={ this.internalPageCount }
+              max={ this.$parent.internalPageCount }
               value={ this.$parent.internalCurrentPage }
-              domProps-value={ this.$parent.internalCurrentPage }
-              on-change={ this.handleChange }
-              on-focus={ this.handleFocus }
-              number/>
+              domPropsValue={ this.$parent.internalCurrentPage }
+              type="number"
+              ref="input"
+              disabled={ this.$parent.disabled }
+              nativeOnKeyup={ this.handleKeyup }
+              onChange={ this.handleChange }
+              onFocus={ this.handleFocus }
+              onBlur={ this.handleBlur }/>
             { this.t('el.pagination.pageClassifier') }
           </span>
         );
@@ -234,16 +309,24 @@ export default {
   methods: {
     handleCurrentChange(val) {
       this.internalCurrentPage = this.getValidCurrentPage(val);
+      this.userChangePageSize = true;
+      this.emitChange();
     },
 
     prev() {
+      if (this.disabled) return;
       const newVal = this.internalCurrentPage - 1;
       this.internalCurrentPage = this.getValidCurrentPage(newVal);
+      this.$emit('prev-click', this.internalCurrentPage);
+      this.emitChange();
     },
 
     next() {
+      if (this.disabled) return;
       const newVal = this.internalCurrentPage + 1;
       this.internalCurrentPage = this.getValidCurrentPage(newVal);
+      this.$emit('next-click', this.internalCurrentPage);
+      this.emitChange();
     },
 
     getValidCurrentPage(value) {
@@ -269,6 +352,16 @@ export default {
       }
 
       return resetValue === undefined ? value : resetValue;
+    },
+
+    emitChange() {
+      this.$nextTick(() => {
+        if (this.internalCurrentPage !== this.lastEmittedPage || this.userChangePageSize) {
+          this.$emit('current-change', this.internalCurrentPage);
+          this.lastEmittedPage = this.internalCurrentPage;
+          this.userChangePageSize = false;
+        }
+      });
     }
   },
 
@@ -294,31 +387,31 @@ export default {
     pageSize: {
       immediate: true,
       handler(val) {
-        this.internalPageSize = val;
+        this.internalPageSize = isNaN(val) ? 10 : val;
       }
     },
 
-    internalCurrentPage(newVal, oldVal) {
-      newVal = parseInt(newVal, 10);
-
-      /* istanbul ignore if */
-      if (isNaN(newVal)) {
-        newVal = oldVal || 1;
-      } else {
-        newVal = this.getValidCurrentPage(newVal);
-      }
+    internalCurrentPage: {
+      immediate: true,
+      handler(newVal, oldVal) {
+        newVal = parseInt(newVal, 10);
+
+        /* istanbul ignore if */
+        if (isNaN(newVal)) {
+          newVal = oldVal || 1;
+        } else {
+          newVal = this.getValidCurrentPage(newVal);
+        }
 
-      if (newVal !== undefined) {
-        this.$nextTick(() => {
+        if (newVal !== undefined) {
           this.internalCurrentPage = newVal;
           if (oldVal !== newVal) {
             this.$emit('update:currentPage', newVal);
-            this.$emit('current-change', this.internalCurrentPage);
           }
-        });
-      } else {
-        this.$emit('update:currentPage', newVal);
-        this.$emit('current-change', this.internalCurrentPage);
+        } else {
+          this.$emit('update:currentPage', newVal);
+        }
+        this.lastEmittedPage = -1;
       }
     },
 
@@ -329,7 +422,9 @@ export default {
         this.internalCurrentPage = 1;
       } else if (oldPage > newVal) {
         this.internalCurrentPage = newVal === 0 ? 1 : newVal;
+        this.userChangePageSize && this.emitChange();
       }
+      this.userChangePageSize = false;
     }
   }
 };
diff --git a/packages/popover/src/directive.js b/packages/popover/src/directive.js
index a796395dc3..132e37202a 100644
--- a/packages/popover/src/directive.js
+++ b/packages/popover/src/directive.js
@@ -1,5 +1,20 @@
+const getReference = (el, binding, vnode) => {
+  const _ref = binding.expression ? binding.value : binding.arg;
+  const popper = vnode.context.$refs[_ref];
+  if (popper) {
+    if (Array.isArray(popper)) {
+      popper[0].$refs.reference = el;
+    } else {
+      popper.$refs.reference = el;
+    }
+  }
+};
+
 export default {
   bind(el, binding, vnode) {
-    vnode.context.$refs[binding.arg].$refs.reference = el;
+    getReference(el, binding, vnode);
+  },
+  inserted(el, binding, vnode) {
+    getReference(el, binding, vnode);
   }
 };
diff --git a/packages/popover/src/main.vue b/packages/popover/src/main.vue
index 39e439aae2..c856c40f40 100644
--- a/packages/popover/src/main.vue
+++ b/packages/popover/src/main.vue
@@ -1,12 +1,19 @@
 <template>
   <span>
-    <transition :name="transition" @after-leave="doDestroy">
+    <transition
+      :name="transition"
+      @after-enter="handleAfterEnter"
+      @after-leave="handleAfterLeave">
       <div
-        class="el-popover"
-        :class="[popperClass]"
+        class="el-popover el-popper"
+        :class="[popperClass, content && 'el-popover--plain']"
         ref="popper"
         v-show="!disabled && showPopper"
-        :style="{ width: width + 'px' }">
+        :style="{ width: width + 'px' }"
+        role="tooltip"
+        :id="tooltipId"
+        :aria-hidden="(disabled || !showPopper) ? 'true' : 'false'"
+      >
         <div class="el-popover__title" v-if="title" v-text="title"></div>
         <slot>{{ content }}</slot>
       </div>
@@ -14,10 +21,11 @@
     <slot name="reference"></slot>
   </span>
 </template>
-
 <script>
 import Popper from 'element-ui/src/utils/vue-popper';
 import { on, off } from 'element-ui/src/utils/dom';
+import { addClass, removeClass } from 'element-ui/src/utils/dom';
+import { generateId } from 'element-ui/src/utils/util';
 
 export default {
   name: 'ElPopover',
@@ -43,25 +51,59 @@ export default {
     visibleArrow: {
       default: true
     },
+    arrowOffset: {
+      type: Number,
+      default: 0
+    },
     transition: {
       type: String,
       default: 'fade-in-linear'
     }
   },
 
+  computed: {
+    tooltipId() {
+      return `el-popover-${generateId()}`;
+    }
+  },
   watch: {
-    showPopper(newVal, oldVal) {
-      newVal ? this.$emit('show') : this.$emit('hide');
+    showPopper(val) {
+      if (this.disabled) {
+        return;
+      }
+      val ? this.$emit('show') : this.$emit('hide');
     }
   },
 
   mounted() {
-    let reference = this.reference || this.$refs.reference;
+    let reference = this.referenceElm = this.reference || this.$refs.reference;
     const popper = this.popper || this.$refs.popper;
 
     if (!reference && this.$slots.reference && this.$slots.reference[0]) {
       reference = this.referenceElm = this.$slots.reference[0].elm;
     }
+    // 可访问性
+    if (reference) {
+      addClass(reference, 'el-popover__reference');
+      reference.setAttribute('aria-describedby', this.tooltipId);
+      reference.setAttribute('tabindex', 0); // tab序列
+      popper.setAttribute('tabindex', 0);
+
+      if (this.trigger !== 'click') {
+        on(reference, 'focusin', () => {
+          this.handleFocus();
+          const instance = reference.__vue__;
+          if (instance && typeof instance.focus === 'function') {
+            instance.focus();
+          }
+        });
+        on(popper, 'focusin', this.handleFocus);
+        on(reference, 'focusout', this.handleBlur);
+        on(popper, 'focusout', this.handleBlur);
+      }
+      on(reference, 'keydown', this.handleKeydown);
+      on(reference, 'click', this.handleClick);
+    }
     if (this.trigger === 'click') {
       on(reference, 'click', this.doToggle);
       on(document, 'click', this.handleDocumentClick);
@@ -71,26 +113,9 @@ export default {
       on(reference, 'mouseleave', this.handleMouseLeave);
       on(popper, 'mouseleave', this.handleMouseLeave);
     } else if (this.trigger === 'focus') {
-      let found = false;
-
-      if ([].slice.call(reference.children).length) {
-        const children = reference.childNodes;
-        const len = children.length;
-        for (let i = 0; i < len; i++) {
-          if (children[i].nodeName === 'INPUT' ||
-              children[i].nodeName === 'TEXTAREA') {
-            on(children[i], 'focus', this.doShow);
-            on(children[i], 'blur', this.doClose);
-            found = true;
-            break;
-          }
-        }
-      }
-      if (found) return;
-      if (reference.nodeName === 'INPUT' ||
-        reference.nodeName === 'TEXTAREA') {
-        on(reference, 'focus', this.doShow);
-        on(reference, 'blur', this.doClose);
+      if (reference.querySelector('input, textarea')) {
+        on(reference, 'focusin', this.doShow);
+        on(reference, 'focusout', this.doClose);
       } else {
         on(reference, 'mousedown', this.doShow);
         on(reference, 'mouseup', this.doClose);
@@ -108,6 +133,17 @@ export default {
     doClose() {
       this.showPopper = false;
     },
+    handleFocus() {
+      addClass(this.referenceElm, 'focusing');
+      if (this.trigger !== 'manual') this.showPopper = true;
+    },
+    handleClick() {
+      removeClass(this.referenceElm, 'focusing');
+    },
+    handleBlur() {
+      removeClass(this.referenceElm, 'focusing');
+      if (this.trigger !== 'manual') this.showPopper = false;
+    },
     handleMouseEnter() {
       clearTimeout(this._timer);
       if (this.openDelay) {
@@ -118,6 +154,11 @@ export default {
         this.showPopper = true;
       }
     },
+    handleKeydown(ev) {
+      if (ev.keyCode === 27 && this.trigger !== 'manual') { // esc
+        this.doClose();
+      }
+    },
     handleMouseLeave() {
       clearTimeout(this._timer);
       this._timer = setTimeout(() => {
@@ -138,6 +179,13 @@ export default {
         !popper ||
         popper.contains(e.target)) return;
       this.showPopper = false;
+    },
+    handleAfterEnter() {
+      this.$emit('after-enter');
+    },
+    handleAfterLeave() {
+      this.$emit('after-leave');
+      this.doDestroy();
     }
   },
 
@@ -147,8 +195,10 @@ export default {
     off(reference, 'click', this.doToggle);
     off(reference, 'mouseup', this.doClose);
     off(reference, 'mousedown', this.doShow);
-    off(reference, 'focus', this.doShow);
-    off(reference, 'blur', this.doClose);
+    off(reference, 'focusin', this.doShow);
+    off(reference, 'focusout', this.doClose);
+    off(reference, 'mousedown', this.doShow);
+    off(reference, 'mouseup', this.doClose);
     off(reference, 'mouseleave', this.handleMouseLeave);
     off(reference, 'mouseenter', this.handleMouseEnter);
     off(document, 'click', this.handleDocumentClick);
diff --git a/packages/progress/src/progress.vue b/packages/progress/src/progress.vue
index 5dac70687a..e1337d8518 100644
--- a/packages/progress/src/progress.vue
+++ b/packages/progress/src/progress.vue
@@ -9,6 +9,10 @@
         'el-progress--text-inside': textInside,
       }
     ]"
+    role="progressbar"
+    :aria-valuenow="percentage"
+    aria-valuemin="0"
+    aria-valuemax="100"
   >
     <div class="el-progress-bar" v-if="type === 'line'">
       <div class="el-progress-bar__outer" :style="{height: strokeWidth + 'px'}">
@@ -66,28 +70,33 @@
       showText: {
         type: Boolean,
         default: true
+      },
+      color: {
+        type: String,
+        default: ''
       }
     },
     computed: {
       barStyle() {
-        var style = {};
+        const style = {};
         style.width = this.percentage + '%';
+        style.backgroundColor = this.color;
         return style;
       },
       relativeStrokeWidth() {
         return (this.strokeWidth / this.width * 100).toFixed(1);
       },
       trackPath() {
-        var radius = parseInt(50 - parseFloat(this.relativeStrokeWidth) / 2, 10);
+        const radius = parseInt(50 - parseFloat(this.relativeStrokeWidth) / 2, 10);
 
         return `M 50 50 m 0 -${radius} a ${radius} ${radius} 0 1 1 0 ${radius * 2} a ${radius} ${radius} 0 1 1 0 -${radius * 2}`;
       },
       perimeter() {
-        var radius = 50 - parseFloat(this.relativeStrokeWidth) / 2;
+        const radius = 50 - parseFloat(this.relativeStrokeWidth) / 2;
         return 2 * Math.PI * radius;
       },
       circlePathStyle() {
-        var perimeter = this.perimeter;
+        const perimeter = this.perimeter;
         return {
           strokeDasharray: `${perimeter}px,${perimeter}px`,
           strokeDashoffset: (1 - this.percentage / 100) * perimeter + 'px',
@@ -95,22 +104,26 @@
         };
       },
       stroke() {
-        var ret;
-        switch (this.status) {
-          case 'success':
-            ret = '#13ce66';
-            break;
-          case 'exception':
-            ret = '#ff4949';
-            break;
-          default:
-            ret = '#20a0ff';
+        let ret;
+        if (this.color) {
+          ret = this.color;
+        } else {
+          switch (this.status) {
+            case 'success':
+              ret = '#13ce66';
+              break;
+            case 'exception':
+              ret = '#ff4949';
+              break;
+            default:
+              ret = '#20a0ff';
+          }
         }
         return ret;
       },
       iconClass() {
         if (this.type === 'line') {
-          return this.status === 'success' ? 'el-icon-circle-check' : 'el-icon-circle-cross';
+          return this.status === 'success' ? 'el-icon-circle-check' : 'el-icon-circle-close';
         } else {
           return this.status === 'success' ? 'el-icon-check' : 'el-icon-close';
         }
diff --git a/packages/radio/index.js b/packages/radio/index.js
index aad1667a0c..27178ac7bc 100644
--- a/packages/radio/index.js
+++ b/packages/radio/index.js
@@ -2,7 +2,7 @@ import Radio from './src/radio';
 
 /* istanbul ignore next */
 Radio.install = function(Vue) {
-  Vue.component('el-radio', Radio);
+  Vue.component(Radio.name, Radio);
 };
 
 export default Radio;
diff --git a/packages/radio/src/radio-button.vue b/packages/radio/src/radio-button.vue
index a834e0addb..2f736a9384 100644
--- a/packages/radio/src/radio-button.vue
+++ b/packages/radio/src/radio-button.vue
@@ -4,8 +4,14 @@
     :class="[
       size ? 'el-radio-button--' + size : '',
       { 'is-active': value === label },
-      { 'is-disabled': isDisabled }
+      { 'is-disabled': isDisabled },
+      { 'is-focus': focus }
     ]"
+    role="radio"
+    :aria-checked="value === label"
+    :aria-disabled="isDisabled"
+    :tabindex="tabIndex"
+    @keydown.space.stop.prevent="value = isDisabled ? value : label"
   >
     <input
       class="el-radio-button__orig-radio"
@@ -13,22 +19,48 @@
       type="radio"
       v-model="value"
       :name="name"
-      :disabled="isDisabled">
-    <span class="el-radio-button__inner" :style="value === label ? activeStyle : null">
+      @change="handleChange"
+      :disabled="isDisabled"
+      tabindex="-1"
+      @focus="focus = true"
+      @blur="focus = false"
+    >
+    <span
+      class="el-radio-button__inner"
+      :style="value === label ? activeStyle : null"
+      @keydown.stop>
       <slot></slot>
       <template v-if="!$slots.default">{{label}}</template>
     </span>
   </label>
 </template>
 <script>
+  import Emitter from 'element-ui/src/mixins/emitter';
+
   export default {
     name: 'ElRadioButton',
 
+    mixins: [Emitter],
+
+    inject: {
+      elForm: {
+        default: ''
+      },
+      elFormItem: {
+        default: ''
+      }
+    },
+
     props: {
       label: {},
       disabled: Boolean,
       name: String
     },
+    data() {
+      return {
+        focus: false
+      };
+    },
     computed: {
       value: {
         get() {
@@ -57,11 +89,25 @@
           color: this._radioGroup.textColor || ''
         };
       },
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
       size() {
-        return this._radioGroup.size;
+        return this._radioGroup.radioGroupSize || this._elFormItemSize || (this.$ELEMENT || {}).size;
       },
       isDisabled() {
-        return this.disabled || this._radioGroup.disabled;
+        return this.disabled || this._radioGroup.disabled || (this.elForm || {}).disabled;
+      },
+      tabIndex() {
+        return !this.isDisabled ? (this._radioGroup ? (this.value === this.label ? 0 : -1) : 0) : -1;
+      }
+    },
+
+    methods: {
+      handleChange() {
+        this.$nextTick(() => {
+          this.dispatch('ElRadioGroup', 'handleChange', this.value);
+        });
       }
     }
   };
diff --git a/packages/radio/src/radio-group.vue b/packages/radio/src/radio-group.vue
index 72486a8d9e..8cae1ef7da 100644
--- a/packages/radio/src/radio-group.vue
+++ b/packages/radio/src/radio-group.vue
@@ -1,16 +1,32 @@
 <template>
-  <div class="el-radio-group">
+  <div
+    class="el-radio-group"
+    role="radiogroup"
+    @keydown="handleKeydown"
+  >
     <slot></slot>
   </div>
 </template>
 <script>
   import Emitter from 'element-ui/src/mixins/emitter';
 
+  const keyCode = Object.freeze({
+    LEFT: 37,
+    UP: 38,
+    RIGHT: 39,
+    DOWN: 40
+  });
   export default {
     name: 'ElRadioGroup',
 
     componentName: 'ElRadioGroup',
 
+    inject: {
+      elFormItem: {
+        default: ''
+      }
+    },
+
     mixins: [Emitter],
 
     props: {
@@ -20,9 +36,69 @@
       textColor: String,
       disabled: Boolean
     },
+
+    computed: {
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+      radioGroupSize() {
+        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+      }
+    },
+
+    created() {
+      this.$on('handleChange', value => {
+        this.$emit('change', value);
+      });
+    },
+    mounted() {
+      // 当radioGroup没有默认选项时，第一个可以选中Tab导航
+      const radios = this.$el.querySelectorAll('[type=radio]');
+      const firstLabel = this.$el.querySelectorAll('[role=radio]')[0];
+      if (![].some.call(radios, radio => radio.checked) && firstLabel) {
+        firstLabel.tabIndex = 0;
+      }
+    },
+    methods: {
+      handleKeydown(e) { // 左右上下按键 可以在radio组内切换不同选项
+        const target = e.target;
+        const className = target.nodeName === 'INPUT' ? '[type=radio]' : '[role=radio]';
+        const radios = this.$el.querySelectorAll(className);
+        const length = radios.length;
+        const index = [].indexOf.call(radios, target);
+        const roleRadios = this.$el.querySelectorAll('[role=radio]');
+        switch (e.keyCode) {
+          case keyCode.LEFT:
+          case keyCode.UP:
+            e.stopPropagation();
+            e.preventDefault();
+            if (index === 0) {
+              roleRadios[length - 1].click();
+              roleRadios[length - 1].focus();
+            } else {
+              roleRadios[index - 1].click();
+              roleRadios[index - 1].focus();
+            }
+            break;
+          case keyCode.RIGHT:
+          case keyCode.DOWN:
+            if (index === (length - 1)) {
+              e.stopPropagation();
+              e.preventDefault();
+              roleRadios[0].click();
+              roleRadios[0].focus();
+            } else {
+              roleRadios[index + 1].click();
+              roleRadios[index + 1].focus();
+            }
+            break;
+          default:
+            break;
+        }
+      }
+    },
     watch: {
       value(value) {
-        this.$emit('change', value);
         this.dispatch('ElFormItem', 'el.form.change', [this.value]);
       }
     }
diff --git a/packages/radio/src/radio.vue b/packages/radio/src/radio.vue
index cbed9a631b..d08f5d93f0 100644
--- a/packages/radio/src/radio.vue
+++ b/packages/radio/src/radio.vue
@@ -1,10 +1,23 @@
 <template>
-  <label class="el-radio">
+  <label
+    class="el-radio"
+    :class="[
+      border && radioSize ? 'el-radio--' + radioSize : '',
+      { 'is-disabled': isDisabled },
+      { 'is-focus': focus },
+      { 'is-bordered': border },
+      { 'is-checked': model === label }
+    ]"
+    role="radio"
+    :aria-checked="model === label"
+    :aria-disabled="isDisabled"
+    :tabindex="tabIndex"
+    @keydown.space.stop.prevent="model = isDisabled ? model : label"
+  >
     <span class="el-radio__input"
       :class="{
         'is-disabled': isDisabled,
-        'is-checked': model === label,
-        'is-focus': focus
+        'is-checked': model === label
       }"
     >
       <span class="el-radio__inner"></span>
@@ -12,13 +25,17 @@
         class="el-radio__original"
         :value="label"
         type="radio"
+        aria-hidden="true"
         v-model="model"
         @focus="focus = true"
         @blur="focus = false"
+        @change="handleChange"
         :name="name"
-        :disabled="isDisabled">
+        :disabled="isDisabled"
+        tabindex="-1"
+      >
     </span>
-    <span class="el-radio__label">
+    <span class="el-radio__label" @keydown.stop>
       <slot></slot>
       <template v-if="!$slots.default">{{label}}</template>
     </span>
@@ -32,13 +49,25 @@
 
     mixins: [Emitter],
 
+    inject: {
+      elForm: {
+        default: ''
+      },
+
+      elFormItem: {
+        default: ''
+      }
+    },
+
     componentName: 'ElRadio',
 
     props: {
       value: {},
       label: {},
       disabled: Boolean,
-      name: String
+      name: String,
+      border: Boolean,
+      size: String
     },
 
     data() {
@@ -46,7 +75,6 @@
         focus: false
       };
     },
-
     computed: {
       isGroup() {
         let parent = this.$parent;
@@ -60,12 +88,10 @@
         }
         return false;
       },
-
       model: {
         get() {
           return this.isGroup ? this._radioGroup.value : this.value;
         },
-
         set(val) {
           if (this.isGroup) {
             this.dispatch('ElRadioGroup', 'input', [val]);
@@ -74,11 +100,31 @@
           }
         }
       },
-
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+      radioSize() {
+        const temRadioSize = this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+        return this.isGroup
+          ? this._radioGroup.radioGroupSize || temRadioSize
+          : temRadioSize;
+      },
       isDisabled() {
         return this.isGroup
-          ? this._radioGroup.disabled || this.disabled
-          : this.disabled;
+          ? this._radioGroup.disabled || this.disabled || (this.elForm || {}).disabled
+          : this.disabled || (this.elForm || {}).disabled;
+      },
+      tabIndex() {
+        return !this.isDisabled ? (this.isGroup ? (this.model === this.label ? 0 : -1) : 0) : -1;
+      }
+    },
+
+    methods: {
+      handleChange() {
+        this.$nextTick(() => {
+          this.$emit('change', this.model);
+          this.isGroup && this.dispatch('ElRadioGroup', 'handleChange', this.model);
+        });
       }
     }
   };
diff --git a/packages/rate/src/main.vue b/packages/rate/src/main.vue
index 1ee6981533..56f4d406e4 100644
--- a/packages/rate/src/main.vue
+++ b/packages/rate/src/main.vue
@@ -1,12 +1,21 @@
 <template>
-  <div class="el-rate">
+  <div
+    class="el-rate"
+    @keydown="handleKey"
+    role="slider"
+    :aria-valuenow="currentValue"
+    :aria-valuetext="text"
+    aria-valuemin="0"
+    :aria-valuemax="max"
+    tabindex="0">
     <span
-      v-for="item in max"
+      v-for="(item, key) in max"
       class="el-rate__item"
       @mousemove="setCurrentValue(item, $event)"
       @mouseleave="resetCurrentValue"
       @click="selectValue(item)"
-      :style="{ cursor: disabled ? 'auto' : 'pointer' }">
+      :style="{ cursor: rateDisabled ? 'auto' : 'pointer' }"
+      :key="key">
       <i
         :class="[classes[item - 1], { 'hover': hoverIndex === item }]"
         class="el-rate__icon"
@@ -19,20 +28,27 @@
         </i>
       </i>
     </span>
-    <span v-if="showText" class="el-rate__text" :style="{ color: textColor }">{{ text }}</span>
+    <span v-if="showText || showScore" class="el-rate__text" :style="{ color: textColor }">{{ text }}</span>
   </div>
 </template>
 
-<script type="text/babel">
+<script>
   import { hasClass } from 'element-ui/src/utils/dom';
+  import Migrating from 'element-ui/src/mixins/migrating';
 
   export default {
     name: 'ElRate',
 
+    mixins: [Migrating],
+
+    inject: {
+      elForm: {
+        default: ''
+      }
+    },
+
     data() {
       return {
-        classMap: {},
-        colorMap: {},
         pointerAtLeftHalf: true,
         currentValue: this.value,
         hoverIndex: -1
@@ -96,6 +112,10 @@
         type: Boolean,
         default: false
       },
+      showScore: {
+        type: Boolean,
+        default: false
+      },
       textColor: {
         type: String,
         default: '#1f2d3d'
@@ -106,7 +126,7 @@
           return ['极差', '失望', '一般', '满意', '惊喜'];
         }
       },
-      textTemplate: {
+      scoreTemplate: {
         type: String,
         default: '{value}'
       }
@@ -115,9 +135,11 @@
     computed: {
       text() {
         let result = '';
-        if (this.disabled) {
-          result = this.textTemplate.replace(/\{\s*value\s*\}/, this.value);
-        } else {
+        if (this.showScore) {
+          result = this.scoreTemplate.replace(/\{\s*value\s*\}/, this.rateDisabled
+            ? this.value
+            : this.currentValue);
+        } else if (this.showText) {
           result = this.texts[Math.ceil(this.currentValue) - 1];
         }
         return result;
@@ -125,7 +147,7 @@
 
       decimalStyle() {
         let width = '';
-        if (this.disabled) {
+        if (this.rateDisabled) {
           width = `${ this.valueDecimal < 50 ? 0 : 50 }%`;
         }
         if (this.allowHalf) {
@@ -146,13 +168,23 @@
       },
 
       voidClass() {
-        return this.disabled ? this.classMap.disabledVoidClass : this.classMap.voidClass;
+        return this.rateDisabled ? this.classMap.disabledVoidClass : this.classMap.voidClass;
       },
 
       activeClass() {
         return this.getValueFromMap(this.currentValue, this.classMap);
       },
 
+      colorMap() {
+        return {
+          lowColor: this.colors[0],
+          mediumColor: this.colors[1],
+          highColor: this.colors[2],
+          voidColor: this.voidColor,
+          disabledVoidColor: this.disabledVoidColor
+        };
+      },
+
       activeColor() {
         return this.getValueFromMap(this.currentValue, this.colorMap);
       },
@@ -171,18 +203,39 @@
           result.push(this.voidClass);
         }
         return result;
+      },
+
+      classMap() {
+        return {
+          lowClass: this.iconClasses[0],
+          mediumClass: this.iconClasses[1],
+          highClass: this.iconClasses[2],
+          voidClass: this.voidIconClass,
+          disabledVoidClass: this.disabledVoidIconClass
+        };
+      },
+
+      rateDisabled() {
+        return this.disabled || (this.elForm || {}).disabled;
       }
     },
 
     watch: {
       value(val) {
-        this.$emit('change', val);
         this.currentValue = val;
         this.pointerAtLeftHalf = this.value !== Math.floor(this.value);
       }
     },
 
     methods: {
+      getMigratingConfig() {
+        return {
+          props: {
+            'text-template': 'text-template is renamed to score-template.'
+          }
+        };
+      },
+
       getValueFromMap(value, map) {
         let result = '';
         if (value <= this.lowThreshold) {
@@ -196,7 +249,7 @@
       },
 
       showDecimalIcon(item) {
-        let showWhenDisabled = this.disabled && this.valueDecimal > 0 && item - 1 < this.value && item > this.value;
+        let showWhenDisabled = this.rateDisabled && this.valueDecimal > 0 && item - 1 < this.value && item > this.value;
         /* istanbul ignore next */
         let showWhenAllowHalf = this.allowHalf &&
           this.pointerAtLeftHalf &&
@@ -206,25 +259,57 @@
       },
 
       getIconStyle(item) {
-        const voidColor = this.disabled ? this.colorMap.disabledVoidColor : this.colorMap.voidColor;
+        const voidColor = this.rateDisabled ? this.colorMap.disabledVoidColor : this.colorMap.voidColor;
         return {
           color: item <= this.currentValue ? this.activeColor : voidColor
         };
       },
 
       selectValue(value) {
-        if (this.disabled) {
+        if (this.rateDisabled) {
           return;
         }
         if (this.allowHalf && this.pointerAtLeftHalf) {
           this.$emit('input', this.currentValue);
+          this.$emit('change', this.currentValue);
         } else {
           this.$emit('input', value);
+          this.$emit('change', value);
+        }
+      },
+
+      handleKey(e) {
+        if (this.rateDisabled) {
+          return;
+        }
+        let currentValue = this.currentValue;
+        const keyCode = e.keyCode;
+        if (keyCode === 38 || keyCode === 39) { // left / down
+          if (this.allowHalf) {
+            currentValue += 0.5;
+          } else {
+            currentValue += 1;
+          }
+          e.stopPropagation();
+          e.preventDefault();
+        } else if (keyCode === 37 || keyCode === 40) {
+          if (this.allowHalf) {
+            currentValue -= 0.5;
+          } else {
+            currentValue -= 1;
+          }
+          e.stopPropagation();
+          e.preventDefault();
         }
+        currentValue = currentValue < 0 ? 0 : currentValue;
+        currentValue = currentValue > this.max ? this.max : currentValue;
+
+        this.$emit('input', currentValue);
+        this.$emit('change', currentValue);
       },
 
       setCurrentValue(value, event) {
-        if (this.disabled) {
+        if (this.rateDisabled) {
           return;
         }
         /* istanbul ignore if */
@@ -245,7 +330,7 @@
       },
 
       resetCurrentValue() {
-        if (this.disabled) {
+        if (this.rateDisabled) {
           return;
         }
         if (this.allowHalf) {
@@ -260,20 +345,6 @@
       if (!this.value) {
         this.$emit('input', 0);
       }
-      this.classMap = {
-        lowClass: this.iconClasses[0],
-        mediumClass: this.iconClasses[1],
-        highClass: this.iconClasses[2],
-        voidClass: this.voidIconClass,
-        disabledVoidClass: this.disabledVoidIconClass
-      };
-      this.colorMap = {
-        lowColor: this.colors[0],
-        mediumColor: this.colors[1],
-        highColor: this.colors[2],
-        voidColor: this.voidColor,
-        disabledVoidColor: this.disabledVoidColor
-      };
     }
   };
 </script>
diff --git a/packages/row/src/row.js b/packages/row/src/row.js
index fb3ba0640e..5611d7ce96 100644
--- a/packages/row/src/row.js
+++ b/packages/row/src/row.js
@@ -22,7 +22,7 @@ export default {
 
   computed: {
     style() {
-      var ret = {};
+      const ret = {};
 
       if (this.gutter) {
         ret.marginLeft = `-${this.gutter / 2}px`;
diff --git a/packages/select/src/navigation-mixin.js b/packages/select/src/navigation-mixin.js
new file mode 100644
index 0000000000..b32490fef0
--- /dev/null
+++ b/packages/select/src/navigation-mixin.js
@@ -0,0 +1,54 @@
+export default {
+  data() {
+    return {
+      hoverOption: -1
+    };
+  },
+
+  computed: {
+    optionsAllDisabled() {
+      return this.options.filter(option => option.visible).every(option => option.disabled);
+    }
+  },
+
+  watch: {
+    hoverIndex(val) {
+      if (typeof val === 'number' && val > -1) {
+        this.hoverOption = this.options[val] || {};
+      }
+      this.options.forEach(option => {
+        option.hover = this.hoverOption === option;
+      });
+    }
+  },
+
+  methods: {
+    navigateOptions(direction) {
+      if (!this.visible) {
+        this.visible = true;
+        return;
+      }
+      if (this.options.length === 0 || this.filteredOptionsCount === 0) return;
+      if (!this.optionsAllDisabled) {
+        if (direction === 'next') {
+          this.hoverIndex++;
+          if (this.hoverIndex === this.options.length) {
+            this.hoverIndex = 0;
+          }
+        } else if (direction === 'prev') {
+          this.hoverIndex--;
+          if (this.hoverIndex < 0) {
+            this.hoverIndex = this.options.length - 1;
+          }
+        }
+        const option = this.options[this.hoverIndex];
+        if (option.disabled === true ||
+          option.groupDisabled === true ||
+          !option.visible) {
+          this.navigateOptions(direction);
+        }
+        this.$nextTick(() => this.scrollToOption(this.hoverOption));
+      }
+    }
+  }
+};
diff --git a/packages/select/src/option-group.vue b/packages/select/src/option-group.vue
index a28b6b5422..50cddd3f5b 100644
--- a/packages/select/src/option-group.vue
+++ b/packages/select/src/option-group.vue
@@ -1,6 +1,6 @@
 <template>
-  <ul class="el-select-group__wrap">
-    <li class="el-select-group__title" v-show="visible">{{ label }}</li>
+  <ul class="el-select-group__wrap" v-show="visible">
+    <li class="el-select-group__title">{{ label }}</li>
     <li>
       <ul class="el-select-group">
         <slot></slot>
diff --git a/packages/select/src/option.vue b/packages/select/src/option.vue
index 7c381c308f..b6bc9378cc 100644
--- a/packages/select/src/option.vue
+++ b/packages/select/src/option.vue
@@ -7,7 +7,7 @@
     :class="{
       'selected': itemSelected,
       'is-disabled': disabled || groupDisabled || limitReached,
-      'hover': parent.hoverIndex === index
+      'hover': hover
     }">
     <slot>
       <span>{{ currentLabel }}</span>
@@ -17,7 +17,7 @@
 
 <script type="text/babel">
   import Emitter from 'element-ui/src/mixins/emitter';
-  import { getValueByPath } from 'element-ui/src/utils/util';
+  import { getValueByPath, escapeRegexpString } from 'element-ui/src/utils/util';
 
   export default {
     mixins: [Emitter],
@@ -26,6 +26,8 @@
 
     componentName: 'ElOption',
 
+    inject: ['select'],
+
     props: {
       value: {
         required: true
@@ -43,14 +45,14 @@
         index: -1,
         groupDisabled: false,
         visible: true,
-        hitState: false
+        hitState: false,
+        hover: false
       };
     },
 
     computed: {
       isObject() {
-        const type = typeof this.value;
-        return type !== 'string' && type !== 'number' && type !== 'boolean';
+        return Object.prototype.toString.call(this.value).toLowerCase() === '[object object]';
       },
 
       currentLabel() {
@@ -61,27 +63,19 @@
         return this.value || this.label || '';
       },
 
-      parent() {
-        let result = this.$parent;
-        while (!result.isSelect) {
-          result = result.$parent;
-        }
-        return result;
-      },
-
       itemSelected() {
-        if (!this.parent.multiple) {
-          return this.isEqual(this.value, this.parent.value);
+        if (!this.select.multiple) {
+          return this.isEqual(this.value, this.select.value);
         } else {
-          return this.contains(this.parent.value, this.value);
+          return this.contains(this.select.value, this.value);
         }
       },
 
       limitReached() {
-        if (this.parent.multiple) {
+        if (this.select.multiple) {
           return !this.itemSelected &&
-            this.parent.value.length >= this.parent.multipleLimit &&
-            this.parent.multipleLimit > 0;
+            (this.select.value || []).length >= this.select.multipleLimit &&
+            this.select.multipleLimit > 0;
         } else {
           return false;
         }
@@ -90,10 +84,16 @@
 
     watch: {
       currentLabel() {
-        if (!this.created && !this.parent.remote) this.dispatch('ElSelect', 'setSelected');
+        if (!this.created && !this.select.remote) this.dispatch('ElSelect', 'setSelected');
       },
-      value() {
-        if (!this.created && !this.parent.remote) this.dispatch('ElSelect', 'setSelected');
+      value(val, oldVal) {
+        const { remote, valueKey } = this.select;
+        if (!this.created && !remote) {
+          if (valueKey && typeof val === 'object' && typeof oldVal === 'object' && val[valueKey] === oldVal[valueKey]) {
+            return;
+          }
+          this.dispatch('ElSelect', 'setSelected');
+        }
       }
     },
 
@@ -102,7 +102,7 @@
         if (!this.isObject) {
           return a === b;
         } else {
-          const valueKey = this.parent.valueKey;
+          const valueKey = this.select.valueKey;
           return getValueByPath(a, valueKey) === getValueByPath(b, valueKey);
         }
       },
@@ -111,7 +111,7 @@
         if (!this.isObject) {
           return arr.indexOf(target) > -1;
         } else {
-          const valueKey = this.parent.valueKey;
+          const valueKey = this.select.valueKey;
           return arr.some(item => {
             return getValueByPath(item, valueKey) === getValueByPath(target, valueKey);
           });
@@ -124,46 +124,36 @@
 
       hoverItem() {
         if (!this.disabled && !this.groupDisabled) {
-          this.parent.hoverIndex = this.parent.options.indexOf(this);
+          this.select.hoverIndex = this.select.options.indexOf(this);
         }
       },
 
       selectOptionClick() {
         if (this.disabled !== true && this.groupDisabled !== true) {
-          this.dispatch('ElSelect', 'handleOptionClick', this);
+          this.dispatch('ElSelect', 'handleOptionClick', [this, true]);
         }
       },
 
       queryChange(query) {
-        // query 里如果有正则中的特殊字符，需要先将这些字符转义
-        let parsedQuery = String(query).replace(/(\^|\(|\)|\[|\]|\$|\*|\+|\.|\?|\\|\{|\}|\|)/g, '\\$1');
-        this.visible = new RegExp(parsedQuery, 'i').test(this.currentLabel) || this.created;
+        this.visible = new RegExp(escapeRegexpString(query), 'i').test(this.currentLabel) || this.created;
         if (!this.visible) {
-          this.parent.filteredOptionsCount--;
+          this.select.filteredOptionsCount--;
         }
-      },
-
-      resetIndex() {
-        this.$nextTick(() => {
-          this.index = this.parent.options.indexOf(this);
-        });
       }
     },
 
     created() {
-      this.parent.options.push(this);
-      this.parent.cachedOptions.push(this);
-      this.parent.optionsCount++;
-      this.parent.filteredOptionsCount++;
-      this.index = this.parent.options.indexOf(this);
+      this.select.options.push(this);
+      this.select.cachedOptions.push(this);
+      this.select.optionsCount++;
+      this.select.filteredOptionsCount++;
 
       this.$on('queryChange', this.queryChange);
       this.$on('handleGroupDisabled', this.handleGroupDisabled);
-      this.$on('resetIndex', this.resetIndex);
     },
 
     beforeDestroy() {
-      this.dispatch('ElSelect', 'onOptionDestroy', this);
+      this.select.onOptionDestroy(this.select.options.indexOf(this));
     }
   };
 </script>
diff --git a/packages/select/src/select-dropdown.vue b/packages/select/src/select-dropdown.vue
index 854312136a..39e4d8012a 100644
--- a/packages/select/src/select-dropdown.vue
+++ b/packages/select/src/select-dropdown.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="el-select-dropdown"
+    class="el-select-dropdown el-popper"
     :class="[{ 'is-multiple': $parent.multiple }, popperClass]"
     :style="{ minWidth: minWidth }">
     <slot></slot>
@@ -29,10 +29,18 @@
       popperOptions: {
         default() {
           return {
-            forceAbsolute: true,
             gpuAcceleration: false
           };
         }
+      },
+
+      visibleArrow: {
+        default: true
+      },
+
+      appendToBody: {
+        type: Boolean,
+        default: true
       }
     },
 
diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue
index 3b2298a942..dce3a09e4c 100644
--- a/packages/select/src/select.vue
+++ b/packages/select/src/select.vue
@@ -1,22 +1,43 @@
 <template>
   <div
     class="el-select"
+    :class="[selectSize ? 'el-select--' + selectSize : '']"
+    @click.stop="toggleMenu"
     v-clickoutside="handleClose">
     <div
       class="el-select__tags"
       v-if="multiple"
-      @click.stop="toggleMenu"
       ref="tags"
-      :style="{ 'max-width': inputWidth - 32 + 'px' }">
-      <transition-group @after-leave="resetInputHeight">
+      :style="{ 'max-width': inputWidth - 32 + 'px', width: '100%' }">
+      <span v-if="collapseTags && selected.length">
+        <el-tag
+          :closable="!selectDisabled"
+          :size="collapseTagSize"
+          :hit="selected[0].hitState"
+          type="info"
+          @close="deleteTag($event, selected[0])"
+          disable-transitions>
+          <span class="el-select__tags-text">{{ selected[0].currentLabel }}</span>
+        </el-tag>
+        <el-tag
+          v-if="selected.length > 1"
+          :closable="false"
+          :size="collapseTagSize"
+          type="info"
+          disable-transitions>
+          <span class="el-select__tags-text">+ {{ selected.length - 1 }}</span>
+        </el-tag>
+      </span>
+      <transition-group @after-leave="resetInputHeight" v-if="!collapseTags">
         <el-tag
           v-for="item in selected"
           :key="getValueKey(item)"
-          closable
+          :closable="!selectDisabled"
+          :size="collapseTagSize"
           :hit="item.hitState"
-          type="primary"
+          type="info"
           @close="deleteTag($event, item)"
-          close-transition>
+          disable-transitions>
           <span class="el-select__tags-text">{{ item.currentLabel }}</span>
         </el-tag>
       </transition-group>
@@ -24,9 +45,12 @@
       <input
         type="text"
         class="el-select__input"
-        :class="`is-${ size }`"
-        @focus="visible = true"
-        :disabled="disabled"
+        :class="[selectSize ? `is-${ selectSize }` : '']"
+        :disabled="selectDisabled"
+        :autocomplete="autoComplete || autocomplete"
+        @focus="handleFocus"
+        @blur="softFocus = false"
+        @click.stop
         @keyup="managePlaceholder"
         @keydown="resetInputState"
         @keydown.down.prevent="navigateOptions('next')"
@@ -34,10 +58,13 @@
         @keydown.enter.prevent="selectOption"
         @keydown.esc.stop.prevent="visible = false"
         @keydown.delete="deletePrevTag"
+        @compositionstart="handleComposition"
+        @compositionupdate="handleComposition"
+        @compositionend="handleComposition"
         v-model="query"
-        :debounce="remote ? 300 : 0"
+        @input="debouncedQueryChange"
         v-if="filterable"
-        :style="{ width: inputLength + 'px', 'max-width': inputWidth - 42 + 'px' }"
+        :style="{ 'flex-grow': '1', width: inputLength / (inputWidth - 32) + '%', 'max-width': inputWidth - 42 + 'px' }"
         ref="input">
     </div>
     <el-input
@@ -46,23 +73,31 @@
       type="text"
       :placeholder="currentPlaceholder"
       :name="name"
-      :size="size"
-      :disabled="disabled"
-      :readonly="!filterable || multiple"
+      :id="id"
+      :autocomplete="autoComplete || autocomplete"
+      :size="selectSize"
+      :disabled="selectDisabled"
+      :readonly="readonly"
       :validate-event="false"
+      :class="{ 'is-focus': visible }"
       @focus="handleFocus"
-      @click="handleIconClick"
-      @mousedown.native="handleMouseDown"
+      @blur="handleBlur"
       @keyup.native="debouncedOnInputChange"
-      @keydown.native.down.prevent="navigateOptions('next')"
-      @keydown.native.up.prevent="navigateOptions('prev')"
+      @keydown.native.down.stop.prevent="navigateOptions('next')"
+      @keydown.native.up.stop.prevent="navigateOptions('prev')"
       @keydown.native.enter.prevent="selectOption"
       @keydown.native.esc.stop.prevent="visible = false"
       @keydown.native.tab="visible = false"
       @paste.native="debouncedOnInputChange"
       @mouseenter.native="inputHovering = true"
-      @mouseleave.native="inputHovering = false"
-      :icon="iconClass">
+      @mouseleave.native="inputHovering = false">
+      <template slot="prefix" v-if="$slots.prefix">
+        <slot name="prefix"></slot>
+      </template>
+      <template slot="suffix">
+        <i v-show="!showClose" :class="['el-select__caret', 'el-input__icon', 'el-icon-' + iconClass]"></i>
+        <i v-if="showClose" class="el-select__caret el-input__icon el-icon-circle-close" @click="handleClearClick"></i>
+      </template>
     </el-input>
     <transition
       name="el-zoom-in-top"
@@ -70,12 +105,14 @@
       @after-leave="doDestroy">
       <el-select-menu
         ref="popper"
+        :append-to-body="popperAppendToBody"
         v-show="visible && emptyText !== false">
         <el-scrollbar
           tag="ul"
           wrap-class="el-select-dropdown__wrap"
           view-class="el-select-dropdown__list"
-          :class="{ 'is-empty': !allowCreate && filteredOptionsCount === 0 }"
+          ref="scrollbar"
+          :class="{ 'is-empty': !allowCreate && query && filteredOptionsCount === 0 }"
           v-show="options.length > 0 && !loading">
           <el-option
             :value="query"
@@ -84,7 +121,12 @@
           </el-option>
           <slot></slot>
         </el-scrollbar>
-        <p class="el-select-dropdown__empty" v-if="emptyText && (allowCreate && options.length === 0 || !allowCreate)">{{ emptyText }}</p>
+        <p
+          class="el-select-dropdown__empty"
+          v-if="emptyText &&
+            (!allowCreate || loading || (allowCreate && options.length === 0 ))">
+          {{ emptyText }}
+        </p>
       </el-select-menu>
     </transition>
   </div>
@@ -92,6 +134,7 @@
 
 <script type="text/babel">
   import Emitter from 'element-ui/src/mixins/emitter';
+  import Focus from 'element-ui/src/mixins/focus';
   import Locale from 'element-ui/src/mixins/locale';
   import ElInput from 'element-ui/packages/input';
   import ElSelectMenu from './select-dropdown.vue';
@@ -100,34 +143,59 @@
   import ElScrollbar from 'element-ui/packages/scrollbar';
   import debounce from 'throttle-debounce/debounce';
   import Clickoutside from 'element-ui/src/utils/clickoutside';
-  import { addClass, removeClass, hasClass } from 'element-ui/src/utils/dom';
   import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
   import { t } from 'element-ui/src/locale';
   import scrollIntoView from 'element-ui/src/utils/scroll-into-view';
   import { getValueByPath } from 'element-ui/src/utils/util';
-
-  const sizeMap = {
-    'large': 42,
-    'small': 30,
-    'mini': 22
-  };
+  import { valueEquals, isIE, isEdge } from 'element-ui/src/utils/util';
+  import NavigationMixin from './navigation-mixin';
+  import { isKorean } from 'element-ui/src/utils/shared';
 
   export default {
-    mixins: [Emitter, Locale],
+    mixins: [Emitter, Locale, Focus('reference'), NavigationMixin],
 
     name: 'ElSelect',
 
     componentName: 'ElSelect',
 
+    inject: {
+      elForm: {
+        default: ''
+      },
+
+      elFormItem: {
+        default: ''
+      }
+    },
+
+    provide() {
+      return {
+        'select': this
+      };
+    },
+
     computed: {
-      iconClass() {
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+
+      readonly() {
+        return !this.filterable || this.multiple || (!isIE() && !isEdge() && !this.visible);
+      },
+
+      showClose() {
+        let hasValue = this.multiple
+          ? this.value.length > 0
+          : this.value !== undefined && this.value !== null && this.value !== '';
         let criteria = this.clearable &&
-          !this.disabled &&
+          !this.selectDisabled &&
           this.inputHovering &&
-          !this.multiple &&
-          this.value !== undefined &&
-          this.value !== '';
-        return criteria ? 'circle-close is-show-close' : (this.remote && this.filterable ? '' : 'caret-top');
+          hasValue;
+        return criteria;
+      },
+
+      iconClass() {
+        return this.remote && this.filterable ? '' : (this.visible ? 'arrow-up is-reverse' : 'arrow-up');
       },
 
       debounce() {
@@ -139,7 +207,7 @@
           return this.loadingText || this.t('el.select.loading');
         } else {
           if (this.remote && this.query === '' && this.options.length === 0) return false;
-          if (this.filterable && this.options.length > 0 && this.filteredOptionsCount === 0) {
+          if (this.filterable && this.query && this.options.length > 0 && this.filteredOptionsCount === 0) {
             return this.noMatchText || this.t('el.select.noMatch');
           }
           if (this.options.length === 0) {
@@ -153,6 +221,20 @@
         let hasExistingOption = this.options.filter(option => !option.created)
           .some(option => option.currentLabel === this.query);
         return this.filterable && this.allowCreate && this.query !== '' && !hasExistingOption;
+      },
+
+      selectSize() {
+        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+      },
+
+      selectDisabled() {
+        return this.disabled || (this.elForm || {}).disabled;
+      },
+
+      collapseTagSize() {
+        return ['small', 'mini'].indexOf(this.selectSize) > -1
+          ? 'mini'
+          : 'small';
       }
     },
 
@@ -168,9 +250,24 @@
 
     props: {
       name: String,
+      id: String,
       value: {
         required: true
       },
+      autocomplete: {
+        type: String,
+        default: 'off'
+      },
+      /** @Deprecated in next major version */
+      autoComplete: {
+        type: String,
+        validator(val) {
+          process.env.NODE_ENV !== 'production' &&
+            console.warn('[Element Warn][Select]\'auto-complete\' property will be deprecated in next major version. please use \'autocomplete\' instead.');
+          return true;
+        }
+      },
+      automaticDropdown: Boolean,
       size: String,
       disabled: Boolean,
       clearable: Boolean,
@@ -196,9 +293,15 @@
         }
       },
       defaultFirstOption: Boolean,
+      reserveKeyword: Boolean,
       valueKey: {
         type: String,
         default: 'value'
+      },
+      collapseTags: Boolean,
+      popperAppendToBody: {
+        type: Boolean,
+        default: true
       }
     },
 
@@ -209,28 +312,38 @@
         createdLabel: null,
         createdSelected: false,
         selected: this.multiple ? [] : {},
-        isSelect: true,
         inputLength: 20,
         inputWidth: 0,
+        initialInputHeight: 0,
         cachedPlaceHolder: '',
         optionsCount: 0,
         filteredOptionsCount: 0,
         visible: false,
+        softFocus: false,
         selectedLabel: '',
         hoverIndex: -1,
         query: '',
-        optionsAllDisabled: false,
+        previousQuery: null,
         inputHovering: false,
-        currentPlaceholder: ''
+        currentPlaceholder: '',
+        menuVisibleOnFocus: false,
+        isOnComposition: false,
+        isSilentBlur: false
       };
     },
 
     watch: {
+      selectDisabled() {
+        this.$nextTick(() => {
+          this.resetInputHeight();
+        });
+      },
+
       placeholder(val) {
         this.cachedPlaceHolder = this.currentPlaceholder = val;
       },
 
-      value(val) {
+      value(val, oldVal) {
         if (this.multiple) {
           this.resetInputHeight();
           if (val.length > 0 || (this.$refs.input && this.query !== '')) {
@@ -238,51 +351,28 @@
           } else {
             this.currentPlaceholder = this.cachedPlaceHolder;
           }
+          if (this.filterable && !this.reserveKeyword) {
+            this.query = '';
+            this.handleQueryChange(this.query);
+          }
         }
         this.setSelected();
         if (this.filterable && !this.multiple) {
           this.inputLength = 20;
         }
-        this.$emit('change', val);
-        this.dispatch('ElFormItem', 'el.form.change', val);
-      },
-
-      query(val) {
-        this.$nextTick(() => {
-          if (this.visible) this.broadcast('ElSelectDropdown', 'updatePopper');
-        });
-        this.hoverIndex = -1;
-        if (this.multiple && this.filterable) {
-          this.inputLength = this.$refs.input.value.length * 15 + 20;
-          this.managePlaceholder();
-          this.resetInputHeight();
-        }
-        if (this.remote && typeof this.remoteMethod === 'function') {
-          this.hoverIndex = -1;
-          this.remoteMethod(val);
-          this.broadcast('ElOption', 'resetIndex');
-        } else if (typeof this.filterMethod === 'function') {
-          this.filterMethod(val);
-          this.broadcast('ElOptionGroup', 'queryChange');
-        } else {
-          this.filteredOptionsCount = this.optionsCount;
-          this.broadcast('ElOption', 'queryChange', val);
-          this.broadcast('ElOptionGroup', 'queryChange');
-        }
-        if (this.defaultFirstOption && (this.filterable || this.remote) && this.filteredOptionsCount) {
-          this.checkDefaultFirstOption();
+        if (!valueEquals(val, oldVal)) {
+          this.dispatch('ElFormItem', 'el.form.change', val);
         }
       },
 
       visible(val) {
         if (!val) {
-          this.$refs.reference.$el.querySelector('input').blur();
-          this.handleIconHide();
           this.broadcast('ElSelectDropdown', 'destroyPopper');
           if (this.$refs.input) {
             this.$refs.input.blur();
           }
           this.query = '';
+          this.previousQuery = null;
           this.selectedLabel = '';
           this.inputLength = 20;
           this.resetHoverIndex();
@@ -296,7 +386,7 @@
           if (!this.multiple) {
             if (this.selected) {
               if (this.filterable && this.allowCreate &&
-                this.createdSelected && this.createdOption) {
+                this.createdSelected && this.createdLabel) {
                 this.selectedLabel = this.createdLabel;
               } else {
                 this.selectedLabel = this.selected.currentLabel;
@@ -305,10 +395,10 @@
             }
           }
         } else {
-          this.handleIconShow();
           this.broadcast('ElSelectDropdown', 'updatePopper');
           if (this.filterable) {
-            this.query = this.selectedLabel;
+            this.query = this.remote ? '' : this.selectedLabel;
+            this.handleQueryChange(this.query);
             if (this.multiple) {
               this.$refs.input.focus();
             } else {
@@ -323,9 +413,11 @@
         this.$emit('visible-change', val);
       },
 
-      options(val) {
+      options() {
         if (this.$isServer) return;
-        this.optionsAllDisabled = val.length === val.filter(item => item.disabled === true).length;
+        this.$nextTick(() => {
+          this.broadcast('ElSelectDropdown', 'updatePopper');
+        });
         if (this.multiple) {
           this.resetInputHeight();
         }
@@ -340,35 +432,76 @@
     },
 
     methods: {
-      handleIconHide() {
-        let icon = this.$el.querySelector('.el-input__icon');
-        if (icon) {
-          removeClass(icon, 'is-reverse');
+      handleComposition(event) {
+        const text = event.target.value;
+        if (event.type === 'compositionend') {
+          this.isOnComposition = false;
+          this.handleQueryChange(text);
+        } else {
+          const lastCharacter = text[text.length - 1] || '';
+          this.isOnComposition = !isKorean(lastCharacter);
         }
       },
-
-      handleIconShow() {
-        let icon = this.$el.querySelector('.el-input__icon');
-        if (icon && !hasClass(icon, 'el-icon-circle-close')) {
-          addClass(icon, 'is-reverse');
+      handleQueryChange(val) {
+        if (this.previousQuery === val || this.isOnComposition) return;
+        if (
+          this.previousQuery === null &&
+          (typeof this.filterMethod === 'function' || typeof this.remoteMethod === 'function')
+        ) {
+          this.previousQuery = val;
+          return;
+        }
+        this.previousQuery = val;
+        this.$nextTick(() => {
+          if (this.visible) this.broadcast('ElSelectDropdown', 'updatePopper');
+        });
+        this.hoverIndex = -1;
+        if (this.multiple && this.filterable) {
+          const length = this.$refs.input.value.length * 15 + 20;
+          this.inputLength = this.collapseTags ? Math.min(50, length) : length;
+          this.managePlaceholder();
+          this.resetInputHeight();
+        }
+        if (this.remote && typeof this.remoteMethod === 'function') {
+          this.hoverIndex = -1;
+          this.remoteMethod(val);
+        } else if (typeof this.filterMethod === 'function') {
+          this.filterMethod(val);
+          this.broadcast('ElOptionGroup', 'queryChange');
+        } else {
+          this.filteredOptionsCount = this.optionsCount;
+          this.broadcast('ElOption', 'queryChange', val);
+          this.broadcast('ElOptionGroup', 'queryChange');
+        }
+        if (this.defaultFirstOption && (this.filterable || this.remote) && this.filteredOptionsCount) {
+          this.checkDefaultFirstOption();
         }
       },
 
-      scrollToOption(className = 'selected') {
-        if (this.$refs.popper) {
+      scrollToOption(option) {
+        const target = Array.isArray(option) && option[0] ? option[0].$el : option.$el;
+        if (this.$refs.popper && target) {
           const menu = this.$refs.popper.$el.querySelector('.el-select-dropdown__wrap');
-          scrollIntoView(menu, menu.getElementsByClassName(className)[0]);
+          scrollIntoView(menu, target);
         }
+        this.$refs.scrollbar && this.$refs.scrollbar.handleScroll();
       },
 
       handleMenuEnter() {
-        this.$nextTick(() => this.scrollToOption());
+        this.$nextTick(() => this.scrollToOption(this.selected));
+      },
+
+      emitChange(val) {
+        if (!valueEquals(this.value, val)) {
+          this.$emit('change', val);
+        }
       },
 
       getOption(value) {
         let option;
-        const type = typeof value;
-        const isObject = type !== 'string' && type !== 'number' && type !== 'boolean';
+        const isObject = Object.prototype.toString.call(value).toLowerCase() === '[object object]';
+        const isNull = Object.prototype.toString.call(value).toLowerCase() === '[object null]';
+
         for (let i = this.cachedOptions.length - 1; i >= 0; i--) {
           const cachedOption = this.cachedOptions[i];
           const isEqual = isObject
@@ -380,7 +513,7 @@
           }
         }
         if (option) return option;
-        const label = !isObject
+        const label = (!isObject && !isNull)
           ? value : '';
         let newOption = {
           value: value,
@@ -418,29 +551,40 @@
         });
       },
 
-      handleFocus() {
-        this.visible = true;
-      },
-
-      handleIconClick(event) {
-        if (this.iconClass.indexOf('circle-close') > -1) {
-          this.deleteSelected(event);
+      handleFocus(event) {
+        if (!this.softFocus) {
+          if (this.automaticDropdown || this.filterable) {
+            this.visible = true;
+            this.menuVisibleOnFocus = true;
+          }
+          this.$emit('focus', event);
         } else {
-          this.toggleMenu();
+          this.softFocus = false;
         }
       },
 
-      handleMouseDown(event) {
-        if (event.target.tagName !== 'INPUT') return;
-        if (this.visible) {
-          this.handleClose();
-          event.preventDefault();
-        }
+      blur() {
+        this.visible = false;
+        this.$refs.reference.blur();
+      },
+
+      handleBlur(event) {
+        setTimeout(() => {
+          if (this.isSilentBlur) {
+            this.isSilentBlur = false;
+          } else {
+            this.$emit('blur', event);
+          }
+        }, 50);
+        this.softFocus = false;
+      },
+
+      handleClearClick(event) {
+        this.deleteSelected(event);
       },
 
       doDestroy() {
         this.$refs.popper && this.$refs.popper.doDestroy();
-        this.dropdownUl = null;
       },
 
       handleClose() {
@@ -466,6 +610,7 @@
           const value = this.value.slice();
           value.pop();
           this.$emit('input', value);
+          this.emitChange(value);
         }
       },
 
@@ -482,11 +627,19 @@
       },
 
       resetInputHeight() {
+        if (this.collapseTags && !this.filterable) return;
         this.$nextTick(() => {
           if (!this.$refs.reference) return;
           let inputChildNodes = this.$refs.reference.$el.childNodes;
           let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0];
-          input.style.height = Math.max(this.$refs.tags.clientHeight + 6, sizeMap[this.size] || 36) + 'px';
+          const tags = this.$refs.tags;
+          const sizeInMap = this.initialInputHeight || 40;
+          input.style.height = this.selected.length === 0
+            ? sizeInMap + 'px'
+            : Math.max(
+              tags ? (tags.clientHeight + (tags.clientHeight > sizeInMap ? 6 : 0)) : 0,
+              sizeInMap
+            ) + 'px';
           if (this.visible && this.emptyText !== false) {
             this.broadcast('ElSelectDropdown', 'updatePopper');
           }
@@ -507,7 +660,7 @@
         }, 300);
       },
 
-      handleOptionSelect(option) {
+      handleOptionSelect(option, byClick) {
         if (this.multiple) {
           const value = this.value.slice();
           const optionIndex = this.getValueIndex(value, option.value);
@@ -517,21 +670,36 @@
             value.push(option.value);
           }
           this.$emit('input', value);
+          this.emitChange(value);
           if (option.created) {
             this.query = '';
+            this.handleQueryChange('');
             this.inputLength = 20;
           }
           if (this.filterable) this.$refs.input.focus();
         } else {
           this.$emit('input', option.value);
+          this.emitChange(option.value);
           this.visible = false;
         }
-        this.$nextTick(() => this.scrollToOption());
+        this.isSilentBlur = byClick;
+        this.setSoftFocus();
+        if (this.visible) return;
+        this.$nextTick(() => {
+          this.scrollToOption(option);
+        });
+      },
+
+      setSoftFocus() {
+        this.softFocus = true;
+        const input = this.$refs.input || this.$refs.reference;
+        if (input) {
+          input.focus();
+        }
       },
 
       getValueIndex(arr = [], value) {
-        const type = typeof value;
-        const isObject = type !== 'string' && type !== 'number' && type !== 'boolean';
+        const isObject = Object.prototype.toString.call(value).toLowerCase() === '[object object]';
         if (!isObject) {
           return arr.indexOf(value);
         } else {
@@ -549,86 +717,62 @@
       },
 
       toggleMenu() {
-        if (this.filterable && this.query === '' && this.visible) {
-          return;
-        }
-        if (!this.disabled) {
-          this.visible = !this.visible;
-        }
-      },
-
-      navigateOptions(direction) {
-        if (!this.visible) {
-          this.visible = true;
-          return;
-        }
-        if (this.options.length === 0 || this.filteredOptionsCount === 0) return;
-        this.optionsAllDisabled = this.options.length === this.options.filter(item => item.disabled === true).length;
-        if (!this.optionsAllDisabled) {
-          if (direction === 'next') {
-            this.hoverIndex++;
-            if (this.hoverIndex === this.options.length) {
-              this.hoverIndex = 0;
-            }
-            if (this.options[this.hoverIndex].disabled === true ||
-              this.options[this.hoverIndex].groupDisabled === true ||
-              !this.options[this.hoverIndex].visible) {
-              this.navigateOptions('next');
-            }
+        if (!this.selectDisabled) {
+          if (this.menuVisibleOnFocus) {
+            this.menuVisibleOnFocus = false;
+          } else {
+            this.visible = !this.visible;
           }
-          if (direction === 'prev') {
-            this.hoverIndex--;
-            if (this.hoverIndex < 0) {
-              this.hoverIndex = this.options.length - 1;
-            }
-            if (this.options[this.hoverIndex].disabled === true ||
-              this.options[this.hoverIndex].groupDisabled === true ||
-              !this.options[this.hoverIndex].visible) {
-              this.navigateOptions('prev');
-            }
+          if (this.visible) {
+            (this.$refs.input || this.$refs.reference).focus();
           }
         }
-        this.$nextTick(() => this.scrollToOption('hover'));
       },
 
       selectOption() {
-        if (this.options[this.hoverIndex]) {
-          this.handleOptionSelect(this.options[this.hoverIndex]);
+        if (!this.visible) {
+          this.toggleMenu();
+        } else {
+          if (this.options[this.hoverIndex]) {
+            this.handleOptionSelect(this.options[this.hoverIndex]);
+          }
         }
       },
 
       deleteSelected(event) {
         event.stopPropagation();
-        this.$emit('input', '');
+        const value = this.multiple ? [] : '';
+        this.$emit('input', value);
+        this.emitChange(value);
         this.visible = false;
         this.$emit('clear');
       },
 
       deleteTag(event, tag) {
         let index = this.selected.indexOf(tag);
-        if (index > -1 && !this.disabled) {
+        if (index > -1 && !this.selectDisabled) {
           const value = this.value.slice();
           value.splice(index, 1);
           this.$emit('input', value);
-          this.$emit('remove-tag', tag);
+          this.emitChange(value);
+          this.$emit('remove-tag', tag.value);
         }
         event.stopPropagation();
       },
 
       onInputChange() {
-        if (this.filterable) {
+        if (this.filterable && this.query !== this.selectedLabel) {
           this.query = this.selectedLabel;
+          this.handleQueryChange(this.query);
         }
       },
 
-      onOptionDestroy(option) {
-        this.optionsCount--;
-        this.filteredOptionsCount--;
-        let index = this.options.indexOf(option);
+      onOptionDestroy(index) {
         if (index > -1) {
+          this.optionsCount--;
+          this.filteredOptionsCount--;
           this.options.splice(index, 1);
         }
-        this.broadcast('ElOption', 'resetIndex');
       },
 
       resetInputWidth() {
@@ -642,16 +786,26 @@
 
       checkDefaultFirstOption() {
         this.hoverIndex = -1;
+        // highlight the created option
+        let hasCreated = false;
+        for (let i = this.options.length - 1; i >= 0; i--) {
+          if (this.options[i].created) {
+            hasCreated = true;
+            this.hoverIndex = i;
+            break;
+          }
+        }
+        if (hasCreated) return;
         for (let i = 0; i !== this.options.length; ++i) {
           const option = this.options[i];
           if (this.query) {
-            // pick first options that passes the filter
+            // highlight first options that passes the filter
             if (!option.disabled && !option.groupDisabled && option.visible) {
               this.hoverIndex = i;
               break;
             }
           } else {
-            // pick currently selected option
+            // highlight currently selected option
             if (option.itemSelected) {
               this.hoverIndex = i;
               break;
@@ -661,8 +815,7 @@
       },
 
       getValueKey(item) {
-        const type = typeof item.value;
-        if (type === 'number' || type === 'string') {
+        if (Object.prototype.toString.call(item.value).toLowerCase() !== '[object object]') {
           return item.value;
         } else {
           return getValueByPath(item.value, this.valueKey);
@@ -678,14 +831,16 @@
       if (!this.multiple && Array.isArray(this.value)) {
         this.$emit('input', '');
       }
-      this.setSelected();
 
       this.debouncedOnInputChange = debounce(this.debounce, () => {
         this.onInputChange();
       });
 
+      this.debouncedQueryChange = debounce(this.debounce, (e) => {
+        this.handleQueryChange(e.target.value);
+      });
+
       this.$on('handleOptionClick', this.handleOptionSelect);
-      this.$on('onOptionDestroy', this.onOptionDestroy);
       this.$on('setSelected', this.setSelected);
     },
 
@@ -694,14 +849,25 @@
         this.currentPlaceholder = '';
       }
       addResizeListener(this.$el, this.handleResize);
+
+      const reference = this.$refs.reference;
+      if (reference && reference.$el) {
+        const sizeMap = {
+          medium: 36,
+          small: 32,
+          mini: 28
+        };
+        this.initialInputHeight = reference.$el.getBoundingClientRect().height || sizeMap[this.selectSize];
+      }
       if (this.remote && this.multiple) {
         this.resetInputHeight();
       }
       this.$nextTick(() => {
-        if (this.$refs.reference && this.$refs.reference.$el) {
-          this.inputWidth = this.$refs.reference.$el.getBoundingClientRect().width;
+        if (reference && reference.$el) {
+          this.inputWidth = reference.$el.getBoundingClientRect().width;
         }
       });
+      this.setSelected();
     },
 
     beforeDestroy() {
diff --git a/packages/slider/src/button.vue b/packages/slider/src/button.vue
index 36056dcebc..241dc83b06 100644
--- a/packages/slider/src/button.vue
+++ b/packages/slider/src/button.vue
@@ -4,10 +4,23 @@
     @mouseenter="handleMouseEnter"
     @mouseleave="handleMouseLeave"
     @mousedown="onButtonDown"
+    @touchstart="onButtonDown"
     :class="{ 'hover': hovering, 'dragging': dragging }"
     :style="wrapperStyle"
-    ref="button">
-    <el-tooltip placement="top" ref="tooltip" :disabled="!showTooltip">
+    ref="button"
+    tabindex="0"
+    @focus="handleMouseEnter"
+    @blur="handleMouseLeave"
+    @keydown.left="onLeftKeyDown"
+    @keydown.right="onRightKeyDown"
+    @keydown.down.prevent="onLeftKeyDown"
+    @keydown.up.prevent="onRightKeyDown"
+  >
+    <el-tooltip
+      placement="top"
+      ref="tooltip"
+      :popper-class="tooltipClass"
+      :disabled="!showTooltip">
       <span slot="content">{{ formatValue }}</span>
       <div class="el-slider__button" :class="{ 'hover': hovering, 'dragging': dragging }"></div>
     </el-tooltip>
@@ -32,13 +45,15 @@
       vertical: {
         type: Boolean,
         default: false
-      }
+      },
+      tooltipClass: String
     },
 
     data() {
       return {
         hovering: false,
         dragging: false,
+        isClick: false,
         startX: 0,
         currentX: 0,
         startY: 0,
@@ -51,7 +66,7 @@
 
     computed: {
       disabled() {
-        return this.$parent.disabled;
+        return this.$parent.sliderDisabled;
       },
 
       max() {
@@ -121,30 +136,53 @@
         event.preventDefault();
         this.onDragStart(event);
         window.addEventListener('mousemove', this.onDragging);
+        window.addEventListener('touchmove', this.onDragging);
         window.addEventListener('mouseup', this.onDragEnd);
+        window.addEventListener('touchend', this.onDragEnd);
         window.addEventListener('contextmenu', this.onDragEnd);
       },
-
+      onLeftKeyDown() {
+        if (this.disabled) return;
+        this.newPosition = parseFloat(this.currentPosition) - this.step / (this.max - this.min) * 100;
+        this.setPosition(this.newPosition);
+      },
+      onRightKeyDown() {
+        if (this.disabled) return;
+        this.newPosition = parseFloat(this.currentPosition) + this.step / (this.max - this.min) * 100;
+        this.setPosition(this.newPosition);
+      },
       onDragStart(event) {
         this.dragging = true;
+        this.isClick = true;
+        if (event.type === 'touchstart') {
+          event.clientY = event.touches[0].clientY;
+          event.clientX = event.touches[0].clientX;
+        }
         if (this.vertical) {
           this.startY = event.clientY;
         } else {
           this.startX = event.clientX;
         }
         this.startPosition = parseFloat(this.currentPosition);
+        this.newPosition = this.startPosition;
       },
 
       onDragging(event) {
         if (this.dragging) {
+          this.isClick = false;
           this.displayTooltip();
+          this.$parent.resetSize();
           let diff = 0;
+          if (event.type === 'touchmove') {
+            event.clientY = event.touches[0].clientY;
+            event.clientX = event.touches[0].clientX;
+          }
           if (this.vertical) {
             this.currentY = event.clientY;
-            diff = (this.startY - this.currentY) / this.$parent.$sliderSize * 100;
+            diff = (this.startY - this.currentY) / this.$parent.sliderSize * 100;
           } else {
             this.currentX = event.clientX;
-            diff = (this.currentX - this.startX) / this.$parent.$sliderSize * 100;
+            diff = (this.currentX - this.startX) / this.$parent.sliderSize * 100;
           }
           this.newPosition = this.startPosition + diff;
           this.setPosition(this.newPosition);
@@ -160,15 +198,21 @@
           setTimeout(() => {
             this.dragging = false;
             this.hideTooltip();
-            this.setPosition(this.newPosition);
+            if (!this.isClick) {
+              this.setPosition(this.newPosition);
+              this.$parent.emitChange();
+            }
           }, 0);
           window.removeEventListener('mousemove', this.onDragging);
+          window.removeEventListener('touchmove', this.onDragging);
           window.removeEventListener('mouseup', this.onDragEnd);
+          window.removeEventListener('touchend', this.onDragEnd);
           window.removeEventListener('contextmenu', this.onDragEnd);
         }
       },
 
       setPosition(newPosition) {
+        if (newPosition === null || isNaN(newPosition)) return;
         if (newPosition < 0) {
           newPosition = 0;
         } else if (newPosition > 100) {
@@ -179,7 +223,9 @@
         let value = steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min;
         value = parseFloat(value.toFixed(this.precision));
         this.$emit('input', value);
-        this.$refs.tooltip && this.$refs.tooltip.updatePopper();
+        this.$nextTick(() => {
+          this.$refs.tooltip && this.$refs.tooltip.updatePopper();
+        });
         if (!this.dragging && this.value !== this.oldValue) {
           this.oldValue = this.value;
         }
diff --git a/packages/slider/src/main.vue b/packages/slider/src/main.vue
index 3b426ea419..3c326fbc2c 100644
--- a/packages/slider/src/main.vue
+++ b/packages/slider/src/main.vue
@@ -1,20 +1,28 @@
 <template>
   <div class="el-slider"
-    :class="{ 'is-vertical': vertical, 'el-slider--with-input': showInput }">
+    :class="{ 'is-vertical': vertical, 'el-slider--with-input': showInput }"
+     role="slider"
+     :aria-valuemin="min"
+     :aria-valuemax="max"
+     :aria-orientation="vertical ? 'vertical': 'horizontal'"
+     :aria-disabled="sliderDisabled"
+  >
     <el-input-number
       v-model="firstValue"
       v-if="showInput && !range"
       class="el-slider__input"
       ref="input"
+      @change="$nextTick(emitChange)"
       :step="step"
-      :disabled="disabled"
+      :disabled="sliderDisabled"
       :controls="showInputControls"
       :min="min"
       :max="max"
-      size="small">
+      :debounce="debounce"
+      :size="inputSize">
     </el-input-number>
     <div class="el-slider__runway"
-      :class="{ 'show-input': showInput, 'disabled': disabled }"
+      :class="{ 'show-input': showInput, 'disabled': sliderDisabled }"
       :style="runwayStyle"
       @click="onSliderClick"
       ref="slider">
@@ -25,17 +33,20 @@
       <slider-button
         :vertical="vertical"
         v-model="firstValue"
+        :tooltip-class="tooltipClass"
         ref="button1">
       </slider-button>
       <slider-button
         :vertical="vertical"
         v-model="secondValue"
+        :tooltip-class="tooltipClass"
         ref="button2"
         v-if="range">
       </slider-button>
       <div
         class="el-slider__stop"
-        v-for="item in stops"
+        v-for="(item, key) in stops"
+        :key="key"
         :style="vertical ? { 'bottom': item + '%' } : { 'left': item + '%' }"
         v-if="showStops">
       </div>
@@ -46,7 +57,6 @@
 <script type="text/babel">
   import ElInputNumber from 'element-ui/packages/input-number';
   import SliderButton from './button.vue';
-  import { getStyle } from 'element-ui/src/utils/dom';
   import Emitter from 'element-ui/src/mixins/emitter';
 
   export default {
@@ -54,6 +64,12 @@
 
     mixins: [Emitter],
 
+    inject: {
+      elForm: {
+        default: ''
+      }
+    },
+
     props: {
       min: {
         type: Number,
@@ -79,6 +95,10 @@
         type: Boolean,
         default: true
       },
+      inputSize: {
+        type: String,
+        default: 'small'
+      },
       showStops: {
         type: Boolean,
         default: false
@@ -102,7 +122,15 @@
       },
       height: {
         type: String
-      }
+      },
+      debounce: {
+        type: Number,
+        default: 300
+      },
+      label: {
+        type: String
+      },
+      tooltipClass: String
     },
 
     components: {
@@ -115,7 +143,8 @@
         firstValue: null,
         secondValue: null,
         oldValue: null,
-        dragging: false
+        dragging: false,
+        sliderSize: 1
       };
     },
 
@@ -169,6 +198,10 @@
         }
       },
       setValues() {
+        if (this.min > this.max) {
+          console.error('[Element Error][Slider]min should not be greater than max.');
+          return;
+        }
         const val = this.value;
         if (this.range && Array.isArray(val)) {
           if (val[1] < this.min) {
@@ -183,7 +216,6 @@
             this.firstValue = val[0];
             this.secondValue = val[1];
             if (this.valueChanged()) {
-              this.$emit('change', [this.minValue, this.maxValue]);
               this.dispatch('ElFormItem', 'el.form.change', [this.minValue, this.maxValue]);
               this.oldValue = val.slice();
             }
@@ -196,7 +228,6 @@
           } else {
             this.firstValue = val;
             if (this.valueChanged()) {
-              this.$emit('change', val);
               this.dispatch('ElFormItem', 'el.form.change', val);
               this.oldValue = val;
             }
@@ -220,23 +251,34 @@
       },
 
       onSliderClick(event) {
-        if (this.disabled || this.dragging) return;
+        if (this.sliderDisabled || this.dragging) return;
+        this.resetSize();
         if (this.vertical) {
           const sliderOffsetBottom = this.$refs.slider.getBoundingClientRect().bottom;
-          this.setPosition((sliderOffsetBottom - event.clientY) / this.$sliderSize * 100);
+          this.setPosition((sliderOffsetBottom - event.clientY) / this.sliderSize * 100);
         } else {
           const sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left;
-          this.setPosition((event.clientX - sliderOffsetLeft) / this.$sliderSize * 100);
+          this.setPosition((event.clientX - sliderOffsetLeft) / this.sliderSize * 100);
+        }
+        this.emitChange();
+      },
+
+      resetSize() {
+        if (this.$refs.slider) {
+          this.sliderSize = this.$refs.slider[`client${ this.vertical ? 'Height' : 'Width' }`];
         }
+      },
+
+      emitChange() {
+        this.$nextTick(() => {
+          this.$emit('change', this.range ? [this.minValue, this.maxValue] : this.value);
+        });
       }
     },
 
     computed: {
-      $sliderSize() {
-        return parseInt(getStyle(this.$refs.slider, (this.vertical ? 'height' : 'width')), 10);
-      },
-
       stops() {
+        if (!this.showStops || this.min > this.max) return [];
         if (this.step === 0) {
           process.env.NODE_ENV !== 'production' &&
           console.warn('[Element Warn][Slider]step should not be 0.');
@@ -299,10 +341,15 @@
             width: this.barSize,
             left: this.barStart
           };
+      },
+
+      sliderDisabled() {
+        return this.disabled || (this.elForm || {}).disabled;
       }
     },
 
     mounted() {
+      let valuetext;
       if (this.range) {
         if (Array.isArray(this.value)) {
           this.firstValue = Math.max(this.min, this.value[0]);
@@ -312,6 +359,7 @@
           this.secondValue = this.max;
         }
         this.oldValue = [this.firstValue, this.secondValue];
+        valuetext = `${this.firstValue}-${this.secondValue}`;
       } else {
         if (typeof this.value !== 'number' || isNaN(this.value)) {
           this.firstValue = this.min;
@@ -319,7 +367,19 @@
           this.firstValue = Math.min(this.max, Math.max(this.min, this.value));
         }
         this.oldValue = this.firstValue;
+        valuetext = this.firstValue;
       }
+      this.$el.setAttribute('aria-valuetext', valuetext);
+
+      // label screen reader
+      this.$el.setAttribute('aria-label', this.label ? this.label : `slider between ${this.min} and ${this.max}`);
+
+      this.resetSize();
+      window.addEventListener('resize', this.resetSize);
+    },
+
+    beforeDestroy() {
+      window.removeEventListener('resize', this.resetSize);
     }
   };
 </script>
diff --git a/packages/spinner/src/spinner.vue b/packages/spinner/src/spinner.vue
index ab58e0a555..2597d11ec3 100644
--- a/packages/spinner/src/spinner.vue
+++ b/packages/spinner/src/spinner.vue
@@ -1,6 +1,6 @@
 <template>
   <span class="el-spinner">
-    <svg class="el-spinner-inner" viewBox="0 0 50 50" v-bind:style="{ width: radius/2 + 'px', height: radius/2 + 'px' }">
+    <svg class="el-spinner-inner" viewBox="0 0 50 50" :style="{ width: radius/2 + 'px', height: radius/2 + 'px' }">
       <circle class="path" cx="25" cy="25" r="20" fill="none" :stroke="strokeColor" :stroke-width="strokeWidth"></circle>
     </svg>
   </span>
diff --git a/packages/steps/README.md b/packages/steps/README.md
index 828724c8a7..8cc7334f05 100644
--- a/packages/steps/README.md
+++ b/packages/steps/README.md
@@ -13,7 +13,7 @@ npm i element-steps -D
 ```javascript
 import Vue from 'vue'
 import ElStep from 'element-steps'
-import 'element-theme-default/dist/step.css'
+import 'element-theme-chalk/dist/step.css'
 
 Vue.use(ElStep)
 ```
diff --git a/packages/steps/src/step.vue b/packages/steps/src/step.vue
index d7ee669412..1527c778a3 100644
--- a/packages/steps/src/step.vue
+++ b/packages/steps/src/step.vue
@@ -1,41 +1,50 @@
 <template>
   <div
     class="el-step"
-    :style="[style,  isLast ? '' : { marginRight: - $parent.stepOffset + 'px' }]"
-    :class="['is-' + $parent.direction]">
+    :style="style"
+    :class="[
+      !isSimple && `is-${$parent.direction}`,
+      isSimple && 'is-simple',
+      isLast && !space && !isCenter && 'is-flex',
+      isCenter && !isVertical && !isSimple && 'is-center'
+     ]">
+    <!-- icon & line -->
     <div
       class="el-step__head"
-      :class="['is-' + currentStatus, { 'is-text': !icon }]">
+      :class="`is-${currentStatus}`">
       <div
         class="el-step__line"
         :style="isLast ? '' : { marginRight: $parent.stepOffset + 'px' }"
-        :class="['is-' + $parent.direction, { 'is-icon': icon }]">
+      >
         <i class="el-step__line-inner" :style="lineStyle"></i>
       </div>
 
-      <span class="el-step__icon">
+      <div class="el-step__icon" :class="`is-${icon ? 'icon' : 'text'}`">
         <slot
           v-if="currentStatus !== 'success' && currentStatus !== 'error'"
           name="icon">
-          <i v-if="icon" :class="['el-icon-' + icon]"></i>
-          <div v-else>{{ index + 1 }}</div>
+          <i v-if="icon" class="el-step__icon-inner" :class="[icon]"></i>
+          <div class="el-step__icon-inner" v-if="!icon && !isSimple">{{ index + 1 }}</div>
         </slot>
         <i
           v-else
-          :class="['el-icon-' + (currentStatus === 'success' ? 'check' : 'close')]">
+          :class="['el-icon-' + (currentStatus === 'success' ? 'check' : 'close')]"
+          class="el-step__icon-inner is-status"
+        >
         </i>
-      </span>
+      </div>
     </div>
-    <div
-      class="el-step__main"
-      :style="{ marginLeft: mainOffset }">
+    <!-- title & description -->
+    <div class="el-step__main">
       <div
         class="el-step__title"
         ref="title"
         :class="['is-' + currentStatus]">
         <slot name="title">{{ title }}</slot>
       </div>
+      <div v-if="isSimple" class="el-step__arrow"></div>
       <div
+        v-else
         class="el-step__description"
         :class="['is-' + currentStatus]">
         <slot name="description">{{ description }}</slot>
@@ -59,7 +68,6 @@ export default {
     return {
       index: -1,
       lineStyle: {},
-      mainOffset: 0,
       internalStatus: ''
     };
   },
@@ -80,31 +88,49 @@ export default {
     currentStatus() {
       return this.status || this.internalStatus;
     },
-    isLast: function() {
+    prevStatus() {
+      const prevStep = this.$parent.steps[this.index - 1];
+      return prevStep ? prevStep.currentStatus : 'wait';
+    },
+    isCenter() {
+      return this.$parent.alignCenter;
+    },
+    isVertical() {
+      return this.$parent.direction === 'vertical';
+    },
+    isSimple() {
+      return this.$parent.simple;
+    },
+    isLast() {
       const parent = this.$parent;
       return parent.steps[parent.steps.length - 1] === this;
     },
+    stepsCount() {
+      return this.$parent.steps.length;
+    },
+    space() {
+      const { isSimple, $parent: { space } } = this;
+      return isSimple ? '' : space ;
+    },
     style: function() {
+      const style = {};
       const parent = this.$parent;
-      const isCenter = parent.center;
       const len = parent.steps.length;
 
-      if (isCenter && this.isLast) {
-        return {};
-      }
-
-      const space = (typeof parent.space === 'number'
-        ? parent.space + 'px'
-        : parent.space
-          ? parent.space
-          : 100 / (isCenter ? len - 1 : len) + '%');
-      if (parent.direction === 'horizontal') {
-        return { width: space };
+      const space = (typeof this.space === 'number'
+        ? this.space + 'px'
+        : this.space
+          ? this.space
+          : 100 / (len - (this.isCenter ? 0 : 1)) + '%');
+      style.flexBasis = space;
+      if (this.isVertical) return style;
+      if (this.isLast) {
+        style.maxWidth = 100 / this.stepsCount + '%';
       } else {
-        if (!this.isLast) {
-          return { height: space };
-        }
+        style.marginRight = -this.$parent.stepOffset + 'px';
       }
+
+      return style;
     }
   },
 
@@ -114,7 +140,7 @@ export default {
 
       if (val > this.index) {
         this.internalStatus = this.$parent.finishStatus;
-      } else if (val === this.index) {
+      } else if (val === this.index && this.prevStatus !== 'error') {
         this.internalStatus = this.$parent.processStatus;
       } else {
         this.internalStatus = 'wait';
@@ -129,7 +155,7 @@ export default {
 
       style.transitionDelay = 150 * this.index + 'ms';
       if (status === this.$parent.processStatus) {
-        step = 50;
+        step = this.currentStatus !== 'error' ? 0 : 0;
       } else if (status === 'wait') {
         step = 0;
         style.transitionDelay = (-150 * this.index) + 'ms';
@@ -145,14 +171,6 @@ export default {
   },
 
   mounted() {
-    const parent = this.$parent;
-
-    if (parent.direction === 'horizontal') {
-      if (parent.alignCenter) {
-        this.mainOffset = -this.$refs.title.getBoundingClientRect().width / 2 + 16 + 'px';
-      }
-    }
-
     const unwatch = this.$watch('index', val => {
       this.$watch('$parent.active', this.updateStatus, { immediate: true });
       unwatch();
diff --git a/packages/steps/src/steps.vue b/packages/steps/src/steps.vue
index 91940b085c..c6d065778a 100644
--- a/packages/steps/src/steps.vue
+++ b/packages/steps/src/steps.vue
@@ -1,15 +1,22 @@
 <template>
   <div
     class="el-steps"
-    :class="['is-' + direction, center ? 'is-center' : '']">
-    <slot></slot>
+    :class="[
+       !simple && 'el-steps--' + direction,
+       simple && 'el-steps--simple'
+     ]">
+      <slot></slot>
   </div>
 </template>
 
 <script>
+import Migrating from 'element-ui/src/mixins/migrating';
+
 export default {
   name: 'ElSteps',
 
+  mixins: [Migrating],
+
   props: {
     space: [Number, String],
     active: Number,
@@ -18,7 +25,7 @@ export default {
       default: 'horizontal'
     },
     alignCenter: Boolean,
-    center: Boolean,
+    simple: Boolean,
     finishStatus: {
       type: String,
       default: 'finish'
@@ -36,6 +43,16 @@ export default {
     };
   },
 
+  methods: {
+    getMigratingConfig() {
+      return {
+        props: {
+          'center': 'center is removed.'
+        }
+      };
+    }
+  },
+
   watch: {
     active(newVal, oldVal) {
       this.$emit('change', newVal, oldVal);
@@ -45,12 +62,6 @@ export default {
       steps.forEach((child, index) => {
         child.index = index;
       });
-      if (this.center) {
-        const len = steps.length;
-        this.$nextTick(() => {
-          this.stepOffset = steps[len - 1].$el.getBoundingClientRect().width / (len - 1);
-        });
-      }
     }
   }
 };
diff --git a/packages/switch/src/component.vue b/packages/switch/src/component.vue
index cf62a03f39..5b3397f0dc 100644
--- a/packages/switch/src/component.vue
+++ b/packages/switch/src/component.vue
@@ -1,42 +1,52 @@
 <template>
-  <label class="el-switch" :class="{ 'is-disabled': disabled, 'el-switch--wide': hasText, 'is-checked': checked }">
-    <div class="el-switch__mask" v-show="disabled"></div>
+  <div
+    class="el-switch"
+    :class="{ 'is-disabled': switchDisabled, 'is-checked': checked }"
+    role="switch"
+    :aria-checked="checked"
+    :aria-disabled="switchDisabled"
+    @click="switchValue"
+  >
     <input
       class="el-switch__input"
       type="checkbox"
       @change="handleChange"
       ref="input"
+      :id="id"
       :name="name"
-      :true-value="onValue"
-      :false-value="offValue"
-      :disabled="disabled">
+      :true-value="activeValue"
+      :false-value="inactiveValue"
+      :disabled="switchDisabled"
+      @keydown.enter="switchValue"
+    >
+    <span
+      :class="['el-switch__label', 'el-switch__label--left', !checked ? 'is-active' : '']"
+      v-if="inactiveIconClass || inactiveText">
+      <i :class="[inactiveIconClass]" v-if="inactiveIconClass"></i>
+      <span v-if="!inactiveIconClass && inactiveText" :aria-hidden="checked">{{ inactiveText }}</span>
+    </span>
     <span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
-      <span class="el-switch__button" :style="{ transform }"></span>
     </span>
-    <transition name="label-fade">
-      <div
-        class="el-switch__label el-switch__label--left"
-        v-show="checked"
-        :style="{ 'width': coreWidth + 'px' }">
-        <i :class="[onIconClass]" v-if="onIconClass"></i>
-        <span v-if="!onIconClass && onText">{{ onText }}</span>
-      </div>
-    </transition>
-    <transition name="label-fade">
-      <div
-        class="el-switch__label el-switch__label--right"
-        v-show="!checked"
-        :style="{ 'width': coreWidth + 'px' }">
-        <i :class="[offIconClass]" v-if="offIconClass"></i>
-        <span v-if="!offIconClass && offText">{{ offText }}</span>
-      </div>
-    </transition>
-  </label>
+    <span
+      :class="['el-switch__label', 'el-switch__label--right', checked ? 'is-active' : '']"
+      v-if="activeIconClass || activeText">
+      <i :class="[activeIconClass]" v-if="activeIconClass"></i>
+      <span v-if="!activeIconClass && activeText" :aria-hidden="!checked">{{ activeText }}</span>
+    </span>
+  </div>
 </template>
-
 <script>
+  import Focus from 'element-ui/src/mixins/focus';
+  import Migrating from 'element-ui/src/mixins/migrating';
+
   export default {
     name: 'ElSwitch',
+    mixins: [Focus('input'), Migrating],
+    inject: {
+      elForm: {
+        default: ''
+      }
+    },
     props: {
       value: {
         type: [Boolean, String, Number],
@@ -48,44 +58,39 @@
       },
       width: {
         type: Number,
-        default: 0
+        default: 40
       },
-      onIconClass: {
+      activeIconClass: {
         type: String,
         default: ''
       },
-      offIconClass: {
+      inactiveIconClass: {
         type: String,
         default: ''
       },
-      onText: {
-        type: String,
-        default: 'ON'
-      },
-      offText: {
-        type: String,
-        default: 'OFF'
-      },
-      onColor: {
+      activeText: String,
+      inactiveText: String,
+      activeColor: {
         type: String,
         default: ''
       },
-      offColor: {
+      inactiveColor: {
         type: String,
         default: ''
       },
-      onValue: {
+      activeValue: {
         type: [Boolean, String, Number],
         default: true
       },
-      offValue: {
+      inactiveValue: {
         type: [Boolean, String, Number],
         default: false
       },
       name: {
         type: String,
         default: ''
-      }
+      },
+      id: String
     },
     data() {
       return {
@@ -93,33 +98,30 @@
       };
     },
     created() {
-      if (!~[this.onValue, this.offValue].indexOf(this.value)) {
-        this.$emit('input', this.offValue);
+      if (!~[this.activeValue, this.inactiveValue].indexOf(this.value)) {
+        this.$emit('input', this.inactiveValue);
       }
     },
     computed: {
       checked() {
-        return this.value === this.onValue;
+        return this.value === this.activeValue;
       },
-      hasText() {
-        /* istanbul ignore next */
-        return this.onText || this.offText;
-      },
-      transform() {
-        return this.checked ? `translate(${ this.coreWidth - 20 }px, 2px)` : 'translate(2px, 2px)';
+      switchDisabled() {
+        return this.disabled || (this.elForm || {}).disabled;
       }
     },
     watch: {
       checked() {
-        if (this.onColor || this.offColor) {
+        this.$refs.input.checked = this.checked;
+        if (this.activeColor || this.inactiveColor) {
           this.setBackgroundColor();
         }
       }
     },
     methods: {
       handleChange(event) {
-        this.$emit('change', !this.checked ? this.onValue : this.offValue);
-        this.$emit('input', !this.checked ? this.onValue : this.offValue);
+        this.$emit('input', !this.checked ? this.activeValue : this.inactiveValue);
+        this.$emit('change', !this.checked ? this.activeValue : this.inactiveValue);
         this.$nextTick(() => {
           // set input's checked property
           // in case parent refuses to change component's value
@@ -127,17 +129,32 @@
         });
       },
       setBackgroundColor() {
-        let newColor = this.checked ? this.onColor : this.offColor;
+        let newColor = this.checked ? this.activeColor : this.inactiveColor;
         this.$refs.core.style.borderColor = newColor;
         this.$refs.core.style.backgroundColor = newColor;
+      },
+      switchValue() {
+        !this.switchDisabled && this.handleChange();
+      },
+      getMigratingConfig() {
+        return {
+          props: {
+            'on-color': 'on-color is renamed to active-color.',
+            'off-color': 'off-color is renamed to inactive-color.',
+            'on-text': 'on-text is renamed to active-text.',
+            'off-text': 'off-text is renamed to inactive-text.',
+            'on-value': 'on-value is renamed to active-value.',
+            'off-value': 'off-value is renamed to inactive-value.',
+            'on-icon-class': 'on-icon-class is renamed to active-icon-class.',
+            'off-icon-class': 'off-icon-class is renamed to inactive-icon-class.'
+          }
+        };
       }
     },
     mounted() {
       /* istanbul ignore if */
-      if (this.width === 0) {
-        this.coreWidth = this.hasText ? 58 : 46;
-      }
-      if (this.onColor || this.offColor) {
+      this.coreWidth = this.width || 40;
+      if (this.activeColor || this.inactiveColor) {
         this.setBackgroundColor();
       }
       this.$refs.input.checked = this.checked;
diff --git a/packages/table/README.md b/packages/table/README.md
deleted file mode 100644
index 7232005662..0000000000
--- a/packages/table/README.md
+++ /dev/null
@@ -1,105 +0,0 @@
-# element-table
-> A element-table component for Vue.js.
-
-## Demo
-http://element-component.github.io/element-table
-
-## Installation
-```shell
-npm i element-table -D
-```
-
-## Usage
-```javascript
-import Vue from 'vue'
-import ElTable from 'element-table'
-import 'element-theme-default'
-
-Vue.use(ElTable)
-```
-
-or
-
-```javascript
-import Vue from 'vue'
-import { ElTable } from 'element-table'
-import { ElTableColumn } from 'element-table'
-
-Vue.component('el-table', ElTable)
-Vue.component('el-table-column', ElTableColumn)
-```
-
-
-### Table Attributes
-| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
-|---------- |-------------- |---------- |--------------------------------  |-------- |
-| data | 显示的数据 | array | — | — |
-| height | Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则 Table 的高度受控于外部样式。  | string/number | — | — |
-| stripe | 是否为斑马纹 table | boolean | — | false |
-| border | 是否带有纵向边框 | boolean | — | false |
-| fit | 列的宽度是否自撑开 | boolean | — | true |
-| show-header | 是否显示表头 | boolean | - | true |
-| highlight-current-row | 是否要高亮当前行 | boolean | — | false |
-| row-class-name | 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 | Function(row, index)/String | — | — |
-| row-style | 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 | Function(row, index)/Object | — | — |
-| row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的 | Function(row)/String | — | — |
-
-### Table Events
-| 事件名 | 说明 | 参数 |
-| ---- | ---- | ---- |
-| select | 当用户手动勾选数据行的 Checkbox 时触发的事件 | selection, row |
-| select-all | 当用户手动勾选全选 Checkbox 时触发的事件 | selection |
-| selection-change | 当选择项发生变化时会触发该事件 | selection |
-| cell-mouse-enter | 当单元格 hover 进入时会触发该事件 | row, column, cell, event |
-| cell-mouse-leave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event |
-| cell-click | 当某个单元格被点击时会触发该事件 | row, column, cell, event |
-| row-click | 当某一行被点击时会触发该事件 | row, event |
-| row-dblclick | 当某一行被双击时会触发该事件 | row, event |
-| header-click | 当某一列的表头被点击时会触发该事件 | column, event |
-| sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } |
-| current-change | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | currentRow, oldCurrentRow |
-
-### Table Methods
-| 方法名 | 说明 | 参数 |
-| ---- | ---- | ---- |
-| clearSelection | 清空用户的选择，当使用 reserve-selection 功能的时候，可能会需要使用此方法 | selection |
-| toggleRowSelection | 切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） | row, selected |
-
-### Table-column Attributes
-| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
-|---------- |-------------- |---------- |--------------------------------  |-------- |
-| type | 对应列的类型。如果设置了 `selection` 则显示多选框，如果设置了 `index` 则显示该行的索引（从 1 开始计算） | string | selection/index | — |
-| label | 显示的标题 | string | — | — |
-| prop | 对应列内容的字段名，也可以使用 property 属性 | string | — | — |
-| width | 对应列的宽度 | string | — | — |
-| min-width | 对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 | string | — | — |
-| fixed | 列是否固定在左侧或者右侧，true 表示固定在左侧 | string, boolean | true, left, right | — |
-| render-header | 列标题 Label 区域渲染使用的 Function | Function(h, { column, $index }) | — | — |
-| sortable | 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 | boolean, string | true, false, 'custom' | false |
-| sort-method | 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效 | Function(a, b) | — | — |
-| resizable | 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） | boolean | — | true |
-| formatter | 用来格式化内容 | Function(row, column) | — | — |
-| show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip | Boolean | — | false |
-| inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息。总共可以获取到 `{ row(当前行), column(当前列), $index(行数), store(table store) }` 以及 Table 所处的上下文环境。 | — | — |
-| align | 对齐方式 | String | left, center, right | left |
-| class-name | 列的 className | string | — | — |
-| selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function(row, index) | — | — |
-| reserve-selection | 仅对 type=selection 的列有效，类型为 Boolean，为 true 则代表会保留之前数据的选项，需要配合 Table 的 clearSelection 方法使用。 | Boolean | — | false |
-| filters | 数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。 | Array[{ text, value }] | — | — |
-| filter-multiple | 数据过滤的选项是否多选 | Boolean | — | true |
-| filter-method | 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。 | Function(value, row) | — | — |
-| filtered-value | 选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。 | Array | — | — |
-
-## Development
-```shell
-make dev
-
-## test
-make test
-
-## build
-make build
-```
-
-# License
-[MIT](https://opensource.org/licenses/MIT)
diff --git a/packages/table/_index.js b/packages/table/_index.js
deleted file mode 100644
index 289659c6dd..0000000000
--- a/packages/table/_index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import ElTableColumn from './src/table-column';
-import ElTable from './src/table';
-
-/* istanbul ignore next */
-export default function(Vue) {
-  Vue.component(ElTable.name, ElTable);
-  Vue.component(ElTableColumn.name, ElTableColumn);
-};
-
-export { ElTable, ElTableColumn };
diff --git a/packages/table/cooking.conf.js b/packages/table/cooking.conf.js
deleted file mode 100644
index fed10f8a05..0000000000
--- a/packages/table/cooking.conf.js
+++ /dev/null
@@ -1,6 +0,0 @@
-var cooking = require('cooking');
-var gen = require('../../build/gen-single-config');
-
-cooking.set(gen(__dirname, 'ElTable', '_index.js'));
-
-module.exports = cooking.resolve();
diff --git a/packages/table/package.json b/packages/table/package.json
deleted file mode 100644
index 9b16bc3943..0000000000
--- a/packages/table/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "name": "element-table",
-  "version": "1.0.0",
-  "description": "A table component for Vue.",
-  "keywords": [
-    "element",
-    "vue",
-    "component"
-  ],
-  "main": "./lib/index.js",
-  "repository": "https://github.com/ElemeFE/element/tree/master/packages/table",
-  "author": "elemefe",
-  "license": "MIT",
-  "dependencies": {
-    "throttle-debounce": "^1.0.1"
-  }
-}
diff --git a/packages/table/src/filter-panel.vue b/packages/table/src/filter-panel.vue
index 50c2f141e2..9ff7b45247 100644
--- a/packages/table/src/filter-panel.vue
+++ b/packages/table/src/filter-panel.vue
@@ -1,13 +1,19 @@
 <template>
   <transition name="el-zoom-in-top">
-    <div class="el-table-filter" v-if="multiple" v-show="showPopper">
+    <div
+      class="el-table-filter"
+      v-if="multiple"
+      v-clickoutside="handleOutsideClick"
+      v-show="showPopper">
       <div class="el-table-filter__content">
-        <el-checkbox-group class="el-table-filter__checkbox-group" v-model="filteredValue">
-          <el-checkbox
-            v-for="filter in filters"
-            :key="filter.value"
-            :label="filter.value">{{ filter.text }}</el-checkbox>
-        </el-checkbox-group>
+        <el-scrollbar wrap-class="el-table-filter__wrap">
+          <el-checkbox-group class="el-table-filter__checkbox-group" v-model="filteredValue">
+            <el-checkbox
+              v-for="filter in filters"
+              :key="filter.value"
+              :label="filter.value">{{ filter.text }}</el-checkbox>
+          </el-checkbox-group>
+        </el-scrollbar>
       </div>
       <div class="el-table-filter__bottom">
         <button @click="handleConfirm"
@@ -16,10 +22,14 @@
         <button @click="handleReset">{{ t('el.table.resetFilter') }}</button>
       </div>
     </div>
-    <div class="el-table-filter" v-else v-show="showPopper">
+    <div
+      class="el-table-filter"
+      v-else
+      v-clickoutside="handleOutsideClick"
+      v-show="showPopper">
       <ul class="el-table-filter__list">
         <li class="el-table-filter__list-item"
-            :class="{ 'is-active': !filterValue }"
+            :class="{ 'is-active': filterValue === undefined || filterValue === null }"
             @click="handleSelect(null)">{{ t('el.table.clearFilter') }}</li>
         <li class="el-table-filter__list-item"
             v-for="filter in filters"
@@ -79,7 +89,9 @@
       },
 
       handleOutsideClick() {
-        this.showPopper = false;
+        setTimeout(() => {
+          this.showPopper = false;
+        }, 16);
       },
 
       handleConfirm() {
@@ -110,6 +122,7 @@
           column: this.column,
           values: filteredValue
         });
+        this.table.store.updateAllSelected();
       }
     },
 
diff --git a/packages/table/src/layout-observer.js b/packages/table/src/layout-observer.js
new file mode 100644
index 0000000000..6e9a1c30bc
--- /dev/null
+++ b/packages/table/src/layout-observer.js
@@ -0,0 +1,68 @@
+export default {
+  created() {
+    this.tableLayout.addObserver(this);
+  },
+
+  destroyed() {
+    this.tableLayout.removeObserver(this);
+  },
+
+  computed: {
+    tableLayout() {
+      let layout = this.layout;
+      if (!layout && this.table) {
+        layout = this.table.layout;
+      }
+      if (!layout) {
+        throw new Error('Can not find table layout.');
+      }
+      return layout;
+    }
+  },
+
+  mounted() {
+    this.onColumnsChange(this.tableLayout);
+    this.onScrollableChange(this.tableLayout);
+  },
+
+  updated() {
+    if (this.__updated__) return;
+    this.onColumnsChange(this.tableLayout);
+    this.onScrollableChange(this.tableLayout);
+    this.__updated__ = true;
+  },
+
+  methods: {
+    onColumnsChange() {
+      const cols = this.$el.querySelectorAll('colgroup > col');
+      if (!cols.length) return;
+      const flattenColumns = this.tableLayout.getFlattenColumns();
+      const columnsMap = {};
+      flattenColumns.forEach((column) => {
+        columnsMap[column.id] = column;
+      });
+      for (let i = 0, j = cols.length; i < j; i++) {
+        const col = cols[i];
+        const name = col.getAttribute('name');
+        const column = columnsMap[name];
+        if (column) {
+          col.setAttribute('width', column.realWidth || column.width);
+        }
+      }
+    },
+
+    onScrollableChange(layout) {
+      const cols = this.$el.querySelectorAll('colgroup > col[name=gutter]');
+      for (let i = 0, j = cols.length; i < j; i++) {
+        const col = cols[i];
+        col.setAttribute('width', layout.scrollY ? layout.gutterWidth : '0');
+      }
+      const ths = this.$el.querySelectorAll('th.gutter');
+      for (let i = 0, j = ths.length; i < j; i++) {
+        const th = ths[i];
+        th.style.width = layout.scrollY ? layout.gutterWidth + 'px' : '0';
+        th.style.display = layout.scrollY ? '' : 'none';
+      }
+    }
+  }
+};
diff --git a/packages/table/src/table-body.js b/packages/table/src/table-body.js
index 65a1320e8e..73341f2b53 100644
--- a/packages/table/src/table-body.js
+++ b/packages/table/src/table-body.js
@@ -1,10 +1,15 @@
 import { getCell, getColumnByCell, getRowIdentity } from './util';
-import { hasClass, addClass, removeClass } from 'element-ui/src/utils/dom';
+import { getStyle, hasClass, addClass, removeClass } from 'element-ui/src/utils/dom';
 import ElCheckbox from 'element-ui/packages/checkbox';
 import ElTooltip from 'element-ui/packages/tooltip';
 import debounce from 'throttle-debounce/debounce';
+import LayoutObserver from './layout-observer';
 
 export default {
+  name: 'ElTableBody',
+
+  mixins: [LayoutObserver],
+
   components: {
     ElCheckbox,
     ElTooltip
@@ -16,9 +21,6 @@ export default {
     },
     stripe: Boolean,
     context: {},
-    layout: {
-      required: true
-    },
     rowClassName: [String, Function],
     rowStyle: [Object, Function],
     fixed: String,
@@ -35,11 +37,7 @@ export default {
         border="0">
         <colgroup>
           {
-            this._l(this.columns, column =>
-              <col
-                name={ column.id }
-                width={ column.realWidth || column.width }
-              />)
+            this._l(this.columns, column => <col name={ column.id } />)
           }
         </colgroup>
         <tbody>
@@ -55,31 +53,47 @@ export default {
                 on-mouseleave={ _ => this.handleMouseLeave() }
                 class={ [this.getRowClass(row, $index)] }>
                 {
-                  this._l(this.columns, (column, cellIndex) =>
-                    <td
-                      class={ [column.id, column.align, column.className || '', columnsHidden[cellIndex] ? 'is-hidden' : '' ] }
-                      on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) }
-                      on-mouseleave={ this.handleCellMouseLeave }>
-                      {
-                        column.renderCell.call(this._renderProxy, h, { row, column, $index, store: this.store, _self: this.context || this.table.$vnode.context }, columnsHidden[cellIndex])
-                      }
-                    </td>
-                  )
-                }
-                {
-                  !this.fixed && this.layout.scrollY && this.layout.gutterWidth ? <td class="gutter" /> : ''
+                  this._l(this.columns, (column, cellIndex) => {
+                    const { rowspan, colspan } = this.getSpan(row, column, $index, cellIndex);
+                    if (!rowspan || !colspan) {
+                      return '';
+                    } else {
+                      return (
+                        <td
+                          style={ this.getCellStyle($index, cellIndex, row, column) }
+                          class={ this.getCellClass($index, cellIndex, row, column) }
+                          rowspan={ rowspan }
+                          colspan={ colspan }
+                          on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) }
+                          on-mouseleave={ this.handleCellMouseLeave }>
+                          {
+                            column.renderCell.call(
+                              this._renderProxy,
+                              h,
+                              {
+                                row,
+                                column,
+                                $index,
+                                store: this.store,
+                                _self: this.context || this.table.$vnode.context
+                              },
+                              columnsHidden[cellIndex]
+                            )
+                          }
+                        </td>
+                      );
+                    }
+                  })
                 }
               </tr>,
-                this.store.states.expandRows.indexOf(row) > -1
+              this.store.isRowExpanded(row)
                 ? (<tr>
-                    <td colspan={ this.columns.length } class="el-table__expanded-cell">
-                      { this.table.renderExpanded ? this.table.renderExpanded(h, { row, $index, store: this.store }) : ''}
-                    </td>
-                  </tr>)
+                  <td colspan={ this.columns.length } class="el-table__expanded-cell">
+                    { this.table.renderExpanded ? this.table.renderExpanded(h, { row, $index, store: this.store }) : ''}
+                  </td>
+                </tr>)
                 : ''
               ]
-            ).concat(
-              this._self.$parent.$slots.append
             ).concat(
               <el-tooltip effect={ this.table.tooltipEffect } placement="top" ref="tooltip" content={ this.tooltipContent }></el-tooltip>
             )
@@ -94,7 +108,8 @@ export default {
       if (!this.store.states.isComplex) return;
       const el = this.$el;
       if (!el) return;
-      const rows = el.querySelectorAll('tbody > tr.el-table__row');
+      const tr = el.querySelector('tbody').children;
+      const rows = [].filter.call(tr, row => hasClass(row, 'el-table__row'));
       const oldRow = rows[oldVal];
       const newRow = rows[newVal];
       if (oldRow) {
@@ -109,12 +124,13 @@ export default {
       const el = this.$el;
       if (!el) return;
       const data = this.store.states.data;
-      const rows = el.querySelectorAll('tbody > tr.el-table__row');
+      const tr = el.querySelector('tbody').children;
+      const rows = [].filter.call(tr, row => hasClass(row, 'el-table__row'));
       const oldRow = rows[data.indexOf(oldVal)];
       const newRow = rows[data.indexOf(newVal)];
       if (oldRow) {
         removeClass(oldRow, 'current-row');
-      } else if (rows) {
+      } else {
         [].forEach.call(rows, row => removeClass(row, 'current-row'));
       }
       if (newRow) {
@@ -136,6 +152,14 @@ export default {
       return this.store.states.columns.length;
     },
 
+    leftFixedLeafCount() {
+      return this.store.states.fixedLeafColumnsLength;
+    },
+
+    rightFixedLeafCount() {
+      return this.store.states.rightFixedLeafColumnsLength;
+    },
+
     leftFixedCount() {
       return this.store.states.fixedColumns.length;
     },
@@ -170,33 +194,109 @@ export default {
 
     isColumnHidden(index) {
       if (this.fixed === true || this.fixed === 'left') {
-        return index >= this.leftFixedCount;
+        return index >= this.leftFixedLeafCount;
       } else if (this.fixed === 'right') {
-        return index < this.columnsCount - this.rightFixedCount;
+        return index < this.columnsCount - this.rightFixedLeafCount;
       } else {
-        return (index < this.leftFixedCount) || (index >= this.columnsCount - this.rightFixedCount);
+        return (index < this.leftFixedLeafCount) || (index >= this.columnsCount - this.rightFixedLeafCount);
+      }
+    },
+
+    getSpan(row, column, rowIndex, columnIndex) {
+      let rowspan = 1;
+      let colspan = 1;
+
+      const fn = this.table.spanMethod;
+      if (typeof fn === 'function') {
+        const result = fn({
+          row,
+          column,
+          rowIndex,
+          columnIndex
+        });
+
+        if (Array.isArray(result)) {
+          rowspan = result[0];
+          colspan = result[1];
+        } else if (typeof result === 'object') {
+          rowspan = result.rowspan;
+          colspan = result.colspan;
+        }
       }
+
+      return {
+        rowspan,
+        colspan
+      };
     },
 
-    getRowStyle(row, index) {
-      const rowStyle = this.rowStyle;
+    getRowStyle(row, rowIndex) {
+      const rowStyle = this.table.rowStyle;
       if (typeof rowStyle === 'function') {
-        return rowStyle.call(null, row, index);
+        return rowStyle.call(null, {
+          row,
+          rowIndex
+        });
       }
       return rowStyle;
     },
 
-    getRowClass(row, index) {
+    getRowClass(row, rowIndex) {
       const classes = ['el-table__row'];
+      if (this.table.highlightCurrentRow && row === this.store.states.currentRow) {
+        classes.push('current-row');
+      }
 
-      if (this.stripe && index % 2 === 1) {
+      if (this.stripe && rowIndex % 2 === 1) {
         classes.push('el-table__row--striped');
       }
-      const rowClassName = this.rowClassName;
+      const rowClassName = this.table.rowClassName;
       if (typeof rowClassName === 'string') {
         classes.push(rowClassName);
       } else if (typeof rowClassName === 'function') {
-        classes.push(rowClassName.call(null, row, index) || '');
+        classes.push(rowClassName.call(null, {
+          row,
+          rowIndex
+        }));
+      }
+
+      if (this.store.states.expandRows.indexOf(row) > -1) {
+        classes.push('expanded');
+      }
+
+      return classes.join(' ');
+    },
+
+    getCellStyle(rowIndex, columnIndex, row, column) {
+      const cellStyle = this.table.cellStyle;
+      if (typeof cellStyle === 'function') {
+        return cellStyle.call(null, {
+          rowIndex,
+          columnIndex,
+          row,
+          column
+        });
+      }
+      return cellStyle;
+    },
+
+    getCellClass(rowIndex, columnIndex, row, column) {
+      const classes = [column.id, column.align, column.className];
+
+      if (this.isColumnHidden(columnIndex)) {
+        classes.push('is-hidden');
+      }
+
+      const cellClassName = this.table.cellClassName;
+      if (typeof cellClassName === 'string') {
+        classes.push(cellClassName);
+      } else if (typeof cellClassName === 'function') {
+        classes.push(cellClassName.call(null, {
+          rowIndex,
+          columnIndex,
+          row,
+          column
+        }));
       }
 
       return classes.join(' ');
@@ -214,13 +314,23 @@ export default {
 
       // 判断是否text-overflow, 如果是就显示tooltip
       const cellChild = event.target.querySelector('.cell');
-
-      if (hasClass(cellChild, 'el-tooltip') && cellChild.scrollWidth > cellChild.offsetWidth) {
+      if (!hasClass(cellChild, 'el-tooltip')) {
+        return;
+      }
+      // use range width instead of scrollWidth to determine whether the text is overflowing
+      // to address a potential FireFox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1074543#c3
+      const range = document.createRange();
+      range.setStart(cellChild, 0);
+      range.setEnd(cellChild, cellChild.childNodes.length);
+      const rangeWidth = range.getBoundingClientRect().width;
+      const padding = (parseInt(getStyle(cellChild, 'paddingLeft'), 10) || 0) +
+        (parseInt(getStyle(cellChild, 'paddingRight'), 10) || 0);
+      if ((rangeWidth + padding > cellChild.offsetWidth || cellChild.scrollWidth > cellChild.offsetWidth) && this.$refs.tooltip) {
         const tooltip = this.$refs.tooltip;
-
-        this.tooltipContent = cell.innerText;
+        // TODO 会引起整个 Table 的重新渲染，需要优化
+        this.tooltipContent = cell.innerText || cell.textContent;
         tooltip.referenceElm = cell;
-        tooltip.$refs.popper.style.display = 'none';
+        tooltip.$refs.popper && (tooltip.$refs.popper.style.display = 'none');
         tooltip.doDestroy();
         tooltip.setExpectedState(true);
         this.activateTooltip(tooltip);
@@ -236,7 +346,7 @@ export default {
       const cell = getCell(event);
       if (!cell) return;
 
-      const oldHoverState = this.table.hoverState;
+      const oldHoverState = this.table.hoverState || {};
       this.table.$emit('cell-mouse-leave', oldHoverState.row, oldHoverState.column, oldHoverState.cell, event);
     },
 
@@ -274,8 +384,9 @@ export default {
       table.$emit(`row-${name}`, row, event, column);
     },
 
-    handleExpandClick(row) {
-      this.store.commit('toggleRowExpanded', row);
+    handleExpandClick(row, e) {
+      e.stopPropagation();
+      this.store.toggleRowExpansion(row);
     }
   }
 };
diff --git a/packages/table/src/table-column.js b/packages/table/src/table-column.js
index 804ce25619..0b1efb67d4 100644
--- a/packages/table/src/table-column.js
+++ b/packages/table/src/table-column.js
@@ -1,7 +1,7 @@
 import ElCheckbox from 'element-ui/packages/checkbox';
 import ElTag from 'element-ui/packages/tag';
 import objectAssign from 'element-ui/src/utils/merge';
-import { getValueByPath } from 'element-ui/src/utils/util';
+import { getPropByPath } from 'element-ui/src/utils/util';
 
 let columnIdSeed = 1;
 
@@ -32,13 +32,16 @@ const defaults = {
 
 const forced = {
   selection: {
-    renderHeader: function(h) {
+    renderHeader: function(h, { store }) {
       return <el-checkbox
+        disabled={ store.states.data && store.states.data.length === 0 }
+        indeterminate={ store.states.selection.length > 0 && !this.isAllSelected }
         nativeOn-click={ this.toggleAllSelection }
         value={ this.isAllSelected } />;
     },
     renderCell: function(h, { row, column, store, $index }) {
       return <el-checkbox
+        nativeOn-click={ (event) => event.stopPropagation() }
         value={ store.isSelected(row) }
         disabled={ column.selectable ? !column.selectable.call(null, row, $index) : false }
         on-input={ () => { store.commit('rowSelectedChanged', row); } } />;
@@ -50,19 +53,28 @@ const forced = {
     renderHeader: function(h, { column }) {
       return column.label || '#';
     },
-    renderCell: function(h, { $index }) {
-      return <div>{ $index + 1 }</div>;
+    renderCell: function(h, { $index, column }) {
+      let i = $index + 1;
+      const index = column.index;
+
+      if (typeof index === 'number') {
+        i = $index + index;
+      } else if (typeof index === 'function') {
+        i = index($index);
+      }
+
+      return <div>{ i }</div>;
     },
     sortable: false
   },
   expand: {
-    renderHeader: function(h, {}) {
-      return '';
+    renderHeader: function(h, { column }) {
+      return column.label || '';
     },
     renderCell: function(h, { row, store }, proxy) {
       const expanded = store.states.expandRows.indexOf(row) > -1;
       return <div class={ 'el-table__expand-icon ' + (expanded ? 'el-table__expand-icon--expanded' : '') }
-                  on-click={ () => proxy.handleExpandClick(row) }>
+        on-click={ e => proxy.handleExpandClick(row, e) }>
         <i class='el-icon el-icon-arrow-right'></i>
       </div>;
     },
@@ -90,22 +102,40 @@ const getDefaultColumn = function(type, options) {
     column.minWidth = 80;
   }
 
-  column.realWidth = column.width || column.minWidth;
+  column.realWidth = column.width === undefined ? column.minWidth : column.width;
 
   return column;
 };
 
-const DEFAULT_RENDER_CELL = function(h, { row, column }) {
+const DEFAULT_RENDER_CELL = function(h, { row, column, $index }) {
   const property = column.property;
-  const value = property && property.indexOf('.') === -1
-    ? row[property]
-    : getValueByPath(row, property);
+  const value = property && getPropByPath(row, property).v;
   if (column && column.formatter) {
-    return column.formatter(row, column, value);
+    return column.formatter(row, column, value, $index);
   }
   return value;
 };
 
+const parseWidth = (width) => {
+  if (width !== undefined) {
+    width = parseInt(width, 10);
+    if (isNaN(width)) {
+      width = null;
+    }
+  }
+  return width;
+};
+
+const parseMinWidth = (minWidth) => {
+  if (minWidth !== undefined) {
+    minWidth = parseInt(minWidth, 10);
+    if (isNaN(minWidth)) {
+      minWidth = 80;
+    }
+  }
+  return minWidth;
+};
+
 export default {
   name: 'ElTableColumn',
 
@@ -127,6 +157,7 @@ export default {
       default: false
     },
     sortMethod: Function,
+    sortBy: [String, Function, Array],
     resizable: {
       type: Boolean,
       default: true
@@ -148,6 +179,16 @@ export default {
     filterMultiple: {
       type: Boolean,
       default: true
+    },
+    index: [Number, Function],
+    sortOrders: {
+      type: Array,
+      default() {
+        return ['ascending', 'descending', null];
+      },
+      validator(val) {
+        return val.every(order => ['ascending', 'descending', null].indexOf(order) > -1);
+      }
     }
   },
 
@@ -176,35 +217,29 @@ export default {
         parent = parent.$parent;
       }
       return parent;
+    },
+    columnOrTableParent() {
+      let parent = this.$parent;
+      while (parent && !parent.tableId && !parent.columnId) {
+        parent = parent.$parent;
+      }
+      return parent;
     }
   },
 
   created() {
     this.customRender = this.$options.render;
     this.$options.render = h => h('div', this.$slots.default);
-    this.columnId = (this.$parent.tableId || (this.$parent.columnId + '_')) + 'column_' + columnIdSeed++;
 
-    let parent = this.$parent;
+    let parent = this.columnOrTableParent;
     let owner = this.owner;
     this.isSubColumn = owner !== parent;
+    this.columnId = (parent.tableId || parent.columnId) + '_column_' + columnIdSeed++;
 
     let type = this.type;
 
-    let width = this.width;
-    if (width !== undefined) {
-      width = parseInt(width, 10);
-      if (isNaN(width)) {
-        width = null;
-      }
-    }
-
-    let minWidth = this.minWidth;
-    if (minWidth !== undefined) {
-      minWidth = parseInt(minWidth, 10);
-      if (isNaN(minWidth)) {
-        minWidth = 80;
-      }
-    }
+    const width = parseWidth(this.width);
+    const minWidth = parseMinWidth(this.minWidth);
 
     let isColumnGroup = false;
 
@@ -226,6 +261,7 @@ export default {
       headerAlign: this.headerAlign ? 'is-' + this.headerAlign : (this.align ? 'is-' + this.align : null),
       sortable: this.sortable === '' ? true : this.sortable,
       sortMethod: this.sortMethod,
+      sortBy: this.sortBy,
       resizable: this.resizable,
       showOverflowTooltip: this.showOverflowTooltip || this.showTooltipWhenOverflow,
       formatter: this.formatter,
@@ -238,10 +274,30 @@ export default {
       filterMultiple: this.filterMultiple,
       filterOpened: false,
       filteredValue: this.filteredValue || [],
-      filterPlacement: this.filterPlacement || ''
+      filterPlacement: this.filterPlacement || '',
+      index: this.index,
+      sortOrders: this.sortOrders
+    });
+
+    let source = forced[type] || {};
+    Object.keys(source).forEach((prop) => {
+      let value = source[prop];
+      if (value !== undefined) {
+        if (prop === 'renderHeader') {
+          if (type === 'selection' && column[prop]) {
+            console.warn('[Element Warn][TableColumn]Selection column doesn\'t allow to set render-header function.');
+          } else {
+            value = column[prop] || value;
+          }
+        }
+        column[prop] = prop === 'className' ? `${column[prop]} ${value}` : value;
+      }
     });
 
-    objectAssign(column, forced[type] || {});
+    // Deprecation warning for renderHeader property
+    if (this.renderHeader) {
+      console.warn('[Element Warn][TableColumn]Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.');
+    }
 
     this.columnConfig = column;
 
@@ -263,23 +319,7 @@ export default {
     }
 
     column.renderCell = function(h, data) {
-      // 未来版本移除
-      if (_self.$vnode.data.inlineTemplate) {
-        renderCell = function() {
-          data._self = _self.context || data._self;
-          if (Object.prototype.toString.call(data._self) === '[object Object]') {
-            for (let prop in data._self) {
-              if (!data.hasOwnProperty(prop)) {
-                data[prop] = data._self[prop];
-              }
-            }
-          }
-          // 静态内容会缓存到 _staticTrees 内，不改的话获取的静态数据就不是内部 context
-          data._staticTrees = _self._staticTrees;
-          data.$options.staticRenderFns = _self.$options.staticRenderFns;
-          return _self.customRender.call(data);
-        };
-      } else if (_self.$scopedSlots.default) {
+      if (_self.$scopedSlots.default) {
         renderCell = () => _self.$scopedSlots.default(data);
       }
 
@@ -288,14 +328,15 @@ export default {
       }
 
       return _self.showOverflowTooltip || _self.showTooltipWhenOverflow
-        ? <div class="cell el-tooltip" style={'width:' + (data.column.realWidth || data.column.width) + 'px'}>{ renderCell(h, data) }</div>
+        ? <div class="cell el-tooltip" style={ {width: (data.column.realWidth || data.column.width) - 1 + 'px'} }>{ renderCell(h, data) }</div>
         : <div class="cell">{ renderCell(h, data) }</div>;
     };
   },
 
   destroyed() {
     if (!this.$parent) return;
-    this.owner.store.commit('removeColumn', this.columnConfig);
+    const parent = this.$parent;
+    this.owner.store.commit('removeColumn', this.columnConfig, this.isSubColumn ? parent.columnConfig : null);
   },
 
   watch: {
@@ -347,14 +388,14 @@ export default {
 
     width(newVal) {
       if (this.columnConfig) {
-        this.columnConfig.width = newVal;
+        this.columnConfig.width = parseWidth(newVal);
         this.owner.store.scheduleLayout();
       }
     },
 
     minWidth(newVal) {
       if (this.columnConfig) {
-        this.columnConfig.minWidth = newVal;
+        this.columnConfig.minWidth = parseMinWidth(newVal);
         this.owner.store.scheduleLayout();
       }
     },
@@ -362,7 +403,7 @@ export default {
     fixed(newVal) {
       if (this.columnConfig) {
         this.columnConfig.fixed = newVal;
-        this.owner.store.scheduleLayout();
+        this.owner.store.scheduleLayout(true);
       }
     },
 
@@ -370,12 +411,36 @@ export default {
       if (this.columnConfig) {
         this.columnConfig.sortable = newVal;
       }
+    },
+
+    index(newVal) {
+      if (this.columnConfig) {
+        this.columnConfig.index = newVal;
+      }
+    },
+
+    formatter(newVal) {
+      if (this.columnConfig) {
+        this.columnConfig.formatter = newVal;
+      }
+    },
+
+    className(newVal) {
+      if (this.columnConfig) {
+        this.columnConfig.className = newVal;
+      }
+    },
+
+    labelClassName(newVal) {
+      if (this.columnConfig) {
+        this.columnConfig.labelClassName = newVal;
+      }
     }
   },
 
   mounted() {
     const owner = this.owner;
-    const parent = this.$parent;
+    const parent = this.columnOrTableParent;
     let columnIndex;
 
     if (!this.isSubColumn) {
@@ -384,6 +449,14 @@ export default {
       columnIndex = [].indexOf.call(parent.$el.children, this.$el);
     }
 
+    if (this.$scopedSlots.header) {
+      if (this.type === 'selection') {
+        console.warn('[Element Warn][TableColumn]Selection column doesn\'t allow to set scoped-slot header.');
+      } else {
+        this.columnConfig.renderHeader = this.$scopedSlots.header;
+      }
+    }
+
     owner.store.commit('insertColumn', this.columnConfig, columnIndex, this.isSubColumn ? parent.columnConfig : null);
   }
 };
diff --git a/packages/table/src/table-footer.js b/packages/table/src/table-footer.js
index b76ab17a88..5774d86866 100644
--- a/packages/table/src/table-footer.js
+++ b/packages/table/src/table-footer.js
@@ -1,37 +1,45 @@
+import LayoutObserver from './layout-observer';
+
 export default {
   name: 'ElTableFooter',
 
+  mixins: [LayoutObserver],
+
   render(h) {
-    const sums = [];
-    this.columns.forEach((column, index) => {
-      if (index === 0) {
-        sums[index] = this.sumText;
-        return;
-      }
-      const values = this.store.states.data.map(item => Number(item[column.property]));
-      const precisions = [];
-      let notNumber = true;
-      values.forEach(value => {
-        if (!isNaN(value)) {
-          notNumber = false;
-          let decimal = ('' + value).split('.')[1];
-          precisions.push(decimal ? decimal.length : 0);
+    let sums = [];
+    if (this.summaryMethod) {
+      sums = this.summaryMethod({ columns: this.columns, data: this.store.states.data });
+    } else {
+      this.columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = this.sumText;
+          return;
         }
-      });
-      const precision = Math.max.apply(null, precisions);
-      if (!notNumber) {
-        sums[index] = values.reduce((prev, curr) => {
-          const value = Number(curr);
+        const values = this.store.states.data.map(item => Number(item[column.property]));
+        const precisions = [];
+        let notNumber = true;
+        values.forEach(value => {
           if (!isNaN(value)) {
-            return parseFloat((prev + curr).toFixed(precision));
-          } else {
-            return prev;
+            notNumber = false;
+            let decimal = ('' + value).split('.')[1];
+            precisions.push(decimal ? decimal.length : 0);
           }
-        }, 0);
-      } else {
-        sums[index] = '';
-      }
-    });
+        });
+        const precision = Math.max.apply(null, precisions);
+        if (!notNumber) {
+          sums[index] = values.reduce((prev, curr) => {
+            const value = Number(curr);
+            if (!isNaN(value)) {
+              return parseFloat((prev + curr).toFixed(Math.min(precision, 20)));
+            } else {
+              return prev;
+            }
+          }, 0);
+        } else {
+          sums[index] = '';
+        }
+      });
+    }
 
     return (
       <table
@@ -41,39 +49,31 @@ export default {
         border="0">
         <colgroup>
           {
-            this._l(this.columns, column =>
-              <col
-                name={ column.id }
-                width={ column.realWidth || column.width }
-              />)
+            this._l(this.columns, column => <col name={ column.id } />)
           }
           {
-            !this.fixed && this.layout.gutterWidth
-              ? <col name="gutter" width={ this.layout.scrollY ? this.layout.gutterWidth : '' }></col>
-              : ''
+            this.hasGutter ? <col name="gutter" /> : ''
           }
         </colgroup>
-        <tbody>
+        <tbody class={ [{ 'has-gutter': this.hasGutter }] }>
           <tr>
-          {
-            this._l(this.columns, (column, cellIndex) =>
-              <td
-                colspan={ column.colSpan }
-                rowspan={ column.rowSpan }
-                class={ [column.id, column.headerAlign, column.className || '', this.isCellHidden(cellIndex, this.columns) ? 'is-hidden' : '', !column.children ? 'is-leaf' : '', column.labelClassName] }>
-                <div class={ ['cell', column.labelClassName] }>
-                {
-                  this.summaryMethod ? this.summaryMethod({ columns: this.columns, data: this.store.states.data })[cellIndex] : sums[cellIndex]
-                }
-                </div>
-              </td>
-            )
-          }
-          {
-            !this.fixed && this.layout.gutterWidth
-              ? <td class="gutter" style={{ width: this.layout.scrollY ? this.layout.gutterWidth + 'px' : '0' }}></td>
-              : ''
-          }
+            {
+              this._l(this.columns, (column, cellIndex) =>
+                <td
+                  colspan={ column.colSpan }
+                  rowspan={ column.rowSpan }
+                  class={ [column.id, column.headerAlign, column.className || '', this.isCellHidden(cellIndex, this.columns) ? 'is-hidden' : '', !column.children ? 'is-leaf' : '', column.labelClassName] }>
+                  <div class={ ['cell', column.labelClassName] }>
+                    {
+                      sums[cellIndex]
+                    }
+                  </div>
+                </td>
+              )
+            }
+            {
+              this.hasGutter ? <th class="gutter"></th> : ''
+            }
           </tr>
         </tbody>
       </table>
@@ -85,9 +85,6 @@ export default {
     store: {
       required: true
     },
-    layout: {
-      required: true
-    },
     summaryMethod: Function,
     sumText: String,
     border: Boolean,
@@ -103,6 +100,10 @@ export default {
   },
 
   computed: {
+    table() {
+      return this.$parent;
+    },
+
     isAllSelected() {
       return this.store.states.isAllSelected;
     },
@@ -121,6 +122,10 @@ export default {
 
     columns() {
       return this.store.states.columns;
+    },
+
+    hasGutter() {
+      return !this.fixed && this.tableLayout.gutterWidth;
     }
   },
 
diff --git a/packages/table/src/table-header.js b/packages/table/src/table-header.js
index f6247952ec..4d007036b6 100644
--- a/packages/table/src/table-header.js
+++ b/packages/table/src/table-header.js
@@ -3,6 +3,7 @@ import ElCheckbox from 'element-ui/packages/checkbox';
 import ElTag from 'element-ui/packages/tag';
 import Vue from 'vue';
 import FilterPanel from './filter-panel.vue';
+import LayoutObserver from './layout-observer';
 
 const getAllColumns = (columns) => {
   const result = [];
@@ -65,10 +66,14 @@ const convertToRows = (originColumns) => {
 export default {
   name: 'ElTableHeader',
 
+  mixins: [LayoutObserver],
+
   render(h) {
     const originColumns = this.store.states.originColumns;
     const columnRows = convertToRows(originColumns, this.columns);
-
+    // 是否拥有多级表头
+    const isGroup = columnRows.length > 1;
+    if (isGroup) this.$parent.isGroup = true;
     return (
       <table
         class="el-table__header"
@@ -77,60 +82,60 @@ export default {
         border="0">
         <colgroup>
           {
-            this._l(this.columns, column =>
-              <col
-                name={ column.id }
-                width={ column.realWidth || column.width }
-              />)
+            this._l(this.columns, column => <col name={ column.id } />)
           }
           {
-            !this.fixed && this.layout.gutterWidth
-              ? <col name="gutter" width={ this.layout.scrollY ? this.layout.gutterWidth : '' }></col>
-              : ''
+            this.hasGutter ? <col name="gutter" /> : ''
           }
         </colgroup>
-        <thead>
+        <thead class={ [{ 'is-group': isGroup, 'has-gutter': this.hasGutter }] }>
           {
             this._l(columnRows, (columns, rowIndex) =>
-              <tr>
-              {
-                this._l(columns, (column, cellIndex) =>
-                  <th
-                    colspan={ column.colSpan }
-                    rowspan={ column.rowSpan }
-                    on-mousemove={ ($event) => this.handleMouseMove($event, column) }
-                    on-mouseout={ this.handleMouseOut }
-                    on-mousedown={ ($event) => this.handleMouseDown($event, column) }
-                    on-click={ ($event) => this.handleHeaderClick($event, column) }
-                    class={ [column.id, column.order, column.headerAlign, column.className || '', rowIndex === 0 && this.isCellHidden(cellIndex, columns) ? 'is-hidden' : '', !column.children ? 'is-leaf' : '', column.labelClassName] }>
-                    <div class={ ['cell', column.filteredValue && column.filteredValue.length > 0 ? 'highlight' : '', column.labelClassName] }>
-                    {
-                      column.renderHeader
-                        ? column.renderHeader.call(this._renderProxy, h, { column, $index: cellIndex, store: this.store, _self: this.$parent.$vnode.context })
-                        : column.label
-                    }
-                    {
-                      column.sortable
-                        ? <span class="caret-wrapper" on-click={ ($event) => this.handleSortClick($event, column) }>
-                            <i class="sort-caret ascending" on-click={ ($event) => this.handleSortClick($event, column, 'ascending') }></i>
-                            <i class="sort-caret descending" on-click={ ($event) => this.handleSortClick($event, column, 'descending') }></i>
-                          </span>
-                        : ''
-                    }
-                    {
-                      column.filterable
-                         ? <span class="el-table__column-filter-trigger" on-click={ ($event) => this.handleFilterClick($event, column) }><i class={ ['el-icon-arrow-down', column.filterOpened ? 'el-icon-arrow-up' : ''] }></i></span>
-                        : ''
-                    }
-                    </div>
-                  </th>
-                )
-              }
-              {
-                !this.fixed && this.layout.gutterWidth
-                  ? <th class="gutter" style={{ width: this.layout.scrollY ? this.layout.gutterWidth + 'px' : '0' }}></th>
-                  : ''
-              }
+              <tr
+                style={ this.getHeaderRowStyle(rowIndex) }
+                class={ this.getHeaderRowClass(rowIndex) }
+              >
+                {
+                  this._l(columns, (column, cellIndex) =>
+                    <th
+                      colspan={ column.colSpan }
+                      rowspan={ column.rowSpan }
+                      on-mousemove={ ($event) => this.handleMouseMove($event, column) }
+                      on-mouseout={ this.handleMouseOut }
+                      on-mousedown={ ($event) => this.handleMouseDown($event, column) }
+                      on-click={ ($event) => this.handleHeaderClick($event, column) }
+                      on-contextmenu={ ($event) => this.handleHeaderContextMenu($event, column) }
+                      style={ this.getHeaderCellStyle(rowIndex, cellIndex, columns, column) }
+                      class={ this.getHeaderCellClass(rowIndex, cellIndex, columns, column) }
+                      key={ column.id }>
+                      <div class={ ['cell', column.filteredValue && column.filteredValue.length > 0 ? 'highlight' : '', column.labelClassName] }>
+                        {
+                          column.renderHeader
+                            ? column.renderHeader.call(this._renderProxy, h, { column, $index: cellIndex, store: this.store, _self: this.$parent.$vnode.context })
+                            : column.label
+                        }
+                        {
+                          column.sortable
+                            ? <span class="caret-wrapper" on-click={ ($event) => this.handleSortClick($event, column) }>
+                              <i class="sort-caret ascending" on-click={ ($event) => this.handleSortClick($event, column, 'ascending') }>
+                              </i>
+                              <i class="sort-caret descending" on-click={ ($event) => this.handleSortClick($event, column, 'descending') }>
+                              </i>
+                            </span>
+                            : ''
+                        }
+                        {
+                          column.filterable
+                            ? <span class="el-table__column-filter-trigger" on-click={ ($event) => this.handleFilterClick($event, column) }><i class={ ['el-icon-arrow-down', column.filterOpened ? 'el-icon-arrow-up' : ''] }></i></span>
+                            : ''
+                        }
+                      </div>
+                    </th>
+                  )
+                }
+                {
+                  this.hasGutter ? <th class="gutter"></th> : ''
+                }
               </tr>
             )
           }
@@ -144,9 +149,6 @@ export default {
     store: {
       required: true
     },
-    layout: {
-      required: true
-    },
     border: Boolean,
     defaultSort: {
       type: Object,
@@ -165,6 +167,10 @@ export default {
   },
 
   computed: {
+    table() {
+      return this.$parent;
+    },
+
     isAllSelected() {
       return this.store.states.isAllSelected;
     },
@@ -181,8 +187,20 @@ export default {
       return this.store.states.rightFixedColumns.length;
     },
 
+    leftFixedLeafCount() {
+      return this.store.states.fixedLeafColumnsLength;
+    },
+
+    rightFixedLeafCount() {
+      return this.store.states.rightFixedLeafColumnsLength;
+    },
+
     columns() {
       return this.store.states.columns;
+    },
+
+    hasGutter() {
+      return !this.fixed && this.tableLayout.gutterWidth;
     }
   },
 
@@ -191,25 +209,8 @@ export default {
   },
 
   mounted() {
-    if (this.defaultSort.prop) {
-      const states = this.store.states;
-      states.sortProp = this.defaultSort.prop;
-      states.sortOrder = this.defaultSort.order || 'ascending';
-      this.$nextTick(_ => {
-        for (let i = 0, length = this.columns.length; i < length; i++) {
-          let column = this.columns[i];
-          if (column.property === states.sortProp) {
-            column.order = states.sortOrder;
-            states.sortingColumn = column;
-            break;
-          }
-        }
-
-        if (states.sortingColumn) {
-          this.store.commit('changeSortCondition');
-        }
-      });
-    }
+    const { prop, order } = this.defaultSort;
+    this.store.commit('sort', { prop, order });
   },
 
   beforeDestroy() {
@@ -223,17 +224,82 @@ export default {
 
   methods: {
     isCellHidden(index, columns) {
+      let start = 0;
+      for (let i = 0; i < index; i++) {
+        start += columns[i].colSpan;
+      }
+      const after = start + columns[index].colSpan - 1;
       if (this.fixed === true || this.fixed === 'left') {
-        return index >= this.leftFixedCount;
+        return after >= this.leftFixedLeafCount;
       } else if (this.fixed === 'right') {
-        let before = 0;
-        for (let i = 0; i < index; i++) {
-          before += columns[i].colSpan;
-        }
-        return before < this.columnsCount - this.rightFixedCount;
+        return start < this.columnsCount - this.rightFixedLeafCount;
       } else {
-        return (index < this.leftFixedCount) || (index >= this.columnsCount - this.rightFixedCount);
+        return (after < this.leftFixedLeafCount) || (start >= this.columnsCount - this.rightFixedLeafCount);
+      }
+    },
+
+    getHeaderRowStyle(rowIndex) {
+      const headerRowStyle = this.table.headerRowStyle;
+      if (typeof headerRowStyle === 'function') {
+        return headerRowStyle.call(null, { rowIndex });
       }
+      return headerRowStyle;
+    },
+
+    getHeaderRowClass(rowIndex) {
+      const classes = [];
+
+      const headerRowClassName = this.table.headerRowClassName;
+      if (typeof headerRowClassName === 'string') {
+        classes.push(headerRowClassName);
+      } else if (typeof headerRowClassName === 'function') {
+        classes.push(headerRowClassName.call(null, { rowIndex }));
+      }
+
+      return classes.join(' ');
+    },
+
+    getHeaderCellStyle(rowIndex, columnIndex, row, column) {
+      const headerCellStyle = this.table.headerCellStyle;
+      if (typeof headerCellStyle === 'function') {
+        return headerCellStyle.call(null, {
+          rowIndex,
+          columnIndex,
+          row,
+          column
+        });
+      }
+      return headerCellStyle;
+    },
+
+    getHeaderCellClass(rowIndex, columnIndex, row, column) {
+      const classes = [column.id, column.order, column.headerAlign, column.className, column.labelClassName];
+
+      if (rowIndex === 0 && this.isCellHidden(columnIndex, row)) {
+        classes.push('is-hidden');
+      }
+
+      if (!column.children) {
+        classes.push('is-leaf');
+      }
+
+      if (column.sortable) {
+        classes.push('is-sortable');
+      }
+
+      const headerCellClassName = this.table.headerCellClassName;
+      if (typeof headerCellClassName === 'string') {
+        classes.push(headerCellClassName);
+      } else if (typeof headerCellClassName === 'function') {
+        classes.push(headerCellClassName.call(null, {
+          rowIndex,
+          columnIndex,
+          row,
+          column
+        }));
+      }
+
+      return classes.join(' ');
     },
 
     toggleAllSelection() {
@@ -243,7 +309,8 @@ export default {
     handleFilterClick(event, column) {
       event.stopPropagation();
       const target = event.target;
-      const cell = target.parentNode;
+      let cell = target.tagName === 'TH' ? target : target.parentNode;
+      cell = cell.querySelector('.el-table__column-filter-trigger') || cell;
       const table = this.$parent;
 
       let filterPanel = this.filterPanels[column.id];
@@ -273,13 +340,17 @@ export default {
     handleHeaderClick(event, column) {
       if (!column.filters && column.sortable) {
         this.handleSortClick(event, column);
-      } else if (column.filters && !column.sortable) {
+      } else if (column.filterable && !column.sortable) {
         this.handleFilterClick(event, column);
       }
 
       this.$parent.$emit('header-click', column, event);
     },
 
+    handleHeaderContextMenu(event, column) {
+      this.$parent.$emit('header-contextmenu', column, event);
+    },
+
     handleMouseDown(event, column) {
       if (this.$isServer) return;
       if (column.children && column.children.length > 0) return;
@@ -369,9 +440,15 @@ export default {
         const bodyStyle = document.body.style;
         if (rect.width > 12 && rect.right - event.pageX < 8) {
           bodyStyle.cursor = 'col-resize';
+          if (hasClass(target, 'is-sortable')) {
+            target.style.cursor = 'col-resize';
+          }
           this.draggingColumn = column;
         } else if (!this.dragging) {
           bodyStyle.cursor = '';
+          if (hasClass(target, 'is-sortable')) {
+            target.style.cursor = 'pointer';
+          }
           this.draggingColumn = null;
         }
       }
@@ -382,13 +459,15 @@ export default {
       document.body.style.cursor = '';
     },
 
-    toggleOrder(order) {
-      return !order ? 'ascending' : order === 'ascending' ? 'descending' : null;
+    toggleOrder({ order, sortOrders }) {
+      if (order === '') return sortOrders[0];
+      const index = sortOrders.indexOf(order || null);
+      return sortOrders[index > sortOrders.length - 2 ? 0 : index + 1];
     },
 
     handleSortClick(event, column, givenOrder) {
       event.stopPropagation();
-      let order = givenOrder || this.toggleOrder(column.order);
+      let order = givenOrder || this.toggleOrder(column);
 
       let target = event.target;
       while (target && target.tagName !== 'TH') {
@@ -409,7 +488,7 @@ export default {
       let sortOrder;
       const sortingColumn = states.sortingColumn;
 
-      if (sortingColumn !== column) {
+      if (sortingColumn !== column || (sortingColumn === column && sortingColumn.order === null)) {
         if (sortingColumn) {
           sortingColumn.order = null;
         }
diff --git a/packages/table/src/table-layout.js b/packages/table/src/table-layout.js
index 48664630fb..a7a14a1c6c 100644
--- a/packages/table/src/table-layout.js
+++ b/packages/table/src/table-layout.js
@@ -1,7 +1,9 @@
 import scrollbarWidth from 'element-ui/src/utils/scrollbar-width';
+import Vue from 'vue';
 
 class TableLayout {
   constructor(options) {
+    this.observers = [];
     this.table = null;
     this.store = null;
     this.columns = null;
@@ -16,6 +18,7 @@ class TableLayout {
     this.rightFixedWidth = null;
     this.tableHeight = null;
     this.headerHeight = 44; // Table Header Height
+    this.appendHeight = 0; // Append Slot Height
     this.footerHeight = 44; // Table Footer Height
     this.viewportHeight = null; // Table Height - Scroll Bar Height
     this.bodyHeight = null; // Table Height - Table Header Height
@@ -42,28 +45,27 @@ class TableLayout {
     const bodyWrapper = this.table.bodyWrapper;
     if (this.table.$el && bodyWrapper) {
       const body = bodyWrapper.querySelector('.el-table__body');
-      this.scrollY = body.offsetHeight > bodyWrapper.offsetHeight;
+      this.scrollY = body.offsetHeight > this.bodyHeight;
     }
   }
 
   setHeight(value, prop = 'height') {
+    if (Vue.prototype.$isServer) return;
     const el = this.table.$el;
     if (typeof value === 'string' && /^\d+$/.test(value)) {
       value = Number(value);
     }
-
     this.height = value;
 
-    if (!el) return;
+    if (!el && (value || value === 0)) return Vue.nextTick(() => this.setHeight(value, prop));
+
     if (typeof value === 'number') {
       el.style[prop] = value + 'px';
 
-      this.updateHeight();
+      this.updateElsHeight();
     } else if (typeof value === 'string') {
-      if (value === '') {
-        el.style[prop] = '';
-      }
-      this.updateHeight();
+      el.style[prop] = value;
+      this.updateElsHeight();
     }
   }
 
@@ -71,36 +73,33 @@ class TableLayout {
     return this.setHeight(value, 'max-height');
   }
 
-  updateHeight() {
-    const height = this.tableHeight = this.table.$el.clientHeight;
-    const noData = !this.table.data || this.table.data.length === 0;
-    const { headerWrapper, footerWrapper } = this.table.$refs;
-    const footerHeight = this.footerHeight = footerWrapper ? footerWrapper.offsetHeight : 0;
+  updateElsHeight() {
+    if (!this.table.$ready) return Vue.nextTick(() => this.updateElsHeight());
+    const { headerWrapper, appendWrapper, footerWrapper } = this.table.$refs;
+    this.appendHeight = appendWrapper ? appendWrapper.offsetHeight : 0;
+
     if (this.showHeader && !headerWrapper) return;
-    if (!this.showHeader) {
-      this.headerHeight = 0;
-      if (this.height !== null && (!isNaN(this.height) || typeof this.height === 'string')) {
-        this.bodyHeight = height - footerHeight + (footerWrapper ? 1 : 0);
-      }
-      this.fixedBodyHeight = this.scrollX ? height - this.gutterWidth : height;
-    } else {
-      const headerHeight = this.headerHeight = headerWrapper.offsetHeight;
-      const bodyHeight = height - headerHeight - footerHeight + (footerWrapper ? 1 : 0);
-      if (this.height !== null && (!isNaN(this.height) || typeof this.height === 'string')) {
-        this.bodyHeight = bodyHeight;
-      }
-      this.fixedBodyHeight = this.scrollX ? bodyHeight - this.gutterWidth : bodyHeight;
+    const headerHeight = this.headerHeight = !this.showHeader ? 0 : headerWrapper.offsetHeight;
+    if (this.showHeader && headerWrapper.offsetWidth > 0 && (this.table.columns || []).length > 0 && headerHeight < 2) {
+      return Vue.nextTick(() => this.updateElsHeight());
     }
-    this.viewportHeight = this.scrollX ? height - (noData ? 0 : this.gutterWidth) : height;
-  }
+    const tableHeight = this.tableHeight = this.table.$el.clientHeight;
+    if (this.height !== null && (!isNaN(this.height) || typeof this.height === 'string')) {
+      const footerHeight = this.footerHeight = footerWrapper ? footerWrapper.offsetHeight : 0;
+      this.bodyHeight = tableHeight - headerHeight - footerHeight + (footerWrapper ? 1 : 0);
+    }
+    this.fixedBodyHeight = this.scrollX ? this.bodyHeight - this.gutterWidth : this.bodyHeight;
 
-  update() {
-    const fit = this.fit;
-    const columns = this.table.columns;
-    const bodyWidth = this.table.$el.clientWidth;
-    let bodyMinWidth = 0;
+    const noData = !this.table.data || this.table.data.length === 0;
+    this.viewportHeight = this.scrollX ? tableHeight - (noData ? 0 : this.gutterWidth) : tableHeight;
 
+    this.updateScrollY();
+    this.notifyObservers('scrollable');
+  }
+
+  getFlattenColumns() {
     const flattenColumns = [];
+    const columns = this.table.columns;
     columns.forEach((column) => {
       if (column.isColumnGroup) {
         flattenColumns.push.apply(flattenColumns, column.columns);
@@ -109,17 +108,33 @@ class TableLayout {
       }
     });
 
+    return flattenColumns;
+  }
+
+  updateColumnsWidth() {
+    if (Vue.prototype.$isServer) return;
+    const fit = this.fit;
+    const bodyWidth = this.table.$el.clientWidth;
+    let bodyMinWidth = 0;
+
+    const flattenColumns = this.getFlattenColumns();
     let flexColumns = flattenColumns.filter((column) => typeof column.width !== 'number');
 
+    flattenColumns.forEach((column) => { // Clean those columns whose width changed from flex to unflex
+      if (typeof column.width === 'number' && column.realWidth) column.realWidth = null;
+    });
+
     if (flexColumns.length > 0 && fit) {
       flattenColumns.forEach((column) => {
         bodyMinWidth += column.width || column.minWidth || 80;
       });
 
-      if (bodyMinWidth < bodyWidth - this.gutterWidth) { // DON'T HAVE SCROLL BAR
+      const scrollYWidth = this.scrollY ? this.gutterWidth : 0;
+
+      if (bodyMinWidth <= bodyWidth - scrollYWidth) { // DON'T HAVE SCROLL BAR
         this.scrollX = false;
 
-        const totalFlexWidth = bodyWidth - this.gutterWidth - bodyMinWidth;
+        const totalFlexWidth = bodyWidth - scrollYWidth - bodyMinWidth;
 
         if (flexColumns.length === 1) {
           flexColumns[0].realWidth = (flexColumns[0].minWidth || 80) + totalFlexWidth;
@@ -145,6 +160,7 @@ class TableLayout {
       }
 
       this.bodyWidth = Math.max(bodyMinWidth, bodyWidth);
+      this.table.resizeState.width = this.bodyWidth;
     } else {
       flattenColumns.forEach((column) => {
         if (!column.width && !column.minWidth) {
@@ -165,7 +181,7 @@ class TableLayout {
     if (fixedColumns.length > 0) {
       let fixedWidth = 0;
       fixedColumns.forEach(function(column) {
-        fixedWidth += column.realWidth;
+        fixedWidth += column.realWidth || column.width;
       });
 
       this.fixedWidth = fixedWidth;
@@ -175,11 +191,40 @@ class TableLayout {
     if (rightFixedColumns.length > 0) {
       let rightFixedWidth = 0;
       rightFixedColumns.forEach(function(column) {
-        rightFixedWidth += column.realWidth;
+        rightFixedWidth += column.realWidth || column.width;
       });
 
       this.rightFixedWidth = rightFixedWidth;
     }
+
+    this.notifyObservers('columns');
+  }
+
+  addObserver(observer) {
+    this.observers.push(observer);
+  }
+
+  removeObserver(observer) {
+    const index = this.observers.indexOf(observer);
+    if (index !== -1) {
+      this.observers.splice(index, 1);
+    }
+  }
+
+  notifyObservers(event) {
+    const observers = this.observers;
+    observers.forEach((observer) => {
+      switch (event) {
+        case 'columns':
+          observer.onColumnsChange(this);
+          break;
+        case 'scrollable':
+          observer.onScrollableChange(this);
+          break;
+        default:
+          throw new Error(`Table Layout don't have event ${event}.`);
+      }
+    });
   }
 }
 
diff --git a/packages/table/src/table-store.js b/packages/table/src/table-store.js
index 697abdb26e..074e7674f0 100644
--- a/packages/table/src/table-store.js
+++ b/packages/table/src/table-store.js
@@ -1,5 +1,7 @@
 import Vue from 'vue';
 import debounce from 'throttle-debounce/debounce';
+import merge from 'element-ui/src/utils/merge';
+import { hasClass, addClass, removeClass } from 'element-ui/src/utils/dom';
 import { orderBy, getColumnById, getRowIdentity } from './util';
 
 const sortData = (data, states) => {
@@ -7,7 +9,7 @@ const sortData = (data, states) => {
   if (!sortingColumn || typeof sortingColumn.sortable === 'string') {
     return data;
   }
-  return orderBy(data, states.sortProp, states.sortOrder, sortingColumn.sortMethod);
+  return orderBy(data, states.sortProp, states.sortOrder, sortingColumn.sortMethod, sortingColumn.sortBy);
 };
 
 const getKeysMap = function(array, rowKey) {
@@ -43,6 +45,36 @@ const toggleRowSelection = function(states, row, selected) {
   return changed;
 };
 
+const toggleRowExpansion = function(states, row, expanded) {
+  let changed = false;
+  const expandRows = states.expandRows;
+  if (typeof expanded !== 'undefined') {
+    const index = expandRows.indexOf(row);
+    if (expanded) {
+      if (index === -1) {
+        expandRows.push(row);
+        changed = true;
+      }
+    } else {
+      if (index !== -1) {
+        expandRows.splice(index, 1);
+        changed = true;
+      }
+    }
+  } else {
+    const index = expandRows.indexOf(row);
+    if (index === -1) {
+      expandRows.push(row);
+      changed = true;
+    } else {
+      expandRows.splice(index, 1);
+      changed = true;
+    }
+  }
+
+  return changed;
+};
+
 const TableStore = function(table, initialState = {}) {
   if (!table) {
     throw new Error('Table is required.');
@@ -56,8 +88,13 @@ const TableStore = function(table, initialState = {}) {
     columns: [],
     fixedColumns: [],
     rightFixedColumns: [],
+    leafColumns: [],
+    fixedLeafColumns: [],
+    rightFixedLeafColumns: [],
+    leafColumnsLength: 0,
+    fixedLeafColumnsLength: 0,
+    rightFixedLeafColumnsLength: 0,
     isComplex: false,
-    _data: null,
     filteredData: null,
     data: null,
     sortingColumn: null,
@@ -71,7 +108,8 @@ const TableStore = function(table, initialState = {}) {
     hoverRow: null,
     filters: {},
     expandRows: [],
-    defaultExpandAll: false
+    defaultExpandAll: false,
+    selectOnIndeterminate: false
   };
 
   for (let prop in initialState) {
@@ -85,19 +123,25 @@ TableStore.prototype.mutations = {
   setData(states, data) {
     const dataInstanceChanged = states._data !== data;
     states._data = data;
-    states.data = sortData((data || []), states);
 
-    // states.data.forEach((item) => {
-    //   if (!item.$extra) {
-    //     Object.defineProperty(item, '$extra', {
-    //       value: {},
-    //       enumerable: false
-    //     });
-    //   }
-    // });
+    Object.keys(states.filters).forEach((columnId) => {
+      const values = states.filters[columnId];
+      if (!values || values.length === 0) return;
+      const column = getColumnById(this.states, columnId);
+      if (column && column.filterMethod) {
+        data = data.filter((row) => {
+          return values.some(value => column.filterMethod.call(null, value, row, column));
+        });
+      }
+    });
+
+    states.filteredData = data;
+    states.data = sortData((data || []), states);
 
     this.updateCurrentRow();
 
+    const rowKey = states.rowKey;
+
     if (!states.reserveSelection) {
       if (dataInstanceChanged) {
         this.clearSelection();
@@ -106,7 +150,6 @@ TableStore.prototype.mutations = {
       }
       this.updateAllSelected();
     } else {
-      const rowKey = states.rowKey;
       if (rowKey) {
         const selection = states.selection;
         const selectedMap = getKeysMap(selection, rowKey);
@@ -128,23 +171,72 @@ TableStore.prototype.mutations = {
     const defaultExpandAll = states.defaultExpandAll;
     if (defaultExpandAll) {
       this.states.expandRows = (states.data || []).slice(0);
+    } else if (rowKey) {
+      // update expandRows to new rows according to rowKey
+      const ids = getKeysMap(this.states.expandRows, rowKey);
+      let expandRows = [];
+      for (const row of states.data) {
+        const rowId = getRowIdentity(row, rowKey);
+        if (ids[rowId]) {
+          expandRows.push(row);
+        }
+      }
+      this.states.expandRows = expandRows;
+    } else {
+      // clear the old rows
+      this.states.expandRows = [];
     }
 
     Vue.nextTick(() => this.table.updateScrollY());
   },
 
-  changeSortCondition(states) {
+  changeSortCondition(states, options) {
     states.data = sortData((states.filteredData || states._data || []), states);
 
-    this.table.$emit('sort-change', {
-      column: this.states.sortingColumn,
-      prop: this.states.sortProp,
-      order: this.states.sortOrder
-    });
+    const { $el, highlightCurrentRow } = this.table;
+    if ($el && highlightCurrentRow) {
+      const data = states.data;
+      const tr = $el.querySelector('tbody').children;
+      const rows = [].filter.call(tr, row => hasClass(row, 'el-table__row'));
+      const row = rows[data.indexOf(states.currentRow)];
+
+      [].forEach.call(rows, row => removeClass(row, 'current-row'));
+      addClass(row, 'current-row');
+    }
+
+    if (!options || !options.silent) {
+      this.table.$emit('sort-change', {
+        column: this.states.sortingColumn,
+        prop: this.states.sortProp,
+        order: this.states.sortOrder
+      });
+    }
 
     Vue.nextTick(() => this.table.updateScrollY());
   },
 
+  sort(states, options) {
+    const { prop, order } = options;
+    if (prop) {
+      states.sortProp = prop;
+      states.sortOrder = order || 'ascending';
+      Vue.nextTick(() => {
+        for (let i = 0, length = states.columns.length; i < length; i++) {
+          let column = states.columns[i];
+          if (column.property === states.sortProp) {
+            column.order = states.sortOrder;
+            states.sortingColumn = column;
+            break;
+          }
+        }
+
+        if (states.sortingColumn) {
+          this.commit('changeSortCondition');
+        }
+      });
+    }
+  },
+
   filterChange(states, options) {
     let { column, values, silent } = options;
     if (values && !Array.isArray(values)) {
@@ -167,7 +259,7 @@ TableStore.prototype.mutations = {
       const column = getColumnById(this.states, columnId);
       if (column && column.filterMethod) {
         data = data.filter((row) => {
-          return values.some(value => column.filterMethod.call(null, value, row));
+          return values.some(value => column.filterMethod.call(null, value, row, column));
         });
       }
     });
@@ -200,18 +292,26 @@ TableStore.prototype.mutations = {
       states.reserveSelection = column.reserveSelection;
     }
 
-    this.updateColumns();  // hack for dynamics insert column
-    this.scheduleLayout();
+    if (this.table.$ready) {
+      this.updateColumns(); // hack for dynamics insert column
+      this.scheduleLayout();
+    }
   },
 
-  removeColumn(states, column) {
-    let _columns = states._columns;
-    if (_columns) {
-      _columns.splice(_columns.indexOf(column), 1);
+  removeColumn(states, column, parent) {
+    let array = states._columns;
+    if (parent) {
+      array = parent.children;
+      if (!array) array = parent.children = [];
+    }
+    if (array) {
+      array.splice(array.indexOf(column), 1);
     }
 
-    this.updateColumns();  // hack for dynamics remove column
-    this.scheduleLayout();
+    if (this.table.$ready) {
+      this.updateColumns(); // hack for dynamics remove column
+      this.scheduleLayout();
+    }
   },
 
   setHoverRow(states, row) {
@@ -233,37 +333,22 @@ TableStore.prototype.mutations = {
 
     if (changed) {
       const table = this.table;
-      table.$emit('selection-change', selection);
+      table.$emit('selection-change', selection ? selection.slice() : []);
       table.$emit('select', selection, row);
     }
 
     this.updateAllSelected();
   },
 
-  toggleRowExpanded: function(states, row, expanded) {
-    const expandRows = states.expandRows;
-    if (typeof expanded !== 'undefined') {
-      const index = expandRows.indexOf(row);
-      if (expanded) {
-        if (index === -1) expandRows.push(row);
-      } else {
-        if (index !== -1) expandRows.splice(index, 1);
-      }
-    } else {
-      const index = expandRows.indexOf(row);
-      if (index === -1) {
-        expandRows.push(row);
-      } else {
-        expandRows.splice(index, 1);
-      }
-    }
-    this.table.$emit('expand', row, expandRows.indexOf(row) !== -1);
-  },
-
   toggleAllSelection: debounce(10, function(states) {
     const data = states.data || [];
-    const value = !states.isAllSelected;
+    if (data.length === 0) return;
     const selection = this.states.selection;
+    // when only some rows are selected (but not all), select or deselect all of them
+    // depending on the value of selectOnIndeterminate
+    const value = states.selectOnIndeterminate
+      ? !states.isAllSelected
+      : !(states.isAllSelected || selection.length);
     let selectionChanged = false;
 
     data.forEach((item, index) => {
@@ -280,7 +365,7 @@ TableStore.prototype.mutations = {
 
     const table = this.table;
     if (selectionChanged) {
-      table.$emit('selection-change', selection);
+      table.$emit('selection-change', selection ? selection.slice() : []);
     }
     table.$emit('select-all', selection);
     states.isAllSelected = value;
@@ -309,8 +394,19 @@ TableStore.prototype.updateColumns = function() {
     _columns[0].fixed = true;
     states.fixedColumns.unshift(_columns[0]);
   }
-  states.originColumns = [].concat(states.fixedColumns).concat(_columns.filter((column) => !column.fixed)).concat(states.rightFixedColumns);
-  states.columns = doFlattenColumns(states.originColumns);
+
+  const notFixedColumns = _columns.filter(column => !column.fixed);
+  states.originColumns = [].concat(states.fixedColumns).concat(notFixedColumns).concat(states.rightFixedColumns);
+
+  const leafColumns = doFlattenColumns(notFixedColumns);
+  const fixedLeafColumns = doFlattenColumns(states.fixedColumns);
+  const rightFixedLeafColumns = doFlattenColumns(states.rightFixedColumns);
+
+  states.leafColumnsLength = leafColumns.length;
+  states.fixedLeafColumnsLength = fixedLeafColumns.length;
+  states.rightFixedLeafColumnsLength = rightFixedLeafColumns.length;
+
+  states.columns = [].concat(fixedLeafColumns).concat(leafColumns).concat(rightFixedLeafColumns);
   states.isComplex = states.fixedColumns.length > 0 || states.rightFixedColumns.length > 0;
 };
 
@@ -322,9 +418,11 @@ TableStore.prototype.clearSelection = function() {
   const states = this.states;
   states.isAllSelected = false;
   const oldSelection = states.selection;
-  states.selection = [];
+  if (states.selection.length) {
+    states.selection = [];
+  }
   if (oldSelection.length > 0) {
-    this.table.$emit('selection-change', states.selection);
+    this.table.$emit('selection-change', states.selection ? states.selection.slice() : []);
   }
 };
 
@@ -347,10 +445,27 @@ TableStore.prototype.setExpandRowKeys = function(rowKeys) {
 TableStore.prototype.toggleRowSelection = function(row, selected) {
   const changed = toggleRowSelection(this.states, row, selected);
   if (changed) {
-    this.table.$emit('selection-change', this.states.selection);
+    this.table.$emit('selection-change', this.states.selection ? this.states.selection.slice() : []);
+  }
+};
+
+TableStore.prototype.toggleRowExpansion = function(row, expanded) {
+  const changed = toggleRowExpansion(this.states, row, expanded);
+  if (changed) {
+    this.table.$emit('expand-change', row, this.states.expandRows);
+    this.scheduleLayout();
   }
 };
 
+TableStore.prototype.isRowExpanded = function(row) {
+  const { expandRows = [], rowKey } = this.states;
+  if (rowKey) {
+    const expandMap = getKeysMap(expandRows, rowKey);
+    return !!expandMap[getRowIdentity(row, rowKey)];
+  }
+  return expandRows.indexOf(row) !== -1;
+};
+
 TableStore.prototype.cleanSelection = function() {
   const selection = this.states.selection || [];
   const data = this.states.data;
@@ -376,10 +491,47 @@ TableStore.prototype.cleanSelection = function() {
   });
 
   if (deleted.length) {
-    this.table.$emit('selection-change', selection);
+    this.table.$emit('selection-change', selection ? selection.slice() : []);
   }
 };
 
+TableStore.prototype.clearFilter = function() {
+  const states = this.states;
+  const { tableHeader, fixedTableHeader, rightFixedTableHeader } = this.table.$refs;
+  let panels = {};
+
+  if (tableHeader) panels = merge(panels, tableHeader.filterPanels);
+  if (fixedTableHeader) panels = merge(panels, fixedTableHeader.filterPanels);
+  if (rightFixedTableHeader) panels = merge(panels, rightFixedTableHeader.filterPanels);
+
+  const keys = Object.keys(panels);
+  if (!keys.length) return;
+
+  keys.forEach(key => {
+    panels[key].filteredValue = [];
+  });
+
+  states.filters = {};
+
+  this.commit('filterChange', {
+    column: {},
+    values: [],
+    silent: true
+  });
+};
+
+TableStore.prototype.clearSort = function() {
+  const states = this.states;
+  if (!states.sortingColumn) return;
+  states.sortingColumn.order = null;
+  states.sortProp = null;
+  states.sortOrder = null;
+
+  this.commit('changeSortCondition', {
+    silent: true
+  });
+};
+
 TableStore.prototype.updateAllSelected = function() {
   const states = this.states;
   const { selection, rowKey, selectable, data } = states;
@@ -405,23 +557,14 @@ TableStore.prototype.updateAllSelected = function() {
   let selectedCount = 0;
   for (let i = 0, j = data.length; i < j; i++) {
     const item = data[i];
-    if (selectable) {
-      const isRowSelectable = selectable.call(null, item, i);
-      if (isRowSelectable) {
-        if (!isSelected(item)) {
-          isAllSelected = false;
-          break;
-        } else {
-          selectedCount++;
-        }
-      }
-    } else {
-      if (!isSelected(item)) {
+    const isRowSelectable = selectable && selectable.call(null, item, i);
+    if (!isSelected(item)) {
+      if (!selectable || isRowSelectable) {
         isAllSelected = false;
         break;
-      } else {
-        selectedCount++;
       }
+    } else {
+      selectedCount++;
     }
   }
 
@@ -430,8 +573,11 @@ TableStore.prototype.updateAllSelected = function() {
   states.isAllSelected = isAllSelected;
 };
 
-TableStore.prototype.scheduleLayout = function() {
-  this.table.debouncedLayout();
+TableStore.prototype.scheduleLayout = function(updateColumns) {
+  if (updateColumns) {
+    this.updateColumns();
+  }
+  this.table.debouncedUpdateLayout();
 };
 
 TableStore.prototype.setCurrentRowKey = function(key) {
@@ -441,9 +587,7 @@ TableStore.prototype.setCurrentRowKey = function(key) {
   const data = states.data || [];
   const keysMap = getKeysMap(data, rowKey);
   const info = keysMap[key];
-  if (info) {
-    states.currentRow = info.row;
-  }
+  states.currentRow = info ? info.row : null;
 };
 
 TableStore.prototype.updateCurrentRow = function() {
diff --git a/packages/table/src/table.vue b/packages/table/src/table.vue
index a90c9c33e2..f45bbd9198 100644
--- a/packages/table/src/table.vue
+++ b/packages/table/src/table.vue
@@ -1,162 +1,240 @@
 <template>
   <div class="el-table"
-    :class="{
+    :class="[{
       'el-table--fit': fit,
       'el-table--striped': stripe,
-      'el-table--border': border,
+      'el-table--border': border || isGroup,
+      'el-table--hidden': isHidden,
+      'el-table--group': isGroup,
       'el-table--fluid-height': maxHeight,
+      'el-table--scrollable-x': layout.scrollX,
+      'el-table--scrollable-y': layout.scrollY,
       'el-table--enable-row-hover': !store.states.isComplex,
       'el-table--enable-row-transition': (store.states.data || []).length !== 0 && (store.states.data || []).length < 100
-    }"
+    }, tableSize ? `el-table--${ tableSize }` : '']"
     @mouseleave="handleMouseLeave($event)">
     <div class="hidden-columns" ref="hiddenColumns"><slot></slot></div>
-    <div class="el-table__header-wrapper" ref="headerWrapper" v-if="showHeader">
+    <div
+      v-if="showHeader"
+      v-mousewheel="handleHeaderFooterMousewheel"
+      class="el-table__header-wrapper"
+      ref="headerWrapper">
       <table-header
+        ref="tableHeader"
         :store="store"
-        :layout="layout"
         :border="border"
         :default-sort="defaultSort"
-        :style="{ width: layout.bodyWidth ? layout.bodyWidth + 'px' : '' }">
+        :style="{
+          width: layout.bodyWidth ? layout.bodyWidth + 'px' : ''
+        }">
       </table-header>
     </div>
     <div
       class="el-table__body-wrapper"
       ref="bodyWrapper"
+      :class="[layout.scrollX ? `is-scrolling-${scrollPosition}` : 'is-scrolling-none']"
       :style="[bodyHeight]">
       <table-body
         :context="context"
         :store="store"
         :stripe="stripe"
-        :layout="layout"
         :row-class-name="rowClassName"
         :row-style="rowStyle"
         :highlight="highlightCurrentRow"
-        :style="{ width: bodyWidth }">
+        :style="{
+           width: bodyWidth
+        }">
       </table-body>
-      <div :style="{ width: bodyWidth }" class="el-table__empty-block" v-if="!data || data.length === 0">
-        <span class="el-table__empty-text"><slot name="empty">{{ emptyText || t('el.table.emptyText') }}</slot></span>
+      <div
+        v-if="!data || data.length === 0"
+        class="el-table__empty-block"
+        ref="emptyBlock"
+        :style="{
+          width: bodyWidth
+        }">
+        <span class="el-table__empty-text">
+          <slot name="empty">{{ emptyText || t('el.table.emptyText') }}</slot>
+        </span>
+      </div>
+      <div
+        v-if="$slots.append"
+        class="el-table__append-wrapper"
+        ref="appendWrapper">
+        <slot name="append"></slot>
       </div>
     </div>
-    <div class="el-table__footer-wrapper" ref="footerWrapper" v-if="showSummary" v-show="data && data.length > 0">
+    <div
+      v-if="showSummary"
+      v-show="data && data.length > 0"
+      v-mousewheel="handleHeaderFooterMousewheel"
+      class="el-table__footer-wrapper"
+      ref="footerWrapper">
       <table-footer
         :store="store"
-        :layout="layout"
         :border="border"
         :sum-text="sumText || t('el.table.sumText')"
         :summary-method="summaryMethod"
         :default-sort="defaultSort"
-        :style="{ width: layout.bodyWidth ? layout.bodyWidth + 'px' : '' }">
+        :style="{
+          width: layout.bodyWidth ? layout.bodyWidth + 'px' : ''
+        }">
       </table-footer>
     </div>
-    <div class="el-table__fixed" ref="fixedWrapper"
+    <div
       v-if="fixedColumns.length > 0"
-      :style="[
-        { width: layout.fixedWidth ? layout.fixedWidth + 'px' : '' },
-        fixedHeight
-      ]">
-      <div class="el-table__fixed-header-wrapper" ref="fixedHeaderWrapper" v-if="showHeader">
+      v-mousewheel="handleFixedMousewheel"
+      class="el-table__fixed"
+      ref="fixedWrapper"
+      :style="[{
+        width: layout.fixedWidth ? layout.fixedWidth + 'px' : ''
+      },
+      fixedHeight]">
+      <div
+        v-if="showHeader"
+        class="el-table__fixed-header-wrapper"
+        ref="fixedHeaderWrapper" >
         <table-header
+          ref="fixedTableHeader"
           fixed="left"
           :border="border"
           :store="store"
-          :layout="layout"
-          :style="{ width: layout.fixedWidth ? layout.fixedWidth + 'px' : '' }"></table-header>
+          :style="{
+            width: bodyWidth
+          }"></table-header>
       </div>
-      <div class="el-table__fixed-body-wrapper" ref="fixedBodyWrapper"
-        :style="[
-          { top: layout.headerHeight + 'px' },
-          fixedBodyHeight
-        ]">
+      <div
+        class="el-table__fixed-body-wrapper"
+        ref="fixedBodyWrapper"
+        :style="[{
+          top: layout.headerHeight + 'px'
+        },
+        fixedBodyHeight]">
         <table-body
           fixed="left"
           :store="store"
           :stripe="stripe"
-          :layout="layout"
           :highlight="highlightCurrentRow"
           :row-class-name="rowClassName"
           :row-style="rowStyle"
-          :style="{ width: layout.fixedWidth ? layout.fixedWidth + 'px' : '' }">
+          :style="{
+            width: bodyWidth
+          }">
         </table-body>
+        <div
+          v-if="$slots.append"
+          class="el-table__append-gutter"
+          :style="{
+            height: layout.appendHeight + 'px'
+          }"></div>
       </div>
-      <div class="el-table__fixed-footer-wrapper" ref="fixedFooterWrapper" v-if="showSummary" v-show="data && data.length > 0">
+      <div
+        v-if="showSummary"
+        v-show="data && data.length > 0"
+        class="el-table__fixed-footer-wrapper"
+        ref="fixedFooterWrapper">
         <table-footer
           fixed="left"
           :border="border"
           :sum-text="sumText || t('el.table.sumText')"
           :summary-method="summaryMethod"
           :store="store"
-          :layout="layout"
-          :style="{ width: layout.fixedWidth ? layout.fixedWidth + 'px' : '' }"></table-footer>
+          :style="{
+            width: bodyWidth
+          }"></table-footer>
       </div>
     </div>
-    <div class="el-table__fixed-right" ref="rightFixedWrapper"
+    <div
       v-if="rightFixedColumns.length > 0"
-      :style="[
-        { width: layout.rightFixedWidth ? layout.rightFixedWidth + 'px' : '' },
-        { right: layout.scrollY ? (border ? layout.gutterWidth : (layout.gutterWidth || 1)) + 'px' : '' },
-        fixedHeight
-      ]">
-      <div class="el-table__fixed-header-wrapper" ref="rightFixedHeaderWrapper" v-if="showHeader">
+      v-mousewheel="handleFixedMousewheel"
+      class="el-table__fixed-right"
+      ref="rightFixedWrapper"
+      :style="[{
+        width: layout.rightFixedWidth ? layout.rightFixedWidth + 'px' : '',
+        right: layout.scrollY ? (border ? layout.gutterWidth : (layout.gutterWidth || 0)) + 'px' : ''
+      },
+      fixedHeight]">
+      <div v-if="showHeader"
+        class="el-table__fixed-header-wrapper"
+        ref="rightFixedHeaderWrapper">
         <table-header
+          ref="rightFixedTableHeader"
           fixed="right"
           :border="border"
           :store="store"
-          :layout="layout"
-          :style="{ width: layout.rightFixedWidth ? layout.rightFixedWidth + 'px' : '' }"></table-header>
+          :style="{
+            width: bodyWidth
+          }"></table-header>
       </div>
-      <div class="el-table__fixed-body-wrapper" ref="rightFixedBodyWrapper"
-        :style="[
-          { top: layout.headerHeight + 'px' },
-          fixedBodyHeight
-        ]">
+      <div
+        class="el-table__fixed-body-wrapper"
+        ref="rightFixedBodyWrapper"
+        :style="[{
+          top: layout.headerHeight + 'px'
+        },
+        fixedBodyHeight]">
         <table-body
           fixed="right"
           :store="store"
           :stripe="stripe"
-          :layout="layout"
           :row-class-name="rowClassName"
           :row-style="rowStyle"
           :highlight="highlightCurrentRow"
-          :style="{ width: layout.rightFixedWidth ? layout.rightFixedWidth + 'px' : '' }">
+          :style="{
+            width: bodyWidth
+          }">
         </table-body>
       </div>
-      <div class="el-table__fixed-footer-wrapper" ref="rightFixedFooterWrapper" v-if="showSummary" v-show="data && data.length > 0">
+      <div
+        v-if="showSummary"
+        v-show="data && data.length > 0"
+        class="el-table__fixed-footer-wrapper"
+        ref="rightFixedFooterWrapper">
         <table-footer
           fixed="right"
           :border="border"
           :sum-text="sumText || t('el.table.sumText')"
           :summary-method="summaryMethod"
           :store="store"
-          :layout="layout"
-          :style="{ width: layout.rightFixedWidth ? layout.rightFixedWidth + 'px' : '' }"></table-footer>
+          :style="{
+            width: bodyWidth
+          }"></table-footer>
       </div>
     </div>
-    <div class="el-table__fixed-right-patch"
+    <div
       v-if="rightFixedColumns.length > 0"
-      :style="{ width: layout.scrollY ? layout.gutterWidth + 'px' : '0', height: layout.headerHeight + 'px' }"></div>
+      class="el-table__fixed-right-patch"
+      ref="rightFixedPatch"
+      :style="{
+        width: layout.scrollY ? layout.gutterWidth + 'px' : '0',
+        height: layout.headerHeight + 'px'
+      }"></div>
     <div class="el-table__column-resize-proxy" ref="resizeProxy" v-show="resizeProxyVisible"></div>
   </div>
 </template>
 
 <script type="text/babel">
   import ElCheckbox from 'element-ui/packages/checkbox';
-  import throttle from 'throttle-debounce/throttle';
   import debounce from 'throttle-debounce/debounce';
   import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
+  import Mousewheel from 'element-ui/src/directives/mousewheel';
   import Locale from 'element-ui/src/mixins/locale';
+  import Migrating from 'element-ui/src/mixins/migrating';
   import TableStore from './table-store';
   import TableLayout from './table-layout';
   import TableBody from './table-body';
   import TableHeader from './table-header';
   import TableFooter from './table-footer';
-  import { mousewheel } from './util';
 
   let tableIdSeed = 1;
 
   export default {
     name: 'ElTable',
 
-    mixins: [Locale],
+    mixins: [Locale, Migrating],
+
+    directives: {
+      Mousewheel
+    },
 
     props: {
       data: {
@@ -166,6 +244,8 @@
         }
       },
 
+      size: String,
+
       width: [String, Number],
 
       height: [String, Number],
@@ -200,6 +280,18 @@
 
       rowStyle: [Object, Function],
 
+      cellClassName: [String, Function],
+
+      cellStyle: [Object, Function],
+
+      headerRowClassName: [String, Function],
+
+      headerRowStyle: [Object, Function],
+
+      headerCellClassName: [String, Function],
+
+      headerCellStyle: [Object, Function],
+
       highlightCurrentRow: Boolean,
 
       currentRowKey: [String, Number],
@@ -212,7 +304,14 @@
 
       defaultSort: Object,
 
-      tooltipEffect: String
+      tooltipEffect: String,
+
+      spanMethod: Function,
+
+      selectOnIndeterminate: {
+        type: Boolean,
+        default: true
+      }
     },
 
     components: {
@@ -223,6 +322,14 @@
     },
 
     methods: {
+      getMigratingConfig() {
+        return {
+          events: {
+            expand: 'expand is renamed to expand-change'
+          }
+        };
+      },
+
       setCurrentRow(row) {
         this.store.commit('setCurrentRow', row);
       },
@@ -232,10 +339,22 @@
         this.store.updateAllSelected();
       },
 
+      toggleRowExpansion(row, expanded) {
+        this.store.toggleRowExpansion(row, expanded);
+      },
+
       clearSelection() {
         this.store.clearSelection();
       },
 
+      clearFilter() {
+        this.store.clearFilter();
+      },
+
+      clearSort() {
+        this.store.clearSort();
+      },
+
       handleMouseLeave() {
         this.store.commit('setHoverRow', null);
         if (this.hoverState) this.hoverState = null;
@@ -243,70 +362,115 @@
 
       updateScrollY() {
         this.layout.updateScrollY();
+        this.layout.updateColumnsWidth();
+      },
+
+      handleFixedMousewheel(event, data) {
+        const bodyWrapper = this.bodyWrapper;
+        if (Math.abs(data.spinY) > 0) {
+          const currentScrollTop = bodyWrapper.scrollTop;
+          if (data.pixelY < 0 && currentScrollTop !== 0) {
+            event.preventDefault();
+          }
+          if (data.pixelY > 0 && bodyWrapper.scrollHeight - bodyWrapper.clientHeight > currentScrollTop) {
+            event.preventDefault();
+          }
+          bodyWrapper.scrollTop += Math.ceil(data.pixelY / 5);
+        } else {
+          bodyWrapper.scrollLeft += Math.ceil(data.pixelX / 5);
+        }
+      },
+
+      handleHeaderFooterMousewheel(event, data) {
+        const { pixelX, pixelY } = data;
+        if (Math.abs(pixelX) >= Math.abs(pixelY)) {
+          event.preventDefault();
+          this.bodyWrapper.scrollLeft += data.pixelX / 5;
+        }
       },
 
       bindEvents() {
         const { headerWrapper, footerWrapper } = this.$refs;
         const refs = this.$refs;
+        let self = this;
+
         this.bodyWrapper.addEventListener('scroll', function() {
           if (headerWrapper) headerWrapper.scrollLeft = this.scrollLeft;
           if (footerWrapper) footerWrapper.scrollLeft = this.scrollLeft;
           if (refs.fixedBodyWrapper) refs.fixedBodyWrapper.scrollTop = this.scrollTop;
           if (refs.rightFixedBodyWrapper) refs.rightFixedBodyWrapper.scrollTop = this.scrollTop;
+          const maxScrollLeftPosition = this.scrollWidth - this.offsetWidth - 1;
+          const scrollLeft = this.scrollLeft;
+          if (scrollLeft >= maxScrollLeftPosition) {
+            self.scrollPosition = 'right';
+          } else if (scrollLeft === 0) {
+            self.scrollPosition = 'left';
+          } else {
+            self.scrollPosition = 'middle';
+          }
         });
 
-        const scrollBodyWrapper = event => {
-          const deltaX = event.deltaX;
+        if (this.fit) {
+          addResizeListener(this.$el, this.resizeListener);
+        }
+      },
 
-          if (deltaX > 0) {
-            this.bodyWrapper.scrollLeft += 10;
-          } else {
-            this.bodyWrapper.scrollLeft -= 10;
-          }
-        };
-        if (headerWrapper) {
-          mousewheel(headerWrapper, throttle(16, scrollBodyWrapper));
+      resizeListener() {
+        if (!this.$ready) return;
+        let shouldUpdateLayout = false;
+        const el = this.$el;
+        const { width: oldWidth, height: oldHeight } = this.resizeState;
+
+        const width = el.offsetWidth;
+        if (oldWidth !== width) {
+          shouldUpdateLayout = true;
         }
-        if (footerWrapper) {
-          mousewheel(footerWrapper, throttle(16, scrollBodyWrapper));
+
+        const height = el.offsetHeight;
+        if ((this.height || this.shouldUpdateHeight) && oldHeight !== height) {
+          shouldUpdateLayout = true;
         }
 
-        if (this.fit) {
-          this.windowResizeListener = throttle(50, () => {
-            if (this.$ready) this.doLayout();
-          });
-          addResizeListener(this.$el, this.windowResizeListener);
+        if (shouldUpdateLayout) {
+          this.resizeState.width = width;
+          this.resizeState.height = height;
+          this.doLayout();
         }
       },
 
       doLayout() {
-        this.store.updateColumns();
-        this.layout.update();
-        this.updateScrollY();
-        this.$nextTick(() => {
-          if (this.height) {
-            this.layout.setHeight(this.height);
-          } else if (this.maxHeight) {
-            this.layout.setMaxHeight(this.maxHeight);
-          } else if (this.shouldUpdateHeight) {
-            this.layout.updateHeight();
-          }
-        });
+        this.layout.updateColumnsWidth();
+        if (this.shouldUpdateHeight) {
+          this.layout.updateElsHeight();
+        }
+      },
+
+      sort(prop, order) {
+        this.store.commit('sort', { prop, order });
+      },
+
+      toggleAllSelection() {
+        this.store.commit('toggleAllSelection');
       }
     },
 
     created() {
-      this.tableId = 'el-table_' + tableIdSeed + '_';
-      this.debouncedLayout = debounce(50, () => this.doLayout());
+      this.tableId = 'el-table_' + tableIdSeed++;
+      this.debouncedUpdateLayout = debounce(50, () => this.doLayout());
     },
 
     computed: {
+      tableSize() {
+        return this.size || (this.$ELEMENT || {}).size;
+      },
+
       bodyWrapper() {
         return this.$refs.bodyWrapper;
       },
 
       shouldUpdateHeight() {
-        return typeof this.height === 'number' ||
+        return this.height ||
+          this.maxHeight ||
           this.fixedColumns.length > 0 ||
           this.rightFixedColumns.length > 0;
       },
@@ -331,34 +495,29 @@
         return this.store.states.rightFixedColumns;
       },
 
-      bodyHeight() {
-        let style = {};
+      bodyWidth() {
+        const { bodyWidth, scrollY, gutterWidth } = this.layout;
+        return bodyWidth ? bodyWidth - (scrollY ? gutterWidth : 0) + 'px' : '';
+      },
 
+      bodyHeight() {
         if (this.height) {
-          style = {
+          return {
             height: this.layout.bodyHeight ? this.layout.bodyHeight + 'px' : ''
           };
         } else if (this.maxHeight) {
-          style = {
+          return {
             'max-height': (this.showHeader
               ? this.maxHeight - this.layout.headerHeight - this.layout.footerHeight
               : this.maxHeight - this.layout.footerHeight) + 'px'
           };
         }
-
-        return style;
-      },
-
-      bodyWidth() {
-        const { bodyWidth, scrollY, gutterWidth } = this.layout;
-        return bodyWidth ? bodyWidth - (scrollY ? gutterWidth : 0) + 'px' : '';
+        return {};
       },
 
       fixedBodyHeight() {
-        let style = {};
-
         if (this.height) {
-          style = {
+          return {
             height: this.layout.fixedBodyHeight ? this.layout.fixedBodyHeight + 'px' : ''
           };
         } else if (this.maxHeight) {
@@ -368,34 +527,52 @@
             maxHeight -= this.layout.headerHeight;
           }
 
-          style = {
+          maxHeight -= this.layout.footerHeight;
+
+          return {
             'max-height': maxHeight + 'px'
           };
         }
 
-        return style;
+        return {};
       },
 
       fixedHeight() {
-        let style = {};
-
         if (this.maxHeight) {
-          style = {
+          if (this.showSummary) {
+            return {
+              bottom: 0
+            };
+          }
+          return {
             bottom: (this.layout.scrollX && this.data.length) ? this.layout.gutterWidth + 'px' : ''
           };
         } else {
-          style = {
+          if (this.showSummary) {
+            return {
+              height: this.layout.tableHeight ? this.layout.tableHeight + 'px' : ''
+            };
+          }
+          return {
             height: this.layout.viewportHeight ? this.layout.viewportHeight + 'px' : ''
           };
         }
-
-        return style;
       }
     },
 
     watch: {
-      height(value) {
-        this.layout.setHeight(value);
+      height: {
+        immediate: true,
+        handler(value) {
+          this.layout.setHeight(value);
+        }
+      },
+
+      maxHeight: {
+        immediate: true,
+        handler(value) {
+          this.layout.setMaxHeight(value);
+        }
       },
 
       currentRowKey(newVal) {
@@ -404,25 +581,40 @@
 
       data: {
         immediate: true,
-        handler(val) {
-          this.store.commit('setData', val);
-          if (this.$ready) this.doLayout();
+        handler(value) {
+          this.store.commit('setData', value);
+          if (this.$ready) {
+            this.$nextTick(() => {
+              this.doLayout();
+            });
+          }
         }
       },
 
-      expandRowKeys(newVal) {
-        this.store.setExpandRowKeys(newVal);
+      expandRowKeys: {
+        immediate: true,
+        handler(newVal) {
+          if (newVal) {
+            this.store.setExpandRowKeys(newVal);
+          }
+        }
       }
     },
 
     destroyed() {
-      if (this.windowResizeListener) removeResizeListener(this.$el, this.windowResizeListener);
+      if (this.resizeListener) removeResizeListener(this.$el, this.resizeListener);
     },
 
     mounted() {
       this.bindEvents();
+      this.store.updateColumns();
       this.doLayout();
 
+      this.resizeState = {
+        width: this.$el.offsetWidth,
+        height: this.$el.offsetHeight
+      };
+
       // init filters
       this.store.states.columns.forEach(column => {
         if (column.filteredValue && column.filteredValue.length) {
@@ -440,7 +632,8 @@
     data() {
       const store = new TableStore(this, {
         rowKey: this.rowKey,
-        defaultExpandAll: this.defaultExpandAll
+        defaultExpandAll: this.defaultExpandAll,
+        selectOnIndeterminate: this.selectOnIndeterminate
       });
       const layout = new TableLayout({
         store,
@@ -449,10 +642,18 @@
         showHeader: this.showHeader
       });
       return {
-        store,
         layout,
+        store,
+        isHidden: false,
         renderExpanded: null,
-        resizeProxyVisible: false
+        resizeProxyVisible: false,
+        resizeState: {
+          width: null,
+          height: null
+        },
+        // 是否拥有多级表头
+        isGroup: false,
+        scrollPosition: 'left'
       };
     }
   };
diff --git a/packages/table/src/util.js b/packages/table/src/util.js
index 08240f4649..714fee6791 100644
--- a/packages/table/src/util.js
+++ b/packages/table/src/util.js
@@ -17,27 +17,61 @@ const isObject = function(obj) {
   return obj !== null && typeof obj === 'object';
 };
 
-export const orderBy = function(array, sortKey, reverse, sortMethod) {
+export const orderBy = function(array, sortKey, reverse, sortMethod, sortBy) {
+  if (!sortKey && !sortMethod && (!sortBy || Array.isArray(sortBy) && !sortBy.length)) {
+    return array;
+  }
   if (typeof reverse === 'string') {
     reverse = reverse === 'descending' ? -1 : 1;
+  } else {
+    reverse = (reverse && reverse < 0) ? -1 : 1;
   }
-  if (!sortKey) {
-    return array;
-  }
-  const order = (reverse && reverse < 0) ? -1 : 1;
-
-  // sort on a copy to avoid mutating original array
-  return array.slice().sort(sortMethod ? function(a, b) {
-    return sortMethod(a, b) ? order : -order;
-  } : function(a, b) {
+  const getKey = sortMethod ? null : function(value, index) {
+    if (sortBy) {
+      if (!Array.isArray(sortBy)) {
+        sortBy = [sortBy];
+      }
+      return sortBy.map(function(by) {
+        if (typeof by === 'string') {
+          return getValueByPath(value, by);
+        } else {
+          return by(value, index, array);
+        }
+      });
+    }
     if (sortKey !== '$key') {
-      if (isObject(a) && '$value' in a) a = a.$value;
-      if (isObject(b) && '$value' in b) b = b.$value;
+      if (isObject(value) && '$value' in value) value = value.$value;
     }
-    a = isObject(a) ? getValueByPath(a, sortKey) : a;
-    b = isObject(b) ? getValueByPath(b, sortKey) : b;
-    return a === b ? 0 : a > b ? order : -order;
-  });
+    return [isObject(value) ? getValueByPath(value, sortKey) : value];
+  };
+  const compare = function(a, b) {
+    if (sortMethod) {
+      return sortMethod(a.value, b.value);
+    }
+    for (let i = 0, len = a.key.length; i < len; i++) {
+      if (a.key[i] < b.key[i]) {
+        return -1;
+      }
+      if (a.key[i] > b.key[i]) {
+        return 1;
+      }
+    }
+    return 0;
+  };
+  return array.map(function(value, index) {
+    return {
+      value: value,
+      index: index,
+      key: getKey ? getKey(value, index) : null
+    };
+  }).sort(function(a, b) {
+    let order = compare(a, b);
+    if (!order) {
+      // make stable https://en.wikipedia.org/wiki/Sorting_algorithm#Stability
+      order = a.index - b.index;
+    }
+    return order * reverse;
+  }).map(item => item.value);
 };
 
 export const getColumnById = function(table, columnId) {
@@ -58,14 +92,6 @@ export const getColumnByCell = function(table, cell) {
   return null;
 };
 
-const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-
-export const mousewheel = function(element, callback) {
-  if (element && element.addEventListener) {
-    element.addEventListener(isFirefox ? 'DOMMouseScroll' : 'mousewheel', callback);
-  }
-};
-
 export const getRowIdentity = (row, rowKey) => {
   if (!row) throw new Error('row is required when get row identity');
   if (typeof rowKey === 'string') {
diff --git a/packages/tabs/src/tab-bar.vue b/packages/tabs/src/tab-bar.vue
index 792d54d509..5014055dc0 100644
--- a/packages/tabs/src/tab-bar.vue
+++ b/packages/tabs/src/tab-bar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="el-tabs__active-bar" :style="barStyle"></div>
+  <div class="el-tabs__active-bar" :class="`is-${ rootTabs.tabPosition }`" :style="barStyle"></div>
 </template>
 <script>
   export default {
@@ -9,6 +9,8 @@
       tabs: Array
     },
 
+    inject: ['rootTabs'],
+
     computed: {
       barStyle: {
         cache: false,
@@ -16,23 +18,33 @@
           if (!this.$parent.$refs.tabs) return {};
           let style = {};
           let offset = 0;
-          let tabWidth = 0;
-
+          let tabSize = 0;
+          const sizeName = ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1 ? 'width' : 'height';
+          const sizeDir = sizeName === 'width' ? 'x' : 'y';
+          const firstUpperCase = str => {
+            return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
+          };
           this.tabs.every((tab, index) => {
             let $el = this.$parent.$refs.tabs[index];
             if (!$el) { return false; }
 
             if (!tab.active) {
-              offset += $el.clientWidth;
+              offset += $el[`client${firstUpperCase(sizeName)}`];
               return true;
             } else {
-              tabWidth = $el.clientWidth;
+              tabSize = $el[`client${firstUpperCase(sizeName)}`];
+              if (sizeName === 'width' && this.tabs.length > 1) {
+                tabSize -= (index === 0 || index === this.tabs.length - 1) ? 20 : 40;
+              }
               return false;
             }
           });
 
-          const transform = `translateX(${offset}px)`;
-          style.width = tabWidth + 'px';
+          if (sizeName === 'width' && offset !== 0) {
+            offset += 20;
+          }
+          const transform = `translate${firstUpperCase(sizeDir)}(${offset}px)`;
+          style[sizeName] = tabSize + 'px';
           style.transform = transform;
           style.msTransform = transform;
           style.webkitTransform = transform;
diff --git a/packages/tabs/src/tab-nav.vue b/packages/tabs/src/tab-nav.vue
index 4af467b534..0d5ff6a958 100644
--- a/packages/tabs/src/tab-nav.vue
+++ b/packages/tabs/src/tab-nav.vue
@@ -3,6 +3,9 @@
   import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
 
   function noop() {}
+  const firstUpperCase = str => {
+    return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
+  };
 
   export default {
     name: 'TabNav',
@@ -11,6 +14,8 @@
       TabBar
     },
 
+    inject: ['rootTabs'],
+
     props: {
       panes: Array,
       currentName: String,
@@ -23,53 +28,67 @@
         type: Function,
         default: noop
       },
-      type: String
+      type: String,
+      stretch: Boolean
     },
 
     data() {
       return {
         scrollable: false,
-        navStyle: {
-          transform: ''
-        }
+        navOffset: 0,
+        isFocus: false,
+        focusable: true
       };
     },
 
+    computed: {
+      navStyle() {
+        const dir = ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1 ? 'X' : 'Y';
+        return {
+          transform: `translate${dir}(-${this.navOffset}px)`
+        };
+      },
+      sizeName() {
+        return ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1 ? 'width' : 'height';
+      }
+    },
+
     methods: {
       scrollPrev() {
-        const containerWidth = this.$refs.navScroll.offsetWidth;
-        const currentOffset = this.getCurrentScrollOffset();
+        const containerSize = this.$refs.navScroll[`offset${firstUpperCase(this.sizeName)}`];
+        const currentOffset = this.navOffset;
 
         if (!currentOffset) return;
 
-        let newOffset = currentOffset > containerWidth
-          ? currentOffset - containerWidth
+        let newOffset = currentOffset > containerSize
+          ? currentOffset - containerSize
           : 0;
 
-        this.setOffset(newOffset);
+        this.navOffset = newOffset;
       },
       scrollNext() {
-        const navWidth = this.$refs.nav.offsetWidth;
-        const containerWidth = this.$refs.navScroll.offsetWidth;
-        const currentOffset = this.getCurrentScrollOffset();
+        const navSize = this.$refs.nav[`offset${firstUpperCase(this.sizeName)}`];
+        const containerSize = this.$refs.navScroll[`offset${firstUpperCase(this.sizeName)}`];
+        const currentOffset = this.navOffset;
 
-        if (navWidth - currentOffset <= containerWidth) return;
+        if (navSize - currentOffset <= containerSize) return;
 
-        let newOffset = navWidth - currentOffset > containerWidth * 2
-          ? currentOffset + containerWidth
-          : (navWidth - containerWidth);
+        let newOffset = navSize - currentOffset > containerSize * 2
+          ? currentOffset + containerSize
+          : (navSize - containerSize);
 
-        this.setOffset(newOffset);
+        this.navOffset = newOffset;
       },
       scrollToActiveTab() {
         if (!this.scrollable) return;
         const nav = this.$refs.nav;
         const activeTab = this.$el.querySelector('.is-active');
+        if (!activeTab) return;
         const navScroll = this.$refs.navScroll;
         const activeTabBounding = activeTab.getBoundingClientRect();
         const navScrollBounding = navScroll.getBoundingClientRect();
-        const navBounding = nav.getBoundingClientRect();
-        const currentOffset = this.getCurrentScrollOffset();
+        const maxOffset = nav.offsetWidth - navScrollBounding.width;
+        const currentOffset = this.navOffset;
         let newOffset = currentOffset;
 
         if (activeTabBounding.left < navScrollBounding.left) {
@@ -78,39 +97,84 @@
         if (activeTabBounding.right > navScrollBounding.right) {
           newOffset = currentOffset + activeTabBounding.right - navScrollBounding.right;
         }
-        if (navBounding.right < navScrollBounding.right) {
-          newOffset = nav.offsetWidth - navScrollBounding.width;
-        }
-        this.setOffset(Math.max(newOffset, 0));
-      },
-      getCurrentScrollOffset() {
-        const { navStyle } = this;
-        return navStyle.transform
-          ? Number(navStyle.transform.match(/translateX\(-(\d+(\.\d+)*)px\)/)[1])
-          : 0;
-      },
-      setOffset(value) {
-        this.navStyle.transform = `translateX(-${value}px)`;
+
+        newOffset = Math.max(newOffset, 0);
+        this.navOffset = Math.min(newOffset, maxOffset);
       },
       update() {
-        const navWidth = this.$refs.nav.offsetWidth;
-        const containerWidth = this.$refs.navScroll.offsetWidth;
-        const currentOffset = this.getCurrentScrollOffset();
+        if (!this.$refs.nav) return;
+        const sizeName = this.sizeName;
+        const navSize = this.$refs.nav[`offset${firstUpperCase(sizeName)}`];
+        const containerSize = this.$refs.navScroll[`offset${firstUpperCase(sizeName)}`];
+        const currentOffset = this.navOffset;
 
-        if (containerWidth < navWidth) {
-          const currentOffset = this.getCurrentScrollOffset();
+        if (containerSize < navSize) {
+          const currentOffset = this.navOffset;
           this.scrollable = this.scrollable || {};
           this.scrollable.prev = currentOffset;
-          this.scrollable.next = currentOffset + containerWidth < navWidth;
-          if (navWidth - currentOffset < containerWidth) {
-            this.setOffset(navWidth - containerWidth);
+          this.scrollable.next = currentOffset + containerSize < navSize;
+          if (navSize - currentOffset < containerSize) {
+            this.navOffset = navSize - containerSize;
           }
         } else {
           this.scrollable = false;
           if (currentOffset > 0) {
-            this.setOffset(0);
+            this.navOffset = 0;
           }
         }
+      },
+      changeTab(e) {
+        const keyCode = e.keyCode;
+        let nextIndex;
+        let currentIndex, tabList;
+        if ([37, 38, 39, 40].indexOf(keyCode) !== -1) { // 左右上下键更换tab
+          tabList = e.currentTarget.querySelectorAll('[role=tab]');
+          currentIndex = Array.prototype.indexOf.call(tabList, e.target);
+        } else {
+          return;
+        }
+        if (keyCode === 37 || keyCode === 38) { // left
+          if (currentIndex === 0) { // first
+            nextIndex = tabList.length - 1;
+          } else {
+            nextIndex = currentIndex - 1;
+          }
+        } else { // right
+          if (currentIndex < tabList.length - 1) { // not last
+            nextIndex = currentIndex + 1;
+          } else {
+            nextIndex = 0;
+          }
+        }
+        tabList[nextIndex].focus(); // 改变焦点元素
+        tabList[nextIndex].click(); // 选中下一个tab
+        this.setFocus();
+      },
+      setFocus() {
+        if (this.focusable) {
+          this.isFocus = true;
+        }
+      },
+      removeFocus() {
+        this.isFocus = false;
+      },
+      visibilityChangeHandler() {
+        const visibility = document.visibilityState;
+        if (visibility === 'hidden') {
+          this.focusable = false;
+        } else if (visibility === 'visible') {
+          setTimeout(() => {
+            this.focusable = true;
+          }, 50);
+        }
+      },
+      windowBlurHandler() {
+        this.focusable = false;
+      },
+      windowFocusHandler() {
+        setTimeout(() => {
+          this.focusable = true;
+        }, 50);
       }
     },
 
@@ -123,19 +187,22 @@
         type,
         panes,
         editable,
+        stretch,
         onTabClick,
         onTabRemove,
         navStyle,
         scrollable,
         scrollNext,
-        scrollPrev
+        scrollPrev,
+        changeTab,
+        setFocus,
+        removeFocus
       } = this;
-
       const scrollBtn = scrollable
-      ? [
-        <span class={['el-tabs__nav-prev', scrollable.prev ? '' : 'is-disabled']} on-click={scrollPrev}><i class="el-icon-arrow-left"></i></span>,
-        <span class={['el-tabs__nav-next', scrollable.next ? '' : 'is-disabled']} on-click={scrollNext}><i class="el-icon-arrow-right"></i></span>
-      ] : null;
+        ? [
+          <span class={['el-tabs__nav-prev', scrollable.prev ? '' : 'is-disabled']} on-click={scrollPrev}><i class="el-icon-arrow-left"></i></span>,
+          <span class={['el-tabs__nav-next', scrollable.next ? '' : 'is-disabled']} on-click={scrollNext}><i class="el-icon-arrow-right"></i></span>
+        ] : null;
 
       const tabs = this._l(panes, (pane, index) => {
         let tabName = pane.name || pane.index || index;
@@ -148,17 +215,29 @@
           : null;
 
         const tabLabelContent = pane.$slots.label || pane.label;
+        const tabindex = pane.active ? 0 : -1;
         return (
           <div
             class={{
               'el-tabs__item': true,
+              [`is-${ this.rootTabs.tabPosition }`]: true,
               'is-active': pane.active,
               'is-disabled': pane.disabled,
-              'is-closable': closable
+              'is-closable': closable,
+              'is-focus': this.isFocus
             }}
+            id={`tab-${tabName}`}
+            key={`tab-${tabName}`}
+            aria-controls={`pane-${tabName}`}
+            role="tab"
+            aria-selected={ pane.active }
             ref="tabs"
+            tabindex={tabindex}
             refInFor
-            on-click={(ev) => { onTabClick(pane, tabName, ev); }}
+            on-focus={ ()=> { setFocus(); }}
+            on-blur ={ ()=> { removeFocus(); }}
+            on-click={(ev) => { removeFocus(); onTabClick(pane, tabName, ev); }}
+            on-keydown={(ev) => { if (closable && (ev.keyCode === 46 || ev.keyCode === 8)) { onTabRemove(pane, ev);} }}
           >
             {tabLabelContent}
             {btnClose}
@@ -166,10 +245,16 @@
         );
       });
       return (
-        <div class={['el-tabs__nav-wrap', scrollable ? 'is-scrollable' : '']}>
+        <div class={['el-tabs__nav-wrap', scrollable ? 'is-scrollable' : '', `is-${ this.rootTabs.tabPosition }`]}>
           {scrollBtn}
           <div class={['el-tabs__nav-scroll']} ref="navScroll">
-            <div class="el-tabs__nav" ref="nav" style={navStyle}>
+            <div
+              class={['el-tabs__nav', `is-${ this.rootTabs.tabPosition }`, stretch && ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1 ? 'is-stretch' : '']}
+              ref="nav"
+              style={navStyle}
+              role="tablist"
+              on-keydown={ changeTab }
+            >
               {!type ? <tab-bar tabs={panes}></tab-bar> : null}
               {tabs}
             </div>
@@ -180,11 +265,16 @@
 
     mounted() {
       addResizeListener(this.$el, this.update);
+      document.addEventListener('visibilitychange', this.visibilityChangeHandler);
+      window.addEventListener('blur', this.windowBlurHandler);
+      window.addEventListener('focus', this.windowFocusHandler);
     },
 
     beforeDestroy() {
       if (this.$el && this.update) removeResizeListener(this.$el, this.update);
+      document.removeEventListener('visibilitychange', this.visibilityChangeHandler);
+      window.removeEventListener('blur', this.windowBlurHandler);
+      window.removeEventListener('focus', this.windowFocusHandler);
     }
   };
 </script>
-
diff --git a/packages/tabs/src/tab-pane.vue b/packages/tabs/src/tab-pane.vue
index 27e4500fa1..bb6d4f1565 100644
--- a/packages/tabs/src/tab-pane.vue
+++ b/packages/tabs/src/tab-pane.vue
@@ -1,5 +1,13 @@
 <template>
-  <div class="el-tab-pane" v-show="active">
+  <div
+    class="el-tab-pane"
+    v-if="(!lazy || loaded) || active"
+    v-show="active"
+    role="tabpanel"
+    :aria-hidden="!active"
+    :id="`pane-${paneName}`"
+    :aria-labelledby="`tab-${paneName}`"
+  >
     <slot></slot>
   </div>
 </template>
@@ -14,12 +22,14 @@
       labelContent: Function,
       name: String,
       closable: Boolean,
-      disabled: Boolean
+      disabled: Boolean,
+      lazy: Boolean
     },
 
     data() {
       return {
-        index: null
+        index: null,
+        loaded: false
       };
     },
 
@@ -28,19 +38,15 @@
         return this.closable || this.$parent.closable;
       },
       active() {
-        return this.$parent.currentName === (this.name || this.index);
-      }
-    },
-
-    mounted() {
-      this.$parent.addPanes(this);
-    },
-
-    destroyed() {
-      if (this.$el && this.$el.parentNode) {
-        this.$el.parentNode.removeChild(this.$el);
+        const active = this.$parent.currentName === (this.name || this.index);
+        if (active) {
+          this.loaded = true;
+        }
+        return active;
+      },
+      paneName() {
+        return this.name || this.index;
       }
-      this.$parent.removePanes(this);
     },
 
     watch: {
diff --git a/packages/tabs/src/tabs.vue b/packages/tabs/src/tabs.vue
index f1bba2a803..d70d28c897 100644
--- a/packages/tabs/src/tabs.vue
+++ b/packages/tabs/src/tabs.vue
@@ -14,7 +14,19 @@
       closable: Boolean,
       addable: Boolean,
       value: {},
-      editable: Boolean
+      editable: Boolean,
+      tabPosition: {
+        type: String,
+        default: 'top'
+      },
+      beforeLeave: Function,
+      stretch: Boolean
+    },
+
+    provide() {
+      return {
+        rootTabs: this
+      };
     },
 
     data() {
@@ -33,14 +45,29 @@
       },
       currentName(value) {
         if (this.$refs.nav) {
-          this.$nextTick(_ => {
-            this.$refs.nav.scrollToActiveTab();
+          this.$nextTick(() => {
+            this.$refs.nav.$nextTick(_ => {
+              this.$refs.nav.scrollToActiveTab();
+            });
           });
         }
       }
     },
 
     methods: {
+      calcPaneInstances() {
+        if (this.$slots.default) {
+          const paneSlots = this.$slots.default.filter(vnode => vnode.tag &&
+            vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'ElTabPane');
+          // update indeed
+          const panes = paneSlots.map(({ componentInstance }) => componentInstance);
+          if (!(panes.length === this.panes.length && panes.every((pane, index) => pane === this.panes[index]))) {
+            this.panes = panes;
+          }
+        } else if (this.panes.length !== 0) {
+          this.panes = [];
+        }
+      },
       handleTabClick(tab, tabName, event) {
         if (tab.disabled) return;
         this.setCurrentName(tabName);
@@ -57,23 +84,27 @@
         this.$emit('tab-add');
       },
       setCurrentName(value) {
-        this.currentName = value;
-        this.$emit('input', value);
-      },
-      addPanes(item) {
-        const index = this.$slots.default.filter(item => {
-          return item.elm.nodeType === 1 && /\bel-tab-pane\b/.test(item.elm.className);
-        }).indexOf(item.$vnode);
-        this.panes.splice(index, 0, item);
-      },
-      removePanes(item) {
-        const panes = this.panes;
-        const index = panes.indexOf(item);
-        if (index > -1) {
-          panes.splice(index, 1);
+        const changeCurrentName = () => {
+          this.currentName = value;
+          this.$emit('input', value);
+        };
+        if (this.currentName !== value && this.beforeLeave) {
+          const before = this.beforeLeave(value, this.currentName);
+          if (before && before.then) {
+            before.then(() => {
+              changeCurrentName();
+
+              this.$refs.nav && this.$refs.nav.removeFocus();
+            });
+          } else if (before !== false) {
+            changeCurrentName();
+          }
+        } else {
+          changeCurrentName();
         }
       }
     },
+
     render(h) {
       let {
         type,
@@ -83,18 +114,22 @@
         currentName,
         panes,
         editable,
-        addable
+        addable,
+        tabPosition,
+        stretch
       } = this;
 
       const newButton = editable || addable
         ? (
-            <span
-              class="el-tabs__new-tab"
-              on-click={ handleTabAdd }
-            >
-                <i class="el-icon-plus"></i>
-            </span>
-          )
+          <span
+            class="el-tabs__new-tab"
+            on-click={ handleTabAdd }
+            tabindex="0"
+            on-keydown={ (ev) => { if (ev.keyCode === 13) { handleTabAdd(); }} }
+          >
+            <i class="el-icon-plus"></i>
+          </span>
+        )
         : null;
 
       const navData = {
@@ -104,31 +139,47 @@
           onTabRemove: handleTabRemove,
           editable,
           type,
-          panes
+          panes,
+          stretch
         },
         ref: 'nav'
       };
+      const header = (
+        <div class={['el-tabs__header', `is-${tabPosition}`]}>
+          {newButton}
+          <tab-nav { ...navData }></tab-nav>
+        </div>
+      );
+      const panels = (
+        <div class="el-tabs__content">
+          {this.$slots.default}
+        </div>
+      );
 
       return (
         <div class={{
           'el-tabs': true,
           'el-tabs--card': type === 'card',
+          [`el-tabs--${tabPosition}`]: true,
           'el-tabs--border-card': type === 'border-card'
         }}>
-          <div class="el-tabs__header">
-            {newButton}
-            <tab-nav { ...navData }></tab-nav>
-          </div>
-          <div class="el-tabs__content">
-            {this.$slots.default}
-          </div>
+          { tabPosition !== 'bottom' ? [header, panels] : [panels, header] }
         </div>
       );
     },
+  
     created() {
       if (!this.currentName) {
         this.setCurrentName('0');
       }
+    },
+
+    mounted() {
+      this.calcPaneInstances();
+    },
+
+    updated() {
+      this.calcPaneInstances();
     }
   };
 </script>
diff --git a/packages/tag/src/tag.vue b/packages/tag/src/tag.vue
index e0b7eae846..7b11c29357 100644
--- a/packages/tag/src/tag.vue
+++ b/packages/tag/src/tag.vue
@@ -1,16 +1,3 @@
-<template>
-  <transition :name="closeTransition ? '' : 'el-zoom-in-center'">
-    <span
-      class="el-tag"
-      :class="[type ? 'el-tag--' + type : '', {'is-hit': hit}]"
-      :style="{backgroundColor: color}">
-      <slot></slot>
-      <i class="el-tag__close el-icon-close"
-        v-if="closable"
-        @click="handleClose"></i>
-    </span>
-  </transition>
-</template>
 <script>
   export default {
     name: 'ElTag',
@@ -19,13 +6,34 @@
       closable: Boolean,
       type: String,
       hit: Boolean,
-      closeTransition: Boolean,
-      color: String
+      disableTransitions: Boolean,
+      color: String,
+      size: String
     },
     methods: {
       handleClose(event) {
+        event.stopPropagation();
         this.$emit('close', event);
       }
+    },
+    computed: {
+      tagSize() {
+        return this.size || (this.$ELEMENT || {}).size;
+      }
+    },
+    render(h) {
+      const classes = [ 'el-tag', this.type ? `el-tag--${this.type}` : '',
+        this.tagSize ? `el-tag--${this.tagSize}` : '',
+        {'is-hit': this.hit}
+      ];
+      const tagEl = (<span class={classes} style={{backgroundColor: this.color}}>
+        { this.$slots.default }
+        {
+          this.closable && <i class="el-tag__close el-icon-close" on-click={this.handleClose}></i>
+        }
+      </span>);
+
+      return this.disableTransitions ? tagEl : <transition name="el-zoom-in-center">{ tagEl }</transition>;
     }
   };
 </script>
diff --git a/packages/theme-default/.gitignore b/packages/theme-chalk/.gitignore
similarity index 100%
rename from packages/theme-default/.gitignore
rename to packages/theme-chalk/.gitignore
diff --git a/packages/theme-chalk/README.md b/packages/theme-chalk/README.md
new file mode 100644
index 0000000000..ad6fce8482
--- /dev/null
+++ b/packages/theme-chalk/README.md
@@ -0,0 +1,33 @@
+# element-theme-chalk
+> element component chalk theme.
+
+
+## Installation
+```shell
+npm i element-theme-chalk -S
+```
+
+## Usage
+
+Use Sass import
+```css
+@import 'element-theme-chalk';
+```
+
+Or Use webpack
+```javascript
+import 'element-theme-chalk';
+```
+
+Or
+```html
+<link rel="stylesheet" href="path/to/node_modules/element-theme-chalk/lib/index.css">
+```
+
+##  Import on demand
+```javascript
+import 'element-theme-chalk/lib/input.css';
+import 'element-theme-chalk/lib/select.css';
+
+// ...
+```
diff --git a/packages/theme-default/gulpfile.js b/packages/theme-chalk/gulpfile.js
similarity index 59%
rename from packages/theme-default/gulpfile.js
rename to packages/theme-chalk/gulpfile.js
index 0e37283c33..3e20d8a6ae 100644
--- a/packages/theme-default/gulpfile.js
+++ b/packages/theme-chalk/gulpfile.js
@@ -1,13 +1,17 @@
 'use strict';
 
 var gulp = require('gulp');
-var postcss = require('gulp-postcss');
+var sass = require('gulp-sass');
+var autoprefixer = require('gulp-autoprefixer');
 var cssmin = require('gulp-cssmin');
-var salad = require('postcss-salad')(require('./salad.config.json'));
 
 gulp.task('compile', function() {
-  return gulp.src('./src/*.css')
-    .pipe(postcss([salad]))
+  return gulp.src('./src/*.scss')
+    .pipe(sass.sync())
+    .pipe(autoprefixer({
+      browsers: ['ie > 9', 'last 2 versions'],
+      cascade: false
+    }))
     .pipe(cssmin())
     .pipe(gulp.dest('./lib'));
 });
diff --git a/packages/theme-chalk/package.json b/packages/theme-chalk/package.json
new file mode 100644
index 0000000000..5ba0bed7dc
--- /dev/null
+++ b/packages/theme-chalk/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "element-theme-chalk",
+  "version": "2.4.9",
+  "description": "Element component chalk theme.",
+  "main": "lib/index.css",
+  "style": "lib/index.css",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "build": "gulp build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ElementUI/theme-chalk.git"
+  },
+  "keywords": [
+    "element",
+    "theme"
+  ],
+  "author": "yi.shyang@ele.me",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ElementUI/theme-chalk/issues"
+  },
+  "homepage": "https://github.com/ElementUI/theme-chalk#readme",
+  "devDependencies": {
+    "gulp": "^3.9.1",
+    "gulp-cssmin": "^0.1.7",
+    "gulp-sass": "^3.1.0",
+    "gulp-autoprefixer": "^4.0.0"
+  },
+  "dependencies": {}
+}
diff --git a/packages/theme-chalk/src/alert.scss b/packages/theme-chalk/src/alert.scss
new file mode 100644
index 0000000000..659ac43e64
--- /dev/null
+++ b/packages/theme-chalk/src/alert.scss
@@ -0,0 +1,105 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(alert) {
+  width: 100%;
+  padding: $--alert-padding;
+  margin: 0;
+  box-sizing: border-box;
+  border-radius: $--alert-border-radius;
+  position: relative;
+  background-color: $--color-white;
+  overflow: hidden;
+  opacity: 1;
+  display: flex;
+  align-items: center;
+  transition: opacity .2s;
+
+  @include when(center) {
+    justify-content: center;
+  }
+
+  @include m(success) {
+    background-color: $--alert-success-color;
+    color: $--color-success;
+
+    .el-alert__description {
+      color: $--color-success;
+    }
+  }
+
+  @include m(info) {
+    background-color: $--alert-info-color;
+    color: $--color-info;
+
+    .el-alert__description {
+      color: $--color-info;
+    }
+  }
+
+  @include m(warning) {
+    background-color: $--alert-warning-color;
+    color: $--color-warning;
+
+    .el-alert__description {
+      color: $--color-warning;
+    }
+  }
+
+  @include m(error) {
+    background-color: $--alert-danger-color;
+    color: $--color-danger;
+
+    .el-alert__description {
+      color: $--color-danger;
+    }
+  }
+
+  @include e(content) {
+    display: table-cell;
+    padding: 0 8px;
+  }
+
+  @include e(icon) {
+    font-size: $--alert-icon-size;
+    width: $--alert-icon-size;
+    @include when(big) {
+      font-size: $--alert-icon-large-size;
+      width: $--alert-icon-large-size;
+    }
+  }
+
+  @include e(title) {
+    font-size: $--alert-title-font-size;
+    line-height: 18px;
+    @include when(bold) {
+      font-weight: bold;
+    }
+  }
+
+  & .el-alert__description {
+    font-size: $--alert-description-font-size;
+    margin: 5px 0 0 0;
+  }
+
+  @include e(closebtn) {
+    font-size: $--alert-close-font-size;
+    color: $--color-text-placeholder;
+    opacity: 1;
+    position: absolute;
+    top: 12px;
+    right: 15px;
+    cursor: pointer;
+
+    @include when(customed) {
+      font-style: normal;
+      font-size: $--alert-close-customed-font-size;
+      top: 9px;
+    }
+  }
+}
+
+.el-alert-fade-enter,
+.el-alert-fade-leave-active {
+  opacity: 0;
+}
diff --git a/packages/theme-chalk/src/aside.scss b/packages/theme-chalk/src/aside.scss
new file mode 100644
index 0000000000..b82749f3ae
--- /dev/null
+++ b/packages/theme-chalk/src/aside.scss
@@ -0,0 +1,7 @@
+@import "mixins/mixins";
+
+@include b(aside) {
+  overflow: auto;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
diff --git a/packages/theme-chalk/src/autocomplete.scss b/packages/theme-chalk/src/autocomplete.scss
new file mode 100644
index 0000000000..667b2e1cf6
--- /dev/null
+++ b/packages/theme-chalk/src/autocomplete.scss
@@ -0,0 +1,81 @@
+@import "mixins/mixins";
+@import "mixins/utils";
+@import "common/var";
+@import "./input.scss";
+@import "./scrollbar.scss";
+@import "./popper";
+
+@include b(autocomplete) {
+  position: relative;
+  display: inline-block;
+}
+
+@include b(autocomplete-suggestion) {
+  margin: 5px 0;
+  box-shadow: $--box-shadow-light;
+  border-radius: $--border-radius-base;
+
+  @include e(wrap) {
+    max-height: 280px;
+    padding: 10px 0;
+    box-sizing: border-box;
+    overflow: auto;
+    background-color: $--color-white;
+    border: 1px solid $--border-color-light;
+    border-radius: $--border-radius-base;
+  }
+
+  @include e(list) {
+    margin: 0;
+    padding: 0;
+  }
+
+  & li {
+    padding: 0 20px;
+    margin: 0;
+    line-height: 34px;
+    cursor: pointer;
+    color: $--color-text-regular;
+    font-size: $--font-size-base;
+    list-style: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &:hover {
+      background-color: $--select-option-hover-background;
+    }
+
+    &.highlighted {
+      background-color: $--select-option-hover-background;
+    }
+
+    &.divider {
+      margin-top: 6px;
+      border-top: 1px solid $--color-black;
+    }
+
+    &.divider:last-child {
+      margin-bottom: -6px;
+    }
+  }
+
+  @include when(loading) {
+    li {
+      text-align: center;
+      height: 100px;
+      line-height: 100px;
+      font-size: 20px;
+      color: #999;
+      @include utils-vertical-center;
+
+      &:hover {
+        background-color: $--color-white;
+      }
+    }
+
+    & .el-icon-loading {
+      vertical-align: middle;
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/badge.scss b/packages/theme-chalk/src/badge.scss
new file mode 100644
index 0000000000..1ef8d3897f
--- /dev/null
+++ b/packages/theme-chalk/src/badge.scss
@@ -0,0 +1,57 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(badge) {
+  position: relative;
+  vertical-align: middle;
+  display: inline-block;
+
+  @include e(content) {
+    background-color: $--badge-fill;
+    border-radius: $--badge-radius;
+    color: $--color-white;
+    display: inline-block;
+    font-size: $--badge-font-size;
+    height: $--badge-size;
+    line-height: $--badge-size;
+    padding: 0 $--badge-padding;
+    text-align: center;
+    white-space: nowrap;
+    border: 1px solid $--color-white;
+
+    @include when(fixed) {
+      position: absolute;
+      top: 0;
+      right: #{1 + $--badge-size / 2};
+      transform: translateY(-50%) translateX(100%);
+
+      @include when(dot) {
+        right: 5px;
+      }
+    }
+
+    @include when(dot) {
+      height: 8px;
+      width: 8px;
+      padding: 0;
+      right: 0;
+      border-radius: 50%;
+    }
+
+    @each $type in (primary, success, warning, info, danger) {
+      @include m($type) {
+        @if $type == primary {
+          background-color: $--color-primary;
+        } @else if $type == success {
+          background-color: $--color-success;
+        } @else if $type == warning {
+          background-color: $--color-warning;
+        } @else if $type == info {
+          background-color: $--color-info;
+        } @else {
+          background-color: $--color-danger;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/base.scss b/packages/theme-chalk/src/base.scss
new file mode 100644
index 0000000000..380b79f580
--- /dev/null
+++ b/packages/theme-chalk/src/base.scss
@@ -0,0 +1,2 @@
+@import "common/transition.scss";
+@import "icon.scss";
diff --git a/packages/theme-default/src/breadcrumb-item.css b/packages/theme-chalk/src/breadcrumb-item.scss
similarity index 100%
rename from packages/theme-default/src/breadcrumb-item.css
rename to packages/theme-chalk/src/breadcrumb-item.scss
diff --git a/packages/theme-chalk/src/breadcrumb.scss b/packages/theme-chalk/src/breadcrumb.scss
new file mode 100644
index 0000000000..3c3c3e1d8d
--- /dev/null
+++ b/packages/theme-chalk/src/breadcrumb.scss
@@ -0,0 +1,55 @@
+@import "mixins/mixins";
+@import "mixins/utils";
+@import "common/var";
+
+@include b(breadcrumb) {
+  font-size: 14px;
+  line-height: 1;
+  @include utils-clearfix;
+
+  @include e(separator) {
+    margin: 0 9px;
+    font-weight: bold;
+    color: $--color-text-placeholder;
+
+    &[class*=icon] {
+      margin: 0 6px;
+      font-weight: normal;
+    }
+  }
+
+  @include e(item) {
+    float: left;
+
+    @include e(inner) {
+      color: $--color-text-regular;
+
+      &.is-link, & a {
+        font-weight: bold;
+        text-decoration: none;
+        transition: $--color-transition-base;
+        color: $--color-text-primary;
+
+        &:hover {
+          color: $--color-primary;
+          cursor: pointer;
+        }
+      }
+    }
+
+    &:last-child {
+      .el-breadcrumb__inner,
+      .el-breadcrumb__inner a {
+        &, &:hover {
+          font-weight: normal;
+          color: $--color-text-regular;
+          cursor: text;
+        }
+      }
+
+      .el-breadcrumb__separator {
+        display: none;
+      }
+    }
+  }
+}
diff --git a/packages/theme-default/src/button-group.css b/packages/theme-chalk/src/button-group.scss
similarity index 100%
rename from packages/theme-default/src/button-group.css
rename to packages/theme-chalk/src/button-group.scss
diff --git a/packages/theme-chalk/src/button.scss b/packages/theme-chalk/src/button.scss
new file mode 100644
index 0000000000..9e38d28588
--- /dev/null
+++ b/packages/theme-chalk/src/button.scss
@@ -0,0 +1,258 @@
+@charset "UTF-8";
+@import "common/var";
+@import "mixins/button";
+@import "mixins/mixins";
+@import "mixins/utils";
+
+@include b(button) {
+  display: inline-block;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  background: $--button-default-fill;
+  border: $--border-base;
+  border-color: $--button-default-border;
+  color: $--button-default-color;
+  -webkit-appearance: none;
+  text-align: center;
+  box-sizing: border-box;
+  outline: none;
+  margin: 0;
+  transition: .1s;
+  font-weight: $--button-font-weight;
+  @include utils-user-select(none);
+  & + & {
+    margin-left: 10px;
+  }
+
+  @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, $--button-border-radius);
+
+  &:hover,
+  &:focus {
+    color: $--color-primary;
+    border-color: $--color-primary-light-7;
+    background-color: $--color-primary-light-9;
+  }
+
+  &:active {
+    color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
+    border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
+    outline: none;
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  & [class*="el-icon-"] {
+    & + span {
+      margin-left: 5px;
+    }
+  }
+
+  @include when(plain) {
+    &:hover,
+    &:focus {
+      background: $--color-white;
+      border-color: $--color-primary;
+      color: $--color-primary;
+    }
+
+    &:active {
+      background: $--color-white;
+      border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
+      color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
+      outline: none;
+    }
+  }
+
+  @include when(active) {
+    color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
+    border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
+  }
+
+  @include when(disabled) {
+    &,
+    &:hover,
+    &:focus {
+      color: $--button-disabled-color;
+      cursor: not-allowed;
+      background-image: none;
+      background-color: $--button-disabled-fill;
+      border-color: $--button-disabled-border;
+    }
+
+    &.el-button--text {
+      background-color: transparent;
+    }
+
+    &.is-plain {
+      &,
+      &:hover,
+      &:focus {
+        background-color: $--color-white;
+        border-color: $--button-disabled-border;
+        color: $--button-disabled-color;
+      }
+    }
+  }
+
+  @include when(loading) {
+    position: relative;
+    pointer-events: none;
+
+    &:before {
+      pointer-events: none;
+      content: '';
+      position: absolute;
+      left: -1px;
+      top: -1px;
+      right: -1px;
+      bottom: -1px;
+      border-radius: inherit;
+      background-color: rgba(255,255,255,.35);
+    }
+  }
+  @include when(round) {
+    border-radius: 20px;
+    padding: 12px 23px;
+  }
+  @include when(circle) {
+    border-radius: 50%;
+    padding: $--button-padding-vertical;
+  }
+  @include m(primary) {
+    @include button-variant($--button-primary-color, $--button-primary-fill, $--button-primary-border);
+  }
+  @include m(success) {
+    @include button-variant($--button-success-color, $--button-success-fill, $--button-success-border);
+  }
+  @include m(warning) {
+    @include button-variant($--button-warning-color, $--button-warning-fill, $--button-warning-border);
+  }
+  @include m(danger) {
+    @include button-variant($--button-danger-color, $--button-danger-fill, $--button-danger-border);
+  }
+  @include m(info) {
+    @include button-variant($--button-info-color, $--button-info-fill, $--button-info-border);
+  }
+  @include m(medium) {
+    @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, $--button-medium-border-radius);
+    @include when(circle) {
+      padding: $--button-medium-padding-vertical;
+    }
+  }
+  @include m(small) {
+    @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, $--button-small-border-radius);
+    @include when(circle) {
+      padding: $--button-small-padding-vertical;
+    }
+  }
+  @include m(mini) {
+    @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, $--button-mini-border-radius);
+    @include when(circle) {
+      padding: $--button-mini-padding-vertical;
+    }
+  }
+  @include m(text) {
+    border-color: transparent;
+    color: $--color-primary;
+    background: transparent;
+    padding-left: 0;
+    padding-right: 0;
+
+    &:hover,
+    &:focus {
+      color: mix($--color-white, $--color-primary, $--button-hover-tint-percent);
+      border-color: transparent;
+      background-color: transparent;
+    }
+    &:active {
+      color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
+      border-color: transparent;
+      background-color: transparent;
+    }
+
+    &.is-disabled,
+    &.is-disabled:hover,
+    &.is-disabled:focus {
+      border-color: transparent;
+    }
+  }
+}
+
+@include b(button-group) {
+  @include utils-clearfix;
+  display: inline-block;
+  vertical-align: middle;
+
+  & > .el-button {
+    float: left;
+    position: relative;
+    & + .el-button {
+      margin-left: 0;
+    }
+
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    &:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+    &:first-child:last-child {
+      border-top-right-radius: $--button-border-radius;
+      border-bottom-right-radius: $--button-border-radius;
+      border-top-left-radius: $--button-border-radius;
+      border-bottom-left-radius: $--button-border-radius;
+
+      &.is-round {
+        border-radius: 20px;
+      }
+
+      &.is-circle {
+        border-radius: 50%;
+      }
+    }
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+    }
+    &:not(:last-child) {
+      margin-right: -1px;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      z-index: 1;
+    }
+
+    @include when(active) {
+      z-index: 1;
+    }
+  }
+  
+  & > .el-dropdown {
+    & > .el-button {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-left-color: rgba($--color-white, 0.5);
+    }
+  }
+
+  @each $type in (primary, success, warning, danger, info) {
+    .el-button--#{$type} {
+      &:first-child {
+        border-right-color: rgba($--color-white, 0.5);
+      }
+      &:last-child {
+        border-left-color: rgba($--color-white, 0.5);
+      }
+      &:not(:first-child):not(:last-child) {
+        border-left-color: rgba($--color-white, 0.5);
+        border-right-color: rgba($--color-white, 0.5);
+      }
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/card.scss b/packages/theme-chalk/src/card.scss
new file mode 100644
index 0000000000..1a5b247818
--- /dev/null
+++ b/packages/theme-chalk/src/card.scss
@@ -0,0 +1,32 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(card) {
+  border-radius: $--card-border-radius;
+  border: 1px solid $--card-border-color;
+  background-color: $--color-white;
+  overflow: hidden;
+  color: $--color-text-primary;
+  transition: 0.3s;
+
+  @include when(always-shadow) {
+    box-shadow: $--box-shadow-light;
+  }
+
+  @include when(hover-shadow) {
+    &:hover,
+    &:focus {
+      box-shadow: $--box-shadow-light;
+    }
+  }
+
+  @include e(header) {
+    padding: #{$--card-padding - 2 $--card-padding};
+    border-bottom: 1px solid $--card-border-color;
+    box-sizing: border-box;
+  }
+
+  @include e(body) {
+    padding: $--card-padding;
+  }
+}
diff --git a/packages/theme-chalk/src/carousel-item.scss b/packages/theme-chalk/src/carousel-item.scss
new file mode 100644
index 0000000000..6280ebd3c9
--- /dev/null
+++ b/packages/theme-chalk/src/carousel-item.scss
@@ -0,0 +1,50 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(carousel) {
+  @include e(item) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: inline-block;
+    overflow: hidden;
+    z-index: #{$--index-normal - 1};
+
+    @include when(active) {
+      z-index: #{$--index-normal + 1};
+    }
+
+    @include when(animating) {
+      transition: transform .4s ease-in-out;
+    }
+
+    @include m(card) {
+      width: 50%;
+      transition: transform .4s ease-in-out;
+      &.is-in-stage {
+        cursor: pointer;
+        z-index: $--index-normal;
+        &:hover .el-carousel__mask,
+        &.is-hover .el-carousel__mask {
+          opacity: 0.12;
+        }
+      }
+      &.is-active {
+        z-index: #{$--index-normal + 1};
+      }
+    }
+  }
+
+  @include e(mask) {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: $--color-white;
+    opacity: 0.24;
+    transition: .2s;
+  }
+}
\ No newline at end of file
diff --git a/packages/theme-chalk/src/carousel.scss b/packages/theme-chalk/src/carousel.scss
new file mode 100644
index 0000000000..0a6de09e44
--- /dev/null
+++ b/packages/theme-chalk/src/carousel.scss
@@ -0,0 +1,134 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(carousel) {
+  overflow-x: hidden;
+  position: relative;
+
+  @include e(container) {
+    position: relative;
+    height: 300px;
+  }
+
+  @include e(arrow) {
+    border: none;
+    outline: none;
+    padding: 0;
+    margin: 0;
+    height: $--carousel-arrow-size;
+    width: $--carousel-arrow-size;
+    cursor: pointer;
+    transition: .3s;
+    border-radius: 50%;
+    background-color: $--carousel-arrow-background;
+    color: $--color-white;
+    position: absolute;
+    top: 50%;
+    z-index: 10;
+    transform: translateY(-50%);
+    text-align: center;
+    font-size: $--carousel-arrow-font-size;
+
+    @include m(left) {
+      left: 16px;
+    }
+
+    @include m(right) {
+      right: 16px;
+    }
+
+    &:hover {
+      background-color: $--carousel-arrow-hover-background;
+    }
+
+    & i {
+      cursor: pointer;
+    }
+  }
+
+  @include e(indicators) {
+    position: absolute;
+    list-style: none;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    margin: 0;
+    padding: 0;
+    z-index: #{$--index-normal + 1};
+
+    @include m(outside) {
+      bottom: #{$--carousel-indicator-height + $--carousel-indicator-padding-vertical * 2};
+      text-align: center;
+      position: static;
+      transform: none;
+      .el-carousel__indicator:hover button {
+        opacity: 0.64;
+      }
+      button {
+        background-color: $--carousel-indicator-out-color;
+        opacity: 0.24;
+      }
+    }
+
+    @include m(labels) {
+      left: 0;
+      right: 0;
+      transform: none;
+      text-align: center;
+
+      .el-carousel__button {
+        height: auto;
+        width: auto;
+        padding: 2px 18px;
+        font-size: 12px;
+      }
+
+      .el-carousel__indicator {
+        padding: 6px 4px;
+      }
+    }
+  }
+
+  @include e(indicator) {
+    display: inline-block;
+    background-color: transparent;
+    padding: $--carousel-indicator-padding-vertical $--carousel-indicator-padding-horizontal;
+    cursor: pointer;
+
+    &:hover button {
+      opacity: 0.72;
+    }
+
+    @include when(active) {
+      button {
+        opacity: 1;
+      }
+    }
+  }
+
+  @include e(button) {
+    display: block;
+    opacity: 0.48;
+    width: $--carousel-indicator-width;
+    height: $--carousel-indicator-height;
+    background-color: $--color-white;
+    border: none;
+    outline: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    transition: .3s;
+  }
+}
+
+.carousel-arrow-left-enter,
+.carousel-arrow-left-leave-active {
+  transform: translateY(-50%) translateX(-10px);
+  opacity: 0;
+}
+
+.carousel-arrow-right-enter,
+.carousel-arrow-right-leave-active {
+  transform: translateY(-50%) translateX(10px);
+  opacity: 0;
+}
diff --git a/packages/theme-chalk/src/cascader.scss b/packages/theme-chalk/src/cascader.scss
new file mode 100644
index 0000000000..e57f8a8bb7
--- /dev/null
+++ b/packages/theme-chalk/src/cascader.scss
@@ -0,0 +1,180 @@
+@import "mixins/mixins";
+@import "common/var";
+@import "./input.scss";
+@import "./popper";
+
+@include b(cascader) {
+  display: inline-block;
+  position: relative;
+  font-size: $--font-size-base;
+  line-height: $--input-height;
+
+  .el-input,
+  .el-input__inner {
+    cursor: pointer;
+  }
+
+  .el-input.is-focus .el-input__inner {
+    border-color: $--input-focus-border;
+  }
+
+  .el-input__icon {
+    transition: none;
+  }
+
+  .el-icon-arrow-down {
+    transition: transform .3s;
+    font-size: 14px;
+
+    @include when(reverse) {
+      transform: rotateZ(180deg);
+    }
+  }
+
+  .el-icon-circle-close {
+    z-index: #{$--index-normal + 1};
+    transition: $--color-transition-base;
+
+    &:hover {
+      color: $--color-text-secondary;
+    }
+  }
+
+  @include e(clearIcon) {
+    z-index: 2;
+    position: relative;
+  }
+
+  @include e(label) {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    padding: 0 25px 0 15px;
+    color: $--input-color;
+    width: 100%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    box-sizing: border-box;
+    cursor: pointer;
+    text-align: left;
+    font-size: inherit;
+
+    span {
+      color: $--color-black;
+    }
+  }
+
+  @include m(medium) {
+    font-size: $--input-medium-font-size;
+    line-height: #{$--input-medium-height};
+  }
+
+  @include m(small) {
+    font-size: $--input-small-font-size;
+    line-height: #{$--input-small-height};
+  }
+
+  @include m(mini) {
+    font-size: $--input-mini-font-size;
+    line-height: #{$--input-mini-height};
+  }
+
+  @include when(disabled) {
+    .el-cascader__label {
+      z-index: #{$--index-normal + 1};
+      color: $--disabled-color-base;
+    }
+  }
+}
+
+@include b(cascader-menus) {
+  white-space: nowrap;
+  background: #fff;
+  position: absolute;
+  margin: 5px 0;
+  z-index: #{$--index-normal + 1};
+  border: $--select-dropdown-border;
+  border-radius: $--border-radius-small;
+  box-shadow: $--select-dropdown-shadow;
+}
+
+@include b(cascader-menu) {
+  display: inline-block;
+  vertical-align: top;
+  height: 204px;
+  overflow: auto;
+  border-right: $--select-dropdown-border;
+  background-color: $--select-dropdown-background;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 6px 0;
+  min-width: 160px;
+
+  &:last-child {
+    border-right: 0;
+  }
+
+  @include e(item) {
+    font-size: $--select-font-size;
+    padding: 8px 20px;
+    position: relative;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: $--select-option-color;
+    height: $--select-option-height;
+    line-height: 1.5;
+    box-sizing: border-box;
+    cursor: pointer;
+    outline: none;
+    @include m(extensible) {
+      &:after {
+        font-family: 'element-icons';
+        content: "\e604";
+        font-size: 14px;
+        color: rgb(191, 203, 217);
+        position: absolute;
+        right: 15px;
+      }
+    }
+
+    @include when(disabled) {
+      color: $--select-option-disabled-color;
+      background-color: $--select-option-disabled-background;
+      cursor: not-allowed;
+
+      &:hover {
+        background-color: $--color-white;
+      }
+    }
+
+    @include when(active) {
+      color: $--select-option-selected;
+    }
+
+    &:hover, &:focus:not(:active) {
+      background-color: $--select-option-hover-background;
+    }
+
+    &.selected {
+      color: $--color-white;
+      background-color: $--select-option-selected-hover;
+    }
+  }
+
+  @include e(item__keyword) {
+    font-weight: bold;
+  }
+
+  @include m(flexible) {
+    height: auto;
+    max-height: 180px;
+    overflow: auto;
+
+    .el-cascader-menu__item {
+      overflow: visible;
+    }
+  }
+}
diff --git a/packages/theme-default/src/checkbox-button.css b/packages/theme-chalk/src/checkbox-button.scss
similarity index 100%
rename from packages/theme-default/src/checkbox-button.css
rename to packages/theme-chalk/src/checkbox-button.scss
diff --git a/packages/theme-default/src/checkbox-group.css b/packages/theme-chalk/src/checkbox-group.scss
similarity index 100%
rename from packages/theme-default/src/checkbox-group.css
rename to packages/theme-chalk/src/checkbox-group.scss
diff --git a/packages/theme-chalk/src/checkbox.scss b/packages/theme-chalk/src/checkbox.scss
new file mode 100644
index 0000000000..c8507b4797
--- /dev/null
+++ b/packages/theme-chalk/src/checkbox.scss
@@ -0,0 +1,358 @@
+@import "common/var";
+@import "mixins/mixins";
+@import "mixins/_button";
+@import "mixins/utils";
+
+@include b(checkbox) {
+  color: $--checkbox-color;
+  font-weight: $--checkbox-font-weight;
+  font-size: $--font-size-base;
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+  white-space: nowrap;
+  user-select: none;
+
+  @include when(bordered) {
+    padding: $--checkbox-bordered-padding;
+    border-radius: $--border-radius-base;
+    border: $--border-base;
+    box-sizing: border-box;
+    line-height: normal;
+    height: $--checkbox-bordered-height;
+
+    &.is-checked {
+      border-color: $--color-primary;
+    }
+
+    &.is-disabled {
+      border-color: $--border-color-lighter;
+      cursor: not-allowed;
+    }
+
+    & + .el-checkbox.is-bordered {
+      margin-left: 10px;
+    }
+
+    &.el-checkbox--medium {
+      padding: $--checkbox-bordered-medium-padding;
+      border-radius: $--button-medium-border-radius;
+      height: $--checkbox-bordered-medium-height;
+
+      .el-checkbox__label {
+        line-height: 17px;
+        font-size: $--button-medium-font-size;
+      }
+
+      .el-checkbox__inner {
+        height: $--checkbox-bordered-medium-input-height;
+        width: $--checkbox-bordered-medium-input-width;
+      }
+    }
+
+    &.el-checkbox--small {
+      padding: $--checkbox-bordered-small-padding;
+      border-radius: $--button-small-border-radius;
+      height: $--checkbox-bordered-small-height;
+
+      .el-checkbox__label {
+        line-height: 15px;
+        font-size: $--button-small-font-size;
+      }
+
+      .el-checkbox__inner {
+        height: $--checkbox-bordered-small-input-height;
+        width: $--checkbox-bordered-small-input-width;
+
+        &::after {
+          height: 6px;
+          width: 2px;
+        }
+      }
+    }
+
+    &.el-checkbox--mini {
+      padding: $--checkbox-bordered-mini-padding;
+      border-radius: $--button-mini-border-radius;
+      height: $--checkbox-bordered-mini-height;
+
+      .el-checkbox__label {
+        line-height: 12px;
+        font-size: $--button-mini-font-size;
+      }
+
+      .el-checkbox__inner {
+        height: $--checkbox-bordered-mini-input-height;
+        width: $--checkbox-bordered-mini-input-width;
+        &::after {
+          height: 6px;
+          width: 2px;
+        }
+      }
+    }
+  }
+
+  @include e(input) {
+    white-space: nowrap;
+    cursor: pointer;
+    outline: none;
+    display: inline-block;
+    line-height: 1;
+    position: relative;
+    vertical-align: middle;
+
+    @include when(disabled) {
+      .el-checkbox__inner {
+        background-color: $--checkbox-disabled-input-fill;
+        border-color: $--checkbox-disabled-input-border-color;
+        cursor: not-allowed;
+
+        &::after {
+          cursor: not-allowed;
+          border-color: $--checkbox-disabled-icon-color;
+        }
+
+        & + .el-checkbox__label {
+          cursor: not-allowed;
+        }
+      }
+
+      &.is-checked {
+        .el-checkbox__inner {
+          background-color: $--checkbox-disabled-checked-input-fill;
+          border-color: $--checkbox-disabled-checked-input-border-color;
+
+          &::after {
+            border-color: $--checkbox-disabled-checked-icon-color;
+          }
+        }
+      }
+
+      &.is-indeterminate {
+        .el-checkbox__inner {
+          background-color: $--checkbox-disabled-checked-input-fill;
+          border-color: $--checkbox-disabled-checked-input-border-color;
+
+          &::before {
+            background-color: $--checkbox-disabled-checked-icon-color;
+            border-color: $--checkbox-disabled-checked-icon-color;
+          }
+        }
+      }
+
+      & + span.el-checkbox__label {
+        color: $--disabled-color-base;
+        cursor: not-allowed;
+      }
+    }
+
+    @include when(checked) {
+      .el-checkbox__inner {
+        background-color: $--checkbox-checked-input-fill;
+        border-color: $--checkbox-checked-input-border-color;
+
+        &::after {
+          transform: rotate(45deg) scaleY(1);
+        }
+      }
+
+      & + .el-checkbox__label {
+        color: $--checkbox-checked-text-color;
+      }
+    }
+    @include when(focus) { /*focus时 视觉上区分*/
+      .el-checkbox__inner {
+        border-color: $--checkbox-input-border-color-hover;
+      }
+    }
+    @include when(indeterminate) {
+      .el-checkbox__inner {
+        background-color: $--checkbox-checked-input-fill;
+        border-color: $--checkbox-checked-input-border-color;
+
+        &::before {
+          content: '';
+          position: absolute;
+          display: block;
+          background-color: $--checkbox-checked-icon-color;
+          height: 2px;
+          transform: scale(0.5);
+          left: 0;
+          right: 0;
+          top: 5px;
+        }
+
+        &::after {
+          display: none;
+        }
+      }
+    }
+  }
+  @include e(inner) {
+    display: inline-block;
+    position: relative;
+    border: $--checkbox-input-border;
+    border-radius: $--checkbox-input-border-radius;
+    box-sizing: border-box;
+    width: $--checkbox-input-width;
+    height: $--checkbox-input-height;
+    background-color: $--checkbox-input-fill;
+    z-index: $--index-normal;
+    transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),
+    background-color .25s cubic-bezier(.71,-.46,.29,1.46);
+
+    &:hover {
+      border-color: $--checkbox-input-border-color-hover;
+    }
+
+    &::after {
+      box-sizing: content-box;
+      content: "";
+      border: 1px solid $--checkbox-checked-icon-color;
+      border-left: 0;
+      border-top: 0;
+      height: 7px;
+      left: 4px;
+      position: absolute;
+      top: 1px;
+      transform: rotate(45deg) scaleY(0);
+      width: 3px;
+      transition: transform .15s ease-in .05s;
+      transform-origin: center;
+    }
+  }
+
+  @include e(original) {
+    opacity: 0;
+    outline: none;
+    position: absolute;
+    margin: 0;
+    width: 0;
+    height: 0;
+    z-index: -1;
+  }
+
+  @include e(label) {
+    display: inline-block;
+    padding-left: 10px;
+    line-height: 19px;
+    font-size: $--checkbox-font-size;
+  }
+
+  & + .el-checkbox {
+    margin-left: 30px;
+  }
+}
+
+@include b(checkbox-button) {
+  position: relative;
+  display: inline-block;
+
+  @include e(inner) {
+    display: inline-block;
+    line-height: 1;
+    font-weight: $--checkbox-font-weight;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    background: $--button-default-fill;
+    border: $--border-base;
+    border-left: 0;
+    color: $--button-default-color;
+    -webkit-appearance: none;
+    text-align: center;
+    box-sizing: border-box;
+    outline: none;
+    margin: 0;
+    position: relative;
+    transition: $--all-transition;
+    @include utils-user-select(none);
+
+    @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, 0);
+
+    &:hover {
+      color: $--color-primary;
+    }
+
+    & [class*="el-icon-"] {
+      line-height: 0.9;
+
+      & + span {
+        margin-left: 5px;
+      }
+    }
+  }
+
+  @include e(original) {
+    opacity: 0;
+    outline: none;
+    position: absolute;
+    margin: 0;
+    z-index: -1;
+  }
+
+  &.is-checked {
+    & .el-checkbox-button__inner {
+      color: $--checkbox-button-checked-color;
+      background-color: $--checkbox-button-checked-fill;
+      border-color: $--checkbox-button-checked-border-color;
+      box-shadow: -1px 0 0 0 $--color-primary-light-4;
+    }
+    &:first-child .el-checkbox-button__inner {
+      border-left-color: $--checkbox-button-checked-border-color;
+    }
+  }
+
+  &.is-disabled {
+    & .el-checkbox-button__inner {
+      color: $--button-disabled-color;
+      cursor: not-allowed;
+      background-image: none;
+      background-color: $--button-disabled-fill;
+      border-color: $--button-disabled-border;
+      box-shadow: none;
+    }
+    &:first-child .el-checkbox-button__inner {
+      border-left-color: $--button-disabled-border;
+    }
+  }
+
+  &:first-child {
+    .el-checkbox-button__inner {
+      border-left: $--border-base;
+      border-radius: $--border-radius-base 0 0 $--border-radius-base;
+      box-shadow: none !important;
+    }
+  }
+
+  &.is-focus {
+    & .el-checkbox-button__inner {
+      border-color: $--checkbox-button-checked-border-color;
+    }
+  }
+
+  &:last-child {
+    .el-checkbox-button__inner {
+      border-radius: 0 $--border-radius-base $--border-radius-base 0;
+    }
+  }
+  @include m(medium) {
+    .el-checkbox-button__inner {
+      @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, 0);
+    }
+  }
+  @include m(small) {
+    .el-checkbox-button__inner {
+      @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, 0);
+    }
+  }
+  @include m(mini) {
+    .el-checkbox-button__inner {
+      @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, 0);
+    }
+  }
+}
+
+@include b(checkbox-group) {
+  font-size: 0;
+}
diff --git a/packages/theme-chalk/src/col.scss b/packages/theme-chalk/src/col.scss
new file mode 100644
index 0000000000..c2a3387d58
--- /dev/null
+++ b/packages/theme-chalk/src/col.scss
@@ -0,0 +1,156 @@
+@import "./common/var.scss";
+@import "./mixins/mixins.scss";
+
+[class*="el-col-"] {
+  float: left;
+  box-sizing: border-box;
+}
+
+.el-col-0 {
+  display: none;
+}
+
+@for $i from 0 through 24 {
+  .el-col-#{$i} {
+    width: (1 / 24 * $i * 100) * 1%;
+  }
+
+  .el-col-offset-#{$i} {
+    margin-left: (1 / 24 * $i * 100) * 1%;
+  }
+
+  .el-col-pull-#{$i} {
+    position: relative;
+    right: (1 / 24 * $i * 100) * 1%;
+  }
+
+  .el-col-push-#{$i} {
+    position: relative;
+    left: (1 / 24 * $i * 100) * 1%;
+  }
+}
+
+@include res(xs) {
+  .el-col-xs-0 {
+    display: none;
+  }
+  @for $i from 0 through 24 {
+    .el-col-xs-#{$i} {
+      width: (1 / 24 * $i * 100) * 1%;
+    }
+
+    .el-col-xs-offset-#{$i} {
+      margin-left: (1 / 24 * $i * 100) * 1%;
+    }
+
+    .el-col-xs-pull-#{$i} {
+      position: relative;
+      right: (1 / 24 * $i * 100) * 1%;
+    }
+
+    .el-col-xs-push-#{$i} {
+      position: relative;
+      left: (1 / 24 * $i * 100) * 1%;
+    }
+  }
+}
+
+@include res(sm) {
+  .el-col-sm-0 {
+    display: none;
+  }
+  @for $i from 0 through 24 {
+    .el-col-sm-#{$i} {
+      width: (1 / 24 * $i * 100) * 1%;
+    }
+
+    .el-col-sm-offset-#{$i} {
+      margin-left: (1 / 24 * $i * 100) * 1%;
+    }
+
+    .el-col-sm-pull-#{$i} {
+      position: relative;
+      right: (1 / 24 * $i * 100) * 1%;
+    }
+
+    .el-col-sm-push-#{$i} {
+      position: relative;
+      left: (1 / 24 * $i * 100) * 1%;
+    }
+  }
+}
+
+@include res(md) {
+  .el-col-md-0 {
+    display: none;
+  }
+  @for $i from 0 through 24 {
+    .el-col-md-#{$i} {
+      width: (1 / 24 * $i * 100) * 1%;
+    }
+
+    .el-col-md-offset-#{$i} {
+      margin-left: (1 / 24 * $i * 100) * 1%;
+    }
+
+    .el-col-md-pull-#{$i} {
+      position: relative;
+      right: (1 / 24 * $i * 100) * 1%;
+    }
+
+    .el-col-md-push-#{$i} {
+      position: relative;
+      left: (1 / 24 * $i * 100) * 1%;
+    }
+  }
+}
+
+@include res(lg) {
+  .el-col-lg-0 {
+    display: none;
+  }
+  @for $i from 0 through 24 {
+    .el-col-lg-#{$i} {
+      width: (1 / 24 * $i * 100) * 1%;
+    }
+
+    .el-col-lg-offset-#{$i} {
+      margin-left: (1 / 24 * $i * 100) * 1%;
+    }
+
+    .el-col-lg-pull-#{$i} {
+      position: relative;
+      right: (1 / 24 * $i * 100) * 1%;
+    }
+
+    .el-col-lg-push-#{$i} {
+      position: relative;
+      left: (1 / 24 * $i * 100) * 1%;
+    }
+  }
+}
+
+@include res(xl) {
+  .el-col-xl-0 {
+    display: none;
+  }
+  @for $i from 0 through 24 {
+    .el-col-xl-#{$i} {
+      width: (1 / 24 * $i * 100) * 1%;
+    }
+
+    .el-col-xl-offset-#{$i} {
+      margin-left: (1 / 24 * $i * 100) * 1%;
+    }
+
+    .el-col-xl-pull-#{$i} {
+      position: relative;
+      right: (1 / 24 * $i * 100) * 1%;
+    }
+
+    .el-col-xl-push-#{$i} {
+      position: relative;
+      left: (1 / 24 * $i * 100) * 1%;
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/theme-default/src/collapse-item.css b/packages/theme-chalk/src/collapse-item.scss
similarity index 100%
rename from packages/theme-default/src/collapse-item.css
rename to packages/theme-chalk/src/collapse-item.scss
diff --git a/packages/theme-chalk/src/collapse.scss b/packages/theme-chalk/src/collapse.scss
new file mode 100644
index 0000000000..1d1b6daee4
--- /dev/null
+++ b/packages/theme-chalk/src/collapse.scss
@@ -0,0 +1,57 @@
+@import "mixins/mixins";
+@import "common/var";
+@import "common/transition";
+
+@include b(collapse) {
+  border-top: 1px solid $--collapse-border-color;
+  border-bottom: 1px solid $--collapse-border-color;
+}
+@include b(collapse-item) {
+  @include e(header) {
+    height: $--collapse-header-height;
+    line-height: $--collapse-header-height;
+    background-color: $--collapse-header-fill;
+    color: $--collapse-header-color;
+    cursor: pointer;
+    border-bottom: 1px solid $--collapse-border-color;
+    font-size: $--collapse-header-size;
+    font-weight: 500;
+    transition: border-bottom-color .3s;
+    outline: none;
+    @include e(arrow) {
+      margin-right: 8px;
+      transition: transform .3s;
+      float: right;
+      line-height: 48px;
+      font-weight: 300;
+      @include when(active) {
+        transform: rotate(90deg);
+      }
+    }
+    &.focusing:focus:not(:hover){
+      color: $--color-primary;
+    }
+    @include when(active) {
+      border-bottom-color: transparent;
+    }
+  }
+
+  @include e(wrap) {
+    will-change: height;
+    background-color: $--collapse-content-fill;
+    overflow: hidden;
+    box-sizing: border-box;
+    border-bottom: 1px solid $--collapse-border-color;
+  }
+
+  @include e(content) {
+    padding-bottom: 25px;
+    font-size: $--collapse-content-size;
+    color: $--collapse-content-color;
+    line-height: 1.769230769230769;
+  }
+
+  &:last-child {
+    margin-bottom: -1px;
+  }
+}
diff --git a/packages/theme-chalk/src/color-picker.scss b/packages/theme-chalk/src/color-picker.scss
new file mode 100644
index 0000000000..ee92d9f900
--- /dev/null
+++ b/packages/theme-chalk/src/color-picker.scss
@@ -0,0 +1,384 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(color-predefine) {
+  display: flex;
+  font-size: 12px;
+  margin-top: 8px;
+  width: 280px;
+
+  @include e(colors) {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+  }
+
+  @include e(color-selector) {
+    margin: 0 0 8px 8px;
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+    cursor: pointer;
+
+    &:nth-child(10n + 1) {
+      margin-left: 0;
+    }
+
+    &.selected {
+      box-shadow: 0 0 3px 2px $--color-primary;
+    }
+
+    > div {
+      display: flex;
+      height: 100%;
+      border-radius: 3px;
+    }
+
+    @include when(alpha) {
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+    }
+  }
+}
+
+@include b(color-hue-slider) {
+  position: relative;
+  box-sizing: border-box;
+  width: 280px;
+  height: 12px;
+  background-color: #f00;
+  padding: 0 2px;
+
+  @include e(bar) {
+    position: relative;
+    background: linear-gradient(
+      to right, #f00 0%,
+      #ff0 17%, #0f0 33%,
+      #0ff 50%, #00f 67%,
+      #f0f 83%, #f00 100%);
+    height: 100%;
+  }
+
+  @include e(thumb) {
+    position: absolute;
+    cursor: pointer;
+    box-sizing: border-box;
+    left: 0;
+    top: 0;
+    width: 4px;
+    height: 100%;
+    border-radius: 1px;
+    background: #fff;
+    border: 1px solid #f0f0f0;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+    z-index: 1;
+  }
+
+  @include when(vertical) {
+    width: 12px;
+    height: 180px;
+    padding: 2px 0;
+
+    .el-color-hue-slider__bar {
+      background: linear-gradient(
+        to bottom, #f00 0%,
+        #ff0 17%, #0f0 33%,
+        #0ff 50%, #00f 67%,
+        #f0f 83%, #f00 100%);
+    }
+
+    .el-color-hue-slider__thumb {
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 4px;
+    }
+  }
+}
+
+@include b(color-svpanel) {
+  position: relative;
+  width: 280px;
+  height: 180px;
+
+  @include e(('white', 'black')) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  @include e('white') {
+    background: linear-gradient(to right, #fff, rgba(255,255,255,0));
+  }
+
+  @include e('black') {
+    background: linear-gradient(to top, #000, rgba(0,0,0,0));
+  }
+
+  @include e(cursor) {
+    position: absolute;
+
+    > div {
+      cursor: head;
+      width: 4px;
+      height: 4px;
+      box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,0.3), 0 0 1px 2px rgba(0,0,0,0.4);
+      border-radius: 50%;
+      transform: translate(-2px, -2px);
+    }
+  }
+}
+
+@include b(color-alpha-slider) {
+  position: relative;
+  box-sizing: border-box;
+  width: 280px;
+  height: 12px;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+
+  @include e(bar) {
+    position: relative;
+    background: linear-gradient(
+      to right, rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 1) 100%);
+    height: 100%;
+  }
+
+  @include e(thumb) {
+    position: absolute;
+    cursor: pointer;
+    box-sizing: border-box;
+    left: 0;
+    top: 0;
+    width: 4px;
+    height: 100%;
+    border-radius: 1px;
+    background: #fff;
+    border: 1px solid #f0f0f0;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+    z-index: 1;
+  }
+
+  @include when(vertical) {
+    width: 20px;
+    height: 180px;
+
+    .el-color-alpha-slider__bar {
+      background: linear-gradient(
+        to bottom, rgba(255, 255, 255, 0) 0%,
+        rgba(255, 255, 255, 1) 100%);
+    }
+
+    .el-color-alpha-slider__thumb {
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 4px;
+    }
+  }
+}
+
+@include b(color-dropdown) {
+  width: 300px;
+
+  @include e(main-wrapper) {
+    margin-bottom: 6px;
+
+    &::after {
+      content: "";
+      display: table;
+      clear: both;
+    }
+  }
+
+  @include e(btns) {
+    margin-top: 6px;
+    text-align: right;
+  }
+
+  @include e(value) {
+    float: left;
+    line-height: 26px;
+    font-size: 12px;
+    color: $--color-black;
+    width: 160px;
+  }
+
+  @include e(btn) {
+    border: 1px solid #dcdcdc;
+    color: #333;
+    line-height: 24px;
+    border-radius: 2px;
+    padding: 0 20px;
+    cursor: pointer;
+    background-color: transparent;
+    outline: none;
+    font-size: 12px;
+
+    &[disabled] {
+      color: #cccccc;
+      cursor: not-allowed;
+    }
+    &:hover {
+      color: $--color-primary;
+      border-color: $--color-primary;
+    }
+  }
+
+  @include e(link-btn) {
+    cursor: pointer;
+    color: $--color-primary;
+    text-decoration: none;
+    padding: 15px;
+    font-size: 12px;
+    &:hover {
+      color: tint($--color-primary, $--button-hover-tint-percent);
+    }
+  }
+}
+
+@include b(color-picker) {
+  display: inline-block;
+  position: relative;
+  line-height: normal;
+  height: 40px;
+
+  @include when(disabled) {
+    .el-color-picker__trigger {
+      cursor: not-allowed;
+    }
+  }
+
+  @include m(medium) {
+    height: 36px;
+
+    .el-color-picker__trigger {
+      height: 36px;
+      width: 36px;
+    }
+
+    .el-color-picker__mask {
+      height: 34px;
+      width: 34px;
+    }
+  }
+
+  @include m(small) {
+    height: 32px;
+
+    .el-color-picker__trigger {
+      height: 32px;
+      width: 32px;
+    }
+
+    .el-color-picker__mask {
+      height: 30px;
+      width: 30px;
+    }
+
+    .el-color-picker__icon,
+    .el-color-picker__empty {
+      transform: translate3d(-50%, -50%, 0) scale(0.8);
+    }
+  }
+
+  @include m(mini) {
+    height: 28px;
+
+    .el-color-picker__trigger {
+      height: 28px;
+      width: 28px;
+    }
+
+    .el-color-picker__mask {
+      height: 26px;
+      width: 26px;
+    }
+
+    .el-color-picker__icon,
+    .el-color-picker__empty {
+      transform: translate3d(-50%, -50%, 0) scale(0.8);
+    }
+  }
+
+  @include e(mask) {
+    height: 38px;
+    width: 38px;
+    border-radius: 4px;
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    z-index: 1;
+    cursor: not-allowed;
+    background-color: rgba(255, 255, 255, .7);
+  }
+
+  @include e(trigger) {
+    display: inline-block;
+    box-sizing: border-box;
+    height: 40px;
+    width: 40px;
+    padding: 4px;
+    border: 1px solid #e6e6e6;
+    border-radius: 4px;
+    font-size: 0;
+    position: relative;
+    cursor: pointer;
+  }
+
+  @include e(color) {
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    border: 1px solid #999;
+    border-radius: $--border-radius-small;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+
+    @include when(alpha) {
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+    }
+  }
+
+  @include e(color-inner) {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  @include e(empty) {
+    font-size: 12px;
+    color: #999;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+  }
+
+  @include e(icon) {
+    display: inline-block;
+    position: absolute;
+    width: 100%;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    color: $--color-white;
+    text-align: center;
+    font-size: 12px;
+  }
+
+  @include e(panel) {
+    position: absolute;
+    z-index: 10;
+    padding: 6px;
+    box-sizing: content-box;
+    background-color: $--color-white;
+    border: 1px solid $--border-color-lighter;
+    border-radius: $--border-radius-base;
+    box-shadow: $--dropdown-menu-box-shadow;
+  }
+}
diff --git a/packages/theme-default/src/common/popup.css b/packages/theme-chalk/src/common/popup.scss
similarity index 77%
rename from packages/theme-default/src/common/popup.css
rename to packages/theme-chalk/src/common/popup.scss
index 67a20d787a..e1806c9d99 100644
--- a/packages/theme-default/src/common/popup.css
+++ b/packages/theme-chalk/src/common/popup.scss
@@ -1,3 +1,5 @@
+@import "../mixins/mixins";
+
 .v-modal-enter {
   animation: v-modal-in .2s ease;
 }
@@ -31,3 +33,9 @@
   opacity: 0.5;
   background: #000;
 }
+
+@include b(popup-parent) {
+  @include m(hidden) {
+    overflow: hidden;
+  }
+}
diff --git a/packages/theme-default/src/common/transition.css b/packages/theme-chalk/src/common/transition.scss
similarity index 87%
rename from packages/theme-default/src/common/transition.css
rename to packages/theme-chalk/src/common/transition.scss
index 7a4dc6ddd9..f8eb9e354f 100644
--- a/packages/theme-default/src/common/transition.css
+++ b/packages/theme-chalk/src/common/transition.scss
@@ -1,11 +1,8 @@
-@charset "UTF-8";
-@import './var.css';
+@import "var";
 
-
-/* DEPRECATED */
 .fade-in-linear-enter-active,
 .fade-in-linear-leave-active {
-  transition: var(--fade-linear-transition);
+  transition: $--fade-linear-transition;
 }
 .fade-in-linear-enter,
 .fade-in-linear-leave,
@@ -15,7 +12,7 @@
 
 .el-fade-in-linear-enter-active,
 .el-fade-in-linear-leave-active {
-  transition: var(--fade-linear-transition);
+  transition: $--fade-linear-transition;
 }
 .el-fade-in-linear-enter,
 .el-fade-in-linear-leave,
@@ -46,7 +43,7 @@
 .el-zoom-in-top-leave-active {
   opacity: 1;
   transform: scaleY(1);
-  transition: var(--md-fade-transition);
+  transition: $--md-fade-transition;
   transform-origin: center top;
 }
 .el-zoom-in-top-enter,
@@ -59,7 +56,7 @@
 .el-zoom-in-bottom-leave-active {
   opacity: 1;
   transform: scaleY(1);
-  transition: var(--md-fade-transition);
+  transition: $--md-fade-transition;
   transform-origin: center bottom;
 }
 .el-zoom-in-bottom-enter,
@@ -72,7 +69,7 @@
 .el-zoom-in-left-leave-active {
   opacity: 1;
   transform: scale(1, 1);
-  transition: var(--md-fade-transition);
+  transition: $--md-fade-transition;
   transform-origin: top left;
 }
 .el-zoom-in-left-enter,
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
new file mode 100644
index 0000000000..315af8bdbd
--- /dev/null
+++ b/packages/theme-chalk/src/common/var.scss
@@ -0,0 +1,713 @@
+/* Element Chalk Variables */
+
+/* Transition
+-------------------------- */
+$--all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default;
+$--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
+$--fade-linear-transition: opacity 200ms linear !default;
+$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
+$--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default;
+$--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
+
+/* Colors
+-------------------------- */
+$--color-white: #fff !default;
+$--color-black: #000 !default;
+
+$--color-primary: #409EFF !default;
+$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
+$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
+$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
+$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
+$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
+$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
+$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
+$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
+$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
+
+$--color-success: #67c23a !default;
+$--color-warning: #e6a23c !default;
+$--color-danger: #f56c6c !default;
+$--color-info: #909399 !default;
+
+$--color-success-light: mix($--color-white, $--color-success, 80%) !default;
+$--color-warning-light: mix($--color-white, $--color-warning, 80%) !default;
+$--color-danger-light: mix($--color-white, $--color-danger, 80%) !default;
+$--color-info-light: mix($--color-white, $--color-info, 80%) !default;
+
+$--color-success-lighter: mix($--color-white, $--color-success, 90%) !default;
+$--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
+$--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
+$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
+
+$--color-text-primary: #303133 !default;
+$--color-text-regular: #606266 !default;
+$--color-text-secondary: #909399 !default;
+$--color-text-placeholder: #c0c4cc !default;
+
+/* Link
+-------------------------- */
+$--link-color: $--color-primary-light-2 !default;
+$--link-hover-color: $--color-primary !default;
+
+/* Background
+-------------------------- */
+$--background-color-base: #f5f7fa !default;
+
+/* Border
+-------------------------- */
+$--border-width-base: 1px !default;
+$--border-style-base: solid !default;
+$--border-color-base: #dcdfe6 !default;
+$--border-color-light: #e4e7ed !default;
+$--border-color-lighter: #ebeef5 !default;
+$--border-color-extra-light: #f2f6fc !default;
+$--border-color-hover: $--color-text-placeholder !default;
+$--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
+$--border-radius-base: 4px !default;
+$--border-radius-small: 2px !default;
+$--border-radius-circle: 100% !default;
+
+/* Box-shadow
+-------------------------- */
+$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
+$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
+$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
+
+/* Fill
+-------------------------- */
+$--fill-base: $--color-white !default;
+
+/* Font
+-------------------------- */
+$--font-path: 'fonts' !default;
+$--font-size-base: 14px !default;
+$--font-size-small: 13px !default;
+$--font-size-large: 18px !default;
+$--font-color-disabled-base: #bbb !default;
+$--font-weight-primary: 500 !default;
+$--font-line-height-primary: 24px !default;
+
+/* Size
+-------------------------- */
+$--size-base: 14px !default;
+
+/* z-index
+-------------------------- */
+$--index-normal: 1 !default;
+$--index-top: 1000 !default;
+$--index-popper: 2000 !default;
+
+/* Disable base
+-------------------------- */
+$--disabled-fill-base: $--background-color-base !default;
+$--disabled-color-base: $--color-text-placeholder !default;
+$--disabled-border-base: $--border-color-light !default;
+
+/* Icon
+-------------------------- */
+$--icon-color: #666 !default;
+$--icon-color-base: $--color-info !default;
+
+/* Checkbox
+-------------------------- */
+$--checkbox-font-size: 14px !default;
+$--checkbox-font-weight: $--font-weight-primary !default;
+$--checkbox-color: $--color-text-regular !default;
+$--checkbox-input-height: 14px !default;
+$--checkbox-input-width: 14px !default;
+$--checkbox-input-border-radius: $--border-radius-small !default;
+$--checkbox-input-fill: $--color-white !default;
+$--checkbox-input-border: $--border-base !default;
+$--checkbox-input-border-color: $--border-color-base !default;
+$--checkbox-icon-color: $--color-white !default;
+
+$--checkbox-disabled-input-border-color: $--border-color-base !default;
+$--checkbox-disabled-input-fill: #edf2fc !default;
+$--checkbox-disabled-icon-color: $--color-text-placeholder !default;
+
+$--checkbox-disabled-checked-input-fill: $--border-color-extra-light !default;
+$--checkbox-disabled-checked-input-border-color: $--border-color-base !default;
+$--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default;
+
+$--checkbox-checked-text-color: $--color-primary !default;
+$--checkbox-checked-input-border-color: $--color-primary !default;
+$--checkbox-checked-input-fill: $--color-primary !default;
+$--checkbox-checked-icon-color: $--fill-base !default;
+
+$--checkbox-input-border-color-hover: $--color-primary !default;
+
+$--checkbox-bordered-height: 40px !default;
+$--checkbox-bordered-padding: 9px 20px 9px 10px !default;
+$--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default;
+$--checkbox-bordered-small-padding: 5px 15px 5px 10px !default;
+$--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default;
+$--checkbox-bordered-medium-input-height: 14px !default;
+$--checkbox-bordered-medium-input-width: 14px !default;
+$--checkbox-bordered-medium-height: 36px !default;
+$--checkbox-bordered-small-input-height: 12px !default;
+$--checkbox-bordered-small-input-width: 12px !default;
+$--checkbox-bordered-small-height: 32px !default;
+$--checkbox-bordered-mini-input-height: 12px !default;
+$--checkbox-bordered-mini-input-width: 12px !default;
+$--checkbox-bordered-mini-height: 28px !default;
+
+$--checkbox-button-font-size: $--font-size-base !default;
+$--checkbox-button-checked-fill: $--color-primary !default;
+$--checkbox-button-checked-color: $--color-white !default;
+$--checkbox-button-checked-border-color: $--color-primary !default;
+
+
+
+/* Radio
+-------------------------- */
+$--radio-font-size: 14px !default;
+$--radio-font-weight: $--font-weight-primary !default;
+$--radio-color: $--color-text-regular !default;
+$--radio-input-height: 14px !default;
+$--radio-input-width: 14px !default;
+$--radio-input-border-radius: $--border-radius-circle !default;
+$--radio-input-fill: $--color-white !default;
+$--radio-input-border: $--border-base !default;
+$--radio-input-border-color: $--border-color-base !default;
+$--radio-icon-color: $--color-white !default;
+
+$--radio-disabled-input-border-color: $--disabled-border-base !default;
+$--radio-disabled-input-fill: $--disabled-fill-base !default;
+$--radio-disabled-icon-color: $--disabled-fill-base !default;
+
+$--radio-disabled-checked-input-border-color: $--disabled-border-base !default;
+$--radio-disabled-checked-input-fill: $--disabled-fill-base !default;
+$--radio-disabled-checked-icon-color: $--color-text-placeholder !default;
+
+$--radio-checked-text-color: $--color-primary !default;
+$--radio-checked-input-border-color: $--color-primary !default;
+$--radio-checked-input-fill: $--color-white !default;
+$--radio-checked-icon-color: $--color-primary !default;
+
+$--radio-input-border-color-hover: $--color-primary !default;
+
+$--radio-bordered-height: 40px !default;
+$--radio-bordered-padding: 12px 20px 0 10px !default;
+$--radio-bordered-medium-padding: 10px 20px 0 10px !default;
+$--radio-bordered-small-padding: 8px 15px 0 10px !default;
+$--radio-bordered-mini-padding: 6px 15px 0 10px !default;
+$--radio-bordered-medium-input-height: 14px !default;
+$--radio-bordered-medium-input-width: 14px !default;
+$--radio-bordered-medium-height: 36px !default;
+$--radio-bordered-small-input-height: 12px !default;
+$--radio-bordered-small-input-width: 12px !default;
+$--radio-bordered-small-height: 32px !default;
+$--radio-bordered-mini-input-height: 12px !default;
+$--radio-bordered-mini-input-width: 12px !default;
+$--radio-bordered-mini-height: 28px !default;
+
+$--radio-button-font-size: $--font-size-base !default;
+$--radio-button-checked-fill: $--color-primary !default;
+$--radio-button-checked-color: $--color-white !default;
+$--radio-button-checked-border-color: $--color-primary !default;
+$--radio-button-disabled-checked-fill: $--border-color-extra-light !default;
+
+/* Select
+-------------------------- */
+$--select-border-color-hover: $--border-color-hover !default;
+$--select-disabled-border: $--disabled-border-base !default;
+$--select-font-size: $--font-size-base !default;
+$--select-close-hover-color: $--color-text-secondary !default;
+
+$--select-input-color: $--color-text-placeholder !default;
+$--select-multiple-input-color: #666 !default;
+$--select-input-focus-background: $--color-primary !default;
+$--select-input-font-size: 14px !default;
+
+$--select-option-color: $--color-text-regular !default;
+$--select-option-disabled-color: $--color-text-placeholder !default;
+$--select-option-disabled-background: $--color-white !default;
+$--select-option-height: 34px !default;
+$--select-option-hover-background: $--background-color-base !default;
+$--select-option-selected: $--color-primary !default;
+$--select-option-selected-hover: $--background-color-base !default;
+
+$--select-group-color: $--color-info !default;
+$--select-group-height: 30px !default;
+$--select-group-font-size: 12px !default;
+
+$--select-dropdown-background: $--color-white !default;
+$--select-dropdown-shadow: $--box-shadow-light !default;
+$--select-dropdown-empty-color: #999 !default;
+$--select-dropdown-max-height: 274px !default;
+$--select-dropdown-padding: 6px 0 !default;
+$--select-dropdown-empty-padding: 10px 0 !default;
+$--select-dropdown-border: solid 1px $--border-color-light !default;
+
+/* Alert
+-------------------------- */
+$--alert-padding: 8px 16px !default;
+$--alert-border-radius: $--border-radius-base !default;
+$--alert-title-font-size: 13px !default;
+$--alert-description-font-size: 12px !default;
+$--alert-close-font-size: 12px !default;
+$--alert-close-customed-font-size: 13px !default;
+
+$--alert-success-color: $--color-success-lighter !default;
+$--alert-info-color: $--color-info-lighter !default;
+$--alert-warning-color: $--color-warning-lighter !default;
+$--alert-danger-color: $--color-danger-lighter !default;
+
+$--alert-icon-size: 16px !default;
+$--alert-icon-large-size: 28px !default;
+
+/* Message Box
+-------------------------- */
+$--msgbox-width: 420px !default;
+$--msgbox-border-radius: 4px !default;
+$--msgbox-font-size: $--font-size-large !default;
+$--msgbox-content-font-size: $--font-size-base !default;
+$--msgbox-content-color: $--color-text-regular !default;
+$--msgbox-error-font-size: 12px !default;
+$--msgbox-padding-primary: 15px !default;
+
+$--msgbox-success-color: $--color-success !default;
+$--msgbox-info-color: $--color-info !default;
+$--msgbox-warning-color: $--color-warning !default;
+$--msgbox-danger-color: $--color-danger !default;
+
+/* Message
+-------------------------- */
+$--message-shadow: $--box-shadow-base !default;
+$--message-min-width: 380px !default;
+$--message-background-color: #edf2fc !default;
+$--message-padding: 15px 15px 15px 20px !default;
+$--message-content-color: $--color-text-regular !default;
+$--message-close-color: $--color-text-placeholder !default;
+$--message-close-size: 16px !default;
+$--message-close-hover-color: $--color-text-secondary !default;
+
+$--message-success-color: $--color-success !default;
+$--message-info-color: $--color-info !default;
+$--message-warning-color: $--color-warning !default;
+$--message-danger-color: $--color-danger !default;
+
+/* Notification
+-------------------------- */
+$--notification-width: 330px !default;
+$--notification-padding: 14px 26px 14px 13px !default;
+$--notification-radius: 8px !default;
+$--notification-shadow: $--box-shadow-light !default;
+$--notification-border-color: $--border-color-lighter !default;
+$--notification-icon-size: 24px !default;
+$--notification-close-font-size: $--message-close-size !default;
+$--notification-group-margin: 13px !default;
+$--notification-font-size: $--font-size-base !default;
+$--notification-color: $--color-text-regular !default;
+$--notification-title-font-size: 16px !default;
+$--notification-title-color: $--color-text-primary !default;
+
+$--notification-close-color: $--color-text-secondary !default;
+$--notification-close-hover-color: $--color-text-regular !default;
+
+$--notification-success-color: $--color-success !default;
+$--notification-info-color: $--color-info !default;
+$--notification-warning-color: $--color-warning !default;
+$--notification-danger-color: $--color-danger !default;
+
+/* Input
+-------------------------- */
+$--input-font-size: $--font-size-base !default;
+$--input-color: $--color-text-regular !default;
+$--input-width: 140px !default;
+$--input-height: 40px !default;
+$--input-border: $--border-base !default;
+$--input-border-color: $--border-color-base !default;
+$--input-border-radius: $--border-radius-base !default;
+$--input-border-color-hover: $--border-color-hover !default;
+$--input-fill: $--color-white !default;
+$--input-fill-disabled: $--disabled-fill-base !default;
+$--input-color-disabled: $--font-color-disabled-base !default;
+$--input-icon-color: $--color-text-placeholder !default;
+$--input-placeholder-color: $--color-text-placeholder !default;
+$--input-max-width: 314px !default;
+
+$--input-hover-border: $--border-color-hover !default;
+$--input-clear-hover-color: $--color-text-secondary !default;
+
+$--input-focus-border: $--color-primary !default;
+$--input-focus-fill: $--color-white !default;
+
+$--input-disabled-fill: $--disabled-fill-base !default;
+$--input-disabled-border: $--disabled-border-base !default;
+$--input-disabled-color: $--disabled-color-base !default;
+$--input-disabled-placeholder-color: $--color-text-placeholder !default;
+
+$--input-medium-font-size: 14px !default;
+$--input-medium-height: 36px !default;
+
+$--input-small-font-size: 13px !default;
+$--input-small-height: 32px !default;
+
+$--input-mini-font-size: 12px !default;
+$--input-mini-height: 28px !default;
+
+/* Cascader
+-------------------------- */
+$--cascader-menu-fill: $--fill-base !default;
+$--cascader-menu-font-size: $--font-size-base !default;
+$--cascader-menu-radius: $--border-radius-base !default;
+$--cascader-menu-border: $--border-base !default;
+$--cascader-menu-border-color: $--border-color-base !default;
+$--cascader-menu-border-width: $--border-width-base !default;
+$--cascader-menu-color: $--color-text-regular !default;
+$--cascader-menu-option-color-active: $--color-text-secondary !default;
+$--cascader-menu-option-fill-active: rgba($--color-text-secondary, 0.12) !default;
+$--cascader-menu-option-color-hover: $--color-text-regular !default;
+$--cascader-menu-option-fill-hover: rgba($--color-text-primary, 0.06) !default;
+$--cascader-menu-option-color-disabled: #999 !default;
+$--cascader-menu-option-fill-disabled: rgba($--color-black, 0.06) !default;
+$--cascader-menu-option-empty-color: #666 !default;
+$--cascader-menu-group-color: #999 !default;
+$--cascader-menu-shadow: 0 1px 2px rgba($--color-black, 0.14), 0 0 3px rgba($--color-black, 0.14) !default;
+$--cascader-menu-option-pinyin-color: #999 !default;
+$--cascader-menu-submenu-shadow: 1px 1px 2px rgba($--color-black, 0.14), 1px 0 2px rgba($--color-black, 0.14) !default;
+
+/* Group
+-------------------------- */
+$--group-option-flex: 0 0 (1/5) * 100% !default;
+$--group-option-offset-bottom: 12px !default;
+$--group-option-fill-hover: rgba($--color-black, 0.06) !default;
+$--group-title-color: $--color-black !default;
+$--group-title-font-size: $--font-size-base !default;
+$--group-title-width: 66px !default;
+
+/* Tab
+-------------------------- */
+$--tab-font-size: $--font-size-base !default;
+$--tab-border-line: 1px solid #e4e4e4 !default;
+$--tab-header-color-active: $--color-text-secondary !default;
+$--tab-header-color-hover: $--color-text-regular !default;
+$--tab-header-color: $--color-text-regular !default;
+$--tab-header-fill-active: rgba($--color-black, 0.06) !default;
+$--tab-header-fill-hover: rgba($--color-black, 0.06) !default;
+$--tab-vertical-header-width: 90px !default;
+$--tab-vertical-header-count-color: $--color-white !default;
+$--tab-vertical-header-count-fill: $--color-text-secondary !default;
+
+/* Button
+-------------------------- */
+$--button-font-size: 14px !default;
+$--button-font-weight: $--font-weight-primary !default;
+$--button-border-radius: $--border-radius-base !default;
+$--button-padding-vertical: 12px !default;
+$--button-padding-horizontal: 20px !default;
+
+$--button-medium-font-size: 14px !default;
+$--button-medium-border-radius: $--border-radius-base !default;
+$--button-medium-padding-vertical: 10px !default;
+$--button-medium-padding-horizontal: 20px !default;
+
+$--button-small-font-size: 12px !default;
+$--button-small-border-radius: #{$--border-radius-base - 1} !default;
+$--button-small-padding-vertical: 9px !default;
+$--button-small-padding-horizontal: 15px !default;
+
+$--button-mini-font-size: 12px !default;
+$--button-mini-border-radius: #{$--border-radius-base - 1} !default;
+$--button-mini-padding-vertical: 7px !default;
+$--button-mini-padding-horizontal: 15px !default;
+
+$--button-default-color: $--color-text-regular !default;
+$--button-default-fill: $--color-white !default;
+$--button-default-border: $--border-color-base !default;
+
+$--button-disabled-color: $--color-text-placeholder !default;
+$--button-disabled-fill: $--color-white !default;
+$--button-disabled-border: $--border-color-lighter !default;
+
+$--button-primary-border: $--color-primary !default;
+$--button-primary-color: $--color-white !default;
+$--button-primary-fill: $--color-primary !default;
+
+$--button-success-border: $--color-success !default;
+$--button-success-color: $--color-white !default;
+$--button-success-fill: $--color-success !default;
+
+$--button-warning-border: $--color-warning !default;
+$--button-warning-color: $--color-white !default;
+$--button-warning-fill: $--color-warning !default;
+
+$--button-danger-border: $--color-danger !default;
+$--button-danger-color: $--color-white !default;
+$--button-danger-fill: $--color-danger !default;
+
+$--button-info-border: $--color-info !default;
+$--button-info-color: $--color-white !default;
+$--button-info-fill: $--color-info !default;
+
+$--button-hover-tint-percent: 20% !default;
+$--button-active-shade-percent: 10% !default;
+
+
+/* cascader
+-------------------------- */
+$--cascader-height: 200px !default;
+
+/* Switch
+-------------------------- */
+$--switch-on-color: $--color-primary !default;
+$--switch-off-color: $--border-color-base !default;
+$--switch-disabled-color: $--border-color-lighter !default;
+$--switch-disabled-text-color: $--color-text-placeholder !default;
+
+$--switch-font-size: $--font-size-base !default;
+$--switch-core-border-radius: 10px !default;
+$--switch-width: 40px !default;
+$--switch-height: 20px !default;
+$--switch-button-size: 16px !default;
+
+/* Dialog
+-------------------------- */
+$--dialog-background-color: $--color-primary-light-4 !default;
+$--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default;
+$--dialog-close-hover-color: $--color-primary !default;
+$--dialog-title-font-size: $--font-size-large !default;
+$--dialog-font-size: 14px !default;
+$--dialog-line-height: $--font-line-height-primary !default;
+$--dialog-padding-primary: 20px !default;
+
+/* Table
+-------------------------- */
+$--table-border-color: $--border-color-lighter !default;
+$--table-border: 1px solid $--table-border-color !default;
+$--table-text-color: $--color-text-regular !default;
+$--table-header-color: $--color-text-secondary !default;
+$--table-row-hover-background: $--background-color-base !default;
+$--table-current-row-background: $--color-primary-light-9 !default;
+$--table-header-background: $--color-white !default;
+$--table-footer-background: $--color-text-placeholder !default;
+$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default;
+
+/* Pagination
+-------------------------- */
+$--pagination-font-size: 13px !default;
+$--pagination-fill: $--color-white !default;
+$--pagination-color: $--color-text-primary !default;
+$--pagination-border-radius: 3px !default;
+$--pagination-button-color: $--color-text-primary !default;
+$--pagination-button-width: 35.5px !default;
+$--pagination-button-height: 28px !default;
+$--pagination-button-disabled-color: $--color-text-placeholder !default;
+$--pagination-button-disabled-fill: $--color-white !default;
+$--pagination-hover-fill: $--color-primary !default;
+$--pagination-hover-color: $--color-white !default;
+
+/* Popover
+-------------------------- */
+$--popover-fill: $--color-white !default;
+$--popover-font-size: $--font-size-base !default;
+$--popover-border-color: $--border-color-lighter !default;
+$--popover-arrow-size: 6px !default;
+$--popover-padding: 12px !default;
+$--popover-padding-large: 18px 20px !default;
+$--popover-title-font-size: 16px !default;
+$--popover-title-color: $--color-text-primary !default;
+
+/* Tooltip
+-------------------------- */
+$--tooltip-fill: $--color-text-primary !default;
+$--tooltip-color: $--color-white !default;
+$--tooltip-font-size: 12px !default;
+$--tooltip-border-color: $--color-text-primary !default;
+$--tooltip-arrow-size: 6px !default;
+$--tooltip-padding: 10px !default;
+
+/* Tag
+-------------------------- */
+$--tag-padding: 0 10px !default;
+$--tag-fill: rgba($--color-primary, 0.10) !default;
+$--tag-color: $--color-primary !default;
+$--tag-border: rgba($--color-primary, 0.20) !default;
+$--tag-font-size: 12px !default;
+$--tag-border-radius: 4px !default;
+
+$--tag-info-fill: rgba($--color-info, 0.10) !default;
+$--tag-info-border: rgba($--color-info, 0.20) !default;
+$--tag-info-color: $--color-info !default;
+
+$--tag-primary-fill: rgba($--color-primary, 0.10) !default;
+$--tag-primary-border: rgba($--color-primary, 0.20) !default;
+$--tag-primary-color: $--color-primary !default;
+
+$--tag-success-fill: rgba($--color-success, 0.10) !default;
+$--tag-success-border: rgba($--color-success, 0.20) !default;
+$--tag-success-color: $--color-success !default;
+
+$--tag-warning-fill: rgba($--color-warning, 0.10) !default;
+$--tag-warning-border: rgba($--color-warning, 0.20) !default;
+$--tag-warning-color: $--color-warning !default;
+
+$--tag-danger-fill: rgba($--color-danger, 0.10) !default;
+$--tag-danger-border: rgba($--color-danger, 0.20) !default;
+$--tag-danger-color: $--color-danger !default;
+
+/* Tree
+-------------------------- */
+$--tree-node-hover-color: $--background-color-base !default;
+$--tree-text-color: $--color-text-regular !default;
+$--tree-expand-icon-color: $--color-text-placeholder !default;
+
+/* Dropdown
+-------------------------- */
+$--dropdown-menu-box-shadow: $--box-shadow-light !default;
+$--dropdown-menuItem-hover-fill: $--color-primary-light-9 !default;
+$--dropdown-menuItem-hover-color: $--link-color !default;
+
+/* Badge
+-------------------------- */
+$--badge-fill: $--color-danger !default;
+$--badge-radius: 10px !default;
+$--badge-font-size: 12px !default;
+$--badge-padding: 6px !default;
+$--badge-size: 18px !default;
+
+/* Card
+--------------------------*/
+$--card-border-color: $--border-color-lighter !default;
+$--card-border-radius: 4px !default;
+$--card-padding: 20px !default;
+
+/* Slider
+--------------------------*/
+$--slider-main-background-color: $--color-primary !default;
+$--slider-runway-background-color: $--border-color-light !default;
+$--slider-button-hover-color: mix($--color-primary, black, 97%) !default;
+$--slider-stop-background-color: $--color-white !default;
+$--slider-disable-color: $--color-text-placeholder !default;
+
+$--slider-margin: 16px 0 !default;
+$--slider-border-radius: 3px !default;
+$--slider-height: 6px !default;
+$--slider-button-size: 16px !default;
+$--slider-button-wrapper-size: 36px !default;
+$--slider-button-wrapper-offset: -15px !default;
+
+/* Steps
+--------------------------*/
+$--steps-border-color: $--disabled-border-base !default;
+$--steps-border-radius: 4px !default;
+$--steps-padding: 20px !default;
+
+/* Menu
+--------------------------*/
+$--menu-item-font-size: $--font-size-base !default;
+$--menu-item-color: $--color-text-primary !default;
+$--menu-item-fill: $--color-white !default;
+$--menu-item-hover-fill: $--color-primary-light-9 !default;
+
+/* Rate
+--------------------------*/
+$--rate-height: 20px !default;
+$--rate-font-size: $--font-size-base !default;
+$--rate-icon-size: 18px !default;
+$--rate-icon-margin: 6px !default;
+$--rate-icon-color: $--color-text-placeholder !default;
+
+/* DatePicker
+--------------------------*/
+$--datepicker-color: $--color-text-regular !default;
+$--datepicker-off-color: $--color-text-placeholder !default;
+$--datepicker-header-color: $--color-text-regular !default;
+$--datepicker-icon-color: $--color-text-primary !default;
+$--datepicker-border-color: $--disabled-border-base !default;
+$--datepicker-inner-border-color: #e4e4e4 !default;
+$--datepicker-inrange-color: $--border-color-extra-light !default;
+$--datepicker-inrange-hover-color: $--border-color-extra-light !default;
+$--datepicker-active-color: $--color-primary !default;
+$--datepicker-text-hover-color: $--color-primary !default;
+$--datepicker-cell-hover-color: #fff !default;
+
+/* Loading
+--------------------------*/
+$--loading-spinner-size: 42px !default;
+$--loading-fullscreen-spinner-size: 50px !default;
+
+/* Scrollbar
+--------------------------*/
+$--scrollbar-background-color: rgba($--color-text-secondary, .3) !default;
+$--scrollbar-hover-background-color: rgba($--color-text-secondary, .5) !default;
+
+/* Carousel
+--------------------------*/
+$--carousel-arrow-font-size: 12px !default;
+$--carousel-arrow-size: 36px !default;
+$--carousel-arrow-background: rgba(31, 45, 61, 0.11) !default;
+$--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default;
+$--carousel-indicator-width: 30px !default;
+$--carousel-indicator-height: 2px !default;
+$--carousel-indicator-padding-horizontal: 4px !default;
+$--carousel-indicator-padding-vertical: 12px !default;
+$--carousel-indicator-out-color: $--border-color-hover !default;
+
+/* Collapse
+--------------------------*/
+$--collapse-border-color: $--border-color-lighter !default;
+$--collapse-header-height: 48px !default;
+$--collapse-header-padding: 20px !default;
+$--collapse-header-fill: $--color-white !default;
+$--collapse-header-color: $--color-text-primary !default;
+$--collapse-header-size: 13px !default;
+$--collapse-content-fill: $--color-white !default;
+$--collapse-content-size: 13px !default;
+$--collapse-content-color: $--color-text-primary !default;
+
+/* Transfer
+--------------------------*/
+$--transfer-border-color: $--border-color-lighter !default;
+$--transfer-border-radius: $--border-radius-base !default;
+$--transfer-panel-width: 200px !default;
+$--transfer-panel-header-height: 40px !default;
+$--transfer-panel-header-background: $--background-color-base !default;
+$--transfer-panel-footer-height: 40px !default;
+$--transfer-panel-body-height: 246px !default;
+$--transfer-item-height: 30px !default;
+$--transfer-item-hover-background: $--color-text-secondary !default;
+$--transfer-filter-height: 32px !default;
+
+/* Header
+  --------------------------*/
+$--header-padding: 0 20px !default;
+
+/* Footer
+--------------------------*/
+$--footer-padding: 0 20px !default;
+
+/* Main
+--------------------------*/
+$--main-padding: 20px !default;
+
+/* Break-point
+--------------------------*/
+$--sm: 768px !default;
+$--md: 992px !default;
+$--lg: 1200px !default;
+$--xl: 1920px !default;
+
+$--breakpoints: (
+  'xs' : (max-width: $--sm),
+  'sm' : (min-width: $--sm),
+  'md' : (min-width: $--md),
+  'lg' : (min-width: $--lg),
+  'xl' : (min-width: $--xl)
+);
+
+$--breakpoints-spec: (
+  'xs-only' : (max-width: $--sm - 1),
+  'sm-and-up' : (min-width: $--sm),
+  'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md} - 1)",
+  'sm-and-down': (max-width: $--md - 1),
+  'md-and-up' : (min-width: $--md),
+  'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg } - 1)",
+  'md-and-down': (max-width: $--lg - 1),
+  'lg-and-up' : (min-width: $--lg),
+  'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl } - 1)",
+  'lg-and-down': (max-width: $--xl - 1),
+  'xl-only' : (min-width: $--xl),
+);
diff --git a/packages/theme-chalk/src/container.scss b/packages/theme-chalk/src/container.scss
new file mode 100644
index 0000000000..df7b2aff30
--- /dev/null
+++ b/packages/theme-chalk/src/container.scss
@@ -0,0 +1,14 @@
+@import "mixins/mixins";
+
+@include b(container) {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  flex-basis: auto;
+  box-sizing: border-box;
+  min-width: 0;
+
+  @include when(vertical) {
+    flex-direction: column;
+  }
+}
diff --git a/packages/theme-chalk/src/date-picker.scss b/packages/theme-chalk/src/date-picker.scss
new file mode 100644
index 0000000000..516f05613f
--- /dev/null
+++ b/packages/theme-chalk/src/date-picker.scss
@@ -0,0 +1,12 @@
+@import "./date-picker/date-table.scss";
+@import "./date-picker/month-table.scss";
+@import "./date-picker/year-table.scss";
+@import "./date-picker/time-spinner.scss";
+@import "./date-picker/picker.scss";
+@import "./date-picker/date-picker.scss";
+@import "./date-picker/date-range-picker.scss";
+@import "./date-picker/time-range-picker.scss";
+@import "./date-picker/time-picker.scss";
+@import "./input.scss";
+@import "./scrollbar.scss";
+@import "./popper";
\ No newline at end of file
diff --git a/packages/theme-chalk/src/date-picker/date-picker.scss b/packages/theme-chalk/src/date-picker/date-picker.scss
new file mode 100644
index 0000000000..74a1750fb9
--- /dev/null
+++ b/packages/theme-chalk/src/date-picker/date-picker.scss
@@ -0,0 +1,97 @@
+@import "../common/var";
+@import "../mixins/mixins";
+@import "./picker-panel.scss";
+
+@include b(date-picker) {
+  width: 322px;
+
+  &.has-sidebar.has-time {
+    width: 434px;
+  }
+
+  &.has-sidebar {
+    width: 438px;
+  }
+
+  &.has-time .el-picker-panel__body-wrapper {
+    position: relative;
+  }
+
+  .el-picker-panel__content {
+    width: 292px;
+  }
+
+  table {
+    table-layout: fixed;
+    width: 100%;
+  }
+
+  @include e(editor-wrap) {
+    position: relative;
+    display: table-cell;
+    padding: 0 5px;
+  }
+
+  @include e(time-header) {
+    position: relative;
+    border-bottom: 1px solid $--datepicker-inner-border-color;
+    font-size: 12px;
+    padding: 8px 5px 5px 5px;
+    display: table;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  @include e(header) {
+    margin: 12px;
+    text-align: center;
+
+    @include m(bordered) {
+      margin-bottom: 0;
+      padding-bottom: 12px;
+      border-bottom: solid 1px $--border-color-lighter;
+
+      & + .el-picker-panel__content {
+        margin-top: 0;
+      }
+    }
+  }
+
+  @include e(header-label) {
+    font-size: 16px;
+    font-weight: 500;
+    padding: 0 5px;
+    line-height: 22px;
+    text-align: center;
+    cursor: pointer;
+    color: $--color-text-regular;
+
+    &:hover {
+      color: $--datepicker-text-hover-color;
+    }
+
+    &.active {
+      color: $--datepicker-active-color;
+    }
+  }
+
+  @include e(prev-btn) {
+    float: left;
+  }
+
+  @include e(next-btn) {
+    float: right;
+  }
+
+  @include e(time-wrap) {
+    padding: 10px;
+    text-align: center;
+  }
+
+  @include e(time-label) {
+    float: left;
+    cursor: pointer;
+    line-height: 30px;
+    margin-left: 10px;
+  }
+}
diff --git a/packages/theme-chalk/src/date-picker/date-range-picker.scss b/packages/theme-chalk/src/date-picker/date-range-picker.scss
new file mode 100644
index 0000000000..374acdea16
--- /dev/null
+++ b/packages/theme-chalk/src/date-picker/date-range-picker.scss
@@ -0,0 +1,104 @@
+@import "../common/var";
+
+@include b(date-range-picker) {
+  width: 646px;
+
+  &.has-sidebar {
+    width: 756px;
+  }
+
+  table {
+    table-layout: fixed;
+    width: 100%;
+  }
+
+  .el-picker-panel__body {
+    min-width: 513px;
+  }
+
+  .el-picker-panel__content {
+    margin: 0;
+  }
+
+  @include e(header) {
+    position: relative;
+    text-align: center;
+    height: 28px;
+
+    [class*=arrow-left] {
+      float: left;
+    }
+
+    [class*=arrow-right] {
+      float: right;
+    }
+
+    div {
+      font-size: 16px;
+      font-weight: 500;
+      margin-right: 50px;
+    }
+  }
+
+  @include e(content) {
+    float: left;
+    width: 50%;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 16px;
+
+    @include when(left) {
+      border-right: 1px solid $--datepicker-inner-border-color;
+    }
+
+    @include when(right) {
+      .el-date-range-picker__header {
+
+        div {
+          margin-left: 50px;
+          margin-right: 50px;
+        }
+      }
+    }
+  }
+
+  @include e(editors-wrap) {
+    box-sizing: border-box;
+    display: table-cell;
+
+    @include when(right) {
+      text-align: right;
+    }
+  }
+
+  @include e(time-header) {
+    position: relative;
+    border-bottom: 1px solid $--datepicker-inner-border-color;
+    font-size: 12px;
+    padding: 8px 5px 5px 5px;
+    display: table;
+    width: 100%;
+    box-sizing: border-box;
+
+    > .el-icon-arrow-right {
+      font-size: 20px;
+      vertical-align: middle;
+      display: table-cell;
+      color: $--datepicker-icon-color;
+    }
+  }
+
+  @include e(time-picker-wrap) {
+    position: relative;
+    display: table-cell;
+    padding: 0 5px;
+
+    .el-picker-panel {
+      position: absolute;
+      top: 13px;
+      right: 0;
+      z-index: 1;
+      background: $--color-white;
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/date-picker/date-table.scss b/packages/theme-chalk/src/date-picker/date-table.scss
new file mode 100644
index 0000000000..94bb24a0d8
--- /dev/null
+++ b/packages/theme-chalk/src/date-picker/date-table.scss
@@ -0,0 +1,151 @@
+@import "../common/var";
+@import "../mixins/mixins";
+
+@include b(date-table) {
+  font-size: 12px;
+  user-select: none;
+
+  @include when(week-mode) {
+    .el-date-table__row {
+      &:hover {
+        div {
+          background-color: $--datepicker-inrange-color;
+        }
+        td.available:hover {
+          color: $--datepicker-color;
+        }
+        td:first-child div {
+          margin-left: 5px;
+          border-top-left-radius: 15px;
+          border-bottom-left-radius: 15px;
+        }
+        td:last-child div {
+          margin-right: 5px;
+          border-top-right-radius: 15px;
+          border-bottom-right-radius: 15px;
+        }
+      }
+
+      &.current div {
+        background-color: $--datepicker-inrange-color;
+      }
+    }
+  }
+
+  td {
+    width: 32px;
+    height: 30px;
+    padding: 4px 0;
+    box-sizing: border-box;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+
+    & div {
+      height: 30px;
+      padding: 3px 0;
+      box-sizing: border-box;
+    }
+
+    & span {
+      width: 24px;
+      height: 24px;
+      display: block;
+      margin: 0 auto;
+      line-height: 24px;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      border-radius: 50%;
+    }
+
+    &.next-month,
+    &.prev-month {
+      color: $--datepicker-off-color;
+    }
+
+    &.today {
+      position: relative;
+      span {
+        color: $--color-primary;
+        font-weight: bold;
+      }
+      &.start-date span,
+      &.end-date span {
+        color: $--color-white;
+      }
+    }
+
+    &.available:hover {
+      color: $--datepicker-text-hover-color;
+    }
+
+    &.in-range div {
+      background-color: $--datepicker-inrange-color;
+      &:hover {
+        background-color: $--datepicker-inrange-hover-color;
+      }
+    }
+
+    &.current:not(.disabled) span {
+      color: $--color-white;
+      background-color: $--datepicker-active-color;
+    }
+    &.start-date div,
+    &.end-date div {
+      color: $--color-white;
+    }
+
+    &.start-date span,
+    &.end-date span {
+      background-color: $--datepicker-active-color;
+    }
+
+    &.start-date div {
+      margin-left: 5px;
+      border-top-left-radius: 15px;
+      border-bottom-left-radius: 15px;
+    }
+
+    &.end-date div {
+      margin-right: 5px;
+      border-top-right-radius: 15px;
+      border-bottom-right-radius: 15px;
+    }
+
+    &.disabled div {
+      background-color: $--background-color-base;
+      opacity: 1;
+      cursor: not-allowed;
+      color: $--color-text-placeholder;
+    }
+
+    &.selected div {
+      margin-left: 5px;
+      margin-right: 5px;
+      background-color: $--datepicker-inrange-color;
+      border-radius: 15px;
+      &:hover {
+        background-color: $--datepicker-inrange-hover-color;
+      }
+    }
+
+    &.selected span {
+      background-color: $--datepicker-active-color;
+      color: $--color-white;
+      border-radius: 15px;
+    }
+
+    &.week {
+      font-size: 80%;
+      color: $--datepicker-header-color;
+    }
+  }
+
+  th {
+    padding: 5px;
+    color: $--datepicker-header-color;
+    font-weight: 400;
+    border-bottom: solid 1px $--border-color-lighter;
+  }
+}
diff --git a/packages/theme-chalk/src/date-picker/month-table.scss b/packages/theme-chalk/src/date-picker/month-table.scss
new file mode 100644
index 0000000000..37b7c1ecb8
--- /dev/null
+++ b/packages/theme-chalk/src/date-picker/month-table.scss
@@ -0,0 +1,40 @@
+@import "../common/var";
+
+@include b(month-table) {
+  font-size: 12px;
+  margin: -1px;
+  border-collapse: collapse;
+
+  td {
+    text-align: center;
+    padding: 20px 3px;
+    cursor: pointer;
+
+    &.disabled .cell {
+      background-color: $--background-color-base;
+      cursor: not-allowed;
+      color: $--color-text-placeholder;
+
+      &:hover {
+        color: $--color-text-placeholder;
+      }
+    }
+
+    .cell {
+      width: 48px;
+      height: 32px;
+      display: block;
+      line-height: 32px;
+      color: $--datepicker-color;
+      margin: 0 auto;
+
+      &:hover {
+        color: $--datepicker-text-hover-color;
+      }
+    }
+
+    &.current:not(.disabled) .cell {
+      color: $--datepicker-active-color;
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/date-picker/picker-panel.scss b/packages/theme-chalk/src/date-picker/picker-panel.scss
new file mode 100644
index 0000000000..3a8e386a6a
--- /dev/null
+++ b/packages/theme-chalk/src/date-picker/picker-panel.scss
@@ -0,0 +1,117 @@
+@import "../common/var";
+
+@include b(picker-panel) {
+  color: $--color-text-regular;
+  border: 1px solid $--datepicker-border-color;
+  box-shadow: $--box-shadow-light;
+  background: $--color-white;
+  border-radius: $--border-radius-base;
+  line-height: 30px;
+  margin: 5px 0;
+
+  @include e((body, body-wrapper)) {
+    &::after {
+      content: "";
+      display: table;
+      clear: both;
+    }
+  }
+
+  @include e(content) {
+    position: relative;
+    margin: 15px;
+  }
+
+  @include e(footer) {
+    border-top: 1px solid $--datepicker-inner-border-color;
+    padding: 4px;
+    text-align: right;
+    background-color: $--color-white;
+    position: relative;
+    font-size: 0;
+  }
+
+  @include e(shortcut) {
+    display: block;
+    width: 100%;
+    border: 0;
+    background-color: transparent;
+    line-height: 28px;
+    font-size: 14px;
+    color: $--datepicker-color;
+    padding-left: 12px;
+    text-align: left;
+    outline: none;
+    cursor: pointer;
+
+    &:hover {
+      color: $--datepicker-text-hover-color;
+    }
+
+    &.active {
+      background-color: #e6f1fe;
+      color: $--datepicker-active-color;
+    }
+  }
+
+  @include e(btn) {
+    border: 1px solid #dcdcdc;
+    color: #333;
+    line-height: 24px;
+    border-radius: 2px;
+    padding: 0 20px;
+    cursor: pointer;
+    background-color: transparent;
+    outline: none;
+    font-size: 12px;
+
+    &[disabled] {
+      color: #cccccc;
+      cursor: not-allowed;
+    }
+  }
+
+  @include e(icon-btn) {
+    font-size: 12px;
+    color: $--datepicker-icon-color;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    outline: none;
+    margin-top: 8px;
+
+    &:hover {
+      color: $--datepicker-text-hover-color;
+    }
+
+    @include when(disabled) {
+      color: $--font-color-disabled-base;
+
+      &:hover {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  @include e(link-btn) {
+    vertical-align: middle;
+  }
+}
+
+.el-picker-panel *[slot=sidebar],
+.el-picker-panel__sidebar {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 110px;
+  border-right: 1px solid $--datepicker-inner-border-color;
+  box-sizing: border-box;
+  padding-top: 6px;
+  background-color: $--color-white;
+  overflow: auto;
+}
+
+.el-picker-panel *[slot=sidebar] + .el-picker-panel__body,
+.el-picker-panel__sidebar + .el-picker-panel__body {
+  margin-left: 110px;
+}
diff --git a/packages/theme-chalk/src/date-picker/picker.scss b/packages/theme-chalk/src/date-picker/picker.scss
new file mode 100644
index 0000000000..afb4860453
--- /dev/null
+++ b/packages/theme-chalk/src/date-picker/picker.scss
@@ -0,0 +1,190 @@
+@import "../mixins/mixins";
+@import "../common/var";
+@import "../common/transition";
+
+@include b(date-editor) {
+  position: relative;
+  display: inline-block;
+  text-align: left;
+
+  &.el-input,
+  &.el-input__inner {
+    width: 220px;
+  }
+
+  @include m((daterange, timerange)) {
+    &.el-input,
+    &.el-input__inner {
+      width: 350px;
+    }
+  }
+
+  @include m(datetimerange) {
+    &.el-input,
+    &.el-input__inner {
+      width: 400px;
+    }
+  }
+
+  @include m(dates) {
+    .el-input__inner {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .el-icon-circle-close {
+    cursor: pointer;
+  }
+
+  .el-range__icon {
+    font-size: 14px;
+    margin-left: -5px;
+    color: $--color-text-placeholder;
+    float: left;
+    line-height: 32px;
+  }
+
+  .el-range-input {
+    appearance: none;
+    border: none;
+    outline: none;
+    display: inline-block;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    width: 39%;
+    text-align: center;
+    font-size: $--font-size-base;
+    color: $--color-text-regular;
+
+    &::placeholder {
+      color: $--color-text-placeholder;
+    }
+  }
+
+  .el-range-separator {
+    display: inline-block;
+    height: 100%;
+    padding: 0 5px;
+    margin: 0;
+    text-align: center;
+    line-height: 32px;
+    font-size: 14px;
+    width: 5%;
+    color: $--color-text-primary;
+  }
+
+  .el-range__close-icon {
+    font-size: 14px;
+    color: $--color-text-placeholder;
+    width: 25px;
+    display: inline-block;
+    float: right;
+    line-height: 32px;
+  }
+}
+
+@include b(range-editor) {
+  &.el-input__inner {
+    display: inline-flex;
+    align-items: center;
+    padding: 3px 10px;
+  }
+
+  .el-range-input {
+    line-height: 1;
+  }
+
+  @include when(active) {
+    border-color: $--color-primary;
+
+    &:hover {
+      border-color: $--color-primary;
+    }
+  }
+
+  @include m(medium) {
+    &.el-input__inner {
+      height: $--input-medium-height;
+    }
+
+    .el-range-separator {
+      line-height: 28px;
+      font-size: $--input-medium-font-size;
+    }
+
+    .el-range-input {
+      font-size: $--input-medium-font-size;
+    }
+
+    .el-range__icon,
+    .el-range__close-icon {
+      line-height: 28px;
+    }
+  }
+
+  @include m(small) {
+    &.el-input__inner {
+      height: $--input-small-height;
+    }
+
+    .el-range-separator {
+      line-height: 24px;
+      font-size: $--input-small-font-size;
+    }
+
+    .el-range-input {
+      font-size: $--input-small-font-size;
+    }
+
+    .el-range__icon,
+    .el-range__close-icon {
+      line-height: 24px;
+    }
+  }
+
+  @include m(mini) {
+    &.el-input__inner {
+      height: $--input-mini-height;
+    }
+
+    .el-range-separator {
+      line-height: 20px;
+      font-size: $--input-mini-font-size;
+    }
+
+    .el-range-input {
+      font-size: $--input-mini-font-size;
+    }
+
+    .el-range__icon,
+    .el-range__close-icon {
+      line-height: 20px;
+    }
+  }
+
+  @include when(disabled) {
+    background-color: $--input-disabled-fill;
+    border-color: $--input-disabled-border;
+    color: $--input-disabled-color;
+    cursor: not-allowed;
+
+    &:hover, &:focus {
+      border-color: $--input-disabled-border;
+    }
+
+    input {
+      background-color: $--input-disabled-fill;
+      color: $--input-disabled-color;
+      cursor: not-allowed;
+      &::placeholder {
+        color: $--input-disabled-placeholder-color;
+      }
+    }
+
+    .el-range-separator {
+      color: $--input-disabled-color;
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/date-picker/time-picker.scss b/packages/theme-chalk/src/date-picker/time-picker.scss
new file mode 100644
index 0000000000..e747009844
--- /dev/null
+++ b/packages/theme-chalk/src/date-picker/time-picker.scss
@@ -0,0 +1,84 @@
+@import "../common/var";
+
+@include b(time-panel) {
+  margin: 5px 0;
+  border: solid 1px $--datepicker-border-color;
+  background-color: $--color-white;
+  box-shadow: $--box-shadow-light;
+  border-radius: 2px;
+  position: absolute;
+  width: 180px;
+  left: 0;
+  z-index: $--index-top;
+  user-select: none;
+
+  @include e(content) {
+    font-size: 0;
+    position: relative;
+    overflow: hidden;
+
+    &::after, &::before {
+      content: "";
+      top: 50%;
+      position: absolute;
+      margin-top: -15px;
+      height: 32px;
+      z-index: -1;
+      left: 0;
+      right: 0;
+      box-sizing: border-box;
+      padding-top: 6px;
+      text-align: left;
+      border-top: 1px solid $--border-color-light;
+      border-bottom: 1px solid $--border-color-light;
+    }
+
+    &::after {
+      left: 50%;
+      margin-left: 12%;
+      margin-right: 12%;
+    }
+
+    &::before {
+      padding-left: 50%;
+      margin-right: 12%;
+      margin-left: 12%;
+    }
+
+    &.has-seconds {
+      &::after {
+        left: calc(100% / 3 * 2);
+      }
+
+      &::before {
+        padding-left: calc(100% / 3);
+      }
+    }
+  }
+
+  @include e(footer) {
+    border-top: 1px solid $--datepicker-inner-border-color;
+    padding: 4px;
+    height: 36px;
+    line-height: 25px;
+    text-align: right;
+    box-sizing: border-box;
+  }
+
+  @include e(btn) {
+    border: none;
+    line-height: 28px;
+    padding: 0 5px;
+    margin: 0 5px;
+    cursor: pointer;
+    background-color: transparent;
+    outline: none;
+    font-size: 12px;
+    color: $--color-text-primary;
+
+    &.confirm {
+      font-weight: 800;
+      color: $--datepicker-active-color;
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/date-picker/time-range-picker.scss b/packages/theme-chalk/src/date-picker/time-range-picker.scss
new file mode 100644
index 0000000000..a2bf6293db
--- /dev/null
+++ b/packages/theme-chalk/src/date-picker/time-range-picker.scss
@@ -0,0 +1,31 @@
+@import "../common/var";
+
+@include b(time-range-picker) {
+  width: 354px;
+  overflow: visible;
+
+  @include e(content) {
+    position: relative;
+    text-align: center;
+    padding: 10px;
+  }
+
+  @include e(cell) {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 4px 7px 7px;
+    width: 50%;
+    display: inline-block;
+  }
+
+  @include e(header) {
+    margin-bottom: 5px;
+    text-align: center;
+    font-size: 14px;
+  }
+
+  @include e(body) {
+    border-radius:2px;
+    border: 1px solid $--datepicker-border-color;
+  }
+}
diff --git a/packages/theme-chalk/src/date-picker/time-spinner.scss b/packages/theme-chalk/src/date-picker/time-spinner.scss
new file mode 100644
index 0000000000..c70260a057
--- /dev/null
+++ b/packages/theme-chalk/src/date-picker/time-spinner.scss
@@ -0,0 +1,110 @@
+@import "../common/var";
+
+@include b(time-spinner) {
+  &.has-seconds {
+    .el-time-spinner__wrapper {
+      width: 33.3%;
+    }
+  }
+
+  @include e(wrapper) {
+    max-height: 190px;
+    overflow: auto;
+    display: inline-block;
+    width: 50%;
+    vertical-align: top;
+    position: relative;
+
+    & .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
+      padding-bottom: 15px;
+    }
+
+    @include when(arrow) {
+      box-sizing: border-box;
+      text-align: center;
+      overflow: hidden;
+
+      .el-time-spinner__list {
+        transform: translateY(-32px);
+      }
+
+      .el-time-spinner__item:hover:not(.disabled):not(.active) {
+        background: $--color-white;
+        cursor: default;
+      }
+    }
+  }
+
+  @include e(arrow) {
+    font-size: 12px;
+    color: $--color-text-secondary;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    z-index: $--index-normal;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    cursor: pointer;
+
+    &:hover {
+      color: $--color-primary;
+    }
+
+    &.el-icon-arrow-up {
+      top: 10px;
+    }
+
+    &.el-icon-arrow-down {
+      bottom: 10px;
+    }
+  }
+
+  @include e(input) {
+    &.el-input {
+      width: 70%;
+
+      .el-input__inner {
+        padding: 0;
+        text-align: center;
+      }
+    }
+  }
+
+  @include e(list) {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    text-align: center;
+
+    &::after,
+    &::before {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 80px;
+    }
+  }
+
+  @include e(item) {
+    height: 32px;
+    line-height: 32px;
+    font-size: 12px;
+    color: $--color-text-regular;
+
+    &:hover:not(.disabled):not(.active) {
+      background: $--background-color-base;
+      cursor: pointer;
+    }
+
+    &.active:not(.disabled) {
+      color: $--color-text-primary;
+      font-weight: bold;
+    }
+
+    &.disabled {
+      color: $--color-text-placeholder;
+      cursor: not-allowed;
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/date-picker/year-table.scss b/packages/theme-chalk/src/date-picker/year-table.scss
new file mode 100644
index 0000000000..9e2d60c95e
--- /dev/null
+++ b/packages/theme-chalk/src/date-picker/year-table.scss
@@ -0,0 +1,44 @@
+@import "../common/var";
+
+@include b(year-table) {
+  font-size: 12px;
+  margin: -1px;
+  border-collapse: collapse;
+
+  .el-icon {
+    color: $--datepicker-icon-color;
+  }
+
+  td {
+    text-align: center;
+    padding: 20px 3px;
+    cursor: pointer;
+
+    &.disabled .cell {
+      background-color: $--background-color-base;
+      cursor: not-allowed;
+      color: $--color-text-placeholder;
+
+      &:hover {
+        color: $--color-text-placeholder;
+      }
+    }
+
+    .cell {
+      width: 48px;
+      height: 32px;
+      display: block;
+      line-height: 32px;
+      color: $--datepicker-color;
+      margin: 0 auto;
+
+      &:hover {
+        color: $--datepicker-text-hover-color;
+      }
+    }
+
+    &.current:not(.disabled) .cell {
+      color: $--datepicker-active-color;
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/dialog.scss b/packages/theme-chalk/src/dialog.scss
new file mode 100644
index 0000000000..797e232f57
--- /dev/null
+++ b/packages/theme-chalk/src/dialog.scss
@@ -0,0 +1,122 @@
+@import "mixins/mixins";
+@import "mixins/utils";
+@import "common/var";
+@import "common/popup";
+
+@include b(dialog) {
+  position: relative;
+  margin: 0 auto 50px;
+  background: $--color-white;
+  border-radius: $--border-radius-small;
+  box-shadow: $--dialog-box-shadow;
+  box-sizing: border-box;
+  width: 50%;
+
+  @include when(fullscreen) {
+    width: 100%;
+    margin-top: 0;
+    margin-bottom: 0;
+    height: 100%;
+    overflow: auto;
+  }
+
+  @include e(wrapper) {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: auto;
+    margin: 0;
+  }
+
+  @include e(header) {
+    padding: $--dialog-padding-primary;
+    padding-bottom: 10px;
+  }
+
+  @include e(headerbtn) {
+    position: absolute;
+    top: $--dialog-padding-primary;
+    right: $--dialog-padding-primary;
+    padding: 0;
+    background: transparent;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    font-size: $--message-close-size;
+
+    .el-dialog__close {
+      color: $--color-info;
+    }
+
+    &:focus, &:hover {
+      .el-dialog__close {
+        color: $--color-primary;
+      }
+    }
+  }
+
+  @include e(title) {
+    line-height: $--dialog-line-height;
+    font-size: $--dialog-title-font-size;
+    color: $--color-text-primary;
+  }
+
+  @include e(body) {
+    padding: 30px 20px;
+    color: $--color-text-regular;
+    font-size: $--dialog-font-size;
+  }
+
+  @include e(footer) {
+    padding: $--dialog-padding-primary;
+    padding-top: 10px;
+    text-align: right;
+    box-sizing: border-box;
+  }
+
+  // 内容居中布局
+  @include m(center) {
+    text-align: center;
+
+    @include e(body) {
+      text-align: initial;
+      padding: 25px ($--dialog-padding-primary + 5px) 30px;
+    }
+
+    @include e(footer) {
+      text-align: inherit;
+    }
+  }
+}
+
+.dialog-fade-enter-active {
+  animation: dialog-fade-in .3s;
+}
+
+.dialog-fade-leave-active {
+  animation: dialog-fade-out .3s;
+}
+
+@keyframes dialog-fade-in {
+  0% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes dialog-fade-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  100% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+}
diff --git a/packages/theme-chalk/src/display.scss b/packages/theme-chalk/src/display.scss
new file mode 100644
index 0000000000..fac8b494e8
--- /dev/null
+++ b/packages/theme-chalk/src/display.scss
@@ -0,0 +1,12 @@
+@import "common/var";
+@import "mixins/mixins";
+
+.hidden {
+  @each $break-point-name, $value in $--breakpoints-spec {
+    &-#{$break-point-name} {
+      @include res($break-point-name, $--breakpoints-spec) {
+        display: none !important;
+      }
+    }
+  }
+}
diff --git a/packages/theme-default/src/dropdown-item.css b/packages/theme-chalk/src/dropdown-item.scss
similarity index 100%
rename from packages/theme-default/src/dropdown-item.css
rename to packages/theme-chalk/src/dropdown-item.scss
diff --git a/packages/theme-default/src/dropdown-menu.css b/packages/theme-chalk/src/dropdown-menu.scss
similarity index 100%
rename from packages/theme-default/src/dropdown-menu.css
rename to packages/theme-chalk/src/dropdown-menu.scss
diff --git a/packages/theme-chalk/src/dropdown.scss b/packages/theme-chalk/src/dropdown.scss
new file mode 100644
index 0000000000..5871f83d16
--- /dev/null
+++ b/packages/theme-chalk/src/dropdown.scss
@@ -0,0 +1,169 @@
+@import "mixins/mixins";
+@import "common/var";
+@import "button";
+@import "./popper";
+
+@include b(dropdown) {
+  display: inline-block;
+  position: relative;
+  color: $--color-text-regular;
+  font-size: $--font-size-base;
+
+  .el-button-group {
+    display: block;
+    .el-button {
+      float: none;
+    }
+  }
+
+  & .el-dropdown__caret-button {
+    padding-left: 5px;
+    padding-right: 5px;
+    position: relative;
+    border-left: none;
+
+    &::before {
+      $gap: 5px;
+
+      content: '';
+      position: absolute;
+      display: block;
+      width: 1px;
+      top: $gap;
+      bottom: $gap;
+      left: 0;
+      background: mix(white, transparent, 50%);
+    }
+
+    &:hover {
+      &::before {
+        top: 0;
+        bottom: 0;
+      }
+    }
+
+    & .el-dropdown__icon {
+      padding-left: 0;
+    }
+  }
+  @include e(icon) {
+    font-size: 12px;
+    margin: 0 3px;
+  }
+
+  .el-dropdown-selfdefine { // 自定义
+    &:focus:active, &:focus:not(.focusing) {
+      outline-width: 0;
+    }
+  }
+}
+
+@include b(dropdown-menu) {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  padding: 10px 0;
+  margin: 5px 0;
+  background-color: $--color-white;
+  border: 1px solid $--border-color-lighter;
+  border-radius: $--border-radius-base;
+  box-shadow: $--dropdown-menu-box-shadow;
+
+  @include e(item) {
+    list-style: none;
+    line-height: 36px;
+    padding: 0 20px;
+    margin: 0;
+    font-size: $--font-size-base;
+    color: $--color-text-regular;
+    cursor: pointer;
+    outline: none;
+    &:not(.is-disabled):hover, &:focus {
+      background-color: $--dropdown-menuItem-hover-fill;
+      color: $--dropdown-menuItem-hover-color;
+    }
+
+    @include m(divided) {
+      $divided-offset: 6px;
+
+      position: relative;
+      margin-top: $divided-offset;
+      border-top: 1px solid $--border-color-lighter;
+
+      &:before {
+        content: '';
+        height: $divided-offset;
+        display: block;
+        margin: 0 -20px;
+        background-color: $--color-white;
+      }
+    }
+
+    @include when(disabled) {
+      cursor: default;
+      color: $--font-color-disabled-base;
+      pointer-events: none;
+    }
+  }
+
+  @include m(medium) {
+    padding: 6px 0;
+
+    @include e(item) {
+      line-height: 30px;
+      padding: 0 17px;
+      font-size: 14px;
+
+      &.el-dropdown-menu__item--divided {
+        $divided-offset: 6px;
+        margin-top: $divided-offset;
+
+        &:before {
+          height: $divided-offset;
+          margin: 0 -17px;
+        }
+      }
+    }
+  }
+
+  @include m(small) {
+    padding: 6px 0;
+
+    @include e(item) {
+      line-height: 27px;
+      padding: 0 15px;
+      font-size: 13px;
+
+      &.el-dropdown-menu__item--divided {
+        $divided-offset: 4px;
+        margin-top: $divided-offset;
+
+        &:before {
+          height: $divided-offset;
+          margin: 0 -15px;
+        }
+      }
+    }
+  }
+
+  @include m(mini) {
+    padding: 3px 0;
+
+    @include e(item) {
+      line-height: 24px;
+      padding: 0 10px;
+      font-size: 12px;
+
+      &.el-dropdown-menu__item--divided {
+        $divided-offset: 3px;
+        margin-top: $divided-offset;
+
+        &:before {
+          height: $divided-offset;
+          margin: 0 -10px;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/fonts/element-icons.ttf b/packages/theme-chalk/src/fonts/element-icons.ttf
new file mode 100644
index 0000000000..73bc90f4ab
Binary files /dev/null and b/packages/theme-chalk/src/fonts/element-icons.ttf differ
diff --git a/packages/theme-chalk/src/fonts/element-icons.woff b/packages/theme-chalk/src/fonts/element-icons.woff
new file mode 100644
index 0000000000..28da65d498
Binary files /dev/null and b/packages/theme-chalk/src/fonts/element-icons.woff differ
diff --git a/packages/theme-chalk/src/footer.scss b/packages/theme-chalk/src/footer.scss
new file mode 100644
index 0000000000..71a67b001a
--- /dev/null
+++ b/packages/theme-chalk/src/footer.scss
@@ -0,0 +1,8 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(footer) {
+  padding: $--footer-padding;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
diff --git a/packages/theme-default/src/form-item.css b/packages/theme-chalk/src/form-item.scss
similarity index 100%
rename from packages/theme-default/src/form-item.css
rename to packages/theme-chalk/src/form-item.scss
diff --git a/packages/theme-chalk/src/form.scss b/packages/theme-chalk/src/form.scss
new file mode 100644
index 0000000000..786f1e54be
--- /dev/null
+++ b/packages/theme-chalk/src/form.scss
@@ -0,0 +1,174 @@
+@import "mixins/mixins";
+@import "mixins/utils";
+@import "common/var";
+
+@include b(form) {
+  @include m(label-left) {
+    & .el-form-item__label {
+      text-align: left;
+    }
+  }
+  @include m(label-top) {
+    & .el-form-item__label {
+      float: none;
+      display: inline-block;
+      text-align: left;
+      padding: 0 0 10px 0;
+    }
+  }
+  @include m(inline) {
+    & .el-form-item {
+      display: inline-block;
+      margin-right: 10px;
+      vertical-align: top;
+    }
+    & .el-form-item__label {
+      float: none;
+      display: inline-block;
+    }
+    & .el-form-item__content {
+      display: inline-block;
+      vertical-align: top;
+    }
+    &.el-form--label-top .el-form-item__content {
+      display: block;
+    }
+  }
+}
+@include b(form-item) {
+  margin-bottom: 22px;
+  @include utils-clearfix;
+
+  & .el-form-item {
+    margin-bottom: 0;
+  }
+
+  & .el-input__validateIcon {
+    display: none;
+  }
+
+  @include m(medium) {
+    .el-form-item__label {
+      line-height: 36px;
+    }
+    .el-form-item__content {
+      line-height: 36px;
+    }
+  }
+  @include m(small) {
+    .el-form-item__label {
+      line-height: 32px;
+    }
+    .el-form-item__content {
+      line-height: 32px;
+    }
+    &.el-form-item {
+      margin-bottom: 18px;
+    }
+    .el-form-item__error {
+      padding-top: 2px;
+    }
+  }
+  @include m(mini) {
+    .el-form-item__label {
+      line-height: 28px;
+    }
+    .el-form-item__content {
+      line-height: 28px;
+    }
+    &.el-form-item {
+      margin-bottom: 18px;
+    }
+    .el-form-item__error {
+      padding-top: 1px;
+    }
+  }
+
+  @include e(label) {
+    text-align: right;
+    vertical-align: middle;
+    float: left;
+    font-size: 14px;
+    color: $--color-text-regular;
+    line-height: 40px;
+    padding: 0 12px 0 0;
+    box-sizing: border-box;
+  }
+  @include e(content) {
+    line-height: 40px;
+    position: relative;
+    font-size: 14px;
+    @include utils-clearfix;
+
+    .el-input-group {
+      vertical-align: middle;
+    }
+  }
+  @include e(error) {
+    color: $--color-danger;
+    font-size: 12px;
+    line-height: 1;
+    padding-top: 4px;
+    position: absolute;
+    top: 100%;
+    left: 0;
+
+    @include m(inline) {
+      position: relative;
+      top: auto;
+      left: auto;
+      display: inline-block;
+      margin-left: 10px;
+    }
+  }
+
+  @include when(required) {
+    @include pseudo('not(.is-no-asterisk)') {
+      & > .el-form-item__label:before {
+        content: '*';
+        color: $--color-danger;
+        margin-right: 4px;
+      }
+    }
+  }
+
+  @include when(error) {
+    & .el-input__inner,
+    & .el-textarea__inner {
+      &, &:focus {
+        border-color: $--color-danger;
+      }
+    }
+    & .el-input-group__append,
+    & .el-input-group__prepend {
+      & .el-input__inner {
+        border-color: transparent;
+      }
+    }
+    .el-input__validateIcon {
+      color: $--color-danger;
+    }
+  }
+  @include when(success) {
+    & .el-input__inner,
+    & .el-textarea__inner {
+      &, &:focus {
+        border-color: $--color-success;
+      }
+    }
+    & .el-input-group__append,
+    & .el-input-group__prepend {
+      & .el-input__inner {
+        border-color: transparent;
+      }
+    }
+    .el-input__validateIcon {
+      color: $--color-success;
+    }
+  }
+  @include m(feedback) {
+    .el-input__validateIcon {
+      display: inline-block;
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/header.scss b/packages/theme-chalk/src/header.scss
new file mode 100644
index 0000000000..9e8a1d8ed0
--- /dev/null
+++ b/packages/theme-chalk/src/header.scss
@@ -0,0 +1,8 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(header) {
+  padding: $--header-padding;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
diff --git a/packages/theme-chalk/src/icon.scss b/packages/theme-chalk/src/icon.scss
new file mode 100644
index 0000000000..d1c05776f4
--- /dev/null
+++ b/packages/theme-chalk/src/icon.scss
@@ -0,0 +1,186 @@
+@import "common/var";
+
+@font-face {
+  font-family: 'element-icons';
+  src: url('#{$--font-path}/element-icons.woff') format('woff'), /* chrome, firefox */
+       url('#{$--font-path}/element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  font-weight: normal;
+  font-style: normal
+}
+
+[class^="el-icon-"], [class*=" el-icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'element-icons' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  vertical-align: baseline;
+  display: inline-block;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.el-icon-info:before { content: "\e61a"; }
+
+.el-icon-error:before { content: "\e62c"; }
+
+.el-icon-success:before { content: "\e62d"; }
+
+.el-icon-warning:before { content: "\e62e"; }
+
+.el-icon-question:before { content: "\e634"; }
+
+.el-icon-back:before { content: "\e606"; }
+
+.el-icon-arrow-left:before { content: "\e600"; }
+
+.el-icon-arrow-down:before { content: "\e603"; }
+
+.el-icon-arrow-right:before { content: "\e604"; }
+
+.el-icon-arrow-up:before { content: "\e605"; }
+
+.el-icon-caret-left:before { content: "\e60a"; }
+
+.el-icon-caret-bottom:before { content: "\e60b"; }
+
+.el-icon-caret-top:before { content: "\e60c"; }
+
+.el-icon-caret-right:before { content: "\e60e"; }
+
+.el-icon-d-arrow-left:before { content: "\e610"; }
+
+.el-icon-d-arrow-right:before { content: "\e613"; }
+
+.el-icon-minus:before { content: "\e621"; }
+
+.el-icon-plus:before { content: "\e62b"; }
+
+.el-icon-remove:before { content: "\e635"; }
+
+.el-icon-circle-plus:before { content: "\e601"; }
+
+.el-icon-remove-outline:before { content: "\e63c"; }
+
+.el-icon-circle-plus-outline:before { content: "\e602"; }
+
+.el-icon-close:before { content: "\e60f"; }
+
+.el-icon-check:before { content: "\e611"; }
+
+.el-icon-circle-close:before { content: "\e607"; }
+
+.el-icon-circle-check:before { content: "\e639"; }
+
+.el-icon-circle-close-outline:before { content: "\e609"; }
+
+.el-icon-circle-check-outline:before { content: "\e63e"; }
+
+.el-icon-zoom-out:before { content: "\e645"; }
+
+.el-icon-zoom-in:before { content: "\e641"; }
+
+.el-icon-d-caret:before { content: "\e615"; }
+
+.el-icon-sort:before { content: "\e640"; }
+
+.el-icon-sort-down:before { content: "\e630"; }
+
+.el-icon-sort-up:before { content: "\e631"; }
+
+.el-icon-tickets:before { content: "\e63f"; }
+
+.el-icon-document:before { content: "\e614"; }
+
+.el-icon-goods:before { content: "\e618"; }
+
+.el-icon-sold-out:before { content: "\e63b"; }
+
+.el-icon-news:before { content: "\e625"; }
+
+.el-icon-message:before { content: "\e61b"; }
+
+.el-icon-date:before { content: "\e608"; }
+
+.el-icon-printer:before { content: "\e62f"; }
+
+.el-icon-time:before { content: "\e642"; }
+
+.el-icon-bell:before { content: "\e622"; }
+
+.el-icon-mobile-phone:before { content: "\e624"; }
+
+.el-icon-service:before { content: "\e63a"; }
+
+.el-icon-view:before { content: "\e643"; }
+
+.el-icon-menu:before { content: "\e620"; }
+
+.el-icon-more:before { content: "\e646"; }
+
+.el-icon-more-outline:before { content: "\e626"; }
+
+.el-icon-star-on:before { content: "\e637"; }
+
+.el-icon-star-off:before { content: "\e63d"; }
+
+.el-icon-location:before { content: "\e61d"; }
+
+.el-icon-location-outline:before { content: "\e61f"; }
+
+.el-icon-phone:before { content: "\e627"; }
+
+.el-icon-phone-outline:before { content: "\e628"; }
+
+.el-icon-picture:before { content: "\e629"; }
+
+.el-icon-picture-outline:before { content: "\e62a"; }
+
+.el-icon-delete:before { content: "\e612"; }
+
+.el-icon-search:before { content: "\e619"; }
+
+.el-icon-edit:before { content: "\e61c"; }
+
+.el-icon-edit-outline:before { content: "\e616"; }
+
+.el-icon-rank:before { content: "\e632"; }
+
+.el-icon-refresh:before { content: "\e633"; }
+
+.el-icon-share:before { content: "\e636"; }
+
+.el-icon-setting:before { content: "\e638"; }
+
+.el-icon-upload:before { content: "\e60d"; }
+
+.el-icon-upload2:before { content: "\e644"; }
+
+.el-icon-download:before { content: "\e617"; }
+
+.el-icon-loading:before { content: "\e61e"; }
+
+.el-icon-loading {
+  animation: rotating 2s linear infinite;
+}
+
+.el-icon--right {
+  margin-left: 5px;
+}
+.el-icon--left {
+  margin-right: 5px;
+}
+
+@keyframes rotating {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
diff --git a/packages/theme-chalk/src/index.scss b/packages/theme-chalk/src/index.scss
new file mode 100644
index 0000000000..aed9307216
--- /dev/null
+++ b/packages/theme-chalk/src/index.scss
@@ -0,0 +1,67 @@
+@import "./base.scss";
+@import "./pagination.scss";
+@import "./dialog.scss";
+@import "./autocomplete.scss";
+@import "./dropdown.scss";
+@import "./dropdown-menu.scss";
+@import "./dropdown-item.scss";
+@import "./menu.scss";
+@import "./submenu.scss";
+@import "./menu-item.scss";
+@import "./menu-item-group.scss";
+@import "./input.scss";
+@import "./input-number.scss";
+@import "./radio.scss";
+@import "./radio-group.scss";
+@import "./radio-button.scss";
+@import "./checkbox.scss";
+@import "./checkbox-button.scss";
+@import "./checkbox-group.scss";
+@import "./switch.scss";
+@import "./select.scss";
+@import "./button.scss";
+@import "./button-group.scss";
+@import "./table.scss";
+@import "./table-column.scss";
+@import "./date-picker.scss";
+@import "./time-select.scss";
+@import "./time-picker.scss";
+@import "./popover.scss";
+@import "./tooltip.scss";
+@import "./message-box.scss";
+@import "./breadcrumb.scss";
+@import "./breadcrumb-item.scss";
+@import "./form.scss";
+@import "./form-item.scss";
+@import "./tabs.scss";
+@import "./tab-pane.scss";
+@import "./tag.scss";
+@import "./tree.scss";
+@import "./alert.scss";
+@import "./notification.scss";
+@import "./slider.scss";
+@import "./loading.scss";
+@import "./row.scss";
+@import "./col.scss";
+@import "./upload.scss";
+@import "./progress.scss";
+@import "./spinner.scss";
+@import "./message.scss";
+@import "./badge.scss";
+@import "./card.scss";
+@import "./rate.scss";
+@import "./steps.scss";
+@import "./step.scss";
+@import "./carousel.scss";
+@import "./scrollbar.scss";
+@import "./carousel-item.scss";
+@import "./collapse.scss";
+@import "./collapse-item.scss";
+@import "./cascader.scss";
+@import "./color-picker.scss";
+@import "./transfer.scss";
+@import "./container.scss";
+@import "./header.scss";
+@import "./aside.scss";
+@import "./main.scss";
+@import "./footer.scss";
diff --git a/packages/theme-chalk/src/input-number.scss b/packages/theme-chalk/src/input-number.scss
new file mode 100644
index 0000000000..4e5109cb8c
--- /dev/null
+++ b/packages/theme-chalk/src/input-number.scss
@@ -0,0 +1,180 @@
+@import "mixins/mixins";
+@import "common/var";
+@import "input";
+
+@include b(input-number) {
+  position: relative;
+  display: inline-block;
+  width: 180px;
+  line-height: #{$--input-height - 2};
+
+  .el-input {
+    display: block;
+
+    &__inner {
+      -webkit-appearance: none;
+      padding-left: #{$--input-height + 10};
+      padding-right: #{$--input-height + 10};
+      text-align: center;
+    }
+  }
+
+  @include e((increase, decrease)) {
+    position: absolute;
+    z-index: 1;
+    top: 1px;
+    width: $--input-height;
+    height: auto;
+    text-align: center;
+    background: $--background-color-base;
+    color: $--color-text-regular;
+    cursor: pointer;
+    font-size: 13px;
+
+    &:hover {
+      color: $--color-primary;
+
+      &:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
+        border-color: $--input-focus-border;
+      }
+    }
+
+    &.is-disabled {
+      color: $--disabled-color-base;
+      cursor: not-allowed;
+    }
+  }
+
+  @include e(increase) {
+    right: 1px;
+    border-radius: 0 $--border-radius-base $--border-radius-base 0;
+    border-left: $--border-base;
+  }
+
+  @include e(decrease) {
+    left: 1px;
+    border-radius: $--border-radius-base 0 0 $--border-radius-base;
+    border-right: $--border-base;
+  }
+
+  @include when(disabled) {
+    @include e((increase, decrease)) {
+      border-color: $--disabled-border-base;
+      color: $--disabled-border-base;
+
+      &:hover {
+        color: $--disabled-border-base;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  @include m(medium) {
+    width: 200px;
+    line-height: #{$--input-medium-height - 2};
+
+    @include e((increase, decrease)) {
+      width: $--input-medium-height;
+      font-size: $--input-medium-font-size;
+    }
+
+    .el-input__inner {
+      padding-left: #{$--input-medium-height + 7};
+      padding-right: #{$--input-medium-height + 7};
+    }
+  }
+
+  @include m(small) {
+    width: 130px;
+    line-height: #{$--input-small-height - 2};
+
+    @include e((increase, decrease)) {
+      width: $--input-small-height;
+      font-size: $--input-small-font-size;
+
+      [class*=el-icon] {
+        transform: scale(.9);
+      }
+    }
+
+    .el-input__inner {
+      padding-left: #{$--input-small-height + 7};
+      padding-right: #{$--input-small-height + 7};
+    }
+  }
+
+  @include m(mini) {
+    width: 130px;
+    line-height: #{$--input-mini-height - 2};
+
+    @include e((increase, decrease)) {
+      width: $--input-mini-height;
+      font-size: $--input-mini-font-size;
+
+      [class*=el-icon] {
+        transform: scale(.8);
+      }
+    }
+
+    .el-input__inner {
+      padding-left: #{$--input-mini-height + 7};
+      padding-right: #{$--input-mini-height + 7};
+    }
+  }
+
+  @include when(without-controls) {
+    .el-input__inner {
+      padding-left: 15px;
+      padding-right: 15px;
+    }
+  }
+
+  @include when(controls-right) {
+    .el-input__inner {
+      padding-left: 15px;
+      padding-right: #{$--input-height + 10};
+    }
+
+    @include e((increase, decrease)) {
+      height: auto;
+      line-height: #{($--input-height - 2) / 2};
+
+      [class*=el-icon] {
+        transform: scale(.8);
+      }
+    }
+
+    @include e(increase) {
+      border-radius: 0 $--border-radius-base 0 0;
+      border-bottom: $--border-base;
+    }
+
+    @include e(decrease) {
+      right: 1px;
+      bottom: 1px;
+      top: auto;
+      left: auto;
+      border-right: none;
+      border-left: $--border-base;
+      border-radius: 0 0 $--border-radius-base 0;
+    }
+
+    &[class*=medium] {
+      [class*=increase], [class*=decrease] {
+        line-height: #{($--input-medium-height - 2) / 2};
+      }
+    }
+
+    &[class*=small] {
+      [class*=increase], [class*=decrease] {
+        line-height: #{($--input-small-height - 2) / 2};
+      }
+    }
+
+    &[class*=mini] {
+      [class*=increase], [class*=decrease] {
+        line-height: #{($--input-mini-height - 2) / 2};
+      }
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/input.scss b/packages/theme-chalk/src/input.scss
new file mode 100644
index 0000000000..acc8891480
--- /dev/null
+++ b/packages/theme-chalk/src/input.scss
@@ -0,0 +1,310 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(textarea) {
+  display: inline-block;
+  width: 100%;
+  vertical-align: bottom;
+  font-size: $--font-size-base;
+
+  @include e(inner) {
+    display: block;
+    resize: vertical;
+    padding: 5px 15px;
+    line-height: 1.5;
+    box-sizing: border-box;
+    width: 100%;
+    font-size: inherit;
+    color: $--input-color;
+    background-color: $--input-fill;
+    background-image: none;
+    border: $--input-border;
+    border-radius: $--input-border-radius;
+    transition: $--border-transition-base;
+
+    &::placeholder {
+      color: $--input-placeholder-color;
+    }
+
+    &:hover {
+      border-color: $--input-hover-border;
+    }
+
+    &:focus {
+      outline: none;
+      border-color: $--input-focus-border;
+    }
+  }
+
+  @include when(disabled) {
+    .el-textarea__inner {
+      background-color: $--input-disabled-fill;
+      border-color: $--input-disabled-border;
+      color: $--input-disabled-color;
+      cursor: not-allowed;
+
+      &::placeholder {
+        color: $--input-disabled-placeholder-color;
+      }
+    }
+  }
+}
+
+@include b(input) {
+  position: relative;
+  font-size: $--font-size-base;
+  display: inline-block;
+  width: 100%;
+  @include scroll-bar;
+
+  & .el-input__clear {
+    color: $--input-icon-color;
+    font-size: $--input-font-size;
+    line-height: 16px;
+    cursor: pointer;
+    transition: $--color-transition-base;
+
+    &:hover {
+      color: $--input-clear-hover-color;
+    }
+  }
+
+  @include e(inner) {
+    -webkit-appearance: none;
+    background-color: $--input-fill;
+    background-image: none;
+    border-radius: $--input-border-radius;
+    border: $--input-border;
+    box-sizing: border-box;
+    color: $--input-color;
+    display: inline-block;
+    font-size: inherit;
+    height: $--input-height;
+    line-height: $--input-height;
+    outline: none;
+    padding: 0 15px;
+    transition: $--border-transition-base;
+    width: 100%;
+
+    &::placeholder {
+      color: $--input-placeholder-color;
+    }
+
+    &:hover {
+      border-color: $--input-hover-border;
+    }
+
+    &:focus {
+      outline: none;
+      border-color: $--input-focus-border;
+    }
+  }
+
+  @include e(suffix) {
+    position: absolute;
+    height: 100%;
+    right: 5px;
+    top: 0;
+    text-align: center;
+    color: $--input-icon-color;
+    transition: all .3s;
+    pointer-events: none;
+  }
+
+  @include e(suffix-inner) {
+    pointer-events: all;
+  }
+
+  @include e(prefix) {
+    position: absolute;
+    height: 100%;
+    left: 5px;
+    top: 0;
+    text-align: center;
+    color: $--input-icon-color;
+    transition: all .3s;
+  }
+
+  @include e(icon) {
+    height: 100%;
+    width: 25px;
+    text-align: center;
+    transition: all .3s;
+    line-height: $--input-height;
+
+    &:after {
+      content: '';
+      height: 100%;
+      width: 0;
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+
+  @include e(validateIcon) {
+    pointer-events: none;
+  }
+
+  @include when(active) {
+    .el-input__inner {
+      outline: none;
+      border-color: $--input-focus-border;
+    }
+  }
+
+  @include when(disabled) {
+    .el-input__inner {
+      background-color: $--input-disabled-fill;
+      border-color: $--input-disabled-border;
+      color: $--input-disabled-color;
+      cursor: not-allowed;
+
+      &::placeholder {
+        color: $--input-disabled-placeholder-color;
+      }
+    }
+
+    .el-input__icon {
+      cursor: not-allowed;
+    }
+  }
+
+  @include m(suffix) {
+    .el-input__inner {
+      padding-right: 30px;
+    }
+  }
+
+  @include m(prefix) {
+    .el-input__inner {
+      padding-left: 30px;
+    }
+  }
+
+  @include m(medium) {
+    font-size: $--input-medium-font-size;
+
+    @include e(inner) {
+      height: $--input-medium-height;
+      line-height: $--input-medium-height;
+    }
+
+    .el-input__icon {
+      line-height: $--input-medium-height;
+    }
+  }
+  @include m(small) {
+    font-size: $--input-small-font-size;
+
+    @include e(inner) {
+      height: $--input-small-height;
+      line-height: $--input-small-height;
+    }
+
+    .el-input__icon {
+      line-height: $--input-small-height;
+    }
+  }
+  @include m(mini) {
+    font-size: $--input-mini-font-size;
+
+    @include e(inner) {
+      height: $--input-mini-height;
+      line-height: $--input-mini-height;
+    }
+
+    .el-input__icon {
+      line-height: $--input-mini-height;
+    }
+  }
+}
+
+@include b(input-group) {
+  line-height: normal;
+  display: inline-table;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing:0;
+
+  > .el-input__inner {
+    vertical-align: middle;
+    display: table-cell;
+  }
+
+  @include e((append, prepend)) {
+    background-color: $--background-color-base;
+    color: $--color-info;
+    vertical-align: middle;
+    display: table-cell;
+    position: relative;
+    border: $--border-base;
+    border-radius: $--input-border-radius;
+    padding: 0 20px;
+    width: 1px;
+    white-space: nowrap;
+
+    &:focus {
+      outline: none;
+    }
+
+    .el-select,
+    .el-button {
+      display: inline-block;
+      margin: -10px -20px;
+    }
+
+    button.el-button,
+    div.el-select .el-input__inner,
+    div.el-select:hover .el-input__inner {
+      border-color: transparent;
+      background-color: transparent;
+      color: inherit;
+      border-top: 0;
+      border-bottom: 0;
+    }
+
+    .el-button,
+    .el-input {
+      font-size: inherit;
+    }
+  }
+
+  @include e(prepend) {
+    border-right: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  @include e(append) {
+    border-left: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  @include m(prepend) {
+    .el-input__inner {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+    .el-select .el-input.is-focus .el-input__inner {
+      border-color: transparent;
+    }
+  }
+
+  @include m(append) {
+    .el-input__inner {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    .el-select .el-input.is-focus .el-input__inner {
+      border-color: transparent;
+    }
+  }
+}
+
+/** disalbe default clear on IE */
+.el-input__inner::-ms-clear {
+  display: none;
+  width: 0;
+  height: 0;
+}
diff --git a/packages/theme-chalk/src/loading.scss b/packages/theme-chalk/src/loading.scss
new file mode 100644
index 0000000000..d63e5125ba
--- /dev/null
+++ b/packages/theme-chalk/src/loading.scss
@@ -0,0 +1,96 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(loading-parent) {
+  @include m(relative) {
+    position: relative !important;
+  }
+
+  @include m(hidden) {
+    overflow: hidden !important;
+  }
+}
+
+@include b(loading-mask) {
+  position: absolute;
+  z-index: 2000;
+  background-color: rgba(255, 255, 255, .9);
+  margin: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transition: opacity 0.3s;
+
+  @include when(fullscreen) {
+    position: fixed;
+
+    .el-loading-spinner {
+      margin-top: #{- $--loading-fullscreen-spinner-size / 2};
+
+      .circular {
+        height: $--loading-fullscreen-spinner-size;
+        width: $--loading-fullscreen-spinner-size;
+      }
+    }
+  }
+}
+
+@include b(loading-spinner) {
+  top: 50%;
+  margin-top: #{- $--loading-spinner-size / 2};
+  width: 100%;
+  text-align: center;
+  position: absolute;
+
+  .el-loading-text {
+    color: $--color-primary;
+    margin: 3px 0;
+    font-size: 14px;
+  }
+
+  .circular {
+    height: $--loading-spinner-size;
+    width: $--loading-spinner-size;
+    animation: loading-rotate 2s linear infinite;
+  }
+
+  .path {
+    animation: loading-dash 1.5s ease-in-out infinite;
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: 0;
+    stroke-width: 2;
+    stroke: $--color-primary;
+    stroke-linecap: round;
+  }
+
+  i {
+    color: $--color-primary;
+  }
+}
+
+.el-loading-fade-enter,
+.el-loading-fade-leave-active {
+  opacity: 0;
+}
+
+@keyframes loading-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes loading-dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -40px;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -120px;
+  }
+}
diff --git a/packages/theme-chalk/src/main.scss b/packages/theme-chalk/src/main.scss
new file mode 100644
index 0000000000..3765af5add
--- /dev/null
+++ b/packages/theme-chalk/src/main.scss
@@ -0,0 +1,12 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(main) {
+  // IE11 supports the <main> element partially https://caniuse.com/#search=main
+  display: block;
+  flex: 1;
+  flex-basis: auto;
+  overflow: auto;
+  box-sizing: border-box;
+  padding: $--main-padding;
+}
diff --git a/packages/theme-default/src/menu-item-group.css b/packages/theme-chalk/src/menu-item-group.scss
similarity index 100%
rename from packages/theme-default/src/menu-item-group.css
rename to packages/theme-chalk/src/menu-item-group.scss
diff --git a/packages/theme-default/src/menu-item.css b/packages/theme-chalk/src/menu-item.scss
similarity index 100%
rename from packages/theme-default/src/menu-item.css
rename to packages/theme-chalk/src/menu-item.scss
diff --git a/packages/theme-chalk/src/menu.scss b/packages/theme-chalk/src/menu.scss
new file mode 100644
index 0000000000..aafca5506b
--- /dev/null
+++ b/packages/theme-chalk/src/menu.scss
@@ -0,0 +1,289 @@
+@import "mixins/mixins";
+@import "mixins/utils";
+@import "common/var";
+@import "common/transition";
+
+@mixin menu-item {
+  height: 56px;
+  line-height: 56px;
+  font-size: $--menu-item-font-size;
+  color: $--menu-item-color;
+  padding: 0 20px;
+  list-style: none;
+  cursor: pointer;
+  position: relative;
+  transition: border-color .3s, background-color .3s, color .3s;
+  box-sizing: border-box;
+  white-space: nowrap;
+
+  * {
+    vertical-align: middle;
+  }
+
+  i {
+    color: $--color-text-secondary;
+  }
+
+  &:hover,
+  &:focus {
+    outline: none;
+    background-color: $--menu-item-hover-fill;
+  }
+
+  @include when(disabled) {
+    opacity: 0.25;
+    cursor: not-allowed;
+    background: none !important;
+  }
+}
+
+@include b(menu) {
+  border-right: solid 1px #e6e6e6;
+  list-style: none;
+  position: relative;
+  margin: 0;
+  padding-left: 0;
+  background-color: $--menu-item-fill;
+  @include utils-clearfix;
+  &.el-menu--horizontal {
+    border-bottom: solid 1px #e6e6e6;
+  }
+
+  @include m(horizontal) {
+    border-right: none;
+    & > .el-menu-item {
+      float: left;
+      height: 60px;
+      line-height: 60px;
+      margin: 0;
+      border-bottom: 2px solid transparent;
+      color: $--color-text-secondary;
+
+      a,
+      a:hover {
+        color: inherit;
+      }
+
+      &:not(.is-disabled):hover,
+      &:not(.is-disabled):focus{
+        background-color: #fff;
+      }
+    }
+    & > .el-submenu {
+      float: left;
+
+      &:focus,
+      &:hover {
+        outline: none;
+        .el-submenu__title {
+          color: $--color-text-primary;
+        }
+      }
+
+      &.is-active {
+        .el-submenu__title {
+          border-bottom: 2px solid $--color-primary;
+          color: $--color-text-primary;
+        }
+      }
+
+      & .el-submenu__title {
+        height: 60px;
+        line-height: 60px;
+        border-bottom: 2px solid transparent;
+        color: $--color-text-secondary;
+
+        &:hover {
+          background-color: #fff;
+        }
+      }
+      & .el-submenu__icon-arrow {
+        position: static;
+        vertical-align: middle;
+        margin-left: 8px;
+        margin-top: -3px;
+      }
+    }
+    & .el-menu {
+      & .el-menu-item,
+      & .el-submenu__title {
+        background-color: $--color-white;
+        float: none;
+        height: 36px;
+        line-height: 36px;
+        padding: 0 10px;
+        color: $--color-text-secondary;
+      }
+      & .el-menu-item.is-active,
+      & .el-submenu.is-active > .el-submenu__title {
+        color: $--color-text-primary;
+      }
+    }
+    & .el-menu-item:not(.is-disabled):hover,
+    & .el-menu-item:not(.is-disabled):focus {
+      outline: none;
+      color: $--color-text-primary;
+    }
+    & > .el-menu-item.is-active {
+      border-bottom: 2px solid $--color-primary;
+      color: $--color-text-primary;
+    }
+  }
+  @include m(collapse) {
+    width: 64px;
+
+    > .el-menu-item,
+    > .el-submenu > .el-submenu__title {
+      [class^="el-icon-"] {
+        margin: 0;
+        vertical-align: middle;
+        width: 24px;
+        text-align: center;
+      }
+      .el-submenu__icon-arrow {
+        display: none;
+      }
+      span {
+        height: 0;
+        width: 0;
+        overflow: hidden;
+        visibility: hidden;
+        display: inline-block;
+      }
+    }
+
+    > .el-menu-item.is-active i {
+      color: inherit;
+    }
+
+    .el-menu .el-submenu {
+      min-width: 200px;
+    }
+
+    .el-submenu {
+      position: relative;
+      & .el-menu {
+        position: absolute;
+        margin-left: 5px;
+        top: 0;
+        left: 100%;
+        z-index: 10;
+        border: 1px solid $--border-color-light;
+        border-radius: $--border-radius-small;
+        box-shadow: $--box-shadow-light;
+      }
+
+      &.is-opened {
+        > .el-submenu__title .el-submenu__icon-arrow {
+          transform: none;
+        }
+      }
+    }
+  }
+  @include m(popup) {
+    z-index: 100;
+    min-width: 200px;
+    border: none;
+    padding: 5px 0;
+    border-radius: $--border-radius-small;
+    box-shadow: $--box-shadow-light;
+
+    &-bottom-start {
+      margin-top: 5px;
+    }
+    &-right-start {
+      margin-left: 5px;
+      margin-right: 5px;
+    }
+  }
+}
+@include b(menu-item) {
+  @include menu-item;
+
+  & [class^="el-icon-"] {
+    margin-right: 5px;
+    width: 24px;
+    text-align: center;
+    font-size: 18px;
+    vertical-align: middle;
+  }
+  @include when(active) {
+    color: $--color-primary;
+    i {
+      color: inherit;
+    }
+  }
+}
+  
+@include b(submenu) {
+  list-style: none;
+  margin: 0;
+  padding-left: 0;
+
+  @include e(title) {
+    @include menu-item;
+
+    &:hover {
+      background-color: $--menu-item-hover-fill;
+    }
+  }
+  & .el-menu {
+    border: none;
+  }
+  & .el-menu-item {
+    height: 50px;
+    line-height: 50px;
+    padding: 0 45px;
+    min-width: 200px;
+  }
+  @include e(icon-arrow) {
+    position: absolute;
+    top: 50%;
+    right: 20px;
+    margin-top: -7px;
+    transition: transform .3s;
+    font-size: 12px;
+  }
+  @include when(active) {
+    .el-submenu__title {
+      border-bottom-color: $--color-primary;
+    }
+  }
+  @include when(opened) {
+    > .el-submenu__title .el-submenu__icon-arrow {
+      transform: rotateZ(180deg);
+    }
+  }
+  @include when(disabled) {
+    .el-submenu__title,
+    .el-menu-item {
+      opacity: 0.25;
+      cursor: not-allowed;
+      background: none !important;
+    }
+  }
+  [class^="el-icon-"] {
+    vertical-align: middle;
+    margin-right: 5px;
+    width: 24px;
+    text-align: center;
+    font-size: 18px;
+  }
+}
+
+@include b(menu-item-group) {
+  > ul {
+    padding: 0;
+  }
+  @include e(title) {
+    padding: 7px 0 7px 20px;
+    line-height: normal;
+    font-size: 12px;
+    color: $--color-text-secondary;
+  }
+}
+
+.horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow {
+  transition: .2s;
+  opacity: 0;
+}
diff --git a/packages/theme-chalk/src/message-box.scss b/packages/theme-chalk/src/message-box.scss
new file mode 100644
index 0000000000..94d4e123d3
--- /dev/null
+++ b/packages/theme-chalk/src/message-box.scss
@@ -0,0 +1,223 @@
+@import "mixins/mixins";
+@import "common/var";
+@import "common/popup";
+@import "button";
+@import "input";
+
+@include b(message-box) {
+  display: inline-block;
+  width: $--msgbox-width;
+  padding-bottom: 10px;
+  vertical-align: middle;
+  background-color: $--color-white;
+  border-radius: $--msgbox-border-radius;
+  border: 1px solid $--border-color-lighter;
+  font-size: $--msgbox-font-size;
+  box-shadow: $--box-shadow-light;
+  text-align: left;
+  overflow: hidden;
+  backface-visibility: hidden;
+
+  @include e(wrapper) {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    text-align: center;
+
+    &::after {
+      content: "";
+      display: inline-block;
+      height: 100%;
+      width: 0;
+      vertical-align: middle;
+    }
+  }
+
+  @include e(header) {
+    position: relative;
+    padding: $--msgbox-padding-primary;
+    padding-bottom: 10px;
+  }
+
+  @include e(title) {
+    padding-left: 0;
+    margin-bottom: 0;
+    font-size: $--msgbox-font-size;
+    line-height: 1;
+    color: $--color-text-primary;
+  }
+
+  @include e(headerbtn) {
+    position: absolute;
+    top: $--msgbox-padding-primary;
+    right: $--msgbox-padding-primary;
+    padding: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: $--message-close-size;
+    cursor: pointer;
+
+    .el-message-box__close {
+      color: $--color-info;
+    }
+
+    &:focus, &:hover {
+      .el-message-box__close {
+        color: $--color-primary;
+      }
+    }
+
+  }
+
+  @include e(content) {
+    position: relative;
+    padding: 10px $--msgbox-padding-primary;
+    color: $--msgbox-content-color;
+    font-size: $--msgbox-content-font-size;
+  }
+
+  @include e(input) {
+    padding-top: 15px;
+
+    & input.invalid {
+      border-color: $--color-danger;
+      &:focus {
+        border-color: $--color-danger;
+      }
+    }
+  }
+
+  @include e(status) {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 24px !important;
+
+    &::before {
+      // 防止图标切割
+      padding-left: 1px;
+    }
+
+    + .el-message-box__message {
+      padding-left: 36px;
+      padding-right: 12px;
+    }
+
+    &.el-icon-success {
+      color: $--msgbox-success-color;
+    }
+
+    &.el-icon-info {
+      color: $--msgbox-info-color;
+    }
+
+    &.el-icon-warning {
+      color: $--msgbox-warning-color;
+    }
+
+    &.el-icon-error {
+      color: $--msgbox-danger-color;
+    }
+  }
+
+  @include e(message) {
+    margin: 0;
+
+    & p {
+      margin: 0;
+      line-height: 24px;
+    }
+  }
+
+  @include e(errormsg) {
+    color: $--color-danger;
+    font-size: $--msgbox-error-font-size;
+    min-height: 18px;
+    margin-top: 2px;
+  }
+
+  @include e(btns) {
+    padding: 5px 15px 0;
+    text-align: right;
+
+    & button:nth-child(2) {
+      margin-left: 10px;
+    }
+  }
+
+  @include e(btns-reverse) {
+    flex-direction: row-reverse;
+  }
+
+  // centerAlign 布局
+  @include m(center) {
+    padding-bottom: 30px;
+
+    @include e(header) {
+      padding-top: 30px;
+    }
+
+    @include e(title) {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    @include e(status) {
+      position: relative;
+      top: auto;
+      padding-right: 5px;
+      text-align: center;
+      transform: translateY(-1px);
+    }
+
+    @include e(message) {
+      margin-left: 0;
+    }
+
+    @include e((btns, content)) {
+      text-align: center;
+    }
+
+    @include e(content) {
+      $padding-horizontal: $--msgbox-padding-primary + 12px;
+
+      padding-left: $padding-horizontal;
+      padding-right: $padding-horizontal;
+    }
+  }
+}
+
+.msgbox-fade-enter-active {
+  animation: msgbox-fade-in .3s;
+}
+
+.msgbox-fade-leave-active {
+  animation: msgbox-fade-out .3s;
+}
+
+@keyframes msgbox-fade-in {
+  0% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes msgbox-fade-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  100% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+}
diff --git a/packages/theme-chalk/src/message.scss b/packages/theme-chalk/src/message.scss
new file mode 100644
index 0000000000..a5f5f22181
--- /dev/null
+++ b/packages/theme-chalk/src/message.scss
@@ -0,0 +1,120 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(message) {
+  min-width: $--message-min-width;
+  box-sizing: border-box;
+  border-radius: $--border-radius-base;
+  border-width: $--border-width-base;
+  border-style: $--border-style-base;
+  border-color: $--border-color-lighter;
+  position: fixed;
+  left: 50%;
+  top: 20px;
+  transform: translateX(-50%);
+  background-color: $--message-background-color;
+  transition: opacity 0.3s, transform .4s;
+  overflow: hidden;
+  padding: $--message-padding;
+  display: flex;
+  align-items: center;
+
+  @include when(center) {
+    justify-content: center;
+  }
+
+  @include when(closable) {
+    .el-message__content {
+      padding-right: 16px;
+    }
+  }
+
+  p {
+    margin: 0;
+  }
+
+  @include m(info) {
+    .el-message__content {
+      color: $--message-info-color;
+    }
+  }
+
+  @include m(success) {
+    background-color: $--color-success-lighter;
+    border-color: $--color-success-light;
+
+    .el-message__content {
+      color: $--message-success-color;
+    }
+  }
+
+  @include m(warning) {
+    background-color: $--color-warning-lighter;
+    border-color: $--color-warning-light;
+
+    .el-message__content {
+      color: $--message-warning-color;
+    }
+  }
+
+  @include m(error) {
+    background-color: $--color-danger-lighter;
+    border-color: $--color-danger-light;
+
+    .el-message__content {
+      color: $--message-danger-color;
+    }
+  }
+
+  @include e(icon) {
+    margin-right: 10px;
+  }
+
+  @include e(content) {
+    padding: 0;
+    font-size: 14px;
+    line-height: 1;
+    &:focus {
+      outline-width: 0;
+    }
+  }
+
+  @include e(closeBtn) {
+    position: absolute;
+    top: 50%;
+    right: 15px;
+    transform: translateY(-50%);
+    cursor: pointer;
+    color: $--message-close-color;
+    font-size: $--message-close-size;
+
+    &:focus {
+      outline-width: 0;
+    }
+    &:hover {
+      color: $--message-close-hover-color;
+    }
+  }
+
+  & .el-icon-success {
+    color: $--message-success-color;
+  }
+
+  & .el-icon-error {
+    color: $--message-danger-color;
+  }
+
+  & .el-icon-info {
+    color: $--message-info-color;
+  }
+
+  & .el-icon-warning {
+    color: $--message-warning-color;
+  }
+}
+
+.el-message-fade-enter,
+.el-message-fade-leave-active {
+  opacity: 0;
+  transform: translate(-50%, -100%);
+}
diff --git a/packages/theme-chalk/src/mixins/_button.scss b/packages/theme-chalk/src/mixins/_button.scss
new file mode 100644
index 0000000000..03c86e52e3
--- /dev/null
+++ b/packages/theme-chalk/src/mixins/_button.scss
@@ -0,0 +1,81 @@
+@import "../common/var";
+@mixin button-plain($color) {
+  color: $color;
+  background: mix($--color-white, $color, 90%);
+  border-color: mix($--color-white, $color, 60%);
+
+  &:hover,
+  &:focus {
+    background: $color;
+    border-color: $color;
+    color: $--color-white;
+  }
+
+  &:active {
+    background: mix($--color-black, $color, $--button-active-shade-percent);
+    border-color: mix($--color-black, $color, $--button-active-shade-percent);
+    color: $--color-white;
+    outline: none;
+  }
+
+  &.is-disabled {
+    &,
+    &:hover,
+    &:focus,
+    &:active {
+      color: mix($--color-white, $color, 40%);
+      background-color: mix($--color-white, $color, 90%);
+      border-color: mix($--color-white, $color, 80%);
+    }
+  }
+}
+
+@mixin button-variant($color, $background-color, $border-color) {
+  color: $color;
+  background-color: $background-color;
+  border-color: $border-color;
+
+  &:hover,
+  &:focus {
+    background: mix($--color-white, $background-color, $--button-hover-tint-percent);
+    border-color: mix($--color-white, $border-color, $--button-hover-tint-percent);
+    color: $color;
+  }
+  
+  &:active {
+    background: mix($--color-black, $background-color, $--button-active-shade-percent);
+    border-color: mix($--color-black, $border-color, $--button-active-shade-percent);
+    color: $color;
+    outline: none;
+  }
+
+  &.is-active {
+    background: mix($--color-black, $background-color, $--button-active-shade-percent);
+    border-color: mix($--color-black, $border-color, $--button-active-shade-percent);
+    color: $color;
+  }
+
+  &.is-disabled {
+    &,
+    &:hover,
+    &:focus,
+    &:active {
+      color: $--color-white;
+      background-color: mix($background-color, $--color-white);
+      border-color: mix($border-color, $--color-white);
+    }
+  }
+
+  &.is-plain {
+    @include button-plain($background-color);
+  }
+}
+
+@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
+  padding: $padding-vertical $padding-horizontal;
+  font-size: $font-size;
+  border-radius: $border-radius;
+  &.is-round {
+    padding: $padding-vertical $padding-horizontal;
+  }
+}
diff --git a/packages/theme-chalk/src/mixins/config.scss b/packages/theme-chalk/src/mixins/config.scss
new file mode 100644
index 0000000000..87e29b458c
--- /dev/null
+++ b/packages/theme-chalk/src/mixins/config.scss
@@ -0,0 +1,4 @@
+$namespace: 'el';
+$element-separator: '__';
+$modifier-separator: '--';
+$state-prefix: 'is-';
diff --git a/packages/theme-chalk/src/mixins/function.scss b/packages/theme-chalk/src/mixins/function.scss
new file mode 100644
index 0000000000..f348cb60b7
--- /dev/null
+++ b/packages/theme-chalk/src/mixins/function.scss
@@ -0,0 +1,44 @@
+@import "config";
+
+/* BEM support Func
+ -------------------------- */
+@function selectorToString($selector) {
+  $selector: inspect($selector);
+  $selector: str-slice($selector, 2, -2);
+  @return $selector;
+}
+
+@function containsModifier($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, $modifier-separator) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function containWhenFlag($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, '.' + $state-prefix) {
+    @return true
+  } @else {
+    @return false
+  }
+}
+
+@function containPseudoClass($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, ':') {
+    @return true
+  } @else {
+    @return false
+  }
+}
+
+@function hitAllSpecialNestRule($selector) {
+
+  @return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
+}
diff --git a/packages/theme-chalk/src/mixins/mixins.scss b/packages/theme-chalk/src/mixins/mixins.scss
new file mode 100644
index 0000000000..0805b07adc
--- /dev/null
+++ b/packages/theme-chalk/src/mixins/mixins.scss
@@ -0,0 +1,190 @@
+@import "function";
+@import "../common/var";
+
+/* Break-points
+ -------------------------- */
+@mixin res($key, $map: $--breakpoints) {
+  // 循环断点Map，如果存在则返回
+  @if map-has-key($map, $key) {
+    @media only screen and #{inspect(map-get($map, $key))} {
+      @content;
+    }
+  } @else {
+    @warn "Undefeined points: `#{$map}`";
+  }
+}
+
+/* Scrollbar
+ -------------------------- */
+@mixin scroll-bar {
+  $--scrollbar-thumb-background: #b4bccc;
+  $--scrollbar-track-background: #fff;
+
+  &::-webkit-scrollbar {
+    z-index: 11;
+    width: 6px;
+
+    &:horizontal {
+      height: 6px;
+    }
+
+    &-thumb {
+      border-radius: 5px;
+      width: 6px;
+      background: $--scrollbar-thumb-background;
+    }
+
+    &-corner {
+      background: $--scrollbar-track-background;
+    }
+
+    &-track {
+      background: $--scrollbar-track-background;
+
+      &-piece {
+        background: $--scrollbar-track-background;
+        width: 6px;
+      }
+    }
+  }
+}
+
+/* Placeholder
+ -------------------------- */
+@mixin placeholder {
+  &::-webkit-input-placeholder {
+    @content
+  }
+
+  &::-moz-placeholder {
+    @content
+  }
+
+  &:-ms-input-placeholder {
+    @content
+  }
+}
+
+/* BEM
+ -------------------------- */
+@mixin b($block) {
+  $B: $namespace+'-'+$block !global;
+
+  .#{$B} {
+    @content;
+  }
+}
+
+@mixin e($element) {
+  $E: $element !global;
+  $selector: &;
+  $currentSelector: "";
+  @each $unit in $element {
+    $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
+  }
+
+  @if hitAllSpecialNestRule($selector) {
+    @at-root {
+      #{$selector} {
+        #{$currentSelector} {
+          @content;
+        }
+      }
+    }
+  } @else {
+    @at-root {
+      #{$currentSelector} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin m($modifier) {
+  $selector: &;
+  $currentSelector: "";
+  @each $unit in $modifier {
+    $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
+  }
+
+  @at-root {
+    #{$currentSelector} {
+      @content;
+    }
+  }
+}
+
+@mixin configurable-m($modifier, $E-flag: false) {
+  $selector: &;
+  $interpolation: '';
+
+  @if $E-flag {
+    $interpolation: $element-separator + $E-flag;
+  }
+
+  @at-root {
+    #{$selector} {
+      .#{$B+$interpolation+$modifier-separator+$modifier} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B) {
+  $modifierCombo: '';
+
+  @if $modifier {
+    $modifierCombo: $modifier-separator + $modifier;
+  }
+
+  @at-root {
+    #{&}#{$specSelector}.#{$block+$element-separator+$element+$modifierCombo} {
+      @content
+    }
+  }
+}
+
+@mixin meb($modifier: false, $element: $E, $block: $B) {
+  $selector: &;
+  $modifierCombo: '';
+
+  @if $modifier {
+    $modifierCombo: $modifier-separator + $modifier;
+  }
+
+  @at-root {
+    #{$selector} {
+      .#{$block+$element-separator+$element+$modifierCombo} {
+        @content
+      }
+    }
+  }
+}
+
+@mixin when($state) {
+  @at-root {
+    &.#{$state-prefix + $state} {
+      @content;
+    }
+  }
+}
+
+@mixin extend-rule($name) {
+  @extend #{'%shared-'+$name};
+}
+
+@mixin share-rule($name) {
+  $rule-name: '%shared-'+$name;
+
+  @at-root #{$rule-name} {
+    @content
+  }
+}
+
+@mixin pseudo($pseudo) {
+  @at-root #{&}#{':#{$pseudo}'} {
+    @content
+  }
+}
+
diff --git a/packages/theme-chalk/src/mixins/utils.scss b/packages/theme-chalk/src/mixins/utils.scss
new file mode 100644
index 0000000000..a642326638
--- /dev/null
+++ b/packages/theme-chalk/src/mixins/utils.scss
@@ -0,0 +1,39 @@
+@mixin utils-user-select($value) {
+  -moz-user-select: $value;
+  -webkit-user-select: $value;
+  -ms-user-select: $value;
+}
+
+@mixin utils-clearfix {
+  $selector: &;
+
+  @at-root {
+    #{$selector}::before,
+    #{$selector}::after {
+      display: table;
+      content: "";
+    }
+    #{$selector}::after {
+      clear: both
+    }
+  }
+}
+
+@mixin utils-vertical-center {
+  $selector: &;
+
+  @at-root {
+    #{$selector}::after {
+      display: inline-block;
+      content: "";
+      height: 100%;
+      vertical-align: middle
+    }
+  }
+}
+
+@mixin utils-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
\ No newline at end of file
diff --git a/packages/theme-chalk/src/notification.scss b/packages/theme-chalk/src/notification.scss
new file mode 100644
index 0000000000..3ef27ad7f7
--- /dev/null
+++ b/packages/theme-chalk/src/notification.scss
@@ -0,0 +1,98 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(notification) {
+  display: flex;
+  width: $--notification-width;
+  padding: $--notification-padding;
+  border-radius: $--notification-radius;
+  box-sizing: border-box;
+  border: 1px solid $--notification-border-color;
+  position: fixed;
+  background-color: $--color-white;
+  box-shadow: $--notification-shadow;
+  transition: opacity .3s, transform .3s, left .3s, right .3s, top 0.4s, bottom .3s;
+  overflow: hidden;
+
+  &.right {
+    right: 16px;
+  }
+
+  &.left {
+    left: 16px;
+  }
+
+  @include e(group) {
+    margin-left: $--notification-group-margin;
+  }
+
+  @include e(title) {
+    font-weight: bold;
+    font-size: $--notification-title-font-size;
+    color: $--notification-title-color;
+    margin: 0;
+  }
+
+  @include e(content) {
+    font-size: $--notification-font-size;
+    line-height: 21px;
+    margin: 6px 0 0 0;
+    color: $--notification-color;
+    text-align: justify;
+
+    p {
+      margin: 0;
+    }
+  }
+
+  @include e(icon) {
+    height: $--notification-icon-size;
+    width: $--notification-icon-size;
+    font-size: $--notification-icon-size;
+  }
+
+  @include e(closeBtn) {
+    position: absolute;
+    top: 18px;
+    right: 15px;
+    cursor: pointer;
+    color: $--notification-close-color;
+    font-size: $--notification-close-font-size;
+
+    &:hover {
+      color: $--notification-close-hover-color;
+    }
+  }
+
+  .el-icon-success {
+    color: $--notification-success-color;
+  }
+
+  .el-icon-error {
+    color: $--notification-danger-color;
+  }
+
+  .el-icon-info {
+    color: $--notification-info-color;
+  }
+
+  .el-icon-warning {
+    color: $--notification-warning-color;
+  }
+}
+
+.el-notification-fade-enter {
+  &.right {
+    right: 0;
+    transform: translateX(100%);
+  }
+
+  &.left {
+    left: 0;
+    transform: translateX(-100%);
+  }
+}
+
+.el-notification-fade-leave-active {
+  opacity: 0;
+}
diff --git a/packages/theme-chalk/src/option-group.scss b/packages/theme-chalk/src/option-group.scss
new file mode 100644
index 0000000000..c68addb9ea
--- /dev/null
+++ b/packages/theme-chalk/src/option-group.scss
@@ -0,0 +1,42 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(select-group) {
+  $gap: 20px;
+
+  margin: 0;
+  padding: 0;
+
+  @include e(wrap) {
+    position: relative;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    &:not(:last-of-type) {
+      padding-bottom: 24px;
+
+      &::after {
+        content: '';
+        position: absolute;
+        display: block;
+        left: $gap;
+        right: $gap;
+        bottom: 12px;
+        height: 1px;
+        background: $--border-color-light;
+      }
+    }
+  }
+
+  @include e(title) {
+    padding-left: $gap;
+    font-size: $--select-group-font-size;
+    color: $--select-group-color;
+    line-height: $--select-group-height;
+  }
+
+  & .el-select-dropdown__item {
+    padding-left: $gap;
+  }
+}
diff --git a/packages/theme-chalk/src/option.scss b/packages/theme-chalk/src/option.scss
new file mode 100644
index 0000000000..f4d023dbf5
--- /dev/null
+++ b/packages/theme-chalk/src/option.scss
@@ -0,0 +1,36 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(select-dropdown) {
+  @include e(item) {
+    font-size: $--select-font-size;
+    padding: 0 20px;
+    position: relative;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: $--select-option-color;
+    height: $--select-option-height;
+    line-height: $--select-option-height;
+    box-sizing: border-box;
+    cursor: pointer;
+
+    @include when(disabled) {
+      color: $--select-option-disabled-color;
+      cursor: not-allowed;
+
+      &:hover {
+        background-color: $--color-white;
+      }
+    }
+
+    &.hover, &:hover {
+      background-color: $--select-option-hover-background;
+    }
+
+    &.selected {
+      color: $--select-option-selected;
+      font-weight: bold;
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/pagination.scss b/packages/theme-chalk/src/pagination.scss
new file mode 100644
index 0000000000..207f10d73b
--- /dev/null
+++ b/packages/theme-chalk/src/pagination.scss
@@ -0,0 +1,295 @@
+@import "mixins/mixins";
+@import "mixins/utils";
+@import "common/var";
+@import "select";
+
+@include b(pagination) {
+  white-space: nowrap;
+  padding: 2px 5px;
+  color: $--pagination-color;
+  font-weight: bold;
+  @include utils-clearfix;
+
+  span:not([class*=suffix]),
+  button {
+    display: inline-block;
+    font-size: $--pagination-font-size;
+    min-width: $--pagination-button-width;
+    height: $--pagination-button-height;
+    line-height: $--pagination-button-height;
+    vertical-align: top;
+    box-sizing: border-box;
+  }
+
+  .el-input__inner {
+    text-align: center;
+    -moz-appearance: textfield;
+    line-height: normal;
+  }
+
+  // pagesize 的下拉 icon
+  .el-input__suffix {
+    right: 0;
+    transform: scale(.8);
+  }
+
+  .el-select .el-input {
+    width: 100px;
+    margin: 0 5px;
+
+    .el-input__inner {
+      padding-right: 25px;
+      border-radius: $--pagination-border-radius;
+    }
+  }
+
+  button {
+    border: none;
+    padding: 0 6px;
+    background: transparent;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:hover {
+      color: $--pagination-hover-fill;
+    }
+
+    &:disabled {
+      color: $--pagination-button-disabled-color;
+      background-color: $--pagination-button-disabled-fill;
+      cursor: not-allowed;
+    }
+  }
+
+  .btn-prev,
+  .btn-next {
+    background: center center no-repeat;
+    background-size: 16px;
+    background-color: $--pagination-fill;
+    cursor: pointer;
+    margin: 0;
+    color: $--pagination-button-color;
+
+    .el-icon {
+      display: block;
+      font-size: 12px;
+      font-weight: bold;
+    }
+  }
+
+  .btn-prev {
+    padding-right: 12px;
+  }
+
+  .btn-next {
+    padding-left: 12px;    
+  }
+
+  .el-pager li.disabled {
+    color: $--color-text-placeholder;
+    cursor: not-allowed;
+  }
+
+  @include m(small) {
+    .btn-prev,
+    .btn-next,
+    .el-pager li,
+    .el-pager li.btn-quicknext,
+    .el-pager li.btn-quickprev,
+    .el-pager li:last-child {
+      border-color: transparent;
+      font-size: 12px;
+      line-height: 22px;
+      height: 22px;
+      min-width: 22px;
+    }
+
+    .arrow.disabled {
+      visibility: hidden;
+    }
+
+    .more::before,
+    li.more::before {
+      line-height: 24px;
+    }
+
+    span:not([class*=suffix]),
+    button {
+      height: 22px;
+      line-height: 22px;
+    }
+
+    @include e(editor) {
+      height: 22px;
+      &.el-input .el-input__inner {
+        height: 22px;
+      }
+    }
+  }
+
+  @include e(sizes) {
+    margin: 0 10px 0 0;
+    font-weight: normal;
+    color: $--color-text-regular;
+
+    .el-input .el-input__inner {
+      font-size: $--pagination-font-size;
+      padding-left: 8px;
+
+      &:hover {
+        border-color: $--pagination-hover-fill;
+      }
+    }
+  }
+
+  @include e(total) {
+    margin-right: 10px;
+    font-weight: normal;
+    color: $--color-text-regular;
+  }
+
+  @include e(jump) {
+    margin-left: 24px;
+    font-weight: normal;
+    color: $--color-text-regular;
+
+    .el-input__inner {
+      padding: 0 3px;
+    }
+  }
+
+  @include e(rightwrapper) {
+    float: right;
+  }
+
+  @include e(editor) {
+    line-height: 18px;
+    padding: 0 2px;
+    height: $--pagination-button-height;
+      
+    text-align: center;
+    margin: 0 2px;
+    box-sizing: border-box;
+    border-radius: $--pagination-border-radius;
+
+    &.el-input {
+      width: 50px;
+    }
+
+    &.el-input .el-input__inner {
+      height: $--pagination-button-height;
+    }
+
+    .el-input__inner::-webkit-inner-spin-button,
+    .el-input__inner::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+
+  @include when(background) {
+    .btn-prev,
+    .btn-next,
+    .el-pager li {
+      margin: 0 5px;
+      background-color: $--color-info-lighter;
+      color: $--color-text-regular;
+      min-width: 30px;
+      border-radius: 2px;
+
+      &.disabled {
+        color: $--color-text-placeholder;
+      }
+    }
+
+    .btn-prev, .btn-next {
+      padding: 0;
+
+      &:disabled {
+        color: $--color-text-placeholder;
+      }
+    }
+
+    .el-pager li:not(.disabled) {
+      &:hover {
+        color: $--pagination-hover-fill;
+      }
+
+      &.active {
+        background-color: $--color-primary;
+        color: $--color-white;
+      }
+    }
+
+    &.el-pagination--small {
+      .btn-prev,
+      .btn-next,
+      .el-pager li {
+        margin: 0 3px;
+        min-width: 22px;
+      }
+    }
+  }
+}
+
+@include b(pager) {
+  user-select: none;
+  list-style: none;
+  display: inline-block;
+  vertical-align: top;
+  font-size: 0;
+  padding: 0;
+  margin: 0;
+
+  .more::before {
+    line-height: 30px;
+  }
+
+  li {
+    padding: 0 4px;
+    background: $--pagination-fill;
+    vertical-align: top;
+    display: inline-block;
+    font-size: $--pagination-font-size;
+    min-width: $--pagination-button-width;
+    height: $--pagination-button-height;
+    line-height: $--pagination-button-height;
+    cursor: pointer;
+    box-sizing: border-box;
+    text-align: center;
+    margin: 0;
+
+    &.btn-quicknext,
+    &.btn-quickprev {
+      line-height: 28px;
+      color: $--pagination-button-color;
+
+      &.disabled {
+        color: $--color-text-placeholder;
+      }
+    }
+
+    &.btn-quickprev:hover {
+      cursor: pointer;
+    }
+
+    &.btn-quicknext:hover {
+      cursor: pointer;
+    }
+
+    &.active + li {
+      border-left: 0;
+    }
+
+    &:hover {
+      color: $--pagination-hover-fill;
+    }
+
+    &.active {
+      color: $--pagination-hover-fill;
+      cursor: default;
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/popover.scss b/packages/theme-chalk/src/popover.scss
new file mode 100644
index 0000000000..bd9c288565
--- /dev/null
+++ b/packages/theme-chalk/src/popover.scss
@@ -0,0 +1,39 @@
+@import "mixins/mixins";
+@import "common/var";
+@import "./popper";
+
+@include b(popover) {
+  position: absolute;
+  background: $--popover-fill;
+  min-width: 150px;
+  border-radius: 4px;
+  border: 1px solid $--popover-border-color;
+  padding: $--popover-padding;
+  z-index: $--index-popper;
+  color: $--color-text-regular;
+  line-height: 1.4;
+  text-align: justify;
+  font-size: $--popover-font-size;
+  box-shadow: $--box-shadow-light;
+
+  @include m(plain) {
+    padding: $--popover-padding-large;
+  }
+
+  @include e(title) {
+    color: $--popover-title-color;
+    font-size: $--popover-title-font-size;
+    line-height: 1;
+    margin-bottom: 12px;
+  }
+
+  @include e(reference) {
+    &:focus:not(.focusing), &:focus:hover {
+      outline-width: 0;
+    }
+  }
+
+  &:focus:active, &:focus {
+    outline-width: 0;
+  }
+}
diff --git a/packages/theme-chalk/src/popper.scss b/packages/theme-chalk/src/popper.scss
new file mode 100644
index 0000000000..5fa73310ae
--- /dev/null
+++ b/packages/theme-chalk/src/popper.scss
@@ -0,0 +1,101 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(popper) {
+  .popper__arrow,
+  .popper__arrow::after {
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+  }
+
+  .popper__arrow {
+    border-width: $--popover-arrow-size;
+    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03))
+  }
+
+  .popper__arrow::after {
+    content: " ";
+    border-width: $--popover-arrow-size;
+  }
+
+  &[x-placement^="top"] {
+    margin-bottom: #{$--popover-arrow-size + 6};
+  }
+
+  &[x-placement^="top"] .popper__arrow {
+    bottom: -$--popover-arrow-size;
+    left: 50%;
+    margin-right: #{$--tooltip-arrow-size / 2};
+    border-top-color: $--popover-border-color;
+    border-bottom-width: 0;
+
+    &::after {
+      bottom: 1px;
+      margin-left: -$--popover-arrow-size;
+      border-top-color: $--popover-fill;
+      border-bottom-width: 0;
+    }
+  }
+
+  &[x-placement^="bottom"] {
+    margin-top: #{$--popover-arrow-size + 6};
+  }
+
+  &[x-placement^="bottom"] .popper__arrow {
+    top: -$--popover-arrow-size;
+    left: 50%;
+    margin-right: #{$--tooltip-arrow-size / 2};
+    border-top-width: 0;
+    border-bottom-color: $--popover-border-color;
+
+    &::after {
+      top: 1px;
+      margin-left: -$--popover-arrow-size;
+      border-top-width: 0;
+      border-bottom-color: $--popover-fill;
+    }
+  }
+
+  &[x-placement^="right"] {
+    margin-left: #{$--popover-arrow-size + 6};
+  }
+
+  &[x-placement^="right"] .popper__arrow {
+    top: 50%;
+    left: -$--popover-arrow-size;
+    margin-bottom: #{$--tooltip-arrow-size / 2};
+    border-right-color: $--popover-border-color;
+    border-left-width: 0;
+
+    &::after {
+      bottom: -$--popover-arrow-size;
+      left: 1px;
+      border-right-color: $--popover-fill;
+      border-left-width: 0;
+    }
+  }
+
+  &[x-placement^="left"] {
+    margin-right: #{$--popover-arrow-size + 6};
+  }
+
+  &[x-placement^="left"] .popper__arrow {
+    top: 50%;
+    right: -$--popover-arrow-size;
+    margin-bottom: #{$--tooltip-arrow-size / 2};
+    border-right-width: 0;
+    border-left-color: $--popover-border-color;
+
+    &::after {
+      right: 1px;
+      bottom: -$--popover-arrow-size;
+      margin-left: -$--popover-arrow-size;
+      border-right-width: 0;
+      border-left-color: $--popover-fill;
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/theme-chalk/src/progress.scss b/packages/theme-chalk/src/progress.scss
new file mode 100644
index 0000000000..07ec5ffb89
--- /dev/null
+++ b/packages/theme-chalk/src/progress.scss
@@ -0,0 +1,129 @@
+@import "mixins/mixins";
+@import "mixins/utils";
+@import "common/var";
+
+@include b(progress) {
+  position: relative;
+  line-height: 1;
+
+  @include e(text) {
+    font-size:14px;
+    color: $--color-text-regular;
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 10px;
+    line-height: 1;
+
+    i {
+      vertical-align: middle;
+      display: block;
+    }
+  }
+
+  @include m(circle) {
+    display: inline-block;
+
+    .el-progress__text {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: 100%;
+      text-align: center;
+      margin: 0;
+      transform: translate(0, -50%);
+
+      i {
+        vertical-align: middle;
+        display: inline-block;
+      }
+    }
+  }
+
+  @include m(without-text) {
+    .el-progress__text {
+      display: none;
+    }
+
+    .el-progress-bar {
+      padding-right: 0;
+      margin-right: 0;
+      display: block;
+    }
+  }
+
+  @include m(text-inside) {
+    .el-progress-bar {
+      padding-right: 0;
+      margin-right: 0;
+    }
+  }
+
+  @include when(success) {
+    .el-progress-bar__inner {
+      background-color: $--color-success;
+    }
+
+    .el-progress__text {
+      color: $--color-success;
+    }
+  }
+
+  @include when(exception) {
+    .el-progress-bar__inner {
+      background-color: $--color-danger;
+    }
+
+    .el-progress__text {
+      color: $--color-danger;
+    }
+  }
+}
+
+@include b(progress-bar) {
+  padding-right: 50px;
+  display: inline-block;
+  vertical-align: middle;
+  width: 100%;
+  margin-right: -55px;
+  box-sizing: border-box;
+
+  @include e(outer) {
+    height: 6px;
+    border-radius: 100px;
+    background-color: $--border-color-lighter;
+    overflow: hidden;
+    position: relative;
+    vertical-align: middle;
+  }
+  @include e(inner) {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    background-color: $--color-primary;
+    text-align: right;
+    border-radius: 100px;
+    line-height: 1;
+    white-space: nowrap;
+
+    @include utils-vertical-center;
+  }
+
+  @include e(innerText) {
+    display: inline-block;
+    vertical-align: middle;
+    color: $--color-white;
+    font-size: 12px;
+    margin: 0 5px;
+  }
+}
+
+@keyframes progress {
+  0% {
+    background-position: 0 0;
+  }
+
+  100% {
+    background-position: 32px 0;
+  }
+}
diff --git a/packages/theme-chalk/src/radio-button.scss b/packages/theme-chalk/src/radio-button.scss
new file mode 100644
index 0000000000..fe9e013cba
--- /dev/null
+++ b/packages/theme-chalk/src/radio-button.scss
@@ -0,0 +1,113 @@
+@import "mixins/mixins";
+@import "mixins/_button";
+@import "common/var";
+
+@include b(radio-button) {
+  position: relative;
+  display: inline-block;
+  outline: none;
+
+  @include e(inner) {
+    display: inline-block;
+    line-height: 1;
+    white-space: nowrap;
+    vertical-align: middle;
+    background: $--button-default-fill;
+    border: $--border-base;
+    font-weight: $--button-font-weight;
+    border-left: 0;
+    color: $--button-default-color;
+    -webkit-appearance: none;
+    text-align: center;
+    box-sizing: border-box;
+    outline: none;
+    margin: 0;
+    position: relative;
+    cursor: pointer;
+    transition: $--all-transition;
+
+    @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, 0);
+
+    &:hover {
+      color: $--color-primary;
+    }
+
+    & [class*="el-icon-"] {
+      line-height: 0.9;
+
+      & + span {
+        margin-left: 5px;
+      }
+    }
+  }
+
+  &:first-child {
+    .el-radio-button__inner {
+      border-left: $--border-base;
+      border-radius: $--border-radius-base 0 0 $--border-radius-base;
+      box-shadow: none !important;
+    }
+  }
+
+  @include e(orig-radio) {
+    opacity: 0;
+    outline: none;
+    position: absolute;
+    z-index: -1;
+
+    &:checked {
+      & + .el-radio-button__inner {
+        color: $--radio-button-checked-color;
+        background-color: $--radio-button-checked-fill;
+        border-color: $--radio-button-checked-border-color;
+        box-shadow: -1px 0 0 0 $--radio-button-checked-border-color;
+      }
+    }
+
+    &:disabled {
+      & + .el-radio-button__inner {
+        color: $--button-disabled-color;
+        cursor: not-allowed;
+        background-image: none;
+        background-color: $--button-disabled-fill;
+        border-color: $--button-disabled-border;
+        box-shadow: none;
+      }
+      &:checked + .el-radio-button__inner {
+        background-color: $--radio-button-disabled-checked-fill;
+      }
+    }
+  }
+
+  &:last-child {
+    .el-radio-button__inner {
+      border-radius: 0 $--border-radius-base $--border-radius-base 0;
+    }
+  }
+
+  &:first-child:last-child {
+    .el-radio-button__inner {
+      border-radius: $--border-radius-base;
+    }
+  }
+
+  @include m(medium) {
+    & .el-radio-button__inner {
+      @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, 0);
+    }
+  }
+  @include m(small) {
+    & .el-radio-button__inner {
+      @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, 0);
+    }
+  }
+  @include m(mini) {
+    & .el-radio-button__inner {
+      @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, 0);
+    }
+  }
+
+  &:focus:not(.is-focus):not(:active):not(.is-disabled){ /*获得焦点时 样式提醒*/
+    box-shadow: 0 0 2px 2px $--radio-button-checked-border-color;
+  }
+}
diff --git a/packages/theme-chalk/src/radio-group.scss b/packages/theme-chalk/src/radio-group.scss
new file mode 100644
index 0000000000..2ee95a7924
--- /dev/null
+++ b/packages/theme-chalk/src/radio-group.scss
@@ -0,0 +1,9 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(radio-group) {
+  display: inline-block;
+  line-height: 1;
+  vertical-align: middle;
+  font-size: 0;
+}
diff --git a/packages/theme-chalk/src/radio.scss b/packages/theme-chalk/src/radio.scss
new file mode 100644
index 0000000000..f8aa6736e8
--- /dev/null
+++ b/packages/theme-chalk/src/radio.scss
@@ -0,0 +1,198 @@
+@import "mixins/mixins";
+@import "mixins/utils";
+@import 'mixins/button';
+@import "common/var";
+
+@include b(radio) {
+  color: $--radio-color;
+  font-weight: $--radio-font-weight;
+  line-height: 1;
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+  white-space: nowrap;
+  outline: none;
+  font-size: $--font-size-base;
+  @include utils-user-select(none);
+
+  @include when(bordered) {
+    padding: $--radio-bordered-padding;
+    border-radius: $--border-radius-base;
+    border: $--border-base;
+    box-sizing: border-box;
+    height: $--radio-bordered-height;
+
+    &.is-checked {
+      border-color: $--color-primary;
+    }
+
+    &.is-disabled {
+      cursor: not-allowed;
+      border-color: $--border-color-lighter;
+    }
+
+    & + .el-radio.is-bordered {
+      margin-left: 10px;
+    }
+  }
+
+  @include m(medium) {
+    &.is-bordered {
+      padding: $--radio-bordered-medium-padding;
+      border-radius: $--button-medium-border-radius;
+      height: $--radio-bordered-medium-height;
+      .el-radio__label {
+        font-size: $--button-medium-font-size;
+      }
+      .el-radio__inner {
+        height: $--radio-bordered-medium-input-height;
+        width: $--radio-bordered-medium-input-width;
+      }
+    }
+  }
+  @include m(small) {
+    &.is-bordered {
+      padding: $--radio-bordered-small-padding;
+      border-radius: $--button-small-border-radius;
+      height: $--radio-bordered-small-height;
+      .el-radio__label {
+        font-size: $--button-small-font-size;
+      }
+      .el-radio__inner {
+        height: $--radio-bordered-small-input-height;
+        width: $--radio-bordered-small-input-width;
+      }
+    }
+  }
+  @include m(mini) {
+    &.is-bordered {
+      padding: $--radio-bordered-mini-padding;
+      border-radius: $--button-mini-border-radius;
+      height: $--radio-bordered-mini-height;
+      .el-radio__label {
+        font-size: $--button-mini-font-size;
+      }
+      .el-radio__inner {
+        height: $--radio-bordered-mini-input-height;
+        width: $--radio-bordered-mini-input-width;
+      }
+    }
+  }
+
+  & + .el-radio {
+    margin-left: 30px;
+  }
+
+  @include e(input) {
+    white-space: nowrap;
+    cursor: pointer;
+    outline: none;
+    display: inline-block;
+    line-height: 1;
+    position: relative;
+    vertical-align: middle;
+
+    @include when(disabled) {
+      .el-radio__inner {
+        background-color: $--radio-disabled-input-fill;
+        border-color: $--radio-disabled-input-border-color;
+        cursor: not-allowed;
+
+        &::after {
+          cursor: not-allowed;
+          background-color: $--radio-disabled-icon-color;
+        }
+
+        & + .el-radio__label {
+          cursor: not-allowed;
+        }
+      }
+      &.is-checked {
+        .el-radio__inner {
+          background-color: $--radio-disabled-checked-input-fill;
+          border-color: $--radio-disabled-checked-input-border-color;
+
+          &::after {
+            background-color: $--radio-disabled-checked-icon-color;
+          }
+        }
+      }
+      & + span.el-radio__label {
+        color: $--color-text-placeholder;
+        cursor: not-allowed;
+      }
+    }
+
+    @include when(checked) {
+      .el-radio__inner {
+        border-color: $--radio-checked-input-border-color;
+        background: $--radio-checked-icon-color;
+
+        &::after {
+          transform: translate(-50%, -50%) scale(1);
+        }
+      }
+
+      & + .el-radio__label {
+        color: $--radio-checked-text-color;
+      }
+    }
+
+    @include when(focus) {
+      .el-radio__inner {
+        border-color: $--radio-input-border-color-hover;
+      }
+    }
+  }
+  @include e(inner) {
+    border: $--radio-input-border;
+    border-radius: $--radio-input-border-radius;
+    width: $--radio-input-width;
+    height: $--radio-input-height;
+    background-color: $--radio-input-fill;
+    position: relative;
+    cursor: pointer;
+    display: inline-block;
+    box-sizing: border-box;
+
+    &:hover {
+      border-color: $--radio-input-border-color-hover;
+    }
+
+    &::after {
+      width: 4px;
+      height: 4px;
+      border-radius: $--radio-input-border-radius;
+      background-color: $--color-white;
+      content: "";
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%) scale(0);
+      transition: transform .15s ease-in;
+    }
+  }
+
+  @include e(original) {
+    opacity: 0;
+    outline: none;
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: 0;
+  }
+
+  &:focus:not(.is-focus):not(:active):not(.is-disabled) { /*获得焦点时 样式提醒*/
+    .el-radio__inner {
+      box-shadow: 0 0 2px 2px $--radio-input-border-color-hover;
+    }
+  }
+
+  @include e(label) {
+    font-size: $--radio-font-size;
+    padding-left: 10px;
+  }
+}
diff --git a/packages/theme-chalk/src/rate.scss b/packages/theme-chalk/src/rate.scss
new file mode 100644
index 0000000000..99d7d045e6
--- /dev/null
+++ b/packages/theme-chalk/src/rate.scss
@@ -0,0 +1,49 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(rate) {
+  height: $--rate-height;
+  line-height: 1;
+
+  &:focus, &:active {
+    outline-width: 0;
+  }
+
+  @include e(item) {
+    display: inline-block;
+    position: relative;
+    font-size: 0;
+    vertical-align: middle;
+  }
+
+  @include e(icon) {
+    position: relative;
+    display: inline-block;
+    font-size: $--rate-icon-size;
+    margin-right: $--rate-icon-margin;
+    color: $--rate-icon-color;
+    transition: .3s;
+    &.hover {
+      transform: scale(1.15);
+    }
+
+    .path2 {
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+  }
+
+  @include e(decimal) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: inline-block;
+    overflow: hidden;
+  }
+
+  @include e(text) {
+    font-size: $--rate-font-size;
+    vertical-align: middle;
+  }
+}
diff --git a/packages/theme-default/src/reset.css b/packages/theme-chalk/src/reset.scss
similarity index 54%
rename from packages/theme-default/src/reset.css
rename to packages/theme-chalk/src/reset.scss
index 546b36b38e..a13e0deb40 100644
--- a/packages/theme-default/src/reset.css
+++ b/packages/theme-chalk/src/reset.scss
@@ -1,29 +1,29 @@
-@import './common/var.css';
+@import 'common/var';
 
-@reset-global pc;
 body {
   font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
   font-weight: 400;
-  font-size: var(--font-size-base);
-  color: var(--color-base-black);
+  font-size: $--font-size-base;
+  color: $--color-black;
+  -webkit-font-smoothing: antialiased;
 }
 
 a {
-  color: var(--color-primary);
+  color: $--color-primary;
   text-decoration: none;
 
   &:hover,
   &:focus {
-    color: tint(var(--color-primary), var(--button-hover-tint-percent));
+    color: mix($--color-white, $--color-primary, $--button-hover-tint-percent);
   }
 
   &:active {
-    color: shade(var(--color-primary), var(--button-active-shade-percent));
+    color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
   }
 }
 
 h1, h2, h3, h4, h5, h6 {
-  color: var(--font-color-base);
+  color: $--color-text-regular;
   font-weight: inherit;
 
   &:first-child {
@@ -36,15 +36,15 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
-  font-size: calc(var(--font-size-base) + 6px);
+  font-size: #{$--font-size-base + 6px};
 }
 
 h2 {
-  font-size: calc(var(--font-size-base) + 4px);
+  font-size: #{$--font-size-base + 4px};
 }
 
 h3 {
-  font-size: calc(var(--font-size-base) + 2px);
+  font-size: #{$--font-size-base + 2px};
 }
 
 h4, h5, h6, p {
@@ -64,11 +64,11 @@ p {
 }
 
 sup, sub {
-  font-size: calc(var(--font-size-base) - 1px);
+  font-size: #{$--font-size-base - 1px};
 }
 
 small {
-  font-size: calc(var(--font-size-base) - 2px);
+  font-size: #{$--font-size-base - 2px};
 }
 
 hr {
@@ -76,4 +76,4 @@ hr {
   margin-bottom: 20px;
   border: 0;
   border-top: 1px solid #eeeeee;
-}
\ No newline at end of file
+}
diff --git a/packages/theme-chalk/src/row.scss b/packages/theme-chalk/src/row.scss
new file mode 100644
index 0000000000..cec45c88b6
--- /dev/null
+++ b/packages/theme-chalk/src/row.scss
@@ -0,0 +1,39 @@
+@import "common/var";
+@import "mixins/mixins";
+@import "mixins/utils";
+
+@include b(row) {
+  position: relative;
+  box-sizing: border-box;
+  @include utils-clearfix;
+
+  @include m(flex) {
+    display: flex;
+    &:before,
+    &:after {
+      display: none;
+    }
+
+    @include when(justify-center) {
+      justify-content: center;
+    }
+    @include when(justify-end) {
+      justify-content: flex-end;
+    }
+    @include when(justify-space-between) {
+      justify-content: space-between;
+    }
+    @include when(justify-space-around) {
+      justify-content: space-around;
+    }
+
+    @include when(align-middle) {
+      align-items: center;
+    }
+    @include when(align-bottom) {
+      align-items: flex-end;
+    }
+  }
+
+}
+
diff --git a/packages/theme-chalk/src/scrollbar.scss b/packages/theme-chalk/src/scrollbar.scss
new file mode 100644
index 0000000000..e99d0ec1df
--- /dev/null
+++ b/packages/theme-chalk/src/scrollbar.scss
@@ -0,0 +1,71 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(scrollbar) {
+  overflow: hidden;
+  position: relative;
+
+  &:hover,
+  &:active,
+  &:focus {
+    > .el-scrollbar__bar {
+      opacity: 1;
+      transition: opacity 340ms ease-out;
+    }
+  }
+
+  @include e(wrap) {
+    overflow: scroll;
+    height: 100%;
+
+    @include m(hidden-default) {
+      &::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+      }
+    }
+  }
+
+  @include e(thumb) {
+    position: relative;
+    display: block;
+    width: 0;
+    height: 0;
+    cursor: pointer;
+    border-radius: inherit;
+    background-color: $--scrollbar-background-color;
+    transition: .3s background-color;
+
+    &:hover {
+      background-color: $--scrollbar-hover-background-color;
+    }
+  }
+
+  @include e(bar) {
+    position: absolute;
+    right: 2px;
+    bottom: 2px;
+    z-index: 1;
+    border-radius: 4px;
+    opacity: 0;
+    transition: opacity 120ms ease-out;
+
+    @include when(vertical) {
+      width: 6px;
+      top: 2px;
+
+      > div {
+        width: 100%;
+      }
+    }
+
+    @include when(horizontal) {
+      height: 6px;
+      left: 2px;
+
+      > div {
+        height: 100%;
+      }
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/select-dropdown.scss b/packages/theme-chalk/src/select-dropdown.scss
new file mode 100644
index 0000000000..d6a9135d8a
--- /dev/null
+++ b/packages/theme-chalk/src/select-dropdown.scss
@@ -0,0 +1,59 @@
+@import "mixins/mixins";
+@import "common/var";
+@import "./popper";
+
+@include b(select-dropdown) {
+  position: absolute;
+  z-index: #{$--index-top + 1};
+  border: $--select-dropdown-border;
+  border-radius: $--border-radius-base;
+  background-color: $--select-dropdown-background;
+  box-shadow: $--select-dropdown-shadow;
+  box-sizing: border-box;
+  margin: 5px 0;
+
+  @include when(multiple) {
+    & .el-select-dropdown__item.selected {
+      color: $--select-option-selected;
+      background-color: $--select-dropdown-background;
+
+      &.hover {
+        background-color: $--select-option-hover-background;
+      }
+
+      &::after {
+        position: absolute;
+        right: 20px;
+        font-family: 'element-icons';
+        content: "\E611";
+        font-size: 12px;
+        font-weight: bold;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+    }
+  }
+
+  .el-scrollbar.is-empty .el-select-dropdown__list{
+    padding: 0;
+  }
+}
+
+@include b(select-dropdown__empty) {
+  padding: $--select-dropdown-empty-padding;
+  margin: 0;
+  text-align: center;
+  color: $--select-dropdown-empty-color;
+  font-size: $--select-font-size;
+}
+
+@include b(select-dropdown__wrap) {
+  max-height: $--select-dropdown-max-height;
+}
+
+@include b(select-dropdown__list) {
+  list-style: none;
+  padding: $--select-dropdown-padding;
+  margin: 0;
+  box-sizing: border-box;
+}
diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss
new file mode 100644
index 0000000000..d11dcdca59
--- /dev/null
+++ b/packages/theme-chalk/src/select.scss
@@ -0,0 +1,148 @@
+@import "mixins/mixins";
+@import "mixins/utils";
+@import "common/var";
+@import "select-dropdown";
+@import "input";
+@import "tag";
+@import "option";
+@import "option-group";
+@import "scrollbar";
+
+@include b(select) {
+  display: inline-block;
+  position: relative;
+
+  .el-select__tags
+    >span {
+      display: contents;
+    }
+
+  &:hover {
+    .el-input__inner {
+      border-color: $--select-border-color-hover;
+    }
+  }
+
+  .el-input__inner {
+    cursor: pointer;
+    padding-right: 35px;
+
+    &:focus {
+      border-color: $--select-input-focus-background;
+    }
+  }
+
+  .el-input {
+    & .el-select__caret {
+      color: $--select-input-color;
+      font-size: $--select-input-font-size;
+      transition: transform .3s;
+      transform: rotateZ(180deg);
+      cursor: pointer;
+
+      @include when(reverse) {
+        transform: rotateZ(0deg);
+      }
+
+      @include when(show-close) {
+        font-size: $--select-font-size;
+        text-align: center;
+        transform: rotateZ(180deg);
+        border-radius: $--border-radius-circle;
+        color: $--select-input-color;
+        transition: $--color-transition-base;
+
+        &:hover {
+          color: $--select-close-hover-color;
+        }
+      }
+    }
+
+    &.is-disabled {
+      & .el-input__inner {
+        cursor: not-allowed;
+
+        &:hover {
+          border-color: $--select-disabled-border;
+        }
+      }
+    }
+
+    &.is-focus .el-input__inner {
+      border-color: $--select-input-focus-background;
+    }
+  }
+
+  > .el-input {
+    display: block;
+  }
+
+  @include e(input) {
+    border: none;
+    outline: none;
+    padding: 0;
+    margin-left: 15px;
+    color: $--select-multiple-input-color;
+    font-size: $--select-font-size;
+    appearance: none;
+    height: 28px;
+    background-color: transparent;
+    @include when(mini) {
+      height: 14px;
+    }
+  }
+
+  @include e(close) {
+    cursor: pointer;
+    position: absolute;
+    top: 8px;
+    z-index: $--index-top;
+    right: 25px;
+    color: $--select-input-color;
+    line-height: 18px;
+    font-size: $--select-input-font-size;
+
+    &:hover {
+      color: $--select-close-hover-color;
+    }
+  }
+
+  @include e(tags) {
+    position: absolute;
+    line-height: normal;
+    white-space: normal;
+    z-index: $--index-normal;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  .el-tag__close {
+    margin-top: -2px;
+  }
+
+  .el-tag {
+    box-sizing: border-box;
+    border-color: transparent;
+    margin: 2px 0 2px 6px;
+    background-color: #f0f2f5;
+
+    &__close.el-icon-close {
+      background-color: $--color-text-placeholder;
+      right: -7px;
+      top: 0;
+      color: $--color-white;
+
+      &:hover {
+        background-color: $--color-text-secondary;
+      }
+
+      &::before {
+        display: block;
+        transform: translate(0, .5px);
+      }
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/slider.scss b/packages/theme-chalk/src/slider.scss
new file mode 100644
index 0000000000..7961df9254
--- /dev/null
+++ b/packages/theme-chalk/src/slider.scss
@@ -0,0 +1,228 @@
+@import "mixins/mixins";
+@import "mixins/utils";
+@import "input-number";
+@import "tooltip";
+@import "common/var";
+
+@include b(slider) {
+  @include utils-clearfix;
+
+  @include e(runway) {
+    width: 100%;
+    height: $--slider-height;
+    margin: $--slider-margin;
+    background-color: $--slider-runway-background-color;
+    border-radius: $--slider-border-radius;
+    position: relative;
+    cursor: pointer;
+    vertical-align: middle;
+
+    &.show-input {
+      margin-right: 160px;
+      width: auto;
+    }
+
+    &.disabled {
+      cursor: default;
+
+      .el-slider__bar {
+        background-color: $--slider-disable-color;
+      }
+
+      .el-slider__button {
+        border-color: $--slider-disable-color;
+      }
+
+      .el-slider__button-wrapper {
+        &:hover,
+        &.hover {
+          cursor: not-allowed;
+        }
+
+        &.dragging {
+          cursor: not-allowed;
+        }
+      }
+
+      .el-slider__button {
+        &:hover,
+        &.hover,
+        &.dragging {
+          transform: scale(1);
+        }
+
+        &:hover,
+        &.hover {
+          cursor: not-allowed;
+        }
+
+        &.dragging {
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+
+  @include e(input) {
+    float: right;
+    margin-top: 3px;
+    width: 130px;
+
+    &.el-input-number--mini {
+      margin-top: 5px;
+    }
+
+    &.el-input-number--medium {
+      margin-top: 0;
+    }
+
+    &.el-input-number--large {
+      margin-top: -2px;
+    }
+  }
+
+  @include e(bar) {
+    height: $--slider-height;
+    background-color: $--slider-main-background-color;
+    border-top-left-radius: $--slider-border-radius;
+    border-bottom-left-radius: $--slider-border-radius;
+    position: absolute;
+  }
+
+  @include e(button-wrapper) {
+    height: $--slider-button-wrapper-size;
+    width: $--slider-button-wrapper-size;
+    position: absolute;
+    z-index: 1001;
+    top: $--slider-button-wrapper-offset;
+    transform: translateX(-50%);
+    background-color: transparent;
+    text-align: center;
+    user-select: none;
+    line-height: normal;
+    @include utils-vertical-center;
+
+    .el-tooltip {
+      vertical-align: middle;
+      display: inline-block;
+    }
+
+    &:hover,
+    &.hover {
+      cursor: grab;
+    }
+
+    &.dragging {
+      cursor: grabbing;
+    }
+  }
+
+  @include e(button) {
+    width: $--slider-button-size;
+    height: $--slider-button-size;
+    border: solid 2px $--slider-main-background-color;
+    background-color: $--color-white;
+    border-radius: 50%;
+    transition: .2s;
+    user-select: none;
+
+    &:hover,
+    &.hover,
+    &.dragging {
+      transform: scale(1.2);
+    }
+
+    &:hover,
+    &.hover {
+      cursor: grab;
+    }
+
+    &.dragging {
+      cursor: grabbing;
+    }
+  }
+
+  @include e(stop) {
+    position: absolute;
+    height: $--slider-height;
+    width: $--slider-height;
+    border-radius: $--border-radius-circle;
+    background-color: $--slider-stop-background-color;
+    transform: translateX(-50%);
+  }
+
+  @include when(vertical) {
+    position: relative;
+    .el-slider__runway {
+      width: $--slider-height;
+      height: 100%;
+      margin: 0 16px;
+    }
+    .el-slider__bar {
+      width: $--slider-height;
+      height: auto;
+      border-radius: 0 0 3px 3px;
+    }
+    .el-slider__button-wrapper {
+      top: auto;
+      left: $--slider-button-wrapper-offset;
+      transform: translateY(50%);
+    }
+    .el-slider__stop {
+      transform: translateY(50%);
+    }
+    &.el-slider--with-input {
+      padding-bottom: #{$--input-medium-height + 22px};
+      .el-slider__input {
+        overflow: visible;
+        float: none;
+        position: absolute;
+        bottom: 22px;
+        width: 36px;
+        margin-top: 15px;
+        .el-input__inner {
+          text-align: center;
+          padding-left: 5px;
+          padding-right: 5px;
+        }
+        .el-input-number__decrease,
+        .el-input-number__increase
+        {
+          top: $--input-small-height;
+          margin-top: -1px;
+          border: $--input-border;
+          line-height: 20px;
+          box-sizing: border-box;
+          transition: $--border-transition-base;
+        }
+        .el-input-number__decrease {
+          width: 18px;
+          right: 18px;
+          border-bottom-left-radius: $--input-border-radius;
+        }
+        .el-input-number__increase {
+          width: 19px;
+          border-bottom-right-radius: $--input-border-radius;
+          & ~ .el-input .el-input__inner {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+          }
+        }
+        &:hover {
+          .el-input-number__decrease,
+          .el-input-number__increase
+          {
+            border-color: $--input-hover-border;
+          }
+        }
+        &:active {
+          .el-input-number__decrease,
+          .el-input-number__increase
+          {
+            border-color: $--input-focus-border;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/spinner.scss b/packages/theme-chalk/src/spinner.scss
new file mode 100644
index 0000000000..b76ffc09d3
--- /dev/null
+++ b/packages/theme-chalk/src/spinner.scss
@@ -0,0 +1,44 @@
+@import "mixins/mixins";
+
+@include b(time-spinner) {
+  width: 100%;
+  white-space: nowrap;
+}
+
+@include b(spinner) {
+  display: inline-block;
+  vertical-align: middle;
+}
+@include b(spinner-inner) {
+  animation: rotate 2s linear infinite;
+  width: 50px;
+  height: 50px;
+
+  & .path {
+    stroke: #ececec;
+    stroke-linecap: round;
+    animation: dash 1.5s ease-in-out infinite;
+  }
+
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
diff --git a/packages/theme-chalk/src/step.scss b/packages/theme-chalk/src/step.scss
new file mode 100644
index 0000000000..37a831c5da
--- /dev/null
+++ b/packages/theme-chalk/src/step.scss
@@ -0,0 +1,317 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(step) {
+  position: relative;
+  flex-shrink: 1;
+
+  @include pseudo(last-of-type) {
+    @include e(line) {
+      display: none;
+    }
+
+    // 只有未设置 space 的情况下才自适应宽度
+    @include when(flex) {
+      flex-basis: auto !important;
+      flex-shrink: 0;
+      flex-grow: 0;
+    }
+
+    @include e((main, description)) {
+      padding-right: 0;
+    }
+  }
+
+  @include e(head) {
+    position: relative;
+    width: 100%;
+
+    @include when(process) {
+      color: $--color-text-primary;
+      border-color: $--color-text-primary;
+    }
+
+    @include when(wait) {
+      color: $--color-text-placeholder;
+      border-color: $--color-text-placeholder;
+    }
+
+    @include when(success) {
+      color: $--color-success;
+      border-color: $--color-success;
+    }
+
+    @include when(error) {
+      color: $--color-danger;
+      border-color: $--color-danger;
+    }
+
+    @include when(finish) {
+      color: $--color-primary;
+      border-color: $--color-primary;
+    }
+  }
+
+  @include e(icon) {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 24px;
+    height: 24px;
+    font-size: 14px;
+    box-sizing: border-box;
+    background: $--color-white;
+    transition: .15s ease-out;
+
+    @include when(text) {
+      border-radius: 50%;
+      border: 2px solid;
+      border-color: inherit;
+    }
+
+    @include when(icon) {
+      width: 40px;
+    }
+  }
+
+  @include e(icon-inner) {
+    display: inline-block;
+    user-select: none;
+    text-align: center;
+    font-weight: bold;
+    line-height: 1;
+    color: inherit;
+
+    &[class*=el-icon]:not(.is-status) {
+      font-size: 25px;
+      font-weight: normal;
+    }
+
+    // 组件自身表示状态的图标
+    @include when(status) {
+      transform: translateY(1px);
+    }
+  }
+
+  @include e(line) {
+    position: absolute;
+    border-color: inherit;
+    background-color: $--color-text-placeholder;
+  }
+
+  @include e(line-inner) {
+    display: block;
+    border-width: 1px;
+    border-style: solid;
+    border-color: inherit;
+    transition: .15s ease-out;
+    box-sizing: border-box;
+    width: 0;
+    height: 0;
+  }
+
+  @include e(main) {
+    white-space: normal;
+    text-align: left;
+  }
+
+  @include e(title) {
+    font-size: 16px;
+    line-height: 38px;
+
+    @include when(process) {
+      font-weight: bold;
+      color: $--color-text-primary;
+    }
+
+    @include when(wait) {
+      color: $--color-text-placeholder;
+    }
+
+    @include when(success) {
+      color: $--color-success;
+    }
+
+    @include when(error) {
+      color: $--color-danger;
+    }
+
+    @include when(finish) {
+      color: $--color-primary;
+    }
+  }
+
+  @include e(description) {
+    padding-right: 10%;
+    margin-top: -5px;
+    font-size: 12px;
+    line-height: 20px;
+    font-weight: normal;
+
+    @include when(process) {
+      color: $--color-text-primary;
+    }
+
+    @include when(wait) {
+      color: $--color-text-placeholder;
+    }
+
+    @include when(success) {
+      color: $--color-success;
+    }
+
+    @include when(error) {
+      color: $--color-danger;
+    }
+
+    @include when(finish) {
+      color: $--color-primary;
+    }
+  }
+
+  @include when(horizontal) {
+    display: inline-block;
+
+    @include e(line) {
+      height: 2px;
+      top: 11px;
+      left: 0;
+      right: 0;
+    }
+  }
+
+  @include when(vertical) {
+    display: flex;
+
+    @include e(head) {
+      flex-grow: 0;
+      width: 24px;
+    }
+
+    @include e(main) {
+      padding-left: 10px;
+      flex-grow: 1;
+    }
+
+    @include e(title) {
+      line-height: 24px;
+      padding-bottom: 8px;
+    }
+
+    @include e(line) {
+      width: 2px;
+      top: 0;
+      bottom: 0;
+      left: 11px;
+    }
+
+    @include e(icon) {
+      @include when(icon) {
+        width: 24px;
+      }
+    }
+  }
+
+  @include when(center) {
+
+    @include e(head) {
+      text-align: center;
+    }
+
+    @include e(main) {
+      text-align: center;
+    }
+
+    @include e(description) {
+      padding-left: 20%;
+      padding-right: 20%;
+    }
+
+    @include e(line) {
+      left: 50%;
+      right: -50%;
+    }
+  }
+
+  @include when(simple) {
+    display: flex;
+    align-items: center;
+
+    @include e(head) {
+      width: auto;
+      font-size: 0;
+      padding-right: 10px;
+    }
+
+    @include e(icon) {
+      background: transparent;
+      width: 16px;
+      height: 16px;
+      font-size: 12px;
+    }
+
+    @include e(icon-inner) {
+      &[class*=el-icon]:not(.is-status) {
+        font-size: 18px;
+      }
+
+      &.is-status {
+        transform: scale(.8) translateY(1px);
+      }
+    }
+
+    @include e(main) {
+      position: relative;
+      display: flex;
+      align-items: stretch;
+      flex-grow: 1;
+    }
+
+    @include e(title) {
+      font-size: 16px;
+      line-height: 20px;
+    }
+
+    @include pseudo('not(:last-of-type)') {
+      @include e(title) {
+        max-width: 50%;
+        word-break: break-all;
+      }
+    }
+
+    @include e(arrow) {
+      flex-grow: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &::before,
+      &::after {
+        content: '';
+        display: inline-block;
+        position: absolute;
+        height: 15px;
+        width: 1px;
+        background: $--color-text-placeholder;
+      }
+
+      &::before {
+        transform: rotate(-45deg) translateY(-4px);
+        transform-origin: 0 0;
+      }
+
+      &::after {
+        transform: rotate(45deg) translateY(4px);
+        transform-origin: 100% 100%;
+      }
+    }
+
+    @include pseudo(last-of-type) {
+      @include e(arrow) {
+        display: none;
+      }
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/steps.scss b/packages/theme-chalk/src/steps.scss
new file mode 100644
index 0000000000..aa3464eea4
--- /dev/null
+++ b/packages/theme-chalk/src/steps.scss
@@ -0,0 +1,20 @@
+@import "mixins/mixins";
+
+@include b(steps) {
+  display: flex;
+
+  @include m(simple) {
+    padding: 13px 8%;
+    border-radius: 4px;
+    background: $--background-color-base;
+  }
+
+  @include m(horizontal) {
+    white-space: nowrap;
+  }
+
+  @include m(vertical) {
+    height: 100%;
+    flex-flow: column;
+  }
+}
diff --git a/packages/theme-default/src/submenu.css b/packages/theme-chalk/src/submenu.scss
similarity index 100%
rename from packages/theme-default/src/submenu.css
rename to packages/theme-chalk/src/submenu.scss
diff --git a/packages/theme-chalk/src/switch.scss b/packages/theme-chalk/src/switch.scss
new file mode 100644
index 0000000000..c38eedef15
--- /dev/null
+++ b/packages/theme-chalk/src/switch.scss
@@ -0,0 +1,116 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(switch) {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  font-size: $--switch-font-size;
+  line-height: $--switch-height;
+  height: $--switch-height;
+  vertical-align: middle;
+  @include when(disabled) {
+    & .el-switch__core,
+    & .el-switch__label {
+      cursor: not-allowed;
+    }
+  }
+
+  @include e(label) {
+    transition: .2s;
+    height: $--switch-height;
+    display: inline-block;
+    font-size: $--switch-font-size;
+    font-weight: 500;
+    cursor: pointer;
+    vertical-align: middle;
+    color: $--color-text-primary;
+
+    @include when(active) {
+      color: $--color-primary;
+    }
+
+    @include m(left) {
+      margin-right: 10px;
+    }
+    @include m(right) {
+      margin-left: 10px;
+    }
+    & * {
+      line-height: 1;
+      font-size: $--switch-font-size;
+      display: inline-block;
+    }
+  }
+
+  @include e(input) {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    margin: 0;
+  }
+
+  @include e(core) {
+    margin: 0;
+    display: inline-block;
+    position: relative;
+    width: $--switch-width;
+    height: $--switch-height;
+    border: 1px solid $--switch-off-color;
+    outline: none;
+    border-radius: $--switch-core-border-radius;
+    box-sizing: border-box;
+    background: $--switch-off-color;
+    cursor: pointer;
+    transition: border-color .3s, background-color .3s;
+    vertical-align: middle;
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 1px;
+      left: 1px;
+      border-radius: $--border-radius-circle;
+      transition: all .3s;
+      width: $--switch-button-size;
+      height: $--switch-button-size;
+      background-color: $--color-white;
+    }
+  }
+
+  @include when(checked) {
+    .el-switch__core {
+      border-color: $--switch-on-color;
+      background-color: $--switch-on-color;
+      &::after {
+        left: 100%;
+        margin-left: -$--switch-button-size - 1px;
+      }
+    }
+  }
+
+  @include when(disabled) {
+    opacity: 0.6;
+  }
+
+  @include m(wide) {
+    .el-switch__label {
+      &.el-switch__label--left {
+        span {
+          left: 10px;
+        }
+      }
+      &.el-switch__label--right {
+        span {
+          right: 10px;
+        }
+      }
+    }
+  }
+
+  & .label-fade-enter,
+  & .label-fade-leave-active {
+    opacity: 0;
+  }
+}
diff --git a/packages/theme-default/src/tab-pane.css b/packages/theme-chalk/src/tab-pane.scss
similarity index 100%
rename from packages/theme-default/src/tab-pane.css
rename to packages/theme-chalk/src/tab-pane.scss
diff --git a/packages/theme-chalk/src/table-column.scss b/packages/theme-chalk/src/table-column.scss
new file mode 100644
index 0000000000..6fd54e7a47
--- /dev/null
+++ b/packages/theme-chalk/src/table-column.scss
@@ -0,0 +1,97 @@
+@import "mixins/mixins";
+@import "checkbox";
+@import "tag";
+@import "common/var";
+
+@include b(table-column) {
+  @include m(selection) {
+    .cell {
+      padding-left: 14px;
+      padding-right: 14px;
+    }
+  }
+}
+
+@include b(table-filter) {
+  border: solid 1px $--border-color-lighter;
+  border-radius: 2px;
+  background-color: $--color-white;
+  box-shadow: $--dropdown-menu-box-shadow;
+  box-sizing: border-box;
+  margin: 2px 0;
+
+  /** used for dropdown mode */
+  @include e(list) {
+    padding: 5px 0;
+    margin: 0;
+    list-style: none;
+    min-width: 100px;
+  }
+
+  @include e(list-item) {
+    line-height: 36px;
+    padding: 0 10px;
+    cursor: pointer;
+    font-size: $--font-size-base;
+
+    &:hover {
+      background-color: $--dropdown-menuItem-hover-fill;
+      color: $--dropdown-menuItem-hover-color;
+    }
+
+    @include when(active) {
+      background-color: $--color-primary;
+      color: $--color-white;
+    }
+  }
+
+  @include e(content) {
+    min-width: 100px;
+  }
+
+  @include e(bottom) {
+    border-top: 1px solid $--border-color-lighter;
+    padding: 8px;
+
+    button {
+      background: transparent;
+      border: none;
+      color: $--color-text-regular;
+      cursor: pointer;
+      font-size: $--font-size-small;
+      padding: 0 3px;
+
+      &:hover {
+        color: $--color-primary;
+      }
+
+      &:focus {
+        outline: none;
+      }
+
+      &.is-disabled {
+        color: $--disabled-color-base;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  @include e(wrap) {
+    max-height: 280px;
+  }
+
+  @include e(checkbox-group) {
+    padding: 10px;
+
+    label.el-checkbox {
+      display: block;
+      margin-right: 5px;
+      margin-bottom: 8px;
+      margin-left: 5px;
+    }
+
+    .el-checkbox:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/theme-chalk/src/table.scss b/packages/theme-chalk/src/table.scss
new file mode 100644
index 0000000000..8257491bf1
--- /dev/null
+++ b/packages/theme-chalk/src/table.scss
@@ -0,0 +1,552 @@
+@import "mixins/mixins";
+@import "checkbox";
+@import "tag";
+@import "tooltip";
+@import "common/var";
+
+@include b(table) {
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  flex: 1;
+  width: 100%;
+  max-width: 100%;
+  background-color: $--color-white;
+  font-size: 14px;
+  color: $--table-text-color;
+
+  // 数据为空
+  @include e(empty-block) {
+    min-height: 60px;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  @include e(empty-text) {
+    width: 50%;
+    color: $--color-text-secondary;
+  }
+
+  // 展开行
+  @include e(expand-column) {
+    .cell {
+      padding: 0;
+      text-align: center;
+    }
+  }
+
+  @include e(expand-icon) {
+    position: relative;
+    cursor: pointer;
+    color: #666;
+    font-size: 12px;
+    transition: transform 0.2s ease-in-out;
+    height: 20px;
+
+    @include m(expanded) {
+      transform: rotate(90deg);
+    }
+
+    > .el-icon {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      margin-left: -5px;
+      margin-top: -5px;
+    }
+  }
+
+  @include e(expanded-cell) {
+    background-color: $--color-white;
+
+    // 纯属为了增加权重
+    &[class*=cell] {
+      padding: 20px 50px;
+    }
+
+    &:hover {
+      background-color: transparent !important;
+    }
+  }
+
+  @include m(fit) {
+    border-right: 0;
+    border-bottom: 0;
+
+    th.gutter, td.gutter {
+      border-right-width: 1px;
+    }
+  }
+
+  @include m(scrollable-x) {
+    .el-table__body-wrapper {
+      overflow-x: auto;
+    }
+  }
+
+  @include m(scrollable-y) {
+    .el-table__body-wrapper {
+      overflow-y: auto;
+    }
+  }
+
+  thead {
+    color: $--table-header-color;
+    font-weight: 500;
+
+    &.is-group {
+      th {
+        background: $--background-color-base;
+      }
+    }
+  }
+
+  th, td {
+    padding: 12px 0;
+    min-width: 0;
+    box-sizing: border-box;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    position: relative;
+    text-align: left;
+
+    @include when(center) {
+      text-align: center;
+    }
+
+    @include when(right) {
+      text-align: right;
+    }
+
+    &.gutter {
+      width: 15px;
+      border-right-width: 0;
+      border-bottom-width: 0;
+      padding: 0;
+    }
+
+    &.is-hidden {
+      > * {
+        visibility: hidden;
+      }
+    }
+  }
+
+  @include m(medium) {
+    th, td {
+      padding: 10px 0;
+    }
+  }
+
+  @include m(small) {
+    font-size: 12px;
+    th, td {
+      padding: 8px 0;
+    }
+  }
+
+  @include m(mini) {
+    font-size: 12px;
+    th, td {
+      padding: 6px 0;
+    }
+  }
+
+  tr {
+    background-color: $--color-white;
+
+    input[type="checkbox"] {
+      margin: 0;
+    }
+  }
+
+  th.is-leaf, td {
+    border-bottom: $--table-border;
+  }
+
+  th.is-sortable {
+    cursor: pointer;
+  }
+
+  th {
+    white-space: nowrap;
+    overflow: hidden;
+    user-select: none;
+    background-color: $--table-header-background;
+
+    div {
+      display: inline-block;
+      padding-left: 10px;
+      padding-right: 10px;
+      line-height: 40px;
+      box-sizing: border-box;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    > .cell {
+      position: relative;
+      word-wrap: normal;
+      text-overflow: ellipsis;
+      display: inline-block;
+      vertical-align: middle;
+      width: 100%;
+      box-sizing: border-box;
+
+      &.highlight {
+        color: $--color-primary;
+      }
+    }
+
+    &.required > div::before {
+      display: inline-block;
+      content: "";
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #ff4d51;
+      margin-right: 5px;
+      vertical-align: middle;
+    }
+  }
+
+  td {
+    div {
+      box-sizing: border-box;
+    }
+
+    &.gutter {
+      width: 0;
+    }
+  }
+
+  .cell {
+    box-sizing: border-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: normal;
+    word-break: break-all;
+    line-height: 23px;
+    padding-left: 10px;
+    padding-right: 10px;
+
+    &.el-tooltip {
+      white-space: nowrap;
+      min-width: 50px;
+    }
+  }
+
+  // 拥有多级表头
+  @include m((group, border)) {
+    border: $--table-border;
+
+    @include share-rule(border-pseudo) {
+      content: '';
+      position: absolute;
+      background-color: $--table-border-color;
+      z-index: 1;
+    }
+
+    // 表格右部伪 border
+    &::after {
+      @include extend-rule(border-pseudo);
+      top: 0;
+      right: 0;
+      width: 1px;
+      height: 100%;
+    }
+  }
+
+  // 表格底部伪 border，总是有的
+  &::before {
+    @include extend-rule(border-pseudo);
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 1px;
+  }
+
+  // table--border
+  @include m(border) {
+    border-right: none;
+    border-bottom: none;
+
+    &.el-loading-parent--relative {
+      border-color: transparent;
+    }
+
+    th, td {
+      border-right: $--table-border;
+
+      &:first-child .cell {
+        padding-left: 10px;
+      }
+    }
+
+    th.gutter:last-of-type {
+      border-bottom: $--table-border;
+      border-bottom-width: 1px;
+    }
+
+    & th {
+      border-bottom: $--table-border;
+    }
+  }
+
+  @include m(hidden) {
+    visibility: hidden;
+  }
+
+  @include e((fixed, fixed-right)) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    box-shadow: $--table-fixed-box-shadow;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 1px;
+      background-color: $--border-color-lighter;
+      z-index: 4;
+    }
+  }
+
+  @include e(fixed-right-patch) {
+    position: absolute;
+    top: -1px;
+    right: 0;
+    background-color: $--color-white;
+    border-bottom: $--table-border;
+  }
+
+  @include e(fixed-right) {
+    top: 0;
+    left: auto;
+    right: 0;
+
+    .el-table__fixed-header-wrapper,
+    .el-table__fixed-body-wrapper,
+    .el-table__fixed-footer-wrapper {
+      left: auto;
+      right: 0;
+    }
+  }
+
+  @include e(fixed-header-wrapper) {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 3;
+  }
+
+  @include e(fixed-footer-wrapper) {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    z-index: 3;
+
+    & tbody td {
+      border-top: $--table-border;
+      background-color: $--table-row-hover-background;
+      color: $--table-text-color;
+    }
+  }
+
+  @include e(fixed-body-wrapper) {
+    position: absolute;
+    left: 0;
+    top: 37px;
+    overflow: hidden;
+    z-index: 3;
+  }
+
+  @include e((header-wrapper, body-wrapper, footer-wrapper)) {
+    width: 100%;
+  }
+
+  @include e(footer-wrapper) {
+    margin-top: -1px;
+    td {
+      border-top: $--table-border;
+    }
+  }
+
+  @include e((header, body, footer)) {
+    table-layout: fixed;
+    border-collapse: separate;
+  }
+
+  @include e((header-wrapper, footer-wrapper)) {
+    overflow: hidden;
+
+    & tbody td {
+      background-color: $--table-row-hover-background;
+      color: $--table-text-color;
+    }
+  }
+
+  @include e(body-wrapper) {
+    overflow: hidden;
+    position: relative;
+
+    @include when(scrolling-none) {
+      ~ .el-table__fixed,
+      ~ .el-table__fixed-right {
+        box-shadow: none;
+      }
+    }
+
+    @include when(scrolling-left) {
+      ~ .el-table__fixed {
+        box-shadow: none;
+      }
+    }
+
+    @include when(scrolling-right) {
+      ~ .el-table__fixed-right {
+        box-shadow: none;
+      }
+    }
+
+    .el-table--border {
+      @include when(scrolling-right) {
+        ~ .el-table__fixed-right {
+          border-left: $--table-border;
+        }
+      }
+
+      @include when(scrolling-left) {
+        ~ .el-table__fixed {
+          border-right: $--table-border;
+        }
+      }
+    }
+  }
+
+  .caret-wrapper {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    height: 34px;
+    width: 24px;
+    vertical-align: middle;
+    cursor: pointer;
+    overflow: initial;
+    position: relative;
+  }
+
+  .sort-caret {
+    width: 0;
+    height: 0;
+    border: solid 5px transparent;
+    position: absolute;
+    left: 7px;
+
+    &.ascending {
+      border-bottom-color: $--color-text-placeholder;
+      top: 5px;
+    }
+
+    &.descending {
+      border-top-color: $--color-text-placeholder;
+      bottom: 7px;
+    }
+  }
+
+  .ascending .sort-caret.ascending {
+    border-bottom-color: $--color-primary;
+  }
+
+  .descending .sort-caret.descending {
+    border-top-color: $--color-primary;
+  }
+
+  .hidden-columns {
+    visibility: hidden;
+    position: absolute;
+    z-index: -1;
+  }
+
+  @include m(striped) {
+    & .el-table__body {
+      & tr.el-table__row--striped {
+        td {
+          background: #FAFAFA;
+        }
+
+        &.current-row td {
+          background-color: $--table-current-row-background;
+        }
+      }
+    }
+  }
+
+  @include e(body) {
+    tr.hover-row {
+      &, &.el-table__row--striped {
+        &, &.current-row {
+          > td {
+            background-color: $--table-current-row-background;
+          }
+        }
+      }
+    }
+
+    tr.current-row > td {
+      background-color: $--table-current-row-background;
+    }
+  }
+
+  @include e(column-resize-proxy) {
+    position: absolute;
+    left: 200px;
+    top: 0;
+    bottom: 0;
+    width: 0;
+    border-left: $--table-border;
+    z-index: 10;
+  }
+
+  @include e(column-filter-trigger) {
+    display: inline-block;
+    line-height: 34px;
+    cursor: pointer;
+
+    & i {
+      color: $--color-info;
+      font-size: 12px;
+      transform: scale(.75);
+    }
+  }
+
+  @include m(enable-row-transition) {
+    .el-table__body td {
+      transition: background-color .25s ease;
+    }
+  }
+
+  @include m(enable-row-hover) {
+    .el-table__body tr:hover > td {
+      background-color: $--table-row-hover-background;
+    }
+  }
+
+  @include m(fluid-height) {
+    .el-table__fixed,
+    .el-table__fixed-right {
+      bottom: 0;
+      overflow: hidden;
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/tabs.scss b/packages/theme-chalk/src/tabs.scss
new file mode 100644
index 0000000000..84b6210561
--- /dev/null
+++ b/packages/theme-chalk/src/tabs.scss
@@ -0,0 +1,587 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(tabs) {
+  @include e(header) {
+    padding: 0;
+    position: relative;
+    margin: 0 0 15px;
+  }
+  @include e(active-bar) {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 2px;
+    background-color: $--color-primary;
+    z-index: 1;
+    transition: transform .3s cubic-bezier(.645,.045,.355,1);
+    list-style: none;
+  }
+  @include e(new-tab) {
+    float: right;
+    border: 1px solid #d3dce6;
+    height: 18px;
+    width: 18px;
+    line-height: 18px;
+    margin: 12px 0 9px 10px;
+    border-radius: 3px;
+    text-align: center;
+    font-size: 12px;
+    color: #d3dce6;
+    cursor: pointer;
+    transition: all .15s;
+
+    .el-icon-plus {
+      transform: scale(0.8, 0.8);
+    }
+
+    &:hover {
+      color: $--color-primary;
+    }
+  }
+  @include e(nav-wrap) {
+    overflow: hidden;
+    margin-bottom: -1px;
+    position: relative;
+
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 2px;
+      background-color: $--border-color-light;
+      z-index: $--index-normal;
+    }
+
+    @include when(scrollable) {
+      padding: 0 20px;
+      box-sizing: border-box;
+    }
+  }
+  @include e(nav-scroll) {
+    overflow: hidden;
+  }
+  @include e((nav-next, nav-prev)) {
+    position: absolute;
+    cursor: pointer;
+    line-height: 44px;
+    font-size: 12px;
+    color: $--color-text-secondary;
+  }
+  @include e(nav-next) {
+    right: 0;
+  }
+  @include e(nav-prev) {
+    left: 0;
+  }
+  @include e(nav) {
+    white-space: nowrap;
+    position: relative;
+    transition: transform .3s;
+    float: left;
+    z-index: #{$--index-normal + 1};
+
+    @include when(stretch) {
+      min-width: 100%;
+      display: flex;
+      & > * {
+        flex: 1;
+        text-align: center;
+      }
+    }
+  }
+  @include e(item) {
+    padding: 0 20px;
+    height: 40px;
+    box-sizing: border-box;
+    line-height: 40px;
+    display: inline-block;
+    list-style: none;
+    font-size: 14px;
+    font-weight: 500;
+    color: $--color-text-primary;
+    position: relative;
+
+    &:focus, &:focus:active {
+      outline: none;
+    }
+
+    &:focus.is-active.is-focus:not(:active) {
+      box-shadow: 0 0 2px 2px #409eff inset;
+      border-radius: 3px;
+    }
+
+    & .el-icon-close {
+      border-radius: 50%;
+      text-align: center;
+      transition: all .3s cubic-bezier(.645,.045,.355,1);
+      margin-left: 5px;
+      &:before {
+        transform: scale(.9);
+        display: inline-block;
+      }
+
+      &:hover {
+        background-color: $--color-text-placeholder;
+        color: $--color-white;
+      }
+    }
+
+    @include when(active) {
+      color: $--color-primary;
+    }
+
+    &:hover {
+      color: $--color-primary;
+      cursor: pointer;
+    }
+
+    @include when(disabled) {
+      color: $--disabled-color-base;
+      cursor: default;
+    }
+  }
+  @include e(content) {
+    overflow: hidden;
+    position: relative;
+  }
+  @include m(card) {
+    > .el-tabs__header {
+      border-bottom: 1px solid $--border-color-light;
+    }
+    > .el-tabs__header .el-tabs__nav-wrap::after {
+      content: none;
+    }
+    > .el-tabs__header .el-tabs__nav {
+      border: 1px solid $--border-color-light;
+      border-bottom: none;
+      border-radius: 4px 4px 0 0;
+      box-sizing: border-box;
+    }
+    > .el-tabs__header .el-tabs__active-bar {
+      display: none;
+    }
+    > .el-tabs__header .el-tabs__item .el-icon-close {
+      position: relative;
+      font-size: 12px;
+      width: 0;
+      height: 14px;
+      vertical-align: middle;
+      line-height: 15px;
+      overflow: hidden;
+      top: -1px;
+      right: -2px;
+      transform-origin: 100% 50%;
+    }
+    > .el-tabs__header .el-tabs__item {
+      border-bottom: 1px solid transparent;
+      border-left: 1px solid $--border-color-light;
+      transition: color .3s cubic-bezier(.645,.045,.355,1), padding .3s cubic-bezier(.645,.045,.355,1);
+      &:first-child {
+        border-left: none;
+      }
+      &.is-closable {
+        &:hover {
+          padding-left: 13px;
+          padding-right: 13px;
+
+          & .el-icon-close {
+            width: 14px;
+          }
+        }
+      }
+      &.is-active {
+        border-bottom-color: $--color-white;
+
+        &.is-closable {
+          padding-left: 20px;
+          padding-right: 20px;
+
+          .el-icon-close {
+            width: 14px;
+          }
+        }
+      }
+    }
+  }
+  @include m(border-card) {
+    background: $--color-white;
+    border: 1px solid $--border-color-base;
+    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04);
+
+    >.el-tabs__content {
+      padding: 15px;
+    }
+    >.el-tabs__header {
+      background-color: $--background-color-base;
+      border-bottom: 1px solid $--border-color-light;
+      margin: 0;
+    }
+    > .el-tabs__header .el-tabs__nav-wrap::after {
+      content: none;
+    }
+    >.el-tabs__header .el-tabs__item {
+      transition: all .3s cubic-bezier(.645,.045,.355,1);
+      border: 1px solid transparent;
+      margin: -1px -1px 0;
+      color: $--color-text-secondary;
+
+      &.is-active {
+        color: $--color-primary;
+        background-color: $--color-white;
+        border-right-color: $--border-color-base;
+        border-left-color: $--border-color-base;
+      }
+      &:not(.is-disabled):hover {
+        color: $--color-primary;
+      }
+      &.is-disabled {
+        color: $--disabled-color-base;
+      }
+    }
+  }
+  @include m((top, bottom)) {
+    .el-tabs__item.is-top:nth-child(2),
+    .el-tabs__item.is-bottom:nth-child(2) {
+      padding-left: 0;
+    }
+    .el-tabs__item.is-top:last-child,
+    .el-tabs__item.is-bottom:last-child {
+      padding-right: 0;
+    }
+
+    &.el-tabs--border-card, &.el-tabs--card,
+    .el-tabs--left, .el-tabs--right {
+      .el-tabs__item:nth-child(2) {
+        padding-left: 20px;
+      }
+      .el-tabs__item:last-child {
+        padding-right: 20px;
+      }
+    }
+  }
+  @include m(bottom) {
+    .el-tabs__header.is-bottom {
+      margin-bottom: 0;
+      margin-top: 10px;
+    }
+    &.el-tabs--border-card {
+      .el-tabs__header.is-bottom {
+        border-bottom: 0;
+        border-top: 1px solid $--border-color-base;
+      }
+      .el-tabs__nav-wrap.is-bottom {
+        margin-top: -1px;
+        margin-bottom: 0;
+      }
+      .el-tabs__item.is-bottom:not(.is-active) {
+        border: 1px solid transparent;
+      }
+      .el-tabs__item.is-bottom {
+        margin: 0 -1px -1px -1px;
+      }
+    }
+  }
+  @include m((left, right)) {
+    overflow: hidden;
+
+    .el-tabs__header.is-left,
+    .el-tabs__header.is-right,
+    .el-tabs__nav-wrap.is-left,
+    .el-tabs__nav-wrap.is-right,
+    .el-tabs__nav-scroll {
+      height: 100%;
+    }
+
+    .el-tabs__active-bar.is-left,
+    .el-tabs__active-bar.is-right {
+      top: 0;
+      bottom: auto;
+      width: 2px;
+      height: auto;
+    }
+
+    .el-tabs__nav-wrap.is-left,
+    .el-tabs__nav-wrap.is-right {
+      margin-bottom: 0;
+
+      > .el-tabs__nav-prev,
+      > .el-tabs__nav-next {
+        height: 30px;
+        line-height: 30px;
+        width: 100%;
+        text-align: center;
+        cursor: pointer;
+  
+        i {
+          transform: rotateZ(90deg);
+        }
+      }
+      > .el-tabs__nav-prev {
+        left: auto;
+        top: 0;
+      }
+      > .el-tabs__nav-next {
+        right: auto;
+        bottom: 0;
+      }
+
+      &.is-scrollable {
+        padding: 30px 0;
+      }
+
+      &::after {
+        height: 100%;
+        width: 2px;
+        bottom: auto;
+        top: 0;
+      }
+    }
+
+    .el-tabs__nav.is-left,
+    .el-tabs__nav.is-right {
+      float: none;
+    }
+    .el-tabs__item.is-left,
+    .el-tabs__item.is-right {
+      display: block;
+    }
+  }
+  @include m(left) {
+    .el-tabs__header.is-left {
+      float: left;
+      margin-bottom: 0;
+      margin-right: 10px;
+    }
+    .el-tabs__nav-wrap.is-left {
+      margin-right: -1px;
+      &::after {
+        left: auto;
+        right: 0;
+      }
+    }
+    .el-tabs__active-bar.is-left {
+      right: 0;
+      left: auto;
+    }
+    .el-tabs__item.is-left {
+      text-align: right;
+    }
+
+    &.el-tabs--card {
+      .el-tabs__active-bar.is-left {
+        display: none;
+      }
+      .el-tabs__item.is-left {
+        border-left: none;
+        border-right: 1px solid $--border-color-light;
+        border-bottom: none;
+        border-top: 1px solid $--border-color-light;
+      }
+      .el-tabs__item.is-left:first-child {
+        border-right: 1px solid $--border-color-light;
+        border-top: none;
+      }
+      .el-tabs__item.is-left.is-active {
+        border: 1px solid $--border-color-light;
+        border-right-color: #fff;
+        border-left: none;
+        border-bottom: none;
+
+        &:first-child {
+          border-top: none;
+        }
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+
+      .el-tabs__nav {
+        border-radius: 4px 0 0 4px;
+        border-bottom: 1px solid $--border-color-light;
+        border-right: none;
+      }
+
+      .el-tabs__new-tab {
+        float: none;
+      }
+    }
+
+    &.el-tabs--border-card {
+      .el-tabs__header.is-left {
+        border-right: 1px solid #dfe4ed;
+      }
+      .el-tabs__item.is-left {
+        border: 1px solid transparent;
+        margin: -1px 0 -1px -1px;
+
+        &.is-active {
+          border-color: transparent;
+          border-top-color: rgb(209, 219, 229);
+          border-bottom-color: rgb(209, 219, 229);
+        }
+      }
+    }
+  }
+  @include m(right) {
+    .el-tabs__header.is-right {
+      float: right;
+      margin-bottom: 0;
+      margin-left: 10px;
+    }
+
+    .el-tabs__nav-wrap.is-right {
+      margin-left: -1px;
+      &::after {
+        left: 0;
+        right: auto;
+      }
+    }
+
+    .el-tabs__active-bar.is-right {
+      left: 0;
+    }
+
+    &.el-tabs--card {
+      .el-tabs__active-bar.is-right {
+        display: none;
+      }
+      .el-tabs__item.is-right {
+        border-bottom: none;
+        border-top: 1px solid $--border-color-light;
+      }
+      .el-tabs__item.is-right:first-child {
+        border-left: 1px solid $--border-color-light;
+        border-top: none;
+      }
+      .el-tabs__item.is-right.is-active {
+        border: 1px solid $--border-color-light;
+        border-left-color: #fff;
+        border-right: none;
+        border-bottom: none;
+
+        &:first-child {
+          border-top: none;
+        }
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+
+      .el-tabs__nav {
+        border-radius: 0 4px 4px 0;
+        border-bottom: 1px solid $--border-color-light;
+        border-left: none;
+      }
+    }
+    &.el-tabs--border-card {
+      .el-tabs__header.is-right {
+        border-left: 1px solid #dfe4ed;
+      }
+      .el-tabs__item.is-right {
+        border: 1px solid transparent;
+        margin: -1px -1px -1px 0;
+
+        &.is-active {
+          border-color: transparent;
+          border-top-color: rgb(209, 219, 229);
+          border-bottom-color: rgb(209, 219, 229);
+        }
+      }
+    }
+  }
+}
+
+.slideInRight-transition,
+.slideInLeft-transition {
+  display: inline-block;
+}
+.slideInRight-enter {
+  animation: slideInRight-enter .3s;
+}
+.slideInRight-leave {
+  position: absolute;
+  left: 0;
+  right: 0;
+  animation: slideInRight-leave .3s;
+}
+.slideInLeft-enter {
+  animation: slideInLeft-enter .3s;
+}
+.slideInLeft-leave {
+  position: absolute;
+  left: 0;
+  right: 0;
+  animation: slideInLeft-leave .3s;
+}
+
+@keyframes slideInRight-enter {
+  0% {
+    opacity: 0;
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    -webkit-transform: translateX(100%);
+    transform: translateX(100%)
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    -webkit-transform: translateX(0);
+    transform: translateX(0)
+  }
+}
+@keyframes slideInRight-leave {
+  0% {
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+    opacity: 1
+  }
+
+  100% {
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    -webkit-transform: translateX(100%);
+    transform: translateX(100%);
+    opacity: 0
+  }
+}
+@keyframes slideInLeft-enter {
+  0% {
+    opacity: 0;
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    -webkit-transform: translateX(-100%);
+    transform: translateX(-100%)
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    -webkit-transform: translateX(0);
+    transform: translateX(0)
+  }
+}
+@keyframes slideInLeft-leave {
+  0% {
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+    opacity: 1
+  }
+
+  100% {
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    -webkit-transform: translateX(-100%);
+    transform: translateX(-100%);
+    opacity: 0
+  }
+}
diff --git a/packages/theme-chalk/src/tag.scss b/packages/theme-chalk/src/tag.scss
new file mode 100644
index 0000000000..6c949d7164
--- /dev/null
+++ b/packages/theme-chalk/src/tag.scss
@@ -0,0 +1,146 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(tag) {
+  background-color: $--tag-fill;
+  display: inline-block;
+  padding: $--tag-padding;
+  height: 32px;
+  line-height: 30px;
+  font-size: $--tag-font-size;
+  color: $--tag-color;
+  border-radius: $--tag-border-radius;
+  box-sizing: border-box;
+  border: 1px solid $--tag-border;
+  white-space: nowrap;
+
+  .el-icon-close {
+    border-radius: 50%;
+    text-align: center;
+    position: relative;
+    cursor: pointer;
+    font-size: 12px;
+    height: 16px;
+    width: 16px;
+    line-height: 16px;
+    vertical-align: middle;
+    top: -1px;
+    right: -5px;
+    color: $--tag-color;
+
+    &::before {
+      display: block;
+    }
+
+    &:hover {
+      background-color: $--tag-color;
+      color: $--color-white;
+    }
+  }
+
+  @include m(info) {
+    background-color: $--tag-info-fill;
+    border-color: $--tag-info-border;
+    color: $--tag-info-color;
+
+    @include when(hit) {
+      border-color: $--tag-info-color;
+    }
+
+    .el-tag__close {
+      color: $--tag-info-color;
+    }
+
+    .el-tag__close:hover {
+      background-color: $--tag-info-color;
+      color: $--color-white;
+    }
+  }
+
+  @include m(success) {
+    background-color: $--tag-success-fill;
+    border-color: $--tag-success-border;
+    color: $--tag-success-color;
+
+    @include when(hit) {
+      border-color: $--tag-success-color;
+    }
+
+    .el-tag__close {
+      color: $--tag-success-color;
+    }
+
+    .el-tag__close:hover {
+      background-color: $--tag-success-color;
+      color: $--color-white;
+    }
+  }
+
+  @include m(warning) {
+    background-color: $--tag-warning-fill;
+    border-color: $--tag-warning-border;
+    color: $--tag-warning-color;
+
+    @include when(hit) {
+      border-color: $--tag-warning-color;
+    }
+
+    .el-tag__close {
+      color: $--tag-warning-color;
+    }
+
+    .el-tag__close:hover {
+      background-color: $--tag-warning-color;
+      color: $--color-white;
+    }
+  }
+
+  @include m(danger) {
+    background-color: $--tag-danger-fill;
+    border-color: $--tag-danger-border;
+    color: $--tag-danger-color;
+
+    @include when(hit) {
+      border-color: $--tag-danger-color;
+    }
+
+    .el-tag__close {
+      color: $--tag-danger-color;
+    }
+
+    .el-tag__close:hover {
+      background-color: $--tag-danger-color;
+      color: $--color-white;
+    }
+  }
+
+  @include m(medium) {
+    height: 28px;
+    line-height: 26px;
+
+    .el-icon-close {
+      transform: scale(.8);
+    }
+  }
+
+  @include m(small) {
+    height: 24px;
+    padding: 0 8px;
+    line-height: 22px;
+
+    .el-icon-close {
+      transform: scale(.8);
+    }
+  }
+
+  @include m(mini) {
+    height: 20px;
+    padding: 0 5px;
+    line-height: 19px;
+
+    .el-icon-close {
+      margin-left: -3px;
+      transform: scale(.7);
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/time-picker.scss b/packages/theme-chalk/src/time-picker.scss
new file mode 100644
index 0000000000..10aaf54f6f
--- /dev/null
+++ b/packages/theme-chalk/src/time-picker.scss
@@ -0,0 +1,8 @@
+@import "./date-picker/picker.scss";
+@import "./date-picker/picker-panel.scss";
+@import "./date-picker/time-spinner.scss";
+@import "./date-picker/time-picker.scss";
+@import "./date-picker/time-range-picker.scss";
+@import "./input.scss";
+@import "./scrollbar.scss";
+@import "./popper";
diff --git a/packages/theme-chalk/src/time-select.scss b/packages/theme-chalk/src/time-select.scss
new file mode 100644
index 0000000000..0de3853873
--- /dev/null
+++ b/packages/theme-chalk/src/time-select.scss
@@ -0,0 +1,37 @@
+@import "common/var";
+@import "./date-picker/picker.scss";
+@import "./date-picker/date-picker.scss";
+@import "./scrollbar.scss";
+@import "./popper";
+
+.time-select {
+  margin: 5px 0;
+  min-width: 0;
+}
+
+.time-select .el-picker-panel__content {
+  max-height: 200px;
+  margin: 0;
+}
+
+.time-select-item {
+  padding: 8px 10px;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.time-select-item.selected:not(.disabled) {
+  color: $--color-primary;
+  font-weight: bold;
+}
+
+.time-select-item.disabled {
+  color: $--datepicker-border-color;
+  cursor: not-allowed;
+}
+
+.time-select-item:hover {
+  background-color: $--background-color-base;
+  font-weight: bold;
+  cursor: pointer;
+}
diff --git a/packages/theme-chalk/src/tooltip.scss b/packages/theme-chalk/src/tooltip.scss
new file mode 100644
index 0000000000..49ec56d60e
--- /dev/null
+++ b/packages/theme-chalk/src/tooltip.scss
@@ -0,0 +1,140 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(tooltip) {
+  &:focus:not(.focusing), &:focus:hover {
+    outline-width: 0;
+  }
+  @include e(popper) {
+    position: absolute;
+    border-radius: 4px;
+    padding: $--tooltip-padding;
+    z-index: $--index-popper;
+    font-size: $--tooltip-font-size;
+    line-height: 1.2;
+    min-width: 10px;
+
+    .popper__arrow,
+    .popper__arrow::after {
+      position: absolute;
+      display: block;
+      width: 0;
+      height: 0;
+      border-color: transparent;
+      border-style: solid;
+    }
+
+    .popper__arrow {
+      border-width: $--tooltip-arrow-size;
+    }
+
+    .popper__arrow::after {
+      content: " ";
+      border-width: 5px;
+    }
+
+    &[x-placement^="top"] {
+      margin-bottom: #{$--tooltip-arrow-size + 6px};
+    }
+
+    &[x-placement^="top"] .popper__arrow {
+      bottom: -$--tooltip-arrow-size;
+      border-top-color: $--tooltip-border-color;
+      border-bottom-width: 0;
+
+      &::after {
+        bottom: 1px;
+        margin-left: -5px;
+        border-top-color: $--tooltip-fill;
+        border-bottom-width: 0;
+      }
+    }
+
+    &[x-placement^="bottom"] {
+      margin-top: #{$--tooltip-arrow-size + 6px};
+    }
+
+    &[x-placement^="bottom"] .popper__arrow {
+      top: -$--tooltip-arrow-size;
+      border-top-width: 0;
+      border-bottom-color: $--tooltip-border-color;
+
+      &::after {
+        top: 1px;
+        margin-left: -5px;
+        border-top-width: 0;
+        border-bottom-color: $--tooltip-fill;
+      }
+    }
+
+    &[x-placement^="right"] {
+      margin-left: #{$--tooltip-arrow-size + 6px};
+    }
+
+    &[x-placement^="right"] .popper__arrow {
+      left: -$--tooltip-arrow-size;
+      border-right-color: $--tooltip-border-color;
+      border-left-width: 0;
+
+      &::after {
+        bottom: -5px;
+        left: 1px;
+        border-right-color: $--tooltip-fill;
+        border-left-width: 0;
+      }
+    }
+
+    &[x-placement^="left"] {
+      margin-right: #{$--tooltip-arrow-size + 6px};
+    }
+
+    &[x-placement^="left"] .popper__arrow {
+      right: -$--tooltip-arrow-size;
+      border-right-width: 0;
+      border-left-color: $--tooltip-border-color;
+
+      &::after {
+        right: 1px;
+        bottom: -5px;
+        margin-left: -5px;
+        border-right-width: 0;
+        border-left-color: $--tooltip-fill;
+      }
+    }
+
+    @include when(dark) {
+      background: $--tooltip-fill;
+      color: $--tooltip-color;
+    }
+
+    @include when(light) {
+      background: $--tooltip-color;
+      border: 1px solid $--tooltip-fill;
+
+      &[x-placement^="top"] .popper__arrow {
+        border-top-color: $--tooltip-fill;
+        &::after {
+          border-top-color: $--tooltip-color;
+        }
+      }
+      &[x-placement^="bottom"] .popper__arrow {
+        border-bottom-color: $--tooltip-fill;
+        &::after {
+          border-bottom-color: $--tooltip-color;
+        }
+      }
+      &[x-placement^="left"] .popper__arrow {
+        border-left-color: $--tooltip-fill;
+        &::after {
+          border-left-color: $--tooltip-color;
+        }
+      }
+      &[x-placement^="right"] .popper__arrow {
+        border-right-color: $--tooltip-fill;
+        &::after {
+          border-right-color: $--tooltip-color;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/transfer.scss b/packages/theme-chalk/src/transfer.scss
new file mode 100644
index 0000000000..e231fd0546
--- /dev/null
+++ b/packages/theme-chalk/src/transfer.scss
@@ -0,0 +1,227 @@
+@import "mixins/mixins";
+@import "mixins/utils";
+@import "common/var";
+@import "input";
+@import "button";
+@import "checkbox";
+@import "checkbox-group";
+
+@include b(transfer) {
+  font-size: $--font-size-base;
+
+  @include e(buttons) {
+    display: inline-block;
+    vertical-align: middle;
+    padding: 0 30px;
+  }
+
+  @include e(button) {
+    display: block;
+    margin: 0 auto;
+    padding: 10px;
+    border-radius: 50%;
+    color: $--color-white;
+    background-color: $--color-primary;
+    font-size: 0;
+
+    @include when(with-texts) {
+      border-radius: $--border-radius-base;
+    }
+
+    @include when(disabled) {
+      border: $--border-base;
+      background-color: $--background-color-base;
+      color: $--color-text-placeholder;
+
+      &:hover {
+        border: $--border-base;
+        background-color: $--background-color-base;
+        color: $--color-text-placeholder;
+      }
+    }
+
+    &:first-child {
+      margin-bottom: 10px;
+    }
+
+    &:nth-child(2) {
+      margin: 0;
+    }
+
+    i, span {
+      font-size: 14px;
+    }
+
+    & [class*="el-icon-"] + span {
+      margin-left: 0;
+    }
+  }
+}
+
+@include b(transfer-panel) {
+  border: 1px solid $--transfer-border-color;
+  border-radius: $--transfer-border-radius;
+  overflow: hidden;
+  background: $--color-white;
+  display: inline-block;
+  vertical-align: middle;
+  width: $--transfer-panel-width;
+  max-height: 100%;
+  box-sizing: border-box;
+  position: relative;
+
+  @include e(body) {
+    height: $--transfer-panel-body-height;
+
+    @include when(with-footer) {
+      padding-bottom: $--transfer-panel-footer-height;
+    }
+  }
+
+  @include e(list) {
+    margin: 0;
+    padding: 6px 0;
+    list-style: none;
+    height: $--transfer-panel-body-height;
+    overflow: auto;
+    box-sizing: border-box;
+
+    @include when(filterable) {
+      height: #{$--transfer-panel-body-height - $--transfer-filter-height - 20px};
+      padding-top: 0;
+    }
+  }
+
+  @include e(item) {
+    height: $--transfer-item-height;
+    line-height: $--transfer-item-height;
+    padding-left: 15px;
+    display: block;
+
+    & + .el-transfer-panel__item {
+      margin-left: 0;
+    }
+
+    &.el-checkbox {
+      color: $--color-text-regular;
+    }
+
+    &:hover {
+      color: $--color-primary;
+    }
+
+    &.el-checkbox .el-checkbox__label {
+      width: 100%;
+      @include utils-ellipsis;
+      display: block;
+      box-sizing: border-box;
+      padding-left: 24px;
+      line-height: $--transfer-item-height;
+    }
+
+    .el-checkbox__input {
+      position: absolute;
+      top: 8px;
+    }
+  }
+
+  @include e(filter) {
+    text-align: center;
+    margin: 15px;
+    box-sizing: border-box;
+    display: block;
+    width: auto;
+
+    .el-input__inner {
+      height: $--transfer-filter-height;
+      width: 100%;
+      font-size: 12px;
+      display: inline-block;
+      box-sizing: border-box;
+      border-radius: #{$--transfer-filter-height / 2};
+      padding-right: 10px;
+      padding-left: 30px;
+    }
+
+    .el-input__icon {
+      margin-left: 5px;
+    }
+
+    .el-icon-circle-close {
+      cursor: pointer;
+    }
+  }
+
+  .el-transfer-panel__header {
+    height: $--transfer-panel-header-height;
+    line-height: $--transfer-panel-header-height;
+    background: $--transfer-panel-header-background;
+    margin: 0;
+    padding-left: 15px;
+    border-bottom: 1px solid $--transfer-border-color;
+    box-sizing: border-box;
+    color: $--color-black;
+
+    .el-checkbox {
+      display: block;
+      line-height: 40px;
+
+      .el-checkbox__label {
+        font-size: 16px;
+        color: $--color-text-primary;
+        font-weight: normal;
+
+        span {
+          position: absolute;
+          right: 15px;
+          color: $--color-text-secondary;
+          font-size: 12px;
+          font-weight: normal;
+        }
+      }
+    }
+  }
+
+  .el-transfer-panel__footer {
+    height: $--transfer-panel-footer-height;
+    background: $--color-white;
+    margin: 0;
+    padding: 0;
+    border-top: 1px solid $--transfer-border-color;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    z-index: $--index-normal;
+    @include utils-vertical-center;
+
+    .el-checkbox {
+      padding-left: 20px;
+      color: $--color-text-regular;
+    }
+  }
+
+  .el-transfer-panel__empty {
+    margin: 0;
+    height: $--transfer-item-height;
+    line-height: $--transfer-item-height;
+    padding: 6px 15px 0;
+    color: $--color-text-secondary;
+    text-align: center;
+  }
+
+  .el-checkbox__label {
+    padding-left: 8px;
+  }
+
+  .el-checkbox__inner {
+    height: 14px;
+    width: 14px;
+    border-radius: 3px;
+    &::after {
+      height: 6px;
+      width: 3px;
+      left: 4px;
+    }
+  }
+}
diff --git a/packages/theme-chalk/src/tree.scss b/packages/theme-chalk/src/tree.scss
new file mode 100644
index 0000000000..3d4e4775ba
--- /dev/null
+++ b/packages/theme-chalk/src/tree.scss
@@ -0,0 +1,122 @@
+@import "mixins/mixins";
+@import "common/var";
+@import "common/transition";
+@import "checkbox";
+
+@include b(tree) {
+  position: relative;
+  cursor: default;
+  background: $--color-white;
+  color: $--tree-text-color;
+
+  @include e(empty-block) {
+    position: relative;
+    min-height: 60px;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  @include e(empty-text) {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    color: mix($--color-primary, rgb(158, 68, 0), 50%);
+  }
+
+  @include e(drop-indicator) {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background-color: $--color-primary;
+  }
+}
+
+@include b(tree-node) {
+  white-space: nowrap;
+  outline: none;
+  &:focus { /* focus */
+    > .el-tree-node__content {
+      background-color: $--tree-node-hover-color;
+    }
+  }
+
+  @include when(drop-inner) {
+    > .el-tree-node__content .el-tree-node__label {
+      background-color: $--color-primary;
+      color: #fff;
+    }
+  }
+
+  @include e(content) {
+    display: flex;
+    align-items: center;
+    height: 26px;
+    cursor: pointer;
+
+    & > .el-tree-node__expand-icon {
+      padding: 6px;
+    }
+    & > .el-checkbox {
+      margin-right: 8px;
+    }
+    &:hover {
+      background-color: $--tree-node-hover-color;
+    }
+
+    .el-tree.is-dragging & {
+      cursor: move;
+
+      & * {
+        pointer-events: none;
+      }
+    }
+
+    .el-tree.is-dragging.is-drop-not-allow & {
+      cursor: not-allowed;
+    }
+  }
+
+  @include e(expand-icon) {
+    cursor: pointer;
+    color: $--tree-expand-icon-color;
+    font-size: 12px;
+
+    transform: rotate(0deg);
+    transition: transform 0.3s ease-in-out;
+
+    &.expanded {
+      transform: rotate(90deg);
+    }
+
+    &.is-leaf {
+      color: transparent;
+      cursor: default;
+    }
+  }
+
+  @include e(label) {
+    font-size: $--font-size-base;
+  }
+
+  @include e(loading-icon) {
+    margin-right: 8px;
+    font-size: $--font-size-base;
+    color: $--tree-expand-icon-color;
+  }
+
+  & > .el-tree-node__children {
+    overflow: hidden;
+    background-color: transparent;
+  }
+
+  &.is-expanded > .el-tree-node__children {
+    display: block;
+  }
+}
+
+.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+  background-color: mix($--color-white, $--color-primary, 92%);
+}
diff --git a/packages/theme-chalk/src/upload.scss b/packages/theme-chalk/src/upload.scss
new file mode 100644
index 0000000000..1ca2b37e2c
--- /dev/null
+++ b/packages/theme-chalk/src/upload.scss
@@ -0,0 +1,602 @@
+@import "mixins/mixins";
+@import "progress";
+@import "common/var";
+
+@include b(upload) {
+  display: inline-block;
+  text-align: center;
+  cursor: pointer;
+  outline: none;
+  @include e(input) {
+    display: none;
+  }
+
+  @include e(tip) {
+    font-size: 12px;
+    color: $--color-text-regular;
+    margin-top: 7px;
+  }
+
+  iframe {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    filter: alpha(opacity=0);
+  }
+
+  /* 照片墙模式 */
+  @include m(picture-card) {
+    background-color: #fbfdff;
+    border: 1px dashed #c0ccda;
+    border-radius: 6px;
+    box-sizing: border-box;
+    width: 148px;
+    height: 148px;
+    cursor: pointer;
+    line-height: 146px;
+    vertical-align: top;
+
+    i {
+      font-size: 28px;
+      color: #8c939d;
+    }
+
+    &:hover {
+      border-color: $--color-primary;
+      color: $--color-primary;
+    }
+  }
+  &:focus {
+    border-color: $--color-primary;
+    color: $--color-primary;
+
+    .el-upload-dragger {
+      border-color: $--color-primary;
+    }
+  }
+}
+
+@include b(upload-dragger) {
+  background-color: #fff;
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  box-sizing: border-box;
+  width: 360px;
+  height: 180px;
+  text-align: center;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+
+  .el-icon-upload {
+    font-size: 67px;
+    color: $--color-text-placeholder;
+    margin: 40px 0 16px;
+    line-height: 50px;
+  }
+
+  + .el-upload__tip {
+    text-align: center;
+  }
+
+  ~ .el-upload__files {
+    border-top: $--border-base;
+    margin-top: 7px;
+    padding-top: 5px;
+  }
+
+  .el-upload__text {
+    color: $--color-text-regular;
+    font-size: 14px;
+    text-align: center;
+
+    em {
+      color: $--color-primary;
+      font-style: normal;
+    }
+  }
+
+  &:hover {
+    border-color: $--color-primary;
+  }
+
+  @include when(dragover) {
+    background-color: rgba(32, 159, 255, .06);
+    border: 2px dashed $--color-primary;
+  }
+}
+
+@include b(upload-list) {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  @include e(item) {
+    transition: all .5s cubic-bezier(.55,0,.1,1);
+    font-size: 14px;
+    color: $--color-text-regular;
+    line-height: 1.8;
+    margin-top: 5px;
+    position: relative;
+    box-sizing: border-box;
+    border-radius: 4px;
+    width: 100%;
+
+    .el-progress {
+      position: absolute;
+      top: 20px;
+      width: 100%;
+    }
+
+    .el-progress__text {
+      position: absolute;
+      right: 0;
+      top: -13px;
+    }
+
+    .el-progress-bar {
+      margin-right: 0;
+      padding-right: 0;
+    }
+
+    &:first-child {
+      margin-top: 10px;
+    }
+
+    & .el-icon-upload-success {
+      color: $--color-success;
+    }
+
+    .el-icon-close {
+      display: none;
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      cursor: pointer;
+      opacity: .75;
+      color: $--color-text-regular;
+      //transform: scale(.7);
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+
+    & .el-icon-close-tip {
+      display: none;
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      font-size: 12px;
+      cursor: pointer;
+      opacity: 1;
+      color: $--color-primary;
+    }
+    
+    &:hover {
+      background-color: $--background-color-base;
+
+      .el-icon-close {
+        display: inline-block;
+      }
+
+      .el-progress__text {
+        display: none;
+      }
+    }
+
+    @include when(success) {
+      .el-upload-list__item-status-label {
+        display: block;
+      }
+
+      .el-upload-list__item-name:hover, .el-upload-list__item-name:focus {
+        color: $--link-hover-color;
+        cursor: pointer;
+      }
+
+      &:focus:not(:hover) {  /* 键盘focus */
+        .el-icon-close-tip {
+          display: inline-block;
+        }
+      }
+
+      &:not(.focusing):focus, &:active { /* click时 */
+        outline-width: 0;
+        .el-icon-close-tip {
+          display: none;
+        }
+      }
+
+      &:hover, &:focus {
+        .el-upload-list__item-status-label {
+          display: none;
+        }
+      }
+    }
+  }
+
+  @include when(disabled) {
+    .el-upload-list__item:hover .el-upload-list__item-status-label {
+      display: block;
+    }
+  }
+
+  @include e(item-name) {
+    color: $--color-text-regular;
+    display: block;
+    margin-right: 40px;
+    overflow: hidden;
+    padding-left: 4px;
+    text-overflow: ellipsis;
+    transition: color .3s;
+    white-space: nowrap;
+
+    [class^="el-icon"] {
+      height: 100%;
+      margin-right: 7px;
+      color: $--color-text-secondary;
+      line-height: inherit;
+    }
+  }
+
+  @include e(item-status-label) {
+    position: absolute;
+    right: 5px;
+    top: 0;
+    line-height: inherit;
+    display: none;
+  }
+
+  @include e(item-delete) {
+    position: absolute;
+    right: 10px;
+    top: 0;
+    font-size: 12px;
+    color: $--color-text-regular;
+    display: none;
+
+    &:hover {
+      color: $--color-primary;
+    }
+  }
+
+  @include m(picture-card) {
+    margin: 0;
+    display: inline;
+    vertical-align: top;
+
+    .el-upload-list__item {
+      overflow: hidden;
+      background-color: #fff;
+      border: 1px solid #c0ccda;
+      border-radius: 6px;
+      box-sizing: border-box;
+      width: 148px;
+      height: 148px;
+      margin: 0 8px 8px 0;
+      display: inline-block;
+
+      .el-icon-check,
+      .el-icon-circle-check {
+        color: $--color-white;
+      }
+
+      .el-icon-close {
+        display: none;
+      }
+      &:hover {
+        .el-upload-list__item-status-label {
+          display: none;
+        }
+
+        .el-progress__text {
+          display: block;
+        }
+      }
+    }
+
+    .el-upload-list__item-name {
+      display: none;
+    }
+
+    .el-upload-list__item-thumbnail {
+      width: 100%;
+      height: 100%;
+    }
+
+    .el-upload-list__item-status-label {
+      position: absolute;
+      right: -15px;
+      top: -6px;
+      width: 40px;
+      height: 24px;
+      background: #13ce66;
+      text-align: center;
+      transform: rotate(45deg);
+      box-shadow: 0 0 1pc 1px rgba(0,0,0,0.2);
+
+      i {
+        font-size: 12px;
+        margin-top: 11px;
+        transform: rotate(-45deg);
+      }
+    }
+
+    .el-upload-list__item-actions {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      cursor: default;
+      text-align: center;
+      color: #fff;
+      opacity: 0;
+      font-size: 20px;
+      background-color: rgba(0, 0, 0, .5);
+      transition: opacity .3s;
+      &::after {
+        display: inline-block;
+        content: "";
+        height: 100%;
+        vertical-align: middle
+      }
+
+      span {
+        display: none;
+        cursor: pointer;
+      }
+
+      span + span {
+        margin-left: 15px;
+      }
+
+      .el-upload-list__item-delete {
+        position: static;
+        font-size: inherit;
+        color: inherit;
+      }
+
+      &:hover {
+        opacity: 1;
+        span {
+          display: inline-block;
+        }
+      }
+    }
+
+    .el-progress {
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      bottom: auto;
+      width: 126px;
+
+      .el-progress__text {
+        top: 50%;
+      }
+    }
+  }
+
+  @include m(picture) {
+    .el-upload-list__item {
+      overflow: hidden;
+      z-index: 0;
+      background-color: #fff;
+      border: 1px solid #c0ccda;
+      border-radius: 6px;
+      box-sizing: border-box;
+      margin-top: 10px;
+      padding: 10px 10px 10px 90px;
+      height: 92px;
+
+      .el-icon-check,
+      .el-icon-circle-check {
+        color: $--color-white;
+      }
+
+      &:hover {
+        .el-upload-list__item-status-label {
+          background: transparent;
+          box-shadow: none;
+          top: -2px;
+          right: -12px;
+        }
+
+        .el-progress__text {
+          display: block;
+        }
+      }
+
+      &.is-success {
+        .el-upload-list__item-name {
+          line-height: 70px;
+          margin-top: 0;
+          i {
+            display: none;
+          }
+        }
+      }
+    }
+
+    .el-upload-list__item-thumbnail {
+      vertical-align: middle;
+      display: inline-block;
+      width: 70px;
+      height: 70px;
+      float: left;
+      position: relative;
+      z-index: 1;
+      margin-left: -80px;
+    }
+
+    .el-upload-list__item-name {
+      display: block;
+      margin-top: 20px;
+
+      i {
+        font-size: 70px;
+        line-height: 1;
+        position: absolute;
+        left: 9px;
+        top: 10px;
+      }
+    }
+
+    .el-upload-list__item-status-label {
+      position: absolute;
+      right: -17px;
+      top: -7px;
+      width: 46px;
+      height: 26px;
+      background: #13ce66;
+      text-align: center;
+      transform: rotate(45deg);
+      box-shadow: 0 1px 1px #ccc;
+
+      i {
+        font-size: 12px;
+        margin-top: 12px;
+        transform: rotate(-45deg);
+      }
+    }
+
+    .el-progress {
+      position: relative;
+      top: -7px;
+    }
+  }
+}
+
+@include b(upload-cover) {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: 10;
+  cursor: default;
+  @include utils-vertical-center;
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  @include e(label) {
+    position: absolute;
+    right: -15px;
+    top: -6px;
+    width: 40px;
+    height: 24px;
+    background: #13ce66;
+    text-align: center;
+    transform: rotate(45deg);
+    box-shadow: 0 0 1pc 1px rgba(0,0,0,0.2);
+
+    i {
+      font-size: 12px;
+      margin-top: 11px;
+      transform: rotate(-45deg);
+      color: #fff;
+    }
+  }
+
+  @include e(progress) {
+    display: inline-block;
+    vertical-align: middle;
+    position: static;
+    width: 243px;
+
+    + .el-upload__inner {
+      opacity: 0;
+    }
+  }
+
+  @include e(content) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  @include e(interact) {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(#000, .72);
+    text-align: center;
+
+    .btn {
+      display: inline-block;
+      color: $--color-white;
+      font-size: 14px;
+      cursor: pointer;
+      vertical-align: middle;
+      transition: $--md-fade-transition;
+      margin-top: 60px;
+
+      i {
+        margin-top: 0;
+      }
+
+      span {
+        opacity: 0;
+        transition: opacity .15s linear;
+      }
+
+      &:not(:first-child) {
+        margin-left: 35px;
+      }
+
+      &:hover {
+        transform: translateY(-13px);
+
+        span {
+          opacity: 1;
+        }
+      }
+
+      i {
+        color: $--color-white;
+        display: block;
+        font-size: 24px;
+        line-height: inherit;
+        margin: 0 auto 5px;
+      }
+    }
+  }
+
+  @include e(title) {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background-color: $--color-white;
+    height: 36px;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: normal;
+    text-align: left;
+    padding: 0 10px;
+    margin: 0;
+    line-height: 36px;
+    font-size: 14px;
+    color: $--color-text-primary;
+  }
+
+  + .el-upload__inner {
+    opacity: 0;
+    position: relative;
+    z-index: 1;
+  }
+}
diff --git a/packages/theme-default/README.md b/packages/theme-default/README.md
deleted file mode 100644
index a947e128c9..0000000000
--- a/packages/theme-default/README.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# element-theme-default
-> element component defualt theme.
-
-
-## Installation
-```shell
-npm i element-theme-default -S
-```
-
-## Usage
-
-Use Sass Or postcss-import
-```css
-@import 'element-theme-default';
-```
-
-Or Use webpack
-```javascript
-import 'element-theme-default';
-```
-
-Or
-```html
-<link rel="stylesheet" href="path/to/node_modules/element-theme-default/lib/index.css">
-```
-
-##  Import your need
-```javascript
-import 'element-theme-default/lib/input.css';
-import 'element-theme-default/lib/select.css';
-
-// ...
-```
diff --git a/packages/theme-default/package.json b/packages/theme-default/package.json
deleted file mode 100644
index 8219f8fdd6..0000000000
--- a/packages/theme-default/package.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-  "name": "element-theme-default",
-  "version": "1.4.1",
-  "description": "Element component default theme.",
-  "main": "lib/index.css",
-  "style": "lib/index.css",
-  "files": [
-    "lib",
-    "src"
-  ],
-  "scripts": {
-    "build": "gulp build"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/ElementUI/theme-default.git"
-  },
-  "keywords": [
-    "element",
-    "theme"
-  ],
-  "author": "haiping.zeng <qingwei.li@ele.me>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/ElementUI/theme-default/issues"
-  },
-  "homepage": "https://github.com/ElementUI/theme-default#readme",
-  "devDependencies": {
-    "gulp": "^3.9.1",
-    "gulp-cssmin": "^0.1.7",
-    "gulp-postcss": "^6.1.1",
-    "postcss-salad": "^1.0.5"
-  },
-  "dependencies": {}
-}
diff --git a/packages/theme-default/src/alert.css b/packages/theme-default/src/alert.css
deleted file mode 100644
index 05e2b1f5dd..0000000000
--- a/packages/theme-default/src/alert.css
+++ /dev/null
@@ -1,86 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-
-  @b alert {
-    width: 100%;
-    padding: var(--alert-padding);
-    margin: 0;
-    box-sizing: border-box;
-    border-radius: var(--alert-border-radius);
-    position: relative;
-    background-color: var(--color-white);
-    overflow: hidden;
-    color: var(--color-white);
-    opacity: 1;
-    display: table;
-    transition: opacity .2s;
-
-    @modifier success {
-      background-color: var(--alert-success-color);
-    }
-
-    @modifier info {
-      background-color: var(--alert-info-color);
-    }
-
-    @modifier warning {
-      background-color: var(--alert-warning-color);
-    }
-
-    @modifier error {
-      background-color: var(--alert-danger-color);
-    }
-
-    @e content {
-      display: table-cell;
-      padding: 0 8px;
-    }
-
-    @e icon {
-      font-size: var(--alert-icon-size);
-      width: var(--alert-icon-size);
-      display: table-cell;
-      color: var(--color-white);
-      vertical-align: middle;
-      @when big {
-        font-size: var(--alert-icon-large-size);
-        width: var(--alert-icon-large-size);
-      }
-    }
-
-    @e title {
-      font-size: var(--alert-title-font-size);
-      line-height: 18px;
-      @when bold {
-        font-weight: bold;
-      }
-    }
-
-    & .el-alert__description {
-      color: var(--color-white);
-      font-size: var(--alert-description-font-size);
-      margin: 5px 0 0 0;
-    }
-
-    @e closebtn {
-      font-size: var(--alert-close-font-size);
-      color: var(--color-white);
-      opacity: 1;
-      position: absolute 12px 15px * *;
-      cursor: pointer;
-
-      @when customed {
-        font-style: normal;
-        font-size: var(--alert-close-customed-font-size);
-        top: 9px;
-      }
-    }
-  }
-
-  .el-alert-fade-enter,
-  .el-alert-fade-leave-active {
-    opacity: 0;
-  }
-}
diff --git a/packages/theme-default/src/autocomplete.css b/packages/theme-default/src/autocomplete.css
deleted file mode 100644
index 98bd715141..0000000000
--- a/packages/theme-default/src/autocomplete.css
+++ /dev/null
@@ -1,80 +0,0 @@
-@charset "UTF-8";
-@import "./input.css";
-@import "./common/var.css";
-@import "./scrollbar.css";
-
-@component-namespace el {
-  @b autocomplete {
-    position: relative;
-    display: inline-block;
-  }
-  @b autocomplete-suggestion {
-    margin: 5px 0;
-    box-shadow: 0 0 6px 0 rgba(0,0,0,0.04), 0 2px 4px 0 rgba(0,0,0,0.12);
-
-    @e wrap {
-      max-height: 280px;
-      overflow: auto;
-      background-color: var(--color-white);
-      border: 1px solid var(--color-base-gray);
-      padding: 6px 0;
-      border-radius: 2px;
-      box-sizing: border-box;
-    }
-
-    @e list {
-      margin: 0;
-      padding: 0;
-    }
-
-    & li {
-      list-style: none;
-      line-height: 36px;
-      padding: 0 10px;
-      margin: 0;
-      cursor: pointer;
-      color: var(--color-extra-light-black);
-      font-size: 14px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      &:hover {
-        background-color: var(--select-option-hover-background);
-      }
-      &.highlighted {
-        background-color: var(--color-primary);
-        color: var(--color-white);
-      }
-      &:active {
-        background-color: darken(var(--color-primary), 0.2);
-      }
-      &.divider {
-        margin-top: 6px;
-        border-top: 1px solid var(--color-base-gray);
-      }
-      &.divider:last-child {
-        margin-bottom: -6px;
-      }
-    }
-
-    @when loading {
-      li {
-        text-align: center;
-        height: 100px;
-        line-height: 100px;
-        font-size: 20px;
-        color: #999;
-        @utils-vertical-center;
-
-        &:hover {
-          background-color: var(--color-white);
-        }
-      }
-
-      & .el-icon-loading {
-        vertical-align: middle;
-      }
-    }
-  }
-}
diff --git a/packages/theme-default/src/badge.css b/packages/theme-default/src/badge.css
deleted file mode 100644
index 5332c30720..0000000000
--- a/packages/theme-default/src/badge.css
+++ /dev/null
@@ -1,40 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-  @b badge {
-    position: relative;
-    vertical-align: middle;
-    display: inline-block;
-
-    @e content {
-      background-color: var(--badge-fill);
-      border-radius: var(--badge-radius);
-      color: var(--color-white);
-      display: inline-block;
-      font-size: var(--badge-font-size);
-      height: var(--badge-size);
-      line-height: var(--badge-size);
-      padding: 0 var(--badge-padding);
-      text-align: center;
-      white-space: nowrap;
-      border: 1px solid var(--color-white);
-
-      @when fixed {
-        position: absolute 0 calc(var(--badge-size) / 2 + 1) * *;
-        transform: translateY(-50%) translateX(100%);
-
-        @when dot {
-          right: 5px;
-        }
-      }
-
-      @when dot {
-        size: 8px 8px;
-        padding: 0;
-        right: 0;
-        border-radius: 50%;
-      }
-    }
-  }
-}
diff --git a/packages/theme-default/src/base.css b/packages/theme-default/src/base.css
deleted file mode 100644
index d5da9e9e1e..0000000000
--- a/packages/theme-default/src/base.css
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "./common/transition.css";
-@import "./icon.css";
diff --git a/packages/theme-default/src/breadcrumb.css b/packages/theme-default/src/breadcrumb.css
deleted file mode 100644
index 78e425299b..0000000000
--- a/packages/theme-default/src/breadcrumb.css
+++ /dev/null
@@ -1,45 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-
-  @b breadcrumb {
-    font-size:13px;
-    line-height: 1;
-    @utils-clearfix;
-
-    @e separator {
-      margin: 0 8px;
-      color: var(--color-extra-light-silver);
-    }
-    @e item {
-      float: left;
-
-      @e inner {
-        &, & a {
-          transition: color .15s linear;
-          color:var(--color-extra-light-black);
-
-          &:hover {
-            color: var(--color-primary);
-            cursor: pointer;
-          }
-        }
-      }
-
-      &:last-child {
-        .el-breadcrumb__item__inner,
-        .el-breadcrumb__item__inner a {
-          &, &:hover {
-            color: var(--color-light-silver);
-            cursor: text;
-          }
-        }
-
-        .el-breadcrumb__separator {
-          display: none;
-        }
-      }
-    }
-  }
-}
diff --git a/packages/theme-default/src/button.css b/packages/theme-default/src/button.css
deleted file mode 100644
index 37f4e2834f..0000000000
--- a/packages/theme-default/src/button.css
+++ /dev/null
@@ -1,206 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-@import './mixins/button';
-
-@component-namespace el {
-  @b button {
-    display: inline-block;
-    line-height: 1;
-    white-space: nowrap;
-    cursor: pointer;
-    background: var(--button-default-fill);
-    border: var(--border-base);
-    border-color: var(--button-default-border);
-    color: var(--button-default-color);
-    -webkit-appearance: none;
-    text-align: center;
-    box-sizing: border-box;
-    outline: none;
-    margin: 0;
-    @utils-user-select none;
-    & + .el-button {
-      margin-left: 10px;
-    }
-    
-    @mixin button-size var(--button-padding-vertical), var(--button-padding-horizontal), var(--button-font-size), var(--button-border-radius);
-
-    &:hover,
-    &:focus {
-      color: var(--color-primary);
-      border-color: @color;
-    }
-    
-    &:active {
-      color: shade(var(--color-primary), var(--button-active-shade-percent));
-      border-color: @color;
-      outline: none;
-    }
-
-    &::-moz-focus-inner {
-      border: 0;
-    }
-
-    & [class*="el-icon-"] {
-      & + span {
-        margin-left: 5px;
-      }
-    }
-
-    @when plain {
-      &:hover,
-      &:focus {
-        background: var(--color-white);
-        border-color: var(--color-primary);
-        color: var(--color-primary);
-      }
-      
-      &:active {
-        background: var(--color-white);
-        border-color: shade(var(--color-primary), var(--button-active-shade-percent));
-        color: shade(var(--color-primary), var(--button-active-shade-percent));
-        outline: none;
-      }
-    }
-
-    @when active {
-      color: shade(var(--color-primary), var(--button-active-shade-percent));
-      border-color: @color;
-    }
-
-    @when disabled {
-      &,
-      &:hover,
-      &:focus {
-        color: var(--button-disabled-color);
-        cursor: not-allowed;
-        background-image: none;
-        background-color: var(--button-disabled-fill);
-        border-color: var(--button-disabled-border);
-      }
-
-      &.el-button--text {
-        background-color: transparent;
-      }
-
-      &.is-plain {
-        &,
-        &:hover,
-        &:focus {
-          background-color: var(--color-white);
-          border-color: var(--color-base-gray);
-          color: var(--color-extra-light-silver);
-        }
-      }
-    }
-
-    @when loading {
-      position: relative;
-      pointer-events: none;
-
-      &:before {
-        pointer-events: none;
-        content: '';
-        position: absolute;
-        left: -1px;
-        top: -1px;
-        right: -1px;
-        bottom: -1px;
-        border-radius: inherit;
-        background-color: rgba(255,255,255,.35);
-      }
-    }
-    @m primary {
-      @mixin button-variant var(--button-primary-color), var(--button-primary-fill), var(--button-primary-border);
-    }
-    @m success {
-      @mixin button-variant var(--button-success-color), var(--button-success-fill), var(--button-success-border);
-    }
-    @m warning {
-      @mixin button-variant var(--button-warning-color), var(--button-warning-fill), var(--button-warning-border);
-    }
-    @m danger {
-      @mixin button-variant var(--button-danger-color), var(--button-danger-fill), var(--button-danger-border);
-    }
-    @m info {
-      @mixin button-variant var(--button-info-color), var(--button-info-fill), var(--button-info-border);
-    }
-    @m large {
-      @mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), var(--button-border-radius);
-    }
-    @m small {
-      @mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), var(--button-border-radius);
-    }
-    @m mini {
-      @mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), var(--button-border-radius);
-    }
-    @m text {
-      border: none;
-      color: var(--color-primary);
-      background: transparent;
-      padding-left: 0;
-      padding-right: 0;
-
-      &:hover,
-      &:focus {
-        color: tint(var(--color-primary), var(--button-hover-tint-percent));
-      }
-      &:active {
-        color: shade(var(--color-primary), var(--button-active-shade-percent));
-      }
-    }
-  }
-
-  @b button-group {
-    @utils-clearfix;
-    display: inline-block;
-    vertical-align: middle;
-
-    & .el-button {
-      float: left;
-      position: relative;
-      & + .el-button {
-        margin-left: 0;
-      }
-
-      &:first-child {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-      &:last-child {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-      &:not(:first-child):not(:last-child) {
-        border-radius: 0;
-      }
-      &:not(:last-child) {
-        margin-right: -1px;
-      }
-
-      &:hover,
-      &:focus,
-      &:active {
-        z-index: 1;
-      }
-
-      @when active {
-        z-index: 1;
-      }
-    }
-
-    @each $type in (primary, success, warning, danger, info) {
-      .el-button--$type {
-        &:first-child {
-          border-right-color: rgba(var(--color-white), 0.5);
-        }
-        &:last-child {
-          border-left-color: rgba(var(--color-white), 0.5);
-        }
-        &:not(:first-child):not(:last-child) {
-          border-left-color: rgba(var(--color-white), 0.5);
-          border-right-color: rgba(var(--color-white), 0.5);
-        }
-      }
-    }
-  }
-}
diff --git a/packages/theme-default/src/card.css b/packages/theme-default/src/card.css
deleted file mode 100644
index 6d92dfee45..0000000000
--- a/packages/theme-default/src/card.css
+++ /dev/null
@@ -1,23 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-  @b card {
-    border: 1px solid var(--card-border-color);
-    border-radius: var(--card-border-radius);
-    background-color: var(--color-white);
-    overflow: hidden;
-    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .12),
-                0px 0px 6px 0px rgba(0, 0, 0, .04);
-
-    @e header {
-      padding: calc(var(--card-padding) - 2) var(--card-padding);
-      border-bottom: 1px solid var(--card-border-color);
-      box-sizing: border-box;
-    }
-
-    @e body {
-      padding: var(--card-padding);
-    }
-  }
-}
diff --git a/packages/theme-default/src/carousel-item.css b/packages/theme-default/src/carousel-item.css
deleted file mode 100644
index 2bf1e2307b..0000000000
--- a/packages/theme-default/src/carousel-item.css
+++ /dev/null
@@ -1,48 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-
-  @b carousel {
-    @e item {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      display: inline-block;
-      transition: .4s ease-in-out;
-      overflow: hidden;
-      z-index: calc(var(--index-normal) - 1);
-      @when active {
-        z-index: calc(var(--index-normal) + 1);
-      }
-
-      @modifier card {
-        width: 50%;
-        &.is-in-stage {
-          cursor: pointer;
-          z-index: var(--index-normal);
-          &:hover .el-carousel__mask,
-          &.is-hover .el-carousel__mask {
-            opacity: 0.12;
-          }
-        }
-        &.is-active {
-          z-index: calc(var(--index-normal) + 1);
-        }
-      }
-    }
-
-    @e mask {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      background-color: var(--color-white);
-      opacity: 0.24;
-      transition: .2s;
-    }
-  }
-}
\ No newline at end of file
diff --git a/packages/theme-default/src/carousel.css b/packages/theme-default/src/carousel.css
deleted file mode 100644
index 08c1ffc130..0000000000
--- a/packages/theme-default/src/carousel.css
+++ /dev/null
@@ -1,134 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-
-  @b carousel {
-    overflow-x: hidden;
-    position: relative;
-
-    @e container {
-      position: relative;
-      height: 300px;
-    }
-
-    @e arrow {
-      border: none;
-      outline: none;
-      padding: 0;
-      margin: 0;
-      size: var(--carousel-arrow-size);
-      cursor: pointer;
-      transition: .3s;
-      border-radius: 50%;
-      background-color: var(--carousel-arrow-background);
-      color: var(--color-white);
-      position: absolute;
-      top: 50%;
-      z-index: 10;
-      transform: translateY(-50%);
-      text-align: center;
-      font-size: var(--carousel-arrow-font-size);
-
-      @modifier left {
-        left: 16px;
-      }
-
-      @modifier right {
-        right: 16px;
-      }
-
-      &:hover {
-        background-color: var(--carousel-arrow-hover-background);
-      }
-
-      & i {
-        cursor: pointer;
-      }
-    }
-
-    @e indicators {
-      position: absolute;
-      list-style: none;
-      bottom: 0;
-      left: 50%;
-      transform: translateX(-50%);
-      margin: 0;
-      padding: 0;
-      z-index: calc(var(--index-normal) + 1);
-
-      @modifier outside {
-        bottom: calc(var(--carousel-indicator-height) + var(--carousel-indicator-padding-vertical) * 2);
-        text-align: center;
-        position: static;
-        transform: none;
-        .el-carousel__indicator:hover button {
-          opacity: 0.64;
-        }
-        button {
-          background-color: var(--carousel-indicator-out-color);
-          opacity: 0.24;
-        }
-      }
-      
-      @modifier labels {
-        left: 0;
-        right: 0;
-        transform: none;
-        text-align: center;
-        
-        .el-carousel__button {
-          size: auto auto;
-          padding: 2px 18px;
-          font-size: 12px;
-        }
-
-        .el-carousel__indicator {
-          padding: 6px 4px;
-        }
-      }
-    }
-
-    @e indicator {
-      display: inline-block;
-      background-color: transparent;
-      padding: var(--carousel-indicator-padding-vertical) var(--carousel-indicator-padding-horizontal);
-      cursor: pointer;
-
-      &:hover button {
-        opacity: 0.72;
-      }
-
-      @when active {
-        button {
-          opacity: 1;
-        }
-      }
-    }
-
-    @e button {
-      display: block;
-      opacity: 0.48;
-      size: var(--carousel-indicator-width) var(--carousel-indicator-height);
-      background-color: var(--color-white);
-      border: none;
-      outline: none;
-      padding: 0;
-      margin: 0;
-      cursor: pointer;
-      transition: .3s;
-    }
-  }
-
-  .carousel-arrow-left-enter,
-  .carousel-arrow-left-leave-active {
-    transform: translateY(-50%) translateX(-10px);
-    opacity: 0;
-  }
-
-  .carousel-arrow-right-enter,
-  .carousel-arrow-right-leave-active {
-    transform: translateY(-50%) translateX(10px);
-    opacity: 0;
-  }
-}
diff --git a/packages/theme-default/src/cascader.css b/packages/theme-default/src/cascader.css
deleted file mode 100644
index 2d16560831..0000000000
--- a/packages/theme-default/src/cascader.css
+++ /dev/null
@@ -1,175 +0,0 @@
-@charset "UTF-8";
-@import "./input.css";
-@import "./common/var.css";
-
-@component-namespace el {
-
-  @b cascader {
-    display: inline-block;
-    position: relative;
-
-    .el-input,
-    .el-input__inner {
-      cursor: pointer;
-    }
-
-    .el-input__icon {
-      transition: none;
-    }
-
-    .el-icon-caret-bottom {
-      transition: transform .3s;
-
-      @when reverse {
-        transform: rotateZ(180deg);
-      }
-    }
-
-    .el-icon-circle-close {
-      z-index: calc(var(--index-normal) + 1);
-    }
-
-    @e label {
-      position: absolute;
-      left: 0;
-      top: 0;
-      height: 100%;
-      line-height: 36px;
-      padding: 0 25px 0 10px;
-      color: var(--input-color);
-      width: 100%;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      box-sizing: border-box;
-      cursor: pointer;
-      font-size: 14px;
-      text-align: left;
-      span {
-        color: var(--color-light-silver);
-      }
-    }
-
-    @m large {
-      font-size: var(--input-large-font-size);
-
-      .el-cascader__label {
-        line-height: calc(var(--input-large-height) - 2);
-      }
-    }
-    @m small {
-      font-size: var(--input-small-font-size);
-
-      .el-cascader__label {
-        line-height: calc(var(--input-small-height) - 2);
-      }
-    }
-    @when disabled {
-      .el-cascader__label {
-        z-index: calc(var(--index-normal) + 1);
-        color: var(--disabled-color-base);
-      }
-    }
-  }
-
-  @b cascader-menus {
-    white-space: nowrap;
-    background: #fff;
-    position: absolute;
-    margin: 5px 0;
-    z-index: calc(var(--index-normal) + 1);
-    border: var(--select-dropdown-border);
-    border-radius: var(--border-radius-small);
-    box-shadow: var(--select-dropdown-shadow);
-  }
-
-  @b cascader-menu {
-    display: inline-block;
-    vertical-align: top;
-    height: 204px;
-    overflow: auto;
-    border-right: var(--select-dropdown-border);
-    background-color: var(--select-dropdown-background);
-    box-sizing: border-box;
-    margin: 0;
-    padding: 6px 0;
-    min-width: 160px;
-
-    &:last-child {
-      border-right: 0;
-    }
-
-    @e item {
-      font-size: var(--select-font-size);
-      padding: 8px 30px 8px 10px;
-      position: relative;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      color: var(--select-option-color);
-      height: var(--select-option-height);
-      line-height: 1.5;
-      box-sizing: border-box;
-      cursor: pointer;
-
-      @e keyword {
-        font-weight: bold;
-      }
-      
-      @m extensible {
-        &:after {
-          font-family: 'element-icons';
-          content: "\e606";
-          font-size: 12px;
-          transform: scale(0.8);
-          color: rgb(191, 203, 217);
-          position: absolute;
-          right: 10px;
-          margin-top: 1px;
-        }
-      }
-
-      @when disabled {
-        color: var(--select-option-disabled-color);
-        background-color: var(--select-option-disabled-background);
-        cursor: not-allowed;
-
-        &:hover {
-          background-color: var(--color-white);
-        }
-      }
-
-      @when active {
-        color: var(--color-white);
-        background-color: var(--select-option-selected);
-
-        &:hover {
-          background-color: var(--select-option-selected-hover);
-        }
-      }
-
-      &:hover {
-        background-color: var(--select-option-hover-background);
-      }
-
-      &.selected {
-        color: var(--color-white);
-        background-color: var(--select-option-selected);
-
-        &.hover {
-          background-color: var(--select-option-selected-hover);
-        }
-      }
-    }
-
-    @m flexible {
-      height: auto;
-      max-height: 180px;
-      overflow: auto;
-
-      .el-cascader-menu__item {
-        overflow: visible;
-      }
-    }
-  }
-}
diff --git a/packages/theme-default/src/checkbox.css b/packages/theme-default/src/checkbox.css
deleted file mode 100644
index d5c9e0c17a..0000000000
--- a/packages/theme-default/src/checkbox.css
+++ /dev/null
@@ -1,254 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-
-  @b checkbox {
-    color: var(--checkbox-color);
-    position: relative;
-    cursor: pointer;
-    display: inline-block;
-    white-space: nowrap;
-    @utils-user-select none;
-
-    @e input {
-      white-space: nowrap;
-      cursor: pointer;
-      outline: none;
-      display: inline-block;
-      line-height: 1;
-      position: relative;
-      vertical-align: middle;
-
-      @when disabled {
-        .el-checkbox__inner {
-          background-color: var(--checkbox-disabled-input-fill);
-          border-color: var(--checkbox-disabled-input-border-color);
-          cursor: not-allowed;
-
-          &::after {
-            cursor: not-allowed;
-            border-color: var(--checkbox-disabled-icon-color);
-          }
-
-          & + .el-checkbox__label {
-            cursor: not-allowed;
-          }
-        }
-        &.is-checked {
-          .el-checkbox__inner {
-            background-color: var(--checkbox-disabled-checked-input-fill);
-            border-color: var(--checkbox-disabled-checked-input-border-color);
-
-            &::after {
-              border-color: var(--checkbox-disabled-checked-icon-color);
-            }
-          }
-        }
-        &.is-indeterminate {
-          .el-checkbox__inner {
-            background-color: var(--checkbox-disabled-checked-input-fill);
-            border-color: var(--checkbox-disabled-checked-input-border-color);
-
-            &::before {
-              border-color: var(--checkbox-disabled-checked-icon-color);
-            }
-          }
-        }
-        & + .el-checkbox__label {
-          color: var(--disabled-color-base);
-          cursor: not-allowed;
-        }
-      }
-      @when checked {
-        .el-checkbox__inner {
-          background-color: var(--checkbox-checked-input-fill);
-          border-color: var(--checkbox-checked-input-border-color);
-
-          &::after {
-            transform: rotate(45deg) scaleY(1);
-          }
-        }
-      }
-      @when focus {
-        .el-checkbox__inner {
-          border-color: var(--checkbox-input-border-color-hover);
-        }
-      }
-      @when indeterminate {
-        .el-checkbox__inner {
-          background-color: var(--checkbox-checked-input-fill);
-          border-color: var(--checkbox-checked-input-border-color);
-
-          &::before {
-            content: '';
-            position: absolute;
-            display: block;
-            border: 1px solid var(--checkbox-checked-icon-color);
-            margin-top: -1px;
-            left: 3px;
-            right: 3px;
-            top: 50%;
-          }
-
-          &::after {
-            display: none;
-          }
-        }
-      }
-    }
-    @e inner {
-      display: inline-block;
-      position: relative;
-      border: var(--checkbox-input-border);
-      border-radius: var(--checkbox-input-border-radius);
-      box-sizing: border-box;
-      rect: var(--checkbox-input-width) var(--checkbox-input-height) var(--checkbox-input-fill);
-      z-index: var(--index-normal);
-      transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),
-                  background-color .25s cubic-bezier(.71,-.46,.29,1.46);
-
-      &:hover {
-        border-color: var(--checkbox-input-border-color-hover);
-      }
-
-      &::after {
-        box-sizing: content-box;
-        content: "";
-        border: 2px solid var(--checkbox-checked-icon-color);
-        border-left: 0;
-        border-top: 0;
-        height: 8px;
-        left: 5px;
-        position: absolute;
-        top: 1px;
-        transform: rotate(45deg) scaleY(0);
-        width: 4px;
-        transition: transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;
-        transform-origin: center;
-      }
-    }
-
-    @e original {
-      opacity: 0;
-      outline: none;
-      position: absolute;
-      margin: 0;
-      size: 0;
-      left: -999px;
-    }
-
-    @e label {
-      font-size: var(--checkbox-font-size);
-      padding-left: 5px;
-    }
-
-    & + .el-checkbox {
-      margin-left: 15px;
-    }
-  }
-
-  @b checkbox-button {
-    position: relative;
-    display: inline-block;
-
-    @e inner {
-      display: inline-block;
-      line-height: 1;
-      white-space: nowrap;
-      vertical-align: middle;
-      cursor: pointer;
-      background: var(--button-default-fill);
-      border: var(--border-base);
-      border-left: 0;
-      color: var(--button-default-color);
-      -webkit-appearance: none;
-      text-align: center;
-      box-sizing: border-box;
-      outline: none;
-      margin: 0;
-      position: relative;
-      cursor: pointer;
-      transition: var(--all-transition);
-      @utils-user-select none;
-
-      @mixin button-size var(--button-padding-vertical), var(--button-padding-horizontal), var(--button-font-size), 0;
-
-      &:hover {
-        color: var(--color-primary);
-      }
-
-      & [class*="el-icon-"] {
-        line-height: 0.9;
-
-        & + span {
-          margin-left: 5px;
-        }
-      }
-    }
-
-    @e original {
-      opacity: 0;
-      outline: none;
-      position: absolute;
-      margin: 0;
-      visibility: hidden;
-      left: -999px;
-    }
-
-    &.is-checked {
-      & .el-checkbox-button__inner {
-        color: var(--checkbox-button-checked-color);
-        background-color: var(--checkbox-button-checked-fill);
-        border-color: var(--checkbox-button-checked-border-color);
-        box-shadow: -1px 0 0 0 var(--checkbox-button-checked-border-color);
-      }
-    }
-
-    &.is-disabled {
-      & .el-checkbox-button__inner {
-        color: var(--button-disabled-color);
-        cursor: not-allowed;
-        background-image: none;
-        background-color: var(--button-disabled-fill);
-        border-color: var(--button-disabled-border);
-        box-shadow: none;
-      }
-    }
-    
-    &.is-focus {
-      & .el-checkbox-button__inner {
-        border-color: var(--checkbox-button-checked-border-color);
-      }
-    }
-
-
-    &:first-child {
-      .el-checkbox-button__inner {
-        border-left: var(--border-base);
-        border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
-        box-shadow: none !important;
-      }
-    }
-    &:last-child {
-      .el-checkbox-button__inner {
-        border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
-      }
-    }
-    @m large {
-      & .el-checkbox-button__inner {
-        @mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), 0;
-      }
-    }
-    @m small {
-      & .el-checkbox-button__inner {
-        @mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), 0;
-      }
-    }
-    @m mini {
-      & .el-checkbox-button__inner {
-        @mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), 0;
-      }
-    }
-  }
-}
diff --git a/packages/theme-default/src/col.css b/packages/theme-default/src/col.css
deleted file mode 100644
index 0dce6408c4..0000000000
--- a/packages/theme-default/src/col.css
+++ /dev/null
@@ -1,101 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-.el-col-1, .el-col-2, .el-col-3, .el-col-4, .el-col-5, .el-col-6, .el-col-7, .el-col-8, .el-col-9, .el-col-10, .el-col-11, .el-col-12, .el-col-13, .el-col-14, .el-col-15, .el-col-16, .el-col-17, .el-col-18, .el-col-19, .el-col-20, .el-col-21, .el-col-22, .el-col-23, .el-col-24 {
-  float: left;
-  box-sizing: border-box;
-}
-.el-col-0 {
-  width: 0;
-}
-
-@for $i from 0 to 24 {
-  .el-col-$i {
-    width: calc(1 / 24 * $(i) * 100)%;
-  }
-  .el-col-offset-$i {
-    margin-left: calc(1 / 24 * $(i) * 100)%;
-  }
-  .el-col-pull-$i {
-    position: relative;
-    right: calc(1 / 24 * $(i) * 100)%;
-  }
-  .el-col-push-$i {
-    position: relative;
-    left: calc(1 / 24 * $(i) * 100)%;
-  }
-}
-
-@media (max-width: 768px) {
-  @for $i from 0 to 24 {
-    .el-col-xs-$i {
-      width: calc(1 / 24 * $(i) * 100)%;
-    }
-    .el-col-xs-offset-$i {
-      margin-left: calc(1 / 24 * $(i) * 100)%;
-    }
-    .el-col-xs-pull-$i {
-      position: relative;
-      right: calc(1 / 24 * $(i) * 100)%;
-    }
-    .el-col-xs-push-$i {
-      position: relative;
-      left: calc(1 / 24 * $(i) * 100)%;
-    }
-  }
-}
-
-@media (min-width: 768px) {
-  @for $i from 0 to 24 {
-    .el-col-sm-$i {
-      width: calc(1 / 24 * $(i) * 100)%;
-    }
-    .el-col-sm-offset-$i {
-      margin-left: calc(1 / 24 * $(i) * 100)%;
-    }
-    .el-col-sm-pull-$i {
-      position: relative;
-      right: calc(1 / 24 * $(i) * 100)%;
-    }
-    .el-col-sm-push-$i {
-      position: relative;
-      left: calc(1 / 24 * $(i) * 100)%;
-    }
-  }
-}
-@media (min-width: 992px) {
-  @for $i from 0 to 24 {
-    .el-col-md-$i {
-      width: calc(1 / 24 * $(i) * 100)%;
-    }
-    .el-col-md-offset-$i {
-      margin-left: calc(1 / 24 * $(i) * 100)%;
-    }
-    .el-col-md-pull-$i {
-      position: relative;
-      right: calc(1 / 24 * $(i) * 100)%;
-    }
-    .el-col-md-push-$i {
-      position: relative;
-      left: calc(1 / 24 * $(i) * 100)%;
-    }
-  }
-}
-@media (min-width: 1200px) {
-  @for $i from 0 to 24 {
-    .el-col-lg-$i {
-      width: calc(1 / 24 * $(i) * 100)%;
-    }
-    .el-col-lg-offset-$i {
-      margin-left: calc(1 / 24 * $(i) * 100)%;
-    }
-    .el-col-lg-pull-$i {
-      position: relative;
-      right: calc(1 / 24 * $(i) * 100)%;
-    }
-    .el-col-lg-push-$i {
-      position: relative;
-      left: calc(1 / 24 * $(i) * 100)%;
-    }
-  }
-}
\ No newline at end of file
diff --git a/packages/theme-default/src/collapse.css b/packages/theme-default/src/collapse.css
deleted file mode 100644
index 809d51bbb1..0000000000
--- a/packages/theme-default/src/collapse.css
+++ /dev/null
@@ -1,53 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-  @b collapse {
-    border: 1px solid var(--collapse-border-color);
-    border-radius: var(--collapse-border-radius);
-  }
-  @b collapse-item {
-    @e header {
-      height: var(--collapse-header-height);
-      line-height: @height;
-      padding-left: 15px;
-      background-color: var(--collapse-header-fill);
-      color: var(--collapse-header-color);
-      cursor: pointer;
-      border-bottom: 1px solid var(--collapse-border-color);
-      font-size: var(--collapse-header-size);
-
-      @e arrow {
-        margin-right: 8px;
-        transition: transform .3s;
-      }
-    }
-
-    @e wrap {
-      will-change: height;
-      background-color: var(--collapse-content-fill);
-      overflow: hidden;
-      box-sizing: border-box;
-      border-bottom: 1px solid var(--collapse-border-color);
-    }
-
-    @e content {
-      padding: 10px 15px;
-      font-size: var(--collapse-content-size);
-      color: var(--collapse-content-color);
-      line-height: 1.769230769230769;
-    }
-
-    @when active {
-      > .el-collapse-item__header {
-        .el-collapse-item__header__arrow {
-          transform: rotate(90deg);
-        }
-      }
-    }
-
-    &:last-child {
-      margin-bottom: -1px;
-    }
-  }
-}
diff --git a/packages/theme-default/src/color-picker.css b/packages/theme-default/src/color-picker.css
deleted file mode 100644
index e9fc94164f..0000000000
--- a/packages/theme-default/src/color-picker.css
+++ /dev/null
@@ -1,266 +0,0 @@
-@import "./common/var.css";
-
-@component-namespace el-color {
-  @component hue-slider {
-    position: relative;
-    box-sizing: border-box;
-    width: 280px;
-    height: 12px;
-    background-color: #f00;
-    padding: 0 2px;
-
-    @descendent bar {
-      position: relative;
-      background: linear-gradient(
-        to right, #f00 0%,
-        #ff0 17%, #0f0 33%,
-        #0ff 50%, #00f 67%,
-        #f0f 83%, #f00 100%);
-      height: 100%;
-    }
-
-    @descendent thumb {
-      position: absolute;
-      cursor: pointer;
-      box-sizing: border-box;
-      left: 0;
-      top: 0;
-      width: 4px;
-      height: 100%;
-      border-radius: 1px;
-      background: #fff;
-      border: 1px solid #f0f0f0;
-      box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
-      z-index: 1;
-    }
-
-    @when vertical {
-      width: 12px;
-      height: 180px;
-      padding: 2px 0;
-
-      .el-color-hue-slider__bar {
-        background: linear-gradient(
-          to bottom, #f00 0%,
-          #ff0 17%, #0f0 33%,
-          #0ff 50%, #00f 67%,
-          #f0f 83%, #f00 100%);
-      }
-
-      .el-color-hue-slider__thumb {
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 4px;
-      }
-    }
-  }
-
-  @component svpanel {
-    position: relative;
-    width: 280px;
-    height: 180px;
-
-    @descendent white, black {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-    }
-
-    @descendent white {
-      background: linear-gradient(to right, #fff, rgba(255,255,255,0));
-    }
-
-    @descendent black {
-      background: linear-gradient(to top, #000, rgba(0,0,0,0));
-    }
-
-    @descendent cursor {
-      position: absolute;
-
-      > div {
-        cursor: head;
-        width: 4px;
-        height: 4px;
-        box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,0.3), 0 0 1px 2px rgba(0,0,0,0.4);
-        border-radius: 50%;
-        transform: translate(-2px, -2px);
-      }
-    }
-  }
-
-  @component alpha-slider {
-    position: relative;
-    box-sizing: border-box;
-    width: 280px;
-    height: 12px;
-    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
-
-    @descendent bar {
-      position: relative;
-      background: linear-gradient(
-        to right, rgba(255, 255, 255, 0) 0%,
-        rgba(255, 255, 255, 1) 100%);
-      height: 100%;
-    }
-
-    @descendent thumb {
-      position: absolute;
-      cursor: pointer;
-      box-sizing: border-box;
-      left: 0;
-      top: 0;
-      width: 4px;
-      height: 100%;
-      border-radius: 1px;
-      background: #fff;
-      border: 1px solid #f0f0f0;
-      box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
-      z-index: 1;
-    }
-
-    @when vertical {
-      width: 20px;
-      height: 180px;
-
-      .el-color-alpha-slider__bar {
-        background: linear-gradient(
-          to bottom, rgba(255, 255, 255, 0) 0%,
-          rgba(255, 255, 255, 1) 100%);
-      }
-
-      .el-color-alpha-slider__thumb {
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 4px;
-      }
-    }
-  }
-
-  @component dropdown {
-    width: 300px;
-
-    @descendent main-wrapper {
-      margin-bottom: 6px;
-
-      &::after {
-        content: "";
-        display: table;
-        clear: both;
-      }
-    }
-
-    @descendent btns {
-      margin-top: 6px;
-      text-align: right;
-    }
-
-    @descendent value {
-      float: left;
-      line-height: 26px;
-      font-size: 12px;
-      color: var(--color-base-black);
-    }
-
-    @descendent btn {
-      border: 1px solid #dcdcdc;
-      color: #333;
-      line-height: 24px;
-      border-radius: 2px;
-      padding: 0 20px;
-      cursor: pointer;
-      background-color: transparent;
-      outline: none;
-      font-size: 12px;
-
-      &[disabled] {
-        color: #cccccc;
-        cursor: not-allowed;
-      }
-      &:hover {
-        color: var(--color-primary);
-        border-color: var(--color-primary);
-      }
-    }
-
-    @descendent link-btn {
-      cursor: pointer;
-      color: var(--color-primary);
-      text-decoration: none;
-      padding: 15px;
-      font-size: 12px;
-      &:hover {
-        color: tint(var(--color-primary), var(--button-hover-tint-percent));
-      }
-    }
-  }
-
-  @component picker {
-    display: inline-block;
-    position: relative;
-    line-height: normal;
-
-    @descendent trigger {
-      display: inline-block;
-      box-sizing: border-box;
-      height: 36px;
-      padding: 6px;
-      border: 1px solid #bfcbd9;
-      border-radius: 4px;
-      font-size: 0;
-    }
-
-    @descendent color {
-      position: relative;
-      display: inline-block;
-      box-sizing: border-box;
-      border: 1px solid #666;
-      width: 22px;
-      height: 22px;
-      text-align: center;
-
-      @when alpha {
-        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
-      }
-    }
-
-    @descendent color-inner {
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-    }
-
-    @descendent empty {
-      font-size: 12px;
-      vertical-align: middle;
-      color: #666;
-      position: absolute;
-      top: 4px;
-      left: 4px;
-    }
-
-    @descendent icon {
-      display: inline-block;
-      position: relative;
-      top: -6px;
-      margin-left: 8px;
-      width: 12px;
-      color: #888;
-      font-size: 12px;
-    }
-
-    @descendent panel {
-      position: absolute;
-      z-index: 10;
-      padding: 6px;
-      background-color: var(--color-white);
-      border: 1px solid var(--color-base-gray);
-      box-shadow: var(--dropdown-menu-box-shadow);
-    }
-  }
-}
diff --git a/packages/theme-default/src/common/var.css b/packages/theme-default/src/common/var.css
deleted file mode 100644
index 02de8b8451..0000000000
--- a/packages/theme-default/src/common/var.css
+++ /dev/null
@@ -1,605 +0,0 @@
-:root {
-
-  /* Transition
-  -------------------------- */
-  --all-transition: all .3s cubic-bezier(.645,.045,.355,1);
-  --fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-  --fade-linear-transition: opacity 200ms linear;
-  --md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
-  --border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1);
-  --color-transition-base: color .2s cubic-bezier(.645,.045,.355,1);
-
-  /* Colors
-  -------------------------- */
-  --color-primary: #20a0ff;
-
-  --color-success: #13ce66;
-  --color-warning: #f7ba2a;
-  --color-danger: #ff4949;
-  --color-info: #50bfff;
-
-  --color-secondary: color(var(--color-primary) s(99%) l(*0.9));
-  --color-white: #fff;
-  --color-dark-white: color(var(--color-white) blend(var(--color-primary) 2%));
-  --color-black: #000;
-
-  --color-base-black: color(var(--color-primary) h(+6) s(33%) l(18%));
-  --color-light-black: color(var(--color-base-black) h(+5) s(27%) l(27%));
-  --color-extra-light-black: color(var(--color-base-black) h(+2) s(19%) l(35%));
-
-  --color-base-silver: color(var(--color-base-black) h(+3) s(16%) l(58%));
-  --color-light-silver: color(var(--color-base-black) h(+3) s(23%) l(67%));
-  --color-extra-light-silver: color(var(--color-base-black) s(26%) l(80%));
-
-  --color-base-gray: color(var(--color-base-black) s(28%) l(86%));
-  --color-light-gray: color(var(--color-base-black) h(+10) s(33%) l(92%));
-  --color-extra-light-gray: color(var(--color-base-black) h(+6) s(33%) l(95%));
-
-  /* Link
-  -------------------------- */
-  --link-color: var(--color-extra-light-black);
-  --link-hover-color: var(--color-primary);
-
-  /* Border
-  -------------------------- */
-  --border-width-base: 1px;
-  --border-style-base: solid;
-  --border-color-base: var(--color-extra-light-silver);
-  --border-color-hover: var(--color-base-silver);
-  --border-base: var(--border-width-base) var(--border-style-base) var(--border-color-base);
-  --border-radius-base: 4px;
-  --border-radius-small: 2px;
-  --border-radius-circle: 100%;
-
-  /* Box-shadow
-  -------------------------- */
-  --box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
-  --box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
-
-  /* Fill
-  -------------------------- */
-  --fill-base: var(--color-white);
-
-  /* Font
-  -------------------------- */
-  --font-size-base: 14px;
-  --font-color-base: var(--color-base-black);
-  --font-color-disabled-base: #bbb;
-
-  /* Size
-  -------------------------- */
-  --size-base: 14px;
-
-  /* z-index
-  -------------------------- */
-  --index-normal: 1;
-  --index-top: 1000;
-  --index-popper: 2000;
-
-  /* Disable base
-  -------------------------- */
-  --disabled-fill-base: var(--color-extra-light-gray);
-  --disabled-color-base: #bbb;
-  --disabled-border-base: var(--color-base-gray);
-
-  /* Icon
-  -------------------------- */
-  --icon-color: #666;
-
-  /* Checkbox
-  -------------------------- */
-  --checkbox-font-size: 14px;
-  --checkbox-color: var(--color-base-black);
-  --checkbox-input-height: 18px;
-  --checkbox-input-width: 18px;
-  --checkbox-input-border-radius: var(--border-radius-base);
-  --checkbox-input-fill: var(--color-white);
-  --checkbox-input-border: var(--border-base);
-  --checkbox-input-border-color: var(--border-color-base);
-  --checkbox-icon-color: var(--color-white);
-
-  --checkbox-disabled-input-border-color: var(--disabled-border-base);
-  --checkbox-disabled-input-fill: var(--disabled-fill-base);
-  --checkbox-disabled-icon-color: var(--disabled-fill-base);
-
-  --checkbox-disabled-checked-input-fill: var(--disabled-border-base);
-  --checkbox-disabled-checked-input-border-color: var(--disabled-border-base);
-  --checkbox-disabled-checked-icon-color: var(--color-white);
-
-  --checkbox-checked-input-border-color: var(--color-secondary);
-  --checkbox-checked-input-fill: var(--color-primary);
-  --checkbox-checked-icon-color: var(--fill-base);
-
-  --checkbox-input-border-color-hover: var(--color-primary);
-
-  --checkbox-button-font-size: var(--font-size-base);
-  --checkbox-button-checked-fill: var(--color-primary);
-  --checkbox-button-checked-color: var(--color-white);
-  --checkbox-button-checked-border-color: var(--color-primary);
-
-
-
-  /* Radio
-  -------------------------- */
-  --radio-font-size: 14px;
-  --radio-color: var(--color-base-black);
-  --radio-input-height: 18px;
-  --radio-input-width: 18px;
-  --radio-input-border-radius: var(--border-radius-circle);
-  --radio-input-fill: var(--color-white);
-  --radio-input-border: var(--border-base);
-  --radio-input-border-color: var(--border-color-base);
-  --radio-icon-color: var(--color-white);
-
-  --radio-disabled-input-border-color: var(--disabled-border-base);
-  --radio-disabled-input-fill: var(--disabled-fill-base);
-  --radio-disabled-icon-color: var(--disabled-fill-base);
-
-  --radio-disabled-checked-input-fill: var(--disabled-border-base);
-  --radio-disabled-checked-input-border-color: var(--disabled-border-base);
-  --radio-disabled-checked-icon-color: var(--color-white);
-
-  --radio-checked-input-border-color: var(--color-primary);
-  --radio-checked-input-fill: var(--color-white);
-  --radio-checked-icon-color: var(--color-primary);
-
-  --radio-input-border-color-hover: var(--color-primary);
-
-  --radio-button-font-size: var(--font-size-base);
-  --radio-button-checked-fill: var(--color-primary);
-  --radio-button-checked-color: var(--color-white);
-  --radio-button-checked-border-color: var(--color-primary);
-
-  /* Select
-  -------------------------- */
-  --select-border-color-hover: var(--border-color-hover);
-  --select-disabled-border: var(--disabled-border-base);
-  --select-font-size: var(--font-size-base);
-  --select-close-hover-color: var(--color-light-silver);
-
-  --select-input-color: var(--color-extra-light-silver);
-  --select-multiple-input-color: #666;
-  --select-input-focus-background: var(--color-primary);
-  --select-input-font-size: 12px;
-
-  --select-tag-height: 24px;
-  --select-tag-color: var(--color-white);
-  --select-tag-background: var(--color-primary);
-
-  --select-option-color: var(--link-color);
-  --select-option-disabled-color: var(--color-extra-light-silver);
-  --select-option-disabled-background: var(--color-white);
-  --select-option-height: 36px;
-  --select-option-hover-background: var(--color-light-gray);
-  --select-option-selected: var(--color-primary);
-  --select-option-selected-hover: shade(var(--color-primary), 0.12);
-
-  --select-group-color: #999;
-  --select-group-height: 30px;
-  --select-group-font-size: 12px;
-
-  --select-dropdown-background: var(--color-white);
-  --select-dropdown-shadow: var(--box-shadow-base);
-  --select-dropdown-empty-color: #999;
-  --select-dropdown-max-height: 274px;
-  --select-dropdown-padding: 6px 0;
-  --select-dropdown-empty-padding: 10px 0;
-  --select-dropdown-border: solid 1px var(--disabled-border-base);
-
-  /* Alert
-  -------------------------- */
-  --alert-padding: 8px 16px;
-  --alert-border-radius: var(--border-radius-base);
-  --alert-title-font-size: 13px;
-  --alert-description-font-size: 12px;
-  --alert-close-font-size: 12px;
-  --alert-close-customed-font-size: 13px;
-
-  --alert-success-color: var(--color-success);
-  --alert-info-color: var(--color-info);
-  --alert-warning-color: var(--color-warning);
-  --alert-danger-color: var(--color-danger);
-
-  --alert-icon-size: 16px;
-  --alert-icon-large-size: 28px;
-
-  /* Message Box
-  -------------------------- */
-  --msgbox-width: 420px;
-  --msgbox-border-radius: 3px;
-  --msgbox-font-size: 16px;
-  --msgbox-content-font-size: 14px;
-  --msgbox-content-color: var(--link-color);
-  --msgbox-error-font-size: 12px;
-
-  --msgbox-success-color: var(--color-success);
-  --msgbox-info-color: var(--color-info);
-  --msgbox-warning-color: var(--color-warning);
-  --msgbox-danger-color: var(--color-danger);
-
-  /* Message
-  -------------------------- */
-  --message-shadow: var(--box-shadow-base);
-  --message-min-width: 300px;
-  --message-padding: 10px 12px;
-  --message-content-color: var(--border-color-hover);
-  --message-close-color: var(--color-extra-light-silver);
-  --message-close-hover-color: var(--color-light-silver);
-
-  --message-success-color: var(--color-success);
-  --message-info-color: var(--color-info);
-  --message-warning-color: var(--color-warning);
-  --message-danger-color: var(--color-danger);
-
-  /* Notification
-  -------------------------- */
-  --notification-width: 330px;
-  --notification-padding: 20px;
-  --notification-shadow: var(--box-shadow-base);
-  --notification-icon-size: 40px;
-  --notification-font-size: var(--font-size-base);
-  --notification-color: var(--border-color-hover);
-  --notification-title-font-size: 16px;
-  --notification-title-color: var(--color-base-black);
-
-  --notification-close-color: var(--color-extra-light-silver);
-  --notification-close-hover-color: var(--color-light-silver);
-
-  --notification-success-color: var(--color-success);
-  --notification-info-color: var(--color-info);
-  --notification-warning-color: var(--color-warning);
-  --notification-danger-color: var(--color-danger);
-
-  /* Input
-  -------------------------- */
-  --input-font-size: var(--font-size-base);
-  --input-color: var(--font-color-base);
-  --input-width: 140px;
-  --input-height: 36px;
-  --input-border: var(--border-base);
-  --input-border-color: var(--border-color-base);
-  --input-border-radius: var(--border-radius-base);
-  --input-border-color-hover: var(--border-color-hover);
-  --input-fill: var(--color-white);
-  --input-fill-disabled: var(--disabled-fill-base);
-  --input-color-disabled: var(--font-color-disabled-base);
-  --input-icon-color: var(--color-extra-light-silver);
-  --input-placeholder-color: var(--color-light-silver);
-  --input-max-width: 314px;
-
-  --input-hover-border: var(--border-color-hover);
-
-  --input-focus-border: var(--color-primary);
-  --input-focus-fill: var(--color-white);
-
-  --input-disabled-fill: var(--disabled-fill-base);
-  --input-disabled-border: var(--disabled-border-base);
-  --input-disabled-color: var(--disabled-color-base);
-  --input-disabled-placeholder-color: var(--color-extra-light-silver);
-
-  --input-large-font-size: 16px;
-  --input-large-height: 42px;
-
-  --input-small-font-size: 13px;
-  --input-small-height: 30px;
-
-  --input-mini-font-size: 12px;
-  --input-mini-height: 22px;
-
-  /* Cascader
-  -------------------------- */
-  --cascader-menu-fill: var(--fill-base);
-  --cascader-menu-font-size: var(--font-size-base);
-  --cascader-menu-radius: var(--border-radius-base);
-  --cascader-menu-border: var(--border-base);
-  --cascader-menu-border-color: var(--border-color-base);
-  --cascader-menu-border-width: var(--border-width-base);
-  --cascader-menu-color: var(--font-color-base);
-  --cascader-menu-option-color-active: var(--color-secondary);
-  --cascader-menu-option-fill-active: rgba(var(--color-secondary), 0.12);
-  --cascader-menu-option-color-hover: var(--font-color-base);
-  --cascader-menu-option-fill-hover: rgba(var(--color-black), 0.06);
-  --cascader-menu-option-color-disabled: #999;
-  --cascader-menu-option-fill-disabled: rgba(var(--color-black), 0.06);
-  --cascader-menu-option-empty-color: #666;
-  --cascader-menu-group-color: #999;
-  --cascader-menu-shadow: 0 1px 2px rgba(var(--color-black), 0.14), 0 0 3px rgba(var(--color-black), 0.14);
-  --cascader-menu-option-pinyin-color: #999;
-  --cascader-menu-submenu-shadow: 1px 1px 2px rgba(var(--color-black), 0.14), 1px 0 2px rgba(var(--color-black), 0.14);
-
-  /* Group
-  -------------------------- */
-  --group-option-flex: 0 0 (1/5) * 100%;
-  --group-option-offset-bottom: 12px;
-  --group-option-fill-hover: rgba(var(--color-black), 0.06);
-  --group-title-color: var(--color-black);
-  --group-title-font-size: var(--font-size-base);
-  --group-title-width: 66px;
-
-  /* Tab
-  -------------------------- */
-  --tab-font-size: var(--font-size-base);
-  --tab-border-line: 1px solid #e4e4e4;
-  --tab-header-color-active: var(--color-secondary);
-  --tab-header-color-hover: var(--font-color-base);
-  --tab-header-color: var(--font-color-base);
-  --tab-header-fill-active: rgba(var(--color-black), 0.06);
-  --tab-header-fill-hover: rgba(var(--color-black), 0.06);
-  --tab-vertical-header-width: 90px;
-  --tab-vertical-header-count-color: var(--color-white);
-  --tab-vertical-header-count-fill: var(--color-secondary);
-
-  /* Button
-  -------------------------- */
-  --button-font-size: 14px;
-  --button-border-radius: var(--border-radius-base);
-  --button-padding-vertical: 10px;
-  --button-padding-horizontal: 15px;
-
-  --button-large-font-size: 16px;
-  --button-large-padding-vertical: 11px;
-  --button-large-padding-horizontal: 19px;
-
-  --button-small-font-size: 12px;
-  --button-small-padding-vertical: 7px;
-  --button-small-padding-horizontal: 9px;
-
-  --button-mini-font-size: 12px;
-  --button-mini-padding-vertical: 4px;
-  --button-mini-padding-horizontal: 4px;
-
-  --button-default-color: var(--color-base-black);
-  --button-default-fill: var(--color-white);
-  --button-default-border: #c4c4c4;
-
-  --button-ghost-color: #666;
-  --button-ghost-fill: transparent;
-  --button-ghost-border: none;
-
-  --button-disabled-color: var(--color-extra-light-silver);
-  --button-disabled-fill: var(--color-extra-light-gray);
-  --button-disabled-border: var(--disabled-border-base);
-
-  --button-primary-border: var(--color-primary);
-  --button-primary-color: var(--color-white);
-  --button-primary-fill: var(--color-primary);
-
-  --button-success-border: var(--color-success);
-  --button-success-color: var(--color-white);
-  --button-success-fill: var(--color-success);
-
-  --button-warning-border: var(--color-warning);
-  --button-warning-color: var(--color-white);
-  --button-warning-fill: var(--color-warning);
-
-  --button-danger-border: var(--color-danger);
-  --button-danger-color: var(--color-white);
-  --button-danger-fill: var(--color-danger);
-
-  --button-info-border: var(--color-info);
-  --button-info-color: var(--color-white);
-  --button-info-fill: var(--color-info);
-
-  --button-hover-tint-percent: 20%;
-  --button-active-shade-percent: 10%;
-
-
-  /* cascader
-  -------------------------- */
-  --cascader-height: 200px;
-
-  /* Switch
- -------------------------- */
-  --switch-on-color: var(--color-primary);
-  --switch-off-color: var(--color-extra-light-silver);
-  --switch-disabled-color: var(--color-light-gray);
-  --switch-disabled-text-color: var(--color-dark-white);
-
-  --switch-font-size: var(--font-size-base);
-  --switch-core-border-radius: 12px;
-  --switch-width: 46px;
-  --switch-height: 22px;
-  --switch-button-size: 16px;
-
-  /* Dialog
- -------------------------- */
-  --dialog-background-color: var(--color-secondary);
-  --dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-  --dialog-tiny-width: 30%;
-  --dialog-small-width: 50%;
-  --dialog-large-width: 90%;
-  --dialog-close-color: var(--color-extra-light-silver);
-  --dialog-close-hover-color: var(--color-primary);
-  --dialog-title-font-size: 16px;
-  --dialog-font-size: 14px;
-
-  /* Table
- -------------------------- */
-  --table-border-color: color(var(--border-color-base) h(-3) s(27%) l(90%));
-  --table-text-color: var(--color-base-black);
-  --table-header-background: var(--color-extra-light-gray);
-  --table-footer-background: var(--color-dark-white);
-
-  /* Pagination
- -------------------------- */
-  --pagination-font-size: 13px;
-  --pagination-fill: var(--color-white);
-  --pagination-color: var(--link-color);
-  --pagination-border-radius: 2px;
-  --pagination-button-color: var(--color-light-silver);
-  --pagination-button-size: 28px;
-  --pagination-button-disabled-color: #e4e4e4;
-  --pagination-button-disabled-fill: var(--color-white);
-  --pagination-border-color: var(--disabled-border-base);
-  --pagination-hover-fill: var(--color-primary);
-  --pagination-hover-color: var(--color-white);
-
-  /* Popover
- -------------------------- */
-  --popover-fill: var(--color-white);
-  --popover-font-size: 12px;
-  --popover-border-color: var(--disabled-border-base);
-  --popover-arrow-size: 6px;
-  --popover-padding: 10px;
-  --popover-title-font-size: 13px;
-  --popover-title-color: var(--color-base-black);
-
-  /* Tooltip
-  -------------------------- */
-  --tooltip-fill: var(--color-base-black);
-  --tooltip-color: var(--color-white);
-  --tooltip-font-size: 12px;
-  --tooltip-border-color: var(--color-base-black);
-  --tooltip-arrow-size: 6px;
-  --tooltip-padding: 10px;
-
-  /* Tag
-  -------------------------- */
-  --tag-padding: 0 5px;
-  --tag-fill: var(--border-color-hover);
-  --tag-color: var(--color-white);
-  --tag-close-color: #666;
-  --tag-font-size: 12px;
-  --tag-border-radius: 4px;
-
-  --tag-gray-fill: var(--color-light-gray);
-  --tag-gray-border: var(--color-light-gray);
-  --tag-gray-color: var(--link-color);
-
-  --tag-primary-fill: rgba(var(--color-primary),0.10);
-  --tag-primary-border: rgba(var(--color-primary),0.20);
-  --tag-primary-color: var(--color-primary);
-
-  --tag-success-fill: rgba(18,206,102,0.10);
-  --tag-success-border: rgba(18,206,102,0.20);
-  --tag-success-color: var(--color-success);
-
-  --tag-warning-fill: rgba(247,186,41,0.10);
-  --tag-warning-border: rgba(247,186,41,0.20);
-  --tag-warning-color: var(--color-warning);
-
-  --tag-danger-fill: rgba(255,73,73,0.10);
-  --tag-danger-border: rgba(255,73,73,0.20);
-  --tag-danger-color: var(--color-danger);
-
-  /* Dropdown
-  -------------------------- */
-  --dropdown-menu-box-shadow: var(--box-shadow-dark);
-  --dropdown-menuItem-hover-fill: var(--color-light-gray);
-  --dropdown-menuItem-hover-color: var(--link-color);
-
-  /* Badge
-  -------------------------- */
-  --badge-fill: var(--color-danger);
-  --badge-radius: 10px;
-  --badge-font-size: 12px;
-  --badge-padding: 6px;
-  --badge-size: 18px;
-
-  /* Card
-  --------------------------*/
-  --card-border-color: var(--disabled-border-base);
-  --card-border-radius: 4px;
-  --card-padding: 20px;
-
-  /* Slider
-  --------------------------*/
-  --slider-main-background-color: var(--color-primary);
-  --slider-runway-background-color: var(--color-light-gray);
-  --slider-button-hover-color: shade(var(--color-primary), 0.12);
-  --slider-stop-background-color: var(--color-extra-light-silver);
-  --slider-disable-color: var(--color-extra-light-silver);
-
-  --slider-margin: 16px 0;
-  --slider-border-radius: 3px;
-  --slider-height: 4px;
-  --slider-button-size: 12px;
-  --slider-button-wrapper-size: 36px;
-  --slider-button-wrapper-offset: -16px;
-
-  /* Steps
-  --------------------------*/
-  --steps-border-color: var(--disabled-border-base);
-  --steps-border-radius: 4px;
-  --steps-padding: 20px;
-
-  /* Menu
-  --------------------------*/
-  --menu-item-color: var(--link-color);
-  --menu-item-fill: var(--color-extra-light-gray);
-  --menu-item-hover-fill: var(--disabled-border-base);
-
-  --dark-menu-item-color: var(--link-color);
-  --dark-menu-item-fill: var(--color-light-black);
-  --dark-menu-item-hover-fill: var(--link-color);
-
-  /* Rate
-  --------------------------*/
-  --rate-height: 20px;
-  --rate-font-size: var(--font-size-base);
-  --rate-icon-size: 18px;
-  --rate-icon-margin: 6px;
-  --rate-icon-color: var(--color-extra-light-silver);
-
-  /* DatePicker
-  --------------------------*/
-  --datepicker-color: var(--link-color);
-  --datepicker-off-color: #ddd;
-  --datepicker-header-color: var(--border-color-hover);
-  --datepicker-icon-color: var(--color-light-silver);
-  --datepicker-border-color: var(--disabled-border-base);
-  --datepicker-inner-border-color: #e4e4e4;
-  --datepicker-cell-hover-color: var(--color-light-gray);
-  --datepicker-inrange-color: tint(var(--color-primary), 0.8);
-  --datepicker-inrange-hover-color: tint(var(--color-primary), 0.64);
-  --datepicker-active-color: var(--color-primary);
-  --datepicker-text-hover-color: var(--color-primary);
-
-  /* Loading
-  --------------------------*/
-  --loading-spinner-size: 42px;
-  --loading-fullscreen-spinner-size: 50px;
-
-  /* Scrollbar
-  --------------------------*/
-  --scrollbar-background-color: rgba(var(--color-light-silver), .3);
-  --scrollbar-hover-background-color: rgba(var(--color-light-silver), .5);
-
-  /* Carousel
-  --------------------------*/
-  --carousel-arrow-font-size: 12px;
-  --carousel-arrow-size: 36px;
-  --carousel-arrow-background: rgba(31, 45, 61, 0.11);
-  --carousel-arrow-hover-background: rgba(31, 45, 61, 0.23);
-  --carousel-indicator-width: 30px;
-  --carousel-indicator-height: 2px;
-  --carousel-indicator-padding-horizontal: 4px;
-  --carousel-indicator-padding-vertical: 12px;
-  --carousel-indicator-out-color: var(--border-color-hover);
-
-  /* Collapse
-  --------------------------*/
-  --collapse-border-color: color(var(--border-color-base) h(-3) s(27%) l(90%));
-  --collapse-header-height: 43px;
-  --collapse-border-radius: 0;
-  --collapse-header-padding: 20px;
-  --collapse-header-fill: var(--color-white);
-  --collapse-header-color: var(--color-extra-light-black);
-  --collapse-header-size: 13px;
-  --collapse-content-fill: var(--color-dark-white);
-  --collapse-content-size: 13px;
-  --collapse-content-color: var(--color-base-black);
-
-  /* Transfer
-  --------------------------*/
-  --transfer-border-color: var(--color-base-gray);
-  --transfer-box-shadow: var(--box-shadow-base);
-  --transfer-panel-width: 200px;
-  --transfer-panel-header-height: 36px;
-  --transfer-panel-header-background: var(--color-dark-white);
-  --transfer-panel-footer-height: 36px;
-  --transfer-panel-body-height: 246px;
-  --transfer-item-height: 32px;
-  --transfer-item-hover-background: var(--color-light-gray);
-  --transfer-filter-height: 22px;
-}
diff --git a/packages/theme-default/src/core/dropdown.css b/packages/theme-default/src/core/dropdown.css
deleted file mode 100644
index 15a045db24..0000000000
--- a/packages/theme-default/src/core/dropdown.css
+++ /dev/null
@@ -1,45 +0,0 @@
-@charset "UTF-8";
-@import "../common/var.css";
-@import "./option.css";
-
-@component-namespace element {
-
-  @b dropdown {
-    background-color: var(--dropdown-fill);
-    border: var(--dropdown-border);
-    border-radius: var(--dropdown-radius);
-    box-shadow: var(--dropdown-shadow);
-    left: 0;
-    list-style-type: none;
-    margin: -var(--dropdown-border-width);
-    margin-top: 5px;
-    min-width: calc(var(--input-width) + 4);
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    z-index: var(--index-normal);
-
-    @e empty {
-      color: var(--dropdown-option-empty-color);
-      font-size: var(--input-font-size);
-      padding: 7px;
-      text-align: center;
-    }
-
-    @e list {
-      margin: 0;
-      max-height: var(--cascader-height);
-      overflow: auto;
-      padding: 0;
-    }
-
-    @e option {
-      max-height: 250px;
-      overflow: auto;
-    }
-
-    &:empty {
-      display: none;
-    }
-  }
-}
diff --git a/packages/theme-default/src/core/input.css b/packages/theme-default/src/core/input.css
deleted file mode 100644
index 1630321ee7..0000000000
--- a/packages/theme-default/src/core/input.css
+++ /dev/null
@@ -1,55 +0,0 @@
-@charset "UTF-8";
-@import "../common/var.css";
-
-@component-namespace element-core {
-
-  @b input {
-    background-color: var(--input-fill);
-    border: var(--input-border);
-    border-radius: var(--input-border-radius);
-    box-sizing: border-box;
-    color: var(--input-color);
-    cursor: text;
-    display: inline-block;
-    font-size: var(--input-font-size);
-    min-height: var(--input-height);
-    min-width: var(--input-width);
-    padding: 2px;
-    position: relative;
-    vertical-align: middle;
-
-    @when disabled {
-      background-color: var(--input-fill-disabled);
-      border-color: inherit;
-      box-shadow: none;
-      color: var(--input-color-disabled);
-      cursor: not-allowed;
-    }
-
-    @when readonly {
-      cursor: pointer;
-    }
-
-    @when multiple {
-      cursor: text;
-    }
-
-    &:hover,
-    &.is-active {
-      border-color: var(--input-focus-border);
-      box-shadow: var(--input-shadow-hover);
-    }
-
-    @e original {
-      background-color: inherit;
-      border: none;
-      box-sizing: border-box;
-      cursor: inherit;
-      height: 100%;
-      line-height: 1.2;
-      outline: none;
-      padding: 5px 7px;
-      width: auto;
-    }
-  }
-}
diff --git a/packages/theme-default/src/core/option.css b/packages/theme-default/src/core/option.css
deleted file mode 100644
index dde0596576..0000000000
--- a/packages/theme-default/src/core/option.css
+++ /dev/null
@@ -1,72 +0,0 @@
-@charset "UTF-8";
-@import "../common/var.css";
-
-@component-namespace element {
-
-  @b option {
-    box-sizing: border-box;
-    color: var(--dropdown-color);
-    cursor: pointer;
-    display: block;
-    font-size: var(--dropdown-font-size);
-    padding: 9px;
-
-    @e remark {
-      color: var(--dropdown-option-pinyin-color);
-      float: right;
-    }
-
-    @m arrow {
-
-      &:not(.is-last)::after {
-        border-left: 1px solid var(--dropdown-border-color);
-        border-top: 1px solid var(--dropdown-border-color);
-        content: " ";
-        height: 4px;
-        margin-top: 6px;
-        position: absolute;
-        right: 12px;
-        transform: rotate(135deg);
-        width: 4px;
-      }
-    }
-
-    @when disabled {
-      background-color: transparent;
-      color: var(--dropdown-option-color-disabled);
-      cursor: not-allowed;
-    }
-
-    &:hover,
-    &.is-hover {
-      background-color: var(--dropdown-option-fill-hover);
-      color: var(--dropdown-option-color-hover);
-    }
-
-    @when selected {
-      background-color: var(--dropdown-option-fill-active);
-      color: var(--dropdown-option-color-active);
-    }
-  }
-
-  @b optiongroup {
-    list-style: none;
-    padding-left: 0;
-
-    & .element-option {
-      padding-left: 21px;
-    }
-
-    @e title {
-      box-sizing: border-box;
-      color: var(--dropdown-group-color);
-      display: inline-block;
-      font-size: var(--dropdown-font-size);
-      padding: 8px;
-
-      &:hover {
-        background-color: inherit;
-      }
-    }
-  }
-}
diff --git a/packages/theme-default/src/core/tag.css b/packages/theme-default/src/core/tag.css
deleted file mode 100644
index 2fc4aabf59..0000000000
--- a/packages/theme-default/src/core/tag.css
+++ /dev/null
@@ -1,29 +0,0 @@
-@charset "UTF-8";
-@import "../common/var.css";
-
-@component-namespace element-core {
-
-  @b tag {
-    background-color: var(--tag-fill);
-    border: 0;
-    border-radius: var(--tag-border-radius);
-    color: var(--tag-color);
-    height: 22px;
-    margin: 1px;
-    outline: 0;
-    padding: 3px 16px 3px 3px;
-    position: relative;
-
-    @e button {
-      color: var(--tag-close-color);
-      cursor: pointer;
-      line-height: 1;
-
-      /* 增大可点击面积 */
-      padding: 5px;
-      position: absolute;
-      right: 0;
-      top: 0;
-    }
-  }
-}
diff --git a/packages/theme-default/src/date-picker.css b/packages/theme-default/src/date-picker.css
deleted file mode 100644
index e4f8e6821d..0000000000
--- a/packages/theme-default/src/date-picker.css
+++ /dev/null
@@ -1,11 +0,0 @@
-@import "./date-picker/date-table.css";
-@import "./date-picker/month-table.css";
-@import "./date-picker/year-table.css";
-@import "./date-picker/time-spinner.css";
-@import "./date-picker/picker.css";
-@import "./date-picker/date-picker.css";
-@import "./date-picker/date-range-picker.css";
-@import "./date-picker/time-range-picker.css";
-@import "./date-picker/time-picker.css";
-@import "./input.css";
-@import "./scrollbar.css";
\ No newline at end of file
diff --git a/packages/theme-default/src/date-picker/date-picker.css b/packages/theme-default/src/date-picker/date-picker.css
deleted file mode 100644
index 9bc4eaa2ec..0000000000
--- a/packages/theme-default/src/date-picker/date-picker.css
+++ /dev/null
@@ -1,86 +0,0 @@
-@import "../common/var.css";
-@import "./picker-panel.css";
-
-@component-namespace el {
-  @b date-picker {
-    min-width: 254px;
-
-    &.has-sidebar.has-time {
-      min-width: 434px;
-    }
-
-    &.has-sidebar {
-      min-width: 370px;
-    }
-
-    &.has-time {
-      min-width: 324px;
-    }
-
-    .el-picker-panel__content {
-      min-width: 224px;
-    }
-
-    table {
-      table-layout: fixed;
-      width: 100%;
-    }
-
-    @e editor-wrap {
-      position: relative;
-      display: table-cell;
-      padding: 0 5px;
-    }
-
-    @e time-header {
-      position: relative;
-      border-bottom: 1px solid var(--datepicker-inner-border-color);
-      font-size: 12px;
-      padding: 8px 5px 5px 5px;
-      display: table;
-      width: 100%;
-      box-sizing: border-box;
-    }
-
-    @e header {
-      margin: 12px;
-      text-align: center;
-    }
-
-    @e header-label {
-      font-size: 14px;
-      padding: 0 5px;
-      line-height: 22px;
-      text-align: center;
-      cursor: pointer;
-
-      &:hover {
-        color: var(--datepicker-text-hover-color);
-      }
-
-      &.active {
-        color: var(--datepicker-active-color);
-      }
-    }
-
-    @e prev-btn {
-      float: left;
-    }
-
-    @e next-btn {
-      float: right;
-    }
-
-    @e time-wrap {
-      padding: 10px;
-      text-align: center;
-    }
-
-    @e time-label {
-      float: left;
-      cursor: pointer;
-      line-height: 30px;
-      margin-left: 10px;
-    }
-  }
-}
diff --git a/packages/theme-default/src/date-picker/date-range-picker.css b/packages/theme-default/src/date-picker/date-range-picker.css
deleted file mode 100644
index ee98fcd42b..0000000000
--- a/packages/theme-default/src/date-picker/date-range-picker.css
+++ /dev/null
@@ -1,112 +0,0 @@
-@import "../common/var.css";
-
-@component-namespace el {
-  @b date-range-picker {
-    min-width: 520px;
-
-    &.has-sidebar.has-time {
-      min-width: 766px;
-    }
-
-    &.has-sidebar {
-      min-width: 620px;
-    }
-
-    &.has-time {
-      min-width: 660px;
-    }
-
-    table {
-      table-layout: fixed;
-      width: 100%;
-    }
-
-    .el-picker-panel__body {
-      min-width: 513px;
-    }
-
-    .el-picker-panel__content {
-      margin: 0;
-    }
-
-    @e header {
-      position: relative;
-      text-align: center;
-      height: 28px;
-
-      button {
-        float: left;
-      }
-
-      div {
-        font-size: 14px;
-        margin-right: 50px;
-      }
-    }
-
-    @e content {
-      float: left;
-      width: 50%;
-      box-sizing: border-box;
-      margin: 0;
-      padding: 16px;
-
-      @when left {
-        border-right: 1px solid var(--datepicker-inner-border-color);
-      }
-
-      @when right {
-        .el-date-range-picker__header {
-          button {
-            float: right;
-          }
-
-          div {
-            margin-left: 50px;
-            margin-right: 50px;
-          }
-        }
-      }
-    }
-
-    @e editors-wrap {
-      box-sizing: border-box;
-      display: table-cell;
-
-      @when right {
-        text-align: right;
-      }
-    }
-
-    @e time-header {
-      position: relative;
-      border-bottom: 1px solid var(--datepicker-inner-border-color);
-      font-size: 12px;
-      padding: 8px 5px 5px 5px;
-      display: table;
-      width: 100%;
-      box-sizing: border-box;
-
-      > .el-icon-arrow-right {
-        font-size: 20px;
-        vertical-align: middle;
-        display: table-cell;
-        color: var(--datepicker-icon-color);
-      }
-    }
-
-    @e time-picker-wrap {
-      position: relative;
-      display: table-cell;
-      padding: 0 5px;
-
-      .el-picker-panel {
-        position: absolute;
-        top: 13px;
-        right: 0;
-        z-index: 1;
-        background: var(--color-white);
-      }
-    }
-  }
-}
diff --git a/packages/theme-default/src/date-picker/date-table.css b/packages/theme-default/src/date-picker/date-table.css
deleted file mode 100644
index c4a12f602b..0000000000
--- a/packages/theme-default/src/date-picker/date-table.css
+++ /dev/null
@@ -1,85 +0,0 @@
-@import "../common/var.css";
-
-@component-namespace el {
-  @b date-table {
-    font-size: 12px;
-    min-width: 224px;
-    user-select: none;
-
-    @when week-mode {
-      .el-date-table__row {
-        &:hover {
-          background-color: var(--datepicker-cell-hover-color);
-        }
-
-        &.current {
-          background-color: var(--datepicker-inrange-color);
-        }
-      }
-    }
-
-    td {
-      width: 32px;
-      height: 32px;
-      box-sizing: border-box;
-      text-align: center;
-      cursor: pointer;
-
-      &.next-month,
-      &.prev-month {
-        color: var(--datepicker-off-color);
-      }
-
-      &.today {
-        color: var(--datepicker-text-hover-color);
-        position: relative;
-        &:before {
-          content: " ";
-          position: absolute;
-          top: 0px;
-          right: 0px;
-          width: 0;
-          height: 0;
-          border-top: 0.5em solid var(--datepicker-active-color);
-          border-left: .5em solid transparent;
-        }
-      }
-
-      &.available:hover {
-        background-color: var(--datepicker-cell-hover-color);
-      }
-
-      &.in-range {
-        background-color: var(--datepicker-inrange-color);
-        &:hover {
-          background-color: var(--datepicker-inrange-hover-color);
-        }
-      }
-
-      &.current:not(.disabled),
-      &.start-date,
-      &.end-date {
-        background-color: var(--datepicker-active-color) !important;
-        color: var(--color-white);
-      }
-
-      &.disabled {
-        background-color: #f4f4f4;
-        opacity: 1;
-        cursor: not-allowed;
-        color: #ccc;
-      }
-
-      &.week {
-        font-size: 80%;
-        color: var(--datepicker-header-color);
-      }
-    }
-
-    th {
-      padding: 5px;
-      color: var(--datepicker-header-color);
-      font-weight: 400;
-    }
-  }
-}
diff --git a/packages/theme-default/src/date-picker/month-table.css b/packages/theme-default/src/date-picker/month-table.css
deleted file mode 100644
index 9aad0e3d5e..0000000000
--- a/packages/theme-default/src/date-picker/month-table.css
+++ /dev/null
@@ -1,38 +0,0 @@
-@import "../common/var.css";
-
-@component-namespace el {
-  @b month-table {
-    font-size: 12px;
-    margin: -1px;
-    border-collapse: collapse;
-
-    td {
-      text-align: center;
-      padding: 20px 3px;
-      cursor: pointer;
-
-      &.disabled .cell {
-        background-color: #f4f4f4;
-        cursor: not-allowed;
-        color: #ccc;
-      }
-
-      .cell {
-        width: 48px;
-        height: 32px;
-        display: block;
-        line-height: 32px;
-        color: var(--datepicker-color);
-
-        &:hover {
-          background-color: var(--datepicker-cell-hover-color);
-        }
-      }
-
-      &.current:not(.disabled) .cell {
-        background-color: var(--datepicker-active-color) !important;
-        color: var(--color-white);
-      }
-    }
-  }
-}
diff --git a/packages/theme-default/src/date-picker/picker-panel.css b/packages/theme-default/src/date-picker/picker-panel.css
deleted file mode 100644
index b49a69eb9d..0000000000
--- a/packages/theme-default/src/date-picker/picker-panel.css
+++ /dev/null
@@ -1,114 +0,0 @@
-@import "../common/var.css";
-
-@component-namespace el {
-  @b picker-panel {
-    color: var(--datepicker-color);
-    border: 1px solid var(--datepicker-border-color);
-    box-shadow: 0 2px 6px #ccc;
-    background: var(--color-white);
-    border-radius: 2px;
-    line-height: 20px;
-    margin: 5px 0;
-
-    @e body, body-wrapper {
-      &::after {
-        content: "";
-        display: table;
-        clear: both;
-      }
-    }
-
-    @e content {
-      position: relative;
-      margin: 15px;
-    }
-
-    @e footer {
-      border-top: 1px solid var(--datepicker-inner-border-color);
-      padding: 4px;
-      text-align: right;
-      background-color: var(--color-white);
-      position: relative;
-    }
-
-    @e shortcut {
-      display: block;
-      width: 100%;
-      border: 0;
-      background-color: transparent;
-      line-height: 28px;
-      font-size: 14px;
-      color: var(--datepicker-color);
-      padding-left: 12px;
-      text-align: left;
-      outline: none;
-      cursor: pointer;
-
-      &:hover {
-        background-color: var(--datepicker-cell-hover-color);
-      }
-
-      &.active {
-        background-color: #e6f1fe;
-        color: var(--datepicker-active-color);
-      }
-    }
-
-    @e btn {
-      border: 1px solid #dcdcdc;
-      color: #333;
-      line-height: 24px;
-      border-radius: 2px;
-      padding: 0 20px;
-      cursor: pointer;
-      background-color: transparent;
-      outline: none;
-      font-size: 12px;
-
-      &[disabled] {
-        color: #cccccc;
-        cursor: not-allowed;
-      }
-    }
-
-    @e icon-btn {
-      font-size: 12px;
-      color: var(--datepicker-icon-color);
-      border: 0;
-      background: transparent;
-      cursor: pointer;
-      outline: none;
-      margin-top: 3px;
-
-      &:hover {
-        color: var(--datepicker-text-hover-color);
-      }
-    }
-
-    @e link-btn {
-      cursor: pointer;
-      color: var(--color-primary);
-      text-decoration: none;
-      padding: 15px;
-      font-size: 12px;
-    }
-  }
-
-  .el-picker-panel *[slot=sidebar],
-  .el-picker-panel__sidebar {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 110px;
-    border-right: 1px solid var(--datepicker-inner-border-color);
-    box-sizing: border-box;
-    padding-top: 6px;
-    background-color: var(--color-dark-white);
-    overflow: auto;
-  }
-
-  .el-picker-panel *[slot=sidebar] + .el-picker-panel__body,
-  .el-picker-panel__sidebar + .el-picker-panel__body {
-    margin-left: 110px;
-  }
-}
diff --git a/packages/theme-default/src/date-picker/picker.css b/packages/theme-default/src/date-picker/picker.css
deleted file mode 100644
index 6ada0d0f67..0000000000
--- a/packages/theme-default/src/date-picker/picker.css
+++ /dev/null
@@ -1,35 +0,0 @@
-@import "../common/var.css";
-@import "../common/transition.css";
-
-@component-namespace el {
-  @b date-editor {
-    position: relative;
-    display: inline-block;
-
-    &.el-input {
-      width: 193px;
-    }
-
-    @m daterange {
-      &.el-input {
-        width: 220px;
-      }
-    }
-
-    @m datetimerange {
-      &.el-input {
-        width: 350px;
-      }
-    }
-
-    .el-picker-panel {
-      position: absolute;
-      min-width: 180px;
-      box-sizing: border-box;
-      box-shadow: 0 2px 6px #ccc;
-      background: var(--color-white);
-      z-index: 10;
-      top: 41px;
-    }
-  }
-}
diff --git a/packages/theme-default/src/date-picker/time-picker.css b/packages/theme-default/src/date-picker/time-picker.css
deleted file mode 100644
index d559ac02bf..0000000000
--- a/packages/theme-default/src/date-picker/time-picker.css
+++ /dev/null
@@ -1,87 +0,0 @@
-@import "../common/var.css";
-
-@component-namespace el {
-  @b time-panel {
-    margin: 5px 0;
-    border: solid 1px var(--datepicker-border-color);
-    background-color: var(--color-white);
-    box-shadow: var(--box-shadow-base);
-    border-radius: 2px;
-    position: absolute;
-    width: 180px;
-    left: 0;
-    z-index: var(--index-top);
-    user-select: none;
-
-    @e content {
-      font-size: 0;
-      position: relative;
-      overflow: hidden;
-
-      &::after, &::before {
-        content: ":";
-        top: 50%;
-        color: var(--color-white);
-        position: absolute;
-        font-size: 14px;
-        margin-top: -15px;
-        line-height: 16px;
-        background-color: var(--datepicker-active-color);
-        height: 32px;
-        z-index: -1;
-        left: 0;
-        right: 0;
-        box-sizing: border-box;
-        padding-top: 6px;
-        text-align: left;
-      }
-
-      &::after {
-        left: 50%;
-        margin-left: -2px;
-      }
-
-      &::before {
-        padding-left: 50%;
-        margin-right: -2px;
-      }
-
-      &.has-seconds {
-        &::after {
-          left: calc(100% / 3 * 2);
-        }
-
-        &::before {
-          padding-left: calc(100% / 3);
-        }
-      }
-    }
-
-    @e footer {
-      border-top: 1px solid var(--datepicker-inner-border-color);
-      padding: 4px;
-      height: 36px;
-      line-height: 25px;
-      text-align: right;
-      box-sizing: border-box;
-    }
-
-    @e btn {
-      border: none;
-      line-height: 28px;
-      padding: 0 5px;
-      margin: 0 5px;
-      cursor: pointer;
-      background-color: transparent;
-      outline: none;
-      font-size: 12px;
-      color: var(--color-base-silver);
-
-      &.confirm {
-        font-weight: 800;
-        color: var(--datepicker-active-color);
-      }
-    }
-
-  }
-}
diff --git a/packages/theme-default/src/date-picker/time-range-picker.css b/packages/theme-default/src/date-picker/time-range-picker.css
deleted file mode 100644
index a0795a79bc..0000000000
--- a/packages/theme-default/src/date-picker/time-range-picker.css
+++ /dev/null
@@ -1,33 +0,0 @@
-@import "../common/var.css";
-
-@component-namespace el {
-  @b time-range-picker {
-    min-width: 354px;
-    overflow: visible;
-
-    @e content {
-      position: relative;
-      text-align: center;
-      padding: 10px;
-    }
-
-    @e cell {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 4px 7px 7px;
-      width: 50%;
-      display: inline-block;
-    }
-
-    @e header {
-      margin-bottom: 5px;
-      text-align: center;
-      font-size: 14px;
-    }
-
-    @e body {
-      border-radius:2px;
-      border: 1px solid var(--datepicker-border-color);
-    }
-  }
-}
diff --git a/packages/theme-default/src/date-picker/time-spinner.css b/packages/theme-default/src/date-picker/time-spinner.css
deleted file mode 100644
index ab0421e139..0000000000
--- a/packages/theme-default/src/date-picker/time-spinner.css
+++ /dev/null
@@ -1,63 +0,0 @@
-@import "../common/var.css";
-
-@component-namespace el {
-  @b time-spinner {
-    &.has-seconds {
-      .el-time-spinner__wrapper {
-        width: 33%;
-      }
-
-      .el-time-spinner__wrapper:nth-child(2) {
-        margin-left: 1%;
-      }
-    }
-
-    @e wrapper {
-      max-height: 190px;
-      overflow: auto;
-      display: inline-block;
-      width: 50%;
-      vertical-align: top;
-      position: relative;
-
-      & .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
-        padding-bottom: 15px;
-      }
-    }
-
-    @e list {
-      padding: 0;
-      margin: 0;
-      list-style: none;
-      text-align: center;
-
-      &::after,
-      &::before {
-        content: '';
-        display: block;
-        width: 100%;
-        height: 80px;
-      }
-    }
-
-    @e item {
-      height: 32px;
-      line-height: 32px;
-      font-size: 12px;
-
-      &:hover:not(.disabled):not(.active) {
-        background: var(--datepicker-cell-hover-color);
-        cursor: pointer;
-      }
-
-      &.active:not(.disabled) {
-        color: var(--color-white);
-      }
-
-      &.disabled {
-        color: var(--datepicker-border-color);
-        cursor: not-allowed;
-      }
-    }
-  }
-}
diff --git a/packages/theme-default/src/date-picker/year-table.css b/packages/theme-default/src/date-picker/year-table.css
deleted file mode 100644
index fba2ae1fb6..0000000000
--- a/packages/theme-default/src/date-picker/year-table.css
+++ /dev/null
@@ -1,42 +0,0 @@
-@import "../common/var.css";
-
-@component-namespace el {
-  @b year-table {
-    font-size: 12px;
-    margin: -1px;
-    border-collapse: collapse;
-
-    .el-icon {
-      color: var(--datepicker-icon-color);
-    }
-
-    td {
-      text-align: center;
-      padding: 20px 3px;
-      cursor: pointer;
-
-      &.disabled .cell {
-        background-color: #f4f4f4;
-        cursor: not-allowed;
-        color: #ccc;
-      }
-
-      .cell {
-        width: 48px;
-        height: 32px;
-        display: block;
-        line-height: 32px;
-        color: var(--datepicker-color);
-
-        &:hover {
-          background-color: var(--datepicker-cell-hover-color);
-        }
-      }
-
-      &.current:not(.disabled) .cell {
-        background-color: var(--datepicker-active-color) !important;
-        color: var(--color-white);
-      }
-    }
-  }
-}
diff --git a/packages/theme-default/src/dialog.css b/packages/theme-default/src/dialog.css
deleted file mode 100755
index fe17e0b8cc..0000000000
--- a/packages/theme-default/src/dialog.css
+++ /dev/null
@@ -1,115 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-@import "./common/popup.css";
-
-@component-namespace el {
-
-  @b dialog {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    background: var(--color-white);
-    border-radius: var(--border-radius-small);
-    box-shadow: var(--dialog-box-shadow);
-    box-sizing: border-box;
-    margin-bottom: 50px;
-
-    @modifier tiny {
-      width: var(--dialog-tiny-width);
-    }
-
-    @modifier small {
-      width: var(--dialog-small-width);
-    }
-
-    @modifier large {
-      width: var(--dialog-large-width);
-    }
-
-    @modifier full {
-      width: 100%;
-      top: 0;
-      margin-bottom: 0;
-      height: 100%;
-      overflow: auto;
-    }
-
-    @e wrapper {
-      position: fixed 0 0 0 0;
-      overflow: auto;
-      margin: 0;
-    }
-
-    @e header {
-      padding: 20px 20px 0;
-    }
-
-    @e headerbtn {
-      float: right;
-      background: transparent;
-      border: none;
-      outline: none;
-      padding: 0;
-      cursor: pointer;
-
-      .el-dialog__close {
-        color: var(--dialog-close-color);
-      }
-      
-      &:focus, &:hover {
-        .el-dialog__close {
-          color: var(--dialog-close-hover-color);
-        }
-      }
-    }
-
-    @e title {
-      line-height: 1;
-      font-size: var(--dialog-title-font-size);
-      font-weight: bold;
-      color: var(--color-base-black);
-    }
-
-    @e body {
-      padding: 30px 20px;
-      color: var(--color-extra-light-black);
-      font-size: var(--dialog-font-size);
-    }
-
-    @e footer {
-      padding: 10px 20px 15px;
-      text-align: right;
-      box-sizing: border-box;
-    }
-  }
-
-  .dialog-fade-enter-active {
-    animation: dialog-fade-in .3s;
-  }
-
-  .dialog-fade-leave-active {
-    animation: dialog-fade-out .3s;
-  }
-
-  @keyframes dialog-fade-in {
-    0% {
-      transform: translate3d(0, -20px, 0);
-      opacity: 0;
-    }
-    100% {
-      transform: translate3d(0, 0, 0);
-      opacity: 1;
-    }
-  }
-
-  @keyframes dialog-fade-out {
-    0% {
-      transform: translate3d(0, 0, 0);
-      opacity: 1;
-    }
-    100% {
-      transform: translate3d(0, -20px, 0);
-      opacity: 0;
-    }
-  }
-}
diff --git a/packages/theme-default/src/dropdown.css b/packages/theme-default/src/dropdown.css
deleted file mode 100644
index 796cca7d4e..0000000000
--- a/packages/theme-default/src/dropdown.css
+++ /dev/null
@@ -1,74 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-@import "./button.css";
-
-@component-namespace el {
-  @b dropdown {
-    display: inline-block;
-    position: relative;
-    color: var(--color-extra-light-black);
-    font-size: var(--font-size-base);
-
-    .el-button-group {
-      display: block;
-      .el-button {
-        float: none;
-      }
-    }
-
-    & .el-dropdown__caret-button {
-      padding: * 5px;
-
-      & .el-dropdown__icon {
-        padding-left: 0;
-      }
-    }
-    @e icon {
-      font-size: 12px;
-      margin: 0 3px;
-    }
-  }
-  @b dropdown-menu {
-    margin: 5px 0;
-    background-color: var(--color-white);
-    border: 1px solid var(--color-base-gray);
-    box-shadow: var(--dropdown-menu-box-shadow);
-    padding: 6px 0;
-    z-index: 10;
-    position: absolute;
-    top: 0;
-    left: 0;
-    min-width: 100px;
-
-    @e item {
-      list-style: none;
-      line-height: 36px;
-      padding: 0 10px;
-      margin: 0;
-      cursor: pointer;
-
-      &:not(.is-disabled):hover {
-        background-color: var(--dropdown-menuItem-hover-fill);
-        color: var(--dropdown-menuItem-hover-color);
-      }
-      @m divided {
-        position: relative;
-        margin-top: 6px;
-        border-top: 1px solid var(--color-base-gray);
-
-        &:before {
-          content: '';
-          height: 6px;
-          display: block;
-          margin: 0 -10px;
-          background-color: var(--color-white);
-        }
-      }
-      @when disabled {
-        cursor: default;
-        color: var(--color-extra-light-silver);
-        pointer-events: none;
-      }
-    }
-  }
-}
diff --git a/packages/theme-default/src/fonts/element-icons.ttf b/packages/theme-default/src/fonts/element-icons.ttf
deleted file mode 100644
index 9c1b720057..0000000000
Binary files a/packages/theme-default/src/fonts/element-icons.ttf and /dev/null differ
diff --git a/packages/theme-default/src/fonts/element-icons.woff b/packages/theme-default/src/fonts/element-icons.woff
deleted file mode 100644
index 2bbd019f86..0000000000
Binary files a/packages/theme-default/src/fonts/element-icons.woff and /dev/null differ
diff --git a/packages/theme-default/src/form.css b/packages/theme-default/src/form.css
deleted file mode 100644
index 285d51a3e3..0000000000
--- a/packages/theme-default/src/form.css
+++ /dev/null
@@ -1,93 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-  @b form {
-    @m label-left {
-      & .el-form-item__label {
-        text-align: left;
-      }
-    }
-    @m label-top {
-      & .el-form-item__label {
-        float: none;
-        display: inline-block;
-        text-align: left;
-        padding: 0 0 10px 0;
-      }
-    }
-    @m inline {
-      & .el-form-item {
-        display: inline-block;
-        margin-right: 10px;
-        vertical-align: top;
-      }
-      & .el-form-item__label {
-        float: none;
-        display: inline-block;
-      }
-      & .el-form-item__content {
-        display: inline-block;
-        vertical-align: top;
-      }
-      &.el-form--label-top .el-form-item__content {
-        display: block;
-      }
-    }
-  }
-  @b form-item {
-    margin-bottom: 22px;
-    @utils-clearfix;
-
-    & .el-form-item {
-      margin-bottom: 0;
-    }
-
-    @e label {
-      text-align: right;
-      vertical-align: middle;
-      float: left;
-      font-size: 14px;
-      color: var(--color-extra-light-black);
-      line-height: 1;
-      padding: 11px 12px 11px 0;
-      box-sizing: border-box;
-    }
-    @e content {
-      line-height: 36px;
-      position: relative;
-      font-size: 14px;
-      @utils-clearfix;
-    }
-    @e error {
-      color: var(--color-danger);
-      font-size: 12px;
-      line-height: 1;
-      padding-top: 4px;
-      position: absolute;
-      top: 100%;
-      left: 0;
-    }
-
-    @when required {
-      .el-form-item__label:before {
-        content: '*';
-        color: var(--color-danger);
-        margin-right: 4px;
-      }
-    }
-
-    @when error {
-      & .el-input__inner,
-      & .el-textarea__inner {
-        border-color: var(--color-danger);
-      }
-      & .el-input-group__append,
-      & .el-input-group__prepend, {
-        & .el-input__inner {
-          border-color: transparent;
-        }
-      }
-    }
-  }
-}
diff --git a/packages/theme-default/src/icon.css b/packages/theme-default/src/icon.css
deleted file mode 100644
index 4a43b8b38a..0000000000
--- a/packages/theme-default/src/icon.css
+++ /dev/null
@@ -1,84 +0,0 @@
-@font-face {
-    font-family: 'element-icons';
-    src: url('fonts/element-icons.woff?t=1472440741') format('woff'), /* chrome, firefox */
-      url('fonts/element-icons.ttf?t=1472440741') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-    font-weight: normal;
-    font-style: normal;
-}
-
-[class^="el-icon-"], [class*=" el-icon-"] {
-    /* use !important to prevent issues with browser extensions that change fonts */
-    font-family: 'element-icons' !important;
-    speak: none;
-    font-style: normal;
-    font-weight: normal;
-    font-variant: normal;
-    text-transform: none;
-    line-height: 1;
-    vertical-align: baseline;
-    display: inline-block;
-
-    /* Better Font Rendering =========== */
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-.el-icon-arrow-down:before { content: "\e600"; }
-.el-icon-arrow-left:before { content: "\e601"; }
-.el-icon-arrow-right:before { content: "\e602"; }
-.el-icon-arrow-up:before { content: "\e603"; }
-.el-icon-caret-bottom:before { content: "\e604"; }
-.el-icon-caret-left:before { content: "\e605"; }
-.el-icon-caret-right:before { content: "\e606"; }
-.el-icon-caret-top:before { content: "\e607"; }
-.el-icon-check:before { content: "\e608"; }
-.el-icon-circle-check:before { content: "\e609"; }
-.el-icon-circle-close:before { content: "\e60a"; }
-.el-icon-circle-cross:before { content: "\e60b"; }
-.el-icon-close:before { content: "\e60c"; }
-.el-icon-upload:before { content: "\e60d"; }
-.el-icon-d-arrow-left:before { content: "\e60e"; }
-.el-icon-d-arrow-right:before { content: "\e60f"; }
-.el-icon-d-caret:before { content: "\e610"; }
-.el-icon-date:before { content: "\e611"; }
-.el-icon-delete:before { content: "\e612"; }
-.el-icon-document:before { content: "\e613"; }
-.el-icon-edit:before { content: "\e614"; }
-.el-icon-information:before { content: "\e615"; }
-.el-icon-loading:before { content: "\e616"; }
-.el-icon-menu:before { content: "\e617"; }
-.el-icon-message:before { content: "\e618"; }
-.el-icon-minus:before { content: "\e619"; }
-.el-icon-more:before { content: "\e61a"; }
-.el-icon-picture:before { content: "\e61b"; }
-.el-icon-plus:before { content: "\e61c"; }
-.el-icon-search:before { content: "\e61d"; }
-.el-icon-setting:before { content: "\e61e"; }
-.el-icon-share:before { content: "\e61f"; }
-.el-icon-star-off:before { content: "\e620"; }
-.el-icon-star-on:before { content: "\e621"; }
-.el-icon-time:before { content: "\e622"; }
-.el-icon-warning:before { content: "\e623"; }
-.el-icon-delete2:before { content: "\e624"; }
-.el-icon-upload2:before { content: "\e627"; }
-.el-icon-view:before { content: "\e626"; }
-
-.el-icon-loading {
-  animation: rotating 1s linear infinite;
-}
-
-.el-icon--right {
-  margin-left: 5px;
-}
-.el-icon--left {
-  margin-right: 5px;
-}
-
-@keyframes rotating {
-  0% {
-    transform: rotateZ(0deg);
-  }
-  100% {
-    transform: rotateZ(360deg);
-  }
-}
diff --git a/packages/theme-default/src/index.css b/packages/theme-default/src/index.css
deleted file mode 100644
index d18c11f7a4..0000000000
--- a/packages/theme-default/src/index.css
+++ /dev/null
@@ -1,62 +0,0 @@
-@import "./base.css";
-@import "./pagination.css";
-@import "./dialog.css";
-@import "./autocomplete.css";
-@import "./dropdown.css";
-@import "./dropdown-menu.css";
-@import "./dropdown-item.css";
-@import "./menu.css";
-@import "./submenu.css";
-@import "./menu-item.css";
-@import "./menu-item-group.css";
-@import "./input.css";
-@import "./input-number.css";
-@import "./radio.css";
-@import "./radio-group.css";
-@import "./radio-button.css";
-@import "./checkbox.css";
-@import "./checkbox-button.css";
-@import "./checkbox-group.css";
-@import "./switch.css";
-@import "./select.css";
-@import "./button.css";
-@import "./button-group.css";
-@import "./table.css";
-@import "./table-column.css";
-@import "./date-picker.css";
-@import "./time-select.css";
-@import "./time-picker.css";
-@import "./popover.css";
-@import "./tooltip.css";
-@import "./message-box.css";
-@import "./breadcrumb.css";
-@import "./breadcrumb-item.css";
-@import "./form.css";
-@import "./form-item.css";
-@import "./tabs.css";
-@import "./tab-pane.css";
-@import "./tag.css";
-@import "./tree.css";
-@import "./alert.css";
-@import "./notification.css";
-@import "./slider.css";
-@import "./loading.css";
-@import "./row.css";
-@import "./col.css";
-@import "./upload.css";
-@import "./progress.css";
-@import "./spinner.css";
-@import "./message.css";
-@import "./badge.css";
-@import "./card.css";
-@import "./rate.css";
-@import "./steps.css";
-@import "./step.css";
-@import "./carousel.css";
-@import "./scrollbar.css";
-@import "./carousel-item.css";
-@import "./collapse.css";
-@import "./collapse-item.css";
-@import "./cascader.css";
-@import "./color-picker.css";
-@import "./transfer.css";
diff --git a/packages/theme-default/src/input-number.css b/packages/theme-default/src/input-number.css
deleted file mode 100644
index bb71e74adb..0000000000
--- a/packages/theme-default/src/input-number.css
+++ /dev/null
@@ -1,98 +0,0 @@
-@charset "UTF-8";
-@import "./input.css";
-@import "./common/var.css";
-
-@component-namespace el {
-  @b input-number {
-    display: inline-block;
-    width: 180px;
-    position: relative;
-    
-    & .el-input {
-      display: block;
-    }
-    & .el-input__inner {
-      appearance: none;
-      padding-right: calc(var(--input-height) * 2 + 10);
-    }
-    @e increase, decrease {
-      height: auto;
-      border-left: var(--border-base);
-      width: var(--input-height);
-      line-height: calc(var(--input-height) - 2);
-      top: 1px;
-      text-align: center;
-      color: var(--color-light-silver);
-      cursor: pointer;
-      position: absolute;
-      z-index: 1;
-
-      &:hover {
-        color: var(--color-primary);
-
-        &:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
-          border-color: var(--input-focus-border);
-        }
-      }
-
-      @when disabled {
-        color: var(--disabled-border-base);
-        cursor: not-allowed;
-      }
-    }
-
-    @e increase {
-      right: 0;
-    }
-    @e decrease {
-      right: calc(var(--input-height) + 1px);
-    }
-
-    @when disabled {
-      & .el-input-number__increase, .el-input-number__decrease {
-        border-color: var(--disabled-border-base);
-        color: var(--disabled-border-base);
-
-        &:hover {
-          color: var(--disabled-border-base);
-          cursor: not-allowed;
-        }
-      }
-    }
-    @m large {
-      width: 200px;
-
-      & .el-input-number__increase, .el-input-number__decrease {
-        line-height: var(--input-large-height);
-        width: var(--input-large-height);
-        font-size: var(--input-large-font-size);
-      }
-      & .el-input-number__decrease {
-        right: calc(var(--input-large-height) + 1px);
-      }
-      & .el-input__inner {
-        padding-right: calc(var(--input-large-height) * 2 + 10);
-      }
-    }
-    @m small {
-      width: 130px;
-
-      & .el-input-number__increase, .el-input-number__decrease {
-        line-height: var(--input-small-height);
-        width: var(--input-small-height);
-        font-size: var(--input-small-font-size);
-      }
-      & .el-input-number__decrease {
-        right: calc(var(--input-small-height) + 1px);
-      }
-      & .el-input__inner {
-        padding-right: calc(var(--input-small-height) * 2 + 10);
-      }
-    }
-    @when without-controls {
-      & .el-input__inner {
-        padding-right: 10px;
-      }
-    }
-  }
-}
diff --git a/packages/theme-default/src/input.css b/packages/theme-default/src/input.css
deleted file mode 100644
index 052707aaad..0000000000
--- a/packages/theme-default/src/input.css
+++ /dev/null
@@ -1,232 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-  @b input {
-    position: relative;
-    font-size: var(--font-size-base);
-    display: inline-block;
-    width: 100%;
-
-    @e inner {
-      appearance: none;
-      background-color: var(--input-fill);
-      background-image: none;
-      border-radius: var(--input-border-radius);
-      border: var(--input-border);
-      box-sizing: border-box;
-      color: var(--input-color);
-      display: inline-block;
-      font-size: inherit;
-      height: var(--input-height);
-      line-height: 1;
-      outline: none;
-      padding: 3px 10px;
-      transition: var(--border-transition-base);
-      width: 100%;
-
-      &::placeholder {
-        color: var(--input-placeholder-color);
-      }
-
-      &:hover {
-        border-color: var(--input-hover-border);
-      }
-
-      &:focus {
-        outline: none;
-        border-color: var(--input-focus-border);
-      }
-    }
-
-    @e icon {
-      position: absolute;
-      width: 35px;
-      height: 100%;
-      right: 0;
-      top: 0;
-      text-align: center;
-      color: var(--input-icon-color);
-      transition: all .3s;
-
-      &:after {
-        content: '';
-        height: 100%;
-        width: 0;
-        display: inline-block;
-        vertical-align: middle;
-      }
-
-      & + .el-input__inner {
-        padding-right: 35px;
-      }
-
-      @when clickable {
-        &:hover {
-          cursor: pointer;
-          color: var(--input-hover-border);
-
-          & + .el-input__inner {
-            border-color: var(--input-hover-border);
-          }
-        }
-      }
-    }
-
-    @when active {
-      .el-input__inner {
-        outline: none;
-        border-color: var(--input-focus-border);
-      }
-    }
-
-    @when disabled {
-      .el-input__inner {
-        background-color: var(--input-disabled-fill);
-        border-color: var(--input-disabled-border);
-        color: var(--input-disabled-color);
-        cursor: not-allowed;
-
-        &::placeholder {
-          color: var(--input-disabled-placeholder-color);
-        }
-      }
-    }
-    @m large {
-      font-size: var(--input-large-font-size);
-
-      & .el-input__inner {
-        height: var(--input-large-height);
-      }
-    }
-    @m small {
-      font-size: var(--input-small-font-size);
-
-      & .el-input__inner {
-        height: var(--input-small-height);
-      }
-    }
-    @m mini {
-      font-size: var(--input-mini-font-size);
-
-      & .el-input__inner {
-        height: var(--input-mini-height);
-      }
-    }
-  }
-
-  @b input-group {
-    line-height: normal;
-    display: inline-table;
-    width: 100%;
-    border-collapse: separate;
-
-    & > .el-input__inner {
-      vertical-align: middle;
-      display: table-cell;
-    }
-    @e append, prepend {
-      background-color: var(--color-dark-white);
-      color: var(--color-light-silver);
-      vertical-align: middle;
-      display: table-cell;
-      position: relative;
-      border: var(--border-base);
-      border-radius: var(--input-border-radius);
-      padding: 0 10px;
-      width: 1px;
-      white-space: nowrap;
-
-      & .el-select,
-      & .el-button {
-        display: block;
-        margin: -10px;
-      }
-
-      & button.el-button,
-      & div.el-select .el-input__inner,
-      & div.el-select:hover .el-input__inner {
-        border-color: transparent;
-        background-color: transparent;
-        color: inherit;
-        border-top: 0;
-        border-bottom: 0;
-      }
-      & .el-button,
-      & .el-input {
-        font-size: inherit;
-      }
-    }
-    @e prepend {
-      border-right: 0;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-    @e append {
-      border-left: 0;
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-
-    @m prepend {
-      .el-input__inner {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-    @m append {
-      .el-input__inner {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-    }
-  }
-
-  @b textarea {
-    display: inline-block;
-    width: 100%;
-    vertical-align: bottom;
-
-    @e inner {
-      display: block;
-      resize: vertical;
-      padding: 5px 7px;
-      line-height: 1.5;
-      box-sizing: border-box;
-      width: 100%;
-      font-size: var(--font-size-base);
-      color: var(--input-color);
-      background-color: var(--input-fill);
-      background-image: none;
-      border: var(--input-border);
-      border-radius: var(--input-border-radius);
-      transition: var(--border-transition-base);
-
-      &::placeholder {
-        color: var(--input-placeholder-color);
-      }
-
-      &:hover {
-        border-color: var(--input-hover-border);
-      }
-
-      &:focus {
-        outline: none;
-        border-color: var(--input-focus-border);
-      }
-    }
-
-    @when disabled {
-      .el-textarea__inner {
-        background-color: var(--input-disabled-fill);
-        border-color: var(--input-disabled-border);
-        color: var(--input-disabled-color);
-        cursor: not-allowed;
-
-        &::placeholder {
-          color: var(--input-disabled-placeholder-color);
-        }
-      }
-    }
-  }
-}
diff --git a/packages/theme-default/src/loading.css b/packages/theme-default/src/loading.css
deleted file mode 100644
index d7b3900e8b..0000000000
--- a/packages/theme-default/src/loading.css
+++ /dev/null
@@ -1,82 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-  @b loading-mask {
-    position: absolute;
-    z-index: 10000;
-    background-color: rgba(255, 255, 255, .9);
-    margin: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    transition: opacity 0.3s;
-
-    @when fullscreen {
-      position: fixed;
-
-      .el-loading-spinner {
-        margin-top: calc(- var(--loading-fullscreen-spinner-size) / 2);
-
-        .circular {
-          size: var(--loading-fullscreen-spinner-size);
-        }
-      }
-    }
-  }
-
-  @b loading-spinner {
-    top: 50%;
-    margin-top: calc(- var(--loading-spinner-size) / 2);
-    width: 100%;
-    text-align: center;
-    position: absolute;
-
-    .el-loading-text {
-      color: var(--color-primary);
-      margin: 3px 0;
-      font-size: 14px;
-    }
-
-    .circular {
-      size: var(--loading-spinner-size);
-      animation: loading-rotate 2s linear infinite;
-    }
-
-    .path {
-      animation: loading-dash 1.5s ease-in-out infinite;
-      stroke-dasharray: 90, 150;
-      stroke-dashoffset: 0;
-      stroke-width: 2;
-      stroke: var(--color-primary);
-      stroke-linecap: round;
-    }
-  }
-}
-
-.el-loading-fade-enter,
-.el-loading-fade-leave-active {
-  opacity: 0;
-}
-
-@keyframes loading-rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes loading-dash {
-  0% {
-    stroke-dasharray: 1, 200;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -40px;
-  }
-  100% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -120px;
-  }
-}
diff --git a/packages/theme-default/src/menu.css b/packages/theme-default/src/menu.css
deleted file mode 100644
index c42e87f306..0000000000
--- a/packages/theme-default/src/menu.css
+++ /dev/null
@@ -1,259 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@define-extend menu-item {
-  height: 56px;
-  line-height: 56px;
-  font-size: 14px;
-  color: var(--menu-item-color);
-  padding: 0 20px;
-  cursor: pointer;
-  position: relative;
-  transition: border-color .3s, background-color .3s, color .3s;
-  box-sizing: border-box;
-  white-space: nowrap;
-}
-
-@component-namespace el {
-  @b menu {
-    border-radius: 2px;
-    list-style: none;
-    position: relative;
-    margin: 0;
-    padding-left: 0;
-    background-color: var(--menu-item-fill);
-    @utils-clearfix;
-
-    & li {
-      list-style: none;
-    }
-
-    @m dark {
-      background-color: var(--dark-menu-item-fill);
-
-      & .el-menu-item,
-      & .el-submenu__title {
-        color: var(--color-extra-light-silver);
-
-        &:hover {
-          background-color: var(--color-extra-light-black);
-        }
-      }
-      
-      & .el-submenu .el-menu {
-        background-color: var(--color-base-black);
-
-        & .el-menu-item:hover {
-          background-color: var(--color-extra-light-black);
-        }
-      }
-    }
-    @m horizontal {
-      & .el-menu-item {
-        float: left;
-        height: 60px;
-        line-height: 60px;
-        margin: 0;
-        cursor: pointer;
-        position: relative;
-        box-sizing: border-box;
-        border-bottom: 5px solid transparent;
-
-        a,
-        a:hover {
-          color: inherit;
-        }
-
-        &:hover {
-          background-color: var(--menu-item-hover-fill);
-        }
-      }
-      & .el-submenu {
-        float: left;
-        position: relative;
-
-        > .el-menu {
-          position: absolute;
-          top: 65px;
-          left: 0;
-          border:1px solid var(--color-base-gray);
-          padding: 5px 0;
-          background-color: var(--color-white);
-          z-index: 100;
-          min-width: 100%;
-          box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.12), 0px 0px 6px 0px rgba(0,0,0,0.04);
-        }
-
-        & .el-submenu__title {
-          height: 60px;
-          line-height: 60px;
-          border-bottom: 5px solid transparent;
-        }
-
-        & .el-menu-item {
-          background-color: var(--color-white);
-          float: none;
-          height: 36px;
-          line-height: 36px;
-          padding: 0 10px;
-        }
-
-        & .el-submenu__icon-arrow {
-          position: static;
-          vertical-align: middle;
-          margin-left: 5px;
-          color: var(--color-light-silver);
-          margin-top: -3px;
-        }
-      }
-      & .el-menu-item:hover,
-      & .el-submenu__title:hover {
-        background-color: var(--menu-item-fill);
-      }
-      & > .el-menu-item:hover,
-      & > .el-submenu:hover .el-submenu__title,
-      & > .el-submenu.is-active .el-submenu__title {
-        border-bottom: 5px solid var(--color-primary);
-      }
-
-      &.el-menu--dark {
-        & .el-menu-item:hover,
-        & .el-submenu__title:hover {
-          background-color: var(--dark-menu-item-fill);
-        }
-
-        & .el-submenu {
-          .el-menu-item,
-          .el-submenu-title {
-            color: var(--color-extra-light-black);
-
-            &:hover {
-              background-color: var(--color-base-gray);
-            }
-          }
-          .el-menu-item.is-active {
-            color: var(--color-primary);
-          }
-        }
-      }
-    }
-    @m collapse {
-      width: 64px;
-
-      > .el-menu-item,
-      > .el-submenu > .el-submenu__title {
-        text-align: center;
-        [class^="el-icon-"] {
-          margin: 0;
-          vertical-align: middle;
-        }
-        .el-submenu__icon-arrow {
-          display: none;
-        }
-        span {
-          height: 0;
-          width: 0;
-          overflow: hidden;
-          visibility: hidden;
-          display: inline-block;
-        }
-      }
-
-      .el-submenu {
-        position: relative;
-        & .el-menu {
-          position: absolute;
-          margin-left: 5px;
-          top: 0;
-          left: 100%;
-          z-index: 10;
-        }
-
-        &.is-opened {
-          > .el-submenu__title .el-submenu__icon-arrow {
-            transform: none;
-          }
-        }
-      }
-    }
-  }
-  @b menu-item {
-    @extend menu-item;
-    
-    & [class^="el-icon-"] {
-      vertical-align: baseline;
-      margin-right: 10px;
-    }
-    &:first-child {
-      margin-left: 0;
-    }
-    &:last-child {
-      margin-right: 0;
-    }
-    &:hover {
-      background-color: var(--color-base-gray);
-    }
-    @when active {
-      color: var(--color-primary);
-    }
-  }
-  
-  @b submenu {
-    @e title {
-      position: relative;
-      @extend menu-item;
-
-      &:hover {
-        background-color: var(--color-base-gray);
-      }
-    }
-    & .el-menu {
-      background-color: var(--color-light-gray);
-    }
-    & .el-menu-item {
-      height: 50px;
-      line-height: 50px;
-      padding: 0 45px;
-      min-width: 200px;
-
-      &:hover {
-        background-color: var(--color-base-gray);
-      }
-    }
-    @e icon-arrow {
-      position: absolute;
-      top: 50%;
-      right: 20px;
-      margin-top: -7px;
-      transition: transform .3s;
-      font-size: 12px;
-    }
-    @when active {
-      .el-submenu__title {
-        border-bottom-color: var(--color-primary);
-      }
-    }
-    @when opened {
-      > .el-submenu__title .el-submenu__icon-arrow {
-        transform: rotateZ(180deg);
-      }
-    }
-    [class^="el-icon-"] {
-      vertical-align: baseline;
-      margin-right: 10px;
-    }
-  }
-
-  @b menu-item-group {
-    > ul {
-      padding: 0;
-    }
-    @e title {
-      padding-top: 15px;
-      line-height: normal;
-      font-size: 14px;
-      padding-left: 20px;
-      color: var(--color-light-silver);
-    }
-  }
-}
diff --git a/packages/theme-default/src/message-box.css b/packages/theme-default/src/message-box.css
deleted file mode 100644
index 7364f88c77..0000000000
--- a/packages/theme-default/src/message-box.css
+++ /dev/null
@@ -1,170 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-@import "./common/popup.css";
-@import "./button.css";
-@import "./input.css";
-
-@component-namespace el {
-
-  @b message-box {
-    text-align: left;
-    display: inline-block;
-    vertical-align: middle;
-    background-color: var(--color-white);
-    width: var(--msgbox-width);
-    border-radius: var(--msgbox-border-radius);
-    font-size: var(--msgbox-font-size);
-    overflow: hidden;
-    backface-visibility: hidden;
-    @e wrapper {
-      position: fixed;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      text-align: center;
-      &::after {
-        content: "";
-        display: inline-block;
-        height: 100%;
-        width: 0;
-        vertical-align: middle;
-      }
-    }
-
-    @e header {
-      position: relative;
-      padding: 20px 20px 0;
-    }
-
-    @e headerbtn {
-      position: absolute;
-      top: 19px;
-      right: 20px;
-      background: transparent;
-      border: none;
-      outline: none;
-      padding: 0;
-      cursor: pointer;
-
-      .el-message-box__close {
-        color: #999;
-      }
-      
-      &:focus, &:hover {
-        .el-message-box__close {
-          color: var(--color-primary);
-        }
-      }
-
-    }
-
-    @e content {
-      padding: 30px 20px;
-      color: var(--msgbox-content-color);
-      font-size: var(--msgbox-content-font-size);
-      position: relative;
-    }
-
-    @e input {
-      padding-top: 15px;
-      & input.invalid {
-        border-color: var(--color-danger);
-        &:focus {
-          border-color: var(--color-danger);
-        }
-      }
-    }
-
-    @e errormsg {
-      color: var(--color-danger);
-      font-size: var(--msgbox-error-font-size);
-      min-height: 18px;
-      margin-top: 2px;
-    }
-
-    @e title {
-      padding-left: 0;
-      margin-bottom: 0;
-      font-size: var(--msgbox-font-size);
-      font-weight: bold;
-      height: 18px;
-      color: #333;
-    }
-
-    @e message {
-      margin: 0;
-
-      & p {
-        margin: 0;
-        line-height: 1.4;
-      }
-    }
-
-    @e btns {
-      padding: 10px 20px 15px;
-      text-align: right;
-
-      & button:nth-child(2) {
-        margin-left: 10px;
-      }
-    }
-
-    @e btns-reverse {
-      flex-direction: row-reverse;
-    }
-
-    @e status {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      font-size: 36px !important;
-
-      &.el-icon-circle-check {
-        color: var(--msgbox-success-color);
-      }
-
-      &.el-icon-information {
-        color: var(--msgbox-info-color);
-      }
-
-      &.el-icon-warning {
-        color: var(--msgbox-warning-color);
-      }
-
-      &.el-icon-circle-cross {
-        color: var(--msgbox-danger-color);
-      }
-    }
-  }
-}
-
-.msgbox-fade-enter-active {
-  animation: msgbox-fade-in .3s;
-}
-
-.msgbox-fade-leave-active {
-  animation: msgbox-fade-out .3s;
-}
-
-@keyframes msgbox-fade-in {
-  0% {
-    transform: translate3d(0, -20px, 0);
-    opacity: 0;
-  }
-  100% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes msgbox-fade-out {
-  0% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-  100% {
-    transform: translate3d(0, -20px, 0);
-    opacity: 0;
-  }
-}
diff --git a/packages/theme-default/src/message.css b/packages/theme-default/src/message.css
deleted file mode 100644
index 60fbf15628..0000000000
--- a/packages/theme-default/src/message.css
+++ /dev/null
@@ -1,86 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-
-  @b message {
-    box-shadow: var(--message-shadow);
-    min-width: var(--message-min-width);
-    padding: var(--message-padding);
-    box-sizing: border-box;
-    border-radius: var(--border-radius-small);
-    position: fixed;
-    left: 50%;
-    top: 20px;
-    transform: translateX(-50%);
-    background-color: var(--color-white);
-    transition: opacity 0.3s, transform .4s;
-    overflow: hidden;
-
-    @e group {
-      margin-left: 38px;
-      position: relative;
-      height: 20px;
-      line-height: 20px;
-      display: flex;
-      align-items: center;
-
-      @when with-icon {
-        margin-left: 0;
-      }
-
-      & p {
-        font-size: var(--font-size-base);
-        margin: 0 34px 0 0;
-        white-space: nowrap;
-        color: var(--message-content-color);
-        text-align: justify;
-      }
-    }
-
-    @e img {
-      size: 40px;
-      position: absolute;
-      left: 0;
-      top: 0;
-    }
-
-    @e icon {
-      vertical-align: middle;
-      margin-right: 8px;
-    }
-
-    @e closeBtn {
-      position: absolute 3px 0 * *;
-      cursor: pointer;
-      color: var(--message-close-color);
-      font-size: var(--font-size-base);
-
-      &:hover {
-        color: var(--message-close-hover-color);
-      }
-    }
-
-    & .el-icon-circle-check {
-      color: var(--message-success-color);
-    }
-
-    & .el-icon-circle-cross {
-      color: var(--message-danger-color);
-    }
-
-    & .el-icon-information {
-      color: var(--message-info-color);
-    }
-
-    & .el-icon-warning {
-      color: var(--message-warning-color);
-    }
-  }
-
-  .el-message-fade-enter,
-  .el-message-fade-leave-active {
-    opacity: 0;
-    transform: translate(-50%, -100%);
-  }
-}
diff --git a/packages/theme-default/src/mixins/_button.css b/packages/theme-default/src/mixins/_button.css
deleted file mode 100644
index 8f065fe0d1..0000000000
--- a/packages/theme-default/src/mixins/_button.css
+++ /dev/null
@@ -1,51 +0,0 @@
-@define-mixin button-variant $color, $background-color, $border-color {
-  color: $color;
-  background-color: $background-color;
-  border-color: $border-color;
-
-  &:hover,
-  &:focus {
-    background: tint($background-color, var(--button-hover-tint-percent));
-    border-color: tint($border-color, var(--button-hover-tint-percent));
-    color: $color;
-  }
-  
-  &:active {
-    background: shade($background-color, var(--button-active-shade-percent));
-    border-color: shade($border-color, var(--button-active-shade-percent));
-    color: $color;
-    outline: none;
-  }
-
-  &.is-active {
-    background: shade($background-color, var(--button-active-shade-percent));
-    border-color: shade($border-color, var(--button-active-shade-percent));
-    color: $color;
-  }
-
-  &.is-plain {
-    background: var(--button-default-fill);
-    border: var(--border-base);
-    color: var(--button-default-color);
-
-    &:hover,
-    &:focus {
-      background: var(--color-white);
-      border-color: $border-color;
-      color: $background-color;
-    }
-    
-    &:active {
-      background: var(--color-white);
-      border-color: shade($border-color, var(--button-active-shade-percent));
-      color: shade($background-color, var(--button-active-shade-percent));
-      outline: none;
-    }
-  }
-}
-
-@define-mixin button-size $padding-vertical, $padding-horizontal, $font-size, $border-radius {
-  padding: $padding-vertical $padding-horizontal;
-  font-size: $font-size;
-  border-radius: $border-radius;
-}
diff --git a/packages/theme-default/src/notification.css b/packages/theme-default/src/notification.css
deleted file mode 100644
index 6e6d4437c7..0000000000
--- a/packages/theme-default/src/notification.css
+++ /dev/null
@@ -1,84 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-
-  @b notification {
-    width: var(--notification-width);
-    padding: var(--notification-padding);
-    box-sizing: border-box;
-    border-radius: var(--border-radius-small);
-    position: fixed;
-    right: 16px;
-    background-color: var(--color-white);
-    box-shadow: var(--notification-shadow);
-    transition: opacity 0.3s, transform .3s, right .3s, top 0.4s;
-    overflow: hidden;
-
-    @e group {
-      margin-left: 0;
-      @when with-icon {
-        margin-left: 55px;
-      }
-    }
-
-    @e title {
-      font-weight: normal;
-      font-size: var(--notification-title-font-size);
-      color: var(--notification-title-color);
-      margin: 0;
-    }
-
-    @e content {
-      font-size: var(--notification-font-size);
-      line-height: 21px;
-      margin: 10px 0 0 0;
-      color: var(--notification-color);
-      text-align: justify;
-    }
-
-    @e icon {
-      size: var(--notification-icon-size);
-      font-size: var(--notification-icon-size);
-      float: left;
-      position: relative;
-      top: 3px;
-    }
-
-    @e closeBtn {
-      position: absolute 20px 20px * *;
-      cursor: pointer;
-      color: var(--notification-close-color);
-      font-size: var(--notification-font-size);
-
-      &:hover {
-        color: var(--notification-close-hover-color);
-      }
-    }
-
-    & .el-icon-circle-check {
-      color: var(--notification-success-color);
-    }
-
-    & .el-icon-circle-cross {
-      color: var(--notification-danger-color);
-    }
-
-    & .el-icon-information {
-      color: var(--notification-info-color);
-    }
-
-    & .el-icon-warning {
-      color: var(--notification-warning-color);
-    }
-  }
-
-  .el-notification-fade-enter {
-    transform: translateX(100%);
-    right: 0;
-  }
-
-  .el-notification-fade-leave-active {
-    opacity: 0;
-  }
-}
diff --git a/packages/theme-default/src/option-group.css b/packages/theme-default/src/option-group.css
deleted file mode 100644
index 9682c160ca..0000000000
--- a/packages/theme-default/src/option-group.css
+++ /dev/null
@@ -1,28 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-
-  @b select-group {
-    margin: 0;
-    padding: 0;
-
-    @e wrap {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-    }
-
-    @e title {
-      padding-left: 10px;
-      font-size: var(--select-group-font-size);
-      color: var(--select-group-color);
-      height: var(--select-group-height);
-      line-height: var(--select-group-height);
-    }
-
-    & .el-select-dropdown__item {
-      padding-left: 20px;
-    }
-  }
-}
diff --git a/packages/theme-default/src/option.css b/packages/theme-default/src/option.css
deleted file mode 100644
index 200bde845d..0000000000
--- a/packages/theme-default/src/option.css
+++ /dev/null
@@ -1,47 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-
-  @b select-dropdown {
-    @e item {
-      font-size: var(--select-font-size);
-      padding: 8px 10px;
-      position: relative;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      color: var(--select-option-color);
-      height: var(--select-option-height);
-      line-height: 1.5;
-      box-sizing: border-box;
-      cursor: pointer;
-
-      @when disabled {
-        color: var(--select-option-disabled-color);
-        cursor: not-allowed;
-
-        &:hover {
-          background-color: var(--color-white);
-        }
-      }
-
-      &.hover, &:hover {
-        background-color: var(--select-option-hover-background);
-      }
-
-      &.selected {
-        color: var(--color-white);
-        background-color: var(--select-option-selected);
-
-        &.hover {
-          background-color: var(--select-option-selected-hover);
-        }
-      }
-
-      & span {
-        line-height: 1.5 !important;
-      }
-    }
-  }
-}
diff --git a/packages/theme-default/src/pagination.css b/packages/theme-default/src/pagination.css
deleted file mode 100644
index 81cdf5fc67..0000000000
--- a/packages/theme-default/src/pagination.css
+++ /dev/null
@@ -1,208 +0,0 @@
-@charset "UTF-8";
-@import "./select.css";
-@import "./common/var.css";
-
-@component-namespace el {
-  @b pagination {
-    white-space: nowrap;
-    padding: 2px 5px;
-    color: var(--pagination-color);
-    @utils-clearfix;
-
-    span,
-    button {
-      display: inline-block;
-      font-size: var(--pagination-font-size);
-      min-width: var(--pagination-button-size);
-      height: var(--pagination-button-size);
-      line-height: var(--pagination-button-size);
-      vertical-align: top;
-      box-sizing: border-box;
-    }
-
-    .el-select .el-input {
-      width: 110px;
-      input {
-        padding-right: 25px;
-        border-radius: var(--border-radius-small);
-        height: 28px;
-      }
-    }
-
-    button {
-      border: none;
-      padding: 0 6px;
-      background: transparent;
-
-      &:focus {
-        outline: none;
-      }
-
-      &:hover {
-        color: var(--pagination-hover-fill);
-      }
-
-      &.disabled {
-        color: var(--pagination-button-disabled-color);
-        background-color: var(--pagination-button-disabled-fill);
-        cursor: not-allowed;
-      }
-    }
-
-    .btn-prev,
-    .btn-next {
-      background: center center no-repeat;
-      background-size: 16px;
-      background-color: var(--pagination-fill);
-      border: 1px solid var(--pagination-border-color);
-      cursor: pointer;
-      margin: 0;
-      color: var(--pagination-button-color);
-
-      .el-icon {
-        display: block;
-        font-size: 12px;
-      }
-    }
-
-    .btn-prev {
-      border-radius: var(--pagination-border-radius) 0 0 var(--pagination-border-radius);
-      border-right: 0;
-    }
-
-    .btn-next {
-      border-radius: 0 var(--pagination-border-radius) var(--pagination-border-radius) 0;
-      border-left: 0;
-    }
-
-    @m small {
-      .btn-prev,
-      .btn-next,
-      .el-pager li,
-      .el-pager li:last-child {
-        border-color: transparent;
-        font-size: 12px;
-        line-height: 22px;
-        height: 22px;
-        min-width: 22px;
-      }
-
-      .arrow.disabled {
-        visibility: hidden;
-      }
-
-      .el-pager li {
-        border-radius: var(--pagination-border-radius);
-      }
-    }
-
-    @e sizes {
-      margin: 0 10px 0 0;
-
-      .el-input .el-input__inner {
-        font-size: 13px;
-        border-color: var(--pagination-border-color);
-
-        &:hover {
-          border-color: var(--pagination-hover-fill);
-        }
-      }
-    }
-
-    @e jump {
-      margin-left: 10px;
-    }
-
-    @e total {
-      margin: 0 10px;
-    }
-
-    @e rightwrapper {
-      float: right;
-    }
-
-    @e editor {
-      border: 1px solid var(--pagination-border-color);
-      border-radius: var(--pagination-border-radius);
-      line-height: 18px;
-      padding: 4px 2px;
-      width: 30px;
-      text-align: center;
-      margin: 0 6px;
-      box-sizing: border-box;
-      transition: border .3s;
-
-      &::-webkit-inner-spin-button,
-      &::-webkit-outer-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-      }
-
-      &:focus {
-        outline: none;
-        border-color: var(--pagination-hover-fill);
-      };
-    }
-  }
-
-  @b pager {
-    user-select: none;
-    list-style: none;
-    display: inline-block;
-    vertical-align: top;
-    font-size: 0;
-    padding: 0;
-    margin: 0;
-
-    li {
-      padding: 0 4px;
-      border: 1px solid var(--pagination-border-color);
-      border-right: 0;
-      background: var(--pagination-fill);
-      vertical-align: top;
-      display: inline-block;
-      font-size: var(--pagination-font-size);
-      min-width: var(--pagination-button-size);
-      height: var(--pagination-button-size);
-      line-height: var(--pagination-button-size);
-      cursor: pointer;
-      box-sizing: border-box;
-      text-align: center;
-      margin: 0;
-
-      &:last-child {
-        border-right: 1px solid var(--pagination-border-color);
-      }
-
-      &.btn-quicknext,
-      &.btn-quickprev {
-        line-height: 28px;
-        color: var(--pagination-button-color);
-      }
-
-      &.btn-quickprev:hover {
-        cursor: pointer;
-      }
-
-      &.btn-quicknext:hover {
-        cursor: pointer;
-      }
-
-      &.active + li {
-        border-left: 0;
-        padding-left: 5px;
-      }
-
-      &:hover {
-        color: var(--pagination-hover-fill);
-      }
-
-      &.active {
-        border-color: var(--pagination-hover-fill);
-        background-color: var(--pagination-hover-fill);
-        color: var(--pagination-hover-color);
-        cursor: default;
-      }
-    }
-  }
-}
diff --git a/packages/theme-default/src/popover.css b/packages/theme-default/src/popover.css
deleted file mode 100644
index ff0b99434b..0000000000
--- a/packages/theme-default/src/popover.css
+++ /dev/null
@@ -1,120 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-  @b popover {
-    position: absolute;
-    background: var(--popover-fill);
-    min-width: 150px;
-    border-radius: 2px;
-    border: 1px solid var(--popover-border-color);
-    padding: var(--popover-padding);
-    z-index: var(--index-popper);
-    font-size: var(--popover-font-size);
-    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .12),
-                0px 0px 6px 0px rgba(0, 0, 0, .04);
-
-    .popper__arrow,
-    .popper__arrow::after {
-      position: absolute;
-      display: block;
-      width: 0;
-      height: 0;
-      border-color: transparent;
-      border-style: solid;
-    }
-
-    .popper__arrow {
-      border-width: var(--popover-arrow-size);
-    }
-
-    .popper__arrow::after {
-      content: " ";
-      border-width: var(--popover-arrow-size);
-    }
-
-    &[x-placement^="top"] {
-      margin-bottom: calc(var(--popover-arrow-size) + 6);
-    }
-
-    &[x-placement^="top"] .popper__arrow {
-      bottom: -var(--popover-arrow-size);
-      left: 50%;
-      margin-right: calc(var(--tooltip-arrow-size) / 2);
-      border-top-color: var(--popover-border-color);
-      border-bottom-width: 0;
-
-      &::after {
-        bottom: 1px;
-        margin-left: -var(--popover-arrow-size);
-        border-top-color: var(--popover-fill);
-        border-bottom-width: 0;
-      }
-    }
-
-    &[x-placement^="bottom"] {
-      margin-top: calc(var(--popover-arrow-size) + 6);
-    }
-
-    &[x-placement^="bottom"] .popper__arrow {
-      top: -var(--popover-arrow-size);
-      left: 50%;
-      margin-right: calc(var(--tooltip-arrow-size) / 2);
-      border-top-width: 0;
-      border-bottom-color: var(--popover-border-color);
-
-      &::after {
-        top: 1px;
-        margin-left: -var(--popover-arrow-size);
-        border-top-width: 0;
-        border-bottom-color: var(--popover-fill);
-      }
-    }
-
-    &[x-placement^="right"] {
-      margin-left: calc(var(--popover-arrow-size) + 6);
-    }
-
-    &[x-placement^="right"] .popper__arrow {
-      top: 50%;
-      left: -var(--popover-arrow-size);
-      margin-bottom: calc(var(--tooltip-arrow-size) / 2);
-      border-right-color: var(--popover-border-color);
-      border-left-width: 0;
-
-      &::after {
-        bottom: -var(--popover-arrow-size);
-        left: 1px;
-        border-right-color: var(--popover-fill);
-        border-left-width: 0;
-      }
-    }
-
-    &[x-placement^="left"] {
-      margin-right: calc(var(--popover-arrow-size) + 6);
-    }
-
-    &[x-placement^="left"] .popper__arrow {
-      top: 50%;
-      right: -var(--popover-arrow-size);
-      margin-bottom: calc(var(--tooltip-arrow-size) / 2);
-      border-right-width: 0;
-      border-left-color: var(--popover-border-color);
-
-      &::after {
-        right: 1px;
-        bottom: -var(--popover-arrow-size);
-        margin-left: -var(--popover-arrow-size);
-        border-right-width: 0;
-        border-left-color: var(--popover-fill);
-      }
-    }
-
-    @e title {
-      color: var(--popover-title-color);
-      font-size: var(--popover-title-font-size);
-      line-height: 1;
-      margin-bottom: 9px;
-    }
-  }
-}
diff --git a/packages/theme-default/src/progress.css b/packages/theme-default/src/progress.css
deleted file mode 100644
index 8a0d45d8c9..0000000000
--- a/packages/theme-default/src/progress.css
+++ /dev/null
@@ -1,119 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-  @b progress {
-    position: relative;
-    line-height: 1;
-
-    @e text {
-      font-size:14px;
-      color:var(--color-extra-light-black);
-      display: inline-block;
-      vertical-align: middle;
-      margin-left: 10px;
-      line-height: 1;
-
-      i {
-        vertical-align: middle;
-        display: block;
-      }
-    }
-    @m circle {
-      display: inline-block;
-
-      .el-progress__text {
-        position: absolute;
-        top: 50%;
-        left: 0;
-        width: 100%;
-        text-align: center;
-        margin: 0;
-        transform: translate(0, -50%);
-
-        i {
-          vertical-align: middle;
-          display: inline-block;
-        }
-      }
-    }
-    @m without-text {
-      .el-progress__text {
-        display: none;
-      }
-      .el-progress-bar {
-        padding-right: 0;
-        margin-right: 0;
-        display: block;
-      }
-    }
-    @m text-inside {
-      .el-progress-bar {
-        padding-right: 0;
-        margin-right: 0;
-      }
-    }
-    @when success {
-      .el-progress-bar__inner {
-        background-color: var(--color-success);
-      }
-      .el-progress__text {
-        color: var(--color-success);
-      }
-    }
-    @when exception {
-      .el-progress-bar__inner {
-        background-color: var(--color-danger);
-      }
-      .el-progress__text {
-        color: var(--color-danger);
-      }
-    }
-  }
-  @b progress-bar {
-    padding-right: 50px;
-    display: inline-block;
-    vertical-align: middle;
-    width: 100%;
-    margin-right: -55px;
-    box-sizing: border-box;
-
-    @e outer {
-      height: 6px;
-      border-radius: 100px;
-      background-color: var(--color-light-gray);
-      overflow: hidden;
-      position: relative;
-      vertical-align: middle;
-    }
-    @e inner {
-      position: absolute;
-      left: 0;
-      top: 0;
-      height: 100%;
-      border-radius: 2px 0 0 2px;
-      background-color: var(--color-primary);
-      text-align: right;
-      border-radius: 100px;
-      line-height: 1;
-
-      @utils-vertical-center;
-    }
-    @e innerText {
-      display: inline-block;
-      vertical-align: middle;
-      color: var(--color-white);
-      font-size: 12px;
-      margin: 0 5px;
-    }
-  }
-}
-
-@keyframes progress {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: 32px 0;
-  }
-}
diff --git a/packages/theme-default/src/radio-button.css b/packages/theme-default/src/radio-button.css
deleted file mode 100644
index ec5eec1a09..0000000000
--- a/packages/theme-default/src/radio-button.css
+++ /dev/null
@@ -1,106 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-  @b radio-button {
-    position: relative;
-    display: inline-block;
-
-    @e inner {
-      display: inline-block;
-      line-height: 1;
-      white-space: nowrap;
-      vertical-align: middle;
-      cursor: pointer;
-      background: var(--button-default-fill);
-      border: var(--border-base);
-      border-left: 0;
-      color: var(--button-default-color);
-      -webkit-appearance: none;
-      text-align: center;
-      box-sizing: border-box;
-      outline: none;
-      margin: 0;
-      position: relative;
-      cursor: pointer;
-      transition: var(--all-transition);
-
-      @mixin button-size var(--button-padding-vertical), var(--button-padding-horizontal), var(--button-font-size), 0;
-
-      &:hover {
-        color: var(--color-primary);
-      }
-
-      & [class*="el-icon-"] {
-        line-height: 0.9;
-
-        & + span {
-          margin-left: 5px;
-        }
-      }
-    }
-
-    @e orig-radio {
-      opacity: 0;
-      outline: none;
-      position: absolute;
-      z-index: -1;
-      left: -999px;
-
-      &:checked {
-        & + .el-radio-button__inner {
-          color: var(--radio-button-checked-color);
-          background-color: var(--radio-button-checked-fill);
-          border-color: var(--radio-button-checked-border-color);
-          box-shadow: -1px 0 0 0 var(--radio-button-checked-border-color);
-        }
-      }
-
-      &:disabled {
-        & + .el-radio-button__inner {
-          color: var(--button-disabled-color);
-          cursor: not-allowed;
-          background-image: none;
-          background-color: var(--button-disabled-fill);
-          border-color: var(--button-disabled-border);
-          box-shadow: none;
-        }
-      }
-    }
-
-    &:first-child {
-      .el-radio-button__inner {
-        border-left: var(--border-base);
-        border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
-        box-shadow: none !important;
-      }
-    }
-    &:last-child {
-      .el-radio-button__inner {
-        border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
-      }
-    }
-
-    &:first-child:last-child {
-      .el-radio-button__inner {
-        border-radius: var(--border-radius-base);
-      }
-    }
-    
-    @m large {
-      & .el-radio-button__inner {
-        @mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), 0;
-      }
-    }
-    @m small {
-      & .el-radio-button__inner {
-        @mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), 0;
-      }
-    }
-    @m mini {
-      & .el-radio-button__inner {
-        @mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), 0;
-      }
-    }
-  }
-}
diff --git a/packages/theme-default/src/radio-group.css b/packages/theme-default/src/radio-group.css
deleted file mode 100644
index c322decac7..0000000000
--- a/packages/theme-default/src/radio-group.css
+++ /dev/null
@@ -1,16 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-  @b radio-group {
-    display: inline-block;
-    font-size: 0;
-    line-height: 1;
-    vertical-align: middle;
-
-    & .el-radio {
-      font-size: var(--radio-font-size);
-    }
-
-  }
-}
diff --git a/packages/theme-default/src/radio.css b/packages/theme-default/src/radio.css
deleted file mode 100644
index a2f0315797..0000000000
--- a/packages/theme-default/src/radio.css
+++ /dev/null
@@ -1,116 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-@import './mixins/button';
-
-@component-namespace el {
-  @b radio {
-    color: var(--radio-color);
-    position: relative;
-    cursor: pointer;
-    display: inline-block;
-    white-space: nowrap;
-    @utils-user-select none;
-
-    & + .el-radio {
-      margin-left: 15px;
-    }
-
-    @e input {
-      white-space: nowrap;
-      cursor: pointer;
-      outline: none;
-      display: inline-block;
-      line-height: 1;
-      position: relative;
-      vertical-align: middle;
-
-      @when disabled {
-        .el-radio__inner {
-          background-color: var(--radio-disabled-input-fill);
-          border-color: var(--radio-disabled-input-border-color);
-          cursor: not-allowed;
-
-          &::after {
-            cursor: not-allowed;
-            background-color: var(--radio-disabled-icon-color);
-          }
-
-          & + .el-radio__label {
-            cursor: not-allowed;
-          }
-        }
-        &.is-checked {
-          .el-radio__inner {
-            background-color: var(--radio-disabled-checked-input-fill);
-            border-color: var(--radio-disabled-checked-input-border-color);
-
-            &::after {
-              background-color: var(--radio-disabled-checked-icon-color);
-            }
-          }
-        }
-        & + .el-radio__label {
-          color: var(--disabled-color-base);
-          cursor: not-allowed;
-        }
-      }
-
-      @when checked {
-        .el-radio__inner {
-          border-color: var(--radio-checked-input-border-color);
-          background: var(--radio-checked-icon-color);
-
-          &::after {
-            transform: translate(-50%, -50%) scale(1);
-          }
-        }
-      }
-
-      @when focus {
-        .el-radio__inner {
-          border-color: var(--radio-input-border-color-hover);
-        }
-      }
-    }
-    @e inner {
-      border: var(--radio-input-border);
-      border-radius: var(--radio-input-border-radius);
-      circle: var(--radio-input-width) var(--radio-input-fill);
-      position: relative;
-      cursor: pointer;
-      display: inline-block;
-      box-sizing: border-box;
-
-      &:hover {
-        border-color: var(--radio-input-border-color-hover);
-      }
-
-      &::after {
-        circle: 6px var(--color-white);
-        content: "";
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%) scale(0);
-        transition: transform .15s cubic-bezier(.71,-.46,.88,.6);
-      }
-    }
-
-    @e original {
-      opacity: 0;
-      outline: none;
-      position: absolute;
-      z-index: -1;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      margin: 0;
-    }
-
-    @e label {
-      font-size: var(--radio-font-size);
-      padding-left: 5px;
-    }
-  }
-}
diff --git a/packages/theme-default/src/rate.css b/packages/theme-default/src/rate.css
deleted file mode 100644
index c6cc34d568..0000000000
--- a/packages/theme-default/src/rate.css
+++ /dev/null
@@ -1,48 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-
-  @b rate {
-    height: var(--rate-height);
-    line-height: 1;
-
-    @e item {
-      display: inline-block;
-      position: relative;
-      font-size: 0;
-      vertical-align: middle;
-    }
-
-    @e icon {
-      position: relative;
-      display: inline-block;
-      font-size: var(--rate-icon-size);
-      margin-right: var(--rate-icon-margin);
-      color: var(--rate-icon-color);
-      transition: .3s;
-      &.hover {
-        transform: scale(1.15);
-      }
-
-      .path2 {
-        position: absolute;
-        left: 0;
-        top: 0;
-      }
-    }
-
-    @e decimal {
-      position: absolute;
-      top: 0;
-      left: 0;
-      display: inline-block;
-      overflow: hidden;
-    }
-
-    @e text {
-      font-size: var(--rate-font-size);
-      vertical-align: middle;
-    }
-  }
-}
diff --git a/packages/theme-default/src/row.css b/packages/theme-default/src/row.css
deleted file mode 100644
index 062ab11169..0000000000
--- a/packages/theme-default/src/row.css
+++ /dev/null
@@ -1,39 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-  @b row {
-    position: relative;
-    box-sizing: border-box;
-    @utils-clearfix;
-
-    @m flex {
-      display: flex;
-      &:before,
-      &:after {
-        display: none;
-      }
-
-      @when justify-center {
-        justify-content: center;
-      }
-      @when justify-end {
-        justify-content: flex-end;
-      }
-      @when justify-space-between {
-        justify-content: space-between;
-      }
-      @when justify-space-around {
-        justify-content: space-around;
-      }
-
-      @when align-middle {
-        align-items: center;
-      }
-      @when align-bottom {
-        align-items: flex-end;
-      }
-    }
-
-  }
-}
diff --git a/packages/theme-default/src/scrollbar.css b/packages/theme-default/src/scrollbar.css
deleted file mode 100644
index e4e3a3ca62..0000000000
--- a/packages/theme-default/src/scrollbar.css
+++ /dev/null
@@ -1,71 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-  @b scrollbar {
-    overflow: hidden;
-    position: relative;
-
-    &:hover,
-    &:active,
-    &:focus {
-      .el-scrollbar__bar {
-        opacity: 1;
-        transition: opacity 340ms ease-out;
-      }
-    }
-
-    @e wrap {
-      overflow: scroll;
-
-      @m hidden-default {
-        &::-webkit-scrollbar {
-          width: 0;
-          height: 0;
-        }
-      }
-    }
-
-    @e thumb {
-      position: relative;
-      display: block;
-      size: 0;
-      cursor: pointer;
-      border-radius: inherit;
-      background-color: var(--scrollbar-background-color);
-      transition: .3s background-color;
-
-      &:hover {
-        background-color: var(--scrollbar-hover-background-color);
-      }
-    }
-
-    @e bar {
-      position: absolute;
-      right: 2px;
-      bottom: 2px;
-      z-index: 1;
-      border-radius: 4px;
-      opacity: 0;
-      transition: opacity 120ms ease-out;
-
-      @when vertical {
-        width: 6px;
-        top: 2px;
-
-        > div {
-          width: 100%;
-        }
-      }
-
-      @when horizontal {
-        height: 6px;
-        left: 2px;
-
-        > div {
-          height: 100%;
-        }
-      }
-    }
-  }
-}
diff --git a/packages/theme-default/src/select-dropdown.css b/packages/theme-default/src/select-dropdown.css
deleted file mode 100644
index f9cbd26b47..0000000000
--- a/packages/theme-default/src/select-dropdown.css
+++ /dev/null
@@ -1,60 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-
-  @b select-dropdown {
-    position: absolute;
-    z-index: 1001;
-    border: var(--select-dropdown-border);
-    border-radius: var(--border-radius-small);
-    background-color: var(--select-dropdown-background);
-    box-shadow: var(--select-dropdown-shadow);
-    box-sizing: border-box;
-    margin: 5px 0;
-
-    @when multiple {
-      & .el-select-dropdown__item.selected {
-        color: var(--select-option-selected);
-        background-color: var(--select-dropdown-background);
-
-        &.hover {
-          background-color: var(--select-option-hover-background);
-        }
-
-        &::after {
-          position: absolute;
-          right: 10px;
-          font-family: 'element-icons';
-          content: "\E608";
-          font-size: 11px;
-          -webkit-font-smoothing: antialiased;
-          -moz-osx-font-smoothing: grayscale;
-        }
-      }
-    }
-
-    .el-scrollbar.is-empty .el-select-dropdown__list{
-      padding: 0;
-    }
-  }
-
-  @b select-dropdown__empty {
-    padding: var(--select-dropdown-empty-padding);
-    margin: 0;
-    text-align: center;
-    color: var(--select-dropdown-empty-color);
-    font-size: var(--select-font-size);
-  }
-
-  @b select-dropdown__wrap {
-    max-height: var(--select-dropdown-max-height);
-  }
-
-  @b select-dropdown__list {
-    list-style: none;
-    padding: var(--select-dropdown-padding);
-    margin: 0;
-    box-sizing: border-box;
-  }
-}
diff --git a/packages/theme-default/src/select.css b/packages/theme-default/src/select.css
deleted file mode 100644
index 04d6cd3e4f..0000000000
--- a/packages/theme-default/src/select.css
+++ /dev/null
@@ -1,141 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-@import "./select-dropdown.css";
-@import "./input.css";
-@import "./tag.css";
-@import "./option.css";
-@import "./option-group.css";
-@import "./scrollbar.css";
-
-@component-namespace el {
-
-  @b select {
-    display: inline-block;
-    position: relative;
-
-    &:hover {
-      .el-input__inner {
-        border-color: var(--select-border-color-hover);
-      }
-    }
-
-    & .el-input__inner {
-      cursor: pointer;
-      padding-right: 35px;
-
-      &:focus {
-        border-color: var(--select-input-focus-background);
-      }
-    }
-
-    & .el-input {
-      & .el-input__icon {
-        color: var(--select-input-color);
-        font-size: var(--select-input-font-size);
-        transition: transform .3s;
-        transform: translateY(-50%) rotateZ(180deg);
-        line-height: 16px;
-        top: 50%;
-        cursor: pointer;
-
-        @when reverse {
-          transform: translateY(-50%);
-        }
-
-        @when show-close {
-          transition: 0s;
-          size: 16px;
-          font-size: var(--select-font-size);
-          right: 8px;
-          text-align: center;
-          transform: translateY(-50%) rotateZ(180deg);
-          border-radius: var(--border-radius-circle);
-          color: var(--select-input-color);
-
-          &:hover {
-            color: var(--select-close-hover-color);
-          }
-        }
-      }
-
-      &.is-disabled {
-        & .el-input__inner {
-          cursor: not-allowed;
-
-          &:hover {
-            border-color: var(--select-disabled-border);
-          }
-        }
-      }
-    }
-
-    & > .el-input {
-      display: block;
-    }
-
-    @e input {
-      border: none;
-      outline: none;
-      padding: 0;
-      margin-left: 10px;
-      color: var(--select-multiple-input-color);
-      font-size: var(--select-font-size);
-      vertical-align: baseline;
-      appearance: none;
-      height: 28px;
-      background-color: transparent;
-      @when mini {
-        height: 14px;
-      }
-    }
-
-    @e close {
-      cursor: pointer;
-      position: absolute;
-      top: 8px;
-      z-index: var(--index-top);
-      right: 25px;
-      color: var(--select-input-color);
-      line-height: 18px;
-      font-size: var(--select-input-font-size);
-
-      &:hover {
-        color: var(--select-close-hover-color);
-      }
-    }
-
-    @e tags {
-      position: absolute;
-      line-height: normal;
-      white-space: normal;
-      z-index: var(--index-normal);
-      top: 50%;
-      transform: translateY(-50%);
-    }
-
-    & .el-tag__close {
-      margin-top: -2px;
-    }
-
-    & .el-tag {
-      height: var(--select-tag-height);
-      line-height: var(--select-tag-height);
-      box-sizing: border-box;
-      margin: 3px 0 3px 6px;
-    }
-
-    @e tag {
-      display: inline-block;
-      height: var(--select-tag-height);
-      line-height: var(--select-tag-height);
-      font-size: var(--select-font-size);
-      border-radius: var(--border-radius-base);
-      color: var(--select-tag-color);
-      background-color: var(--select-tag-background);
-
-      & .el-icon-close {
-        font-size: var(--select-input-font-size);
-      }
-    }
-  }
-}
diff --git a/packages/theme-default/src/slider.css b/packages/theme-default/src/slider.css
deleted file mode 100644
index 6d5c5eab32..0000000000
--- a/packages/theme-default/src/slider.css
+++ /dev/null
@@ -1,207 +0,0 @@
-@charset "UTF-8";
-@import "./input-number.css";
-@import "./tooltip.css";
-@import "./common/var.css";
-
-@component-namespace el {
-  @b slider {
-    @utils-clearfix;
-    @e runway {
-      width: 100%;
-      height: var(--slider-height);
-      margin: var(--slider-margin);
-      background-color: var(--slider-runway-background-color);
-      border-radius: var(--slider-border-radius);
-      position: relative;
-      cursor: pointer;
-      vertical-align: middle;
-
-      &.show-input {
-        margin-right: 160px;
-        width: auto;
-      }
-
-      &.disabled {
-        cursor: default;
-
-        .el-slider__bar, .el-slider__button {
-          background-color: var(--slider-disable-color);
-        }
-
-        .el-slider__button-wrapper {
-          &:hover,
-          &.hover {
-            cursor: not-allowed;
-          }
-
-          &.dragging {
-            cursor: not-allowed;
-          }
-        }
-
-        .el-slider__button {
-          &:hover,
-          &.hover,
-          &.dragging {
-            transform: scale(1);
-          }
-
-          &:hover,
-          &.hover {
-            cursor: not-allowed;
-          }
-
-          &.dragging {
-            cursor: not-allowed;
-          }
-        }
-      }
-    }
-
-    @e input {
-      float: right;
-      margin-top: 3px;
-    }
-
-    @e bar {
-      height: var(--slider-height);
-      background-color: var(--slider-main-background-color);
-      border-top-left-radius: var(--slider-border-radius);
-      border-bottom-left-radius: var(--slider-border-radius);
-      position: absolute;
-    }
-
-    @e button-wrapper {
-      size: var(--slider-button-wrapper-size);
-      position: absolute;
-      z-index: 1001;
-      top: var(--slider-button-wrapper-offset);
-      transform: translateX(-50%);
-      background-color: transparent;
-      text-align: center;
-      user-select: none;
-      @utils-vertical-center;
-
-      .el-tooltip {
-        vertical-align: middle;
-        display: inline-block;
-      }
-
-      &:hover,
-      &.hover {
-        cursor: grab;
-      }
-
-      &.dragging {
-        cursor: grabbing;
-      }
-    }
-
-    @e button {
-      size: var(--slider-button-size);
-      background-color: var(--slider-main-background-color);
-      border-radius: 50%;
-      transition: .2s;
-      user-select: none;
-
-      &:hover,
-      &.hover,
-      &.dragging {
-        transform: scale(1.5);
-        background-color: var(--slider-button-hover-color);
-      }
-
-      &:hover,
-      &.hover {
-        cursor: grab;
-      }
-
-      &.dragging {
-        cursor: grabbing;
-      }
-    }
-
-    @e stop {
-      position: absolute;
-      size: var(--slider-height);
-      border-radius: var(--border-radius-circle);
-      background-color: var(--slider-stop-background-color);
-      transform: translateX(-50%);
-    }
-
-    @when vertical {
-      position: relative;
-      .el-slider__runway {
-        width: 4px;
-        height: 100%;
-        margin: 0 16px;
-      }
-      .el-slider__bar {
-        width: 4px;
-        height: auto;
-        border-radius: 0 0 3px 3px;
-      }
-      .el-slider__button-wrapper {
-        top: auto;
-        left: var(--slider-button-wrapper-offset);
-        transform: translateY(50%);
-      }
-      .el-slider__stop {
-        transform: translateY(50%);
-      }
-      &.el-slider--with-input {
-        padding-bottom: calc(var(--input-large-height) + 22px);
-        .el-slider__input {
-          overflow: visible;
-          float: none;
-          position: absolute;
-          bottom: 22px;
-          width: 36px;
-          margin-top: 15px;
-          .el-input__inner {
-            text-align: center;
-            padding-left: 5px;
-            padding-right: 5px;
-          }
-          .el-input-number__decrease,
-          .el-input-number__increase
-          {
-            top: var(--input-small-height);
-            margin-top: -1px;
-            border: var(--input-border);
-            line-height: 20px;
-            box-sizing: border-box;
-            transition: var(--border-transition-base);
-          }
-          .el-input-number__decrease {
-            width: 18px;
-            right: 18px;
-            border-bottom-left-radius: var(--input-border-radius);
-          }
-          .el-input-number__increase {
-            width: 19px;
-            border-bottom-right-radius: var(--input-border-radius);
-            & ~ .el-input .el-input__inner {
-              border-bottom-left-radius: 0;
-              border-bottom-right-radius: 0;
-            }
-          }
-          &:hover {
-            .el-input-number__decrease,
-            .el-input-number__increase
-            {
-              border-color: var(--input-hover-border);
-            }
-          }
-          &:active {
-            .el-input-number__decrease,
-            .el-input-number__increase
-            {
-              border-color: var(--input-focus-border);
-            }
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/packages/theme-default/src/spinner.css b/packages/theme-default/src/spinner.css
deleted file mode 100644
index c8985efe31..0000000000
--- a/packages/theme-default/src/spinner.css
+++ /dev/null
@@ -1,46 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-  @b time-spinner {
-    width: 100%;
-    white-space: nowrap;
-  }
-
-  @b spinner {
-    display: inline-block;
-    vertical-align: middle;
-  }
-  @b spinner-inner {
-    animation: rotate 2s linear infinite;
-    width: 50px;
-    height: 50px;
-
-    & .path {
-      stroke: #ececec;
-      stroke-linecap: round;
-      animation: dash 1.5s ease-in-out infinite;
-    }
-
-  }
-}
-@keyframes rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes dash {
-  0% {
-    stroke-dasharray: 1, 150;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -35;
-  }
-  100% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -124;
-  }
-}
diff --git a/packages/theme-default/src/step.css b/packages/theme-default/src/step.css
deleted file mode 100644
index dc1d433131..0000000000
--- a/packages/theme-default/src/step.css
+++ /dev/null
@@ -1,210 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-  @b step {
-    position: relative;
-    vertical-align: top;
-
-    &:last-child .el-step__main {
-      padding-right: 0;
-    }
-
-    @when horizontal {
-      display: inline-block;
-    }
-
-    @when vertical {
-      & .el-step__head,
-      & .el-step__main {
-        display: inline-block;
-      }
-
-      & .el-step__main {
-        padding-left: 10px;
-      }
-    }
-
-    @e line {
-      display: inline-block;
-      position: absolute;
-      border-color: inherit;
-      background-color: var(--color-extra-light-silver);
-
-      @when icon {
-        @when horizontal {
-          right: 4px;
-        }
-      }
-
-      @when horizontal {
-        top: 15px;
-        height: 2px;
-        left: 32px;
-        right: 0;
-      }
-
-      @when vertical {
-        width: 2px;
-        box-sizing: border-box;
-        top: 32px;
-        bottom: 0;
-        left: 15px;
-      }
-    }
-
-    @e line-inner {
-      display: block;
-      border-width: 1px;
-      border-style: solid;
-      border-color: inherit;
-      transition: all 150ms;
-      box-sizing: border-box;
-      width: 0;
-      height: 0;
-    }
-
-    @e icon {
-      display: block;
-      line-height: 28px;
-
-      > * {
-        line-height: inherit;
-        vertical-align: middle;
-      }
-    }
-
-    @e head {
-      circle: 28px transparent;
-      text-align: center;
-      line-height: 28px;
-      font-size: 28px;
-      vertical-align: top;
-      transition: all 150ms;
-
-      @when text {
-        font-size: 14px;
-        border-width: 2px;
-        border-style: solid;
-
-        @when process {
-          color: var(--color-white);
-          background-color: var(--color-extra-light-silver);
-          border-color: var(--color-extra-light-silver);
-        }
-
-        @when wait {
-          color: var(--color-extra-light-silver);
-          background-color: var(--color-white);
-          border-color: var(--color-extra-light-silver);
-        }
-
-        @when success {
-          color: var(--color-white);
-          background-color: var(--color-success);
-          border-color: var(--color-success);
-        }
-
-        @when error {
-          color: var(--color-white);
-          background-color: var(--color-danger);
-          border-color: var(--color-danger);
-        }
-
-        @when finish {
-          color: var(--color-white);
-          background-color: var(--color-primary);
-          border-color: var(--color-primary);
-        }
-      }
-
-      @when process {
-        color: var(--color-extra-light-silver);
-        border-color: var(--color-extra-light-silver);
-      }
-
-      @when wait {
-        color: var(--color-extra-light-silver);
-        border-color: var(--color-extra-light-silver);
-      }
-
-      @when success {
-        color: var(--color-success);
-        border-color: var(--color-success);
-      }
-
-      @when error {
-        color: var(--color-danger);
-        border-color: var(--color-danger);
-      }
-
-      @when finish {
-        color: var(--color-primary);
-        border-color: var(--color-primary);
-      }
-    }
-
-    @e main {
-      white-space: normal;
-      padding-right: 10px;
-      text-align: left;
-    }
-
-    @e title {
-      font-size: 14px;
-      line-height: 32px;
-      display: inline-block;
-
-      @when process {
-        font-weight: 700;
-        color: var(--color-extra-light-black);
-      }
-
-      @when wait {
-        font-weight: normal;
-        color: var(--color-light-silver);
-      }
-
-      @when success {
-        font-weight: 700;
-        color: var(--color-success);
-      }
-
-      @when error {
-        font-weight: 700;
-        color: var(--color-danger);
-      }
-
-      @when finish {
-        font-weight: 700;
-        color: var(--color-primary);
-      }
-    }
-
-    @e description {
-      font-size: 12px;
-      font-weight: normal;
-      line-height: 14px;
-
-      @when process {
-        color: var(--color-base-silver);
-      }
-
-      @when wait {
-        color: var(--color-extra-light-silver);
-      }
-
-      @when success {
-        color: var(--color-success);
-      }
-
-      @when error {
-        color: var(--color-danger);
-      }
-
-      @when finish {
-        color: var(--color-primary);
-      }
-    }
-  }
-}
diff --git a/packages/theme-default/src/steps.css b/packages/theme-default/src/steps.css
deleted file mode 100644
index 5d30237345..0000000000
--- a/packages/theme-default/src/steps.css
+++ /dev/null
@@ -1,20 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-  @b steps {
-    font-size: 0;
-
-    > :last-child .el-step__line {
-      display: none;
-    }
-
-    @when horizontal {
-      white-space: nowrap;
-
-      @when center {
-        text-align: center;
-      }
-    }
-  }
-}
diff --git a/packages/theme-default/src/switch.css b/packages/theme-default/src/switch.css
deleted file mode 100644
index 19cd971070..0000000000
--- a/packages/theme-default/src/switch.css
+++ /dev/null
@@ -1,117 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-
-  @b switch {
-    display: inline-block;
-    position: relative;
-    font-size: var(--switch-font-size);
-    line-height: var(--switch-height);
-    height: var(--switch-height);
-    vertical-align: middle;
-    @when disabled {
-      & .el-switch__core,
-      & .el-switch__label {
-        cursor: not-allowed;
-      }
-    }
-
-    @e label {
-      transition: .2s;
-      position: absolute;
-      size: var(--switch-width) var(--switch-height);
-      left: 0;
-      top: 0;
-      display: inline-block;
-      font-size: var(--switch-font-size);
-      cursor: pointer;
-      @m left {
-        i {
-          left: 6px;
-        }
-      }
-      @m right {
-        i {
-          right: 6px;
-        }
-      }
-      & * {
-        line-height: 1;
-        top: 4px;
-        position: absolute;
-        font-size: var(--switch-font-size);
-        display: inline-block;
-        color: var(--color-white);
-      }
-    }
-
-    @e input {
-      display: none;
-    }
-
-    @e core {
-      margin: 0;
-      display: inline-block;
-      position: relative;
-      size: var(--switch-width) var(--switch-height);
-      border: 1px solid var(--switch-off-color);
-      outline: none;
-      border-radius: var(--switch-core-border-radius);
-      box-sizing: border-box;
-      background: var(--switch-off-color);
-      cursor: pointer;
-      transition: border-color .3s, background-color .3s;
-
-      & .el-switch__button {
-        position: absolute 0 * * 0;
-        border-radius: var(--border-radius-circle);
-        transition: transform .3s;
-        size: var(--switch-button-size);
-        background-color: var(--color-white);
-      }
-    }
-
-    @when checked {
-      .el-switch__core {
-        border-color: var(--switch-on-color);
-        background-color: var(--switch-on-color);
-      }
-    }
-
-    @when disabled {
-      .el-switch__core {
-        border-color: var(--switch-disabled-color) !important;
-        background: var(--switch-disabled-color) !important;
-
-        & span {
-          background-color: var(--switch-disabled-text-color) !important;
-        }
-
-        & ~ .el-switch__label * {
-          color: var(--switch-disabled-text-color) !important;
-        }
-      }
-    }
-
-    @modifier wide {
-      .el-switch__label {
-        &.el-switch__label--left {
-          span {
-            left: 10px;
-          }
-        }
-        &.el-switch__label--right {
-          span {
-            right: 10px;
-          }
-        }
-      }
-    }
-
-    & .label-fade-enter,
-    & .label-fade-leave-active {
-      opacity: 0;
-    }
-  }
-}
diff --git a/packages/theme-default/src/table-column.css b/packages/theme-default/src/table-column.css
deleted file mode 100644
index 7e4a38c9e5..0000000000
--- a/packages/theme-default/src/table-column.css
+++ /dev/null
@@ -1,92 +0,0 @@
-@charset "UTF-8";
-@import "./checkbox.css";
-@import "./tag.css";
-@import "./common/var.css";
-
-@component-namespace el {
-  @b table-column {
-    @m selection .cell {
-      padding-left: 14px;
-      padding-right: 14px;
-    }
-  }
-
-  @b table-filter {
-    border: solid 1px var(--color-base-gray);
-    border-radius: 2px;
-    background-color: var(--color-white);
-    box-shadow: var(--dropdown-menu-box-shadow);
-    box-sizing: border-box;
-    margin: 2px 0;
-
-    /** used for dropdown mode */
-    @e list {
-      padding: 5px 0;
-      margin: 0;
-      list-style: none;
-      min-width: 100px;
-    }
-
-    @e list-item {
-      line-height: 36px;
-      padding: 0 10px;
-      cursor: pointer;
-      font-size: var(--font-size-base);
-
-      &:hover {
-        background-color: var(--dropdown-menuItem-hover-fill);
-        color: var(--dropdown-menuItem-hover-color);
-      }
-
-      @when active {
-        background-color: var(--color-primary);
-        color: var(--color-white);
-      }
-    }
-
-    @e content {
-      min-width: 100px;
-    }
-
-    @e bottom {
-      border-top: 1px solid var(--color-base-gray);
-      padding: 8px;
-
-      button {
-        background: transparent;
-        border: none;
-        color: var(--color-base-silver);
-        cursor: pointer;
-        font-size: var(--font-size-base);
-        padding: 0 3px;
-
-        &:hover {
-          color: var(--color-primary);
-        }
-
-        &:focus {
-          outline: none;
-        }
-
-        &.is-disabled {
-          color: var(--color-extra-light-silver);
-          cursor: not-allowed;
-        }
-      }
-    }
-
-    @e checkbox-group {
-      padding: 10px;
-
-      label.el-checkbox {
-        display: block;
-        margin-bottom: 8px;
-        margin-left: 5px;
-      }
-
-      .el-checkbox:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/packages/theme-default/src/table.css b/packages/theme-default/src/table.css
deleted file mode 100644
index f651e4c317..0000000000
--- a/packages/theme-default/src/table.css
+++ /dev/null
@@ -1,466 +0,0 @@
-@charset "UTF-8";
-@import "./checkbox.css";
-@import "./tag.css";
-@import "./common/var.css";
-
-@component-namespace el {
-
-  @b table {
-    position: relative;
-    overflow: hidden;
-    box-sizing: border-box;
-    width: 100%;
-    max-width: 100%;
-    background-color: var(--color-white);
-    border: 1px solid var(--table-border-color);
-    font-size: 14px;
-    color: var(--table-text-color);
-
-    &::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      width: 100%;
-      height: 1px;
-      background-color: var(--table-border-color);
-      z-index: 1;
-    }
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 1px;
-      height: 100%;
-      background-color: var(--table-border-color);
-      z-index: 1;
-    }
-
-    .el-tooltip.cell {
-      white-space: nowrap;
-      min-width: 50px;
-    }
-
-    @e empty-block {
-      position: relative;
-      min-height: 60px;
-      text-align: center;
-      width: 100%;
-      height: 100%;
-    }
-
-    @e empty-text {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      color: color(var(--color-primary) s(16%) l(44%));
-    }
-
-    @e expand-column {
-      .cell {
-        padding: 0;
-        text-align: center;
-      }
-    }
-
-    @e expand-icon {
-      position: relative;
-      cursor: pointer;
-      color: #666;
-      font-size: 12px;
-      transition: transform 0.2s ease-in-out;
-      height: 40px;
-
-      @m expanded {
-        transform: rotate(90deg);
-      }
-
-      > .el-icon {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        margin-left: -5px;
-        margin-top: -5px;
-      }
-    }
-
-    @e expanded-cell {
-      padding: 20px 50px;
-      background-color: var(--color-dark-white);
-      box-shadow: inset 0 2px 0 #f4f4f4;
-
-      &:hover {
-        background-color: var(--color-dark-white) !important;
-      }
-    }
-
-    @modifier fit {
-      border-right: 0;
-      border-bottom: 0;
-
-      & th.gutter, td.gutter {
-        border-right-width: 1px;
-      }
-    }
-
-    & th {
-      white-space: nowrap;
-      overflow: hidden;
-    }
-
-    & th, td {
-      height: 40px;
-      min-width: 0;
-      box-sizing: border-box;
-      text-overflow: ellipsis;
-      vertical-align: middle;
-      position: relative;
-
-      @when center {
-        text-align: center;
-      }
-
-      @when left {
-        text-align: left;
-      }
-
-      @when right {
-        text-align: right;
-      }
-    }
-
-    & th.is-leaf, td {
-      border-bottom: 1px solid var(--table-border-color);
-    }
-
-    @modifier border {
-      & th, td {
-        border-right: 1px solid var(--table-border-color);
-      }
-
-      & th {
-        border-bottom: 1px solid var(--table-border-color);
-      }
-    }
-
-    & th {
-      background-color: var(--table-header-background);
-      text-align: left;
-    }
-
-    & th > div {
-      display: inline-block;
-      padding-left: 18px;
-      padding-right: 18px;
-      line-height: 40px;
-      box-sizing: border-box;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    & td > div {
-      box-sizing: border-box;
-    }
-
-    @e fixed, fixed-right {
-      position: absolute;
-      top: 0;
-      left: 0;
-      box-shadow: 1px 0 8px #d3d4d6;
-      overflow-x: hidden;
-
-      &::before {
-        content: '';
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        width: 100%;
-        height: 1px;
-        background-color: var(--table-border-color);
-        z-index: 4;
-      }
-    }
-
-    @e fixed-right-patch {
-      position: absolute;
-      top: -1px;
-      right: 0;
-      background-color: var(--table-header-background);
-      border-bottom: 1px solid var(--table-border-color);
-    }
-
-    @e fixed-right {
-      top: 0;
-      left: auto;
-      right: 0;
-
-      box-shadow: -1px 0 8px #d3d4d6;
-
-      .el-table__fixed-header-wrapper,
-      .el-table__fixed-body-wrapper,
-      .el-table__fixed-footer-wrapper {
-        left: auto;
-        right: 0;
-      }
-    }
-
-    @e fixed-header-wrapper {
-      position: absolute;
-      left: 0;
-      top: 0;
-      z-index: 3;
-
-      & thead div {
-        background-color: var(--table-header-background);
-        color: var(--table-text-color);
-      }
-    }
-
-    @e fixed-footer-wrapper {
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      z-index: 3;
-
-      & tbody td {
-        border-top: 1px solid var(--table-border-color);
-        background-color: var(--table-footer-background);
-        color: var(--table-text-color);
-      }
-    }
-
-    @e fixed-body-wrapper {
-      position: absolute;
-      left: 0;
-      top: 37px;
-      overflow: hidden;
-      z-index: 3;
-    }
-
-    @e header-wrapper, body-wrapper, footer-wrapper {
-      width: 100%;
-    }
-
-    @e footer-wrapper {
-      margin-top: -1px;
-      td {
-        border-top: 1px solid var(--table-border-color);
-      }
-    }
-
-    @e header, body, footer {
-      table-layout: fixed;
-    }
-
-    @e header-wrapper, footer-wrapper {
-      overflow: hidden;
-
-      & thead div {
-        background-color: var(--table-header-background);
-        color: var(--table-text-color);
-      }
-
-      & tbody td {
-        background-color: var(--table-footer-background);
-        color: var(--table-text-color);
-      }
-    }
-
-    @e body-wrapper {
-      overflow: auto;
-      position: relative;
-    }
-
-    & th.required > div::before {
-      display: inline-block;
-      content: "";
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: #ff4d51;
-      margin-right: 5px;
-      vertical-align: middle;
-    }
-
-    & th > .cell {
-      position: relative;
-      word-wrap: normal;
-      text-overflow: ellipsis;
-      display: inline-block;
-      line-height: 30px;
-      vertical-align: middle;
-      width: 100%;
-      box-sizing: border-box;
-
-      &.highlight {
-        color: var(--color-primary);
-      }
-    }
-
-    & .caret-wrapper {
-      position: relative;
-      cursor: pointer;
-      display: inline-block;
-      vertical-align: middle;
-      margin-left: 5px;
-      margin-top: -2px;
-      width: 16px;
-      height: 30px;
-      overflow: initial;
-    }
-
-    & .sort-caret {
-      display: inline-block;
-      width: 0;
-      height: 0;
-      border: 0;
-      content: "";
-      position: absolute;
-      left: 3px;
-      z-index: 2;
-
-      &.ascending {
-        top: 9px;
-        border-top: none;
-        border-right: 5px solid transparent;
-        border-bottom: 5px solid var(--color-light-silver);
-        border-left: 5px solid transparent;
-      }
-
-      &.descending {
-        bottom: 9px;
-        border-top: 5px solid var(--color-light-silver);
-        border-right: 5px solid transparent;
-        border-bottom: none;
-        border-left: 5px solid transparent;
-      }
-    }
-
-    & .ascending .sort-caret.ascending {
-      border-bottom-color: var(--color-extra-light-black);
-    }
-
-    & .descending .sort-caret.descending {
-      border-top-color: var(--color-extra-light-black);
-    }
-
-    & th.gutter, td.gutter {
-      width: 15px;
-      border-right-width: 0;
-      border-bottom-width: 0;
-      padding: 0;
-    }
-
-    & td.gutter {
-      width: 0;
-    }
-
-    & td.is-hidden, th.is-hidden {
-      > * {
-        visibility: hidden;
-      }
-    }
-
-    & .cell {
-      box-sizing: border-box;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: normal;
-      word-break: break-all;
-      line-height: 24px;
-      padding-left: 18px;
-      padding-right: 18px;
-    }
-
-    & tr input[type="checkbox"] {
-      margin: 0;
-    }
-
-    & tr {
-      background-color: var(--color-white);
-    }
-
-    @modifier striped {
-      & .el-table__body {
-        & tr.el-table__row--striped {
-          td {
-            background: #FAFAFA;
-            background-clip: padding-box;
-          }
-
-          &.current-row td {
-            background: color(var(--color-primary) tint(92%));
-          }
-        }
-      }
-    }
-
-    @e body {
-      tr.hover-row {
-        &, &.el-table__row--striped {
-          &, &.current-row {
-            > td {
-              background-color: var(--color-extra-light-gray);
-            }
-          }
-        }
-      }
-
-      tr.current-row > td {
-        background: color(var(--color-primary) tint(92%));
-      }
-    }
-
-    @e column-resize-proxy {
-      position: absolute;
-      left: 200px;
-      top: 0;
-      bottom: 0;
-      width: 0;
-      border-left: 1px solid var(--table-border-color);
-      z-index: 10;
-    }
-
-    & .hidden-columns {
-      visibility: hidden;
-      position: absolute;
-      z-index: -1;
-    }
-
-    @e column-filter-trigger {
-      display: inline-block;
-      line-height: 34px;
-      margin-left: 5px;
-      cursor: pointer;
-
-      & i {
-        color: var(--color-light-silver);
-      }
-    }
-
-    @modifier enable-row-transition {
-      .el-table__body td {
-        transition: background-color .25s ease;
-      }
-    }
-
-    @modifier enable-row-hover {
-      .el-table__body tr:hover > td {
-        background-color: var(--color-extra-light-gray);
-        background-clip: padding-box;
-      }
-    }
-
-    @modifier fluid-height {
-      .el-table__fixed,
-      .el-table__fixed-right {
-        bottom: 0;
-        overflow: hidden;
-      }
-    }
-  }
-}
diff --git a/packages/theme-default/src/tabs.css b/packages/theme-default/src/tabs.css
deleted file mode 100644
index 07b73aeded..0000000000
--- a/packages/theme-default/src/tabs.css
+++ /dev/null
@@ -1,289 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-  @b tabs {
-    @e header {
-      border-bottom: 1px solid var(--color-base-gray);
-      padding: 0;
-      position: relative;
-      margin: 0 0 15px;
-    }
-    @e active-bar {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      height: 3px;
-      background-color: var(--color-primary);
-      z-index: 1;
-      transition: transform .3s cubic-bezier(.645,.045,.355,1);
-      list-style: none;
-    }
-    @e new-tab {
-      float: right;
-      border: 1px solid #d3dce6;
-      height: 18px;
-      width: @height;
-      line-height: @height;
-      margin: 12px 0 9px 10px;
-      border-radius: 3px;
-      text-align: center;
-      font-size: 12px;
-      color: #d3dce6;
-      cursor: pointer;
-      transition: all .15s;
-
-      .el-icon-plus {
-        transform: scale(0.8, 0.8);
-      }
-
-      &:hover {
-        color: var(--color-primary);
-      }
-    }
-    @e nav-wrap {
-      overflow: hidden;
-      margin-bottom: -1px;
-      position: relative;
-
-      @when scrollable {
-        padding: 0 15px;
-      }
-    }
-    @e nav-scroll {
-      overflow: hidden;
-    }
-    @e nav-next, nav-prev {
-      position: absolute;
-      cursor: pointer;
-      line-height: 44px;
-      font-size: 12px;
-      color: var(--color-base-silver);
-    }
-    @e nav-next {
-      right: 0;
-    }
-    @e nav-prev {
-      left: 0;
-    }
-    @e nav {
-      white-space: nowrap;
-      position: relative;
-      transition: transform .3s;
-      float: left;
-    }
-    @e item {
-      padding: 0 16px;
-      height: 42px;
-      box-sizing: border-box;
-      line-height: @height;
-      display: inline-block;
-      list-style: none;
-      font-size: 14px;
-      color: var(--color-base-silver);
-      position: relative;
-
-      & .el-icon-close {
-        border-radius: 50%;
-        text-align: center;
-        transition: all .3s cubic-bezier(.645,.045,.355,1);
-        margin-left: 5px;
-        &:before {
-          transform: scale(.7, .7);
-          display: inline-block;
-        }
-
-        &:hover {
-          background-color: var(--color-light-silver);
-          color: var(--color-white);
-        }
-      }
-
-      @when active {
-        color: var(--color-primary);
-      }
-
-      &:hover {
-        color: var(--color-base-black);
-        cursor: pointer;
-      }
-
-      @when disabled {
-        color: var(--disabled-color-base);
-        cursor: default;
-      }
-    }
-    @e content {
-      overflow: hidden;
-      position: relative;
-    }
-    @m card {
-      > .el-tabs__header .el-tabs__active-bar {
-        display: none;
-      }
-      > .el-tabs__header .el-tabs__item .el-icon-close {
-        position: relative;
-        font-size: 12px;
-        width: 0;
-        height: 14px;
-        vertical-align: middle;
-        line-height: 15px;
-        overflow: hidden;
-        top: -1px;
-        right: -2px;
-        transform-origin: 100% 50%;
-      }
-      > .el-tabs__header .el-tabs__item {
-        border: 1px solid transparent;
-        transition: all .3s cubic-bezier(.645,.045,.355,1);
-              
-        &.is-closable {
-          &:hover {
-            padding: * 9px;
-
-            & .el-icon-close {
-              width: 14px;
-            }
-          }
-        }
-        &.is-active {
-          border: 1px solid var(--color-base-gray);
-          border-bottom-color: var(--color-white);
-          border-radius: 4px 4px 0 0;
-
-          &.is-closable {
-            padding: * 16px;
-            
-            .el-icon-close {
-              width: 14px;
-            }
-          }
-        }
-      }
-    }
-    @m border-card {
-      background: var(--color-white);
-      border: 1px solid var(--color-base-gray);
-      box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.12), 0px 0px 6px 0px rgba(0,0,0,0.04);
-
-      >.el-tabs__content {
-        padding: 15px;
-      }
-      >.el-tabs__header {
-        background-color: var(--color-extra-light-gray);
-        margin: 0;
-      }
-      >.el-tabs__header .el-tabs__item {
-        transition: all .3s cubic-bezier(.645,.045,.355,1);
-        border: 1px solid transparent;
-        border-top: 0;
-        margin: * -1px;
-
-        &.is-active {
-          background-color: var(--color-white);
-          border-right-color: var(--color-base-gray);
-          border-left-color: var(--color-base-gray);
-
-          &:first-child {
-            border-left-color: var(--color-base-gray);
-          }
-          &:last-child {
-            border-right-color: var(--color-base-gray);
-          }
-        }
-      }
-    }
-  }
-}
-
-.slideInRight-transition,
-.slideInLeft-transition {
-  display: inline-block;
-}
-.slideInRight-enter {
-  animation: slideInRight-enter .3s;
-}
-.slideInRight-leave {
-  position: absolute;
-  left: 0;
-  right: 0;
-  animation: slideInRight-leave .3s;
-}
-.slideInLeft-enter {
-  animation: slideInLeft-enter .3s;
-}
-.slideInLeft-leave {
-  position: absolute;
-  left: 0;
-  right: 0;
-  animation: slideInLeft-leave .3s;
-}
-
-@keyframes slideInRight-enter {
-  0% {
-    opacity: 0;
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: translateX(100%);
-    transform: translateX(100%)
-  }
-
-  to {
-    opacity: 1;
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: translateX(0);
-    transform: translateX(0)
-  }
-}
-@keyframes slideInRight-leave {
-  0% {
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-    opacity: 1
-  }
-
-  100% {
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: translateX(100%);
-    transform: translateX(100%);
-    opacity: 0
-  }
-}
-@keyframes slideInLeft-enter {
-  0% {
-    opacity: 0;
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: translateX(-100%);
-    transform: translateX(-100%)
-  }
-
-  to {
-    opacity: 1;
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: translateX(0);
-    transform: translateX(0)
-  }
-}
-@keyframes slideInLeft-leave {
-  0% {
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-    opacity: 1
-  }
-
-  100% {
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    -webkit-transform: translateX(-100%);
-    transform: translateX(-100%);
-    opacity: 0
-  }
-}
diff --git a/packages/theme-default/src/tag.css b/packages/theme-default/src/tag.css
deleted file mode 100644
index 1c29d1048f..0000000000
--- a/packages/theme-default/src/tag.css
+++ /dev/null
@@ -1,105 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-
-  @b tag {
-    background-color: var(--tag-fill);
-    display: inline-block;
-    padding: var(--tag-padding);
-    height: 24px;
-    line-height: calc(@height - 2);
-    font-size: var(--tag-font-size);
-    color: var(--tag-color);
-    border-radius: var(--tag-border-radius);
-    box-sizing: border-box;
-    border: 1px solid transparent;
-    white-space: nowrap;
-
-    & .el-icon-close {
-      border-radius: 50%;
-      text-align: center;
-      position: relative;
-      cursor: pointer;
-      font-size: 12px;
-      transform: scale(.75, .75);
-      height: 18px;
-      width: 18px;
-      line-height: 18px;
-      vertical-align: middle;
-      top: -1px;
-      right: -2px;
-
-      &:hover {
-        background-color: var(--color-white);
-        color: var(--tag-fill);
-      }
-    }
-
-    @m gray {
-      background-color: var(--tag-gray-fill);
-      border-color: var(--tag-gray-border);
-      color: var(--tag-gray-color);
-      @when hit {
-        border-color: var(--tag-gray-color);
-      }
-
-      & .el-tag__close:hover {
-        background-color: var(--tag-gray-color);
-        color: var(--color-white);
-      }
-    }
-    @m primary {
-      background-color: var(--tag-primary-fill);
-      border-color: var(--tag-primary-border);
-      color: var(--tag-primary-color);
-      @when hit {
-        border-color: var(--tag-primary-color);
-      }
-
-      & .el-tag__close:hover {
-        background-color: var(--tag-primary-color);
-        color: var(--color-white);
-      }
-    }
-    @m success {
-      background-color: var(--tag-success-fill);
-      border-color: var(--tag-success-border);
-      color: var(--tag-success-color);
-      @when hit {
-        border-color: var(--tag-success-color);
-      }
-
-      & .el-tag__close:hover {
-        background-color: var(--tag-success-color);
-        color: var(--color-white);
-      }
-    }
-    @m warning {
-      background-color: var(--tag-warning-fill);
-      border-color: var(--tag-warning-border);
-      color: var(--tag-warning-color);
-      @when hit {
-        border-color: var(--tag-warning-color);
-      }
-
-      & .el-tag__close:hover {
-        background-color: var(--tag-warning-color);
-        color: var(--color-white);
-      }
-    }
-    @m danger {
-      background-color: var(--tag-danger-fill);
-      border-color: var(--tag-danger-border);
-      color: var(--tag-danger-color);
-      @when hit {
-        border-color: var(--tag-danger-color);
-      }
-
-      & .el-tag__close:hover {
-        background-color: var(--tag-danger-color);
-        color: var(--color-white);
-      }
-    }
-  }
-}
diff --git a/packages/theme-default/src/time-picker.css b/packages/theme-default/src/time-picker.css
deleted file mode 100644
index 357bb8414d..0000000000
--- a/packages/theme-default/src/time-picker.css
+++ /dev/null
@@ -1,5 +0,0 @@
-@import "./date-picker/picker.css";
-@import "./date-picker/time-spinner.css";
-@import "./date-picker/time-picker.css";
-@import "./input.css";
-@import "./scrollbar.css";
diff --git a/packages/theme-default/src/time-select.css b/packages/theme-default/src/time-select.css
deleted file mode 100644
index 701b202075..0000000000
--- a/packages/theme-default/src/time-select.css
+++ /dev/null
@@ -1,38 +0,0 @@
-@import "./date-picker/picker.css";
-@import "./date-picker/date-picker.css";
-@import "./common/var.css";
-@import "./scrollbar.css";
-
-.time-select {
-  margin: 5px 0;
-  min-width: 0;
-}
-
-.time-select .el-picker-panel__content {
-  max-height: 200px;
-  margin: 0;
-}
-
-.time-select-item {
-  padding: 8px 10px;
-  font-size: 14px;
-}
-
-.time-select-item.selected:not(.disabled) {
-  background-color: var(--datepicker-active-color);
-  color: var(--color-white);
-
-  &:hover {
-    background-color: var(--color-primary);
-  }
-}
-
-.time-select-item.disabled {
-  color: var(--datepicker-border-color);
-  cursor: not-allowed;
-}
-
-.time-select-item:hover {
-  background-color: var(--datepicker-cell-hover-color);
-  cursor: pointer;
-}
diff --git a/packages/theme-default/src/tooltip.css b/packages/theme-default/src/tooltip.css
deleted file mode 100644
index de6005153e..0000000000
--- a/packages/theme-default/src/tooltip.css
+++ /dev/null
@@ -1,138 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-  @b tooltip {
-    @e popper {
-      position: absolute;
-      border-radius: 4px;
-      padding: var(--tooltip-padding);
-      z-index: var(--index-popper);
-      font-size: var(--tooltip-font-size);
-      line-height: 1.2;
-
-      .popper__arrow,
-      .popper__arrow::after {
-        position: absolute;
-        display: block;
-        width: 0;
-        height: 0;
-        border-color: transparent;
-        border-style: solid;
-      }
-
-      .popper__arrow {
-        border-width: var(--tooltip-arrow-size);
-      }
-
-      .popper__arrow::after {
-        content: " ";
-        border-width: 5px;
-      }
-
-      &[x-placement^="top"] {
-        margin-bottom: calc(var(--tooltip-arrow-size) + 6px);
-      }
-
-      &[x-placement^="top"] .popper__arrow {
-        bottom: -var(--tooltip-arrow-size);
-        border-top-color: var(--tooltip-border-color);
-        border-bottom-width: 0;
-
-        &::after {
-          bottom: 1px;
-          margin-left: -5px;
-          border-top-color: var(--tooltip-fill);
-          border-bottom-width: 0;
-        }
-      }
-
-      &[x-placement^="bottom"] {
-        margin-top: calc(var(--tooltip-arrow-size) + 6px);
-      }
-
-      &[x-placement^="bottom"] .popper__arrow {
-        top: -var(--tooltip-arrow-size);
-        border-top-width: 0;
-        border-bottom-color: var(--tooltip-border-color);
-
-        &::after {
-          top: 1px;
-          margin-left: -5px;
-          border-top-width: 0;
-          border-bottom-color: var(--tooltip-fill);
-        }
-      }
-
-      &[x-placement^="right"] {
-        margin-left: calc(var(--tooltip-arrow-size) + 6px);
-      }
-
-      &[x-placement^="right"] .popper__arrow {
-        left: -var(--tooltip-arrow-size);
-        border-right-color: var(--tooltip-border-color);
-        border-left-width: 0;
-
-        &::after {
-          bottom: -5px;
-          left: 1px;
-          border-right-color: var(--tooltip-fill);
-          border-left-width: 0;
-        }
-      }
-
-      &[x-placement^="left"] {
-        margin-right: calc(var(--tooltip-arrow-size) + 6px);
-      }
-
-      &[x-placement^="left"] .popper__arrow {
-        right: -var(--tooltip-arrow-size);
-        border-right-width: 0;
-        border-left-color: var(--tooltip-border-color);
-
-        &::after {
-          right: 1px;
-          bottom: -5px;
-          margin-left: -5px;
-          border-right-width: 0;
-          border-left-color: var(--tooltip-fill);
-        }
-      }
-
-      @when dark {
-        background: var(--tooltip-fill);
-        color: var(--tooltip-color);
-      }
-
-      @when light {
-        background: var(--tooltip-color);
-        border: 1px solid var(--tooltip-fill);
-
-        &[x-placement^="top"] .popper__arrow {
-          border-top-color: var(--tooltip-fill);
-          &::after {
-            border-top-color: var(--tooltip-color);
-          }
-        }
-        &[x-placement^="bottom"] .popper__arrow {
-          border-bottom-color: var(--tooltip-fill);
-          &::after {
-            border-bottom-color: var(--tooltip-color);
-          }
-        }
-        &[x-placement^="left"] .popper__arrow {
-          border-left-color: var(--tooltip-fill);
-          &::after {
-            border-left-color: var(--tooltip-color);
-          }
-        }
-        &[x-placement^="right"] .popper__arrow {
-          border-right-color: var(--tooltip-fill);
-          &::after {
-            border-right-color: var(--tooltip-color);
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/packages/theme-default/src/transfer.css b/packages/theme-default/src/transfer.css
deleted file mode 100644
index 13ea6e68e7..0000000000
--- a/packages/theme-default/src/transfer.css
+++ /dev/null
@@ -1,168 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-@import "./input.css";
-@import "./button.css";
-@import "./checkbox.css";
-@import "./checkbox-group.css";
-
-@component-namespace el {
-  @b transfer {
-    font-size: var(--font-size-base);
-
-    @e buttons {
-      display: inline-block;
-      vertical-align: middle;
-      padding: 0 10px;
-
-      .el-button {
-        display: block;
-        margin: 0 auto;
-        padding: 8px 12px;
-
-        &:first-child {
-          margin-bottom: 6px;
-        }
-      }
-
-      .el-button [class*="el-icon-"] + span {
-        margin-left: 0;
-      }
-    }
-  }
-
-  @b transfer-panel {
-    border: 1px solid var(--transfer-border-color);
-    background: var(--color-white);
-    box-shadow: var(--transfer-box-shadow);
-    display: inline-block;
-    vertical-align: middle;
-    width: var(--transfer-panel-width);
-    box-sizing: border-box;
-    position: relative;
-
-    @e body {
-      padding-bottom: var(--transfer-panel-footer-height);
-      height: var(--transfer-panel-body-height);
-    }
-
-    @e list {
-      margin: 0;
-      padding: 6px 0;
-      list-style: none;
-      height: var(--transfer-panel-body-height);
-      overflow: auto;
-      box-sizing: border-box;
-
-      @when filterable {
-        height: calc(var(--transfer-panel-body-height) - var(--transfer-filter-height) - 10px);
-      }
-    }
-
-    @e item {
-      height: var(--transfer-item-height);
-      line-height: var(--transfer-item-height);
-      padding-left: 20px;
-      display: block;
-
-      & + .el-transfer-panel__item {
-        margin-left: 0;
-      }
-
-      &.el-checkbox {
-        color: var(--color-extra-light-black);
-      }
-
-      &:hover {
-        background: var(--transfer-item-hover-background);
-      }
-
-      .el-checkbox__label {
-        width: 100%;
-        @utils-ellipsis;
-        display: block;
-        box-sizing: border-box;
-        padding-left: 28px;
-      }
-
-      .el-checkbox__input {
-        position: absolute;
-        top: 9px;
-      }
-    }
-
-    @e filter {
-      margin-top: 10px;
-      text-align: center;
-      padding: 0 10px;
-      width: 100%;
-      box-sizing: border-box;
-
-      .el-input__inner {
-        height: var(--transfer-filter-height);
-        width: 100%;
-        display: inline-block;
-        box-sizing: border-box;
-      }
-
-      .el-input__icon {
-        right: 10px;
-      }
-
-      .el-icon-circle-close {
-        cursor: pointer;
-      }
-    }
-
-    .el-transfer-panel__header {
-      height: var(--transfer-panel-header-height);
-      line-height: var(--transfer-panel-header-height);
-      background: var(--transfer-panel-header-background);
-      margin: 0;
-      padding-left: 20px;
-      border-bottom: 1px solid var(--transfer-border-color);
-      box-sizing: border-box;
-      color: var(--color-base-black);
-    }
-
-    .el-transfer-panel__footer {
-      height: var(--transfer-panel-footer-height);
-      background: var(--color-white);
-      margin: 0;
-      padding: 0;
-      border-top: 1px solid var(--transfer-border-color);
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      z-index: var(--index-normal);
-      @utils-vertical-center;
-
-      .el-checkbox {
-        padding-left: 20px;
-        color: var(--color-base-silver);
-      }
-    }
-
-    .el-transfer-panel__empty {
-      margin: 0;
-      height: var(--transfer-item-height);
-      line-height: var(--transfer-item-height);
-      padding: 6px 20px 0;
-      color: var(--color-base-silver);
-    }
-
-    .el-checkbox__label {
-      padding-left: 14px;
-    }
-
-    .el-checkbox__inner {
-      size: 14px;
-      border-radius: 3px;
-      &::after {
-        height: 6px;
-        width: 3px;
-        left: 4px;
-      }
-    }
-  }
-}
diff --git a/packages/theme-default/src/tree.css b/packages/theme-default/src/tree.css
deleted file mode 100644
index 940cf7ba76..0000000000
--- a/packages/theme-default/src/tree.css
+++ /dev/null
@@ -1,103 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-
-@component-namespace el {
-  @b tree {
-    cursor: default;
-    background: var(--color-white);
-    border: 1px solid var(--color-base-gray);
-
-    @e empty-block {
-      position: relative;
-      min-height: 60px;
-      text-align: center;
-      width: 100%;
-      height: 100%;
-    }
-
-    @e empty-text {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      color: color(var(--color-primary) s(16%) l(44%));
-    }
-  }
-
-  @b tree-node {
-    white-space: nowrap;
-
-    @e content {
-      line-height: 36px;
-      height: 36px;
-      cursor: pointer;
-
-      & > .el-checkbox,
-      & > .el-tree-node__expand-icon {
-        margin-right: 8px;
-      }
-      & > .el-checkbox {
-        vertical-align: middle;
-      }
-      &:hover {
-        background: var(--color-light-gray);
-      }
-    }
-
-    @e expand-icon {
-      display: inline-block;
-      cursor: pointer;
-      width: 0;
-      height: 0;
-      vertical-align: middle;
-      margin-left: 10px;
-      border: 6px solid transparent;
-      border-right-width: 0;
-      border-left-color: var(--color-light-silver);
-      border-left-width: 7px;
-
-      transform: rotate(0deg);
-      transition: transform 0.3s ease-in-out;
-
-      &:hover {
-        border-left-color: #999;
-      }
-
-      &.expanded {
-        transform: rotate(90deg);
-      }
-
-      &.is-leaf {
-        border-color: transparent;
-        cursor: default;
-      }
-    }
-
-    @e label {
-      font-size: var(--font-size-base);
-      vertical-align: middle;
-      display: inline-block;
-    }
-
-    @e loading-icon {
-      display: inline-block;
-      vertical-align: middle;
-      margin-right: 4px;
-      font-size: var(--font-size-base);
-      color: var(--color-light-silver);
-    }
-
-    & > .el-tree-node__children {
-      overflow: hidden;
-      background-color: transparent;
-    }
-
-    &.is-expanded > .el-tree-node__children {
-      display: block;
-    }
-  }
-}
-
-.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
-  background-color: color(var(--color-primary) tint(92%));
-}
diff --git a/packages/theme-default/src/upload.css b/packages/theme-default/src/upload.css
deleted file mode 100644
index 2d1e147262..0000000000
--- a/packages/theme-default/src/upload.css
+++ /dev/null
@@ -1,532 +0,0 @@
-@charset "UTF-8";
-@import "./progress.css";
-@import "./common/var.css";
-
-@component-namespace el {
-  @b upload {
-    display: inline-block;
-    text-align: center;
-    cursor: pointer;
-
-    @e input {
-      display: none;
-    }
-    @e tip {
-      font-size: 12px;
-      color: var(--color-base-silver);
-      margin-top: 7px;
-    }
-    & iframe {
-      position: absolute;
-      z-index: -1;
-      top: 0;
-      left: 0;
-      opacity: 0;
-      filter: alpha(opacity=0);
-    }
-    /* 照片墙模式 */
-    @m picture-card {
-      background-color: #fbfdff;
-      border: 1px dashed #c0ccda;
-      border-radius: 6px;
-      box-sizing: border-box;
-      width: 148px;
-      height: @width;
-      cursor: pointer;
-      line-height: calc(@height - 2);
-      vertical-align: top;
-
-      i {
-        font-size: 28px;
-        color: #8c939d;
-      }
-
-      &:hover {
-        border-color: var(--color-primary);
-        color: var(--color-primary);
-      }
-    }
-  }
-  @b upload-dragger {
-    background-color: #fff;
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    box-sizing: border-box;
-    width: 360px;
-    height: 180px;
-    text-align: center;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-
-    & .el-icon-upload {
-      font-size: 67px;
-      color: var(--color-light-silver);
-      margin: 40px 0 16px;
-      line-height: 50px;
-    }
-
-    & + .el-upload__tip {
-      text-align: center;
-    }
-    & ~ .el-upload__files {
-      border-top: 1px solid rgba(var(--color-extra-light-silver), .2);
-      margin-top: 7px;
-      padding-top: 5px;
-    }
-    .el-upload__text {
-      color: var(--color-light-silver);
-      font-size: 14px;
-      text-align: center;
-
-      & em {
-        color: var(--color-primary);
-        font-style: normal;
-      }
-    }
-
-    &:hover {
-      border-color: var(--color-primary);
-    }
-
-    @when dragover {
-      background-color: rgba(32, 159, 255, .06);
-      border: 2px dashed var(--color-primary);
-    }
-  }
-  @b upload-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-
-    @e item {
-      transition: all .5s cubic-bezier(.55,0,.1,1);
-      font-size: 14px;
-      color: var(--color-extra-light-black);
-      line-height: 1.8;
-      margin-top: 5px;
-      position: relative;
-      box-sizing: border-box;
-      border-radius: 4px;
-      width: 100%;
-      position: relative;
-
-      & .el-progress {
-        position: absolute;
-        top: 20px;
-        width: 100%;
-      }
-      & .el-progress__text {
-        position: absolute;
-        right: 0;
-        top: -13px;
-        right: 0;
-      }
-      .el-progress-bar {
-        margin-right: 0;
-        padding-right: 0;
-      }
-      &:first-child {
-        margin-top: 10px;
-      }
-      & .el-icon-upload-success {
-        color: var(--color-success);
-      }
-      & .el-icon-close {
-        display: none;
-        position: absolute;
-        top: 5px;
-        right: 5px;
-        cursor: pointer;
-        opacity: .75;
-        color: var(--color-extra-light-black);
-        transform: scale(.7);
-
-        &:hover {
-          opacity: 1;
-        }
-      }
-      &:hover {
-        background-color: var(--color-extra-light-gray);
-
-        .el-icon-close {
-          display: inline-block;
-        }
-        .el-progress__text {
-          display: none;
-        }
-      }
-      @when success {
-        .el-upload-list__item-status-label {
-          display: block;
-        }
-        .el-upload-list__item-name:hover {
-          color: var(--link-hover-color);
-          cursor: pointer;
-        }
-        &:hover {
-          .el-upload-list__item-status-label {
-            display: none;
-          }
-        }
-      }
-    }
-    @when disabled {
-      .el-upload-list__item:hover .el-upload-list__item-status-label {
-        display: block;
-      }
-    }
-    @e item-name {
-      color: var(--color-extra-light-black);
-      display: block;
-      margin-right: 40px;
-      overflow: hidden;
-      padding-left: 4px;
-      text-overflow: ellipsis;
-      transition: color .3s;
-      white-space: nowrap;
-
-      [class^="el-icon"] {
-        color: var(--color-light-silver);
-        margin-right: 7px;
-        height: 100%;
-        line-height: inherit;
-      }
-    }
-    @e item-status-label {
-      position: absolute;
-      right: 5px;
-      top: 0;
-      line-height: inherit;
-      display: none;
-    }
-    @e item-delete {
-      position: absolute;
-      right: 10px;
-      top: 0;
-      font-size: 12px;
-      color: var(--color-extra-light-black);
-      display: none;
-
-      &:hover {
-        color: var(--color-primary);
-      }
-    }
-    @m picture-card {
-      margin: 0;
-      display: inline;
-      vertical-align: top;
-
-      .el-upload-list__item {
-        overflow: hidden;
-        background-color: #fff;
-        border: 1px solid #c0ccda;
-        border-radius: 6px;
-        box-sizing: border-box;
-        width: 148px;
-        height: @width;
-        margin: 0 8px 8px 0;
-        display: inline-block;
-
-        & .el-icon-check,
-        & .el-icon-circle-check {
-          color: var(--color-white);
-        }
-
-        & .el-icon-close {
-          display: none;
-        }
-
-        &:hover {
-          .el-upload-list__item-status-label {
-            display: none;
-          }
-          .el-progress__text {
-            display: block;
-          }
-        }
-      }
-      .el-upload-list__item-name {
-        display: none;
-      }
-      .el-upload-list__item-thumbnail {
-        width: 100%;
-        height: 100%;
-      }
-      .el-upload-list__item-status-label {
-        position: absolute;
-        right: -15px;
-        top: -6px;
-        width: 40px;
-        height: 24px;
-        background: #13ce66;
-        text-align: center;
-        transform: rotate(45deg);
-        box-shadow: 0 0 1pc 1px rgba(0,0,0,0.2);
-
-        i {
-          font-size: 12px;
-          margin-top: 11px;
-          transform: rotate(-45deg) scale(0.8);
-        }
-      }
-      .el-upload-list__item-actions {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        left: 0;
-        top: 0;
-        cursor: default;
-        text-align: center;
-        color: #fff;
-        opacity: 0;
-        font-size: 20px;
-        background-color: rgba(0, 0, 0, .5);
-        transition: opacity .3s;
-        @utils-vertical-center;
-
-        span {
-          display: none;
-          cursor: pointer;
-        }
-        span + span {
-          margin-left: 15px;
-        }
-
-        .el-upload-list__item-delete {
-          position: static;
-          font-size: inherit;
-          color: inherit;
-        }
-
-        &:hover {
-          opacity: 1;
-          span {
-            display: inline-block;
-          }
-        }
-      }
-      .el-progress {
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        bottom: auto;
-        width: 126px;
-
-        .el-progress__text {
-          top: 50%;
-        }
-      }
-    }
-    @m picture {
-      .el-upload-list__item {
-        overflow: hidden;
-        background-color: #fff;
-        border: 1px solid #c0ccda;
-        border-radius: 6px;
-        box-sizing: border-box;
-        margin-top: 10px;
-        padding: 10px 10px 10px 90px;
-        height: 92px;
-        
-        & .el-icon-check,
-        & .el-icon-circle-check {
-          color: var(--color-white);
-        }
-        &:hover {
-          .el-upload-list__item-status-label {
-            background: transparent;
-            box-shadow: none;
-            top: -2px;
-            right: -12px;
-          }
-          .el-progress__text {
-            display: block;
-          }
-        }
-        &.is-success {
-          .el-upload-list__item-name {
-            line-height: 70px;
-            margin-top: 0;
-
-            i {
-              display: none;
-            }
-          }
-        }
-      }
-      .el-upload-list__item-thumbnail {
-        vertical-align: middle;
-        display: inline-block;
-        width: 70px;
-        height: 70px;
-        float: left;
-        position: relative;
-        z-index: 1;
-        margin-left: -80px;
-      }
-      .el-upload-list__item-name {
-        display: block;
-        margin-top: 20px;
-
-        i {
-          font-size: 70px;
-          line-height: 1;
-          position: absolute;
-          left: 9px;
-          top: 10px;
-        }
-      }
-      .el-upload-list__item-status-label {
-        position: absolute;
-        right: -17px;
-        top: -7px;
-        width: 46px;
-        height: 26px;
-        background: #13ce66;
-        text-align: center;
-        transform: rotate(45deg);
-        box-shadow: 0 1px 1px #ccc;
-
-        i {
-          font-size: 12px;
-          margin-top: 12px;
-          transform: rotate(-45deg) scale(0.8);
-        }
-      }
-      .el-progress {
-        position: relative;
-        top: -7px;
-      }
-    }
-  }
-  @b upload-cover {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    z-index: 10;
-    cursor: default;
-    @utils-vertical-center;
-
-    & img {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
-
-    @e label {
-      position: absolute;
-      right: -15px;
-      top: -6px;
-      width: 40px;
-      height: 24px;
-      background: #13ce66;
-      text-align: center;
-      transform: rotate(45deg);
-      box-shadow: 0 0 1pc 1px rgba(0,0,0,0.2);
-
-      i {
-        font-size: 12px;
-        margin-top: 11px;
-        transform: rotate(-45deg) scale(0.8);
-        color: #fff;
-      }
-    }
-
-    @e progress {
-      display: inline-block;
-      vertical-align: middle;
-      position: static;
-      width: 243px;
-
-      & + .el-upload__inner {
-        opacity: 0;
-      }
-    }
-
-    @e content {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-
-    @e interact {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-color: rgba(#000, .72);
-      text-align: center;
-
-      & .btn {
-        display: inline-block;
-        color: var(--color-white);
-        font-size: 14px;
-        cursor: pointer;
-        vertical-align: middle;
-        transition: var(--md-fade-transition);
-        margin-top: 60px;
-
-        & i {
-          margin-top: 0;
-        }
-
-        & span {
-          opacity: 0;
-          transition: opacity .15s linear;
-        }
-
-        &:not(:first-child) {
-          margin-left: 35px;
-        }
-
-        &:hover {
-          transform: translateY(-13px);
-
-          & span {
-            opacity: 1;
-          }
-        }
-
-        & i {
-          color: var(--color-white);
-          display: block;
-          font-size: 24px;
-          line-height: inherit;
-          margin: 0 auto 5px;
-        }
-      }
-    }
-
-    @e title {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      background-color: var(--color-white);
-      height: 36px;
-      width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font-weight: normal;
-      text-align: left;
-      padding: 0 10px;
-      margin: 0;
-      line-height: 36px;
-      font-size: 14px;
-      color: var(--color-extra-light-black);
-    }
-
-    & + .el-upload__inner {
-      opacity: 0;
-      position: relative;
-      z-index: 1;
-    }
-  }
-}
diff --git a/packages/tooltip/src/main.js b/packages/tooltip/src/main.js
index 146d69a38d..e465c708be 100644
--- a/packages/tooltip/src/main.js
+++ b/packages/tooltip/src/main.js
@@ -1,6 +1,8 @@
 import Popper from 'element-ui/src/utils/vue-popper';
 import debounce from 'throttle-debounce/debounce';
+import { addClass, removeClass, on, off } from 'element-ui/src/utils/dom';
 import { getFirstComponentChild } from 'element-ui/src/utils/vdom';
+import { generateId } from 'element-ui/src/utils/util';
 import Vue from 'vue';
 
 export default {
@@ -19,6 +21,10 @@ export default {
       type: String,
       default: 'dark'
     },
+    arrowOffset: {
+      type: Number,
+      default: 0
+    },
     popperClass: String,
     content: String,
     visibleArrow: {
@@ -39,9 +45,24 @@ export default {
     enterable: {
       type: Boolean,
       default: true
+    },
+    hideAfter: {
+      type: Number,
+      default: 0
     }
   },
 
+  data() {
+    return {
+      timeoutPending: null,
+      focusing: false
+    };
+  },
+  computed: {
+    tooltipId() {
+      return `el-tooltip-${generateId()}`;
+    }
+  },
   beforeCreate() {
     if (this.$isServer) return;
 
@@ -65,6 +86,9 @@ export default {
             onMouseleave={ () => { this.setExpectedState(false); this.debounceClose(); } }
             onMouseenter= { () => { this.setExpectedState(true); } }
             ref="popper"
+            role="tooltip"
+            id={this.tooltipId}
+            aria-hidden={ (this.disabled || !this.showPopper) ? 'true' : 'false' }
             v-show={!this.disabled && this.showPopper}
             class={
               ['el-tooltip__popper', 'is-' + this.effect, this.popperClass]
@@ -77,15 +101,10 @@ export default {
     if (!this.$slots.default || !this.$slots.default.length) return this.$slots.default;
 
     const vnode = getFirstComponentChild(this.$slots.default);
+
     if (!vnode) return vnode;
-    const data = vnode.data = vnode.data || {};
-    const on = vnode.data.on = vnode.data.on || {};
-    const nativeOn = vnode.data.nativeOn = vnode.data.nativeOn || {};
 
-    on.mouseenter = this.addEventHandle(on.mouseenter, () => { this.setExpectedState(true); this.handleShowPopper(); });
-    on.mouseleave = this.addEventHandle(on.mouseleave, () => { this.setExpectedState(false); this.debounceClose(); });
-    nativeOn.mouseenter = this.addEventHandle(nativeOn.mouseenter, () => { this.setExpectedState(true); this.handleShowPopper(); });
-    nativeOn.mouseleave = this.addEventHandle(nativeOn.mouseleave, () => { this.setExpectedState(false); this.debounceClose(); });
+    const data = vnode.data = vnode.data || {};
     data.staticClass = this.concatClass(data.staticClass, 'el-tooltip');
 
     return vnode;
@@ -93,11 +112,56 @@ export default {
 
   mounted() {
     this.referenceElm = this.$el;
+    if (this.$el.nodeType === 1) {
+      this.$el.setAttribute('aria-describedby', this.tooltipId);
+      this.$el.setAttribute('tabindex', 0);
+      on(this.referenceElm, 'mouseenter', this.show);
+      on(this.referenceElm, 'mouseleave', this.hide);
+      on(this.referenceElm, 'focus', () => {
+        if (!this.$slots.default || !this.$slots.default.length) {
+          this.handleFocus();
+          return;
+        }
+        const instance = this.$slots.default[0].componentInstance;
+        if (instance && instance.focus) {
+          instance.focus();
+        } else {
+          this.handleFocus();
+        }
+      });
+      on(this.referenceElm, 'blur', this.handleBlur);
+      on(this.referenceElm, 'click', this.removeFocusing);
+    }
+  },
+  watch: {
+    focusing(val) {
+      if (val) {
+        addClass(this.referenceElm, 'focusing');
+      } else {
+        removeClass(this.referenceElm, 'focusing');
+      }
+    }
   },
-
   methods: {
-    addEventHandle(old, fn) {
-      return old ? Array.isArray(old) ? old.concat(fn) : [old, fn] : fn;
+    show() {
+      this.setExpectedState(true);
+      this.handleShowPopper();
+    },
+
+    hide() {
+      this.setExpectedState(false);
+      this.debounceClose();
+    },
+    handleFocus() {
+      this.focusing = true;
+      this.show();
+    },
+    handleBlur() {
+      this.focusing = false;
+      this.hide();
+    },
+    removeFocusing() {
+      this.focusing = false;
     },
 
     concatClass(a, b) {
@@ -111,16 +175,42 @@ export default {
       this.timeout = setTimeout(() => {
         this.showPopper = true;
       }, this.openDelay);
+
+      if (this.hideAfter > 0) {
+        this.timeoutPending = setTimeout(() => {
+          this.showPopper = false;
+        }, this.hideAfter);
+      }
     },
 
     handleClosePopper() {
       if (this.enterable && this.expectedState || this.manual) return;
       clearTimeout(this.timeout);
+
+      if (this.timeoutPending) {
+        clearTimeout(this.timeoutPending);
+      }
       this.showPopper = false;
+
+      if (this.disabled) {
+        this.doDestroy();
+      }
     },
 
     setExpectedState(expectedState) {
+      if (expectedState === false) {
+        clearTimeout(this.timeoutPending);
+      }
       this.expectedState = expectedState;
     }
+  },
+
+  destroyed() {
+    const reference = this.referenceElm;
+    off(reference, 'mouseenter', this.show);
+    off(reference, 'mouseleave', this.hide);
+    off(reference, 'focus', this.handleFocus);
+    off(reference, 'blur', this.handleBlur);
+    off(reference, 'click', this.removeFocusing);
   }
 };
diff --git a/packages/transfer/src/main.vue b/packages/transfer/src/main.vue
index 557ec67800..7e8de6c035 100644
--- a/packages/transfer/src/main.vue
+++ b/packages/transfer/src/main.vue
@@ -2,6 +2,7 @@
   <div class="el-transfer">
     <transfer-panel
       v-bind="$props"
+      ref="leftPanel"
       :data="sourceData"
       :title="titles[0] || t('el.transfer.titles.0')"
       :default-checked="leftDefaultChecked"
@@ -12,7 +13,7 @@
     <div class="el-transfer__buttons">
       <el-button
         type="primary"
-        size="small"
+        :class="['el-transfer__button', hasButtonTexts ? 'is-with-texts' : '']"
         @click.native="addToLeft"
         :disabled="rightChecked.length === 0">
         <i class="el-icon-arrow-left"></i>
@@ -20,7 +21,7 @@
       </el-button>
       <el-button
         type="primary"
-        size="small"
+        :class="['el-transfer__button', hasButtonTexts ? 'is-with-texts' : '']"
         @click.native="addToRight"
         :disabled="leftChecked.length === 0">
         <span v-if="buttonTexts[1] !== undefined">{{ buttonTexts[1] }}</span>
@@ -29,6 +30,7 @@
     </div>
     <transfer-panel
       v-bind="$props"
+      ref="rightPanel"
       :data="targetData"
       :title="titles[1] || t('el.transfer.titles.1')"
       :default-checked="rightDefaultChecked"
@@ -44,11 +46,12 @@
   import Emitter from 'element-ui/src/mixins/emitter';
   import Locale from 'element-ui/src/mixins/locale';
   import TransferPanel from './transfer-panel.vue';
+  import Migrating from 'element-ui/src/mixins/migrating';
 
   export default {
     name: 'ElTransfer',
 
-    mixins: [Emitter, Locale],
+    mixins: [Emitter, Locale, Migrating],
 
     components: {
       TransferPanel,
@@ -98,7 +101,7 @@
           return [];
         }
       },
-      footerFormat: {
+      format: {
         type: Object,
         default() {
           return {};
@@ -114,6 +117,10 @@
             disabled: 'disabled'
           };
         }
+      },
+      targetOrder: {
+        type: String,
+        default: 'original'
       }
     },
 
@@ -125,12 +132,23 @@
     },
 
     computed: {
+      dataObj() {
+        const key = this.props.key;
+        return this.data.reduce((o, cur) => (o[cur[key]] = cur) && o, {});
+      },
+  
       sourceData() {
         return this.data.filter(item => this.value.indexOf(item[this.props.key]) === -1);
       },
 
       targetData() {
-        return this.data.filter(item => this.value.indexOf(item[this.props.key]) > -1);
+        return this.targetOrder === 'original'
+          ? this.data.filter(item => this.value.indexOf(item[this.props.key]) > -1)
+          : this.value.map(key => this.dataObj[key]);
+      },
+
+      hasButtonTexts() {
+        return this.buttonTexts.length === 2;
       }
     },
 
@@ -141,12 +159,24 @@
     },
 
     methods: {
-      onSourceCheckedChange(val) {
+      getMigratingConfig() {
+        return {
+          props: {
+            'footer-format': 'footer-format is renamed to format.'
+          }
+        };
+      },
+
+      onSourceCheckedChange(val, movedKeys) {
         this.leftChecked = val;
+        if (movedKeys === undefined) return;
+        this.$emit('left-check-change', val, movedKeys);
       },
 
-      onTargetCheckedChange(val) {
+      onTargetCheckedChange(val, movedKeys) {
         this.rightChecked = val;
+        if (movedKeys === undefined) return;
+        this.$emit('right-check-change', val, movedKeys);
       },
 
       addToLeft() {
@@ -163,13 +193,30 @@
 
       addToRight() {
         let currentValue = this.value.slice();
-        this.leftChecked.forEach(item => {
-          if (this.value.indexOf(item) === -1) {
-            currentValue = currentValue.concat(item);
+        const itemsToBeMoved = [];
+        const key = this.props.key;
+        this.data.forEach(item => {
+          const itemKey = item[key];
+          if (
+            this.leftChecked.indexOf(itemKey) > -1 &&
+            this.value.indexOf(itemKey) === -1
+          ) {
+            itemsToBeMoved.push(itemKey);
           }
         });
+        currentValue = this.targetOrder === 'unshift'
+          ? itemsToBeMoved.concat(currentValue)
+          : currentValue.concat(itemsToBeMoved);
         this.$emit('input', currentValue);
         this.$emit('change', currentValue, 'right', this.leftChecked);
+      },
+
+      clearQuery(which) {
+        if (which === 'left') {
+          this.$refs.leftPanel.query = '';
+        } else if (which === 'right') {
+          this.$refs.rightPanel.query = '';
+        }
       }
     }
   };
diff --git a/packages/transfer/src/transfer-panel.vue b/packages/transfer/src/transfer-panel.vue
index 327500cea9..6cfe754625 100644
--- a/packages/transfer/src/transfer-panel.vue
+++ b/packages/transfer/src/transfer-panel.vue
@@ -1,18 +1,29 @@
 <template>
   <div class="el-transfer-panel">
-    <p class="el-transfer-panel__header">{{ title }}</p>
+    <p class="el-transfer-panel__header">
+      <el-checkbox
+        v-model="allChecked"
+        @change="handleAllCheckedChange"
+        :indeterminate="isIndeterminate">
+        {{ title }}
+        <span>{{ checkedSummary }}</span>
+      </el-checkbox>
+    </p>
     
-    <div class="el-transfer-panel__body">
+    <div :class="['el-transfer-panel__body', hasFooter ? 'is-with-footer' : '']">
       <el-input
         class="el-transfer-panel__filter"
         v-model="query"
         size="small"
         :placeholder="placeholder"
-        :icon="inputIcon"
         @mouseenter.native="inputHover = true"
         @mouseleave.native="inputHover = false"
-        @click="clearQuery"
-        v-if="filterable"></el-input>
+        v-if="filterable">
+        <i slot="prefix"
+          :class="['el-input__icon', 'el-icon-' + inputIcon]"
+          @click="clearQuery"
+        ></i>
+      </el-input>
       <el-checkbox-group
         v-model="checked"
         v-show="!hasNoMatch && data.length > 0"
@@ -34,12 +45,7 @@
         class="el-transfer-panel__empty"
         v-show="data.length === 0 && !hasNoMatch">{{ t('el.transfer.noData') }}</p>
     </div>
-    
-    <p class="el-transfer-panel__footer">
-      <el-checkbox
-        v-model="allChecked"
-        @change="handleAllCheckedChange"
-        :indeterminate="isIndeterminate">{{ checkedSummary }}</el-checkbox>
+    <p class="el-transfer-panel__footer" v-if="hasFooter">
       <slot></slot>
     </p>
   </div>
@@ -76,10 +82,13 @@
               return vm;
             }
           };
-          const parent = getParent(this);
-          return parent.renderContent
-            ? parent.renderContent(h, this.option)
-            : <span>{ this.option[parent.labelProp] || this.option[parent.keyProp] }</span>;
+          const panel = getParent(this);
+          const transfer = panel.$parent || panel;
+          return panel.renderContent
+            ? panel.renderContent(h, this.option)
+            : transfer.$scopedSlots.default
+              ? transfer.$scopedSlots.default({ option: this.option })
+              : <span>{ this.option[panel.labelProp] || this.option[panel.keyProp] }</span>;
         }
       }
     },
@@ -95,7 +104,7 @@
       placeholder: String,
       title: String,
       filterable: Boolean,
-      footerFormat: Object,
+      format: Object,
       filterMethod: Function,
       defaultChecked: Array,
       props: Object
@@ -106,14 +115,22 @@
         checked: [],
         allChecked: false,
         query: '',
-        inputHover: false
+        inputHover: false,
+        checkChangeByUser: true
       };
     },
 
     watch: {
-      checked(val) {
+      checked(val, oldVal) {
         this.updateAllChecked();
-        this.$emit('checked-change', val);
+        if (this.checkChangeByUser) {
+          const movedKeys = val.concat(oldVal)
+            .filter(v => val.indexOf(v) === -1 || oldVal.indexOf(v) === -1);
+          this.$emit('checked-change', val, movedKeys);
+        } else {
+          this.$emit('checked-change', val);
+          this.checkChangeByUser = true;
+        }
       },
 
       data() {
@@ -124,6 +141,7 @@
             checked.push(item);
           }
         });
+        this.checkChangeByUser = false;
         this.checked = checked;
       },
 
@@ -143,6 +161,7 @@
               checked.push(item);
             }
           });
+          this.checkChangeByUser = false;
           this.checked = checked;
         }
       }
@@ -167,15 +186,13 @@
       checkedSummary() {
         const checkedLength = this.checked.length;
         const dataLength = this.data.length;
-        const { noChecked, hasChecked } = this.footerFormat;
+        const { noChecked, hasChecked } = this.format;
         if (noChecked && hasChecked) {
           return checkedLength > 0
             ? hasChecked.replace(/\${checked}/g, checkedLength).replace(/\${total}/g, dataLength)
             : noChecked.replace(/\${total}/g, dataLength);
         } else {
-          return checkedLength > 0
-            ? this.t('el.transfer.hasCheckedFormat', { total: dataLength, checked: checkedLength })
-            : this.t('el.transfer.noCheckedFormat', { total: dataLength });
+          return `${ checkedLength }/${ dataLength }`;
         }
       },
 
@@ -204,6 +221,10 @@
 
       disabledProp() {
         return this.props.disabled || 'disabled';
+      },
+
+      hasFooter() {
+        return !!this.$slots.default;
       }
     },
 
@@ -215,7 +236,7 @@
       },
 
       handleAllCheckedChange(value) {
-        this.checked = value.target.checked
+        this.checked = value
           ? this.checkableData.map(item => item[this.keyProp])
           : [];
       },
diff --git a/packages/tree/src/model/node.js b/packages/tree/src/model/node.js
index 49461e55a0..f8e58d7e06 100644
--- a/packages/tree/src/model/node.js
+++ b/packages/tree/src/model/node.js
@@ -22,6 +22,8 @@ export const getChildState = node => {
 };
 
 const reInitChecked = function(node) {
+  if (node.childNodes.length === 0) return;
+
   const {all, none, half} = getChildState(node.childNodes);
   if (all) {
     node.checked = true;
@@ -42,22 +44,6 @@ const reInitChecked = function(node) {
   }
 };
 
-const initLazyLoadChild = node => {
-  const childNodes = node.childNodes;
-  if (node.checked) {
-    for (let i = 0, j = childNodes.length; i < j; i++) {
-      const child = childNodes[i];
-      if (!child.disabled) {
-        child.checked = true;
-      }
-    }
-  }
-
-  const parent = node.parent;
-  if (!parent || parent.level === 0) return;
-  reInitChecked(parent);
-};
-
 const getPropertyFromData = function(node, prop) {
   const props = node.store.props;
   const data = node.data || {};
@@ -68,7 +54,8 @@ const getPropertyFromData = function(node, prop) {
   } else if (typeof config === 'string') {
     return data[config];
   } else if (typeof config === 'undefined') {
-    return '';
+    const dataProp = data[prop];
+    return dataProp === undefined ? '' : dataProp;
   }
 };
 
@@ -124,7 +111,9 @@ export default class Node {
     } else if (this.level > 0 && store.lazy && store.defaultExpandAll) {
       this.expand();
     }
-
+    if (!Array.isArray(this.data)) {
+      markNodeData(this, this.data);
+    }
     if (!this.data) return;
     const defaultExpandedKeys = store.defaultExpandedKeys;
     const key = store.key;
@@ -132,7 +121,7 @@ export default class Node {
       this.expand(null, store.autoExpandParent);
     }
 
-    if (key && store.currentNodeKey && this.key === store.currentNodeKey) {
+    if (key && store.currentNodeKey !== undefined && this.key === store.currentNodeKey) {
       store.currentNode = this;
     }
 
@@ -181,10 +170,66 @@ export default class Node {
     return getPropertyFromData(this, 'disabled');
   }
 
-  insertChild(child, index) {
+  get nextSibling() {
+    const parent = this.parent;
+    if (parent) {
+      const index = parent.childNodes.indexOf(this);
+      if (index > -1) {
+        return parent.childNodes[index + 1];
+      }
+    }
+    return null;
+  }
+
+  get previousSibling() {
+    const parent = this.parent;
+    if (parent) {
+      const index = parent.childNodes.indexOf(this);
+      if (index > -1) {
+        return index > 0 ? parent.childNodes[index - 1] : null;
+      }
+    }
+    return null;
+  }
+
+  contains(target, deep = true) {
+    const walk = function(parent) {
+      const children = parent.childNodes || [];
+      let result = false;
+      for (let i = 0, j = children.length; i < j; i++) {
+        const child = children[i];
+        if (child === target || (deep && walk(child))) {
+          result = true;
+          break;
+        }
+      }
+      return result;
+    };
+
+    return walk(this);
+  }
+
+  remove() {
+    const parent = this.parent;
+    if (parent) {
+      parent.removeChild(this);
+    }
+  }
+
+  insertChild(child, index, batch) {
     if (!child) throw new Error('insertChild error: child is required.');
 
     if (!(child instanceof Node)) {
+      if (!batch) {
+        const children = this.getChildren(true);
+        if (children.indexOf(child.data) === -1) {
+          if (typeof index === 'undefined' || index < 0) {
+            children.push(child.data);
+          } else {
+            children.splice(index, 0, child.data);
+          }
+        }
+      }
       objectAssign(child, {
         parent: this,
         store: this.store
@@ -221,6 +266,12 @@ export default class Node {
   }
 
   removeChild(child) {
+    const children = this.getChildren() || [];
+    const dataIndex = children.indexOf(child.data);
+    if (dataIndex > -1) {
+      children.splice(dataIndex, 1);
+    }
+
     const index = this.childNodes.indexOf(child);
 
     if (index > -1) {
@@ -234,11 +285,13 @@ export default class Node {
 
   removeChildByData(data) {
     let targetNode = null;
-    this.childNodes.forEach(node => {
-      if (node.data === data) {
-        targetNode = node;
+
+    for (let i = 0; i < this.childNodes.length; i++) {
+      if (this.childNodes[i].data === data) {
+        targetNode = this.childNodes[i];
+        break;
       }
-    });
+    }
 
     if (targetNode) {
       this.removeChild(targetNode);
@@ -261,7 +314,11 @@ export default class Node {
     if (this.shouldLoadData()) {
       this.loadData((data) => {
         if (data instanceof Array) {
-          initLazyLoadChild(this);
+          if (this.checked) {
+            this.setChecked(true, true);
+          } else if (!this.store.checkStrictly) {
+            reInitChecked(this);
+          }
           done();
         }
       });
@@ -272,7 +329,7 @@ export default class Node {
 
   doCreateChildren(array, defaultProps = {}) {
     array.forEach((item) => {
-      this.insertChild(objectAssign({ data: item }, defaultProps));
+      this.insertChild(objectAssign({ data: item }, defaultProps), undefined, true);
     });
   }
 
@@ -300,50 +357,58 @@ export default class Node {
   setChecked(value, deep, recursion, passValue) {
     this.indeterminate = value === 'half';
     this.checked = value === true;
-    let { all, allWithoutDisable } = getChildState(this.childNodes);
 
-    if (this.childNodes.length && (!all && allWithoutDisable)) {
-      this.checked = false;
-      value = false;
-    }
+    if (this.store.checkStrictly) return;
 
-    const handleDescendants = (lazy) => {
-      if (deep && !lazy) {
-        const childNodes = this.childNodes;
-        for (let i = 0, j = childNodes.length; i < j; i++) {
-          const child = childNodes[i];
-          passValue = passValue || value !== false;
-          const isCheck = child.disabled ? child.checked : passValue;
-          child.setChecked(isCheck, deep, true, passValue);
-        }
-        const { half, all } = getChildState(childNodes);
-        if (!all) {
-          this.checked = all;
-          this.indeterminate = half;
-        }
+    if (!(this.shouldLoadData() && !this.store.checkDescendants)) {
+      let { all, allWithoutDisable } = getChildState(this.childNodes);
+
+      if (!this.isLeaf && (!all && allWithoutDisable)) {
+        this.checked = false;
+        value = false;
       }
-    };
 
-    if (!this.store.checkStrictly && this.shouldLoadData()) {
-      // Only work on lazy load data.
-      this.loadData(() => {
-        handleDescendants(true);
-      }, {
-        checked: value !== false
-      });
-    } else {
-      handleDescendants();
+      const handleDescendants = () => {
+        if (deep) {
+          const childNodes = this.childNodes;
+          for (let i = 0, j = childNodes.length; i < j; i++) {
+            const child = childNodes[i];
+            passValue = passValue || value !== false;
+            const isCheck = child.disabled ? child.checked : passValue;
+            child.setChecked(isCheck, deep, true, passValue);
+          }
+          const { half, all } = getChildState(childNodes);
+          if (!all) {
+            this.checked = all;
+            this.indeterminate = half;
+          }
+        }
+      };
+
+      if (this.shouldLoadData()) {
+        // Only work on lazy load data.
+        this.loadData(() => {
+          handleDescendants();
+          reInitChecked(this);
+        }, {
+          checked: value !== false
+        });
+        return;
+      } else {
+        handleDescendants();
+      }
     }
 
     const parent = this.parent;
     if (!parent || parent.level === 0) return;
 
-    if (!this.store.checkStrictly && !recursion) {
+    if (!recursion) {
       reInitChecked(parent);
     }
   }
 
-  getChildren() { // this is data
+  getChildren(forceInit = false) { // this is data
+    if (this.level === 0) return this.data;
     const data = this.data;
     if (!data) return null;
 
@@ -357,6 +422,10 @@ export default class Node {
       data[children] = null;
     }
 
+    if (forceInit && !data[children]) {
+      data[children] = [];
+    }
+
     return data[children];
   }
 
@@ -375,9 +444,11 @@ export default class Node {
       }
     });
 
-    oldData.forEach((item) => {
-      if (!newDataMap[item[NODE_KEY]]) this.removeChildByData(item);
-    });
+    if (!this.store.lazy) {
+      oldData.forEach((item) => {
+        if (!newDataMap[item[NODE_KEY]]) this.removeChildByData(item);
+      });
+    }
 
     newNodes.forEach(({ index, data }) => {
       this.insertChild({ data }, index);
diff --git a/packages/tree/src/model/tree-store.js b/packages/tree/src/model/tree-store.js
index 0dfbf56f12..0bdf2528c4 100644
--- a/packages/tree/src/model/tree-store.js
+++ b/packages/tree/src/model/tree-store.js
@@ -32,6 +32,7 @@ export default class TreeStore {
 
   filter(value) {
     const filterNodeMethod = this.filterNodeMethod;
+    const lazy = this.lazy;
     const traverse = function(node) {
       const childNodes = node.root ? node.root.childNodes : node.childNodes;
 
@@ -54,8 +55,9 @@ export default class TreeStore {
           node.visible = allHidden === false;
         }
       }
+      if (!value) return;
 
-      if (node.visible && !node.isLeaf) node.expand();
+      if (node.visible && !node.isLeaf && !lazy) node.expand();
     };
 
     traverse(this);
@@ -63,15 +65,18 @@ export default class TreeStore {
 
   setData(newVal) {
     const instanceChanged = newVal !== this.root.data;
-    this.root.setData(newVal);
     if (instanceChanged) {
+      this.root.setData(newVal);
       this._initDefaultCheckedNodes();
+    } else {
+      this.root.updateChildren();
     }
   }
 
   getNode(data) {
+    if (data instanceof Node) return data;
     const key = typeof data !== 'object' ? data : getNodeKey(this.key, data);
-    return this.nodesMap[key];
+    return this.nodesMap[key] || null;
   }
 
   insertBefore(data, refData) {
@@ -86,7 +91,7 @@ export default class TreeStore {
 
   remove(data) {
     const node = this.getNode(data);
-    if (node) {
+    if (node && node.parent) {
       node.parent.removeChild(node);
     }
   }
@@ -139,16 +144,20 @@ export default class TreeStore {
     const key = this.key;
     if (!key || !node || !node.data) return;
 
+    node.childNodes.forEach(child => {
+      this.deregisterNode(child);
+    });
+
     delete this.nodesMap[node.key];
   }
 
-  getCheckedNodes(leafOnly = false) {
+  getCheckedNodes(leafOnly = false, includeHalfChecked = false) {
     const checkedNodes = [];
     const traverse = function(node) {
       const childNodes = node.root ? node.root.childNodes : node.childNodes;
 
       childNodes.forEach((child) => {
-        if ((!leafOnly && child.checked) || (leafOnly && child.isLeaf && child.checked)) {
+        if ((child.checked || (includeHalfChecked && child.indeterminate)) && (!leafOnly || (leafOnly && child.isLeaf))) {
           checkedNodes.push(child.data);
         }
 
@@ -162,17 +171,30 @@ export default class TreeStore {
   }
 
   getCheckedKeys(leafOnly = false) {
-    const key = this.key;
-    const allNodes = this._getAllNodes();
-    const keys = [];
-    allNodes.forEach((node) => {
-      if (!leafOnly || (leafOnly && node.isLeaf)) {
-        if (node.checked) {
-          keys.push((node.data || {})[key]);
+    return this.getCheckedNodes(leafOnly).map((data) => (data || {})[this.key]);
+  }
+
+  getHalfCheckedNodes() {
+    const nodes = [];
+    const traverse = function(node) {
+      const childNodes = node.root ? node.root.childNodes : node.childNodes;
+
+      childNodes.forEach((child) => {
+        if (child.indeterminate) {
+          nodes.push(child.data);
         }
-      }
-    });
-    return keys;
+
+        traverse(child);
+      });
+    };
+
+    traverse(this);
+
+    return nodes;
+  }
+
+  getHalfCheckedKeys() {
+    return this.getHalfCheckedNodes().map((data) => (data || {})[this.key]);
   }
 
   _getAllNodes() {
@@ -187,6 +209,20 @@ export default class TreeStore {
     return allNodes;
   }
 
+  updateChildren(key, data) {
+    const node = this.nodesMap[key];
+    if (!node) return;
+    const childNodes = node.childNodes;
+    for (let i = childNodes.length - 1; i >= 0; i--) {
+      const child = childNodes[i];
+      this.remove(child.data);
+    }
+    for (let i = 0, j = data.length; i < j; i++) {
+      const child = data[i];
+      this.append(child, node.data);
+    }
+  }
+
   _setCheckedKeys(key, leafOnly = false, checkedKeys) {
     const allNodes = this._getAllNodes().sort((a, b) => b.level - a.level);
     const cache = Object.create(null);
@@ -278,7 +314,17 @@ export default class TreeStore {
     this.currentNode = node;
   }
 
+  setUserCurrentNode(node) {
+    const key = node[this.key];
+    const currNode = this.nodesMap[key];
+    this.setCurrentNode(currNode);
+  }
+
   setCurrentNodeKey(key) {
+    if (key === null) {
+      this.currentNode = null;
+      return;
+    }
     const node = this.getNode(key);
     if (node) {
       this.currentNode = node;
diff --git a/packages/tree/src/model/util.js b/packages/tree/src/model/util.js
index 50cc8f942f..dcc891b1b8 100644
--- a/packages/tree/src/model/util.js
+++ b/packages/tree/src/model/util.js
@@ -1,7 +1,7 @@
 export const NODE_KEY = '$treeNodeId';
 
 export const markNodeData = function(node, data) {
-  if (data[NODE_KEY]) return;
+  if (!data || data[NODE_KEY]) return;
   Object.defineProperty(data, NODE_KEY, {
     value: node.id,
     enumerable: false,
@@ -14,3 +14,14 @@ export const getNodeKey = function(key, data) {
   if (!key) return data[NODE_KEY];
   return data[key];
 };
+
+export const findNearestComponent = (element, componentName) => {
+  let target = element;
+  while (target && target.tagName !== 'BODY') {
+    if (target.__vue__ && target.__vue__.$options.name === componentName) {
+      return target.__vue__;
+    }
+    target = target.parentNode;
+  }
+  return null;
+};
diff --git a/packages/tree/src/tree-node.vue b/packages/tree/src/tree-node.vue
index 8071544d7d..c1e00113c5 100644
--- a/packages/tree/src/tree-node.vue
+++ b/packages/tree/src/tree-node.vue
@@ -1,16 +1,32 @@
 <template>
-  <div class="el-tree-node"
+  <div
+    class="el-tree-node"
     @click.stop="handleClick"
+    @contextmenu="($event) => this.handleContextMenu($event)"
     v-show="node.visible"
     :class="{
-      'is-expanded': childNodeRendered && expanded,
+      'is-expanded': expanded,
       'is-current': tree.store.currentNode === node,
-      'is-hidden': !node.visible
-    }">
+      'is-hidden': !node.visible,
+      'is-focusable': !node.disabled,
+      'is-checked': !node.disabled && node.checked
+    }"
+    role="treeitem"
+    tabindex="-1"
+    :aria-expanded="expanded"
+    :aria-disabled="node.disabled"
+    :aria-checked="node.checked"
+    :draggable="tree.draggable"
+    @dragstart.stop="handleDragStart"
+    @dragover.stop="handleDragOver"
+    @dragend.stop="handleDragEnd"
+    @drop.stop="handleDrop"
+    ref="node"
+  >
     <div class="el-tree-node__content"
       :style="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }">
       <span
-        class="el-tree-node__expand-icon"
+        class="el-tree-node__expand-icon el-icon-caret-right"
         @click.stop="handleExpandIconClick"
         :class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }">
       </span>
@@ -20,7 +36,8 @@
         :indeterminate="node.indeterminate"
         :disabled="!!node.disabled"
         @click.native.stop
-        @change="handleCheckChange">
+        @change="handleCheckChange"
+      >
       </el-checkbox>
       <span
         v-if="node.loading"
@@ -31,10 +48,15 @@
     <el-collapse-transition>
       <div
         class="el-tree-node__children"
-        v-show="expanded">
+        v-if="!renderAfterExpand || childNodeRendered"
+        v-show="expanded"
+        role="group"
+        :aria-expanded="expanded"
+      >
         <el-tree-node
           :render-content="renderContent"
           v-for="child in node.childNodes"
+          :render-after-expand="renderAfterExpand"
           :key="getNodeKey(child)"
           :node="child"
           @node-expand="handleChildNodeExpand">
@@ -48,6 +70,7 @@
   import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition';
   import ElCheckbox from 'element-ui/packages/checkbox';
   import emitter from 'element-ui/src/mixins/emitter';
+  import { getNodeKey } from './model/util';
 
   export default {
     name: 'ElTreeNode',
@@ -63,7 +86,11 @@
         }
       },
       props: {},
-      renderContent: Function
+      renderContent: Function,
+      renderAfterExpand: {
+        type: Boolean,
+        default: true
+      }
     },
 
     components: {
@@ -77,13 +104,15 @@
         },
         render(h) {
           const parent = this.$parent;
+          const tree = parent.tree;
           const node = this.node;
-          const data = node.data;
-          const store = node.store;
+          const { data, store } = node;
           return (
             parent.renderContent
-              ? parent.renderContent.call(parent._renderProxy, h, { _self: parent.tree.$vnode.context, node, data, store })
-              : <span class="el-tree-node__label">{ this.node.label }</span>
+              ? parent.renderContent.call(parent._renderProxy, h, { _self: tree.$vnode.context, node, data, store })
+              : tree.$scopedSlots.default
+                ? tree.$scopedSlots.default({ node, data })
+                : <span class="el-tree-node__label">{ node.label }</span>
           );
         }
       }
@@ -110,7 +139,7 @@
       },
 
       'node.expanded'(val) {
-        this.expanded = val;
+        this.$nextTick(() => this.expanded = val);
         if (val) {
           this.childNodeRendered = true;
         }
@@ -118,12 +147,8 @@
     },
 
     methods: {
-      getNodeKey(node, index) {
-        const nodeKey = this.tree.nodeKey;
-        if (nodeKey && node) {
-          return node.data[nodeKey];
-        }
-        return index;
+      getNodeKey(node) {
+        return getNodeKey(this.tree.nodeKey, node.data);
       },
 
       handleSelectChange(checked, indeterminate) {
@@ -142,9 +167,22 @@
         if (this.tree.expandOnClickNode) {
           this.handleExpandIconClick();
         }
+        if (this.tree.checkOnClickNode && !this.node.disabled) {
+          this.handleCheckChange(null, {
+            target: { checked: !this.node.checked }
+          });
+        }
         this.tree.$emit('node-click', this.node.data, this.node, this);
       },
 
+      handleContextMenu(event) {
+        if (this.tree._events['node-contextmenu'] && this.tree._events['node-contextmenu'].length > 0) {
+          event.stopPropagation();
+          event.preventDefault();
+        }
+        this.tree.$emit('node-contextmenu', event, this.node.data, this.node, this);
+      },
+
       handleExpandIconClick() {
         if (this.node.isLeaf) return;
         if (this.expanded) {
@@ -156,13 +194,42 @@
         }
       },
 
-      handleCheckChange(ev) {
+      handleCheckChange(value, ev) {
         this.node.setChecked(ev.target.checked, !this.tree.checkStrictly);
+        this.$nextTick(() => {
+          const store = this.tree.store;
+          this.tree.$emit('check', this.node.data, {
+            checkedNodes: store.getCheckedNodes(),
+            checkedKeys: store.getCheckedKeys(),
+            halfCheckedNodes: store.getHalfCheckedNodes(),
+            halfCheckedKeys: store.getHalfCheckedKeys(),
+          });
+        });
       },
 
       handleChildNodeExpand(nodeData, node, instance) {
         this.broadcast('ElTreeNode', 'tree-node-expand', node);
         this.tree.$emit('node-expand', nodeData, node, instance);
+      },
+
+      handleDragStart(event) {
+        if (!this.tree.draggable) return;
+        this.tree.$emit('tree-node-drag-start', event, this);
+      },
+
+      handleDragOver(event) {
+        if (!this.tree.draggable) return;
+        this.tree.$emit('tree-node-drag-over', event, this);
+        event.preventDefault();
+      },
+
+      handleDrop(event) {
+        event.preventDefault();
+      },
+
+      handleDragEnd(event) {
+        if (!this.tree.draggable) return;
+        this.tree.$emit('tree-node-drag-end', event, this);
       }
     },
 
diff --git a/packages/tree/src/tree.vue b/packages/tree/src/tree.vue
index 7b1019a61e..59201bca12 100644
--- a/packages/tree/src/tree.vue
+++ b/packages/tree/src/tree.vue
@@ -1,23 +1,41 @@
 <template>
-  <div class="el-tree" :class="{ 'el-tree--highlight-current': highlightCurrent }">
+  <div
+    class="el-tree"
+    :class="{
+      'el-tree--highlight-current': highlightCurrent,
+      'is-dragging': !!dragState.draggingNode,
+      'is-drop-not-allow': !dragState.allowDrop,
+      'is-drop-inner': dragState.dropType === 'inner'
+    }"
+    role="tree"
+  >
     <el-tree-node
       v-for="child in root.childNodes"
       :node="child"
       :props="props"
+      :render-after-expand="renderAfterExpand"
       :key="getNodeKey(child)"
       :render-content="renderContent"
       @node-expand="handleNodeExpand">
     </el-tree-node>
-    <div class="el-tree__empty-block" v-if="!root.childNodes || root.childNodes.length === 0">
+    <div class="el-tree__empty-block" v-if="isEmpty">
       <span class="el-tree__empty-text">{{ emptyText }}</span>
     </div>
+    <div
+      v-show="dragState.showDropIndicator"
+      class="el-tree__drop-indicator"
+      ref="dropIndicator">
+    </div>
   </div>
 </template>
 
 <script>
   import TreeStore from './model/tree-store';
+  import { getNodeKey, findNearestComponent } from './model/util';
+  import ElTreeNode from './tree-node.vue';
   import {t} from 'element-ui/src/locale';
   import emitter from 'element-ui/src/mixins/emitter';
+  import { addClass, removeClass } from 'element-ui/src/utils/dom';
 
   export default {
     name: 'ElTree',
@@ -25,14 +43,22 @@
     mixins: [emitter],
 
     components: {
-      ElTreeNode: require('./tree-node.vue')
+      ElTreeNode
     },
 
     data() {
       return {
         store: null,
         root: null,
-        currentNode: null
+        currentNode: null,
+        treeItems: null,
+        checkboxItems: [],
+        dragState: {
+          showDropIndicator: false,
+          draggingNode: null,
+          dropNode: null,
+          allowDrop: true
+        }
       };
     },
 
@@ -46,6 +72,10 @@
           return t('el.tree.emptyText');
         }
       },
+      renderAfterExpand: {
+        type: Boolean,
+        default: true
+      },
       nodeKey: String,
       checkStrictly: Boolean,
       defaultExpandAll: Boolean,
@@ -53,6 +83,11 @@
         type: Boolean,
         default: true
       },
+      checkOnClickNode: Boolean,
+      checkDescendants: {
+        type: Boolean,
+        default: false
+      },
       autoExpandParent: {
         type: Boolean,
         default: true
@@ -64,6 +99,12 @@
         type: Boolean,
         default: false
       },
+      draggable: {
+        type: Boolean,
+        default: false
+      },
+      allowDrag: Function,
+      allowDrop: Function,
       props: {
         default() {
           return {
@@ -79,13 +120,12 @@
         default: false
       },
       highlightCurrent: Boolean,
-      currentNodeKey: [String, Number],
       load: Function,
       filterNodeMethod: Function,
       accordion: Boolean,
       indent: {
         type: Number,
-        default: 16
+        default: 18
       }
     },
 
@@ -97,24 +137,40 @@
         get() {
           return this.data;
         }
+      },
+
+      treeItemArray() {
+        return Array.prototype.slice.call(this.treeItems);
+      },
+
+      isEmpty() {
+        const { childNodes } = this.root;
+        return !childNodes || childNodes.length === 0 || childNodes.every(({visible}) => !visible);
       }
     },
 
     watch: {
       defaultCheckedKeys(newVal) {
-        this.store.defaultCheckedKeys = newVal;
         this.store.setDefaultCheckedKey(newVal);
       },
+
       defaultExpandedKeys(newVal) {
         this.store.defaultExpandedKeys = newVal;
         this.store.setDefaultExpandedKeys(newVal);
       },
-      currentNodeKey(newVal) {
-        this.store.setCurrentNodeKey(newVal);
-        this.store.currentNodeKey = newVal;
-      },
+
       data(newVal) {
         this.store.setData(newVal);
+      },
+
+      checkboxItems(val) {
+        Array.prototype.forEach.call(val, (checkbox) => {
+          checkbox.setAttribute('tabindex', -1);
+        });
+      },
+
+      checkStrictly(newVal) {
+        this.store.checkStrictly = newVal;
       }
     },
 
@@ -123,33 +179,141 @@
         if (!this.filterNodeMethod) throw new Error('[Tree] filterNodeMethod is required when filter');
         this.store.filter(value);
       },
-      getNodeKey(node, index) {
-        const nodeKey = this.nodeKey;
-        if (nodeKey && node) {
-          return node.data[nodeKey];
+
+      getNodeKey(node) {
+        return getNodeKey(this.nodeKey, node.data);
+      },
+
+      getNodePath(data) {
+        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in getNodePath');
+        const node = this.store.getNode(data);
+        if (!node) return [];
+        const path = [node.data];
+        let parent = node.parent;
+        while (parent && parent !== this.root) {
+          path.push(parent.data);
+          parent = parent.parent;
         }
-        return index;
+        return path.reverse();
       },
-      getCheckedNodes(leafOnly) {
-        return this.store.getCheckedNodes(leafOnly);
+
+      getCheckedNodes(leafOnly, includeHalfChecked) {
+        return this.store.getCheckedNodes(leafOnly, includeHalfChecked);
       },
+
       getCheckedKeys(leafOnly) {
         return this.store.getCheckedKeys(leafOnly);
       },
+
+      getCurrentNode() {
+        const currentNode = this.store.getCurrentNode();
+        return currentNode ? currentNode.data : null;
+      },
+
+      getCurrentKey() {
+        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in getCurrentKey');
+        const currentNode = this.getCurrentNode();
+        return currentNode ? currentNode[this.nodeKey] : null;
+      },
+
       setCheckedNodes(nodes, leafOnly) {
         if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedNodes');
         this.store.setCheckedNodes(nodes, leafOnly);
       },
+
       setCheckedKeys(keys, leafOnly) {
-        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedNodes');
+        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedKeys');
         this.store.setCheckedKeys(keys, leafOnly);
       },
+
       setChecked(data, checked, deep) {
         this.store.setChecked(data, checked, deep);
       },
+
+      getHalfCheckedNodes() {
+        return this.store.getHalfCheckedNodes();
+      },
+
+      getHalfCheckedKeys() {
+        return this.store.getHalfCheckedKeys();
+      },
+
+      setCurrentNode(node) {
+        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCurrentNode');
+        this.store.setUserCurrentNode(node);
+      },
+
+      setCurrentKey(key) {
+        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCurrentKey');
+        this.store.setCurrentNodeKey(key);
+      },
+
+      getNode(data) {
+        return this.store.getNode(data);
+      },
+
+      remove(data) {
+        this.store.remove(data);
+      },
+
+      append(data, parentNode) {
+        this.store.append(data, parentNode);
+      },
+
+      insertBefore(data, refNode) {
+        this.store.insertBefore(data, refNode);
+      },
+
+      insertAfter(data, refNode) {
+        this.store.insertAfter(data, refNode);
+      },
+
       handleNodeExpand(nodeData, node, instance) {
         this.broadcast('ElTreeNode', 'tree-node-expand', node);
         this.$emit('node-expand', nodeData, node, instance);
+      },
+
+      updateKeyChildren(key, data) {
+        if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in updateKeyChild');
+        this.store.updateChildren(key, data);
+      },
+
+      initTabIndex() {
+        this.treeItems = this.$el.querySelectorAll('.is-focusable[role=treeitem]');
+        this.checkboxItems = this.$el.querySelectorAll('input[type=checkbox]');
+        const checkedItem = this.$el.querySelectorAll('.is-checked[role=treeitem]');
+        if (checkedItem.length) {
+          checkedItem[0].setAttribute('tabindex', 0);
+          return;
+        }
+        this.treeItems[0] && this.treeItems[0].setAttribute('tabindex', 0);
+      },
+
+      handleKeydown(ev) {
+        const currentItem = ev.target;
+        if (currentItem.className.indexOf('el-tree-node') === -1) return;
+        const keyCode = ev.keyCode;
+        this.treeItems = this.$el.querySelectorAll('.is-focusable[role=treeitem]');
+        const currentIndex = this.treeItemArray.indexOf(currentItem);
+        let nextIndex;
+        if ([38, 40].indexOf(keyCode) > -1) { // up、down
+          ev.preventDefault();
+          if (keyCode === 38) { // up
+            nextIndex = currentIndex !== 0 ? currentIndex - 1 : 0;
+          } else {
+            nextIndex = (currentIndex < this.treeItemArray.length - 1) ? currentIndex + 1 : 0;
+          }
+          this.treeItemArray[nextIndex].focus(); // 选中
+        }
+        if ([37, 39].indexOf(keyCode) > -1) { // left、right 展开
+          ev.preventDefault();
+          currentItem.click(); // 选中
+        }
+        const hasInput = currentItem.querySelector('[type="checkbox"]');
+        if ([13, 32].indexOf(keyCode) > -1 && hasInput) { // space enter选中checkbox
+          ev.preventDefault();
+          hasInput.click();
+        }
       }
     },
 
@@ -164,6 +328,7 @@
         load: this.load,
         currentNodeKey: this.currentNodeKey,
         checkStrictly: this.checkStrictly,
+        checkDescendants: this.checkDescendants,
         defaultCheckedKeys: this.defaultCheckedKeys,
         defaultExpandedKeys: this.defaultExpandedKeys,
         autoExpandParent: this.autoExpandParent,
@@ -172,6 +337,158 @@
       });
 
       this.root = this.store.root;
+
+      let dragState = this.dragState;
+      this.$on('tree-node-drag-start', (event, treeNode) => {
+        if (typeof this.allowDrag === 'function' && !this.allowDrag(treeNode.node)) {
+          event.preventDefault();
+          return false;
+        }
+        event.dataTransfer.effectAllowed = 'move';
+
+        // wrap in try catch to address IE's error when first param is 'text/plain'
+        try {
+          // setData is required for draggable to work in FireFox
+          // the content has to be '' so dragging a node out of the tree won't open a new tab in FireFox
+          event.dataTransfer.setData('text/plain', '');
+        } catch (e) {}
+        dragState.draggingNode = treeNode;
+        this.$emit('node-drag-start', treeNode.node, event);
+      });
+
+      this.$on('tree-node-drag-over', (event, treeNode) => {
+        const dropNode = findNearestComponent(event.target, 'ElTreeNode');
+        const oldDropNode = dragState.dropNode;
+        if (oldDropNode && oldDropNode !== dropNode) {
+          removeClass(oldDropNode.$el, 'is-drop-inner');
+        }
+        const draggingNode = dragState.draggingNode;
+        if (!draggingNode || !dropNode) return;
+
+        let dropPrev = true;
+        let dropInner = true;
+        let dropNext = true;
+        let userAllowDropInner = true;
+        if (typeof this.allowDrop === 'function') {
+          dropPrev = this.allowDrop(draggingNode.node, dropNode.node, 'prev');
+          userAllowDropInner = dropInner = this.allowDrop(draggingNode.node, dropNode.node, 'inner');
+          dropNext = this.allowDrop(draggingNode.node, dropNode.node, 'next');
+        }
+        event.dataTransfer.dropEffect = dropInner ? 'move' : 'none';
+        if ((dropPrev || dropInner || dropNext) && oldDropNode !== dropNode) {
+          if (oldDropNode) {
+            this.$emit('node-drag-leave', draggingNode.node, oldDropNode.node, event);
+          }
+          this.$emit('node-drag-enter', draggingNode.node, dropNode.node, event);
+        }
+
+        if (dropPrev || dropInner || dropNext) {
+          dragState.dropNode = dropNode;
+        }
+
+        if (dropNode.node.nextSibling === draggingNode.node) {
+          dropNext = false;
+        }
+        if (dropNode.node.previousSibling === draggingNode.node) {
+          dropPrev = false;
+        }
+        if (dropNode.node.contains(draggingNode.node, false)) {
+          dropInner = false;
+        }
+        if (draggingNode.node === dropNode.node || draggingNode.node.contains(dropNode.node)) {
+          dropPrev = false;
+          dropInner = false;
+          dropNext = false;
+        }
+
+        const targetPosition = dropNode.$el.getBoundingClientRect();
+        const treePosition = this.$el.getBoundingClientRect();
+
+        let dropType;
+        const prevPercent = dropPrev ? (dropInner ? 0.25 : (dropNext ? 0.45 : 1)) : -1;
+        const nextPercent = dropNext ? (dropInner ? 0.75 : (dropPrev ? 0.55 : 0)) : 1;
+
+        let indicatorTop = -9999;
+        const distance = event.clientY - targetPosition.top;
+        if (distance < targetPosition.height * prevPercent) {
+          dropType = 'before';
+        } else if (distance > targetPosition.height * nextPercent) {
+          dropType = 'after';
+        } else if (dropInner) {
+          dropType = 'inner';
+        } else {
+          dropType = 'none';
+        }
+
+        const iconPosition = dropNode.$el.querySelector('.el-tree-node__expand-icon').getBoundingClientRect();
+        const dropIndicator = this.$refs.dropIndicator;
+        if (dropType === 'before') {
+          indicatorTop = iconPosition.top - treePosition.top;
+        } else if (dropType === 'after') {
+          indicatorTop = iconPosition.bottom - treePosition.top;
+        }
+        dropIndicator.style.top = indicatorTop + 'px';
+        dropIndicator.style.left = (iconPosition.right - treePosition.left) + 'px';
+
+        if (dropType === 'inner') {
+          addClass(dropNode.$el, 'is-drop-inner');
+        } else {
+          removeClass(dropNode.$el, 'is-drop-inner');
+        }
+
+        dragState.showDropIndicator = dropType === 'before' || dropType === 'after';
+        dragState.allowDrop = dragState.showDropIndicator || userAllowDropInner;
+        dragState.dropType = dropType;
+        this.$emit('node-drag-over', draggingNode.node, dropNode.node, event);
+      });
+
+      this.$on('tree-node-drag-end', (event) => {
+        const { draggingNode, dropType, dropNode } = dragState;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'move';
+
+        if (draggingNode && dropNode) {
+          const draggingNodeCopy = { data: draggingNode.node.data };
+          if (dropType !== 'none') {
+            draggingNode.node.remove();
+          }
+          if (dropType === 'before') {
+            dropNode.node.parent.insertBefore(draggingNodeCopy, dropNode.node);
+          } else if (dropType === 'after') {
+            dropNode.node.parent.insertAfter(draggingNodeCopy, dropNode.node);
+          } else if (dropType === 'inner') {
+            dropNode.node.insertChild(draggingNodeCopy);
+          }
+          if (dropType !== 'none') {
+            this.store.registerNode(draggingNodeCopy);
+          }
+
+          removeClass(dropNode.$el, 'is-drop-inner');
+
+          this.$emit('node-drag-end', draggingNode.node, dropNode.node, dropType, event);
+          if (dropType !== 'none') {
+            this.$emit('node-drop', draggingNode.node, dropNode.node, dropType, event);
+          }
+        }
+        if (draggingNode && !dropNode) {
+          this.$emit('node-drag-end', draggingNode.node, null, dropType, event);
+        }
+
+        dragState.showDropIndicator = false;
+        dragState.draggingNode = null;
+        dragState.dropNode = null;
+        dragState.allowDrop = true;
+      });
+    },
+
+    mounted() {
+      this.initTabIndex();
+      this.$el.addEventListener('keydown', this.handleKeydown);
+    },
+
+    updated() {
+      this.treeItems = this.$el.querySelectorAll('[role=treeitem]');
+      this.checkboxItems = this.$el.querySelectorAll('input[type=checkbox]');
     }
   };
 </script>
diff --git a/packages/upload/README.md b/packages/upload/README.md
deleted file mode 100644
index 64dea7e57d..0000000000
--- a/packages/upload/README.md
+++ /dev/null
@@ -1,67 +0,0 @@
-# element-upload
-> A element-upload component for Vue.js.
-
-## Demo
-http://element-component.github.io/element-upload
-
-## Installation
-```shell
-npm i element-upload -D
-```
-
-## Usage
-```javascript
-import Vue from 'vue'
-import ElUpload from 'element-upload'
-import 'element-theme-default/dist/upload.css'
-
-Vue.use(ElUpload)
-```
-
-or
-
-```javascript
-import Vue from 'vue'
-import ElUpload from 'element-upload'
-
-Vue.component('el-upload', ElUpload)
-```
-
-### Attribute
-| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
-|---------- |-------------- |---------- |--------------------------------  |-------- |
-| action | 必选参数, 上传的地址 | string | — | — |
-| headers | 可选参数, 设置上传的请求头部 | object | — | — |
-| multiple | 可选参数, 是否支持多选文件 | boolean | — | — |
-| data | 可选参数, 上传时附带的额外参数 | object | — | — |
-| name | 可选参数, 上传的文件字段名 | string | — | file |
-| with-credentials | 支持发送 cookie 凭证信息 | boolean | — | false |
-| show-file-list | 是否显示已上传文件列表 | boolean | — | true |
-| type | 上传控件类型 | string | select,drag | select |
-| accept | 可选参数, 接受上传的[文件类型](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept)（thumbnail-mode 模式下此参数无效）| string | — | — |
-| on-preview | 可选参数, 点击已上传的文件链接时的钩子, 可以通过 file.response 拿到服务端返回数据 | function(file) | — | — |
-| on-remove | 可选参数, 文件列表移除文件时的钩子 | function(file, fileList) | — | — |
-| on-success | 可选参数, 文件上传成功时的钩子 | function(response, file, fileList) | — | — |
-| on-error | 可选参数, 文件上传失败时的钩子 | function(err, response, file) | — | — |
-| before-upload | 可选参数, 上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传。 | function(file) | — | — |
-| thumbnail-mode | 是否设置为图片模式，该模式下会显示图片缩略图 | boolean | — | false |
-| default-file-list | 默认已上传的文件列表, 例如: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}] | array | — | [] |
-
-### Methods
-| 方法名      | 说明          | 参数 |
-|---------- |-------------- | - |
-| clearFiles | 清空已上传的文件列表 | — |
-
-## Development
-```shell
-make dev
-
-## test
-make test
-
-## build
-make build
-```
-
-# License
-[MIT](https://opensource.org/licenses/MIT)
diff --git a/packages/upload/cooking.conf.js b/packages/upload/cooking.conf.js
deleted file mode 100644
index d20431e137..0000000000
--- a/packages/upload/cooking.conf.js
+++ /dev/null
@@ -1,6 +0,0 @@
-var cooking = require('cooking');
-var gen = require('../../build/gen-single-config');
-
-cooking.set(gen(__dirname, 'ElUpload'));
-
-module.exports = cooking.resolve();
diff --git a/packages/upload/package.json b/packages/upload/package.json
deleted file mode 100644
index 240f6d2aa3..0000000000
--- a/packages/upload/package.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "name": "element-upload",
-  "version": "1.0.0",
-  "description": "A upload component for Vue.js.",
-  "keywords": [
-    "element",
-    "vue",
-    "component"
-  ],
-  "main": "./lib/index.js",
-  "repository": "https://github.com/ElemeFE/element/tree/master/packages/upload",
-  "author": "elemefe",
-  "license": "MIT",
-  "dependencies": {},
-  "devDependencies": {}
-}
diff --git a/packages/upload/src/ajax.js b/packages/upload/src/ajax.js
index de05bdb7c7..e5744c4c88 100644
--- a/packages/upload/src/ajax.js
+++ b/packages/upload/src/ajax.js
@@ -1,9 +1,9 @@
 function getError(action, option, xhr) {
   let msg;
   if (xhr.response) {
-    msg = `${xhr.status} ${xhr.response.error || xhr.response}`;
+    msg = `${xhr.response.error || xhr.response}`;
   } else if (xhr.responseText) {
-    msg = `${xhr.status} ${xhr.responseText}`;
+    msg = `${xhr.responseText}`;
   } else {
     msg = `fail to post ${action} ${xhr.status}`;
   }
@@ -48,12 +48,12 @@ export default function upload(option) {
   const formData = new FormData();
 
   if (option.data) {
-    Object.keys(option.data).map(key => {
+    Object.keys(option.data).forEach(key => {
       formData.append(key, option.data[key]);
     });
   }
 
-  formData.append(option.filename, option.file);
+  formData.append(option.filename, option.file, option.file.name);
 
   xhr.onerror = function error(e) {
     option.onError(e);
diff --git a/packages/upload/src/iframe-upload.vue b/packages/upload/src/iframe-upload.vue
deleted file mode 100644
index bd2233a046..0000000000
--- a/packages/upload/src/iframe-upload.vue
+++ /dev/null
@@ -1,160 +0,0 @@
-<script>
-import UploadDragger from './upload-dragger.vue';
-
-export default {
-  components: {
-    UploadDragger
-  },
-  props: {
-    type: String,
-    data: {},
-    action: {
-      type: String,
-      required: true
-    },
-    name: {
-      type: String,
-      default: 'file'
-    },
-    withCredentials: Boolean,
-    accept: String,
-    onStart: Function,
-    onProgress: Function,
-    onSuccess: Function,
-    onError: Function,
-    beforeUpload: Function,
-    onPreview: {
-      type: Function,
-      default: function() {}
-    },
-    onRemove: {
-      type: Function,
-      default: function() {}
-    },
-    drag: Boolean,
-    listType: String,
-    disabled: Boolean
-  },
-
-  data() {
-    return {
-      mouseover: false,
-      domain: '',
-      file: null,
-      submitting: false
-    };
-  },
-
-  methods: {
-    isImage(str) {
-      return str.indexOf('image') !== -1;
-    },
-    handleClick() {
-      if (!this.disabled) {
-        this.$refs.input.click();
-      }
-    },
-    handleChange(ev) {
-      const file = ev.target.value;
-      if (file) {
-        this.uploadFiles(file);
-      }
-    },
-    uploadFiles(file) {
-      if (this.submitting) return;
-      this.submitting = true;
-      this.file = file;
-      this.onStart(file);
-
-      const formNode = this.getFormNode();
-      const dataSpan = this.getFormDataNode();
-      let data = this.data;
-      if (typeof data === 'function') {
-        data = data(file);
-      }
-      const inputs = [];
-      for (const key in data) {
-        if (data.hasOwnProperty(key)) {
-          inputs.push(`<input name="${key}" value="${data[key]}"/>`);
-        }
-      }
-      dataSpan.innerHTML = inputs.join('');
-      formNode.submit();
-      dataSpan.innerHTML = '';
-    },
-    getFormNode() {
-      return this.$refs.form;
-    },
-    getFormDataNode() {
-      return this.$refs.data;
-    }
-  },
-
-  created() {
-    this.frameName = 'frame-' + Date.now();
-  },
-
-  mounted() {
-    const self = this;
-    !this.$isServer && window.addEventListener('message', (event) => {
-      if (!self.file) return;
-      var targetOrigin = new URL(self.action).origin;
-      if (event.origin !== targetOrigin) return;
-      var response = event.data;
-      if (response.result === 'success') {
-        self.onSuccess(response, self.file);
-      } else if (response.result === 'failed') {
-        self.onError(response, self.file);
-      }
-      self.submitting = false;
-      self.file = null;
-    }, false);
-  },
-
-  render(h) {
-    const {
-      drag,
-      uploadFiles,
-      listType,
-      frameName,
-      disabled
-    } = this;
-    const oClass = { 'el-upload': true };
-    oClass[`el-upload--${listType}`] = true;
-
-    return (
-      <div
-        class={oClass}
-        on-click={this.handleClick}
-        nativeOn-drop={this.onDrop}
-        nativeOn-dragover={this.handleDragover}
-        nativeOn-dragleave={this.handleDragleave}
-      >
-        <iframe
-          on-load={this.onload}
-          ref="iframe"
-          name={frameName}
-        >
-        </iframe>
-        <form ref="form" action={this.action} target={frameName} enctype="multipart/form-data" method="POST">
-          <input
-            class="el-upload__input"
-            type="file"
-            ref="input"
-            name="file"
-            on-change={this.handleChange}
-            accept={this.accept}>
-          </input>
-          <input type="hidden" name="documentDomain" value={ this.$isServer ? '' : document.domain } />
-          <span ref="data"></span>
-        </form>
-        {
-          drag
-          ? <upload-dragger on-file={uploadFiles} disabled={disabled}>{this.$slots.default}</upload-dragger>
-          : this.$slots.default
-        }
-      </div>
-    );
-  }
-};
-</script>
diff --git a/packages/upload/src/index.vue b/packages/upload/src/index.vue
index 58b37b23a1..e050524baf 100644
--- a/packages/upload/src/index.vue
+++ b/packages/upload/src/index.vue
@@ -1,7 +1,6 @@
 <script>
 import UploadList from './upload-list';
 import Upload from './upload';
-import IframeUpload from './iframe-upload';
 import ElProgress from 'element-ui/packages/progress';
 import Migrating from 'element-ui/src/mixins/migrating';
 
@@ -15,12 +14,19 @@ export default {
   components: {
     ElProgress,
     UploadList,
-    Upload,
-    IframeUpload
+    Upload
   },
 
-  provide: {
-    uploader: this
+  provide() {
+    return {
+      uploader: this
+    };
+  },
+
+  inject: {
+    elForm: {
+      default: ''
+    }
   },
 
   props: {
@@ -53,6 +59,7 @@ export default {
       default: 'select'
     },
     beforeUpload: Function,
+    beforeRemove: Function,
     onRemove: {
       type: Function,
       default: noop
@@ -88,10 +95,15 @@ export default {
     },
     listType: {
       type: String,
-      default: 'text'   // text,picture,picture-card
+      default: 'text' // text,picture,picture-card
     },
     httpRequest: Function,
-    disabled: Boolean
+    disabled: Boolean,
+    limit: Number,
+    onExceed: {
+      type: Function,
+      default: noop
+    }
   },
 
   data() {
@@ -103,13 +115,19 @@ export default {
     };
   },
 
+  computed: {
+    uploadDisabled() {
+      return this.disabled || (this.elForm || {}).disabled;
+    }
+  },
+
   watch: {
     fileList: {
       immediate: true,
       handler(fileList) {
         this.uploadFiles = fileList.map(item => {
           item.uid = item.uid || (Date.now() + this.tempIndex++);
-          item.status = 'success';
+          item.status = item.status || 'success';
           return item;
         });
       }
@@ -128,24 +146,26 @@ export default {
         raw: rawFile
       };
 
-      try {
-        file.url = URL.createObjectURL(rawFile);
-      } catch (err) {
-        console.error(err);
-        return;
+      if (this.listType === 'picture-card' || this.listType === 'picture') {
+        try {
+          file.url = URL.createObjectURL(rawFile);
+        } catch (err) {
+          console.error('[Element Error][Upload]', err);
+          return;
+        }
       }
 
       this.uploadFiles.push(file);
       this.onChange(file, this.uploadFiles);
     },
     handleProgress(ev, rawFile) {
-      var file = this.getFile(rawFile);
+      const file = this.getFile(rawFile);
       this.onProgress(ev, file, this.uploadFiles);
       file.status = 'uploading';
       file.percentage = ev.percent || 0;
     },
     handleSuccess(res, rawFile) {
-      var file = this.getFile(rawFile);
+      const file = this.getFile(rawFile);
 
       if (file) {
         file.status = 'success';
@@ -156,8 +176,8 @@ export default {
       }
     },
     handleError(err, rawFile) {
-      var file = this.getFile(rawFile);
-      var fileList = this.uploadFiles;
+      const file = this.getFile(rawFile);
+      const fileList = this.uploadFiles;
 
       file.status = 'fail';
 
@@ -170,14 +190,29 @@ export default {
       if (raw) {
         file = this.getFile(raw);
       }
-      this.abort(file);
-      var fileList = this.uploadFiles;
-      fileList.splice(fileList.indexOf(file), 1);
-      this.onRemove(file, fileList);
+      let doRemove = () => {
+        this.abort(file);
+        let fileList = this.uploadFiles;
+        fileList.splice(fileList.indexOf(file), 1);
+        this.onRemove(file, fileList);
+      };
+
+      if (!this.beforeRemove) {
+        doRemove();
+      } else if (typeof this.beforeRemove === 'function') {
+        const before = this.beforeRemove(file, this.uploadFiles);
+        if (before && before.then) {
+          before.then(() => {
+            doRemove();
+          }, noop);
+        } else if (before !== false) {
+          doRemove();
+        }
+      }
     },
     getFile(rawFile) {
-      var fileList = this.uploadFiles;
-      var target;
+      let fileList = this.uploadFiles;
+      let target;
       fileList.every(item => {
         target = rawFile.uid === item.uid ? item : null;
         return !target;
@@ -208,13 +243,21 @@ export default {
     }
   },
 
+  beforeDestroy() {
+    this.uploadFiles.forEach(file => {
+      if (file.url && file.url.indexOf('blob:') === 0) {
+        URL.revokeObjectURL(file.url);
+      }
+    });
+  },
+
   render(h) {
-    var uploadList;
+    let uploadList;
 
     if (this.showFileList) {
       uploadList = (
         <UploadList
-          disabled={this.disabled}
+          disabled={this.uploadDisabled}
           listType={this.listType}
           files={this.uploadFiles}
           on-remove={this.handleRemove}
@@ -223,7 +266,7 @@ export default {
       );
     }
 
-    var uploadData = {
+    const uploadData = {
       props: {
         type: this.type,
         drag: this.drag,
@@ -238,7 +281,9 @@ export default {
         fileList: this.uploadFiles,
         autoUpload: this.autoUpload,
         listType: this.listType,
-        disabled: this.disabled,
+        disabled: this.uploadDisabled,
+        limit: this.limit,
+        'on-exceed': this.onExceed,
         'on-start': this.handleStart,
         'on-progress': this.handleProgress,
         'on-success': this.handleSuccess,
@@ -251,17 +296,15 @@ export default {
     };
 
     const trigger = this.$slots.trigger || this.$slots.default;
-    const uploadComponent = (typeof FormData !== 'undefined' || this.$isServer)
-        ? <upload {...uploadData}>{trigger}</upload>
-        : <iframeUpload {...uploadData}>{trigger}</iframeUpload>;
+    const uploadComponent = <upload {...uploadData}>{trigger}</upload>;
 
     return (
       <div>
         { this.listType === 'picture-card' ? uploadList : ''}
         {
           this.$slots.trigger
-          ? [uploadComponent, this.$slots.default]
-          : uploadComponent
+            ? [uploadComponent, this.$slots.default]
+            : uploadComponent
         }
         {this.$slots.tip}
         { this.listType !== 'picture-card' ? uploadList : ''}
diff --git a/packages/upload/src/upload-dragger.vue b/packages/upload/src/upload-dragger.vue
index c718076e36..b3293c6f53 100644
--- a/packages/upload/src/upload-dragger.vue
+++ b/packages/upload/src/upload-dragger.vue
@@ -17,6 +17,11 @@
     props: {
       disabled: Boolean
     },
+    inject: {
+      uploader: {
+        default: ''
+      }
+    },
     data() {
       return {
         dragover: false
@@ -29,10 +34,35 @@
         }
       },
       onDrop(e) {
-        if (!this.disabled) {
-          this.dragover = false;
+        if (this.disabled || !this.uploader) return;
+        const accept = this.uploader.accept;
+        this.dragover = false;
+        if (!accept) {
           this.$emit('file', e.dataTransfer.files);
+          return;
         }
+        this.$emit('file', [].slice.call(e.dataTransfer.files).filter(file => {
+          const { type, name } = file;
+          const extension = name.indexOf('.') > -1
+            ? `.${ name.split('.').pop() }`
+            : '';
+          const baseType = type.replace(/\/.*$/, '');
+          return accept.split(',')
+            .map(type => type.trim())
+            .filter(type => type)
+            .some(acceptedType => {
+              if (/\..+$/.test(acceptedType)) {
+                return extension === acceptedType;
+              }
+              if (/\/\*$/.test(acceptedType)) {
+                return baseType === acceptedType.replace(/\/\*$/, '');
+              }
+              if (/^[^\/]+\/[^\/]+$/.test(acceptedType)) {
+                return type === acceptedType;
+              }
+              return false;
+            });
+        }));
       }
     }
   };
diff --git a/packages/upload/src/upload-list.vue b/packages/upload/src/upload-list.vue
index f29ea3b00e..ce9e7c2605 100644
--- a/packages/upload/src/upload-list.vue
+++ b/packages/upload/src/upload-list.vue
@@ -9,9 +9,14 @@
     name="el-list"
   >
     <li
-      v-for="(file, index) in files"
-      :class="['el-upload-list__item', 'is-' + file.status]"
-      :key="index"
+      v-for="file in files"
+      :class="['el-upload-list__item', 'is-' + file.status, focusing ? 'focusing' : '']"
+      :key="file.uid"
+      tabindex="0"
+      @keydown.delete="!disabled && $emit('remove', file)"
+      @focus="focusing = true"
+      @blur="focusing = false"
+      @click="focusing = false"
     >
       <img
         class="el-upload-list__item-thumbnail"
@@ -29,6 +34,7 @@
         }"></i>
       </label>
       <i class="el-icon-close" v-if="!disabled" @click="$emit('remove', file)"></i>
+      <i class="el-icon-close-tip" v-if="!disabled">{{ t('el.upload.deleteTip') }}</i> <!--因为close按钮只在li:focus的时候 display, li blur后就不存在了，所以键盘导航时永远无法 focus到 close按钮上-->
       <el-progress
         v-if="file.status === 'uploading'"
         :type="listType === 'picture-card' ? 'circle' : 'line'"
@@ -41,14 +47,14 @@
           v-if="handlePreview && listType === 'picture-card'"
           @click="handlePreview(file)"
         >
-          <i class="el-icon-view"></i>
+          <i class="el-icon-zoom-in"></i>
         </span>
         <span
           v-if="!disabled"
           class="el-upload-list__item-delete"
           @click="$emit('remove', file)"
         >
-          <i class="el-icon-delete2"></i>
+          <i class="el-icon-delete"></i>
         </span>
       </span>
     </li>
@@ -59,8 +65,16 @@
   import ElProgress from 'element-ui/packages/progress';
 
   export default {
+
+    name: 'ElUploadList',
+
     mixins: [Locale],
 
+    data() {
+      return {
+        focusing: false
+      };
+    },
     components: { ElProgress },
 
     props: {
diff --git a/packages/upload/src/upload.vue b/packages/upload/src/upload.vue
index 4caa6c7b2a..200ca0ac91 100644
--- a/packages/upload/src/upload.vue
+++ b/packages/upload/src/upload.vue
@@ -43,7 +43,9 @@ export default {
       type: Function,
       default: ajax
     },
-    disabled: Boolean
+    disabled: Boolean,
+    limit: Number,
+    onExceed: Function
   },
 
   data() {
@@ -64,6 +66,11 @@ export default {
       this.uploadFiles(files);
     },
     uploadFiles(files) {
+      if (this.limit && this.fileList.length + files.length > this.limit) {
+        this.onExceed && this.onExceed(files, this.fileList);
+        return;
+      }
+
       let postFiles = Array.prototype.slice.call(files);
       if (!this.multiple) { postFiles = postFiles.slice(0, 1); }
 
@@ -74,7 +81,7 @@ export default {
         if (this.autoUpload) this.upload(rawFile);
       });
     },
-    upload(rawFile, file) {
+    upload(rawFile) {
       this.$refs.input.value = null;
 
       if (!this.beforeUpload) {
@@ -84,18 +91,30 @@ export default {
       const before = this.beforeUpload(rawFile);
       if (before && before.then) {
         before.then(processedFile => {
-          if (Object.prototype.toString.call(processedFile) === '[object File]') {
+          const fileType = Object.prototype.toString.call(processedFile);
+
+          if (fileType === '[object File]' || fileType === '[object Blob]') {
+            if (fileType === '[object Blob]') {
+              processedFile = new File([processedFile], rawFile.name, {
+                type: rawFile.type
+              });
+            }
+            for (const p in rawFile) {
+              if (rawFile.hasOwnProperty(p)) {
+                processedFile[p] = rawFile[p];
+              }
+            }
             this.post(processedFile);
           } else {
             this.post(rawFile);
           }
         }, () => {
-          this.onRemove(rawFile, true);
+          this.onRemove(null, rawFile);
         });
       } else if (before !== false) {
         this.post(rawFile);
       } else {
-        this.onRemove(rawFile, true);
+        this.onRemove(null, rawFile);
       }
     },
     abort(file) {
@@ -145,6 +164,12 @@ export default {
         this.$refs.input.value = null;
         this.$refs.input.click();
       }
+    },
+    handleKeydown(e) {
+      if (e.target !== e.currentTarget) return;
+      if (e.keyCode === 13 || e.keyCode === 32) {
+        this.handleClick();
+      }
     }
   },
 
@@ -158,23 +183,25 @@ export default {
       accept,
       listType,
       uploadFiles,
-      disabled
+      disabled,
+      handleKeydown
     } = this;
     const data = {
       class: {
         'el-upload': true
       },
       on: {
-        click: handleClick
+        click: handleClick,
+        keydown: handleKeydown
       }
     };
     data.class[`el-upload--${listType}`] = true;
     return (
-      <div {...data}>
+      <div {...data} tabindex="0" >
         {
           drag
-          ? <upload-dragger disabled={disabled} on-file={uploadFiles}>{this.$slots.default}</upload-dragger>
-          : this.$slots.default
+            ? <upload-dragger disabled={disabled} on-file={uploadFiles}>{this.$slots.default}</upload-dragger>
+            : this.$slots.default
         }
         <input class="el-upload__input" type="file" ref="input" name={name} on-change={handleChange} multiple={multiple} accept={accept}></input>
       </div>
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000000..6c2f748992
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,20 @@
+module.exports = {
+  plugins: {
+    'postcss-salad': {
+      browsers: ['ie > 8', 'last 2 versions'],
+      features: {
+        bem: {
+          shortcuts: {
+            component: 'b',
+            modifier: 'm',
+            descendent: 'e'
+          },
+          separators: {
+            descendent: '__',
+            modifier: '--'
+          }
+        }
+      }
+    }
+  }
+};
diff --git a/src/directives/mousewheel.js b/src/directives/mousewheel.js
new file mode 100644
index 0000000000..d8cbad5e54
--- /dev/null
+++ b/src/directives/mousewheel.js
@@ -0,0 +1,18 @@
+import normalizeWheel from 'normalize-wheel';
+
+const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+
+const mousewheel = function(element, callback) {
+  if (element && element.addEventListener) {
+    element.addEventListener(isFirefox ? 'DOMMouseScroll' : 'mousewheel', function(event) {
+      const normalized = normalizeWheel(event);
+      callback && callback.apply(this, [event, normalized]);
+    });
+  }
+};
+
+export default {
+  bind(el, binding) {
+    mousewheel(el, binding.value);
+  }
+};
diff --git a/src/directives/repeat-click.js b/src/directives/repeat-click.js
new file mode 100644
index 0000000000..32094c6e9b
--- /dev/null
+++ b/src/directives/repeat-click.js
@@ -0,0 +1,24 @@
+import { once, on } from 'element-ui/src/utils/dom';
+
+export default {
+  bind(el, binding, vnode) {
+    let interval = null;
+    let startTime;
+    const handler = () => vnode.context[binding.expression].apply();
+    const clear = () => {
+      if (new Date() - startTime < 100) {
+        handler();
+      }
+      clearInterval(interval);
+      interval = null;
+    };
+
+    on(el, 'mousedown', (e) => {
+      if (e.button !== 0) return;
+      startTime = new Date();
+      once(document, 'mouseup', clear);
+      clearInterval(interval);
+      interval = setInterval(handler, 100);
+    });
+  }
+};
diff --git a/src/index.js b/src/index.js
index 8a806c95b0..893444843c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,4 @@
-/* Automatic generated by './build/bin/build-entry.js' */
+/* Automatically generated by './build/bin/build-entry.js' */
 
 import Pagination from '../packages/pagination/index.js';
 import Dialog from '../packages/dialog/index.js';
@@ -64,6 +64,11 @@ import CollapseItem from '../packages/collapse-item/index.js';
 import Cascader from '../packages/cascader/index.js';
 import ColorPicker from '../packages/color-picker/index.js';
 import Transfer from '../packages/transfer/index.js';
+import Container from '../packages/container/index.js';
+import Header from '../packages/header/index.js';
+import Aside from '../packages/aside/index.js';
+import Main from '../packages/main/index.js';
+import Footer from '../packages/footer/index.js';
 import locale from 'element-ui/src/locale';
 import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
 
@@ -128,21 +133,29 @@ const components = [
   Cascader,
   ColorPicker,
   Transfer,
+  Container,
+  Header,
+  Aside,
+  Main,
+  Footer,
   CollapseTransition
 ];
 
 const install = function(Vue, opts = {}) {
-  /* istanbul ignore if */
-  if (install.installed) return;
   locale.use(opts.locale);
   locale.i18n(opts.i18n);
 
-  components.map(component => {
+  components.forEach(component => {
     Vue.component(component.name, component);
   });
 
   Vue.use(Loading.directive);
 
+  Vue.prototype.$ELEMENT = {
+    size: opts.size || '',
+    zIndex: opts.zIndex || 2000
+  };
+
   Vue.prototype.$loading = Loading.service;
   Vue.prototype.$msgbox = MessageBox;
   Vue.prototype.$alert = MessageBox.alert;
@@ -150,15 +163,16 @@ const install = function(Vue, opts = {}) {
   Vue.prototype.$prompt = MessageBox.prompt;
   Vue.prototype.$notify = Notification;
   Vue.prototype.$message = Message;
+
 };
 
 /* istanbul ignore if */
 if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);
-};
+}
 
 module.exports = {
-  version: '1.4.1',
+  version: '2.4.9',
   locale: locale.use,
   i18n: locale.i18n,
   install,
@@ -226,5 +240,12 @@ module.exports = {
   CollapseItem,
   Cascader,
   ColorPicker,
-  Transfer
+  Transfer,
+  Container,
+  Header,
+  Aside,
+  Main,
+  Footer
 };
+
+module.exports.default = module.exports;
diff --git a/src/locale/lang/af-ZA.js b/src/locale/lang/af-ZA.js
index df6505b6fb..5f09d42e7c 100644
--- a/src/locale/lang/af-ZA.js
+++ b/src/locale/lang/af-ZA.js
@@ -16,6 +16,10 @@ export default {
       startTime: 'Begintyd',
       endDate: 'Einddatum',
       endTime: 'Eindtyd',
+      prevYear: 'Previous Year', // to be translated
+      nextYear: 'Next Year', // to be translated
+      prevMonth: 'Previous Month', // to be translated
+      nextMonth: 'Next Month', // to be translated
       year: 'Jaar',
       month1: 'Jan',
       month2: 'Feb',
@@ -78,6 +82,7 @@ export default {
       error: 'Ongeldige invoer'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Verwyder',
       preview: 'Voorskou',
       continue: 'Gaan voort'
diff --git a/src/locale/lang/ar.js b/src/locale/lang/ar.js
new file mode 100644
index 0000000000..251f68d4ed
--- /dev/null
+++ b/src/locale/lang/ar.js
@@ -0,0 +1,108 @@
+export default {
+  el: {
+    colorpicker: {
+      confirm: 'موافق',
+      clear: 'إزالة'
+    },
+    datepicker: {
+      now: 'الآن',
+      today: 'اليوم',
+      cancel: 'إلغاء',
+      clear: 'إزالة',
+      confirm: 'موافق',
+      selectDate: 'أختر التاريخ',
+      selectTime: 'أختر الوقت',
+      startDate: 'تاريخ البدء',
+      startTime: 'وقت البدء',
+      endDate: 'تاريخ الانتهاء',
+      endTime: 'وقت الانتهاء',
+      prevYear: 'Previous Year', // to be translated
+      nextYear: 'Next Year', // to be translated
+      prevMonth: 'Previous Month', // to be translated
+      nextMonth: 'Next Month', // to be translated
+      year: '',
+      month1: 'يناير',
+      month2: 'فبراير',
+      month3: 'مارس',
+      month4: 'ابريل',
+      month5: 'مايو',
+      month6: 'يونيو',
+      month7: 'يوليو',
+      month8: 'أغسطس',
+      month9: 'سبتمبر',
+      month10: 'أكتوبر',
+      month11: 'نوفمبر',
+      month12: 'ديسمبر',
+      week: 'أسبوع',
+      weeks: {
+        sun: 'الأحد',
+        mon: 'الأثنين',
+        tue: 'الثلاثاء',
+        wed: 'الأربعاء',
+        thu: 'الخميس',
+        fri: 'الجمعة',
+        sat: 'السبت'
+      },
+      months: {
+        jan: 'يناير',
+        feb: 'فبراير',
+        mar: 'مارس',
+        apr: 'أبريل',
+        may: 'مايو',
+        jun: 'يونيو',
+        jul: 'يوليو',
+        aug: 'أغسطس',
+        sep: 'سبتمبر',
+        oct: 'أكتوبر',
+        nov: 'نوفمبر',
+        dec: 'ديسمبر'
+      }
+    },
+    select: {
+      loading: 'جار التحميل',
+      noMatch: 'لايوجد بيانات مطابقة',
+      noData: 'لايوجد بيانات',
+      placeholder: 'أختر'
+    },
+    cascader: {
+      noMatch: 'لايوجد بيانات مطابقة',
+      loading: 'جار التحميل',
+      placeholder: 'أختر'
+    },
+    pagination: {
+      goto: 'أذهب إلى',
+      pagesize: '/صفحة',
+      total: 'الكل {total}',
+      pageClassifier: ''
+    },
+    messagebox: {
+      title: 'الرسالة',
+      confirm: 'موافق',
+      cancel: 'إلغاء',
+      error: 'مدخل غير صحيح'
+    },
+    upload: {
+      delete: 'حذف',
+      preview: 'عرض',
+      continue: 'إستمرار'
+    },
+    table: {
+      emptyText: 'لايوجد بيانات',
+      confirmFilter: 'تأكيد',
+      resetFilter: 'حذف',
+      clearFilter: 'الكل',
+      sumText: 'المجموع'
+    },
+    tree: {
+      emptyText: 'لايوجد بيانات'
+    },
+    transfer: {
+      noMatch: 'لايوجد بيانات مطابقة',
+      noData: 'لايوجد بيانات',
+      titles: ['قائمة 1', 'قائمة 2'],
+      filterPlaceholder: 'ادخل كلمة',
+      noCheckedFormat: '{total} عناصر',
+      hasCheckedFormat: '{checked}/{total} مختار'
+    }
+  }
+};
diff --git a/src/locale/lang/bg.js b/src/locale/lang/bg.js
index d08be849ac..a8ab931313 100644
--- a/src/locale/lang/bg.js
+++ b/src/locale/lang/bg.js
@@ -16,6 +16,10 @@ export default {
       startTime: 'Начален час',
       endDate: 'Крайна дата',
       endTime: 'Краен час',
+      prevYear: 'Previous Year', // to be translated
+      nextYear: 'Next Year', // to be translated
+      prevMonth: 'Previous Month', // to be translated
+      nextMonth: 'Next Month', // to be translated
       year: '',
       month1: 'Януари',
       month2: 'Февруари',
@@ -78,6 +82,7 @@ export default {
       error: 'Невалидни данни'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Изтрий',
       preview: 'Прегледай',
       continue: 'Продължи'
diff --git a/src/locale/lang/ca.js b/src/locale/lang/ca.js
index f14b30dfdd..c0ea1542a1 100644
--- a/src/locale/lang/ca.js
+++ b/src/locale/lang/ca.js
@@ -16,6 +16,10 @@ export default {
       startTime: 'Hora Inici',
       endDate: 'Data Final',
       endTime: 'Hora Final',
+      prevYear: 'Previous Year', // to be translated
+      nextYear: 'Next Year', // to be translated
+      prevMonth: 'Previous Month', // to be translated
+      nextMonth: 'Next Month', // to be translated
       year: 'Any',
       month1: 'Gener',
       month2: 'Febrer',
@@ -77,6 +81,7 @@ export default {
       error: 'Entrada invàlida'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Eliminar',
       preview: 'Vista Prèvia',
       continue: 'Continuar'
diff --git a/src/locale/lang/cz.js b/src/locale/lang/cs-CZ.js
similarity index 78%
rename from src/locale/lang/cz.js
rename to src/locale/lang/cs-CZ.js
index 492c16e2ef..6529ac6198 100644
--- a/src/locale/lang/cz.js
+++ b/src/locale/lang/cs-CZ.js
@@ -12,10 +12,14 @@ export default {
       confirm: 'OK',
       selectDate: 'Vybrat datum',
       selectTime: 'Vybrat čas',
-      startDate: 'Datum Začátku',
-      startTime: 'Čas Začátku',
-      endDate: 'Datum Konce',
-      endTime: 'Čas Konce',
+      startDate: 'Datum začátku',
+      startTime: 'Čas začátku',
+      endDate: 'Datum konce',
+      endTime: 'Čas konce',
+      prevYear: 'Předchozí rok',
+      nextYear: 'Příští rok',
+      prevMonth: 'Předchozí měsíc',
+      nextMonth: 'Příští měsíc',
       day: 'Den',
       week: 'Týden',
       month: 'Měsíc',
@@ -70,7 +74,7 @@ export default {
     pagination: {
       goto: 'Jít na',
       pagesize: 'na stranu',
-      total: 'Vše {total}',
+      total: 'Celkem {total}',
       pageClassifier: ''
     },
     messagebox: {
@@ -80,6 +84,7 @@ export default {
       error: 'Neplatný vstup'
     },
     upload: {
+      deleteTip: 'Stisknout pro smazání',
       delete: 'Vymazat',
       preview: 'Náhled',
       continue: 'Pokračovat'
@@ -89,7 +94,7 @@ export default {
       confirmFilter: 'Potvrdit',
       resetFilter: 'Resetovat',
       clearFilter: 'Vše',
-      sumText: 'Sum' // to be translated
+      sumText: 'Celkem'
     },
     tree: {
       emptyText: 'Žádná data'
@@ -97,10 +102,10 @@ export default {
     transfer: {
       noMatch: 'Žádná shoda',
       noData: 'Žádná data',
-      titles: ['List 1', 'List 2'], // to be translated
-      filterPlaceholder: 'Enter keyword', // to be translated
-      noCheckedFormat: '{total} items', // to be translated
-      hasCheckedFormat: '{checked}/{total} checked' // to be translated
+      titles: ['Seznam 1', 'Seznam 2'],
+      filterPlaceholder: 'Klíčové slovo',
+      noCheckedFormat: '{total} položek',
+      hasCheckedFormat: '{checked}/{total} vybráno'
     }
   }
 };
diff --git a/src/locale/lang/da.js b/src/locale/lang/da.js
index 8856e08f94..3501e62ac0 100644
--- a/src/locale/lang/da.js
+++ b/src/locale/lang/da.js
@@ -16,7 +16,11 @@ export default {
       startTime: 'Starttidspunkt',
       endDate: 'Slutdato',
       endTime: 'Sluttidspunkt',
-      year: 'År',
+      prevYear: 'Forrige år',
+      nextYear: 'Næste år',
+      prevMonth: 'Forrige måned',
+      nextMonth: 'Næste måned',
+      year: '',
       month1: 'Januar',
       month2: 'Februar',
       month3: 'Marts',
@@ -77,6 +81,7 @@ export default {
       error: 'Ugyldig input'
     },
     upload: {
+      deleteTip: 'tryk slet for at fjerne',
       delete: 'Slet',
       preview: 'Forhåndsvisning',
       continue: 'Fortsæt'
@@ -86,7 +91,7 @@ export default {
       confirmFilter: 'Bekræft',
       resetFilter: 'Nulstil',
       clearFilter: 'Alle',
-      sumText: 'Sum' // to be translated
+      sumText: 'Sum'
     },
     tree: {
       emptyText: 'Ingen data'
@@ -94,10 +99,10 @@ export default {
     transfer: {
       noMatch: 'Ingen matchende data',
       noData: 'Ingen data',
-      titles: ['List 1', 'List 2'], // to be translated
-      filterPlaceholder: 'Enter keyword', // to be translated
-      noCheckedFormat: '{total} items', // to be translated
-      hasCheckedFormat: '{checked}/{total} checked' // to be translated
+      titles: ['Liste 1', 'Liste 2'],
+      filterPlaceholder: 'Indtast søgeord',
+      noCheckedFormat: '{total} emner',
+      hasCheckedFormat: '{checked}/{total} valgt'
     }
   }
 };
diff --git a/src/locale/lang/de.js b/src/locale/lang/de.js
index 6b489edae6..84877c494a 100644
--- a/src/locale/lang/de.js
+++ b/src/locale/lang/de.js
@@ -16,6 +16,10 @@ export default {
       startTime: 'Startzeit',
       endDate: 'Enddatum',
       endTime: 'Endzeit',
+      prevYear: 'Letztes Jahr',
+      nextYear: 'Nächtes Jahr',
+      prevMonth: 'Letzter Monat',
+      nextMonth: 'Nächster Monat',
       day: 'Tag',
       week: 'Woche',
       month: 'Monat',
@@ -69,7 +73,7 @@ export default {
     },
     pagination: {
       goto: 'Gehe zu',
-      pagesize: 'pro Seite',
+      pagesize: ' pro Seite',
       total: 'Gesamt {total}',
       pageClassifier: ''
     },
@@ -79,6 +83,7 @@ export default {
       error: 'Fehler'
     },
     upload: {
+      deleteTip: 'Klicke löschen zum entfernen',
       delete: 'Löschen',
       preview: 'Vorschau',
       continue: 'Fortsetzen'
diff --git a/src/locale/lang/ee.js b/src/locale/lang/ee.js
index 99e8c4a998..b229fa70c1 100644
--- a/src/locale/lang/ee.js
+++ b/src/locale/lang/ee.js
@@ -16,6 +16,10 @@ export default {
       startTime: 'Algusaeg',
       endDate: 'Lõpukuupäev',
       endTime: 'Lõpuaeg',
+      prevYear: 'Eelmine aasta',
+      nextYear: 'Järgmine aasta',
+      prevMonth: 'Eelmine kuu',
+      nextMonth: 'Järgmine kuu',
       year: '',
       month1: 'Jaanuar',
       month2: 'Veebruar',
@@ -78,6 +82,7 @@ export default {
       error: 'Vigane sisend'
     },
     upload: {
+      deleteTip: 'Vajuta kustuta et eemaldada',
       delete: 'Kustuta',
       preview: 'Eelvaate',
       continue: 'Jätka'
diff --git a/src/locale/lang/el.js b/src/locale/lang/el.js
index d57afe8394..4eae67fae7 100644
--- a/src/locale/lang/el.js
+++ b/src/locale/lang/el.js
@@ -1,7 +1,7 @@
 export default {
   el: {
     colorpicker: {
-      confirm: 'OK',
+      confirm: 'Εντάξει',
       clear: 'Καθαρισμός'
     },
     datepicker: {
@@ -9,13 +9,17 @@ export default {
       today: 'Σήμερα',
       cancel: 'Ακύρωση',
       clear: 'Καθαρισμός',
-      confirm: 'OK',
+      confirm: 'Εντάξει',
       selectDate: 'Επιλέξτε ημέρα',
       selectTime: 'Επιλέξτε ώρα',
       startDate: 'Ημερομηνία Έναρξης',
       startTime: 'Ωρα Έναρξης',
       endDate: 'Ημερομηνία Λήξης',
       endTime: 'Ωρα Λήξης',
+      prevYear: 'Προηγούμενο Έτος',
+      nextYear: 'Επόμενο Έτος',
+      prevMonth: 'Προηγούμενος Μήνας',
+      nextMonth: 'Επόμενος Μήνας',
       year: 'Έτος',
       month1: 'Ιανουάριος',
       month2: 'Φεβρουάριος',
@@ -73,11 +77,12 @@ export default {
     },
     messagebox: {
       title: 'Μήνυμα',
-      confirm: 'OK',
+      confirm: 'Εντάξει',
       cancel: 'Ακύρωση',
       error: 'Άκυρη εισαγωγή'
     },
     upload: {
+      deleteTip: 'Πάτησε Διαγραφή για αφαίρεση',
       delete: 'Διαγραφή',
       preview: 'Προεπισκόπηση',
       continue: 'Συνέχεια'
@@ -87,7 +92,7 @@ export default {
       confirmFilter: 'Επιβεβαίωση',
       resetFilter: 'Επαναφορά',
       clearFilter: 'Όλα',
-      sumText: 'Sum' // to be translated
+      sumText: 'Σύνολο'
     },
     tree: {
       emptyText: 'Χωρίς Δεδομένα'
@@ -95,10 +100,10 @@ export default {
     transfer: {
       noMatch: 'Δεν βρέθηκαν αποτελέσματα',
       noData: 'Χωρίς δεδομένα',
-      titles: ['List 1', 'List 2'], // to be translated
-      filterPlaceholder: 'Enter keyword', // to be translated
-      noCheckedFormat: '{total} items', // to be translated
-      hasCheckedFormat: '{checked}/{total} checked' // to be translated
+      titles: ['Λίστα 1', 'Λίστα 2'],
+      filterPlaceholder: 'Αναζήτηση',
+      noCheckedFormat: '{total} Αντικείμενα',
+      hasCheckedFormat: '{checked}/{total} επιλεγμένα'
     }
   }
 };
diff --git a/src/locale/lang/en.js b/src/locale/lang/en.js
index e3ad7510b4..be7f7f8f89 100644
--- a/src/locale/lang/en.js
+++ b/src/locale/lang/en.js
@@ -16,19 +16,23 @@ export default {
       startTime: 'Start Time',
       endDate: 'End Date',
       endTime: 'End Time',
+      prevYear: 'Previous Year',
+      nextYear: 'Next Year',
+      prevMonth: 'Previous Month',
+      nextMonth: 'Next Month',
       year: '',
-      month1: 'Jan',
-      month2: 'Feb',
-      month3: 'Mar',
-      month4: 'Apr',
+      month1: 'January',
+      month2: 'February',
+      month3: 'March',
+      month4: 'April',
       month5: 'May',
-      month6: 'Jun',
-      month7: 'Jul',
-      month8: 'Aug',
-      month9: 'Sep',
-      month10: 'Oct',
-      month11: 'Nov',
-      month12: 'Dec',
+      month6: 'June',
+      month7: 'July',
+      month8: 'August',
+      month9: 'September',
+      month10: 'October',
+      month11: 'November',
+      month12: 'December',
       // week: 'week',
       weeks: {
         sun: 'Sun',
@@ -78,6 +82,7 @@ export default {
       error: 'Illegal input'
     },
     upload: {
+      deleteTip: 'press delete to remove',
       delete: 'Delete',
       preview: 'Preview',
       continue: 'Continue'
diff --git a/src/locale/lang/es.js b/src/locale/lang/es.js
index b25e05bcde..b45f5a40b0 100644
--- a/src/locale/lang/es.js
+++ b/src/locale/lang/es.js
@@ -2,56 +2,60 @@ export default {
   el: {
     colorpicker: {
       confirm: 'Confirmar',
-      clear: 'Limpiar'
+      clear: 'Despejar'
     },
     datepicker: {
       now: 'Ahora',
       today: 'Hoy',
       cancel: 'Cancelar',
-      clear: 'Limpiar',
+      clear: 'Despejar',
       confirm: 'Confirmar',
       selectDate: 'Seleccionar fecha',
       selectTime: 'Seleccionar hora',
-      startDate: 'Fecha de Inicio',
-      startTime: 'Hora de Inicio',
+      startDate: 'Fecha Incial',
+      startTime: 'Hora Inicial',
       endDate: 'Fecha Final',
       endTime: 'Hora Final',
-      year: 'Año',
-      month1: 'Enero',
-      month2: 'Febrero',
-      month3: 'Marzo',
-      month4: 'Abril',
-      month5: 'Mayo',
-      month6: 'Junio',
-      month7: 'Julio',
-      month8: 'Agosto',
-      month9: 'Septiembre',
-      month10: 'Octubre',
-      month11: 'Noviembre',
-      month12: 'Diciembre',
+      prevYear: 'Año Anterior',
+      nextYear: 'Próximo Año',
+      prevMonth: 'Mes Anterior',
+      nextMonth: 'Próximo Mes',
+      year: '',
+      month1: 'enero',
+      month2: 'febrero',
+      month3: 'marzo',
+      month4: 'abril',
+      month5: 'mayo',
+      month6: 'junio',
+      month7: 'julio',
+      month8: 'agosto',
+      month9: 'septiembre',
+      month10: 'octubre',
+      month11: 'noviembre',
+      month12: 'diciembre',
       // week: 'semana',
       weeks: {
-        sun: 'Dom',
-        mon: 'Lun',
-        tue: 'Mar',
-        wed: 'Mié',
-        thu: 'Jue',
-        fri: 'Vie',
-        sat: 'Sáb'
+        sun: 'dom',
+        mon: 'lun',
+        tue: 'mar',
+        wed: 'mié',
+        thu: 'jue',
+        fri: 'vie',
+        sat: 'sáb'
       },
       months: {
-        jan: 'Ene',
-        feb: 'Feb',
-        mar: 'Mar',
-        apr: 'Abr',
-        may: 'May',
-        jun: 'Jun',
-        jul: 'Jul',
-        aug: 'Ago',
-        sep: 'Sep',
-        oct: 'Oct',
-        nov: 'Nov',
-        dec: 'Dic'
+        jan: 'ene',
+        feb: 'feb',
+        mar: 'mar',
+        apr: 'abr',
+        may: 'may',
+        jun: 'jun',
+        jul: 'jul',
+        aug: 'ago',
+        sep: 'sep',
+        oct: 'oct',
+        nov: 'nov',
+        dec: 'dic'
       }
     },
     select: {
@@ -67,7 +71,7 @@ export default {
     },
     pagination: {
       goto: 'Ir a',
-      pagesize: '/pagina',
+      pagesize: '/página',
       total: 'Total {total}',
       pageClassifier: ''
     },
@@ -77,6 +81,7 @@ export default {
       error: 'Entrada inválida'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Eliminar',
       preview: 'Vista Previa',
       continue: 'Continuar'
@@ -84,9 +89,9 @@ export default {
     table: {
       emptyText: 'Sin Datos',
       confirmFilter: 'Confirmar',
-      resetFilter: 'Limpiar',
-      clearFilter: 'Todo',
-      sumText: 'Sum' // to be translated
+      resetFilter: 'Reiniciar',
+      clearFilter: 'Despejar',
+      sumText: 'Suma'
     },
     tree: {
       emptyText: 'Sin Datos'
@@ -94,10 +99,10 @@ export default {
     transfer: {
       noMatch: 'No hay datos que coincidan',
       noData: 'Sin datos',
-      titles: ['List 1', 'List 2'], // to be translated
-      filterPlaceholder: 'Enter keyword', // to be translated
-      noCheckedFormat: '{total} items', // to be translated
-      hasCheckedFormat: '{checked}/{total} checked' // to be translated
+      titles: ['Lista 1', 'Lista 2'],
+      filterPlaceholder: 'Ingresar palabra clave',
+      noCheckedFormat: '{total} artículos',
+      hasCheckedFormat: '{checked}/{total} revisados'
     }
   }
 };
diff --git a/src/locale/lang/fa.js b/src/locale/lang/fa.js
index b6c7fcfa97..8ffc0e57ba 100644
--- a/src/locale/lang/fa.js
+++ b/src/locale/lang/fa.js
@@ -2,20 +2,24 @@ export default {
   el: {
     colorpicker: {
       confirm: 'باشد',
-      clear: 'خذف'
+      clear: 'حذف'
     },
     datepicker: {
       now: 'اکنون',
       today: 'امروز',
       cancel: 'لغو',
-      clear: 'خذف',
-      confirm: 'باشد',
+      clear: 'حذف',
+      confirm: 'باشه',
       selectDate: 'انتخاب تاریخ',
       selectTime: 'انتخاب زمان',
       startDate: 'تاریخ شروع',
       startTime: 'زمان شروع',
       endDate: 'تاریخ پایان',
       endTime: 'زمان پایان',
+      prevYear: 'سال قبل',
+      nextYear: 'سال بعد',
+      prevMonth: 'ماه قبل',
+      nextMonth: 'ماه بعد',
       year: 'سال',
       month1: 'ژانویه',
       month2: 'فوریه',
@@ -73,21 +77,22 @@ export default {
     },
     messagebox: {
       title: 'پیام',
-      confirm: 'باشد',
+      confirm: 'باشه',
       cancel: 'لغو',
       error: 'ورودی غیر مجاز'
     },
     upload: {
+      deleteTip: 'برای پاک کردن حذف را فشار دهید',
       delete: 'حذف',
       preview: 'پیش‌نمایش',
-      continue: 'ادهمه'
+      continue: 'ادامه'
     },
     table: {
       emptyText: 'اطلاعاتی وجود ندارد',
       confirmFilter: 'تایید',
       resetFilter: 'حذف',
       clearFilter: 'همه',
-      sumText: 'Sum' // to be translated
+      sumText: 'جمع'
     },
     tree: {
       emptyText: 'اطلاعاتی وجود ندارد'
@@ -95,10 +100,10 @@ export default {
     transfer: {
       noMatch: 'هیچ داده‌ای پیدا نشد',
       noData: 'اطلاعاتی وجود ندارد',
-      titles: ['List 1', 'List 2'], // to be translated
-      filterPlaceholder: 'Enter keyword', // to be translated
-      noCheckedFormat: '{total} items', // to be translated
-      hasCheckedFormat: '{checked}/{total} checked' // to be translated
+      titles: ['لیست 1', 'لیست 2'],
+      filterPlaceholder: 'کلید واژه هارو وارد کن',
+      noCheckedFormat: '{total} مورد',
+      hasCheckedFormat: '{checked} مورد از {total} مورد انتخاب شده است'
     }
   }
 };
diff --git a/src/locale/lang/fi.js b/src/locale/lang/fi.js
index df8b6354ae..fcf685d78e 100644
--- a/src/locale/lang/fi.js
+++ b/src/locale/lang/fi.js
@@ -16,6 +16,10 @@ export default {
       startTime: 'Aloitusaika',
       endDate: 'Lopetuspäivä',
       endTime: 'Lopetusaika',
+      prevYear: 'Previous Year', // to be translated
+      nextYear: 'Next Year', // to be translated
+      prevMonth: 'Previous Month', // to be translated
+      nextMonth: 'Next Month', // to be translated
       year: '',
       month1: 'tammikuu',
       month2: 'helmikuu',
@@ -78,6 +82,7 @@ export default {
       error: 'Virheellinen syöte'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Poista',
       preview: 'Esikatsele',
       continue: 'Jatka'
diff --git a/src/locale/lang/fr.js b/src/locale/lang/fr.js
index 623d1f182a..41ac3f3b6b 100644
--- a/src/locale/lang/fr.js
+++ b/src/locale/lang/fr.js
@@ -16,7 +16,11 @@ export default {
       startTime: 'Horaire début',
       endDate: 'Date fin',
       endTime: 'Horaire fin',
-      year: '',
+      prevYear: 'Année précédente',
+      nextYear: 'Année suivante',
+      prevMonth: 'Mois précédent',
+      nextMonth: 'Mois suivant',
+      year: '', // In french, like in english, we don't say "Année" after the year number.
       month1: 'Janvier',
       month2: 'Février',
       month3: 'Mars',
@@ -77,6 +81,7 @@ export default {
       error: 'Erreur'
     },
     upload: {
+      deleteTip: 'Cliquer sur supprimer pour retirer le fichier',
       delete: 'Supprimer',
       preview: 'Aperçu',
       continue: 'Continuer'
@@ -86,7 +91,7 @@ export default {
       confirmFilter: 'Confirmer',
       resetFilter: 'Réinitialiser',
       clearFilter: 'Tous',
-      sumText: 'Sum' // to be translated
+      sumText: 'Somme'
     },
     tree: {
       emptyText: 'Aucune donnée'
@@ -94,10 +99,10 @@ export default {
     transfer: {
       noMatch: 'Aucune correspondance',
       noData: 'Aucune donnée',
-      titles: ['List 1', 'List 2'], // to be translated
-      filterPlaceholder: 'Enter keyword', // to be translated
-      noCheckedFormat: '{total} items', // to be translated
-      hasCheckedFormat: '{checked}/{total} checked' // to be translated
+      titles: ['Liste 1', 'Liste 2'],
+      filterPlaceholder: 'Entrer un mot clef',
+      noCheckedFormat: '{total} elements',
+      hasCheckedFormat: '{checked}/{total} coché(s)'
     }
   }
 };
diff --git a/src/locale/lang/he.js b/src/locale/lang/he.js
new file mode 100644
index 0000000000..7a5f8ffc44
--- /dev/null
+++ b/src/locale/lang/he.js
@@ -0,0 +1,109 @@
+export default {
+  el: {
+    colorpicker: {
+      confirm: 'אישור',
+      clear: 'נקה'
+    },
+    datepicker: {
+      now: 'כעת',
+      today: 'היום',
+      cancel: 'בטל',
+      clear: 'נקה',
+      confirm: 'אישור',
+      selectDate: 'בחר תאריך',
+      selectTime: 'בחר זמן',
+      startDate: 'תאריך התחלה',
+      startTime: 'זמן התחלה',
+      endDate: 'תאריך סיום',
+      endTime: 'זמן סיום',
+      prevYear: 'Previous Year', // to be translated
+      nextYear: 'Next Year', // to be translated
+      prevMonth: 'Previous Month', // to be translated
+      nextMonth: 'Next Month', // to be translated
+      year: '',
+      month1: 'ינואר',
+      month2: 'פברואר',
+      month3: 'מרץ',
+      month4: 'אפריל',
+      month5: 'מאי',
+      month6: 'יוני',
+      month7: 'יולי',
+      month8: 'אוגוסט',
+      month9: 'ספטמבר',
+      month10: 'אוקטובר',
+      month11: 'נובמבר',
+      month12: 'דצמבר',
+      // week: 'week',
+      weeks: {
+        sun: 'א׳',
+        mon: 'ב׳',
+        tue: 'ג׳',
+        wed: 'ד׳',
+        thu: 'ה׳',
+        fri: 'ו׳',
+        sat: 'שבת'
+      },
+      months: {
+        jan: 'ינואר',
+        feb: 'פברואר',
+        mar: 'מרץ',
+        apr: 'אפריל',
+        may: 'מאי',
+        jun: 'יוני',
+        jul: 'יולי',
+        aug: 'אוגוסט',
+        sep: 'ספטמבר',
+        oct: 'אוקטובר',
+        nov: 'נובמבר',
+        dec: 'דצמבר'
+      }
+    },
+    select: {
+      loading: 'טוען',
+      noMatch: 'לא נמצאו נתונים',
+      noData: 'ללא נתונים',
+      placeholder: 'בחר'
+    },
+    cascader: {
+      noMatch: 'ללא נתונים מתאימים',
+      loading: 'טוען',
+      placeholder: 'בחר'
+    },
+    pagination: {
+      goto: 'עבור ל',
+      pagesize: '/page',
+      total: 'כולל {total}',
+      pageClassifier: ''
+    },
+    messagebox: {
+      title: 'הודעה',
+      confirm: 'אישור',
+      cancel: 'בטל',
+      error: 'קלט לא תקין'
+    },
+    upload: {
+      deleteTip: 'press delete to remove', // to be translated
+      delete: 'מחק',
+      preview: 'תצוגה מקדימה',
+      continue: 'המשך'
+    },
+    table: {
+      emptyText: 'אין נתונים',
+      confirmFilter: 'אישור',
+      resetFilter: 'נקה',
+      clearFilter: 'הכל',
+      sumText: 'סך'
+    },
+    tree: {
+      emptyText: 'אין נתונים'
+    },
+    transfer: {
+      noMatch: 'אין נתונים מתאימים',
+      noData: 'ללא נתונים',
+      titles: ['רשימה 1', 'רשימה 2'],
+      filterPlaceholder: 'הקלד',
+      noCheckedFormat: 'פריטים {total}',
+      hasCheckedFormat: ' אישור {checked}/{total}'
+    }
+  }
+};
diff --git a/src/locale/lang/hu.js b/src/locale/lang/hu.js
new file mode 100644
index 0000000000..d1840555a4
--- /dev/null
+++ b/src/locale/lang/hu.js
@@ -0,0 +1,108 @@
+export default {
+  el: {
+    colorpicker: {
+      confirm: 'OK',
+      clear: 'Törlés'
+    },
+    datepicker: {
+      now: 'Most',
+      today: 'Ma',
+      cancel: 'Mégse',
+      clear: 'Törlés',
+      confirm: 'OK',
+      selectDate: 'Dátum',
+      selectTime: 'Időpont',
+      startDate: 'Dátum-tól',
+      startTime: 'Időpont-tól',
+      endDate: 'Dátum-ig',
+      endTime: 'Időpont-ig',
+      prevYear: 'Előző év',
+      nextYear: 'Következő év',
+      prevMonth: 'Előző hónap',
+      nextMonth: 'Következő hónap',
+      year: '',
+      month1: 'Január',
+      month2: 'Február',
+      month3: 'Március',
+      month4: 'Április',
+      month5: 'Május',
+      month6: 'Június',
+      month7: 'Július',
+      month8: 'Augusztus',
+      month9: 'Szeptember',
+      month10: 'Október',
+      month11: 'November',
+      month12: 'December',
+      weeks: {
+        sun: 'Vas',
+        mon: 'Hét',
+        tue: 'Ked',
+        wed: 'Sze',
+        thu: 'Csü',
+        fri: 'Pén',
+        sat: 'Szo'
+      },
+      months: {
+        jan: 'Jan',
+        feb: 'Feb',
+        mar: 'Már',
+        apr: 'Ápr',
+        may: 'Máj',
+        jun: 'Jún',
+        jul: 'Júl',
+        aug: 'Aug',
+        sep: 'Szep',
+        oct: 'Okt',
+        nov: 'Nov',
+        dec: 'Dec'
+      }
+    },
+    select: {
+      loading: 'Betöltés',
+      noMatch: 'Nincs találat',
+      noData: 'Nincs adat',
+      placeholder: 'Válassz'
+    },
+    cascader: {
+      noMatch: 'Nincs találat',
+      loading: 'Betöltés',
+      placeholder: 'Válassz'
+    },
+    pagination: {
+      goto: 'Ugrás',
+      pagesize: '/oldal',
+      total: 'Össz {total}',
+      pageClassifier: ''
+    },
+    messagebox: {
+      title: 'Üzenet',
+      confirm: 'OK',
+      cancel: 'Mégse',
+      error: 'Hibás adat'
+    },
+    upload: {
+      deleteTip: 'kattints a törléshez',
+      delete: 'Törlés',
+      preview: 'Előnézet',
+      continue: 'Tovább'
+    },
+    table: {
+      emptyText: 'Nincs adat',
+      confirmFilter: 'Megerősít',
+      resetFilter: 'Alaphelyet',
+      clearFilter: 'Mind',
+      sumText: 'Összeg'
+    },
+    tree: {
+      emptyText: 'Nincs adat'
+    },
+    transfer: {
+      noMatch: 'Nincs találat',
+      noData: 'Nincs adat',
+      titles: ['Lista 1', 'Lista 2'],
+      filterPlaceholder: 'Kulcsszó',
+      noCheckedFormat: '{total} elem',
+      hasCheckedFormat: '{checked}/{total} kiválasztva'
+    }
+  }
+};
diff --git a/src/locale/lang/id.js b/src/locale/lang/id.js
index 92b2a61333..9194b78666 100644
--- a/src/locale/lang/id.js
+++ b/src/locale/lang/id.js
@@ -16,6 +16,10 @@ export default {
       startTime: 'Waktu Mulai',
       endDate: 'Tanggal Selesai',
       endTime: 'Waktu Selesai',
+      prevYear: 'Previous Year', // to be translated
+      nextYear: 'Next Year', // to be translated
+      prevMonth: 'Previous Month', // to be translated
+      nextMonth: 'Next Month', // to be translated
       year: 'Tahun',
       month1: 'Januari',
       month2: 'Februari',
@@ -78,6 +82,7 @@ export default {
       error: 'Masukan ilegal'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Hapus',
       preview: 'Pratinjau',
       continue: 'Lanjutkan'
diff --git a/src/locale/lang/it.js b/src/locale/lang/it.js
index 7cae9979d1..6fa262ad26 100644
--- a/src/locale/lang/it.js
+++ b/src/locale/lang/it.js
@@ -16,7 +16,11 @@ export default {
       startTime: 'Ora inizio',
       endDate: 'Data fine',
       endTime: 'Ora fine',
-      year: 'Anno',
+      prevYear: 'Anno precedente',
+      nextYear: 'Anno successivo',
+      prevMonth: 'Mese precedente',
+      nextMonth: 'Mese successivo',
+      year: '',
       month1: 'Gennaio',
       month2: 'Febbraio',
       month3: 'Marzo',
@@ -77,6 +81,7 @@ export default {
       error: 'Input non valido'
     },
     upload: {
+      deleteTip: 'Premi cancella per rimuovere',
       delete: 'Cancella',
       preview: 'Anteprima',
       continue: 'Continua'
@@ -86,7 +91,7 @@ export default {
       confirmFilter: 'Conferma',
       resetFilter: 'Reset',
       clearFilter: 'Tutti',
-      sumText: 'Sum' // to be translated
+      sumText: 'Somma'
     },
     tree: {
       emptyText: 'Nessun dato'
@@ -94,10 +99,10 @@ export default {
     transfer: {
       noMatch: 'Nessuna corrispondenza',
       noData: 'Nessun dato',
-      titles: ['List 1', 'List 2'], // to be translated
-      filterPlaceholder: 'Enter keyword', // to be translated
-      noCheckedFormat: '{total} items', // to be translated
-      hasCheckedFormat: '{checked}/{total} checked' // to be translated
+      titles: ['Lista 1', 'Lista 2'],
+      filterPlaceholder: 'Inserisci filtro',
+      noCheckedFormat: '{total} elementi',
+      hasCheckedFormat: '{checked}/{total} selezionati'
     }
   }
 };
diff --git a/src/locale/lang/ja.js b/src/locale/lang/ja.js
index 8700b4ca7f..ff08f1f1cc 100644
--- a/src/locale/lang/ja.js
+++ b/src/locale/lang/ja.js
@@ -9,13 +9,17 @@ export default {
       today: '今日',
       cancel: 'キャンセル',
       clear: 'クリア',
-      confirm: 'はい',
+      confirm: 'OK',
       selectDate: '日付を選択',
       selectTime: '時間を選択',
       startDate: '開始日',
       startTime: '開始時間',
       endDate: '終了日',
       endTime: '終了時間',
+      prevYear: '前年',
+      nextYear: '翌年',
+      prevMonth: '前月',
+      nextMonth: '翌月',
       year: '年',
       month1: '1月',
       month2: '2月',
@@ -73,11 +77,12 @@ export default {
     },
     messagebox: {
       title: 'メッセージ',
-      confirm: 'はい',
+      confirm: 'OK',
       cancel: 'キャンセル',
       error: '正しくない入力'
     },
     upload: {
+      deleteTip: 'Delキーを押して削除する',
       delete: '削除する',
       preview: 'プレビュー',
       continue: '続行する'
@@ -87,7 +92,7 @@ export default {
       confirmFilter: '確認',
       resetFilter: '初期化',
       clearFilter: 'すべて',
-      sumText: 'Sum' // to be translated
+      sumText: '合計'
     },
     tree: {
       emptyText: 'データなし'
@@ -95,10 +100,10 @@ export default {
     transfer: {
       noMatch: 'データなし',
       noData: 'データなし',
-      titles: ['List 1', 'List 2'], // to be translated
-      filterPlaceholder: 'Enter keyword', // to be translated
-      noCheckedFormat: '{total} items', // to be translated
-      hasCheckedFormat: '{checked}/{total} checked' // to be translated
+      titles: ['リスト 1', 'リスト 2'],
+      filterPlaceholder: 'キーワードを入力',
+      noCheckedFormat: '総計 {total} 件',
+      hasCheckedFormat: '{checked}/{total} を選択した'
     }
   }
 };
diff --git a/src/locale/lang/km.js b/src/locale/lang/km.js
new file mode 100644
index 0000000000..97d2fc371d
--- /dev/null
+++ b/src/locale/lang/km.js
@@ -0,0 +1,109 @@
+export default {
+  el: {
+    colorpicker: {
+      confirm: 'យល់ព្រម',
+      clear: 'លុប'
+    },
+    datepicker: {
+      now: 'ឥឡូវ​នេះ',
+      today: 'ថ្ងៃនេះ',
+      cancel: 'បោះបង់',
+      clear: 'លុប',
+      confirm: 'យល់ព្រម',
+      selectDate: 'ជ្រើសរើសថ្ងៃ',
+      selectTime: 'ជ្រើសរើសម៉ោង',
+      startDate: 'ថ្ងៃចាប់ផ្តើម',
+      startTime: 'ម៉ោងចាប់ផ្តើម',
+      endDate: 'ថ្ងៃបញ្ចប់',
+      endTime: 'ម៉ោងបញ្ចប់',
+      prevYear: 'ឆ្នាំមុន',
+      nextYear: 'ឆ្នាំក្រោយ',
+      prevMonth: 'ខែមុន',
+      nextMonth: 'ខែក្រោយ',
+      year: 'ឆ្នាំ',
+      month1: 'មករា',
+      month2: 'កុម្ភៈ',
+      month3: 'មីនា',
+      month4: 'មេសា',
+      month5: 'ឧសភា',
+      month6: 'មិថុនា',
+      month7: 'កក្កដា',
+      month8: 'សីហា',
+      month9: 'កញ្ញា',
+      month10: 'តុលា',
+      month11: 'វិច្ឆកា',
+      month12: 'ធ្នូ',
+      // week: 'week',
+      weeks: {
+        sun: 'អាទិត្យ',
+        mon: 'Mon',
+        tue: 'អង្គារ',
+        wed: 'ពុធ',
+        thu: 'ព្រ.ហ',
+        fri: 'សុក្រ',
+        sat: 'សៅរ៏'
+      },
+      months: {
+        jan: 'មករា',
+        feb: 'កុម្ភៈ',
+        mar: 'មីនា',
+        apr: 'មេសា',
+        may: 'ឧសភា',
+        jun: 'មិថុនា',
+        jul: 'កក្កដា',
+        aug: 'សីហា',
+        sep: 'កញ្ញា',
+        oct: 'តុលា',
+        nov: 'វិច្ឆកា',
+        dec: 'ធ្នូ'
+      }
+    },
+    select: {
+      loading: 'កំពុងផ្ទុក',
+      noMatch: 'គ្មានទិន្ន័យដូច',
+      noData: 'គ្មានទិន្ន័យ',
+      placeholder: 'ជ្រើសរើស'
+    },
+    cascader: {
+      noMatch: 'គ្មានទិន្ន័យដូច',
+      loading: 'កំពុងផ្ទុក',
+      placeholder: 'ជ្រើសរើស'
+    },
+    pagination: {
+      goto: 'ទៅកាន់',
+      pagesize: '/ទំព័រ',
+      total: 'សរុប {total}',
+      pageClassifier: ''
+    },
+    messagebox: {
+      title: 'សារ',
+      confirm: 'យល់ព្រម',
+      cancel: 'បោះបង់',
+      error: 'ការបញ្ចូលមិនអនុញ្ញាត'
+    },
+    upload: {
+      deleteTip: 'ចុចលុបដើម្បីដកចេញ',
+      delete: 'លុប',
+      preview: 'មើល',
+      continue: 'បន្ត'
+    },
+    table: {
+      emptyText: 'គ្មានទិន្ន័យ',
+      confirmFilter: 'យល់ព្រម',
+      resetFilter: 'កំណត់ឡើងវិញ',
+      clearFilter: 'ទាំងអស់',
+      sumText: 'បូក'
+    },
+    tree: {
+      emptyText: 'គ្មានទិន្ន័យ'
+    },
+    transfer: {
+      noMatch: 'គ្មានទិន្ន័យដូច',
+      noData: 'គ្មានទិន្ន័យ',
+      titles: ['បញ្ជី ១', 'បញ្ជី ២'],
+      filterPlaceholder: 'បញ្ចូលពាក្យ',
+      noCheckedFormat: '{total} ធាតុ',
+      hasCheckedFormat: '{checked}/{total} បានគូសធីក'
+    }
+  }
+};
diff --git a/src/locale/lang/ko.js b/src/locale/lang/ko.js
index 4cc9775c83..d203366c44 100644
--- a/src/locale/lang/ko.js
+++ b/src/locale/lang/ko.js
@@ -16,6 +16,10 @@ export default {
       startTime: '시작 시간',
       endDate: '종료 날짜',
       endTime: '종료 시간',
+      prevYear: '지난해',
+      nextYear: '다음해',
+      prevMonth: '지난달',
+      nextMonth: '다음달',
       year: '년',
       month1: '1월',
       month2: '2월',
@@ -78,6 +82,7 @@ export default {
       error: '올바르지 않은 입력'
     },
     upload: {
+      deleteTip: '클릭시 삭제됩니다',
       delete: '삭제',
       preview: '미리보기',
       continue: '계속하기'
diff --git a/src/locale/lang/ku.js b/src/locale/lang/ku.js
new file mode 100644
index 0000000000..88328ffcb8
--- /dev/null
+++ b/src/locale/lang/ku.js
@@ -0,0 +1,109 @@
+export default {
+  el: {
+    colorpicker: {
+      confirm: 'Temam',
+      clear: 'Paqij bike'
+    },
+    datepicker: {
+      now: 'Niha',
+      today: 'Îro',
+      cancel: 'Betal bike',
+      clear: 'Paqij bike',
+      confirm: 'Temam',
+      selectDate: 'Dîrokê bibijêre',
+      selectTime: 'Demê bibijêre',
+      startDate: 'Dîroka Destpêkê',
+      startTime: 'Dema Destpêkê',
+      endDate: 'Dîroka Dawî',
+      endTime: 'Dema Dawî',
+      prevYear: 'Sala Pêş',
+      nextYear: 'Sala Paş',
+      prevMonth: 'Meha Pêş',
+      nextMonth: 'Meha Paş',
+      year: 'Sal',
+      month1: 'Rêbendan',
+      month2: 'Reşemeh',
+      month3: 'Adar',
+      month4: 'Avrêl',
+      month5: 'Gulan',
+      month6: 'Pûşber',
+      month7: 'Tîrmeh',
+      month8: 'Gilavêj',
+      month9: 'Rezber',
+      month10: 'Kewçêr',
+      month11: 'Sarmawaz',
+      month12: 'Berfanbar',
+      // week: 'week',
+      weeks: {
+        sun: 'Yek',
+        mon: 'Duş',
+        tue: 'Sêş',
+        wed: 'Çar',
+        thu: 'Pên',
+        fri: 'În',
+        sat: 'Şem'
+      },
+      months: {
+        jan: 'Rêb',
+        feb: 'Reş',
+        mar: 'Ada',
+        apr: 'Avr',
+        may: 'Gul',
+        jun: 'Pûş',
+        jul: 'Tîr',
+        aug: 'Gil',
+        sep: 'Rez',
+        oct: 'Kew',
+        nov: 'Sar',
+        dec: 'Ber'
+      }
+    },
+    select: {
+      loading: 'Bardibe',
+      noMatch: 'Li hembere ve agahî tune',
+      noData: 'Agahî tune',
+      placeholder: 'Bibijêre'
+    },
+    cascader: {
+      noMatch: 'Li hembere ve agahî tune',
+      loading: 'Bardibe',
+      placeholder: 'Bibijêre'
+    },
+    pagination: {
+      goto: 'Biçe',
+      pagesize: '/rupel',
+      total: 'Tevahî {total}',
+      pageClassifier: ''
+    },
+    messagebox: {
+      title: 'Peyam',
+      confirm: 'Temam',
+      cancel: 'Betal bike',
+      error: 'Beyana çewt'
+    },
+    upload: {
+      deleteTip: 'ji bo rake pêl "delete" bike',
+      delete: 'Rake',
+      preview: 'Pêşdîtin',
+      continue: 'Berdewam'
+    },
+    table: {
+      emptyText: 'Agahî tune',
+      confirmFilter: 'Piştrast bike',
+      resetFilter: 'Jê bibe',
+      clearFilter: 'Hemû',
+      sumText: 'Kom'
+    },
+    tree: {
+      emptyText: 'Agahî tune'
+    },
+    transfer: {
+      noMatch: 'Li hembere ve agahî tune',
+      noData: 'Agahî tune',
+      titles: ['Lîste 1', 'Lîste 2'],
+      filterPlaceholder: 'Binivîse',
+      noCheckedFormat: '{total} lib',
+      hasCheckedFormat: '{checked}/{total} bijartin'
+    }
+  }
+};
diff --git a/src/locale/lang/kz.js b/src/locale/lang/kz.js
new file mode 100644
index 0000000000..01c43823e4
--- /dev/null
+++ b/src/locale/lang/kz.js
@@ -0,0 +1,109 @@
+export default {
+  el: {
+    colorpicker: {
+      confirm: 'Қабылдау',
+      clear: 'Тазалау'
+    },
+    datepicker: {
+      now: 'Қазір',
+      today: 'Бүгін',
+      cancel: 'Болдырмау',
+      clear: 'Тазалау',
+      confirm: 'Қабылдау',
+      selectDate: 'Күнді таңдаңыз',
+      selectTime: 'Сағатты таңдаңыз',
+      startDate: 'Басталу күні',
+      startTime: 'Басталу сағаты',
+      endDate: 'Аяқталу күні',
+      endTime: 'Аяқталу сағаты',
+      prevYear: 'Алдыңғы жыл',
+      nextYear: 'Келесі жыл',
+      prevMonth: 'Алдыңғы ай',
+      nextMonth: 'Келесі ай',
+      year: 'Жыл',
+      month1: 'Қаңтар',
+      month2: 'Ақпан',
+      month3: 'Наурыз',
+      month4: 'Сәуір',
+      month5: 'Мамыр',
+      month6: 'Маусым',
+      month7: 'Шілде',
+      month8: 'Тамыз',
+      month9: 'Қыркүйек',
+      month10: 'Қазан',
+      month11: 'Қараша',
+      month12: 'Желтоқсан',
+      week: 'Апта',
+      weeks: {
+        sun: 'Жек',
+        mon: 'Дүй',
+        tue: 'Сей',
+        wed: 'Сәр',
+        thu: 'Бей',
+        fri: 'Жұм',
+        sat: 'Сен'
+      },
+      months: {
+        jan: 'Қаң',
+        feb: 'Ақп',
+        mar: 'Нау',
+        apr: 'Сәу',
+        may: 'Мам',
+        jun: 'Мау',
+        jul: 'Шіл',
+        aug: 'Там',
+        sep: 'Қыр',
+        oct: 'Қаз',
+        nov: 'Қар',
+        dec: 'Жел'
+      }
+    },
+    select: {
+      loading: 'Жүктелуде',
+      noMatch: 'Сәйкес деректер жоқ',
+      noData: 'Деректер жоқ',
+      placeholder: 'Таңдаңыз'
+    },
+    cascader: {
+      noMatch: 'Сәйкес деректер жоқ',
+      loading: 'Жүктелуде',
+      placeholder: 'Таңдаңыз'
+    },
+    pagination: {
+      goto: 'Бару',
+      pagesize: '/page',
+      total: 'Барлығы {total}',
+      pageClassifier: ''
+    },
+    messagebox: {
+      title: 'Хабар',
+      confirm: 'Қабылдау',
+      cancel: 'Болдырмау',
+      error: 'Жарамсыз енгізулер'
+    },
+    upload: {
+      deleteTip: 'Өшіруді басып өшіріңіз',
+      delete: 'Өшіру',
+      preview: 'Алдын ала қарау',
+      continue: 'Жалғастыру'
+    },
+    table: {
+      emptyText: 'Деректер жоқ',
+      confirmFilter: 'Қабылдау',
+      resetFilter: 'Қалпына келтіру',
+      clearFilter: 'Барлығы',
+      sumText: 'Сомасы'
+    },
+    tree: {
+      emptyText: 'Деректер жоқ'
+    },
+    transfer: {
+      noMatch: 'Сәйкес деректер жоқ',
+      noData: 'Деректер жоқ',
+      titles: ['List 1', 'List 2'],
+      filterPlaceholder: 'Кілт сөзді енгізіңіз',
+      noCheckedFormat: '{total} элэмэнт',
+      hasCheckedFormat: '{checked}/{total} құсбелгісі қойылды'
+    }
+  }
+};
diff --git a/src/locale/lang/lt.js b/src/locale/lang/lt.js
new file mode 100644
index 0000000000..f8cb517541
--- /dev/null
+++ b/src/locale/lang/lt.js
@@ -0,0 +1,109 @@
+export default {
+  el: {
+    colorpicker: {
+      confirm: 'OK',
+      clear: 'Valyti'
+    },
+    datepicker: {
+      now: 'Dabar',
+      today: 'Šiandien',
+      cancel: 'Atšaukti',
+      clear: 'Valyti',
+      confirm: 'OK',
+      selectDate: 'Pasirink datą',
+      selectTime: 'Pasirink laiką',
+      startDate: 'Data nuo',
+      startTime: 'Laikas nuo',
+      endDate: 'Data iki',
+      endTime: 'Laikas iki',
+      prevYear: 'Metai atgal',
+      nextYear: 'Metai į priekį',
+      prevMonth: 'Mėn. atgal',
+      nextMonth: 'Mėn. į priekį',
+      year: '',
+      month1: 'Sausis',
+      month2: 'Vasaris',
+      month3: 'Kovas',
+      month4: 'Balandis',
+      month5: 'Gegužė',
+      month6: 'Birželis',
+      month7: 'Liepa',
+      month8: 'Rugpjūtis',
+      month9: 'Rugsėjis',
+      month10: 'Spalis',
+      month11: 'Lapkritis',
+      month12: 'Gruodis',
+      // week: 'savaitė',
+      weeks: {
+        sun: 'S.',
+        mon: 'Pr.',
+        tue: 'A.',
+        wed: 'T.',
+        thu: 'K.',
+        fri: 'Pn.',
+        sat: 'Š.'
+      },
+      months: {
+        jan: 'Sau',
+        feb: 'Vas',
+        mar: 'Kov',
+        apr: 'Bal',
+        may: 'Geg',
+        jun: 'Bir',
+        jul: 'Lie',
+        aug: 'Rugp',
+        sep: 'Rugs',
+        oct: 'Spa',
+        nov: 'Lap',
+        dec: 'Gruo'
+      }
+    },
+    select: {
+      loading: 'Kraunasi',
+      noMatch: 'Duomenų nerasta',
+      noData: 'Nėra duomenų',
+      placeholder: 'Pasirink'
+    },
+    cascader: {
+      noMatch: 'Duomenų nerasta',
+      loading: 'Kraunasi',
+      placeholder: 'Pasirink'
+    },
+    pagination: {
+      goto: 'Eiti į',
+      pagesize: '/p',
+      total: 'Viso {total}',
+      pageClassifier: ''
+    },
+    messagebox: {
+      title: 'Žinutė',
+      confirm: 'OK',
+      cancel: 'Atšaukti',
+      error: 'Klaida įvestuose duomenyse'
+    },
+    upload: {
+      deleteTip: 'spauskite "Trinti" norėdami pašalinti',
+      delete: 'Trinti',
+      preview: 'Peržiūrėti',
+      continue: 'Toliau'
+    },
+    table: {
+      emptyText: 'Duomenų nerasta',
+      confirmFilter: 'Patvirtinti',
+      resetFilter: 'Atstatyti',
+      clearFilter: 'Išvalyti',
+      sumText: 'Suma'
+    },
+    tree: {
+      emptyText: 'Nėra duomenų'
+    },
+    transfer: {
+      noMatch: 'Duomenų nerasta',
+      noData: 'Nėra duomenų',
+      titles: ['Sąrašas 1', 'Sąrašas 2'],
+      filterPlaceholder: 'Įvesk raktažodį',
+      noCheckedFormat: 'Viso: {total}',
+      hasCheckedFormat: 'Pažymėta {checked} iš {total}'
+    }
+  }
+};
diff --git a/src/locale/lang/lv.js b/src/locale/lang/lv.js
index 07d6d15bb3..ae4554251d 100644
--- a/src/locale/lang/lv.js
+++ b/src/locale/lang/lv.js
@@ -16,6 +16,10 @@ export default {
       startTime: 'Sākuma laiks',
       endDate: 'Beigu datums',
       endTime: 'Beigu laiks',
+      prevYear: 'Iepriekšējais gads',
+      nextYear: 'Nākamais gads',
+      prevMonth: 'Iepriekšējais mēnesis',
+      nextMonth: 'Nākamais mēnesis',
       year: '',
       month1: 'Janvāris',
       month2: 'Februāris',
@@ -67,7 +71,7 @@ export default {
     },
     pagination: {
       goto: 'Iet uz',
-      pagesize: '/page',
+      pagesize: '/lapa',
       total: 'Kopā {total}',
       pageClassifier: ''
     },
@@ -78,6 +82,7 @@ export default {
       error: 'Nederīga ievade'
     },
     upload: {
+      deleteTip: 'Nospiediet dzēst lai izņemtu',
       delete: 'Dzēst',
       preview: 'Priekšskatīt',
       continue: 'Turpināt'
@@ -85,7 +90,7 @@ export default {
     table: {
       emptyText: 'Nav datu',
       confirmFilter: 'Apstiprināt',
-      resetFilter: 'Reset',
+      resetFilter: 'Atiestatīt',
       clearFilter: 'Visi',
       sumText: 'Summa'
     },
diff --git a/src/locale/lang/mn.js b/src/locale/lang/mn.js
new file mode 100644
index 0000000000..df563b5992
--- /dev/null
+++ b/src/locale/lang/mn.js
@@ -0,0 +1,109 @@
+export default {
+  el: {
+    colorpicker: {
+      confirm: 'Тийм',
+      clear: 'Цэвэрлэх'
+    },
+    datepicker: {
+      now: 'Одоо',
+      today: 'Өнөөдөр',
+      cancel: 'Болих',
+      clear: 'Цэвэрлэх',
+      confirm: 'Тийм',
+      selectDate: 'Огноог сонго',
+      selectTime: 'Цагийг сонго',
+      startDate: 'Эхлэх огноо',
+      startTime: 'Эхлэх цаг',
+      endDate: 'Дуусах огноо',
+      endTime: 'Дуусах цаг',
+      prevYear: 'Өмнөх жил',
+      nextYear: 'Дараа жил',
+      prevMonth: 'Өмнөх сар',
+      nextMonth: 'Дараа сар',
+      year: 'он',
+      month1: '1 сар',
+      month2: '2 сар',
+      month3: '3 сар',
+      month4: '4 сар',
+      month5: '5 сар',
+      month6: '6 сар',
+      month7: '7 сар',
+      month8: '8 сар',
+      month9: '9 сар',
+      month10: '10 сар',
+      month11: '11 сар',
+      month12: '12 сар',
+      week: 'Долоо хоног',
+      weeks: {
+        sun: 'Ням',
+        mon: 'Дав',
+        tue: 'Мяг',
+        wed: 'Лха',
+        thu: 'Пүр',
+        fri: 'Баа',
+        sat: 'Бям'
+      },
+      months: {
+        jan: '1 сар',
+        feb: '2 сар',
+        mar: '3 сар',
+        apr: '4 сар',
+        may: '5 сар',
+        jun: '6 сар',
+        jul: '7 сар',
+        aug: '8 сар',
+        sep: '9 сар',
+        oct: '10 сар',
+        nov: '11 сар',
+        dec: '12 сар'
+      }
+    },
+    select: {
+      loading: 'Ачаалж байна',
+      noMatch: 'Тохирох өгөгдөл байхгүй',
+      noData: 'Өгөгдөл байхгүй',
+      placeholder: 'Сонгох'
+    },
+    cascader: {
+      noMatch: 'Тохирох өгөгдөл байхгүй',
+      loading: 'Ачаалж байна',
+      placeholder: 'Сонгох'
+    },
+    pagination: {
+      goto: 'Очих',
+      pagesize: '/хуудас',
+      total: 'Нийт {total}',
+      pageClassifier: ''
+    },
+    messagebox: {
+      title: 'Зурвас',
+      confirm: 'Тийм',
+      cancel: 'Болих',
+      error: 'Буруу утга'
+    },
+    upload: {
+      deleteTip: 'Устгахын дарж арилга',
+      delete: 'Устгах',
+      preview: 'Өмнөх',
+      continue: 'Үргэлжлүүлэх'
+    },
+    table: {
+      emptyText: 'Өгөгдөл байхгүй',
+      confirmFilter: 'Зөвшөөрөх',
+      resetFilter: 'Цэвэрлэх',
+      clearFilter: 'Бүгд',
+      sumText: 'Нийт'
+    },
+    tree: {
+      emptyText: 'Өгөгдөл байхгүй'
+    },
+    transfer: {
+      noMatch: 'Тохирох өгөгдөл байхгүй',
+      noData: 'Өгөгдөл байхгүй',
+      titles: ['Жагсаалт 1', 'Жагсаалт 2'],
+      filterPlaceholder: 'Утга оруул',
+      noCheckedFormat: '{total} өгөгдөл',
+      hasCheckedFormat: '{checked}/{total} сонгосон'
+    }
+  }
+};
diff --git a/src/locale/lang/nb-NO.js b/src/locale/lang/nb-NO.js
index a622e30c0f..91c8ffe781 100644
--- a/src/locale/lang/nb-NO.js
+++ b/src/locale/lang/nb-NO.js
@@ -16,6 +16,10 @@ export default {
       startTime: 'Start Tidspunkt',
       endDate: 'Sluttdato',
       endTime: 'Sluttidspunkt',
+      prevYear: 'Previous Year', // to be translated
+      nextYear: 'Next Year', // to be translated
+      prevMonth: 'Previous Month', // to be translated
+      nextMonth: 'Next Month', // to be translated
       year: '',
       month1: 'Januar',
       month2: 'Februar',
@@ -77,6 +81,7 @@ export default {
       error: 'Ugyldig input'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Slett',
       preview: 'Forhåndsvisning',
       continue: 'Fortsett'
diff --git a/src/locale/lang/nl.js b/src/locale/lang/nl.js
index c4b929b361..6c76f20cee 100644
--- a/src/locale/lang/nl.js
+++ b/src/locale/lang/nl.js
@@ -2,7 +2,7 @@ export default {
   el: {
     colorpicker: {
       confirm: 'Bevestig',
-      clear: 'Legen'
+      clear: 'Wissen'
     },
     datepicker: {
       now: 'Nu',
@@ -16,6 +16,10 @@ export default {
       startTime: 'Starttijd',
       endDate: 'Einddatum',
       endTime: 'Eindtijd',
+      prevYear: 'Vorig jaar',
+      nextYear: 'Volgend jaar',
+      prevMonth: 'Vorige maand',
+      nextMonth: 'Volgende maand',
       year: '',
       month1: 'januari',
       month2: 'februari',
@@ -67,7 +71,7 @@ export default {
     },
     pagination: {
       goto: 'Ga naar',
-      pagesize: '/page',
+      pagesize: '/pagina',
       total: 'Totaal {total}',
       pageClassifier: ''
     },
@@ -78,6 +82,7 @@ export default {
       error: 'Ongeldige invoer'
     },
     upload: {
+      deleteTip: 'Kies verwijder om te wissen',
       delete: 'Verwijder',
       preview: 'Voorbeeld',
       continue: 'Doorgaan'
@@ -87,7 +92,7 @@ export default {
       confirmFilter: 'Bevestigen',
       resetFilter: 'Reset',
       clearFilter: 'Alles',
-      sumText: 'Sum' // to be translated
+      sumText: 'Som'
     },
     tree: {
       emptyText: 'Geen data'
@@ -95,10 +100,10 @@ export default {
     transfer: {
       noMatch: 'Geen overeenkomende resultaten',
       noData: 'Geen data',
-      titles: ['List 1', 'List 2'], // to be translated
-      filterPlaceholder: 'Enter keyword', // to be translated
-      noCheckedFormat: '{total} items', // to be translated
-      hasCheckedFormat: '{checked}/{total} checked' // to be translated
+      titles: ['Lijst 1', 'Lijst 2'],
+      filterPlaceholder: 'Geef zoekwoerd',
+      noCheckedFormat: '{total} items',
+      hasCheckedFormat: '{checked}/{total} geselecteerd'
     }
   }
 };
diff --git a/src/locale/lang/pl.js b/src/locale/lang/pl.js
index b9a6fca562..8cc5c06f3f 100644
--- a/src/locale/lang/pl.js
+++ b/src/locale/lang/pl.js
@@ -16,6 +16,10 @@ export default {
       startTime: 'Godzina początkowa',
       endDate: 'Data końcowa',
       endTime: 'Czas końcowa',
+      prevYear: 'Poprzedni rok',
+      nextYear: 'Następny rok',
+      prevMonth: 'Poprzedni miesiąc',
+      nextMonth: 'Następny miesiąc',
       year: 'rok',
       month1: 'styczeń',
       month2: 'luty',
@@ -78,6 +82,7 @@ export default {
       error: 'Wiadomość zawiera niedozwolone znaki'
     },
     upload: {
+      deleteTip: 'kliknij kasuj aby usunąć',
       delete: 'Kasuj',
       preview: 'Podgląd',
       continue: 'Kontynuuj'
@@ -87,7 +92,7 @@ export default {
       confirmFilter: 'Potwierdź',
       resetFilter: 'Resetuj',
       clearFilter: 'Wszystko',
-      sumText: 'Sum' // to be translated
+      sumText: 'Razem'
     },
     tree: {
       emptyText: 'Brak danych'
@@ -95,10 +100,10 @@ export default {
     transfer: {
       noMatch: 'Brak dopasowań',
       noData: 'Brak danych',
-      titles: ['List 1', 'List 2'], // to be translated
-      filterPlaceholder: 'Enter keyword', // to be translated
-      noCheckedFormat: '{total} items', // to be translated
-      hasCheckedFormat: '{checked}/{total} checked' // to be translated
+      titles: ['Lista 1', 'Lista 2'],
+      filterPlaceholder: 'Wpisz szukaną frazę',
+      noCheckedFormat: 'razem: {total}',
+      hasCheckedFormat: 'wybranych: {checked}/{total}'
     }
   }
 };
diff --git a/src/locale/lang/pt-br.js b/src/locale/lang/pt-br.js
index 8730f04336..5b0009a401 100644
--- a/src/locale/lang/pt-br.js
+++ b/src/locale/lang/pt-br.js
@@ -16,6 +16,10 @@ export default {
       startTime: 'Hora inicial',
       endDate: 'Data final',
       endTime: 'Hora final',
+      prevYear: 'Ano anterior',
+      nextYear: 'Próximo ano',
+      prevMonth: 'Mês anterior',
+      nextMonth: 'Próximo mês',
       year: '',
       month1: 'Janeiro',
       month2: 'Fevereiro',
@@ -78,6 +82,7 @@ export default {
       error: 'Erro!'
     },
     upload: {
+      deleteTip: 'aperte delete para apagar',
       delete: 'Apagar',
       preview: 'Pré-visualizar',
       continue: 'Continuar'
diff --git a/src/locale/lang/pt.js b/src/locale/lang/pt.js
index 5c7781ec58..e8aacad3cf 100644
--- a/src/locale/lang/pt.js
+++ b/src/locale/lang/pt.js
@@ -16,6 +16,10 @@ export default {
       startTime: 'Hora de inicio',
       endDate: 'Data de fim',
       endTime: 'Hora de fim',
+      prevYear: 'Previous Year', // to be translated
+      nextYear: 'Next Year', // to be translated
+      prevMonth: 'Previous Month', // to be translated
+      nextMonth: 'Next Month', // to be translated
       year: '',
       month1: 'Janeiro',
       month2: 'Fevereiro',
@@ -78,6 +82,7 @@ export default {
       error: 'Erro!'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Apagar',
       preview: 'Previsualizar',
       continue: 'Continuar'
diff --git a/src/locale/lang/ro.js b/src/locale/lang/ro.js
new file mode 100644
index 0000000000..16a7ad15b2
--- /dev/null
+++ b/src/locale/lang/ro.js
@@ -0,0 +1,109 @@
+export default {
+  el: {
+    colorpicker: {
+      confirm: 'OK',
+      clear: 'Șterge'
+    },
+    datepicker: {
+      now: 'Acum',
+      today: 'Azi',
+      cancel: 'Anulează',
+      clear: 'Șterge',
+      confirm: 'OK',
+      selectDate: 'Selectează data',
+      selectTime: 'Selectează ora',
+      startDate: 'Data de început',
+      startTime: 'Ora de început',
+      endDate: 'Data de sfârșit',
+      endTime: 'Ora de sfârșit',
+      prevYear: 'Anul trecut',
+      nextYear: 'Anul următor',
+      prevMonth: 'Luna trecută',
+      nextMonth: 'Luna următoare',
+      year: '',
+      month1: 'Ianuarie',
+      month2: 'Februarie',
+      month3: 'Martie',
+      month4: 'Aprilie',
+      month5: 'Mai',
+      month6: 'Iunie',
+      month7: 'Iulie',
+      month8: 'August',
+      month9: 'Septembrie',
+      month10: 'Octombrie',
+      month11: 'Noiembrie',
+      month12: 'Decembrie',
+      // week: 'week',
+      weeks: {
+        sun: 'Du',
+        mon: 'Lu',
+        tue: 'Ma',
+        wed: 'Mi',
+        thu: 'Jo',
+        fri: 'Vi',
+        sat: 'Sâ'
+      },
+      months: {
+        jan: 'Ian',
+        feb: 'Feb',
+        mar: 'Mar',
+        apr: 'Apr',
+        may: 'Mai',
+        jun: 'Iun',
+        jul: 'Iul',
+        aug: 'Aug',
+        sep: 'Sep',
+        oct: 'Oct',
+        nov: 'Noi',
+        dec: 'Dec'
+      }
+    },
+    select: {
+      loading: 'Se încarcă',
+      noMatch: 'Nu există date potrivite',
+      noData: 'Nu există date',
+      placeholder: 'Selectează'
+    },
+    cascader: {
+      noMatch: 'Nu există date potrivite',
+      loading: 'Se încarcă',
+      placeholder: 'Selectează'
+    },
+    pagination: {
+      goto: 'Go to',
+      pagesize: '/pagina',
+      total: 'Total {total}',
+      pageClassifier: ''
+    },
+    messagebox: {
+      title: 'Mesaj',
+      confirm: 'OK',
+      cancel: 'Anulează',
+      error: 'Date introduse eronate'
+    },
+    upload: {
+      deleteTip: 'apăsați pe ștergeți pentru a elimina',
+      delete: 'șterge',
+      preview: 'previzualizare',
+      continue: 'continuă'
+    },
+    table: {
+      emptyText: 'Nu există date',
+      confirmFilter: 'Confirmă',
+      resetFilter: 'Resetează',
+      clearFilter: 'Tot',
+      sumText: 'Suma'
+    },
+    tree: {
+      emptyText: 'Nu există date'
+    },
+    transfer: {
+      noMatch: 'Nu există date potrivite',
+      noData: 'Nu există date',
+      titles: ['Lista 1', 'Lista 2'],
+      filterPlaceholder: 'Introduceți cuvântul cheie',
+      noCheckedFormat: '{total} elemente',
+      hasCheckedFormat: '{checked}/{total} verificate'
+    }
+  }
+};
diff --git a/src/locale/lang/ru-RU.js b/src/locale/lang/ru-RU.js
index a49690fcdd..e97cb77dc4 100644
--- a/src/locale/lang/ru-RU.js
+++ b/src/locale/lang/ru-RU.js
@@ -16,6 +16,10 @@ export default {
       startTime: 'Время начала',
       endDate: 'Дата окончания',
       endTime: 'Время окончания',
+      prevYear: 'Предыдущий год',
+      nextYear: 'Следующий год',
+      prevMonth: 'Предыдущий месяц',
+      nextMonth: 'Следующий месяц',
       year: '',
       month1: 'Январь',
       month2: 'Февраль',
@@ -67,7 +71,7 @@ export default {
     },
     pagination: {
       goto: 'Перейти',
-      pagesize: 'на странице',
+      pagesize: ' на странице',
       total: 'Всего {total}',
       pageClassifier: ''
     },
@@ -78,6 +82,7 @@ export default {
       error: 'Недопустимый ввод данных'
     },
     upload: {
+      deleteTip: 'Нажмите [Удалить] для удаления',
       delete: 'Удалить',
       preview: 'Превью',
       continue: 'Продолжить'
@@ -87,7 +92,7 @@ export default {
       confirmFilter: 'Подтвердить',
       resetFilter: 'Сбросить',
       clearFilter: 'Все',
-      sumText: 'Sum' // to be translated
+      sumText: 'Сумма'
     },
     tree: {
       emptyText: 'Нет данных'
@@ -95,10 +100,10 @@ export default {
     transfer: {
       noMatch: 'Совпадений не найдено',
       noData: 'Нет данных',
-      titles: ['List 1', 'List 2'], // to be translated
-      filterPlaceholder: 'Enter keyword', // to be translated
-      noCheckedFormat: '{total} items', // to be translated
-      hasCheckedFormat: '{checked}/{total} checked' // to be translated
+      titles: ['Список 1', 'Список 2'],
+      filterPlaceholder: 'Введите ключевое слово',
+      noCheckedFormat: '{total} пунктов',
+      hasCheckedFormat: '{checked}/{total} выбрано'
     }
   }
 };
diff --git a/src/locale/lang/sk.js b/src/locale/lang/sk.js
index 18252030ea..0ef62c4e31 100644
--- a/src/locale/lang/sk.js
+++ b/src/locale/lang/sk.js
@@ -16,6 +16,10 @@ export default {
       startTime: 'Čas začiatku',
       endDate: 'Dátum konca',
       endTime: 'Čas konca',
+      prevYear: 'Predošlý rok',
+      nextYear: 'Ďalší rok',
+      prevMonth: 'Predošlý mesiac',
+      nextMonth: 'Ďalší mesiac',
       day: 'Deň',
       week: 'Týždeň',
       month: 'Mesiac',
@@ -80,6 +84,7 @@ export default {
       error: 'Neplatný vstup'
     },
     upload: {
+      deleteTip: 'pre odstránenie stisni klávesu Delete',
       delete: 'Vymazať',
       preview: 'Prehliadať',
       continue: 'Pokračovať'
diff --git a/src/locale/lang/sl.js b/src/locale/lang/sl.js
index 6300fc14fd..f6000a0715 100644
--- a/src/locale/lang/sl.js
+++ b/src/locale/lang/sl.js
@@ -16,7 +16,11 @@ export default {
       startTime: 'Začetni čas',
       endDate: 'Končni datum',
       endTime: 'Končni čas',
-      year: 'Leto',
+      prevYear: 'Prejšnje leto',
+      nextYear: 'Naslednje leto',
+      prevMonth: 'Prejšnji mesec',
+      nextMonth: 'Naslednji mesec',
+      year: '',
       month1: 'Jan',
       month2: 'Feb',
       month3: 'Mar',
@@ -67,7 +71,7 @@ export default {
     },
     pagination: {
       goto: 'Pojdi na',
-      pagesize: '/page',
+      pagesize: '/stran',
       total: 'Skupno {total}',
       pageClassifier: ''
     },
@@ -78,6 +82,7 @@ export default {
       error: 'Nedovoljen vnos'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Izbriši',
       preview: 'Predogled',
       continue: 'Nadaljuj'
diff --git a/src/locale/lang/sr.js b/src/locale/lang/sr.js
new file mode 100644
index 0000000000..fe2f108e71
--- /dev/null
+++ b/src/locale/lang/sr.js
@@ -0,0 +1,109 @@
+export default {
+  el: {
+    colorpicker: {
+      confirm: 'OK',
+      clear: 'Поништи'
+    },
+    datepicker: {
+      now: 'Сад',
+      today: 'Данас',
+      cancel: 'Откажи',
+      clear: 'Бриши',
+      confirm: 'OK',
+      selectDate: 'Изабери датум',
+      selectTime: 'Изабери време',
+      startDate: 'Датум почетка',
+      startTime: 'Време почетка',
+      endDate: 'Датум завршетка',
+      endTime: 'Време завршетка',
+      prevYear: 'Претходна година',
+      nextYear: 'Следећа година',
+      prevMonth: 'Претходни месец',
+      nextMonth: 'Следећи месец',
+      year: 'година',
+      month1: 'јануар',
+      month2: 'фебруар',
+      month3: 'март',
+      month4: 'април',
+      month5: 'мај',
+      month6: 'јун',
+      month7: 'јул',
+      month8: 'август',
+      month9: 'септембар',
+      month10: 'октобар',
+      month11: 'новембар',
+      month12: 'децембар',
+      week: 'седмица',
+      weeks: {
+        sun: 'Нед',
+        mon: 'Пон',
+        tue: 'Уто',
+        wed: 'Сре',
+        thu: 'Чет',
+        fri: 'Пет',
+        sat: 'Суб'
+      },
+      months: {
+        jan: 'јан',
+        feb: 'феб',
+        mar: 'мар',
+        apr: 'апр',
+        may: 'мај',
+        jun: 'јун',
+        jul: 'јул',
+        aug: 'авг',
+        sep: 'сеп',
+        oct: 'окт',
+        nov: 'нов',
+        dec: 'дец'
+      }
+    },
+    select: {
+      loading: 'Учитавање',
+      noMatch: 'Нема резултата',
+      noData: 'Нема података',
+      placeholder: 'Изабери'
+    },
+    cascader: {
+      noMatch: 'Нема резултата',
+      loading: 'Учитавање',
+      placeholder: 'Изабери'
+    },
+    pagination: {
+      goto: 'Иди на',
+      pagesize: '/страни',
+      total: 'Укупно {total}',
+      pageClassifier: ''
+    },
+    messagebox: {
+      title: 'Порука',
+      confirm: 'OK',
+      cancel: 'Откажи',
+      error: 'Неисправан унос'
+    },
+    upload: {
+      deleteTip: 'притисни БРИШИ да обришеш',
+      delete: 'Бриши',
+      preview: 'Види',
+      continue: 'Настави'
+    },
+    table: {
+      emptyText: 'Нема података',
+      confirmFilter: 'Потврди',
+      resetFilter: 'Ресетуј',
+      clearFilter: 'Све',
+      sumText: 'Збир'
+    },
+    tree: {
+      emptyText: 'Нема података'
+    },
+    transfer: {
+      noMatch: 'Нема резултата',
+      noData: 'Нема података',
+      titles: ['Листа 1', 'Листа 2'], // to be translated
+      filterPlaceholder: 'Унеси кључну реч', // to be translated
+      noCheckedFormat: '{total} ставки', // to be translated
+      hasCheckedFormat: '{checked}/{total} обележених' // to be translated
+    }
+  }
+};
diff --git a/src/locale/lang/sv-SE.js b/src/locale/lang/sv-SE.js
index 618b28ada7..0be73a0b21 100644
--- a/src/locale/lang/sv-SE.js
+++ b/src/locale/lang/sv-SE.js
@@ -16,6 +16,10 @@ export default {
       startTime: 'Starttid',
       endDate: 'Slutdatum',
       endTime: 'Sluttid',
+      prevYear: 'Previous Year', // to be translated
+      nextYear: 'Next Year', // to be translated
+      prevMonth: 'Previous Month', // to be translated
+      nextMonth: 'Next Month', // to be translated
       year: 'År',
       month1: 'Januari',
       month2: 'Februari',
@@ -78,6 +82,7 @@ export default {
       error: 'Felaktig inmatning'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'Radera',
       preview: 'Förhandsvisa',
       continue: 'Fortsätt'
diff --git a/src/locale/lang/ta.js b/src/locale/lang/ta.js
index 976275f049..7b458112fd 100644
--- a/src/locale/lang/ta.js
+++ b/src/locale/lang/ta.js
@@ -16,6 +16,10 @@ export default {
       startTime: 'தொடங்கும் நேரம்',
       endDate: 'முடியும் தேதி',
       endTime: 'முடியும் நேரம்',
+      prevYear: 'Previous Year', // to be translated
+      nextYear: 'Next Year', // to be translated
+      prevMonth: 'Previous Month', // to be translated
+      nextMonth: 'Next Month', // to be translated
       year: 'வருடம்',
       month1: 'ஜனவரி',
       month2: 'பிப்ரவரி',
@@ -77,6 +81,7 @@ export default {
       error: 'பொருத்தாமில்லாத உள்ளீடு'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'நீக்கு',
       preview: 'முன்னோட்டம் பார்',
       continue: 'தொடரு'
@@ -96,8 +101,8 @@ export default {
       noData: 'தரவு இல்லை',
       titles: ['பட்டியல் 1', 'பட்டியல் 2'],
       filterPlaceholder: 'சொல்லை உள்ளீடு செய்',
-      noCheckedFormat: '{மொத்தம்} items',
-      hasCheckedFormat: '{தேர்வு செய்யப்பட்டவைகள்}/{மொத்தம்} தேர்வு செய்யப்பட்டவைகள்'
+      noCheckedFormat: '{total} items', // to be translated
+      hasCheckedFormat: '{checked}/{total} தேர்வு செய்யப்பட்டவைகள்'
     }
   }
 };
diff --git a/src/locale/lang/th.js b/src/locale/lang/th.js
index daf64f80ed..e45a392e71 100644
--- a/src/locale/lang/th.js
+++ b/src/locale/lang/th.js
@@ -16,6 +16,10 @@ export default {
       startTime: 'เวลาเริ่มต้น',
       endDate: 'วันที่สิ้นสุด',
       endTime: 'เวลาสิ้นสุด',
+      prevYear: 'Previous Year', // to be translated
+      nextYear: 'Next Year', // to be translated
+      prevMonth: 'Previous Month', // to be translated
+      nextMonth: 'Next Month', // to be translated
       year: 'ปี',
       month1: 'มกราคม',
       month2: 'กุมภาพันธ์',
@@ -78,6 +82,7 @@ export default {
       error: 'คุณป้อนข้อมูลไม่ถูกต้อง'
     },
     upload: {
+      deleteTip: 'press delete to remove', // to be translated
       delete: 'ลบ',
       preview: 'ตัวอย่าง',
       continue: 'ทำต่อ'
diff --git a/src/locale/lang/tk.js b/src/locale/lang/tk.js
index 1948256ed2..6db1e0cbae 100644
--- a/src/locale/lang/tk.js
+++ b/src/locale/lang/tk.js
@@ -5,17 +5,21 @@ export default {
       clear: 'Arassala'
     },
     datepicker: {
-      now: 'Ýaňy',
+      now: 'Şuwagt',
       today: 'Şügün',
       cancel: 'Bes et',
       clear: 'Arassala',
       confirm: 'OK',
       selectDate: 'Güni saýlaň',
       selectTime: 'Wagty saýlaň',
-      startDate: 'Başlaýan Güni',
-      startTime: 'Başlaýan Wagty',
-      endDate: 'Sonky Güni',
-      endTime: 'Sonky Wagty',
+      startDate: 'Başlaýan güni',
+      startTime: 'Başlaýan wagty',
+      endDate: 'Gutarýan güni',
+      endTime: 'Gutarýan wagty',
+      prevYear: 'Previous Year', // to be translated
+      nextYear: 'Next Year', // to be translated
+      prevMonth: 'Previous Month', // to be translated
+      nextMonth: 'Next Month', // to be translated
       year: '',
       month1: 'Ýan',
       month2: 'Few',
@@ -25,7 +29,7 @@ export default {
       month6: 'Iýn',
       month7: 'Iýl',
       month8: 'Awg',
-      month9: 'Sep',
+      month9: 'Sen',
       month10: 'Okt',
       month11: 'Noý',
       month12: 'Dek',
@@ -63,7 +67,7 @@ export default {
     cascader: {
       noMatch: 'Hiçzat tapylmady',
       loading: 'Indirilýär',
-      placeholder: 'saýlaň'
+      placeholder: 'Saýlaň'
     },
     pagination: {
       goto: 'Git',
@@ -78,6 +82,7 @@ export default {
       error: 'Ýalňyş girizme'
     },
     upload: {
+      deleteTip: 'Pozmak üçin "poz" düwmä basyň',
       delete: 'Poz',
       preview: 'Gör',
       continue: 'Dowam et'
@@ -97,7 +102,7 @@ export default {
       noData: 'Hiçzat ýok',
       titles: ['Sanaw 1', 'Sanaw 2'],
       filterPlaceholder: 'Gözleg sözlerini giriziň',
-      noCheckedFormat: '{total} element',
+      noCheckedFormat: '{total} sany',
       hasCheckedFormat: '{checked}/{total} saýlanan'
     }
   }
diff --git a/src/locale/lang/tr-TR.js b/src/locale/lang/tr-TR.js
index b771e2460a..de5e68fb25 100644
--- a/src/locale/lang/tr-TR.js
+++ b/src/locale/lang/tr-TR.js
@@ -16,6 +16,10 @@ export default {
       startTime: 'Başlangıç Saati',
       endDate: 'Bitiş Tarihi',
       endTime: 'Bitiş Saati',
+      prevYear: 'Önceki Yıl',
+      nextYear: 'Sonraki Yıl',
+      prevMonth: 'Önceki Ay',
+      nextMonth: 'Sonraki Ay',
       year: '',
       month1: 'Ocak',
       month2: 'Şubat',
@@ -67,7 +71,7 @@ export default {
     },
     pagination: {
       goto: 'Git',
-      pagesize: '/page',
+      pagesize: '/sayfa',
       total: 'Toplam {total}',
       pageClassifier: ''
     },
@@ -78,6 +82,7 @@ export default {
       error: 'İllegal giriş'
     },
     upload: {
+      deleteTip: 'kaldırmak için delete tuşuna bas',
       delete: 'Sil',
       preview: 'Görüntüle',
       continue: 'Devam'
diff --git a/src/locale/lang/ua.js b/src/locale/lang/ua.js
index fe94b9f291..c23035e187 100644
--- a/src/locale/lang/ua.js
+++ b/src/locale/lang/ua.js
@@ -16,6 +16,10 @@ export default {
       startTime: 'Час початку',
       endDate: 'Дата завершення',
       endTime: 'Час завершення',
+      prevYear: 'Попередній Рік',
+      nextYear: 'Наступний Рік',
+      prevMonth: 'Попередній Місяць',
+      nextMonth: 'Наступний Місяць',
       year: '',
       month1: 'Січень',
       month2: 'Лютий',
@@ -29,7 +33,7 @@ export default {
       month10: 'Жовтень',
       month11: 'Листопад',
       month12: 'Грудень',
-            // week: 'week',
+      // week: 'week',
       weeks: {
         sun: 'Нд',
         mon: 'Пн',
@@ -57,7 +61,7 @@ export default {
     select: {
       loading: 'Завантаження',
       noMatch: 'Співпадінь не знайдено',
-      noData: 'Нема даних',
+      noData: 'Немає даних',
       placeholder: 'Обрати'
     },
     cascader: {
@@ -78,27 +82,28 @@ export default {
       error: 'Неприпустимий ввід даних'
     },
     upload: {
+      deleteTip: 'натисніть кнопку щоб видалити',
       delete: 'Видалити',
       preview: 'Перегляд',
       continue: 'Продовжити'
     },
     table: {
-      emptyText: 'Нема даних',
+      emptyText: 'Немає даних',
       confirmFilter: 'Підтвердити',
       resetFilter: 'Скинути',
       clearFilter: 'Все',
-      sumText: 'Sum' // to be translated
+      sumText: 'Сума'
     },
     tree: {
-      emptyText: 'Нема даних'
+      emptyText: 'Немає даних'
     },
     transfer: {
       noMatch: 'Співпадінь не знайдено',
       noData: 'Обрати',
-      titles: ['List 1', 'List 2'], // to be translated
-      filterPlaceholder: 'Enter keyword', // to be translated
-      noCheckedFormat: '{total} items', // to be translated
-      hasCheckedFormat: '{checked}/{total} checked' // to be translated
+      titles: ['Список 1', 'Список 2'],
+      filterPlaceholder: 'Введіть ключове слово',
+      noCheckedFormat: '{total} пунктів',
+      hasCheckedFormat: '{checked}/{total} вибрано'
     }
   }
 };
diff --git a/src/locale/lang/ug-CN.js b/src/locale/lang/ug-CN.js
new file mode 100644
index 0000000000..6db539251a
--- /dev/null
+++ b/src/locale/lang/ug-CN.js
@@ -0,0 +1,109 @@
+export default {
+  el: {
+    colorpicker: {
+      confirm: 'جەزملەش',
+      clear: 'قۇرۇقداش'
+    },
+    datepicker: {
+      now: 'ھازىرقى ۋاقىت',
+      today: 'بۈگۈن',
+      cancel: 'بىكار قىلىش',
+      clear: 'قۇرۇقداش',
+      confirm: 'جەزملەش',
+      selectDate: 'چىسلا تاللاڭ',
+      selectTime: 'ۋاقىت تاللاڭ',
+      startDate: 'باشلانغان چىسلا',
+      startTime: 'باشلانغان ۋاقىت',
+      endDate: 'ئاخىرلاشقان چىسلا',
+      endTime: 'ئاخىرلاشقان ۋاقىت',
+      prevYear: 'ئالدىنقى يىل',
+      nextYear: 'كىيىنكى يىل',
+      prevMonth: 'ئالدىنقى ئاي',
+      nextMonth: 'كىيىنكى ئاي',
+      year: '- يىل',
+      month1: '1-ئاي',
+      month2: '2-ئاي',
+      month3: '3-ئاي',
+      month4: '4-ئاي',
+      month5: '5-ئاي',
+      month6: '6-ئاي',
+      month7: '7-ئاي',
+      month8: '8-ئاي',
+      month9: '9-ئاي',
+      month10: '10-ئاي',
+      month11: '11-ئاي',
+      month12: '12-ئاي',
+      // week: '周次',
+      weeks: {
+        sun: 'يەكشەنبە',
+        mon: 'دۈشەنبە',
+        tue: 'سەيشەنبە',
+        wed: 'چارشەنبە',
+        thu: 'پەيشەنبە',
+        fri: 'جۈمە',
+        sat: 'شەنبە'
+      },
+      months: {
+        jan: '1-ئاي',
+        feb: '2-ئاي',
+        mar: '3-ئاي',
+        apr: '4-ئاي',
+        may: '5-ئاي',
+        jun: '6-ئاي',
+        jul: '7-ئاي',
+        aug: '8-ئاي',
+        sep: '9-ئاي',
+        oct: '10-ئاي',
+        nov: '11-ئاي',
+        dec: '12-ئاي'
+      }
+    },
+    select: {
+      loading: 'يۈكلىنىۋاتىدۇ',
+      noMatch: 'ئۇچۇر تېپىلمىدى',
+      noData: 'ئۇچۇر يوق',
+      placeholder: 'تاللاڭ'
+    },
+    cascader: {
+      noMatch: 'ئۇچۇر تېپىلمىدى',
+      loading: 'يۈكلىنىۋاتىدۇ',
+      placeholder: 'تاللاڭ'
+    },
+    pagination: {
+      goto: 'كىيىنكى بەت',
+      pagesize: 'تال/بەت',
+      total: 'جەمئىي {total} تال',
+      pageClassifier: 'بەت'
+    },
+    messagebox: {
+      title: 'ئەسكەرتىش',
+      confirm: 'جەزملەش',
+      cancel: 'بىكار قىلىش',
+      error: 'كىرگۈزگەن ئۇچۇرىڭىزدا خاتالىق بار!'
+    },
+    upload: {
+      deleteTip: 'delete كۇنپكىسىنى بېسىپ ئۆچۈرەلەيسىز',
+      delete: 'ئۆچۈرۈش',
+      preview: 'رەسىمنى كۆرۈش',
+      continue: 'رەسىم يوللاش'
+    },
+    table: {
+      emptyText: 'ئۇچۇر يوق',
+      confirmFilter: 'سۈزگۈچ',
+      resetFilter: 'قايتا تولدۇرۇش',
+      clearFilter: 'ھەممە',
+      sumText: 'جەمئىي'
+    },
+    tree: {
+      emptyText: 'ئۇچۇر يوق'
+    },
+    transfer: {
+      noMatch: 'ئۇچۇر تېپىلمىدى',
+      noData: 'ئۇچۇر يوق',
+      titles: ['جەدۋەل 1', 'جەدۋەل 2'],
+      filterPlaceholder: 'ئىزدىمەكچى بولغان مەزمۇننى كىرگۈزۈڭ',
+      noCheckedFormat: 'جەمئىي {total} تۈر',
+      hasCheckedFormat: 'تاللانغىنى {checked}/{total} تۈر'
+    }
+  }
+};
diff --git a/src/locale/lang/vi.js b/src/locale/lang/vi.js
index 0863dac5f2..a09d68e09f 100644
--- a/src/locale/lang/vi.js
+++ b/src/locale/lang/vi.js
@@ -16,6 +16,10 @@ export default {
       startTime: 'Thời gian bắt đầu',
       endDate: 'Ngày kết thúc',
       endTime: 'Thời gian kết thúc',
+      prevYear: 'Năm trước',
+      nextYear: 'Năm tới',
+      prevMonth: 'Tháng trước',
+      nextMonth: 'Tháng tới',
       year: 'Năm',
       month1: 'Tháng 1',
       month2: 'Tháng 2',
@@ -78,6 +82,7 @@ export default {
       error: 'Dữ liệu không hợp lệ'
     },
     upload: {
+      deleteTip: 'Nhấn xoá để xoá',
       delete: 'Xóa',
       preview: 'Xem trước',
       continue: 'Tiếp tục'
diff --git a/src/locale/lang/zh-CN.js b/src/locale/lang/zh-CN.js
index 96d226b5de..6d25fd2409 100644
--- a/src/locale/lang/zh-CN.js
+++ b/src/locale/lang/zh-CN.js
@@ -16,6 +16,10 @@ export default {
       startTime: '开始时间',
       endDate: '结束日期',
       endTime: '结束时间',
+      prevYear: '前一年',
+      nextYear: '后一年',
+      prevMonth: '上个月',
+      nextMonth: '下个月',
       year: '年',
       month1: '1 月',
       month2: '2 月',
@@ -78,6 +82,7 @@ export default {
       error: '输入的数据不合法!'
     },
     upload: {
+      deleteTip: '按 delete 键可删除',
       delete: '删除',
       preview: '查看图片',
       continue: '继续上传'
diff --git a/src/locale/lang/zh-TW.js b/src/locale/lang/zh-TW.js
index 85f68359c0..03b257289f 100644
--- a/src/locale/lang/zh-TW.js
+++ b/src/locale/lang/zh-TW.js
@@ -16,6 +16,10 @@ export default {
       startTime: '開始時間',
       endDate: '結束日期',
       endTime: '結束時間',
+      prevYear: '前一年',
+      nextYear: '後一年',
+      prevMonth: '上個月',
+      nextMonth: '下個月',
       year: '年',
       month1: '1 月',
       month2: '2 月',
@@ -78,6 +82,7 @@ export default {
       error: '輸入的資料不符規定!'
     },
     upload: {
+      deleteTip: '按 delete 鍵可刪除',
       delete: '刪除',
       preview: '查看圖片',
       continue: '繼續上傳'
diff --git a/src/mixins/focus.js b/src/mixins/focus.js
new file mode 100644
index 0000000000..768ba50372
--- /dev/null
+++ b/src/mixins/focus.js
@@ -0,0 +1,9 @@
+export default function(ref) {
+  return {
+    methods: {
+      focus() {
+        this.$refs[ref].focus();
+      }
+    }
+  };
+};
diff --git a/src/mixins/migrating.js b/src/mixins/migrating.js
index d853439aa8..a69a0af35a 100644
--- a/src/mixins/migrating.js
+++ b/src/mixins/migrating.js
@@ -23,20 +23,20 @@ export default {
   mounted() {
     if (process.env.NODE_ENV === 'production') return;
     if (!this.$vnode) return;
-    const { props, events } = this.getMigratingConfig();
+    const { props = {}, events = {} } = this.getMigratingConfig();
     const { data, componentOptions } = this.$vnode;
     const definedProps = data.attrs || {};
     const definedEvents = componentOptions.listeners || {};
 
     for (let propName in definedProps) {
       if (definedProps.hasOwnProperty(propName) && props[propName]) {
-        console.warn(`[Element Migrating][Attribute]: ${props[propName]}`);
+        console.warn(`[Element Migrating][${this.$options.name}][Attribute]: ${props[propName]}`);
       }
     }
 
     for (let eventName in definedEvents) {
       if (definedEvents.hasOwnProperty(eventName) && events[eventName]) {
-        console.warn(`[Element Migrating][Event]: ${events[eventName]}`);
+        console.warn(`[Element Migrating][${this.$options.name}][Event]: ${events[eventName]}`);
       }
     }
   },
diff --git a/src/utils/after-leave.js b/src/utils/after-leave.js
new file mode 100644
index 0000000000..dd6cf2a62e
--- /dev/null
+++ b/src/utils/after-leave.js
@@ -0,0 +1,27 @@
+/**
+ * Bind after-leave event for vue instance. Make sure after-leave is called in any browsers.
+ *
+ * @param {Vue} instance Vue instance.
+ * @param {Function} callback callback of after-leave event
+ * @param {Number} speed the speed of transition, default value is 300ms
+ * @param {Boolean} once weather bind after-leave once. default value is false.
+ */
+export default function(instance, callback, speed = 300, once = false) {
+  if (!instance || !callback) throw new Error('instance & callback is required');
+  let called = false;
+  const afterLeaveCallback = function() {
+    if (called) return;
+    called = true;
+    if (callback) {
+      callback.apply(null, arguments);
+    }
+  };
+  if (once) {
+    instance.$once('after-leave', afterLeaveCallback);
+  } else {
+    instance.$on('after-leave', afterLeaveCallback);
+  }
+  setTimeout(() => {
+    afterLeaveCallback();
+  }, speed + 100);
+};
diff --git a/src/utils/aria-dialog.js b/src/utils/aria-dialog.js
new file mode 100644
index 0000000000..c56ae42f47
--- /dev/null
+++ b/src/utils/aria-dialog.js
@@ -0,0 +1,90 @@
+import Utils from './aria-utils';
+
+/**
+ * @constructor
+ * @desc Dialog object providing modal focus management.
+ *
+ * Assumptions: The element serving as the dialog container is present in the
+ * DOM and hidden. The dialog container has role='dialog'.
+ *
+ * @param dialogId
+ *          The ID of the element serving as the dialog container.
+ * @param focusAfterClosed
+ *          Either the DOM node or the ID of the DOM node to focus when the
+ *          dialog closes.
+ * @param focusFirst
+ *          Optional parameter containing either the DOM node or the ID of the
+ *          DOM node to focus when the dialog opens. If not specified, the
+ *          first focusable element in the dialog will receive focus.
+ */
+var aria = aria || {};
+var tabEvent;
+
+aria.Dialog = function(dialog, focusAfterClosed, focusFirst) {
+  this.dialogNode = dialog;
+  if (this.dialogNode === null || this.dialogNode.getAttribute('role') !== 'dialog') {
+    throw new Error('Dialog() requires a DOM element with ARIA role of dialog.');
+  }
+
+  if (typeof focusAfterClosed === 'string') {
+    this.focusAfterClosed = document.getElementById(focusAfterClosed);
+  } else if (typeof focusAfterClosed === 'object') {
+    this.focusAfterClosed = focusAfterClosed;
+  } else {
+    this.focusAfterClosed = null;
+  }
+
+  if (typeof focusFirst === 'string') {
+    this.focusFirst = document.getElementById(focusFirst);
+  } else if (typeof focusFirst === 'object') {
+    this.focusFirst = focusFirst;
+  } else {
+    this.focusFirst = null;
+  }
+
+  if (this.focusFirst) {
+    this.focusFirst.focus();
+  } else {
+    Utils.focusFirstDescendant(this.dialogNode);
+  }
+
+  this.lastFocus = document.activeElement;
+  tabEvent = (e) => {
+    this.trapFocus(e);
+  };
+  this.addListeners();
+};
+
+aria.Dialog.prototype.addListeners = function() {
+  document.addEventListener('focus', tabEvent, true);
+};
+
+aria.Dialog.prototype.removeListeners = function() {
+  document.removeEventListener('focus', tabEvent, true);
+};
+
+aria.Dialog.prototype.closeDialog = function() {
+  this.removeListeners();
+  if (this.focusAfterClosed) {
+    setTimeout(() => {
+      this.focusAfterClosed.focus();
+    });
+  }
+};
+
+aria.Dialog.prototype.trapFocus = function(event) {
+  if (Utils.IgnoreUtilFocusChanges) {
+    return;
+  }
+  if (this.dialogNode.contains(event.target)) {
+    this.lastFocus = event.target;
+  } else {
+    Utils.focusFirstDescendant(this.dialogNode);
+    if (this.lastFocus === document.activeElement) {
+      Utils.focusLastDescendant(this.dialogNode);
+    }
+    this.lastFocus = document.activeElement;
+  }
+};
+
+export default aria.Dialog;
diff --git a/src/utils/aria-utils.js b/src/utils/aria-utils.js
new file mode 100644
index 0000000000..2e7f84ce6b
--- /dev/null
+++ b/src/utils/aria-utils.js
@@ -0,0 +1,121 @@
+var aria = aria || {};
+
+aria.Utils = aria.Utils || {};
+
+/**
+ * @desc Set focus on descendant nodes until the first focusable element is
+ *       found.
+ * @param element
+ *          DOM node for which to find the first focusable descendant.
+ * @returns
+ *  true if a focusable element is found and focus is set.
+ */
+aria.Utils.focusFirstDescendant = function(element) {
+  for (var i = 0; i < element.childNodes.length; i++) {
+    var child = element.childNodes[i];
+    if (aria.Utils.attemptFocus(child) || aria.Utils.focusFirstDescendant(child)) {
+      return true;
+    }
+  }
+  return false;
+};
+
+/**
+ * @desc Find the last descendant node that is focusable.
+ * @param element
+ *          DOM node for which to find the last focusable descendant.
+ * @returns
+ *  true if a focusable element is found and focus is set.
+ */
+
+aria.Utils.focusLastDescendant = function(element) {
+  for (var i = element.childNodes.length - 1; i >= 0; i--) {
+    var child = element.childNodes[i];
+    if (aria.Utils.attemptFocus(child) || aria.Utils.focusLastDescendant(child)) {
+      return true;
+    }
+  }
+  return false;
+};
+
+/**
+ * @desc Set Attempt to set focus on the current node.
+ * @param element
+ *          The node to attempt to focus on.
+ * @returns
+ *  true if element is focused.
+ */
+aria.Utils.attemptFocus = function(element) {
+  if (!aria.Utils.isFocusable(element)) {
+    return false;
+  }
+  aria.Utils.IgnoreUtilFocusChanges = true;
+  try {
+    element.focus();
+  } catch (e) {
+  }
+  aria.Utils.IgnoreUtilFocusChanges = false;
+  return (document.activeElement === element);
+};
+
+aria.Utils.isFocusable = function(element) {
+  if (element.tabIndex > 0 || (element.tabIndex === 0 && element.getAttribute('tabIndex') !== null)) {
+    return true;
+  }
+
+  if (element.disabled) {
+    return false;
+  }
+
+  switch (element.nodeName) {
+    case 'A':
+      return !!element.href && element.rel !== 'ignore';
+    case 'INPUT':
+      return element.type !== 'hidden' && element.type !== 'file';
+    case 'BUTTON':
+    case 'SELECT':
+    case 'TEXTAREA':
+      return true;
+    default:
+      return false;
+  }
+};
+
+/**
+ * 触发一个事件
+ * mouseenter, mouseleave, mouseover, keyup, change, click 等
+ * @param  {Element} elm
+ * @param  {String} name
+ * @param  {*} opts
+ */
+aria.Utils.triggerEvent = function(elm, name, ...opts) {
+  let eventName;
+
+  if (/^mouse|click/.test(name)) {
+    eventName = 'MouseEvents';
+  } else if (/^key/.test(name)) {
+    eventName = 'KeyboardEvent';
+  } else {
+    eventName = 'HTMLEvents';
+  }
+  const evt = document.createEvent(eventName);
+
+  evt.initEvent(name, ...opts);
+  elm.dispatchEvent
+    ? elm.dispatchEvent(evt)
+    : elm.fireEvent('on' + name, evt);
+
+  return elm;
+};
+
+aria.Utils.keys = {
+  tab: 9,
+  enter: 13,
+  space: 32,
+  left: 37,
+  up: 38,
+  right: 39,
+  down: 40
+};
+
+export default aria.Utils;
diff --git a/src/utils/clickoutside.js b/src/utils/clickoutside.js
index 8122fa2d2b..e002548f38 100644
--- a/src/utils/clickoutside.js
+++ b/src/utils/clickoutside.js
@@ -5,12 +5,37 @@ const nodeList = [];
 const ctx = '@@clickoutsideContext';
 
 let startClick;
+let seed = 0;
 
 !Vue.prototype.$isServer && on(document, 'mousedown', e => (startClick = e));
 
 !Vue.prototype.$isServer && on(document, 'mouseup', e => {
   nodeList.forEach(node => node[ctx].documentHandler(e, startClick));
 });
+
+function createDocumentHandler(el, binding, vnode) {
+  return function(mouseup = {}, mousedown = {}) {
+    if (!vnode ||
+      !vnode.context ||
+      !mouseup.target ||
+      !mousedown.target ||
+      el.contains(mouseup.target) ||
+      el.contains(mousedown.target) ||
+      el === mouseup.target ||
+      (vnode.context.popperElm &&
+      (vnode.context.popperElm.contains(mouseup.target) ||
+      vnode.context.popperElm.contains(mousedown.target)))) return;
+
+    if (binding.expression &&
+      el[ctx].methodName &&
+      vnode.context[el[ctx].methodName]) {
+      vnode.context[el[ctx].methodName]();
+    } else {
+      el[ctx].bindingFn && el[ctx].bindingFn();
+    }
+  };
+}
+
 /**
  * v-clickoutside
  * @desc 点击元素外面才会触发的事件
@@ -21,35 +46,18 @@ let startClick;
  */
 export default {
   bind(el, binding, vnode) {
-    const id = nodeList.push(el) - 1;
-    const documentHandler = function(mouseup = {}, mousedown = {}) {
-      if (!vnode.context ||
-        !mouseup.target ||
-        !mousedown.target ||
-        el.contains(mouseup.target) ||
-        el.contains(mousedown.target) ||
-        el === mouseup.target ||
-        (vnode.context.popperElm &&
-        (vnode.context.popperElm.contains(mouseup.target) ||
-        vnode.context.popperElm.contains(mousedown.target)))) return;
-
-      if (binding.expression &&
-        el[ctx].methodName &&
-        vnode.context[el[ctx].methodName]) {
-        vnode.context[el[ctx].methodName]();
-      } else {
-        el[ctx].bindingFn && el[ctx].bindingFn();
-      }
-    };
+    nodeList.push(el);
+    const id = seed++;
     el[ctx] = {
       id,
-      documentHandler,
+      documentHandler: createDocumentHandler(el, binding, vnode),
       methodName: binding.expression,
       bindingFn: binding.value
     };
   },
 
-  update(el, binding) {
+  update(el, binding, vnode) {
+    el[ctx].documentHandler = createDocumentHandler(el, binding, vnode);
     el[ctx].methodName = binding.expression;
     el[ctx].bindingFn = binding.value;
   },
@@ -63,5 +71,6 @@ export default {
         break;
       }
     }
+    delete el[ctx];
   }
 };
diff --git a/src/utils/dom.js b/src/utils/dom.js
index 6283ce9371..0221295f5f 100644
--- a/src/utils/dom.js
+++ b/src/utils/dom.js
@@ -86,10 +86,8 @@ export function addClass(el, cls) {
 
     if (el.classList) {
       el.classList.add(clsName);
-    } else {
-      if (!hasClass(el, clsName)) {
-        curClass += ' ' + clsName;
-      }
+    } else if (!hasClass(el, clsName)) {
+      curClass += ' ' + clsName;
     }
   }
   if (!el.classList) {
@@ -109,10 +107,8 @@ export function removeClass(el, cls) {
 
     if (el.classList) {
       el.classList.remove(clsName);
-    } else {
-      if (hasClass(el, clsName)) {
-        curClass = curClass.replace(' ' + clsName + ' ', ' ');
-      }
+    } else if (hasClass(el, clsName)) {
+      curClass = curClass.replace(' ' + clsName + ' ', ' ');
     }
   }
   if (!el.classList) {
diff --git a/src/utils/menu/aria-menubar.js b/src/utils/menu/aria-menubar.js
new file mode 100644
index 0000000000..a5edc5033a
--- /dev/null
+++ b/src/utils/menu/aria-menubar.js
@@ -0,0 +1,14 @@
+import MenuItem from './aria-menuitem';
+
+const Menu = function(domNode) {
+  this.domNode = domNode;
+  this.init();
+};
+
+Menu.prototype.init = function() {
+  let menuChildren = this.domNode.childNodes;
+  [].filter.call(menuChildren, child => child.nodeType === 1).forEach(child => {
+    new MenuItem(child); // eslint-disable-line
+  });
+};
+export default Menu;
diff --git a/src/utils/menu/aria-menuitem.js b/src/utils/menu/aria-menuitem.js
new file mode 100644
index 0000000000..3431ac0b68
--- /dev/null
+++ b/src/utils/menu/aria-menuitem.js
@@ -0,0 +1,49 @@
+import Utils from '../aria-utils';
+import SubMenu from './aria-submenu';
+
+const MenuItem = function(domNode) {
+  this.domNode = domNode;
+  this.submenu = null;
+  this.init();
+};
+
+MenuItem.prototype.init = function() {
+  this.domNode.setAttribute('tabindex', '0');
+  let menuChild = this.domNode.querySelector('.el-menu');
+  if (menuChild) {
+    this.submenu = new SubMenu(this, menuChild);
+  }
+  this.addListeners();
+};
+
+MenuItem.prototype.addListeners = function() {
+  const keys = Utils.keys;
+  this.domNode.addEventListener('keydown', event => {
+    let prevDef = false;
+    switch (event.keyCode) {
+      case keys.down:
+        Utils.triggerEvent(event.currentTarget, 'mouseenter');
+        this.submenu && this.submenu.gotoSubIndex(0);
+        prevDef = true;
+        break;
+      case keys.up:
+        Utils.triggerEvent(event.currentTarget, 'mouseenter');
+        this.submenu && this.submenu.gotoSubIndex(this.submenu.subMenuItems.length - 1);
+        prevDef = true;
+        break;
+      case keys.tab:
+        Utils.triggerEvent(event.currentTarget, 'mouseleave');
+        break;
+      case keys.enter:
+      case keys.space:
+        prevDef = true;
+        event.currentTarget.click();
+        break;
+    }
+    if (prevDef) {
+      event.preventDefault();
+    }
+  });
+};
+
+export default MenuItem;
diff --git a/src/utils/menu/aria-submenu.js b/src/utils/menu/aria-submenu.js
new file mode 100644
index 0000000000..06a77bbc61
--- /dev/null
+++ b/src/utils/menu/aria-submenu.js
@@ -0,0 +1,59 @@
+import Utils from '../aria-utils';
+
+const SubMenu = function(parent, domNode) {
+  this.domNode = domNode;
+  this.parent = parent;
+  this.subMenuItems = [];
+  this.subIndex = 0;
+  this.init();
+};
+
+SubMenu.prototype.init = function() {
+  this.subMenuItems = this.domNode.querySelectorAll('li');
+  this.addListeners();
+};
+
+SubMenu.prototype.gotoSubIndex = function(idx) {
+  if (idx === this.subMenuItems.length) {
+    idx = 0;
+  } else if (idx < 0) {
+    idx = this.subMenuItems.length - 1;
+  }
+  this.subMenuItems[idx].focus();
+  this.subIndex = idx;
+};
+
+SubMenu.prototype.addListeners = function() {
+  const keys = Utils.keys;
+  const parentNode = this.parent.domNode;
+  Array.prototype.forEach.call(this.subMenuItems, el => {
+    el.addEventListener('keydown', event => {
+      let prevDef = false;
+      switch (event.keyCode) {
+        case keys.down:
+          this.gotoSubIndex(this.subIndex + 1);
+          prevDef = true;
+          break;
+        case keys.up:
+          this.gotoSubIndex(this.subIndex - 1);
+          prevDef = true;
+          break;
+        case keys.tab:
+          Utils.triggerEvent(parentNode, 'mouseleave');
+          break;
+        case keys.enter:
+        case keys.space:
+          prevDef = true;
+          event.currentTarget.click();
+          break;
+      }
+      if (prevDef) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      return false;
+    });
+  });
+};
+
+export default SubMenu;
diff --git a/src/utils/popper.js b/src/utils/popper.js
index 8a405e2368..cb3b6d9d08 100644
--- a/src/utils/popper.js
+++ b/src/utils/popper.js
@@ -71,6 +71,8 @@
 
         arrowElement: '[x-arrow]',
 
+        arrowOffset: 0,
+
         // list of functions used to modify the offsets before they are applied to the popper
         modifiers: [ 'shift', 'offset', 'preventOverflow', 'keepTogether', 'arrow', 'flip', 'applyStyle'],
 
@@ -238,7 +240,6 @@
         if (typeof this.state.updateCallback === 'function') {
             this.state.updateCallback(data);
         }
-
     };
 
     /**
@@ -436,7 +437,6 @@
         popperOffsets.width   = popperRect.width;
         popperOffsets.height  = popperRect.height;
 
-
         return {
             popper: popperOffsets,
             reference: referenceOffsets
@@ -462,6 +462,7 @@
                 target = root;
             }
             target.addEventListener('scroll', this.state.updateBound);
+            this.state.scrollTarget = target;
         }
     };
 
@@ -474,13 +475,9 @@
     Popper.prototype._removeEventListeners = function() {
         // NOTE: 1 DOM access here
         root.removeEventListener('resize', this.state.updateBound);
-        if (this._options.boundariesElement !== 'window') {
-            var target = getScrollParent(this._reference);
-            // here it could be both `body` or `documentElement` thanks to Firefox, we then check both
-            if (target === root.document.body || target === root.document.documentElement) {
-                target = root;
-            }
-            target.removeEventListener('scroll', this.state.updateBound);
+        if (this._options.boundariesElement !== 'window' && this.state.scrollTarget) {
+            this.state.scrollTarget.removeEventListener('scroll', this.state.updateBound);
+            this.state.scrollTarget = null;
         }
         this.state.updateBound = null;
     };
@@ -517,13 +514,13 @@
             var scrollParent = getScrollParent(this._popper);
             var offsetParentRect = getOffsetRect(offsetParent);
 
-			// Thanks the fucking native API, `document.body.scrollTop` & `document.documentElement.scrollTop`
-			var getScrollTopValue = function (element) {
-				return element == document.body ? Math.max(document.documentElement.scrollTop, document.body.scrollTop) : element.scrollTop;
-			}
-			var getScrollLeftValue = function (element) {
-				return element == document.body ? Math.max(document.documentElement.scrollLeft, document.body.scrollLeft) : element.scrollLeft;
-			}
+            // Thanks the fucking native API, `document.body.scrollTop` & `document.documentElement.scrollTop`
+            var getScrollTopValue = function (element) {
+                return element == document.body ? Math.max(document.documentElement.scrollTop, document.body.scrollTop) : element.scrollTop;
+            }
+            var getScrollLeftValue = function (element) {
+                return element == document.body ? Math.max(document.documentElement.scrollLeft, document.body.scrollLeft) : element.scrollLeft;
+            }
 
             // if the popper is fixed we don't have to substract scrolling from the boundaries
             var scrollTop = data.offsets.popper.position === 'fixed' ? 0 : getScrollTopValue(scrollParent);
@@ -878,6 +875,7 @@
      */
     Popper.prototype.modifiers.arrow = function(data) {
         var arrow  = this._options.arrowElement;
+        var arrowOffset = this._options.arrowOffset;
 
         // if the arrowElement is a string, suppose it's a CSS selector
         if (typeof arrow === 'string') {
@@ -909,6 +907,7 @@
 
         var len         = isVertical ? 'height' : 'width';
         var side        = isVertical ? 'top' : 'left';
+        var translate   = isVertical ? 'translateY' : 'translateX';
         var altSide     = isVertical ? 'left' : 'top';
         var opSide      = isVertical ? 'bottom' : 'right';
         var arrowSize   = getOuterSizes(arrow)[len];
@@ -927,12 +926,12 @@
         }
 
         // compute center of the popper
-        var center = reference[side] + (reference[len] / 2) - (arrowSize / 2);
+        var center = reference[side] + (arrowOffset || (reference[len] / 2) - (arrowSize / 2));
 
         var sideValue = center - popper[side];
 
         // prevent arrow from being placed not contiguously to its popper
-        sideValue = Math.max(Math.min(popper[len] - arrowSize - 3, sideValue), 3);
+        sideValue = Math.max(Math.min(popper[len] - arrowSize - 8, sideValue), 8);
         arrowStyle[side] = sideValue;
         arrowStyle[altSide] = ''; // make sure to remove any old style from the arrow
 
@@ -1061,7 +1060,7 @@
         if (parent === root.document) {
             // Firefox puts the scrollTOp value on `documentElement` instead of `body`, we then check which of them is
             // greater than 0 and return the proper element
-            if (root.document.body.scrollTop) {
+            if (root.document.body.scrollTop || root.document.body.scrollLeft) {
                 return root.document.body;
             } else {
                 return root.document.documentElement;
diff --git a/src/utils/popup/index.js b/src/utils/popup/index.js
index daa562d3d2..8156b2dcf0 100644
--- a/src/utils/popup/index.js
+++ b/src/utils/popup/index.js
@@ -2,41 +2,9 @@ import Vue from 'vue';
 import merge from 'element-ui/src/utils/merge';
 import PopupManager from 'element-ui/src/utils/popup/popup-manager';
 import getScrollBarWidth from '../scrollbar-width';
+import { getStyle, addClass, removeClass, hasClass } from '../dom';
 
 let idSeed = 1;
-const transitions = [];
-
-const hookTransition = (transition) => {
-  if (transitions.indexOf(transition) !== -1) return;
-
-  const getVueInstance = (element) => {
-    let instance = element.__vue__;
-    if (!instance) {
-      const textNode = element.previousSibling;
-      if (textNode.__vue__) {
-        instance = textNode.__vue__;
-      }
-    }
-    return instance;
-  };
-
-  Vue.transition(transition, {
-    afterEnter(el) {
-      const instance = getVueInstance(el);
-
-      if (instance) {
-        instance.doAfterOpen && instance.doAfterOpen();
-      }
-    },
-    afterLeave(el) {
-      const instance = getVueInstance(el);
-
-      if (instance) {
-        instance.doAfterClose && instance.doAfterClose();
-      }
-    }
-  });
-};
 
 let scrollBarWidth;
 
@@ -49,19 +17,11 @@ const getDOM = function(dom) {
 };
 
 export default {
-  model: {
-    prop: 'visible',
-    event: 'visible-change'
-  },
   props: {
     visible: {
       type: Boolean,
       default: false
     },
-    transition: {
-      type: String,
-      default: ''
-    },
     openDelay: {},
     closeDelay: {},
     zIndex: {},
@@ -92,12 +52,6 @@ export default {
     }
   },
 
-  created() {
-    if (this.transition) {
-      hookTransition(this.transition);
-    }
-  },
-
   beforeMount() {
     this._popupId = 'popup-' + idSeed++;
     PopupManager.register(this._popupId, this);
@@ -106,19 +60,16 @@ export default {
   beforeDestroy() {
     PopupManager.deregister(this._popupId);
     PopupManager.closeModal(this._popupId);
-    if (this.modal && this.bodyOverflow !== null && this.bodyOverflow !== 'hidden') {
-      document.body.style.overflow = this.bodyOverflow;
-      document.body.style.paddingRight = this.bodyPaddingRight;
-    }
-    this.bodyOverflow = null;
-    this.bodyPaddingRight = null;
+
+    this.restoreBodyStyle();
   },
 
   data() {
     return {
       opened: false,
-      bodyOverflow: null,
       bodyPaddingRight: null,
+      computedBodyPaddingRight: 0,
+      withoutHiddenClass: true,
       rendered: false
     };
   },
@@ -145,7 +96,6 @@ export default {
     open(options) {
       if (!this.rendered) {
         this.rendered = true;
-        this.$emit('visible-change', true);
       }
 
       const props = merge({}, this.$props || this, options);
@@ -174,8 +124,6 @@ export default {
 
       this._opening = true;
 
-      this.$emit('visible-change', true);
-
       const dom = getDOM(this.$el);
 
       const modal = props.modal;
@@ -192,16 +140,18 @@ export default {
         }
         PopupManager.openModal(this._popupId, PopupManager.nextZIndex(), this.modalAppendToBody ? undefined : dom, props.modalClass, props.modalFade);
         if (props.lockScroll) {
-          if (!this.bodyOverflow) {
+          this.withoutHiddenClass = !hasClass(document.body, 'el-popup-parent--hidden');
+          if (this.withoutHiddenClass) {
             this.bodyPaddingRight = document.body.style.paddingRight;
-            this.bodyOverflow = document.body.style.overflow;
+            this.computedBodyPaddingRight = parseInt(getStyle(document.body, 'paddingRight'), 10);
           }
           scrollBarWidth = getScrollBarWidth();
           let bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;
-          if (scrollBarWidth > 0 && bodyHasOverflow) {
-            document.body.style.paddingRight = scrollBarWidth + 'px';
+          let bodyOverflowY = getStyle(document.body, 'overflowY');
+          if (scrollBarWidth > 0 && (bodyHasOverflow || bodyOverflowY === 'scroll') && this.withoutHiddenClass) {
+            document.body.style.paddingRight = this.computedBodyPaddingRight + scrollBarWidth + 'px';
           }
-          document.body.style.overflow = 'hidden';
+          addClass(document.body, 'el-popup-parent--hidden');
         }
       }
 
@@ -214,9 +164,7 @@ export default {
 
       this.onOpen && this.onOpen();
 
-      if (!this.transition) {
-        this.doAfterOpen();
-      }
+      this.doAfterOpen();
     },
 
     doAfterOpen() {
@@ -245,32 +193,30 @@ export default {
     },
 
     doClose() {
-      this.$emit('visible-change', false);
       this._closing = true;
 
       this.onClose && this.onClose();
 
       if (this.lockScroll) {
-        setTimeout(() => {
-          if (this.modal && this.bodyOverflow !== 'hidden') {
-            document.body.style.overflow = this.bodyOverflow;
-            document.body.style.paddingRight = this.bodyPaddingRight;
-          }
-          this.bodyOverflow = null;
-          this.bodyPaddingRight = null;
-        }, 200);
+        setTimeout(this.restoreBodyStyle, 200);
       }
 
       this.opened = false;
 
-      if (!this.transition) {
-        this.doAfterClose();
-      }
+      this.doAfterClose();
     },
 
     doAfterClose() {
       PopupManager.closeModal(this._popupId);
       this._closing = false;
+    },
+
+    restoreBodyStyle() {
+      if (this.modal && this.withoutHiddenClass) {
+        document.body.style.paddingRight = this.bodyPaddingRight;
+        removeClass(document.body, 'el-popup-parent--hidden');
+      }
+      this.withoutHiddenClass = true;
     }
   }
 };
diff --git a/src/utils/popup/popup-manager.js b/src/utils/popup/popup-manager.js
index fbf7691deb..2d18ef18fc 100644
--- a/src/utils/popup/popup-manager.js
+++ b/src/utils/popup/popup-manager.js
@@ -2,6 +2,8 @@ import Vue from 'vue';
 import { addClass, removeClass } from 'element-ui/src/utils/dom';
 
 let hasModal = false;
+let hasInitZIndex = false;
+let zIndex = 2000;
 
 const getModal = function() {
   if (Vue.prototype.$isServer) return;
@@ -29,8 +31,6 @@ const getModal = function() {
 const instances = {};
 
 const PopupManager = {
-  zIndex: 2000,
-
   modalFade: true,
 
   getInstance: function(id) {
@@ -103,6 +103,7 @@ const PopupManager = {
     if (zIndex) {
       modalDom.style.zIndex = zIndex;
     }
+    modalDom.tabIndex = 0;
     modalDom.style.display = '';
 
     this.modalStack.push({ id: id, zIndex: zIndex, modalClass: modalClass });
@@ -150,6 +151,20 @@ const PopupManager = {
   }
 };
 
+Object.defineProperty(PopupManager, 'zIndex', {
+  configurable: true,
+  get() {
+    if (!hasInitZIndex) {
+      zIndex = (Vue.prototype.$ELEMENT || {}).zIndex || zIndex;
+      hasInitZIndex = true;
+    }
+    return zIndex;
+  },
+  set(value) {
+    zIndex = value;
+  }
+});
+
 const getTopPopup = function() {
   if (Vue.prototype.$isServer) return;
   if (PopupManager.modalStack.length > 0) {
diff --git a/src/utils/resize-event.js b/src/utils/resize-event.js
index 75225e6b79..cd130ba3f3 100644
--- a/src/utils/resize-event.js
+++ b/src/utils/resize-event.js
@@ -1,189 +1,35 @@
-/* Modified from https://github.com/sdecima/javascript-detect-element-resize
- * version: 0.5.3
- *
- * The MIT License (MIT)
- *
- * Copyright (c) 2013 Sebastián Décima
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of
- * this software and associated documentation files (the "Software"), to deal in
- * the Software without restriction, including without limitation the rights to
- * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
- * the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
- * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
- * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
- * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- */
-const isServer = typeof window === 'undefined';
-
-/* istanbul ignore next */
-const requestFrame = (function() {
-  if (isServer) return;
-  const raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
-    function(fn) {
-      return window.setTimeout(fn, 20);
-    };
-  return function(fn) {
-    return raf(fn);
-  };
-})();
-
-/* istanbul ignore next */
-const cancelFrame = (function() {
-  if (isServer) return;
-  const cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.clearTimeout;
-  return function(id) {
-    return cancel(id);
-  };
-})();
-
-/* istanbul ignore next */
-const resetTrigger = function(element) {
-  const trigger = element.__resizeTrigger__;
-  const expand = trigger.firstElementChild;
-  const contract = trigger.lastElementChild;
-  const expandChild = expand.firstElementChild;
+import ResizeObserver from 'resize-observer-polyfill';
 
-  contract.scrollLeft = contract.scrollWidth;
-  contract.scrollTop = contract.scrollHeight;
-  expandChild.style.width = expand.offsetWidth + 1 + 'px';
-  expandChild.style.height = expand.offsetHeight + 1 + 'px';
-  expand.scrollLeft = expand.scrollWidth;
-  expand.scrollTop = expand.scrollHeight;
-};
-
-/* istanbul ignore next */
-const checkTriggers = function(element) {
-  return element.offsetWidth !== element.__resizeLast__.width || element.offsetHeight !== element.__resizeLast__.height;
-};
+const isServer = typeof window === 'undefined';
 
 /* istanbul ignore next */
-const scrollListener = function(event) {
-  resetTrigger(this);
-  if (this.__resizeRAF__) cancelFrame(this.__resizeRAF__);
-  this.__resizeRAF__ = requestFrame(() => {
-    if (checkTriggers(this)) {
-      this.__resizeLast__.width = this.offsetWidth;
-      this.__resizeLast__.height = this.offsetHeight;
-      this.__resizeListeners__.forEach((fn) => {
-        fn.call(this, event);
+const resizeHandler = function(entries) {
+  for (let entry of entries) {
+    const listeners = entry.target.__resizeListeners__ || [];
+    if (listeners.length) {
+      listeners.forEach(fn => {
+        fn();
       });
     }
-  });
-};
-
-/* Detect CSS Animations support to detect element display/re-attach */
-const attachEvent = isServer ? {} : document.attachEvent;
-const DOM_PREFIXES = 'Webkit Moz O ms'.split(' ');
-const START_EVENTS = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' ');
-const RESIZE_ANIMATION_NAME = 'resizeanim';
-let animation = false;
-let keyFramePrefix = '';
-let animationStartEvent = 'animationstart';
-
-/* istanbul ignore next */
-if (!attachEvent && !isServer) {
-  const testElement = document.createElement('fakeelement');
-  if (testElement.style.animationName !== undefined) {
-    animation = true;
-  }
-
-  if (animation === false) {
-    let prefix = '';
-    for (var i = 0; i < DOM_PREFIXES.length; i++) {
-      if (testElement.style[DOM_PREFIXES[i] + 'AnimationName'] !== undefined) {
-        prefix = DOM_PREFIXES[i];
-        keyFramePrefix = '-' + prefix.toLowerCase() + '-';
-        animationStartEvent = START_EVENTS[i];
-        animation = true;
-        break;
-      }
-    }
-  }
-}
-
-let stylesCreated = false;
-/* istanbul ignore next */
-const createStyles = function() {
-  if (!stylesCreated && !isServer) {
-    const animationKeyframes = `@${keyFramePrefix}keyframes ${RESIZE_ANIMATION_NAME} { from { opacity: 0; } to { opacity: 0; } } `;
-    const animationStyle = `${keyFramePrefix}animation: 1ms ${RESIZE_ANIMATION_NAME};`;
-
-    // opacity: 0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
-    const css = `${animationKeyframes}
-      .resize-triggers { ${animationStyle} visibility: hidden; opacity: 0; }
-      .resize-triggers, .resize-triggers > div, .contract-trigger:before { content: \" \"; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1 }
-      .resize-triggers > div { background: #eee; overflow: auto; }
-      .contract-trigger:before { width: 200%; height: 200%; }`;
-
-    const head = document.head || document.getElementsByTagName('head')[0];
-    const style = document.createElement('style');
-
-    style.type = 'text/css';
-    if (style.styleSheet) {
-      style.styleSheet.cssText = css;
-    } else {
-      style.appendChild(document.createTextNode(css));
-    }
-
-    head.appendChild(style);
-    stylesCreated = true;
   }
 };
 
 /* istanbul ignore next */
 export const addResizeListener = function(element, fn) {
   if (isServer) return;
-  if (attachEvent) {
-    element.attachEvent('onresize', fn);
-  } else {
-    if (!element.__resizeTrigger__) {
-      if (getComputedStyle(element).position === 'static') {
-        element.style.position = 'relative';
-      }
-      createStyles();
-      element.__resizeLast__ = {};
-      element.__resizeListeners__ = [];
-
-      const resizeTrigger = element.__resizeTrigger__ = document.createElement('div');
-      resizeTrigger.className = 'resize-triggers';
-      resizeTrigger.innerHTML = '<div class="expand-trigger"><div></div></div><div class="contract-trigger"></div>';
-      element.appendChild(resizeTrigger);
-
-      resetTrigger(element);
-      element.addEventListener('scroll', scrollListener, true);
-
-      /* Listen for a css animation to detect element display/re-attach */
-      if (animationStartEvent) {
-        resizeTrigger.addEventListener(animationStartEvent, function(event) {
-          if (event.animationName === RESIZE_ANIMATION_NAME) {
-            resetTrigger(element);
-          }
-        });
-      }
-    }
-    element.__resizeListeners__.push(fn);
+  if (!element.__resizeListeners__) {
+    element.__resizeListeners__ = [];
+    element.__ro__ = new ResizeObserver(resizeHandler);
+    element.__ro__.observe(element);
   }
+  element.__resizeListeners__.push(fn);
 };
 
 /* istanbul ignore next */
 export const removeResizeListener = function(element, fn) {
-  if (attachEvent) {
-    element.detachEvent('onresize', fn);
-  } else {
-    element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
-    if (!element.__resizeListeners__.length) {
-      element.removeEventListener('scroll', scrollListener);
-      element.__resizeTrigger__ = !element.removeChild(element.__resizeTrigger__);
-    }
+  if (!element || !element.__resizeListeners__) return;
+  element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
+  if (!element.__resizeListeners__.length) {
+    element.__ro__.disconnect();
   }
 };
diff --git a/src/utils/scroll-into-view.js b/src/utils/scroll-into-view.js
index ae2234b489..6d5b6929d1 100644
--- a/src/utils/scroll-into-view.js
+++ b/src/utils/scroll-into-view.js
@@ -8,8 +8,14 @@ export default function scrollIntoView(container, selected) {
     return;
   }
 
-  const top = selected.offsetTop;
-  const bottom = selected.offsetTop + selected.offsetHeight;
+  const offsetParents = [];
+  let pointer = selected.offsetParent;
+  while (pointer && container !== pointer && container.contains(pointer)) {
+    offsetParents.push(pointer);
+    pointer = pointer.offsetParent;
+  }
+  const top = selected.offsetTop + offsetParents.reduce((prev, curr) => (prev + curr.offsetTop), 0);
+  const bottom = top + selected.offsetHeight;
   const viewRectTop = container.scrollTop;
   const viewRectBottom = viewRectTop + container.clientHeight;
 
diff --git a/src/utils/shared.js b/src/utils/shared.js
index a81e77ea44..3b1ea11b52 100644
--- a/src/utils/shared.js
+++ b/src/utils/shared.js
@@ -1,3 +1,7 @@
 export function isDef(val) {
   return val !== undefined && val !== null;
 }
+export function isKorean(text) {
+  const reg = /([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi;
+  return reg.test(text);
+}
diff --git a/src/utils/sync.js b/src/utils/sync.js
deleted file mode 100644
index 673fb29abe..0000000000
--- a/src/utils/sync.js
+++ /dev/null
@@ -1,54 +0,0 @@
-const SYNC_HOOK_PROP = '$v-sync';
-
-/**
- * v-sync directive
- *
- * Usage:
- *  v-sync:component-prop="context prop name"
- *
- * If your want to sync component's prop "visible" to context prop "myVisible", use like this:
- *  v-sync:visible="myVisible"
- */
-export default {
-  bind(el, binding, vnode) {
-    const context = vnode.context;
-    const component = vnode.child;
-    const expression = binding.expression;
-    const prop = binding.arg;
-
-    if (!expression || !prop) {
-      console.warn('v-sync should specify arg & expression, for example: v-sync:visible="myVisible"');
-      return;
-    }
-
-    if (!component || !component.$watch) {
-      console.warn('v-sync is only available on Vue Component');
-      return;
-    }
-
-    const unwatchContext = context.$watch(expression, (val) => {
-      component[prop] = val;
-    });
-
-    const unwatchComponent = component.$watch(prop, (val) => {
-      context[expression] = val;
-    });
-
-    Object.defineProperty(component, SYNC_HOOK_PROP, {
-      value: {
-        unwatchContext,
-        unwatchComponent
-      },
-      enumerable: false
-    });
-  },
-
-  unbind(el, binding, vnode) {
-    const component = vnode.child;
-    if (component && component[SYNC_HOOK_PROP]) {
-      const { unwatchContext, unwatchComponent } = component[SYNC_HOOK_PROP];
-      unwatchContext && unwatchContext();
-      unwatchComponent && unwatchComponent();
-    }
-  }
-};
diff --git a/src/utils/util.js b/src/utils/util.js
index f185dcc54e..1b9db5fb90 100644
--- a/src/utils/util.js
+++ b/src/utils/util.js
@@ -1,4 +1,9 @@
+import Vue from 'vue';
+
 const hasOwnProperty = Object.prototype.hasOwnProperty;
+
+export function noop() {};
+
 export function hasOwn(obj, key) {
   return hasOwnProperty.call(obj, key);
 };
@@ -37,3 +42,81 @@ export const getValueByPath = function(object, prop) {
   }
   return result;
 };
+
+export function getPropByPath(obj, path, strict) {
+  let tempObj = obj;
+  path = path.replace(/\[(\w+)\]/g, '.$1');
+  path = path.replace(/^\./, '');
+
+  let keyArr = path.split('.');
+  let i = 0;
+  for (let len = keyArr.length; i < len - 1; ++i) {
+    if (!tempObj && !strict) break;
+    let key = keyArr[i];
+    if (key in tempObj) {
+      tempObj = tempObj[key];
+    } else {
+      if (strict) {
+        throw new Error('please transfer a valid prop path to form item!');
+      }
+      break;
+    }
+  }
+  return {
+    o: tempObj,
+    k: keyArr[i],
+    v: tempObj ? tempObj[keyArr[i]] : null
+  };
+};
+
+export const generateId = function() {
+  return Math.floor(Math.random() * 10000);
+};
+
+export const valueEquals = (a, b) => {
+  // see: https://stackoverflow.com/questions/3115982/how-to-check-if-two-arrays-are-equal-with-javascript
+  if (a === b) return true;
+  if (!(a instanceof Array)) return false;
+  if (!(b instanceof Array)) return false;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i !== a.length; ++i) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+};
+
+export const escapeRegexpString = (value = '') => String(value).replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
+
+// TODO: use native Array.find, Array.findIndex when IE support is dropped
+export const arrayFindIndex = function(arr, pred) {
+  for (let i = 0; i !== arr.length; ++i) {
+    if (pred(arr[i])) {
+      return i;
+    }
+  }
+  return -1;
+};
+
+export const arrayFind = function(arr, pred) {
+  const idx = arrayFindIndex(arr, pred);
+  return idx !== -1 ? arr[idx] : undefined;
+};
+
+// coerce truthy value to array
+export const coerceTruthyValueToArray = function(val) {
+  if (Array.isArray(val)) {
+    return val;
+  } else if (val) {
+    return [val];
+  } else {
+    return [];
+  }
+};
+
+export const isIE = function() {
+  return !Vue.prototype.$isServer && !isNaN(Number(document.documentMode));
+};
+
+export const isEdge = function() {
+  return !Vue.prototype.$isServer && navigator.userAgent.indexOf('Edge') > -1;
+};
diff --git a/src/utils/vdom.js b/src/utils/vdom.js
index 229096921f..7b6ee9d942 100644
--- a/src/utils/vdom.js
+++ b/src/utils/vdom.js
@@ -1,7 +1,7 @@
 import { hasOwn } from 'element-ui/src/utils/util';
 
 export function isVNode(node) {
-  return typeof node === 'object' && hasOwn(node, 'componentOptions');
+  return node !== null && typeof node === 'object' && hasOwn(node, 'componentOptions');
 };
 
 export function getFirstComponentChild(children) {
diff --git a/src/utils/vue-popper.js b/src/utils/vue-popper.js
index 897c35f991..3826161859 100644
--- a/src/utils/vue-popper.js
+++ b/src/utils/vue-popper.js
@@ -16,6 +16,10 @@ const stop = e => e.stopPropagation();
  */
 export default {
   props: {
+    transformOrigin: {
+      type: [Boolean, String],
+      default: true
+    },
     placement: {
       type: String,
       default: 'bottom'
@@ -31,7 +35,10 @@ export default {
     },
     value: Boolean,
     visibleArrow: Boolean,
-    transition: String,
+    arrowOffset: {
+      type: Number,
+      default: 35
+    },
     appendToBody: {
       type: Boolean,
       default: true
@@ -63,6 +70,9 @@ export default {
     },
 
     showPopper(val) {
+      if (this.disabled) {
+        return;
+      }
       val ? this.updatePopper() : this.destroyPopper();
       this.$emit('input', val);
     }
@@ -95,6 +105,7 @@ export default {
 
       options.placement = this.currentPlacement;
       options.offset = this.offset;
+      options.arrowOffset = this.arrowOffset;
       this.popperJS = new PopperJS(reference, popper, options);
       this.popperJS.onCreate(_ => {
         this.$emit('created', this);
@@ -109,12 +120,20 @@ export default {
     },
 
     updatePopper() {
-      this.popperJS ? this.popperJS.update() : this.createPopper();
+      const popperJS = this.popperJS;
+      if (popperJS) {
+        popperJS.update();
+        if (popperJS._popper) {
+          popperJS._popper.style.zIndex = PopupManager.nextZIndex();
+        }
+      } else {
+        this.createPopper();
+      }
     },
 
-    doDestroy() {
+    doDestroy(forceDestroy) {
       /* istanbul ignore if */
-      if (this.showPopper || !this.popperJS) return;
+      if (!this.popperJS || (this.showPopper && !forceDestroy)) return;
       this.popperJS.destroy();
       this.popperJS = null;
     },
@@ -126,6 +145,7 @@ export default {
     },
 
     resetTransformOrigin() {
+      if (!this.transformOrigin) return;
       let placementMap = {
         top: 'bottom',
         bottom: 'top',
@@ -134,7 +154,9 @@ export default {
       };
       let placement = this.popperJS._popper.getAttribute('x-placement').split('-')[0];
       let origin = placementMap[placement];
-      this.popperJS._popper.style.transformOrigin = ['top', 'bottom'].indexOf(placement) > -1 ? `center ${ origin }` : `${ origin } center`;
+      this.popperJS._popper.style.transformOrigin = typeof this.transformOrigin === 'string'
+        ? this.transformOrigin
+        : ['top', 'bottom'].indexOf(placement) > -1 ? `center ${ origin }` : `${ origin } center`;
     },
 
     appendArrow(element) {
@@ -164,7 +186,7 @@ export default {
   },
 
   beforeDestroy() {
-    this.doDestroy();
+    this.doDestroy(true);
     if (this.popperElm && this.popperElm.parentNode === document.body) {
       this.popperElm.removeEventListener('click', stop);
       document.body.removeChild(this.popperElm);
diff --git a/test/unit/index.js b/test/unit/index.js
index c1157e780f..facac592fd 100644
--- a/test/unit/index.js
+++ b/test/unit/index.js
@@ -1,7 +1,7 @@
 // Polyfill fn.bind() for PhantomJS
 /* eslint-disable no-extend-native */
 Function.prototype.bind = require('function-bind');
-require('packages/theme-default/src/index.css');
+require('packages/theme-chalk/lib/index.css');
 
 // require all test files (files that ends with .spec.js)
 const testsContext = require.context('./specs', true, /\.spec$/);
diff --git a/test/unit/karma.conf.js b/test/unit/karma.conf.js
index 0f1d316420..225489e493 100644
--- a/test/unit/karma.conf.js
+++ b/test/unit/karma.conf.js
@@ -1,15 +1,21 @@
-var webpackConfig = require('../../build/cooking.test');
+var webpackConfig = require('../../build/webpack.test');
 
 // no need for app entry during tests
-delete webpackConfig.entry;
+// delete webpackConfig.entry;
 
 module.exports = function(config) {
-  config.set({
+  var configuration = {
     // to run in additional browsers:
     // 1. install corresponding karma launcher
     //    http://karma-runner.github.io/0.13/config/browsers.html
     // 2. add it to the `browsers` array below.
-    browsers: ['PhantomJS'],
+    browsers: ['Chrome'],
+    customLaunchers: {
+      Chrome_travis_ci: {
+        base: 'Chrome',
+        flags: ['--no-sandbox']
+      }
+    },
     frameworks: ['mocha', 'sinon-chai'],
     reporters: ['spec', 'coverage'],
     files: ['./index.js'],
@@ -26,6 +32,17 @@ module.exports = function(config) {
         { type: 'lcov', subdir: '.' },
         { type: 'text-summary' }
       ]
+    },
+    client: {
+      mocha: {
+        timeout: 4000
+      }
     }
-  });
+  };
+
+  if (process.env.TRAVIS) {
+    configuration.browsers = ['Chrome_travis_ci'];
+  }
+
+  config.set(configuration);
 };
diff --git a/test/unit/specs/alert.spec.js b/test/unit/specs/alert.spec.js
index e9d1149a90..ee72483b8f 100644
--- a/test/unit/specs/alert.spec.js
+++ b/test/unit/specs/alert.spec.js
@@ -23,7 +23,6 @@ describe('Alert', () => {
       showIcon: true
     }, true);
     expect(vm.$el.classList.contains('el-alert--success')).to.true;
-    expect(vm.$el.querySelector('.el-icon-circle-check')).to.exist;
   });
 
   it('description', () => {
@@ -36,6 +35,16 @@ describe('Alert', () => {
       .to.equal('Unbowed, Unbent, Unbroken');
   });
 
+  it('title slot', () => {
+    vm = createVue(`
+      <el-alert>
+        <span slot="title">foo</span>
+      </el-alert>
+    `);
+
+    expect(vm.$el.querySelector('.el-alert__title').textContent).to.equal('foo');
+  });
+
   it('close', () => {
     vm = createVue({
       template: `
diff --git a/test/unit/specs/autocomplete.spec.js b/test/unit/specs/autocomplete.spec.js
index 19bd2cde55..f2c145139a 100644
--- a/test/unit/specs/autocomplete.spec.js
+++ b/test/unit/specs/autocomplete.spec.js
@@ -1,4 +1,4 @@
-import { createVue, triggerClick, destroyVM } from '../util';
+import { createVue, triggerClick, destroyVM, triggerKeyDown } from '../util';
 
 describe('Autocomplete', () => {
   let vm;
@@ -127,13 +127,149 @@ describe('Autocomplete', () => {
       }, 500);
     }, 500);
   });
+  it('input', done => {
+    vm = createVue({
+      template: `
+        <el-autocomplete
+          ref="autocomplete"
+          v-model="state"
+          :trigger-on-focus="false"
+          :fetch-suggestions="querySearch"
+        ></el-autocomplete>
+      `,
+      data() {
+        return {
+          restaurants: [],
+          state: ''
+        };
+      },
+      methods: {
+        querySearch(queryString, cb) {
+          var restaurants = this.restaurants;
+          var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
+          cb(results);
+        },
+        createFilter(queryString) {
+          return (restaurant) => {
+            return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);
+          };
+        },
+        loadAll() {
+          return [
+            { 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },
+            { 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },
+            { 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },
+            { 'value': '泷千家(天山西路店)', 'address': '天山西路438号' }
+          ];
+        }
+      },
+      mounted() {
+        this.restaurants = this.loadAll();
+      }
+    }, true);
+    const autocomplete = vm.$refs.autocomplete;
+    const input = autocomplete.$refs.input;
+    input.$emit('input', '三');
+    setTimeout(() => {
+      expect(vm.state).to.be.equal('三');
+      expect(autocomplete.suggestions[0].value).to.be.equal('三全鲜食（北新泾店）');
+      input.$emit('input', '');
+      setTimeout(() => {
+        expect(vm.state).to.be.equal('');
+        expect(autocomplete.suggestions.length).to.be.equal(0);
+        done();
+      }, 500);
+    }, 500);
+  });
+  describe('enter select', () => {
+    const createVm = (selectWhenUnmatched = false) => {
+      return createVue({
+        template: `
+          <el-autocomplete
+            ref="autocomplete"
+            v-model="state"
+            @select="handleSelect"
+            :trigger-on-focus="false"
+            :select-when-unmatched="selectWhenUnmatched"
+            :fetch-suggestions="querySearch"
+          ></el-autocomplete>
+        `,
+        data() {
+          return {
+            restaurants: [],
+            state: '',
+            selectWhenUnmatched: selectWhenUnmatched,
+            item: {}
+          };
+        },
+        methods: {
+          querySearch(queryString, cb) {
+            var restaurants = this.restaurants;
+            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
+            cb(results);
+          },
+          createFilter(queryString) {
+            return (restaurant) => {
+              return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);
+            };
+          },
+          loadAll() {
+            return [
+              { 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },
+              { 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },
+              { 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },
+              { 'value': '泷千家(天山西路店)', 'address': '天山西路438号' }
+            ];
+          },
+          handleSelect(item) {
+            this.item = item;
+          }
+        },
+        mounted() {
+          this.restaurants = this.loadAll();
+        }
+      }, true);
+    };
+    it('select', done => {
+      vm = createVm();
+      const autocomplete = vm.$refs.autocomplete;
+      const input = autocomplete.$refs.input;
+      input.$el.querySelector('input').focus();
+      input.$emit('input', '三');
+      setTimeout(() => {
+        triggerKeyDown(input.$el, 40); // down
+        setTimeout(() => {
+          triggerKeyDown(input.$el, 13); // enter
+          setTimeout(() => {
+            expect(vm.item.address).to.be.equal('长宁区新渔路144号');
+            done();
+          }, 200);
+        }, 200);
+      }, 500);
+    });
+    it('select unmatched', done => {
+      vm = createVm(true);
+      const autocomplete = vm.$refs.autocomplete;
+      const input = autocomplete.$refs.input;
+      input.$emit('input', '关键字');
+      setTimeout(() => {
+        expect(autocomplete.suggestions.length).to.be.equal(0);
+        triggerKeyDown(input.$el, 13); // enter
+        setTimeout(() => {
+          expect(autocomplete.highlightedIndex).to.be.equal(-1);
+          expect(vm.item.value).to.be.equal('关键字');
+          done();
+        }, 500);
+      }, 500);
+    });
+  });
   it('props', done => {
     vm = createVue({
       template: `
         <el-autocomplete
           v-model="state"
           ref="autocomplete"
-          :props="{ label: 'address', value: 'name' }"
+          value-key="address"
           :fetch-suggestions="querySearch"
           placeholder="请输入内容autocomplete2"
         ></el-autocomplete>
@@ -182,8 +318,8 @@ describe('Autocomplete', () => {
       expect(suggestionList[1].innerHTML === '上海市长宁区淞虹路661号');
       suggestionList[1].click();
       setTimeout(_ => {
-        expect(inputElm.value).to.be.equal('Hot honey 首尔炸鸡（仙霞路）');
-        expect(vm.state).to.be.equal('Hot honey 首尔炸鸡（仙霞路）');
+        expect(inputElm.value).to.be.equal('上海市长宁区淞虹路661号');
+        expect(vm.state).to.be.equal('上海市长宁区淞虹路661号');
         expect(spy.withArgs().calledOnce).to.be.true;
         expect(suggestions.style.display).to.be.equal('none');
         done();
@@ -324,12 +460,6 @@ describe('Autocomplete', () => {
         const suggestionsList = suggestions.querySelectorAll('.el-autocomplete-suggestion__list li');
         let highlightedItem = suggestionsList[11];
         expect(highlightedItem.className).to.be.equal('highlighted');
-
-        autocomplete.highlight(-5);
-        vm.$nextTick(_ => {
-          let highlightedItem = suggestionsList[0];
-          expect(highlightedItem.className).to.be.equal('highlighted');
-        });
         done();
       });
     }, 500);
@@ -384,4 +514,60 @@ describe('Autocomplete', () => {
       done();
     }, 500);
   });
+  it('event:focus & blur', done => {
+    vm = createVue({
+      template: `
+        <el-autocomplete
+          ref="input"
+          v-model="state"
+          :fetch-suggestions="querySearch"
+          :trigger-on-focus="false"
+          placeholder="请输入内容autocomplete1"
+        ></el-autocomplete>
+      `,
+      data() {
+        return {
+          restaurants: [],
+          state: ''
+        };
+      },
+      methods: {
+        querySearch(queryString, cb) {
+          var restaurants = this.restaurants;
+          var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
+          cb(results);
+        },
+        createFilter(queryString) {
+          return (restaurant) => {
+            return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);
+          };
+        },
+        loadAll() {
+          return [
+            { 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },
+            { 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },
+            { 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },
+            { 'value': '泷千家(天山西路店)', 'address': '天山西路438号' }
+          ];
+        }
+      },
+      mounted() {
+        this.restaurants = this.loadAll();
+      }
+    }, true);
+
+    const spyFocus = sinon.spy();
+    const spyBlur = sinon.spy();
+
+    vm.$refs.input.$on('focus', spyFocus);
+    vm.$refs.input.$on('blur', spyBlur);
+    vm.$el.querySelector('input').focus();
+    vm.$el.querySelector('input').blur();
+
+    vm.$nextTick(_ => {
+      expect(spyFocus.calledOnce).to.be.true;
+      expect(spyBlur.calledOnce).to.be.true;
+      done();
+    });
+  });
 });
diff --git a/test/unit/specs/button.spec.js b/test/unit/specs/button.spec.js
index d959cef46a..7c1e5c0be2 100644
--- a/test/unit/specs/button.spec.js
+++ b/test/unit/specs/button.spec.js
@@ -16,7 +16,7 @@ describe('Button', () => {
   });
   it('icon', () => {
     vm = createTest(Button, {
-      icon: 'search'
+      icon: 'el-icon-search'
     }, true);
     let buttonElm = vm.$el;
     expect(buttonElm.querySelector('.el-icon-search')).to.be.ok;
@@ -45,10 +45,10 @@ describe('Button', () => {
   });
   it('size', () => {
     vm = createTest(Button, {
-      size: 'large'
+      size: 'medium'
     }, true);
     let buttonElm = vm.$el;
-    expect(buttonElm.classList.contains('el-button--large')).to.be.true;
+    expect(buttonElm.classList.contains('el-button--medium')).to.be.true;
   });
   it('plain', () => {
     vm = createTest(Button, {
@@ -57,6 +57,20 @@ describe('Button', () => {
     let buttonElm = vm.$el;
     expect(buttonElm.classList.contains('is-plain')).to.be.true;
   });
+  it('round', () => {
+    vm = createTest(Button, {
+      round: true
+    }, true);
+    let buttonElm = vm.$el;
+    expect(buttonElm.classList.contains('is-round')).to.be.true;
+  });
+  it('circle', () => {
+    vm = createTest(Button, {
+      circle: true
+    }, true);
+    let buttonElm = vm.$el;
+    expect(buttonElm.classList.contains('is-circle')).to.be.true;
+  });
   it('click', done => {
     let result;
     vm = createVue({
@@ -76,4 +90,44 @@ describe('Button', () => {
       done();
     }, 20);
   });
+
+  it('click inside', done => {
+    let result;
+    vm = createVue({
+      template: `
+        <el-button @click="handleClick"><span class="inner-slot"></span></el-button>
+      `,
+      methods: {
+        handleClick(evt) {
+          result = evt;
+        }
+      }
+    }, true);
+    vm.$el.querySelector('.inner-slot').click();
+
+    setTimeout(_ => {
+      expect(result).to.exist;
+      done();
+    }, 20);
+  });
+
+  it('loading implies disabled', done => {
+    let result;
+    vm = createVue({
+      template: `
+        <el-button loading @click="handleClick"><span class="inner-slot"></span></el-button>
+      `,
+      methods: {
+        handleClick(evt) {
+          result = evt;
+        }
+      }
+    }, true);
+    vm.$el.querySelector('.inner-slot').click();
+
+    setTimeout(_ => {
+      expect(result).to.not.exist;
+      done();
+    }, 20);
+  });
 });
diff --git a/test/unit/specs/card.spec.js b/test/unit/specs/card.spec.js
index 3bd1ed32c3..f80cfb2c40 100644
--- a/test/unit/specs/card.spec.js
+++ b/test/unit/specs/card.spec.js
@@ -32,4 +32,25 @@ describe('Card', () => {
 
     expect(vm.$el.querySelector('.el-card__body').style.padding).to.equal('10px');
   });
+
+  it('shadow', () => {
+    vm = createTest(Card, {
+      shadow: 'always'
+    });
+    expect(vm.$el.classList.contains('is-always-shadow')).to.be.true;
+  });
+
+  it('shadow', () => {
+    vm = createTest(Card, {
+      shadow: 'hover'
+    });
+    expect(vm.$el.classList.contains('is-hover-shadow')).to.be.true;
+  });
+
+  it('shadow', () => {
+    vm = createTest(Card, {
+      shadow: 'never'
+    });
+    expect(vm.$el.classList.contains('is-never-shadow')).to.be.true;
+  });
 });
diff --git a/test/unit/specs/carousel.spec.js b/test/unit/specs/carousel.spec.js
index 69a195671f..139de23489 100644
--- a/test/unit/specs/carousel.spec.js
+++ b/test/unit/specs/carousel.spec.js
@@ -11,7 +11,7 @@ describe('Carousel', () => {
       template: `
         <div>
           <el-carousel>
-            <el-carousel-item v-for="item in 3"></el-carousel-item>
+            <el-carousel-item v-for="item in 3" :key="item"></el-carousel-item>
           </el-carousel>
         </div>
       `
@@ -24,7 +24,7 @@ describe('Carousel', () => {
       template: `
         <div>
           <el-carousel :interval="50">
-            <el-carousel-item v-for="item in 3"></el-carousel-item>
+            <el-carousel-item v-for="item in 3" :key="item"></el-carousel-item>
           </el-carousel>
         </div>
       `
@@ -45,7 +45,7 @@ describe('Carousel', () => {
       template: `
         <div>
           <el-carousel :autoplay="false" :initial-index="1">
-            <el-carousel-item v-for="item in 3"></el-carousel-item>
+            <el-carousel-item v-for="item in 3" :key="item"></el-carousel-item>
           </el-carousel>
         </div>
       `
@@ -62,7 +62,7 @@ describe('Carousel', () => {
       template: `
         <div>
           <el-carousel :interval="20">
-            <el-carousel-item v-for="item in 3"></el-carousel-item>
+            <el-carousel-item v-for="item in 3" :key="item"></el-carousel-item>
           </el-carousel>
         </div>
       `
@@ -88,7 +88,7 @@ describe('Carousel', () => {
       template: `
         <div>
           <el-carousel :interval="50" @change="handleChange">
-            <el-carousel-item v-for="item in 3"></el-carousel-item>
+            <el-carousel-item v-for="item in 3" :key="item"></el-carousel-item>
           </el-carousel>
         </div>
       `,
@@ -135,7 +135,7 @@ describe('Carousel', () => {
         template: `
         <div>
           <el-carousel :autoplay="false">
-            <el-carousel-item v-for="item in 3"></el-carousel-item>
+            <el-carousel-item v-for="item in 3" :key="item"></el-carousel-item>
           </el-carousel>
         </div>
       `
@@ -155,7 +155,7 @@ describe('Carousel', () => {
         template: `
         <div>
           <el-carousel :autoplay="false" trigger="click" ref="carousel">
-            <el-carousel-item v-for="item in 3"></el-carousel-item>
+            <el-carousel-item v-for="item in 3" :key="item"></el-carousel-item>
           </el-carousel>
         </div>
       `
@@ -184,7 +184,7 @@ describe('Carousel', () => {
         template: `
         <div>
           <el-carousel :autoplay="false">
-            <el-carousel-item v-for="item in 3"></el-carousel-item>
+            <el-carousel-item v-for="item in 3" :key="item"></el-carousel-item>
           </el-carousel>
         </div>
       `
@@ -204,7 +204,7 @@ describe('Carousel', () => {
         template: `
         <div>
           <el-carousel :autoplay="false">
-            <el-carousel-item v-for="item in 3"></el-carousel-item>
+            <el-carousel-item v-for="item in 3" :key="item"></el-carousel-item>
           </el-carousel>
         </div>
       `
@@ -230,7 +230,7 @@ describe('Carousel', () => {
       template: `
         <div>
           <el-carousel :autoplay="false" type="card">
-            <el-carousel-item v-for="item in 7"></el-carousel-item>
+            <el-carousel-item v-for="item in 7" :key="item"></el-carousel-item>
           </el-carousel>
         </div>
       `
diff --git a/test/unit/specs/cascader.spec.js b/test/unit/specs/cascader.spec.js
index 9a5564754f..e8c7dac41c 100644
--- a/test/unit/specs/cascader.spec.js
+++ b/test/unit/specs/cascader.spec.js
@@ -1,4 +1,4 @@
-import { createVue, destroyVM, triggerEvent } from '../util';
+import { createVue, destroyVM, triggerEvent, triggerClick } from '../util';
 
 describe('Cascader', () => {
   let vm;
@@ -64,17 +64,17 @@ describe('Cascader', () => {
 
       item1.click();
       menu.$nextTick(_ => {
-        expect(menuElm.children.length).to.be.equal(2);
+        expect(menuElm.children.length).to.be.equal(3); // two menus and an arrow
         expect(item1.classList.contains('is-active')).to.be.true;
 
-        const item2 = menuElm.children[1].querySelector('.el-cascader-menu__item');
+        const item2 = menuElm.children[2].querySelector('.el-cascader-menu__item');
         item2.click();
 
         menu.$nextTick(_ => {
-          expect(menuElm.children.length).to.be.equal(3);
+          expect(menuElm.children.length).to.be.equal(4);
           expect(item2.classList.contains('is-active')).to.be.true;
 
-          const item3 = menuElm.children[2].querySelector('.el-cascader-menu__item');
+          const item3 = menuElm.children[3].querySelector('.el-cascader-menu__item');
           item3.click();
 
           setTimeout(_ => {
@@ -155,17 +155,17 @@ describe('Cascader', () => {
 
       item1.click();
       menu.$nextTick(_ => {
-        expect(menuElm.children.length).to.be.equal(2);
+        expect(menuElm.children.length).to.be.equal(3);
         expect(item1.classList.contains('is-active')).to.be.true;
 
-        const item2 = menuElm.children[1].querySelector('.el-cascader-menu__item');
+        const item2 = menuElm.children[2].querySelector('.el-cascader-menu__item');
         item2.click();
 
         menu.$nextTick(_ => {
-          expect(menuElm.children.length).to.be.equal(3);
+          expect(menuElm.children.length).to.be.equal(4);
           expect(item2.classList.contains('is-active')).to.be.true;
 
-          const item3 = menuElm.children[2].querySelector('.el-cascader-menu__item');
+          const item3 = menuElm.children[3].querySelector('.el-cascader-menu__item');
           item3.click();
 
           setTimeout(_ => {
@@ -299,7 +299,7 @@ describe('Cascader', () => {
 
       item1.click();
       menu.$nextTick(_ => {
-        expect(menuElm.children.length).to.be.equal(1);
+        expect(menuElm.children.length).to.be.equal(2);
         expect(item1.classList.contains('is-active')).to.be.false;
         done();
       });
@@ -355,19 +355,17 @@ describe('Cascader', () => {
     vm.$el.click();
     setTimeout(_ => {
       expect(document.body.querySelector('.el-cascader-menus')).to.be.exist;
-
       const menu = vm.$refs.cascader.menu;
       const menuElm = menu.$el;
-      const item1 = menuElm.children[0].querySelector('.el-cascader-menu__item');
-      const item2 = menuElm.children[1].querySelector('.el-cascader-menu__item');
-      const item3 = menuElm.children[2].querySelector('.el-cascader-menu__item');
+      const item1 = menuElm.children[1].querySelector('.el-cascader-menu__item');
+      const item2 = menuElm.children[2].querySelector('.el-cascader-menu__item');
+      const item3 = menuElm.children[3].querySelector('.el-cascader-menu__item');
 
-      expect(menuElm.children.length).to.be.equal(3);
+      expect(menuElm.children.length).to.be.equal(4);
       expect(item1.classList.contains('is-active')).to.be.true;
       expect(item2.classList.contains('is-active')).to.be.true;
       expect(item3.classList.contains('is-active')).to.be.true;
-
-      document.body.click();
+      triggerClick(document, 'mouseup');
       setTimeout(_ => {
         expect(document.body.querySelector('.el-cascader-menus').style.display).to.be.equal('none');
         done();
@@ -432,17 +430,17 @@ describe('Cascader', () => {
 
       triggerEvent(item1, 'mouseenter');
       menu.$nextTick(_ => {
-        expect(menuElm.children.length).to.be.equal(2);
+        expect(menuElm.children.length).to.be.equal(3);
         expect(item1.classList.contains('is-active')).to.be.true;
 
-        const item2 = menuElm.children[1].querySelector('.el-cascader-menu__item');
+        const item2 = menuElm.children[2].querySelector('.el-cascader-menu__item');
         triggerEvent(item2, 'mouseenter');
 
         menu.$nextTick(_ => {
-          expect(menuElm.children.length).to.be.equal(3);
+          expect(menuElm.children.length).to.be.equal(4);
           expect(item2.classList.contains('is-active')).to.be.true;
 
-          const item3 = menuElm.children[2].querySelector('.el-cascader-menu__item');
+          const item3 = menuElm.children[3].querySelector('.el-cascader-menu__item');
           item3.click();
 
           setTimeout(_ => {
@@ -514,19 +512,19 @@ describe('Cascader', () => {
 
       item1.click();
       menu.$nextTick(_ => {
-        expect(menuElm.children.length).to.be.equal(2);
+        expect(menuElm.children.length).to.be.equal(3);
         expect(item1.classList.contains('is-active')).to.be.true;
         expect(vm.selectedOptions[0]).to.be.equal('zhejiang');
 
-        const item2 = menuElm.children[1].querySelector('.el-cascader-menu__item');
+        const item2 = menuElm.children[2].querySelector('.el-cascader-menu__item');
         item2.click();
 
         menu.$nextTick(_ => {
-          expect(menuElm.children.length).to.be.equal(3);
+          expect(menuElm.children.length).to.be.equal(4);
           expect(item2.classList.contains('is-active')).to.be.true;
           expect(vm.selectedOptions[1]).to.be.equal('hangzhou');
 
-          const item3 = menuElm.children[2].querySelector('.el-cascader-menu__item');
+          const item3 = menuElm.children[3].querySelector('.el-cascader-menu__item');
           item3.click();
 
           setTimeout(_ => {
@@ -540,6 +538,76 @@ describe('Cascader', () => {
       });
     }, 300);
   });
+  it('hover and select', done => {
+    vm = createVue({
+      template: `
+        <el-cascader
+          ref="cascader"
+          placeholder="请选择"
+          :options="options"
+          expand-trigger="hover"
+          change-on-select
+          v-model="selectedOptions"
+        ></el-cascader>
+      `,
+      data() {
+        return {
+          options: [{
+            value: 'zhejiang',
+            label: 'Zhejiang',
+            children: [{
+              value: 'hangzhou',
+              label: 'Hangzhou',
+              children: [{
+                value: 'xihu',
+                label: 'West Lake'
+              }]
+            }, {
+              value: 'ningbo',
+              label: 'NingBo',
+              children: [{
+                value: 'jiangbei',
+                label: 'Jiang Bei'
+              }]
+            }]
+          }, {
+            value: 'jiangsu',
+            label: 'Jiangsu',
+            children: [{
+              value: 'nanjing',
+              label: 'Nanjing',
+              children: [{
+                value: 'zhonghuamen',
+                label: 'Zhong Hua Men'
+              }]
+            }]
+          }],
+          selectedOptions: []
+        };
+      }
+    }, true);
+    vm.$el.click();
+    vm.$nextTick(() => {
+      const menu = vm.$refs.cascader.menu;
+      const menuElm = menu.$el;
+      const item1 = menuElm.querySelector('.el-cascader-menu__item');
+
+      triggerEvent(item1, 'mouseenter');
+      menu.$nextTick(() => {
+        expect(vm.selectedOptions[0]).to.be.equal('zhejiang');
+
+        const spy = sinon.spy();
+        menu.$on('closeInside', spy);
+        item1.click();
+
+        menu.$nextTick(() => {
+          expect(spy.calledWith(true)).to.be.true;
+          expect(menu.visible).to.be.false;
+          done();
+        });
+      });
+    });
+  });
   it('filterable', done => {
     vm = createVue({
       template: `
@@ -599,9 +667,8 @@ describe('Cascader', () => {
         const menuElm = menu.$el;
         const item1 = menuElm.querySelector('.el-cascader-menu__item');
 
-        expect(menuElm.children.length).to.be.equal(1);
-        expect(menuElm.children[0].children.length).to.be.equal(3);
-        done();
+        expect(menuElm.children.length).to.be.equal(2);
+        expect(menuElm.children[1].children.length).to.be.equal(3);
 
         item1.click();
 
@@ -717,4 +784,68 @@ describe('Cascader', () => {
       done();
     }, 100);
   });
+  describe('Cascader Events', () => {
+    it('event:focus & blur', done => {
+      vm = createVue({
+        template: `
+          <el-cascader
+            ref="cascader"
+            placeholder="请选择"
+            :options="options"
+            clearable
+            v-model="selectedOptions"
+          ></el-cascader>
+        `,
+        data() {
+          return {
+            options: [{
+              value: 'zhejiang',
+              label: 'Zhejiang',
+              children: [{
+                value: 'hangzhou',
+                label: 'Hangzhou',
+                children: [{
+                  value: 'xihu',
+                  label: 'West Lake'
+                }]
+              }, {
+                value: 'ningbo',
+                label: 'NingBo',
+                children: [{
+                  value: 'jiangbei',
+                  label: 'Jiang Bei'
+                }]
+              }]
+            }, {
+              value: 'jiangsu',
+              label: 'Jiangsu',
+              children: [{
+                value: 'nanjing',
+                label: 'Nanjing',
+                children: [{
+                  value: 'zhonghuamen',
+                  label: 'Zhong Hua Men'
+                }]
+              }]
+            }],
+            selectedOptions: []
+          };
+        }
+      }, true);
+
+      const spyFocus = sinon.spy();
+      const spyBlur = sinon.spy();
+
+      vm.$refs.cascader.$on('focus', spyFocus);
+      vm.$refs.cascader.$on('blur', spyBlur);
+      vm.$el.querySelector('input').focus();
+      vm.$el.querySelector('input').blur();
+
+      vm.$nextTick(_ => {
+        expect(spyFocus.calledOnce).to.be.true;
+        expect(spyBlur.calledOnce).to.be.true;
+        done();
+      });
+    });
+  });
 });
diff --git a/test/unit/specs/checkbox.spec.js b/test/unit/specs/checkbox.spec.js
index 1337535bf9..4e1bc99480 100644
--- a/test/unit/specs/checkbox.spec.js
+++ b/test/unit/specs/checkbox.spec.js
@@ -44,6 +44,35 @@ describe('Checkbox', () => {
     let checkboxElm = vm.$el;
     expect(checkboxElm.querySelector('.is-disabled')).to.be.ok;
   });
+  it('change event', done => {
+    vm = createVue({
+      template: `
+        <el-checkbox v-model="checked" @change="onChange">
+        </el-checkbox>
+      `,
+      methods: {
+        onChange(val) {
+          this.data = val;
+        }
+      },
+      data() {
+        return {
+          data: '',
+          checked: false
+        };
+      }
+    }, true);
+    let checkboxElm = vm.$el;
+    checkboxElm.click();
+    setTimeout(_ => {
+      expect(vm.data).to.true;
+      vm.checked = false;
+      setTimeout(_ => {
+        expect(vm.data).to.true;
+        done();
+      }, 10);
+    }, 10);
+  });
   it('checkbox group', done => {
     vm = createVue({
       template: `
@@ -68,6 +97,34 @@ describe('Checkbox', () => {
     });
   });
 
+  it('checkbox group change event', done => {
+    vm = createVue({
+      template: `
+        <el-checkbox-group v-model="checkList" @change="onChange">
+          <el-checkbox label="a" ref="a"></el-checkbox>
+          <el-checkbox label="b" ref="b"></el-checkbox>
+        </el-checkbox-group>
+      `,
+      methods: {
+        onChange(val) {
+          this.data = val;
+        }
+      },
+      data() {
+        return {
+          data: '',
+          checkList: []
+        };
+      }
+    }, true);
+    vm.$refs.a.$el.click();
+    setTimeout(_ => {
+      expect(vm.data).to.deep.equal(['a']);
+      vm.checkList = ['b'];
+      done();
+    }, 10);
+  });
+
   it('checkbox group minimum and maximum', done => {
     vm = createVue({
       template: `
@@ -216,6 +273,36 @@ describe('Checkbox', () => {
       expect(checkboxElm.classList.contains('is-disabled')).to.be.ok;
     });
 
+    it('change event', done => {
+      vm = createVue({
+        template: `
+        <el-checkbox-button v-model="checked" @change="onChange">
+        </el-checkbox-button>
+      `,
+        methods: {
+          onChange(val) {
+            this.data = val;
+          }
+        },
+        data() {
+          return {
+            data: '',
+            checked: false
+          };
+        }
+      }, true);
+      let checkboxElm = vm.$el;
+      checkboxElm.click();
+      setTimeout(_ => {
+        expect(vm.data).to.true;
+        vm.checked = false;
+        setTimeout(_ => {
+          expect(vm.data).to.true;
+          done();
+        }, 10);
+      }, 10);
+    });
+
     it('checkbox group', done => {
       vm = createVue({
         template: `
@@ -245,6 +332,39 @@ describe('Checkbox', () => {
       });
     });
 
+    it('checkbox-button group change event', done => {
+      vm = createVue({
+        template: `
+        <el-checkbox-group v-model="checkList" @change="onChange">
+          <el-checkbox-button label="a" ref="a"></el-checkbox-button>
+          <el-checkbox-button label="b" ref="b"></el-checkbox-button>
+          <el-checkbox-button label="c" ref="c"></el-checkbox-button>
+          <el-checkbox-button label="d" ref="d"></el-checkbox-button>
+        </el-checkbox-group>
+      `,
+        methods: {
+          onChange(val) {
+            this.data = val;
+          }
+        },
+        data() {
+          return {
+            data: '',
+            checkList: []
+          };
+        }
+      }, true);
+      vm.$refs.a.$el.click();
+      setTimeout(_ => {
+        expect(vm.data).to.deep.equal(['a']);
+        vm.checkList = ['b'];
+        setTimeout(_ => {
+          expect(vm.data).to.deep.equal(['a']);
+          done();
+        }, 10);
+      }, 10);
+    });
+
     it('checkbox group props', () => {
       vm = createVue({
         template: `
diff --git a/test/unit/specs/color-picker.spec.js b/test/unit/specs/color-picker.spec.js
index c2191f286a..34c4d5387d 100644
--- a/test/unit/specs/color-picker.spec.js
+++ b/test/unit/specs/color-picker.spec.js
@@ -97,8 +97,8 @@ describe('ColorPicker', () => {
     trigger.click();
 
     setTimeout(() => {
-      const value = document.querySelector('.el-color-dropdown__value');
-      expect(value.innerText.trim().toUpperCase()).to.equal('#20A0FF');
+      const input = document.querySelector('.el-color-dropdown__value input');
+      expect(input.value.trim().toUpperCase()).to.equal('#20A0FF');
       done();
     }, ANIMATION_TIME);
   });
@@ -232,7 +232,7 @@ describe('ColorPicker', () => {
       alphaBar.__vue__.handleClick({ target: null, clientX: 50, clientY: 0 });
       vm.$nextTick(() => {
         const picker = vm.$children[0];
-        expect(picker.color._alpha < 1).to.true;
+        expect(picker.color._alpha < 100).to.true;
         done();
       });
     }, ANIMATION_TIME);
@@ -265,4 +265,98 @@ describe('ColorPicker', () => {
       });
     }, ANIMATION_TIME);
   });
+
+  it('should change color to the selected color', done => {
+    const vm = createVue({
+      template: `
+        <el-color-picker v-model="color" show-alpha :predefine="colors"></el-color-picker>
+      `,
+      data() {
+        return {
+          color: 'hsva(180, 65, 20, 0.5)',
+          colors: [
+            'rgba(19, 206, 102, 0.18)',
+            'rgb(25, 159, 147)',
+            'hsv(250, 54, 98)',
+            'hsva(180, 65, 20, 0.5)',
+            'hsl(170, 32%, 87%)',
+            'hsla(45, 62%, 47%, 0.13)',
+            '#7486de',
+            '#45aa9477',
+            '#892345'
+          ]
+        };
+      }
+    }, true);
+
+    const trigger = vm.$el.querySelector('.el-color-picker__trigger');
+    trigger.click();
+
+    setTimeout(() => {
+      expect(document.querySelectorAll('.el-color-predefine__color-selector').length === 9).to.be.true;
+      const selector = document.querySelector('.el-color-predefine__color-selector:nth-child(4)');
+      selector.click();
+      vm.$nextTick(() => {
+        const picker = vm.$children[0];
+        expect(picker.color._hue === 180).to.be.true;
+        expect(picker.color._saturation === 65).to.be.true;
+        expect(picker.color._value === 20).to.be.true;
+        expect(picker.color._alpha === 50).to.be.true;
+
+        const selector2 = document.querySelector('.el-color-predefine__color-selector:nth-child(3)');
+        selector2.click();
+
+        vm.$nextTick(() => {
+          expect(picker.color._hue === 250).to.be.true;
+          expect(picker.color._saturation === 54).to.be.true;
+          expect(picker.color._value === 98).to.be.true;
+          expect(picker.color._alpha === 100).to.be.true;
+          done();
+        });
+      });
+    });
+  });
+
+  it('should change selected state of predefined color', done => {
+    const vm = createVue({
+      template: `
+        <el-color-picker v-model="color" show-alpha :predefine="colors"></el-color-picker>
+      `,
+      data() {
+        return {
+          color: 'hsva(180, 65, 20, 0.5)',
+          colors: [
+            'rgba(19, 206, 102, 0.18)',
+            'rgb(25, 159, 147)',
+            'hsv(250, 54, 98)',
+            'hsva(180, 65, 20, 0.5)',
+            'hsl(170, 32%, 87%)',
+            'hsla(45, 62%, 47%, 0.13)',
+            '#7486de',
+            '#45aa9477',
+            '#892345'
+          ]
+        };
+      }
+    }, true);
+
+    const trigger = vm.$el.querySelector('.el-color-picker__trigger');
+    trigger.click();
+
+    setTimeout(() => {
+      const selector = document.querySelector('.el-color-predefine__color-selector:nth-child(4)');
+      selector.click();
+      vm.$nextTick(() => {
+        expect(selector.classList.contains('selected')).to.be.true;
+
+        const hueBar = document.querySelector('.el-color-hue-slider');
+        hueBar.__vue__.handleClick({ target: null, clientX: 0, clientY: 1000 });
+
+        vm.$nextTick(() => {
+          expect(selector.classList.contains('selected')).to.be.false;
+          done();
+        });
+      });
+    });
+  });
 });
diff --git a/test/unit/specs/container.spec.js b/test/unit/specs/container.spec.js
new file mode 100644
index 0000000000..bd41b6f32d
--- /dev/null
+++ b/test/unit/specs/container.spec.js
@@ -0,0 +1,128 @@
+import { createTest, createVue, destroyVM } from '../util';
+import Container from 'packages/container';
+import Header from 'packages/header';
+import Main from 'packages/main';
+import Aside from 'packages/aside';
+import Footer from 'packages/footer';
+
+describe('Container', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', () => {
+    vm = createTest(Container, true);
+    expect(vm.$el).to.exist;
+  });
+
+  it('vertical', () => {
+    vm = createVue({
+      template: `
+        <el-container>
+          <el-header></el-header>
+          <el-main></el-main>
+        </el-container>
+      `
+    }, true);
+    expect(vm.$children[0].$el.classList.contains('is-vertical')).to.true;
+  });
+
+  it('direction', done => {
+    vm = createVue({
+      template: `
+        <el-container :direction="direction">
+          <el-header></el-header>
+          <el-main></el-main>
+        </el-container>
+      `,
+      data() {
+        return {
+          direction: 'horizontal'
+        };
+      }
+    }, true);
+    expect(vm.$children[0].$el.classList.contains('is-vertical')).not.to.true;
+    vm.direction = 'vertical';
+    vm.$nextTick(() => {
+      expect(vm.$children[0].$el.classList.contains('is-vertical')).to.true;
+      done();
+    });
+  });
+});
+
+describe('Header', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', () => {
+    vm = createTest(Header, true);
+    expect(vm.$el).to.exist;
+  });
+
+  it('height', () => {
+    vm = createVue({
+      template: `
+        <el-header height="100px"></el-header>
+      `
+    }, true);
+    expect(vm.$children[0].$el.style.height).to.equal('100px');
+  });
+});
+
+describe('Aside', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', () => {
+    vm = createTest(Aside, true);
+    expect(vm.$el).to.exist;
+  });
+
+  it('width', () => {
+    vm = createVue({
+      template: `
+        <el-aside width="200px"></el-aside>
+      `
+    }, true);
+    expect(vm.$children[0].$el.style.width).to.equal('200px');
+  });
+});
+
+describe('Main', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', () => {
+    vm = createTest(Main, true);
+    expect(vm.$el).to.exist;
+  });
+});
+
+describe('Footer', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('create', () => {
+    vm = createTest(Footer, true);
+    expect(vm.$el).to.exist;
+  });
+
+  it('height', () => {
+    vm = createVue({
+      template: `
+        <el-footer height="100px"></el-footer>
+      `
+    }, true);
+    expect(vm.$children[0].$el.style.height).to.equal('100px');
+  });
+});
+
diff --git a/test/unit/specs/date-picker.spec.js b/test/unit/specs/date-picker.spec.js
index 2c163e20c5..7e713779b4 100644
--- a/test/unit/specs/date-picker.spec.js
+++ b/test/unit/specs/date-picker.spec.js
@@ -6,7 +6,18 @@ import {
 } from '../util';
 import DatePicker from 'packages/date-picker';
 
-const DELAY = 10;
+const DELAY = 50;
+
+const LEFT = 37;
+const ENTER = 13;
+const TAB = 9;
+
+const keyDown = (el, keyCode) => {
+  const evt = document.createEvent('Events');
+  evt.initEvent('keydown', true, true);
+  evt.keyCode = keyCode;
+  el.dispatchEvent(evt);
+};
 
 describe('DatePicker', () => {
   let vm;
@@ -90,13 +101,14 @@ describe('DatePicker', () => {
     setTimeout(_ => {
       const $el = vm.$refs.compo.picker.$el;
       $el.querySelector('td.available').click();
-      vm.$nextTick(_ => {
-        vm.$el.querySelector('.el-input__icon').click();
+      setTimeout(_ => {
+        vm.$refs.compo.showClose = true;
+        vm.$refs.compo.handleClickIcon({ stopPropagation: () => null });
         setTimeout(_ => {
-          expect(vm.value).to.empty;
+          expect(vm.value).to.equal(null);
           done();
         }, DELAY);
-      });
+      }, DELAY);
     }, DELAY);
   });
 
@@ -158,20 +170,37 @@ describe('DatePicker', () => {
     }, DELAY);
   });
 
+  it('focus', done => {
+    vm = createVue({
+      template: `
+        <el-date-picker ref="picker"></el-date-picker>
+      `
+    }, true);
+
+    const spy = sinon.spy();
+
+    vm.$refs.picker.$on('focus', spy);
+    vm.$refs.picker.focus();
+
+    vm.$nextTick(_ => {
+      expect(spy.calledOnce).to.be.true;
+      done();
+    });
+  });
+
   it('change event', done => {
-    let inputValue;
+    let onChangeValue;
 
     vm = createVue({
       template: `
         <el-date-picker
           ref="compo"
           v-model="value"
-          format="yyyy-MM"
           @change="handleChange" />`,
 
       methods: {
         handleChange(val) {
-          inputValue = val;
+          onChangeValue = val;
         }
       },
 
@@ -190,15 +219,100 @@ describe('DatePicker', () => {
     setTimeout(_ => {
       const picker = vm.$refs.compo.picker;
 
-      picker.$el.querySelector('td.available').click();
-      vm.$nextTick(_ => {
-        const date = picker.date;
-        let month = date.getMonth() + 1;
-        if (month < 10) month = '0' + month;
+      // programatic modification of bound value does not emit cange
+      vm.value = new Date(2000, 9, 2);
+      setTimeout(_ => {
+        expect(onChangeValue).to.not.exist;
+        // user interaction does emit change
+        picker.$el.querySelector('td.available').click();
+        setTimeout(_ => {
+          expect(onChangeValue.getTime()).to.equal(vm.value.getTime());
+          done();
+        }, DELAY);
+      }, DELAY);
+    }, DELAY);
+  });
+
+  it('change event: when clear(), without opening picker', done => {
+    vm = createVue({
+      template: `
+        <el-date-picker
+          ref="compo"
+          v-model="value"
+        />`,
+      data() {
+        return {
+          value: new Date()
+        };
+      }
+    }, true);
 
-        expect(inputValue).to.equal(`${date.getFullYear()}-${ month }`);
+    const spy = sinon.spy();
+    vm.$refs.compo.$on('change', spy);
+
+    setTimeout(_ => {
+      vm.$refs.compo.showClose = true;
+      vm.$refs.compo.handleClickIcon({ stopPropagation: () => null });
+      setTimeout(_ => {
+        expect(spy.calledOnce).to.equal(true);
+        expect(spy.calledWith(null)).to.equal(true);
         done();
-      });
+      }, DELAY);
+    }, DELAY);
+  });
+
+  it('nuke invalid input on close', done => {
+    vm = createVue({
+      template: '<el-date-picker v-model="value" value-format="yyyy-MM-dd" ref="compo" />',
+      data() {
+        return {
+          value: '2010-10-01'
+        };
+      }
+    }, true);
+
+    const compo = vm.$refs.compo;
+    const input = compo.$el.querySelector('input');
+    input.blur();
+    input.focus();
+
+    setTimeout(_ => {
+      compo.userInput = 'abc';
+      compo.handleChange(); // simplified test
+      compo.handleClose();
+      setTimeout(_ => {
+        expect(input.value).to.equal('2010-10-01');
+        expect(vm.value).to.equal('2010-10-01');
+        done();
+      }, DELAY);
+    }, DELAY);
+  });
+
+  it('select datetime with defaultTime', done => {
+    vm = createVue({
+      template: `
+        <el-date-picker ref="compo" type="datetime" v-model="value" default-time="12:00:00"></el-date-picker>
+      `,
+      data() {
+        return {
+          value: ''
+        };
+      }
+    }, true);
+
+    const input = vm.$el.querySelector('input');
+    input.blur();
+    input.focus();
+    setTimeout(_ => {
+      const picker = vm.$refs.compo.picker;
+      picker.$el.querySelector('td.available').click();
+      setTimeout(_ => {
+        const date = vm.$refs.compo.picker.date;
+        expect(date.getHours()).to.equal(12);
+        expect(date.getMinutes()).to.equal(0);
+        expect(date.getSeconds()).to.equal(0);
+        done();
+      }, DELAY);
     }, DELAY);
   });
 
@@ -284,8 +398,7 @@ describe('DatePicker', () => {
 
       const input = vm.$el.querySelector('input');
 
-      input.blur();
-      input.focus();
+      input.click();
 
       setTimeout(_ => {
         const picker = vm.$refs.compo.picker;
@@ -316,119 +429,549 @@ describe('DatePicker', () => {
       }, DELAY);
     });
 
-  });
-
-  it('default value', done => {
-    const toDateStr = date => {
-      let d = new Date(date);
-      return `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
-    };
-    let today = new Date();
-    let nextMonth = new Date(today);
-    nextMonth.setDate(1);
-    if (nextMonth.getMonth() === 12) {
-      nextMonth.setFullYear(today.getFullYear + 1);
-      nextMonth.setMonth(1);
-    } else {
-      nextMonth.setMonth(today.getMonth() + 1);
-    }
-    let nextMonthStr = toDateStr(nextMonth);
+    it('work for event focus and blur', done => {
+      vm = createVue({
+        template: `
+          <el-date-picker ref="picker"/>
+        `
+      }, true);
 
-    vm = createVue({
-      template: `<el-date-picker v-model="value" ref="compo" default-value="${nextMonthStr}" />`,
-      data() {
-        return {
-          value: ''
-        };
-      }
-    }, true);
+      const spyFocus = sinon.spy();
+      const spyBlur = sinon.spy();
 
-    const input = vm.$el.querySelector('input');
+      vm.$refs.picker.$on('focus', spyFocus);
+      vm.$refs.picker.$on('blur', spyBlur);
+      vm.$el.querySelector('input').focus();
 
-    input.focus();
-    setTimeout(_ => {
-      const $el = vm.$refs.compo.picker.$el;
-      $el.querySelector('td.current').click();
-      setTimeout(_ => {
-        expect(vm.value).to.equal(nextMonthStr);
+      vm.$nextTick(_ => {
+        expect(spyFocus.calledOnce).to.be.true;
+        vm.$refs.picker.pickerVisible = false;
+        vm.$nextTick(_ => {
+          expect(spyBlur.calledOnce).to.be.true;
+          done();
+        });
       });
-      done();
     });
   });
 
-  describe('keydown', () => {
-    let input;
-    let keyDown = function(el, keyCode) {
-      const evt = document.createEvent('Events');
+  describe('value-format', () => {
+    it('emits', done => {
+      vm = createVue({
+        template: `
+          <el-date-picker
+            ref="compo"
+            v-model="value"
+            type="date"
+            value-format="dd/MM yyyy" />`,
+        data() {
+          return {
+            value: ''
+          };
+        }
+      }, true);
 
-      evt.initEvent('keydown', true, true);
-      evt.keyCode = keyCode;
-      el.dispatchEvent(evt);
-    };
+      const spy = sinon.spy();
+      vm.$refs.compo.$on('change', spy);
 
-    beforeEach(done => {
-      vm = createTest(DatePicker, true);
-      input = vm.$el.querySelector('input');
-      input.blur();
-      input.focus();
-      setTimeout(done, DELAY);
+      vm.$refs.compo.$el.querySelector('input').focus();
+      setTimeout(_ => {
+        vm.$refs.compo.picker.$el.querySelector('.el-date-table td.available').click();
+        setTimeout(_ => {
+          const today = new Date();
+          const yyyy = today.getFullYear();
+          const MM = ('0' + (today.getMonth() + 1)).slice(-2);
+          const dd = '01'; // first available one should be first day of month
+          const expectValue = `${dd}/${MM} ${yyyy}`;
+          expect(vm.value).to.equal(expectValue);
+          expect(spy.calledOnce).to.be.true;
+          expect(spy.calledWith(expectValue)).to.be.true;
+          done();
+        }, DELAY);
+      }, DELAY);
     });
 
-    afterEach(() => destroyVM(vm));
+    it('accepts', done => {
+      vm = createVue({
+        template: `
+          <el-date-picker
+            ref="compo"
+            v-model="value"
+            type="date"
+            format="yyyy-MM-dd"
+            value-format="dd/MM yyyy" />`,
+        data() {
+          return {
+            value: '01/02 2000'
+          };
+        }
+      }, true);
+      const input = vm.$refs.compo.$el.querySelector('input');
+      expect(input.value).to.equal('2000-02-01');
+      expect(vm.$refs.compo.parsedValue).to.be.an.instanceof(Date);
+      input.focus();
+      setTimeout(_ => {
+        const date = vm.$refs.compo.picker.date;
+        expect(date.getFullYear()).to.equal(2000);
+        expect(date.getMonth()).to.equal(1);
+        expect(date.getDate()).to.equal(1);
+        vm.$refs.compo.picker.$el.querySelector('.el-date-table .current').click();
+        setTimeout(_ => {
+          expect(input.value).to.equal('2000-02-01');
+          done();
+        }, DELAY);
+      }, DELAY);
+    });
 
-    it('tab', () => {
-      keyDown(input, 9);
-      expect(vm.pickerVisible).to.false;
+    it('translates format to value-format', done => {
+      vm = createVue({
+        template: `
+          <el-date-picker
+            ref="compo"
+            v-model="value"
+            type="date"
+            format="yyyy-MM-dd"
+            value-format="dd/MM yyyy" />`,
+        data() {
+          return {
+            value: ''
+          };
+        }
+      }, true);
+      const input = vm.$refs.compo.$el.querySelector('input');
+      input.focus();
+      setTimeout(_ => {
+        input.value = '2000-10-01';
+        triggerEvent(input, 'input');
+        keyDown(input, ENTER);
+        setTimeout(_ => {
+          expect(vm.value).to.equal('01/10 2000');
+          done();
+        }, DELAY);
+      }, DELAY);
     });
 
-    it('enter', done => {
-      input.value = '2000-10-1';
-      triggerEvent(input, 'change', true);
+    it('works for daterange', done => {
+      vm = createVue({
+        template: `
+          <el-date-picker
+            ref="compo"
+            v-model="value"
+            type="daterange"
+            format="yyyy-MM-dd"
+            value-format="dd/MM yyyy" />`,
+        data() {
+          return {
+            value: ''
+          };
+        }
+      }, true);
+      const inputs = vm.$refs.compo.$el.querySelectorAll('input');
+      inputs[0].focus();
       setTimeout(_ => {
-        expect(vm.pickerVisible).to.false;
-        expect(vm.picker.date.getFullYear()).to.equal(2000);
-        expect(vm.picker.date.getMonth()).to.equal(9);
-        expect(vm.picker.date.getDate()).to.equal(1);
-        done();
+        inputs[0].value = '2000-10-01';
+        triggerEvent(inputs[0], 'input');
+        keyDown(inputs[0], TAB);
+        setTimeout(_ => {
+          inputs[1].focus();
+          inputs[1].value = '2000-10-02';
+          triggerEvent(inputs[1], 'input');
+          keyDown(inputs[0], ENTER);
+          setTimeout(_ => {
+            expect(vm.value).to.eql(['01/10 2000', '02/10 2000']);
+            done();
+          }, DELAY);
+        }, DELAY);
       }, DELAY);
     });
 
-    it('left', () => {
-      input.value = '2000-10-1';
-      keyDown(input, 13);
+    it('is timestamp', done => {
+      vm = createVue({
+        template: `
+          <el-date-picker
+            ref="compo"
+            v-model="value"
+            type="date"
+            format="yyyy-MM-dd"
+            value-format="timestamp" />`,
+        data() {
+          return {
+            value: Date.now()
+          };
+        }
+      }, true);
+      const input = vm.$refs.compo.$el.querySelector('input');
       input.focus();
-      keyDown(input, 37);
-      expect(input.selectionStart > 0).to.true;
+      setTimeout(_ => {
+        // check timestamp is parsed internally
+        expect(vm.$refs.compo.parsedValue.getTime()).to.equal(vm.value);
+        input.value = '2000-10-01';
+        triggerEvent(input, 'input');
+        keyDown(input, ENTER);
+        setTimeout(_ => {
+          expect(vm.value).to.equal(new Date(2000, 9, 1).getTime());
+          done();
+        }, DELAY);
+      }, DELAY);
     });
 
-    it('right', () => {
-      input.value = '2000-10-1';
-      keyDown(input, 13);
-      input.focus();
-      keyDown(input, 39);
-      expect(input.selectionStart > 0).to.true;
+    it('works for daterange, is timestamp', done => {
+      vm = createVue({
+        template: `
+          <el-date-picker
+            ref="compo"
+            v-model="value"
+            type="daterange"
+            format="yyyy-MM-dd"
+            value-format="timestamp" />`,
+        data() {
+          return {
+            value: [Date.now(), Date.now() + 86400 * 1000]
+          };
+        }
+      }, true);
+      const inputs = vm.$refs.compo.$el.querySelectorAll('input');
+      inputs[0].focus();
+      setTimeout(_ => {
+        // check timestamp is parsed internally
+        expect(vm.$refs.compo.parsedValue[0].getTime()).to.equal(vm.value[0]);
+        expect(vm.$refs.compo.parsedValue[1].getTime()).to.equal(vm.value[1]);
+        inputs[0].value = '2000-10-01';
+        triggerEvent(inputs[0], 'input');
+        keyDown(inputs[0], TAB);
+        setTimeout(_ => {
+          inputs[1].focus();
+          inputs[1].value = '2000-10-02';
+          triggerEvent(inputs[1], 'input');
+          keyDown(inputs[0], ENTER);
+          setTimeout(_ => {
+            expect(vm.value).to.eql([
+              new Date(2000, 9, 1).getTime(),
+              new Date(2000, 9, 2).getTime()
+            ]);
+            done();
+          }, DELAY);
+        }, DELAY);
+      }, DELAY);
     });
   });
 
-  it('type:month', done => {
-    vm = createTest(DatePicker, {
-      type: 'month'
-    }, true);
-    const input = vm.$el.querySelector('input');
+  describe('default value', done => {
+    it('it works', done => {
+      let defaultValue = '2000-01-01';
+      let expectValue = new Date(2000, 0, 1);
 
-    input.blur();
-    input.focus();
+      vm = createVue({
+        template: `<el-date-picker v-model="value" ref="compo" default-value="${defaultValue}" />`,
+        data() {
+          return {
+            value: ''
+          };
+        }
+      }, true);
 
-    setTimeout(_ => {
-      expect(vm.picker.$el.querySelector('.el-month-table').style.display).to.be.empty;
-      expect(vm.picker.$el.querySelector('.el-year-table').style.display).to.be.equal('none');
-      vm.picker.$el.querySelector('.el-month-table a.cell').click();
-      expect(vm.pickerVisible).to.false;
-      done();
-    }, DELAY);
-  });
+      vm.$el.querySelector('input').focus();
+      setTimeout(_ => {
+        const $el = vm.$refs.compo.picker.$el;
+        expect($el.querySelector('.el-month-table td.default')).to.exist;
+        expect($el.querySelector('.el-year-table td.default')).to.exist;
+        const defaultEls = $el.querySelectorAll('.el-date-table td.default');
+        expect(defaultEls.length).to.equal(1);
+        defaultEls[0].click();
+        setTimeout(_ => {
+          expect(vm.value).to.eql(expectValue);
+          done();
+        }, DELAY);
+      }, DELAY);
+    });
 
-  it('type:year', done => {
+    it('is reactive, works with clear', done => {
+      let defaultValue = '2000-01-01';
+      let expectValue = new Date(2000, 0, 1);
+
+      vm = createVue({
+        template: '<el-date-picker v-model="value" ref="compo" :default-value="defaultValue" />',
+        data() {
+          return {
+            value: new Date(),
+            defaultValue: null
+          };
+        }
+      }, true);
+
+      const input = vm.$el.querySelector('input');
+      input.focus();
+      setTimeout(_ => {
+        let $el = vm.$refs.compo.picker.$el;
+        expect($el.querySelector('.el-date-table td.current')).to.exist;
+        vm.defaultValue = defaultValue;
+        triggerEvent(vm.$refs.compo.$el, 'mouseenter');
+        setTimeout(_ => {
+          vm.$el.querySelector('.el-icon-circle-close').click();
+          setTimeout(_ => {
+            input.focus();
+            setTimeout(() => {
+              $el = vm.$refs.compo.picker.$el;
+              expect($el.querySelector('.el-date-table td.current')).to.not.exist;
+              expect($el.querySelector('.el-date-table td.default')).to.exist;
+              $el.querySelector('.el-date-table td.default').click();
+              setTimeout(() => {
+                expect(vm.value).to.eql(expectValue);
+                done();
+              }, DELAY);
+            }, DELAY);
+          }, DELAY);
+        }, DELAY);
+      }, DELAY);
+    });
+
+  });
+
+  describe('keydown', () => {
+    let input, datePicker;
+
+    beforeEach(done => {
+      vm = createVue({
+        template: '<el-date-picker ref="compo" v-model="value"></el-date-picker>',
+        data() {
+          return {
+            value: ''
+          };
+        }
+      }, true);
+      datePicker = vm.$refs.compo;
+      input = vm.$el.querySelector('input');
+      input.blur();
+      input.focus();
+      setTimeout(done, DELAY);
+    });
+
+    afterEach(() => destroyVM(vm));
+
+    it('tab', done => {
+      keyDown(input, TAB);
+      setTimeout(_ => {
+        expect(datePicker.pickerVisible).to.false;
+        done();
+      }, DELAY);
+    });
+
+    it('enter', done => {
+      input.value = '2000-10-1';
+      triggerEvent(input, 'input');
+      vm.$nextTick(_ => {
+        keyDown(input, ENTER);
+        setTimeout(_ => {
+          expect(datePicker.pickerVisible).to.false;
+          expect(datePicker.picker.date.getFullYear()).to.equal(2000);
+          expect(datePicker.picker.date.getMonth()).to.equal(9);
+          expect(datePicker.picker.date.getDate()).to.equal(1);
+          done();
+        }, DELAY);
+      });
+    });
+
+    it('arrow keys during typing does not navigate', done => {
+      const inputText = '2000-10-1';
+      input.value = inputText;
+      triggerEvent(input, 'input');
+      keyDown(input, LEFT);
+      vm.$nextTick(_ => {
+        expect(input.value).to.equal(inputText);
+        done();
+      });
+    });
+
+    it('arrow keys navigates', done => {
+      const date = new Date(2000, 9, 1);
+      const prevDate = new Date(2000, 9, 0);
+      vm.value = date;
+      vm.$nextTick(_ => {
+        keyDown(input, LEFT);
+        setTimeout(_ => {
+          expect(datePicker.pickerVisible).to.true;
+          expect(datePicker.picker.date.getFullYear()).to.equal(prevDate.getFullYear());
+          expect(datePicker.picker.date.getMonth()).to.equal(prevDate.getMonth());
+          expect(datePicker.picker.date.getDate()).to.equal(prevDate.getDate());
+          done();
+        }, DELAY);
+      });
+    });
+  });
+
+  describe('can be cleared using keyboard', () => {
+    it('works for type=date, when blur', done => {
+      vm = createVue({
+        template: `
+          <el-date-picker ref="compo" v-model="value" format="yyyy-MM-dd" type="date" />
+        `,
+        data() {
+          return {
+            value: new Date()
+          };
+        }
+      }, true);
+
+      const input = vm.$el.querySelector('input');
+
+      input.blur();
+      input.focus();
+
+      setTimeout(_ => {
+        // NOTE: simplified test
+        vm.$refs.compo.userInput = '';
+        vm.$refs.compo.handleChange();
+        setTimeout(_ => {
+          expect(vm.value).to.equal(null);
+          done();
+        }, DELAY);
+      }, DELAY);
+    });
+
+    it('works for type=date, when keydown.enter', done => {
+      vm = createVue({
+        template: `
+          <el-date-picker ref="compo" v-model="value" format="yyyy-MM-dd" type="date" />
+        `,
+        data() {
+          return {
+            value: new Date()
+          };
+        }
+      }, true);
+
+      const input = vm.$el.querySelector('input');
+
+      input.blur();
+      input.focus();
+
+      setTimeout(_ => {
+        // NOTE: simplified test
+        vm.$refs.compo.userInput = '';
+        keyDown(input, ENTER);
+        setTimeout(_ => {
+          expect(vm.value).to.equal(null);
+          done();
+        }, DELAY);
+      }, DELAY);
+    });
+
+    // TODO: implement the same feature for range panels
+  });
+
+  describe('nagivation', _ => {
+    const click = (el, cbk = () => {}) => {
+      el.click();
+      setTimeout(cbk, DELAY);
+    };
+
+    let prevMonth, prevYear, nextMonth, nextYear, getYearLabel, getMonthLabel;
+
+    const navigationTest = (value, cbk) => {
+      vm = createVue({
+        template: '<el-date-picker v-model="value" ref="compo" />',
+        data() {
+          return {
+            value
+          };
+        }
+      }, true);
+      vm.$refs.compo.$el.querySelector('input').focus();
+      setTimeout(_ => {
+        const $el = vm.$refs.compo.picker.$el;
+        prevMonth = $el.querySelector('button.el-icon-arrow-left');
+        prevYear = $el.querySelector('button.el-icon-d-arrow-left');
+        nextMonth = $el.querySelector('button.el-icon-arrow-right');
+        nextYear = $el.querySelector('button.el-icon-d-arrow-right');
+        getYearLabel = () => $el.querySelectorAll('.el-date-picker__header-label')[0].textContent;
+        getMonthLabel = () => $el.querySelectorAll('.el-date-picker__header-label')[1].textContent;
+        cbk();
+      }, DELAY);
+    };
+
+    it('month, year', done => {
+      navigationTest(new Date(2000, 0, 1), _ => {
+        expect(getYearLabel()).to.include('2000');
+        expect(getMonthLabel()).to.include('1');
+        click(prevMonth, _ => {
+          expect(getYearLabel()).to.include('1999');
+          expect(getMonthLabel()).to.include('12');
+          click(prevYear, _ => {
+            expect(getYearLabel()).to.include('1998');
+            expect(getMonthLabel()).to.include('12');
+            click(nextMonth, _ => {
+              expect(getYearLabel()).to.include('1999');
+              expect(getMonthLabel()).to.include('1');
+              click(nextYear, _ => {
+                expect(getYearLabel()).to.include('2000');
+                expect(getMonthLabel()).to.include('1');
+                done();
+              });
+            });
+          });
+        });
+      });
+    });
+
+    it('month with fewer dates', done => {
+      // July has 31 days, June has 30
+      navigationTest(new Date(2000, 6, 31), _ => {
+        click(prevMonth, _ => {
+          expect(getYearLabel()).to.include('2000');
+          expect(getMonthLabel()).to.include('6');
+          done();
+        });
+      });
+    });
+
+    it('year with fewer Feburary dates', done => {
+      // Feburary 2008 has 29 days, Feburary 2007 has 28
+      navigationTest(new Date(2008, 1, 29), _ => {
+        click(prevYear, _ => {
+          expect(getYearLabel()).to.include('2007');
+          expect(getMonthLabel()).to.include('2');
+          done();
+        });
+      });
+    });
+
+    it('month label with fewer dates', done => {
+      navigationTest(new Date(2000, 6, 31), _ => {
+        const $el = vm.$refs.compo.picker.$el;
+        const monthLabel = $el.querySelectorAll('.el-date-picker__header-label')[1];
+        click(monthLabel, _ => {
+          setTimeout(_ => {
+            const juneLabel = $el.querySelectorAll('.el-month-table td a')[5];
+            juneLabel.click();
+            setTimeout(_ => {
+              expect(getYearLabel()).to.include('2000');
+              expect(getMonthLabel()).to.include('6');
+              done();
+            }, DELAY);
+          }, DELAY);
+        });
+      });
+    });
+  });
+
+  it('type:month', done => {
+    vm = createTest(DatePicker, {
+      type: 'month'
+    }, true);
+    const input = vm.$el.querySelector('input');
+
+    input.blur();
+    input.focus();
+
+    setTimeout(_ => {
+      expect(vm.picker.$el.querySelector('.el-month-table').style.display).to.be.empty;
+      expect(vm.picker.$el.querySelector('.el-year-table').style.display).to.be.equal('none');
+      vm.picker.$el.querySelector('.el-month-table a.cell').click();
+      expect(vm.pickerVisible).to.false;
+      done();
+    }, DELAY);
+  });
+
+  it('type:year', done => {
     vm = createTest(DatePicker, {
       type: 'year'
     }, true);
@@ -479,6 +1022,94 @@ describe('DatePicker', () => {
       expect(vm.picker.$el.querySelector('.el-time-panel')).to.ok;
     });
 
+    it('both picker show correct formated value (extract date-format and time-format from format property)', done => {
+      vm = createVue({
+        template: '<el-date-picker type="datetime" v-model="value" :format="format" :pickerOptions="pickerOptions" ref="compo" />',
+        data() {
+          return {
+            value: new Date(2018, 2, 5, 10, 15, 24),
+            format: 'yyyy/MM/dd hh:mm A',
+            pickerOptions: null
+          };
+        }
+      }, true);
+
+      const input = vm.$refs.compo.$el.querySelector('input');
+      input.blur();
+      input.focus();
+      setTimeout(_ => {
+        const datePanel = vm.$refs.compo.picker;
+        const dateInput = datePanel.$el.querySelector('.el-date-picker__time-header > span:nth-child(1) input');
+        const timeInput = datePanel.$el.querySelector('.el-date-picker__time-header > span:nth-child(2) input');
+        timeInput.focus();
+        setTimeout(_ => {
+          // both input shows correct value
+          expect(dateInput.value).to.equal('2018/03/05');
+          expect(timeInput.value).to.equal('10:15 AM');
+
+          // change main format
+          vm.format = 'd-M-yy hh a';
+          setTimeout(_ => {
+            expect(dateInput.value).to.equal('5-3-18');
+            expect(timeInput.value).to.equal('10 am');
+
+            // change not documented pickerOptions.format mustn't change picker format
+            vm.pickerOptions = { format: 'yyyy-MM-dd HH:mm:ss'};
+            setTimeout(_ => {
+              expect(dateInput.value).to.equal('5-3-18');
+              expect(timeInput.value).to.equal('10 am');
+              done();
+            }, DELAY);
+          }, DELAY);
+        }, DELAY);
+      }, DELAY);
+    });
+
+    it('both picker show correct value', done => {
+      vm = createVue({
+        template: '<el-date-picker type="datetime" v-model="value" ref="compo" />',
+        data() {
+          return {
+            value: new Date(2000, 9, 1, 10, 0, 1)
+          };
+        }
+      }, true);
+
+      const input = vm.$refs.compo.$el.querySelector('input');
+      input.blur();
+      input.focus();
+      setTimeout(_ => {
+        const datePanel = vm.$refs.compo.picker;
+        const dateInput = datePanel.$el.querySelector('.el-date-picker__time-header > span:nth-child(1) input');
+        const timeInput = datePanel.$el.querySelector('.el-date-picker__time-header > span:nth-child(2) input');
+        timeInput.focus();
+        setTimeout(_ => {
+          const timePanel = datePanel.$refs.timepicker;
+          // both input shows correct value
+          expect(dateInput.value).to.equal('2000-10-01');
+          expect(timeInput.value).to.equal('10:00:01');
+          // time spinner highlight is correct
+          const [hours, minutes, seconds] = timePanel.$el.querySelectorAll('.el-time-spinner ul li.active');
+          expect(hours.textContent).to.include('10');
+          expect(minutes.textContent).to.include('00');
+          expect(seconds.textContent).to.include('01');
+          // sets value updates displayed value
+          vm.value = new Date(2001, 10, 2, 11, 1, 2);
+          setTimeout(_ => {
+            expect(dateInput.value).to.equal('2001-11-02');
+            expect(timeInput.value).to.equal('11:01:02');
+            const [hours, minutes, seconds] = timePanel.$el.querySelectorAll('.el-time-spinner ul li.active');
+            expect(hours.textContent).to.include('11');
+            expect(minutes.textContent).to.include('01');
+            expect(seconds.textContent).to.include('02');
+            expect(datePanel.visible).to.true;
+            expect(timePanel.visible).to.true;
+            done();
+          }, DELAY);
+        }, DELAY);
+      }, DELAY);
+    });
+
     it('click now button', done => {
       const date = new Date(1999, 10, 10, 10, 10);
 
@@ -532,97 +1163,685 @@ describe('DatePicker', () => {
       input.blur();
 
       setTimeout(_ => {
-        const button = vm.picker.$el.querySelector('.el-time-panel .confirm');
-        button.click();
-
+        const button = vm.picker.$el.querySelector('.el-time-panel .confirm');
+        button.click();
+
+        setTimeout(_ => {
+          expect(input.value).to.exist;
+          done();
+        }, DELAY);
+      }, DELAY);
+    });
+
+    describe('change event', () => {
+      it('pick date, emits on confirm', done => {
+        vm = createVue({
+          template: '<el-date-picker type="datetime" v-model="value" ref="compo" />',
+          data() {
+            return {
+              value: ''
+            };
+          }
+        }, true);
+
+        const spy = sinon.spy();
+        vm.$refs.compo.$on('change', spy);
+
+        const input = vm.$refs.compo.$el.querySelector('input');
+        input.blur();
+        input.focus();
+
+        setTimeout(_ => {
+          vm.$refs.compo.picker.$el.querySelector('td.available').click();
+          setTimeout(_ => {
+            expect(spy.called).to.equal(false);
+            vm.$refs.compo.picker.$el.querySelector('.el-picker-panel__footer .el-button--default').click();
+            setTimeout(_ => {
+              expect(vm.value).is.a('date');
+              expect(spy.calledOnce).to.equal(true);
+              done();
+            }, DELAY);
+          }, DELAY);
+        }, DELAY);
+      });
+
+      it('input date, enter, emits on confirm', done => {
+        vm = createVue({
+          template: '<el-date-picker type="datetime" v-model="value" ref="compo" />',
+          data() {
+            return {
+              value: ''
+            };
+          }
+        }, true);
+
+        const spy = sinon.spy();
+        vm.$refs.compo.$on('change', spy);
+
+        const input = vm.$refs.compo.$el.querySelector('input');
+        input.blur();
+        input.focus();
+
+        setTimeout(_ => {
+          const picker = vm.$refs.compo.picker;
+          // simplified change
+          picker.handleVisibleDateChange('2000-01-02');
+          setTimeout(_ => {
+            expect(picker.$el.querySelector('td.current').innerText.trim()).to.equal('2');
+            expect(spy.called).to.equal(false);
+            // keyDown does not work, event listener attached to document.body
+            picker.handleKeydown({ keyCode: ENTER, stopPropagation() {}, preventDefault() {} });
+            setTimeout(_ => {
+              expect(vm.value).is.a('date');
+              expect(spy.calledOnce).to.equal(true);
+              done();
+            }, DELAY);
+          }, DELAY);
+        }, DELAY);
+      });
+    });
+
+    describe('cancel time', () => {
+      it('cancel to empty', done => {
+        vm = createVue({
+          template: '<el-date-picker type="datetime" v-model="value" ref="compo" />',
+          data() {
+            return {
+              value: ''
+            };
+          }
+        }, true);
+
+        const input = vm.$refs.compo.$el.querySelector('input');
+        input.blur();
+        input.focus();
+
+        setTimeout(_ => {
+          const timeInput = vm.$refs.compo.picker.$el.querySelector('.el-date-picker__time-header > span:nth-child(2) input');
+          timeInput.focus();
+          setTimeout(_ => {
+            const cancel = vm.$refs.compo.picker.$refs.timepicker.$el.querySelector('button.cancel');
+            cancel.click();
+            setTimeout(_ => {
+              expect(vm.value).to.equal('');
+              expect(vm.$refs.compo.pickerVisible).to.true;
+              done();
+            }, DELAY);
+          }, DELAY);
+        }, DELAY);
+      });
+
+      it('cancel to old value', done => {
+        vm = createVue({
+          template: '<el-date-picker type="datetime" v-model="value" ref="compo" />',
+          data() {
+            return {
+              value: new Date(2000, 9, 1, 10, 0, 0)
+            };
+          }
+        }, true);
+
+        const input = vm.$refs.compo.$el.querySelector('input');
+        input.blur();
+        input.focus();
+
+        const oldValue = vm.value.toISOString();
+
+        setTimeout(_ => {
+          const timeInput = vm.$refs.compo.picker.$el.querySelector('.el-date-picker__time-header > span:nth-child(2) input');
+          timeInput.focus();
+          setTimeout(_ => {
+            const nextTime = vm.$refs.compo.picker.$refs.timepicker.$el.querySelector('.active + *');
+            nextTime.click();
+            setTimeout(_ => {
+              const cancel = vm.$refs.compo.picker.$refs.timepicker.$el.querySelector('button.cancel');
+              cancel.click();
+              setTimeout(_ => {
+                expect(vm.value.toISOString()).to.equal(oldValue);
+                expect(vm.$refs.compo.pickerVisible).to.true;
+                done();
+              }, DELAY);
+            }, DELAY);
+          }, DELAY);
+        }, DELAY);
+      });
+    });
+
+    it('now button: can not choose disabled date', done => {
+      vm = createVue({
+        template: '<el-date-picker type="datetime" v-model="value" ref="compo" :pickerOptions="pickerOptions" />',
+        data() {
+          return {
+            value: '',
+            pickerOptions: {
+              disabledDate() { return true; }
+            }
+          };
+        }
+      }, true);
+      vm.$refs.compo.$el.querySelector('input').focus();
+      setTimeout(_ => {
+        // click now button
+        vm.$refs.compo.picker.$el.querySelector('.el-picker-panel__footer .el-button--text').click();
+        setTimeout(_ => {
+          expect(vm.value).to.equal('');
+          done();
+        }, DELAY);
+      }, DELAY);
+    });
+
+    it('select time honors picked date', done => {
+      vm = createVue({
+        template: '<el-date-picker type="datetime" v-model="value" ref="compo" />',
+        data() {
+          return {
+            value: new Date(2000, 9, 1, 12, 0, 0) // 2010-10-01 12:00:00
+          };
+        }
+      }, true);
+      vm.$refs.compo.$el.querySelector('input').focus();
+      setTimeout(_ => {
+        // changed month / year should not effect picked time
+        vm.$refs.compo.picker.$el.querySelector('.el-date-picker__header .el-icon-arrow-right').click();
+        setTimeout(_ => {
+          vm.$refs.compo.picker.$el.querySelector('.el-date-picker__header .el-icon-d-arrow-right').click();
+          setTimeout(_ => {
+            // simulate time selection
+            // handleTimePick takes Date object, but it's non-time fields are ignored
+            vm.$refs.compo.picker.handleTimePick(new Date(2001, 10, 10, 13, 14, 15), false, false);
+            setTimeout(_ => {
+              expect(vm.value.getFullYear()).to.equal(2000);
+              expect(vm.value.getMonth()).to.equal(9);
+              expect(vm.value.getDate()).to.equal(1);
+              expect(vm.value.getHours()).to.equal(13);
+              expect(vm.value.getMinutes()).to.equal(14);
+              expect(vm.value.getSeconds()).to.equal(15);
+              done();
+            }, DELAY);
+          }, DELAY);
+        }, DELAY);
+      }, DELAY);
+    });
+
+    it('confirm button honors picked date', done => {
+      vm = createVue({
+        template: '<el-date-picker type="datetime" v-model="value" ref="compo" />',
+        data() {
+          return {
+            value: new Date(2000, 9, 1, 12, 0, 0) // 2010-10-01 12:00:00
+          };
+        }
+      }, true);
+      vm.$refs.compo.$el.querySelector('input').focus();
+      setTimeout(_ => {
+        // changed month / year should not effect picked time
+        vm.$refs.compo.picker.$el.querySelector('.el-date-picker__header .el-icon-arrow-right').click();
+        setTimeout(_ => {
+          vm.$refs.compo.picker.$el.querySelector('.el-date-picker__header .el-icon-d-arrow-right').click();
+          setTimeout(_ => {
+            // click confirm button
+            vm.$refs.compo.picker.$el.querySelector('.el-picker-panel__footer .el-button--default').click();
+            setTimeout(_ => {
+              expect(vm.value.getFullYear()).to.equal(2000);
+              expect(vm.value.getMonth()).to.equal(9);
+              expect(vm.value.getDate()).to.equal(1);
+              expect(vm.value.getHours()).to.equal(12);
+              expect(vm.value.getMinutes()).to.equal(0);
+              expect(vm.value.getSeconds()).to.equal(0);
+              done();
+            }, DELAY);
+          }, DELAY);
+        }, DELAY);
+      }, DELAY);
+    });
+  });
+
+  describe('type:week', () => {
+    let vm;
+
+    beforeEach(done => {
+      vm = createTest(DatePicker, {
+        type: 'week'
+      }, true);
+      const input = vm.$el.querySelector('input');
+
+      input.blur();
+      input.focus();
+      setTimeout(done, DELAY);
+    });
+
+    afterEach(() => destroyVM(vm));
+
+    it('create', () => {
+      expect(vm.picker.$el.querySelector('.is-week-mode')).to.be.ok;
+    });
+
+    it('click cell', done => {
+      vm.picker.$el.querySelector('.el-date-table__row .available').click();
+      setTimeout(_ => {
+        expect(vm.picker.week).to.exist;
+        done();
+      }, DELAY);
+    });
+
+    it('click year label', () => {
+      vm.picker.$el.querySelector('.el-date-picker__header-label').click();
+      expect(vm.picker.currentView).to.equal('year');
+    });
+
+    it('click month label', () => {
+      vm.picker.$el.querySelectorAll('.el-date-picker__header-label')[1].click();
+      expect(vm.picker.currentView).to.equal('month');
+    });
+
+    it('select month', done => {
+      vm.picker.$el.querySelectorAll('.el-date-picker__header-label')[1].click();
+
+      setTimeout(_ => {
+        vm.picker.$el.querySelector('.el-month-table .cell').click();
+
+        setTimeout(_ => {
+          expect(vm.picker.$el.querySelector('.el-date-table.is-week-mode').style.display).to.equal('');
+          done();
+        }, DELAY);
+      }, DELAY);
+    });
+
+    it('highlight correctly', done => {
+      vm = createVue({
+        template: '<el-date-picker type="week" v-model="value" ref="compo" />',
+        data() {
+          return {
+            value: null
+          };
+        }
+      }, true);
+
+      const input = vm.$el.querySelector('input');
+      input.blur();
+      input.focus();
+
+      setTimeout(() => {
+        const pickerEl = vm.$refs.compo.picker.$el;
+        const numberOfHighlightRows = () => pickerEl.querySelectorAll('.el-date-table__row.current').length;
+        expect(numberOfHighlightRows()).to.equal(0);
+        setTimeout(() => {
+          pickerEl.querySelector('.el-date-table__row ~ .el-date-table__row td.available').click();
+          setTimeout(() => {
+            expect(vm.value).to.exist;
+            input.blur();
+            input.focus();
+            setTimeout(() => {
+              expect(numberOfHighlightRows()).to.equal(1);
+              // test: next month should not have highlight
+              pickerEl.querySelector('.el-icon-arrow-right').click();
+              setTimeout(() => {
+                expect(numberOfHighlightRows()).to.equal(0);
+                // test: next year should not have highlight
+                pickerEl.querySelector('.el-icon-arrow-left').click(); // go back one month
+                pickerEl.querySelector('.el-icon-d-arrow-right').click();
+                setTimeout(() => {
+                  expect(numberOfHighlightRows()).to.equal(0);
+                  done();
+                }, DELAY);
+              }, DELAY);
+            }, DELAY);
+          }, DELAY);
+        }, DELAY);
+      }, DELAY);
+    });
+  });
+
+  describe('type:dates', () => {
+    let vm;
+
+    beforeEach(done => {
+      vm = createVue({
+        template: '<el-date-picker type="dates" value-format="timestamp" v-model="value" ref="compo" />',
+        data() {
+          return {
+            value: []
+          };
+        }
+      }, true);
+      const input = vm.$el.querySelector('input');
+
+      input.blur();
+      input.focus();
+      setTimeout(done, DELAY);
+    });
+
+    afterEach(() => destroyVM(vm));
+
+    it('click cell', done => {
+      const td = vm.$refs.compo.picker.$el.querySelector('.el-date-table__row .available');
+      td.click();
+      setTimeout(_ => {
+        expect(vm.$refs.compo.value).to.be.an('array');
+        expect(vm.$refs.compo.value.length).to.equal(1);
+        expect(vm.$refs.compo.value[0]).to.be.a('number');
+        expect(vm.value.length).to.equal(1);
+        done();
+      }, DELAY);
+    });
+
+    it('restore value when cancel', done => {
+      const td = vm.$refs.compo.picker.$el.querySelector('.el-date-table__row .available');
+      td.click();
+      setTimeout(_ => {
+        vm.$refs.compo.handleClose();
+        setTimeout(() => {
+          expect(vm.value.length).to.equal(0);
+          done();
+        }, DELAY);
+      }, DELAY);
+    });
+  });
+
+  describe('type:daterange', () => {
+    it('works', done => {
+      vm = createVue({
+        template: '<el-date-picker type="daterange" v-model="value" ref="compo" />',
+        data() {
+          return {
+            value: ''
+          };
+        }
+      }, true);
+
+      const rangePicker = vm.$refs.compo;
+      const inputs = rangePicker.$el.querySelectorAll('input');
+      inputs[0].focus();
+
+      setTimeout(_ => {
+        const panels = rangePicker.picker.$el.querySelectorAll('.el-date-range-picker__content');
+        expect(Array.prototype.slice.call(panels)).to.length(2);
+        panels[0].querySelector('td.available').click();
+        setTimeout(_ => {
+          panels[1].querySelector('td.available').click();
+          setTimeout(_ => {
+            inputs[0].focus();
+            setTimeout(_ => {
+              // correct highlight
+              const startDate = rangePicker.picker.$el.querySelectorAll('.start-date');
+              const endDate = rangePicker.picker.$el.querySelectorAll('.end-date');
+              const inRangeDate = rangePicker.picker.$el.querySelectorAll('.in-range');
+              expect(startDate.length).to.equal(1);
+              expect(endDate.length).to.equal(1);
+              expect(inRangeDate.length).to.above(0);
+              // value is array
+              expect(vm.value).to.be.an.instanceof(Array);
+              // input text is something like date string
+              expect(inputs[0].value.length).to.equal(10);
+              expect(inputs[1].value.length).to.equal(10);
+              done();
+            }, DELAY);
+          }, DELAY);
+        }, DELAY);
+      }, DELAY);
+    });
+
+    it('works: reverse selection', done => {
+      vm = createVue({
+        template: '<el-date-picker type="daterange" v-model="value" ref="compo" />',
+        data() {
+          return {
+            value: ''
+          };
+        }
+      }, true);
+
+      const rangePicker = vm.$refs.compo;
+      const inputs = rangePicker.$el.querySelectorAll('input');
+      inputs[0].focus();
+
+      setTimeout(_ => {
+        const panels = rangePicker.picker.$el.querySelectorAll('.el-date-range-picker__content');
+        expect(Array.prototype.slice.call(panels)).to.length(2);
+        panels[1].querySelector('td.available').click();
+        setTimeout(_ => {
+          panels[0].querySelector('td.available').click();
+          setTimeout(_ => {
+            inputs[0].focus();
+            setTimeout(_ => {
+              // correct highlight
+              const startDate = rangePicker.picker.$el.querySelectorAll('.start-date');
+              const endDate = rangePicker.picker.$el.querySelectorAll('.end-date');
+              const inRangeDate = rangePicker.picker.$el.querySelectorAll('.in-range');
+              expect(startDate.length).to.equal(1);
+              expect(endDate.length).to.equal(1);
+              expect(inRangeDate.length).to.above(0);
+              // value is array
+              expect(vm.value).to.be.an.instanceof(Array);
+              // input text is something like date string
+              expect(inputs[0].value.length).to.equal(10);
+              expect(inputs[1].value.length).to.equal(10);
+              // result array is properly ordered
+              expect(vm.value[0].getTime() < vm.value[1].getTime()).to.be.true;
+              done();
+            }, DELAY);
+          }, DELAY);
+        }, DELAY);
+      }, DELAY);
+    });
+
+    it('type:daterange unlink:true', done => {
+      vm = createVue({
+        template: '<el-date-picker type="daterange" unlink-panels v-model="value" ref="compo" />',
+        data() {
+          return {
+            value: [new Date(2000, 9, 1), new Date(2000, 9, 2)]
+          };
+        }
+      }, true);
+
+      const rangePicker = vm.$refs.compo;
+      const inputs = rangePicker.$el.querySelectorAll('input');
+      setTimeout(_ => {
+        inputs[0].focus();
         setTimeout(_ => {
-          expect(input.value).to.exist;
+          const panels = rangePicker.picker.$el.querySelectorAll('.el-date-range-picker__content');
+          const left = panels[0].querySelector('.el-date-range-picker__header');
+          const right = panels[1].querySelector('.is-right .el-date-range-picker__header');
+          const leftText = left.textContent.match(/\d+/g).map(i => Number(i));
+          const rightText = right.textContent.match(/\d+/g).map(i => Number(i));
+          expect(rightText[1] - leftText[1]).to.equal(1); // one month
           done();
         }, DELAY);
       }, DELAY);
     });
-  });
-
-  describe('type:week', () => {
-    let vm;
 
-    beforeEach(done => {
+    it('unlink panels', done => {
       vm = createTest(DatePicker, {
-        type: 'week'
+        type: 'daterange',
+        unlinkPanels: true
       }, true);
       const input = vm.$el.querySelector('input');
 
-      input.blur();
-      input.focus();
-      setTimeout(done, DELAY);
-    });
+      input.click();
 
-    afterEach(() => destroyVM(vm));
+      setTimeout(_ => {
+        const panels = vm.picker.$el.querySelectorAll('.el-date-range-picker__content');
 
-    it('create', () => {
-      expect(vm.picker.$el.querySelector('.is-week-mode')).to.be.ok;
+        expect(Array.prototype.slice.call(panels)).to.length(2);
+
+        panels[1].querySelector('.el-icon-d-arrow-right').click();
+        panels[1].querySelector('.el-icon-arrow-right').click();
+
+        setTimeout(_ => {
+          const left = panels[0].querySelector('.el-date-range-picker__header');
+          const right = panels[1].querySelector('.is-right .el-date-range-picker__header');
+          const leftText = left.textContent.match(/\d+/g).map(i => Number(i));
+          const rightText = right.textContent.match(/\d+/g).map(i => Number(i));
+
+          expect((rightText[1] <= 2 ? rightText[0] - 1 : rightText[0]) - leftText[0]).to.equal(1);
+          expect((rightText[1] <= 2 ? rightText[1] + 12 : rightText[1]) - leftText[1]).to.equal(2);
+
+          done();
+        }, DELAY);
+      }, DELAY);
     });
 
-    it('click cell', done => {
-      vm.picker.$el.querySelector('.el-date-table__row .available').click();
+    it('daylight saving time highlight', done => {
+      // Run test with environment variable TZ=Australia/Sydney
+      // The following test uses Australian Eastern Daylight Time (AEDT)
+      // AEST -> AEDT shift happened on 2016-10-02 02:00:00
+      vm = createVue({
+        template: '<el-date-picker type="daterange" v-model="value" ref="compo" />',
+        data() {
+          return {
+            value: [new Date(2016, 9, 1), new Date(2016, 9, 3)]
+          };
+        }
+      }, true);
+
+      const rangePicker = vm.$refs.compo;
+      const inputs = rangePicker.$el.querySelectorAll('input');
+      inputs[0].focus();
+
       setTimeout(_ => {
-        expect(vm.picker.week).to.exist;
+        const startDate = rangePicker.picker.$el.querySelectorAll('.start-date');
+        const endDate = rangePicker.picker.$el.querySelectorAll('.end-date');
+        expect(startDate.length).to.equal(1);
+        expect(endDate.length).to.equal(1);
         done();
       }, DELAY);
     });
 
-    it('click year label', () => {
-      vm.picker.$el.querySelector('.el-date-picker__header-label').click();
-      expect(vm.picker.currentView).to.equal('year');
-    });
-
-    it('click month label', () => {
-      vm.picker.$el.querySelectorAll('.el-date-picker__header-label')[1].click();
-      expect(vm.picker.currentView).to.equal('month');
-    });
+    it('clear value', done => {
+      vm = createVue({
+        template: '<el-date-picker type="daterange" v-model="value" ref="compo" />',
+        data() {
+          return {
+            value: [new Date(2000, 9, 1), new Date(2000, 9, 2)]
+          };
+        }
+      }, true);
 
-    it('select month', done => {
-      vm.picker.$el.querySelectorAll('.el-date-picker__header-label')[1].click();
+      vm.$el.querySelector('input').focus();
 
       setTimeout(_ => {
-        vm.picker.$el.querySelector('.el-month-table .cell').click();
-
+        vm.$refs.compo.showClose = true;
+        vm.$refs.compo.handleClickIcon({ stopPropagation: () => null });
         setTimeout(_ => {
-          expect(vm.picker.$el.querySelector('.el-date-table.is-week-mode').style.display).to.equal('');
+          expect(vm.value).to.equal(null);
           done();
         }, DELAY);
       }, DELAY);
     });
-  });
 
-  it('type:daterange', done => {
-    vm = createTest(DatePicker, {
-      type: 'daterange'
-    }, true);
-    const input = vm.$el.querySelector('input');
+    it('change event', done => {
+      vm = createVue({
+        template: `
+          <el-date-picker
+            ref="compo"
+            v-model="value"
+            type="daterange" />`,
+        data() {
+          return {
+            value: ''
+          };
+        }
+      }, true);
 
-    input.blur();
-    input.focus();
+      const spy = sinon.spy();
+      vm.$refs.compo.$on('change', spy);
 
-    setTimeout(_ => {
-      const panels = vm.picker.$el.querySelectorAll('.el-date-range-picker__content');
+      const input = vm.$el.querySelector('input');
 
-      expect(Array.prototype.slice.call(panels)).to.length(2);
+      input.blur();
+      input.focus();
 
-      panels[0].querySelector('td.available').click();
       setTimeout(_ => {
-        panels[1].querySelector('td.available').click();
-
-        const {
-          minDate,
-          maxDate
-        } = vm.picker;
-        expect(minDate).to.exist;
-        expect(maxDate).to.exist;
-        expect(maxDate > minDate).to.true;
-        done();
+        const picker = vm.$refs.compo.picker;
+        setTimeout(_ => {
+          picker.$el.querySelector('td.available').click();
+          setTimeout(_ => {
+            picker.$el.querySelector('td.available ~ td.available').click();
+            setTimeout(_ => {
+              expect(spy.calledOnce).to.equal(true);
+              // change event is not emitted if used does not change value
+              // datarange also requires proper array equality check
+              input.blur();
+              input.focus();
+              setTimeout(_ => {
+                const startCell = picker.$el.querySelector('td.start-date');
+                const endCell = picker.$el.querySelector('td.end-date');
+                startCell.click();
+                setTimeout(_ => {
+                  endCell.click();
+                  setTimeout(_ => {
+                    expect(spy.calledOnce).to.equal(true);
+                    done();
+                  }, DELAY);
+                }, DELAY);
+              }, DELAY);
+            }, DELAY);
+          }, DELAY);
+        }, DELAY);
       }, DELAY);
-    }, DELAY);
+    });
+
+    describe('default value', () => {
+      it('single', done => {
+        let defaultValue = '2000-10-01';
+        let expectValue = [new Date(2000, 9, 1), new Date(2000, 9, 2)];
+
+        vm = createVue({
+          template: '<el-date-picker type="daterange" v-model="value" ref="compo" :default-value="defaultValue" />',
+          data() {
+            return {
+              value: '',
+              defaultValue
+            };
+          }
+        }, true);
+
+        vm.$el.querySelector('input').focus();
+        setTimeout(_ => {
+          const $el = vm.$refs.compo.picker.$el;
+          const defaultEls = $el.querySelectorAll('.el-date-table td.default');
+          expect(defaultEls.length).to.equal(1);
+          defaultEls[0].click();
+          setTimeout(_ => {
+            $el.querySelector('.el-date-table td.default + td').click();
+            setTimeout(_ => {
+              expect(vm.value).to.eql(expectValue);
+              done();
+            }, DELAY);
+          }, DELAY);
+        }, DELAY);
+      });
+
+      it('array', done => {
+        let defaultValue = ['2000-01-01', '2000-02-01'];
+        let expectValue = [new Date(2000, 0, 1), new Date(2000, 1, 1)];
+
+        vm = createVue({
+          template: '<el-date-picker type="daterange" v-model="value" ref="compo" :default-value="defaultValue" />',
+          data() {
+            return {
+              value: '',
+              defaultValue
+            };
+          }
+        }, true);
+
+        vm.$el.querySelector('input').focus();
+        setTimeout(_ => {
+          const defaultEls = vm.$refs.compo.picker.$el.querySelectorAll('.el-date-table td.default');
+          expect(defaultEls.length).to.equal(2);
+          defaultEls[0].click();
+          setTimeout(_ => {
+            defaultEls[1].click();
+            setTimeout(_ => {
+              expect(vm.value).to.eql(expectValue);
+              done();
+            }, DELAY);
+          }, DELAY);
+        }, DELAY);
+      });
+    });
   });
 
   describe('type:datetimerange', () => {
@@ -632,10 +1851,8 @@ describe('DatePicker', () => {
         type: 'datetimerange',
         value: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)]
       }, true);
-      const input = vm.$el.querySelector('input');
 
-      input.blur();
-      input.focus();
+      vm.$el.click();
 
       setTimeout(done, DELAY);
     });
@@ -646,77 +1863,200 @@ describe('DatePicker', () => {
       expect(Array.prototype.slice.call(vm.picker.$el.querySelectorAll('.el-time-panel'))).to.length(2);
     });
 
-    it('click timepicker', done => {
-      const input = vm.picker.$el.querySelectorAll('.el-date-range-picker__editors-wrap input')[1];
-      input.blur();
-      input.focus();
-      input.blur();
+    it('select daterange', done => {
+      const pickers = vm.picker.$el.querySelectorAll('.el-date-range-picker__content');
+      const leftCell = pickers[0].querySelector('td.available');
+      const rightCell = pickers[1].querySelector('td.available');
 
+      triggerEvent(leftCell, 'mousemove', true);
+      triggerEvent(leftCell, 'click', true);
       setTimeout(_ => {
-        expect(vm.picker.$el.querySelector('.el-date-range-picker__time-picker-wrap .el-time-panel')).to.have.deep.property('style.display').to.equal('');
-        done();
-      }, DELAY);
-    });
+        triggerEvent(rightCell, 'mousemove', true);
+        triggerEvent(rightCell, 'click', true);
 
-    it('click timepicker in right', done => {
-      const input = vm.picker.$el.querySelectorAll('.el-date-range-picker__editors-wrap input')[3];
-      input.blur();
-      input.focus();
-      input.blur();
+        setTimeout(_ => {
+          const {
+            minDate,
+            maxDate
+          } = vm.picker;
+          const minMonth = minDate.getMonth();
+          const maxMonth = maxDate.getMonth();
 
-      setTimeout(_ => {
-        expect(vm.picker.$el.querySelectorAll('.el-date-range-picker__time-picker-wrap .el-time-panel')[1]).to.have.deep.property('style.display').to.equal('');
-        done();
+          expect([1, -11]).to.include(maxMonth - minMonth); // one month
+          done();
+        }, DELAY);
       }, DELAY);
     });
 
-    it('input timepicker', done => {
-      const input = vm.picker.$el.querySelectorAll('.el-date-range-picker__editors-wrap input')[1];
+    it('select daterange with defaultTime min', done => {
+      destroyVM(vm); // nuke beforeEach's vm before creating our own
+      vm = createVue({
+        template: `
+          <el-date-picker ref="compo" type="datetimerange" v-model="value" :default-time="defaultTime"></el-date-picker>
+        `,
+        data() {
+          return {
+            value: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+            defaultTime: ['11:59:59']
+          };
+        }
+      }, true).$refs.compo;
 
-      input.value = '10:22:14';
-      triggerEvent(input, 'change', true);
       setTimeout(_ => {
-        expect(vm.picker.minDate.getHours()).to.equal(10);
-        expect(vm.picker.minDate.getMinutes()).to.equal(22);
-        expect(vm.picker.minDate.getSeconds()).to.equal(14);
-        done();
+        vm.$el.click();
+
+        setTimeout(_ => {
+          const pickers = vm.picker.$el.querySelectorAll('.el-date-range-picker__content');
+          const leftCell = pickers[0].querySelector('td.available');
+          const rightCell = pickers[1].querySelector('td.available');
+
+          const {
+            minDate,
+            maxDate
+          } = vm.picker;
+          expect(minDate.getHours()).to.be.equal(10);
+          expect(minDate.getMinutes()).to.be.equal(10);
+          expect(minDate.getSeconds()).to.be.equal(0);
+          expect(maxDate.getHours()).to.be.equal(10);
+          expect(maxDate.getMinutes()).to.be.equal(10);
+          expect(maxDate.getSeconds()).to.be.equal(0);
+
+          triggerEvent(leftCell, 'mousemove', true);
+          setTimeout(_ => {
+            triggerEvent(leftCell, 'click', true);
+            setTimeout(_ => {
+              triggerEvent(rightCell, 'mousemove', true);
+              setTimeout(_ => {
+                expect(rightCell.classList.contains('in-range')).to.be.true;
+
+                triggerEvent(rightCell, 'click', true);
+                setTimeout(_ => {
+                  const {
+                    minDate,
+                    maxDate
+                  } = vm.picker;
+                  expect(minDate.getHours()).to.be.equal(11);
+                  expect(minDate.getMinutes()).to.be.equal(59);
+                  expect(minDate.getSeconds()).to.be.equal(59);
+                  expect(maxDate.getHours()).to.be.equal(0);
+                  expect(maxDate.getMinutes()).to.be.equal(0);
+                  expect(maxDate.getSeconds()).to.be.equal(0);
+                  done();
+                }, DELAY);
+              }, DELAY);
+            }, DELAY);
+          }, DELAY);
+        }, DELAY);
       }, DELAY);
     });
 
-    it('input timepicker in right', done => {
-      const input = vm.picker.$el.querySelectorAll('.el-date-range-picker__editors-wrap input')[3];
+    it('both picker show correct formated value (extract date-format and time-format from format property)', done => {
+      destroyVM(vm); // nuke beforeEach's vm before creating our own
+      vm = createVue({
+        template: `
+          <el-date-picker ref="compo" type="datetimerange" v-model="value" :format="format"></el-date-picker>
+        `,
+        data() {
+          return {
+            value: [new Date(2018, 8, 5, 10, 20, 30), new Date(2018, 8, 15, 15, 35, 45)],
+            format: 'yyyy/MM/dd hh:mm A'
+          };
+        }
+      }, true);
 
-      input.value = '10:22:14';
-      triggerEvent(input, 'change', true);
       setTimeout(_ => {
-        expect(vm.picker.maxDate.getHours()).to.equal(10);
-        expect(vm.picker.maxDate.getMinutes()).to.equal(22);
-        expect(vm.picker.maxDate.getSeconds()).to.equal(14);
-        done();
+        const compo = vm.$refs.compo;
+        compo.$el.click();
+        setTimeout(_ => {
+          const pickers = compo.picker.$el.querySelectorAll('.el-date-range-picker__time-header .el-date-range-picker__editors-wrap');
+          const left = {
+            dateInput: pickers[0].querySelector('.el-date-range-picker__time-picker-wrap:nth-child(1) input'),
+            timeInput: pickers[0].querySelector('.el-date-range-picker__time-picker-wrap:nth-child(2) input')
+          };
+          const right = {
+            dateInput: pickers[1].querySelector('.el-date-range-picker__time-picker-wrap:nth-child(1) input'),
+            timeInput: pickers[1].querySelector('.el-date-range-picker__time-picker-wrap:nth-child(2) input')
+          };
+          left.timeInput.focus();
+          right.timeInput.focus();
+
+          // all inputs shows correct value
+          expect(left.dateInput.value).to.equal('2018/09/05');
+          expect(left.timeInput.value).to.equal('10:20 AM');
+          expect(right.dateInput.value).to.equal('2018/09/15');
+          expect(right.timeInput.value).to.equal('03:35 PM');
+
+          vm.format = 'd-M-yy HH:mm:ss';
+          setTimeout(_ => {
+            expect(left.dateInput.value).to.equal('5-9-18');
+            expect(left.timeInput.value).to.equal('10:20:30');
+            expect(right.dateInput.value).to.equal('15-9-18');
+            expect(right.timeInput.value).to.equal('15:35:45');
+
+            done();
+          }, DELAY);
+
+        }, DELAY);
       }, DELAY);
     });
 
-    it('select daterange', done => {
-      const pickers = vm.picker.$el.querySelectorAll('.el-date-range-picker__content');
-      const leftCell = pickers[0].querySelector('td.available');
-      const rightCell = pickers[1].querySelector('td.available');
+    it('select daterange with defaultTime min & max', done => {
+      destroyVM(vm); // nuke beforeEach's vm before creating our own
+      vm = createVue({
+        template: `
+          <el-date-picker ref="compo" type="datetimerange" v-model="value" :default-time="defaultTime"></el-date-picker>
+        `,
+        data() {
+          return {
+            value: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+            defaultTime: ['11:59:59', '18:00:00']
+          };
+        }
+      }, true).$refs.compo;
 
-      triggerEvent(leftCell, 'mousemove', true);
-      triggerEvent(leftCell, 'click', true);
       setTimeout(_ => {
-        triggerEvent(rightCell, 'mousemove', true);
-        triggerEvent(rightCell, 'click', true);
+        vm.$el.click();
 
         setTimeout(_ => {
+          const pickers = vm.picker.$el.querySelectorAll('.el-date-range-picker__content');
+          const leftCell = pickers[0].querySelector('td.available');
+          const rightCell = pickers[1].querySelector('td.available');
+
           const {
             minDate,
             maxDate
           } = vm.picker;
-          const minMonth = minDate.getMonth();
-          const maxMonth = maxDate.getMonth();
-
-          expect([1, -11]).to.include(maxMonth - minMonth); // one month
-          done();
+          expect(minDate.getHours()).to.be.equal(10);
+          expect(minDate.getMinutes()).to.be.equal(10);
+          expect(minDate.getSeconds()).to.be.equal(0);
+          expect(maxDate.getHours()).to.be.equal(10);
+          expect(maxDate.getMinutes()).to.be.equal(10);
+          expect(maxDate.getSeconds()).to.be.equal(0);
+
+          triggerEvent(leftCell, 'mousemove', true);
+          setTimeout(_ => {
+            triggerEvent(leftCell, 'click', true);
+            setTimeout(_ => {
+              triggerEvent(rightCell, 'mousemove', true);
+              setTimeout(_ => {
+                expect(rightCell.classList.contains('in-range')).to.be.true;
+                triggerEvent(rightCell, 'click', true);
+                setTimeout(_ => {
+                  const {
+                    minDate,
+                    maxDate
+                  } = vm.picker;
+                  expect(minDate.getHours()).to.be.equal(11);
+                  expect(minDate.getMinutes()).to.be.equal(59);
+                  expect(minDate.getSeconds()).to.be.equal(59);
+                  expect(maxDate.getHours()).to.be.equal(18);
+                  expect(maxDate.getMinutes()).to.be.equal(0);
+                  expect(maxDate.getSeconds()).to.be.equal(0);
+                  done();
+                }, DELAY);
+              }, DELAY);
+            }, DELAY);
+          }, DELAY);
         }, DELAY);
       }, DELAY);
     });
@@ -852,6 +2192,43 @@ describe('DatePicker', () => {
         }, DELAY);
       }, DELAY);
     });
+
+    it('confirm honors disabledDate', done => {
+      vm = createVue({
+        template: '<el-date-picker type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" v-model="value" :picker-options="pickerOptions" ref="compo" />',
+        data() {
+          return {
+            pickerOptions: {
+              disabledDate(date) {
+                return date.getTime() < new Date(2000, 9, 1); // 2000-10-01
+              }
+            },
+            value: ['2000-10-02 00:00:00', '2000-10-03 00:00:00']
+          };
+        }
+      }, true);
+      const input = vm.$el.querySelector('input');
+
+      input.blur();
+      input.focus();
+      setTimeout(_ => {
+        // simulate user input of invalid date
+        vm.$refs.compo.picker.handleDateChange({ target: { value: '2000-09-01'} }, 'min');
+        setTimeout(_ => {
+          expect(vm.$refs.compo.picker.btnDisabled).to.equal(true); // invalid input disables button
+          vm.$refs.compo.picker.handleConfirm();
+          setTimeout(_ => {
+            expect(vm.$refs.compo.pickerVisible).to.equal(true); // can not confirm, picker remains open
+            // simulate click outside to close picker
+            vm.$refs.compo.handleClose();
+            setTimeout(_ => {
+              expect(vm.value).to.eql(['2000-10-02 00:00:00', '2000-10-03 00:00:00']);
+              done();
+            }, DELAY);
+          }, DELAY);
+        }, DELAY);
+      }, DELAY);
+    });
   });
 
   const currentMonth = new Date(new Date().getTime());
@@ -936,16 +2313,6 @@ describe('DatePicker', () => {
       expect(vm.picker.$el.querySelector('.disabled')).to.be.ok;
     });
 
-    it('set disabled value', done => {
-      const date = new Date(1999, 10, 10, 10, 10, 10);
-      vm.picker.value = date;
-
-      setTimeout(_ => {
-        expect(vm.picker.date > date).to.true;
-        done();
-      }, DELAY);
-    });
-
     it('set value', done => {
       const date = new Date(3000, 10, 10, 10, 10, 10);
       vm.picker.value = date;
diff --git a/test/unit/specs/dialog.spec.js b/test/unit/specs/dialog.spec.js
index 93450a47a8..72f3c072a4 100644
--- a/test/unit/specs/dialog.spec.js
+++ b/test/unit/specs/dialog.spec.js
@@ -10,7 +10,7 @@ describe('Dialog', () => {
     vm = createVue({
       template: `
         <div>
-          <el-dialog :title="title" v-model="visible"></el-dialog>
+          <el-dialog :title="title" :visible="visible"></el-dialog>
         </div>
       `,
 
@@ -28,13 +28,13 @@ describe('Dialog', () => {
       expect(dialog.$el.style.display).to.not.equal('none');
       done();
     }, 10);
-  }).timeout(3000);
+  });
 
   it('render correct content', done => {
     vm = createVue({
       template: `
         <div>
-          <el-dialog :title="title" v-model="visible">
+          <el-dialog :title="title" :visible="visible">
             <span>这是一段信息</span>
             <span slot="footer" class="dialog-footer">
               <el-button @click.native="dialogVisible = false">取消</el-button>
@@ -61,11 +61,33 @@ describe('Dialog', () => {
     }, 100);
   });
 
+  it('append to body', done => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-dialog :title="title" append-to-body :visible="visible"></el-dialog>
+        </div>
+      `,
+
+      data() {
+        return {
+          title: 'dialog test',
+          visible: true
+        };
+      }
+    }, true);
+    const dialog = vm.$children[0];
+    setTimeout(() => {
+      expect(dialog.$el.parentNode).to.equal(document.body);
+      done();
+    }, 10);
+  });
+
   it('open and close', done => {
     vm = createVue({
       template: `
         <div>
-          <el-dialog :title="title" v-model="visible">
+          <el-dialog :title="title" :visible.sync="visible">
             <span>这是一段信息</span>
           </el-dialog>
         </div>
@@ -83,11 +105,11 @@ describe('Dialog', () => {
     vm.visible = true;
     setTimeout(() => {
       expect(dialog.$el.style.display).to.not.equal('none');
-      document.querySelector('.v-modal').click();
+      vm.visible = false;
       setTimeout(() => {
-        expect(vm.visible).to.equal(false);
+        expect(dialog.$el.style.display).to.equal('none');
         done();
-      }, 50);
+      }, 400);
     }, 50);
   });
 
@@ -96,7 +118,7 @@ describe('Dialog', () => {
       return createVue(Object.assign({
         template: `
           <div>
-            <el-dialog ${ props } :title="title" v-model="visible">
+            <el-dialog ${ props } :title="title" :visible="visible">
               <span>这是一段信息</span>
             </el-dialog>
           </div>
@@ -111,14 +133,16 @@ describe('Dialog', () => {
       }, options), true);
     };
 
-    it('size', () => {
-      vm = getDialogVm('size="full"');
-      expect(vm.$el.querySelector('.el-dialog').classList.contains('el-dialog--full')).to.true;
+    it('fullscreen', () => {
+      vm = getDialogVm('fullscreen width="40%"');
+      const dialogEl = vm.$el.querySelector('.el-dialog');
+      expect(dialogEl.classList.contains('is-fullscreen')).to.true;
+      expect(dialogEl.style.width).to.be.empty;
     });
 
     it('top', () => {
       vm = getDialogVm('top="100px"');
-      expect(vm.$el.querySelector('.el-dialog').style.top).to.equal('100px');
+      expect(vm.$el.querySelector('.el-dialog').style.marginTop).to.equal('100px');
     });
 
     it('custom-class', () => {
@@ -127,15 +151,17 @@ describe('Dialog', () => {
     });
   });
 
-  it('callbacks', done => {
+  it('events', done => {
     vm = createVue({
       template: `
         <div>
           <el-dialog
             @open="handleOpen"
+            @opened="handleOpened"
             @close="handleClose"
+            @closed="handleClosed"
             :title="title"
-            v-model="visible">
+            :visible.sync="visible">
             <span>这是一段信息</span>
           </el-dialog>
         </div>
@@ -146,28 +172,121 @@ describe('Dialog', () => {
           this.state = 'open';
         },
 
+        handleOpened() {
+          this.animationState = 'opened';
+        },
+
         handleClose() {
-          this.state = 'closed';
+          this.state = 'close';
+        },
+
+        handleClosed() {
+          this.animationState = 'closed';
         }
       },
 
       data() {
         return {
           state: '',
+          animationState: '',
           title: 'dialog test',
           visible: false
         };
       }
     }, true);
-    const dialog = vm.$children[0];
-    dialog.open();
+    vm.visible = true;
     setTimeout(() => {
       expect(vm.state).to.equal('open');
-      dialog.close();
+      expect(vm.animationState).to.equal('opened');
+      vm.visible = false;
       setTimeout(() => {
-        expect(vm.state).to.equal('closed');
+        expect(vm.state).to.equal('close');
+        expect(vm.animationState).to.equal('closed');
         done();
-      }, 50);
+      }, 400);
+    }, 400);
+  });
+  it('click dialog to close', done => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-dialog :title="title" :visible.sync="visible">
+            <span>这是一段信息</span>
+          </el-dialog>
+        </div>
+      `,
+
+      data() {
+        return {
+          title: 'dialog test',
+          visible: true
+        };
+      }
+    }, true);
+    const dialog = vm.$children[0];
+    setTimeout(() => {
+      dialog.$el.click();
+      setTimeout(() => {
+        expect(vm.visible).to.be.false;
+        done();
+      }, 400);
+    }, 50);
+  });
+  it('click header btn', done => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-dialog :title="title" :visible.sync="visible">
+            <span>这是一段信息</span>
+          </el-dialog>
+        </div>
+      `,
+
+      data() {
+        return {
+          title: 'dialog test',
+          visible: true
+        };
+      }
+    }, true);
+    const dialog = vm.$children[0];
+    setTimeout(() => {
+      dialog.$el.querySelector('.el-dialog__headerbtn').click();
+      setTimeout(() => {
+        expect(vm.visible).to.be.false;
+        done();
+      }, 500);
     }, 50);
   });
+  it('before close', done => {
+    const spy = sinon.spy();
+    vm = createVue({
+      template: `
+        <div>
+          <el-dialog :title="title" :visible="visible" :before-close="beforeClose"></el-dialog>
+        </div>
+      `,
+
+      data() {
+        return {
+          title: 'dialog test',
+          visible: true
+        };
+      },
+      methods: {
+        beforeClose(done) {
+          spy();
+          done();
+        }
+      }
+    }, true);
+    const dialog = vm.$children[0];
+    setTimeout(() => {
+      dialog.$el.click();
+      setTimeout(() => {
+        expect(spy.called).to.be.true;
+        done();
+      }, 500);
+    }, 10);
+  });
 });
diff --git a/test/unit/specs/dropdown.spec.js b/test/unit/specs/dropdown.spec.js
index da3141a3c2..b68f8af1d8 100644
--- a/test/unit/specs/dropdown.spec.js
+++ b/test/unit/specs/dropdown.spec.js
@@ -1,4 +1,4 @@
-import { createVue, triggerEvent, destroyVM } from '../util';
+import { createVue, triggerEvent, destroyVM, triggerKeyDown } from '../util';
 
 describe('Dropdown', () => {
   let vm;
@@ -34,7 +34,6 @@ describe('Dropdown', () => {
       triggerEvent(triggerElm, 'mouseleave');
       setTimeout(_ => {
         expect(dropdown.visible).to.not.true;
-        destroyVM(vm);
         done();
       }, 300);
     }, 400);
@@ -75,7 +74,6 @@ describe('Dropdown', () => {
       setTimeout(_ => {
         expect(dropdown.visible).to.not.true;
         expect(callback.calledWith(myCommandObject)).to.be.true;
-        destroyVM(vm);
         done();
       }, 300);
     }, 300);
@@ -104,13 +102,11 @@ describe('Dropdown', () => {
     triggerEvent(triggerElm, 'mouseenter');
     dropdown.$nextTick(_ => {
       expect(dropdown.visible).to.not.true;
-
       triggerElm.click();
-      dropdown.$nextTick(_ => {
+      setTimeout(_ => {
         expect(dropdown.visible).to.be.true;
-        destroyVM(vm);
         done();
-      });
+      }, 300);
     });
   });
   it('split button', done => {
@@ -148,11 +144,10 @@ describe('Dropdown', () => {
       triggerEvent(triggerElm, 'mouseleave');
       setTimeout(_ => {
         expect(dropdown.visible).to.not.true;
-        destroyVM(vm);
         done();
       }, 300);
     }, 300);
-  }).timeout(3000);
+  });
   it('hide on click', done => {
     vm = createVue({
       template: `
@@ -187,4 +182,102 @@ describe('Dropdown', () => {
       }, 300);
     }, 300);
   });
+  it('triggerElm keydown', done => {
+    vm = createVue({
+      template: `
+        <el-dropdown ref="dropdown">
+          <span class="el-dropdown-link">
+            下拉菜单<i class="el-icon-caret-bottom el-icon-right"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown" class="dropdown-test-creat">
+            <el-dropdown-item>黄金糕</el-dropdown-item>
+            <el-dropdown-item>狮子头</el-dropdown-item>
+            <el-dropdown-item>螺蛳粉</el-dropdown-item>
+            <el-dropdown-item>双皮奶</el-dropdown-item>
+            <el-dropdown-item>蚵仔煎</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      `
+    }, true);
+    let dropdown = vm.$refs.dropdown;
+    let dropdownElm = dropdown.$el;
+    let triggerElm = dropdownElm.children[0];
+    triggerKeyDown(triggerElm, 13); // enter
+    setTimeout(() => {
+      expect(dropdown.visible).to.be.true;
+      triggerKeyDown(triggerElm, 27); // esc
+      setTimeout(() => {
+        expect(dropdown.visible).to.be.false;
+        done();
+      }, 300);
+    }, 400);
+  });
+  it('dropdown menu keydown', done => {
+    vm = createVue({
+      template: `
+        <el-dropdown ref="dropdown">
+          <span class="el-dropdown-link">
+            下拉菜单<i class="el-icon-caret-bottom el-icon-right"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown" class="dropdown-test-creat">
+            <el-dropdown-item command="a">黄金糕</el-dropdown-item>
+            <el-dropdown-item command="b">狮子头</el-dropdown-item>
+            <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
+            <el-dropdown-item command="d">双皮奶</el-dropdown-item>
+            <el-dropdown-item command="e">蚵仔煎</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      `
+    }, true);
+    let dropdown = vm.$refs.dropdown;
+    let dropdownElm = dropdown.$el;
+    let triggerElm = dropdownElm.children[0];
+    let dropdownMenu = dropdown.dropdownElm;
+
+    triggerEvent(triggerElm, 'mouseenter');
+
+    setTimeout(() => {
+      expect(dropdown.visible).to.be.true;
+      triggerKeyDown(dropdownMenu, 40); // down
+      setTimeout(() => {
+        triggerKeyDown(dropdownMenu, 13); // enter
+        setTimeout(() => {
+          expect(dropdown.visible).to.be.false;
+          done();
+        }, 100);
+      }, 100);
+    }, 300);
+  });
+  it('updatePopper', done => {
+    vm = createVue({
+      template: `
+        <el-dropdown ref="dropdown">
+          <span class="el-dropdown-link">
+            下拉菜单<i class="el-icon-caret-bottom el-icon-right"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown" class="dropdown-test-creat">
+            <el-dropdown-item>黄金糕</el-dropdown-item>
+            <el-dropdown-item>狮子头</el-dropdown-item>
+            <el-dropdown-item>螺蛳粉</el-dropdown-item>
+            <el-dropdown-item>双皮奶</el-dropdown-item>
+            <el-dropdown-item>蚵仔煎</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      `
+    }, true);
+    let dropdown = vm.$refs.dropdown;
+    let dropdownElm = dropdown.$el;
+    let triggerElm = dropdownElm.children[0];
+
+    triggerEvent(triggerElm, 'mouseenter');
+    setTimeout(() => {
+      const zIndex1 = document.querySelector('.el-dropdown-menu').style.zIndex;
+      dropdown.broadcast('ElDropdownMenu', 'updatePopper');
+      setTimeout(() => {
+        const zIndex2 = document.querySelector('.el-dropdown-menu').style.zIndex;
+        expect(zIndex2 > zIndex1).to.be.true;
+        done();
+      }, 100);
+    }, 300);
+  });
 });
diff --git a/test/unit/specs/form.spec.js b/test/unit/specs/form.spec.js
index 33ca96fac1..68a354d3be 100644
--- a/test/unit/specs/form.spec.js
+++ b/test/unit/specs/form.spec.js
@@ -1,7 +1,23 @@
 import { createVue, destroyVM } from '../util';
 
+const DELAY = 50;
+
 describe('Form', () => {
   let vm;
+  let hasPromise = true;
+  before(() => {
+    if (!window.Promise) {
+      hasPromise = false;
+      window.Promise = require('es6-promise').Promise;
+    }
+  });
+
+  after(() => {
+    if (!hasPromise) {
+      window.Promise = undefined;
+    }
+  });
+
   afterEach(() => {
     destroyVM(vm);
   });
@@ -86,6 +102,27 @@ describe('Form', () => {
     expect(vm.$refs.labelLeft.$el.classList.contains('el-form--label-left')).to.be.true;
     done();
   });
+  it('label size', () => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-form :model="form" size="mini" ref="labelMini">
+            <el-form-item>
+              <el-input v-model="form.name"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+      `,
+      data() {
+        return {
+          form: {
+            name: ''
+          }
+        };
+      }
+    }, true);
+    expect(vm.$refs.labelMini.$el.children[0].classList.contains('el-form-item--mini')).to.be.true;
+  });
   it('show message', done => {
     vm = createVue({
       template: `
@@ -176,6 +213,64 @@ describe('Form', () => {
       done();
     });
   });
+  it('clear validate', done => {
+    vm = createVue({
+      template: `
+        <el-form ref="form" :model="form" :rules="rules">
+          <el-form-item label="活动名称" prop="name">
+            <el-input v-model="form.name"></el-input>
+          </el-form-item>
+          <el-form-item label="活动地址" prop="address">
+            <el-input v-model="form.address"></el-input>
+          </el-form-item>
+          <el-form-item label="活动性质" prop="type">
+            <el-checkbox-group v-model="form.type">
+              <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
+              <el-checkbox label="地推活动" name="type"></el-checkbox>
+              <el-checkbox label="线下主题活动" name="type"></el-checkbox>
+              <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
+            </el-checkbox-group>
+          </el-form-item>
+        </el-form>
+      `,
+      data() {
+        return {
+          form: {
+            name: '',
+            address: '',
+            type: []
+          },
+          rules: {
+            name: [
+              { required: true, message: '请输入活动名称', trigger: 'blur' }
+            ],
+            address: [
+              { required: true, message: '请选择活动区域', trigger: 'change' }
+            ],
+            type: [
+              { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
+            ]
+          }
+        };
+      }
+    }, true);
+    const form = vm.$refs.form;
+    const nameField = form.fields.filter(field => field.prop === 'name')[0];
+    const addressField = form.fields.filter(field => field.prop === 'address')[0];
+    form.validate();
+    vm.$nextTick(() => {
+      expect(nameField.validateMessage).to.equal('请输入活动名称');
+      form.clearValidate(['name']);
+      vm.$nextTick(() => {
+        expect(nameField.validateMessage).to.equal('');
+        form.clearValidate();
+        vm.$nextTick(() => {
+          expect(addressField.validateMessage).to.equal('');
+          done();
+        });
+      });
+    });
+  });
   it('form item nest', done => {
     vm = createVue({
       template: `
@@ -320,7 +415,7 @@ describe('Form', () => {
             <el-form-item label="记住密码" prop="region" ref="field">
               <el-select v-model="form.region" placeholder="请选择活动区域">
                 <el-option label="区域一" value="shanghai"></el-option>
-                <el-option label="区域二" value="beijing"></el-option>
+                <el-option label="区域二" ref="opt" value="beijing"></el-option>
               </el-select>
             </el-form-item>
           </el-form>
@@ -328,7 +423,7 @@ describe('Form', () => {
         data() {
           return {
             form: {
-              region: 'shanghai'
+              region: ''
             },
             rules: {
               region: [
@@ -336,34 +431,37 @@ describe('Form', () => {
               ]
             }
           };
-        },
-        methods: {
-          setValue(value) {
-            this.form.region = value;
-          }
         }
       }, true);
       vm.$refs.form.validate(valid => {
         let field = vm.$refs.field;
-        expect(valid).to.true;
-        vm.setValue('');
+        expect(valid).to.false;
         setTimeout(_ => {
           expect(field.validateMessage).to.equal('请选择活动区域');
-          vm.setValue('shanghai');
-
+          // programatic modification triggers change validation
+          vm.form.region = 'shanghai';
           setTimeout(_ => {
             expect(field.validateMessage).to.equal('');
-            done();
+            vm.form.region = '';
+            setTimeout(_ => {
+              expect(field.validateMessage).to.equal('请选择活动区域');
+              // user modification of bound value triggers change validation
+              vm.$refs.opt.$el.click();
+              setTimeout(_ => {
+                expect(field.validateMessage).to.equal('');
+                done();
+              }, 100);
+            }, 100);
           }, 100);
         }, 100);
       });
-    }).timeout(3000);
+    });
     it('datepicker', done => {
       vm = createVue({
         template: `
           <el-form :model="form" :rules="rules" ref="form">
             <el-form-item label="记住密码" prop="date" ref="field">
-              <el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width: 100%;"></el-date-picker>
+              <el-date-picker type="date" ref="picker" placeholder="选择日期" v-model="form.date" style="width: 100%;"></el-date-picker>
             </el-form-item>
           </el-form>
         `,
@@ -378,26 +476,40 @@ describe('Form', () => {
               ]
             }
           };
-        },
-        methods: {
-          setValue(value) {
-            this.form.date = value;
-          }
         }
       }, true);
       vm.$refs.form.validate(valid => {
         let field = vm.$refs.field;
         expect(valid).to.not.true;
-        vm.$refs.form.$nextTick(_ => {
+        setTimeout(_ => {
           expect(field.validateMessage).to.equal('请选择日期');
-
-          vm.setValue(new Date());
-
-          vm.$refs.form.$nextTick(_ => {
+          // programatic modification triggers change validation
+          vm.form.date = new Date();
+          setTimeout(_ => {
             expect(field.validateMessage).to.equal('');
-            done();
-          });
-        });
+            vm.form.date = '';
+            // user modification triggers change
+            const input = vm.$refs.picker.$el.querySelector('input');
+            input.blur();
+            input.focus();
+            setTimeout(_ => {
+              const keyDown = (el, keyCode) => {
+                const evt = document.createEvent('Events');
+                evt.initEvent('keydown', true, true);
+                evt.keyCode = keyCode;
+                el.dispatchEvent(evt);
+              };
+              keyDown(input, 37);
+              setTimeout(_ => {
+                keyDown(input, 13);
+                setTimeout(_ => {
+                  expect(field.validateMessage).to.equal('');
+                  done();
+                }, DELAY);
+              }, DELAY);
+            }, DELAY);
+          }, DELAY);
+        }, DELAY);
       });
     });
     it('timepicker', done => {
@@ -405,7 +517,7 @@ describe('Form', () => {
         template: `
           <el-form :model="form" :rules="rules" ref="form">
             <el-form-item label="记住密码" prop="date" ref="field">
-              <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date" style="width: 100%;"></el-time-picker>
+              <el-time-picker type="fixed-time" ref="picker" placeholder="选择时间" v-model="form.date" style="width: 100%;"></el-time-picker>
             </el-form-item>
           </el-form>
         `,
@@ -420,19 +532,77 @@ describe('Form', () => {
               ]
             }
           };
+        }
+      }, true);
+      vm.$refs.form.validate(valid => {
+        let field = vm.$refs.field;
+        expect(valid).to.not.true;
+        setTimeout(_ => {
+          expect(field.validateMessage).to.equal('请选择时间');
+          // programatic modification does not trigger change
+          vm.value = new Date();
+          setTimeout(_ => {
+            expect(field.validateMessage).to.equal('请选择时间');
+            vm.value = '';
+            // user modification triggers change
+            const input = vm.$refs.picker.$el.querySelector('input');
+            input.blur();
+            input.focus();
+            setTimeout(_ => {
+              vm.$refs.picker.picker.$el.querySelector('.confirm').click();
+              setTimeout(_ => {
+                expect(field.validateMessage).to.equal('');
+                done();
+              }, DELAY);
+            }, DELAY);
+          }, DELAY);
+        }, DELAY);
+      });
+    });
+    it('checkbox', done => {
+      vm = createVue({
+        template: `
+          <el-form :model="form" :rules="rules" ref="form">
+            <el-form-item label="是否接受协议" prop="accept" ref="field">
+              <el-checkbox v-model="form.accept">
+                <span>接受协议</span>
+              </el-checkbox>
+            </el-form-item>
+          </el-form>
+        `,
+        data() {
+          return {
+            form: {
+              accept: true
+            },
+            rules: {
+              accept: [
+                {
+                  validator: (rule, value, callback) => {
+                    value ? callback() : callback(new Error('您需要接受用户协议'));
+                  },
+                  trigger: 'change'
+                }
+              ]
+            }
+          };
         },
         methods: {
           setValue(value) {
-            this.form.date = value;
+            this.form.accept = value;
           }
         }
       }, true);
+      vm.form.accept = false;
+      vm.$nextTick(_ => {
+        expect(vm.$refs.field.validateMessage).to.equal('您需要接受用户协议');
+      });
       vm.$refs.form.validate(valid => {
         let field = vm.$refs.field;
         expect(valid).to.not.true;
+        expect(field.validateMessage).to.equal('您需要接受用户协议');
         vm.$refs.form.$nextTick(_ => {
-          expect(field.validateMessage).to.equal('请选择时间');
-          vm.setValue(new Date());
+          vm.setValue(true);
 
           vm.$refs.form.$nextTick(_ => {
             expect(field.validateMessage).to.equal('');
@@ -651,5 +821,136 @@ describe('Form', () => {
         });
       });
     });
+    it('invalid fields', done => {
+      var checkName = (rule, value, callback) => {
+        if (value.length < 5) {
+          callback(new Error('长度至少为5'));
+        } else {
+          callback();
+        }
+      };
+      vm = createVue({
+        template: `
+          <el-form :model="form" :rules="rules" ref="form">
+            <el-form-item label="活动名称" prop="name" ref="field">
+              <el-input v-model="form.name"></el-input>
+            </el-form-item>
+          </el-form>
+        `,
+        data() {
+          return {
+            form: {
+              name: ''
+            },
+            rules: {
+              name: [
+                { validator: checkName, trigger: 'change' }
+              ]
+            }
+          };
+        }
+      }, true);
+      vm.$refs.form.validate((valid, invalidFields) => {
+        expect(invalidFields.name.length).to.equal(1);
+        done();
+      });
+    });
+    it('validate return promise', done => {
+      var checkName = (rule, value, callback) => {
+        if (value.length < 5) {
+          callback(new Error('长度至少为5'));
+        } else {
+          callback();
+        }
+      };
+      vm = createVue({
+        template: `
+          <el-form :model="form" :rules="rules" ref="form">
+            <el-form-item label="活动名称" prop="name" ref="field">
+              <el-input v-model="form.name"></el-input>
+            </el-form-item>
+          </el-form>
+        `,
+        data() {
+          return {
+            form: {
+              name: ''
+            },
+            rules: {
+              name: [
+                { validator: checkName, trigger: 'change' }
+              ]
+            }
+          };
+        }
+      }, true);
+      vm.$refs.form.validate().catch(validFailed => {
+        expect(validFailed).to.false;
+        done();
+      });
+    });
+  });
+  it('validate event', done => {
+    vm = createVue({
+      template: `
+          <el-form :model="form" :rules="rules" ref="form" @validate="onValidate">
+            <el-form-item label="活动名称" prop="name" ref="name">
+              <el-input v-model="form.name"></el-input>
+            </el-form-item>
+            <el-form-item label="活动地点" prop="addr" ref="addr">
+              <el-input v-model="form.addr"></el-input>
+            </el-form-item>
+          </el-form>
+        `,
+      data() {
+        return {
+          form: {
+            name: '',
+            addr: ''
+          },
+          valid: {
+            name: null,
+            addr: null
+          },
+          error: {
+            name: null,
+            addr: null
+          },
+          rules: {
+            name: [
+              { required: true, message: '请输入活动名称', trigger: 'change', min: 3, max: 6 }
+            ],
+            addr: [
+              { required: true, message: '请输入活动名称', trigger: 'change' }
+            ]
+          }
+        };
+      },
+      methods: {
+        onValidate(prop, valid, msg) {
+          this.valid[prop] = valid;
+          this.error[prop] = msg;
+        },
+        setValue(prop, value) {
+          this.form[prop] = value;
+        }
+      }
+    }, true);
+    vm.setValue('name', '1');
+    setTimeout(() => {
+      expect(vm.valid.name).to.equal(false);
+      expect(vm.error.name).to.equal('请输入活动名称');
+      vm.setValue('addr', '1');
+      setTimeout(() => {
+        expect(vm.valid.addr).to.equal(true);
+        expect(vm.error.addr).to.equal(null);
+        vm.setValue('name', '111');
+        setTimeout(() => {
+          expect(vm.valid.name).to.equal(true);
+          expect(vm.error.name).to.equal(null);
+          done();
+        }, DELAY);
+      }, DELAY);
+    }, DELAY);
   });
 });
diff --git a/test/unit/specs/input-number.spec.js b/test/unit/specs/input-number.spec.js
index 9435e8a022..4ba16be1e6 100644
--- a/test/unit/specs/input-number.spec.js
+++ b/test/unit/specs/input-number.spec.js
@@ -1,5 +1,7 @@
 import { createVue, triggerEvent, triggerClick, destroyVM } from '../util';
 
+const DELAY = 1;
+
 describe('InputNumber', () => {
   let vm;
   afterEach(() => {
@@ -218,6 +220,51 @@ describe('InputNumber', () => {
       done();
     });
   });
+  describe('precision', () => {
+    it('precision is 2', () => {
+      vm = createVue({
+        template: `
+          <el-input-number v-model="value" :max="8" :precision="2">
+          </el-input-number>
+        `,
+        data() {
+          return {
+            value: 6.999
+          };
+        }
+      }, true);
+      expect(vm.value === 7);
+      expect(vm.$el.querySelector('input').value).to.be.equal('7.00');
+    });
+
+    it('precision greater than the precision of step', done => {
+      vm = createVue({
+        template: `
+          <el-input-number v-model="value" :max="8" :precision="0" :step="0.1">
+          </el-input-number>
+        `,
+        data() {
+          return {
+            value: 6.999
+          };
+        }
+      }, true);
+      const input = vm.$el.querySelector('input');
+      const btnIncrease = vm.$el.querySelector('.el-input-number__increase');
+
+      expect(vm.value === 7);
+      expect(input.value).to.be.equal('7');
+
+      triggerEvent(btnIncrease, 'mousedown');
+      triggerClick(document, 'mouseup');
+
+      vm.$nextTick(_ => {
+        expect(vm.value).to.be.equal(7);
+        expect(input.value).to.be.equal('7');
+        done();
+      });
+    });
+  });
   it('controls', () => {
     vm = createVue({
       template: `
@@ -263,29 +310,89 @@ describe('InputNumber', () => {
       });
     });
   });
-  it('event:change', done => {
+  describe('event:change', () => {
+    let spy;
+
+    beforeEach(() => {
+      vm = createVue({
+        template: `
+          <el-input-number v-model="value" ref="compo" :min='2' :max='3' :step='1'>
+          </el-input-number>
+        `,
+        data() {
+          return {
+            value: 2
+          };
+        }
+      }, true);
+      spy = sinon.spy();
+      vm.$refs.compo.$on('change', spy);
+    });
+
+    it('emit on input', done => {
+      vm.$refs.compo.handleInputChange('3');
+      setTimeout(_ => {
+        expect(spy.calledOnce).to.be.true;
+        expect(spy.args[0][0]).to.equal(3);
+        done();
+      }, DELAY);
+    });
+
+    it('emit on button', done => {
+      const btnIncrease = vm.$el.querySelector('.el-input-number__increase');
+      triggerEvent(btnIncrease, 'mousedown');
+      triggerClick(document, 'mouseup');
+      setTimeout(_ => {
+        expect(spy.calledOnce).to.be.true;
+        expect(spy.args[0][0]).to.equal(3);
+        done();
+      }, DELAY);
+    });
+
+    it('does not emit on programatic change', done => {
+      vm.value = 3;
+      setTimeout(_ => {
+        expect(spy.notCalled).to.be.true;
+        done();
+      }, DELAY);
+    });
+  });
+  it('event:focus & blur', done => {
     vm = createVue({
       template: `
-        <el-input-number v-model="value" ref="input">
+        <el-input-number ref="input">
         </el-input-number>
-      `,
-      data() {
-        return {
-          value: 1.5
-        };
-      }
+      `
     }, true);
 
-    let btnIncrease = vm.$el.querySelector('.el-input-number__increase');
-    const spy = sinon.spy();
+    const spyFocus = sinon.spy();
+    const spyBlur = sinon.spy();
 
-    vm.$refs.input.$on('change', spy);
+    vm.$refs.input.$on('focus', spyFocus);
+    vm.$refs.input.$on('blur', spyBlur);
+    vm.$el.querySelector('input').focus();
+    vm.$el.querySelector('input').blur();
 
-    triggerEvent(btnIncrease, 'mousedown');
-    triggerClick(document, 'mouseup');
+    vm.$nextTick(_ => {
+      expect(spyFocus.calledOnce).to.be.true;
+      expect(spyBlur.calledOnce).to.be.true;
+      done();
+    });
+  });
+  it('focus', done => {
+    vm = createVue({
+      template: `
+        <el-input-number ref="input"></el-input-number>
+      `
+    }, true);
+
+    const spy = sinon.spy();
+
+    vm.$refs.input.$on('focus', spy);
+    vm.$refs.input.focus();
 
     vm.$nextTick(_ => {
-      expect(spy.withArgs(2.5, 1.5).calledOnce).to.be.true;
+      expect(spy.calledOnce).to.be.true;
       done();
     });
   });
diff --git a/test/unit/specs/input.spec.js b/test/unit/specs/input.spec.js
index 5cc1bcf415..ddb8fd361a 100644
--- a/test/unit/specs/input.spec.js
+++ b/test/unit/specs/input.spec.js
@@ -47,30 +47,24 @@ describe('Input', () => {
     expect(vm.$el.querySelector('input').getAttribute('disabled')).to.ok;
   });
 
-  it('icon', () => {
+  it('suffixIcon', () => {
     vm = createVue({
       template: `
-        <el-input
-          icon="time"
-          @click="handleIconClick"
-        >
-        </el-input>
-      `,
-      data() {
-        return {
-          iconClicked: false
-        };
-      },
-      methods: {
-        handleIconClick(ev) {
-          this.iconClicked = true;
-        }
-      }
+        <el-input suffix-icon="time"></el-input>
+      `
     }, true);
     var icon = vm.$el.querySelector('.el-input__icon');
-    icon.click();
-    expect(icon.classList.contains('el-icon-time')).to.true;
-    expect(vm.iconClicked).to.true;
+    expect(icon).to.be.exist;
+  });
+
+  it('prefixIcon', () => {
+    vm = createVue({
+      template: `
+        <el-input prefix-icon="time"></el-input>
+      `
+    }, true);
+    var icon = vm.$el.querySelector('.el-input__icon');
+    expect(icon).to.be.exist;
   });
 
   it('size', () => {
@@ -167,6 +161,52 @@ describe('Input', () => {
     }, 200);
   });
 
+  it('focus', done => {
+    vm = createVue({
+      template: `
+        <el-input ref="input">
+        </el-input>
+      `
+    }, true);
+
+    const spy = sinon.spy();
+
+    vm.$refs.input.$on('focus', spy);
+    vm.$refs.input.focus();
+
+    vm.$nextTick(_ => {
+      expect(spy.calledOnce).to.be.true;
+      done();
+    });
+  });
+
+  it('Input contains Select and append slot', (done) => {
+    vm = createVue({
+      template: `
+      <el-input v-model="value" clearable class="input-with-select" ref="input">
+        <el-select v-model="select" slot="prepend" placeholder="请选择">
+          <el-option label="餐厅名" value="1"></el-option>
+          <el-option label="订单号" value="2"></el-option>
+          <el-option label="用户电话" value="3"></el-option>
+        </el-select>
+        <el-button slot="append" icon="el-icon-search"></el-button>
+      </el-input>
+      `,
+      data() {
+        return {
+          value: '1234'
+        };
+      }
+    }, true);
+    vm.$refs.input.hovering = true;
+    setTimeout(() => {
+      const suffixEl = document.querySelector('.input-with-select > .el-input__suffix');
+      expect(suffixEl).to.not.be.null;
+      expect(suffixEl.style.transform).to.not.be.empty;
+      done();
+    }, 20);
+  });
+
   describe('Input Events', () => {
     it('event:focus & blur', done => {
       vm = createVue({
@@ -194,6 +234,7 @@ describe('Input', () => {
       });
     });
     it('event:change', done => {
+      // NOTE: should be same as native's change behavior
       vm = createVue({
         template: `
           <el-input
@@ -209,14 +250,54 @@ describe('Input', () => {
         }
       }, true);
 
+      const inputElm = vm.$el.querySelector('input');
+      const simulateEvent = (text, event) => {
+        inputElm.value = text;
+        inputElm.dispatchEvent(new Event(event));
+      };
+
       const spy = sinon.spy();
       vm.$refs.input.$on('change', spy);
-      vm.input = 'b';
 
+      // simplified test, component should emit change when native does
+      simulateEvent('1', 'input');
+      simulateEvent('2', 'change');
       vm.$nextTick(_ => {
-        expect(spy.withArgs('b').calledOnce).to.be.false;
+        expect(spy.calledWith('2')).to.be.true;
+        expect(spy.calledOnce).to.be.true;
         done();
       });
     });
+    it('event:clear', done => {
+      vm = createVue({
+        template: `
+          <el-input
+            ref="input"
+            placeholder="请输入内容"
+            clearable
+            :value="input">
+          </el-input>
+        `,
+        data() {
+          return {
+            input: 'a'
+          };
+        }
+      }, true);
+
+      const spyClear = sinon.spy();
+      const inputElm = vm.$el.querySelector('input');
+
+      // focus to show clear button
+      inputElm.focus();
+      vm.$refs.input.$on('clear', spyClear);
+      vm.$nextTick(_ => {
+        vm.$el.querySelector('.el-input__clear').click();
+        vm.$nextTick(_ => {
+          expect(spyClear.calledOnce).to.be.true;
+          done();
+        });
+      });
+    });
   });
 });
diff --git a/test/unit/specs/loading.spec.js b/test/unit/specs/loading.spec.js
index ab71c65d6d..cceede7cd4 100644
--- a/test/unit/specs/loading.spec.js
+++ b/test/unit/specs/loading.spec.js
@@ -1,3 +1,4 @@
+import { getStyle } from '../../../src/utils/dom';
 import { createVue, destroyVM } from '../util';
 import Vue from 'vue';
 import LoadingRaw from 'packages/loading';
@@ -142,7 +143,7 @@ describe('Loading', () => {
         }
       }, true);
       Vue.nextTick(() => {
-        expect(document.body.style.overflow).to.equal('hidden');
+        expect(getStyle(document.body, 'overflow')).to.equal('hidden');
         vm.loading = false;
         document.body.removeChild(document.querySelector('.el-loading-mask'));
         document.body.removeChild(vm.$el);
@@ -170,6 +171,25 @@ describe('Loading', () => {
         done();
       });
     });
+
+    it('customClass', done => {
+      vm = createVue({
+        template: `
+        <div v-loading="loading" element-loading-custom-class="loading-custom-class"></div>
+      `,
+
+        data() {
+          return {
+            loading: true
+          };
+        }
+      }, true);
+      Vue.nextTick(() => {
+        const mask = document.querySelector('.el-loading-mask');
+        expect(mask.classList.contains('loading-custom-class')).to.true;
+        done();
+      });
+    });
   });
 
   describe('as a service', () => {
@@ -184,7 +204,7 @@ describe('Loading', () => {
       expect(loadingInstance.visible).to.false;
     });
 
-    it('target', () => {
+    it('target', done => {
       vm = createVue({
         template: `
         <div class="loading-container"></div>
@@ -192,8 +212,14 @@ describe('Loading', () => {
       }, true);
       loadingInstance = Loading({ target: '.loading-container' });
       let mask = document.querySelector('.el-loading-mask');
+      let container = document.querySelector('.loading-container');
       expect(mask).to.exist;
-      expect(mask.parentNode).to.equal(document.querySelector('.loading-container'));
+      expect(mask.parentNode).to.equal(container);
+      loadingInstance.close();
+      setTimeout(() => {
+        expect(getStyle(container, 'position')).to.equal('relative');
+        done();
+      }, 200);
     });
 
     it('body', () => {
@@ -237,7 +263,7 @@ describe('Loading', () => {
 
     it('lock', () => {
       loadingInstance = Loading({ lock: true });
-      expect(document.body.style.overflow).to.equal('hidden');
+      expect(getStyle(document.body, 'overflow')).to.equal('hidden');
     });
 
     it('text', () => {
@@ -246,5 +272,11 @@ describe('Loading', () => {
       expect(text).to.exist;
       expect(text.textContent).to.equal('Loading...');
     });
+
+    it('customClass', () => {
+      loadingInstance = Loading({ customClass: 'el-loading-custom-class' });
+      const customClass = document.querySelector('.el-loading-custom-class');
+      expect(customClass).to.exist;
+    });
   });
 });
diff --git a/test/unit/specs/menu.spec.js b/test/unit/specs/menu.spec.js
index 8c403bb0ee..e670ff5aa1 100644
--- a/test/unit/specs/menu.spec.js
+++ b/test/unit/specs/menu.spec.js
@@ -18,14 +18,36 @@ describe('Menu', () => {
     var item1 = vm.$refs.item1;
     var item2 = vm.$refs.item2;
     item1.$el.click();
-    vm.$nextTick(_ => {
+    setTimeout(_ => {
       expect(item1.$el.classList.contains('is-active')).to.be.true;
       item2.$el.click();
-      vm.$nextTick(_ => {
+      setTimeout(_ => {
         expect(item2.$el.classList.contains('is-active')).to.be.true;
         done();
-      });
-    });
+      }, 20);
+    }, 20);
+  });
+  it('background-color', done => {
+    vm = createVue({
+      template: `
+        <el-menu default-active="2"
+          background-color="#f00"
+          text-color="#000"
+          active-text-color="#0f0">
+          <el-menu-item index="1" ref="item1">处理中心</el-menu-item>
+          <el-menu-item index="2" ref="item2">订单管理</el-menu-item>
+        </el-menu>
+      `
+    }, true);
+    expect(vm.$el.style.backgroundColor).to.equal('rgb(255, 0, 0)');
+    expect(vm.$refs.item1.$el.style.backgroundColor).to.equal('rgb(255, 0, 0)');
+    expect(vm.$refs.item1.$el.style.color).to.equal('rgb(0, 0, 0)');
+    expect(vm.$refs.item2.$el.style.color).to.equal('rgb(0, 255, 0)');
+    triggerEvent(vm.$refs.item1.$el, 'mouseenter');
+    setTimeout(_ => {
+      expect(vm.$refs.item1.$el.style.backgroundColor).to.equal('rgb(204, 0, 0)');
+      done();
+    }, 20);
   });
   it('menu-item click', done => {
     vm = createVue({
@@ -50,12 +72,28 @@ describe('Menu', () => {
     var item1 = vm.$refs.item1;
     item1.$el.click();
 
-    vm.$nextTick(_ => {
+    setTimeout(_ => {
       expect(vm.clicksCount).to.be.equal(1);
       done();
-    });
+    }, 20);
 
   });
+  it('menu-item disabled', done => {
+    vm = createVue({
+      template: `
+        <el-menu default-active="2">
+          <el-menu-item index="1" ref="item1" disabled>处理中心</el-menu-item>
+          <el-menu-item index="2" ref="item2">订单管理</el-menu-item>
+        </el-menu>
+      `
+    }, true);
+    expect(vm.$refs.item2.$el.classList.contains('is-active')).to.be.true;
+    vm.$refs.item1.$el.click();
+    setTimeout(_ => {
+      expect(vm.$refs.item1.$el.classList.contains('is-active')).to.be.false;
+      done();
+    }, 20);
+  });
   describe('default active', () => {
     it('normal active', done => {
       vm = createVue({
@@ -68,10 +106,10 @@ describe('Menu', () => {
       }, true);
       expect(vm.$refs.item2.$el.classList.contains('is-active')).to.be.true;
       vm.$refs.item1.$el.click();
-      vm.$nextTick(_ => {
+      setTimeout(_ => {
         expect(vm.$refs.item1.$el.classList.contains('is-active')).to.be.true;
         done();
-      });
+      }, 20);
     });
     it('dynamic active', done => {
       vm = createVue({
@@ -89,10 +127,10 @@ describe('Menu', () => {
       }, true);
       setTimeout(_ => {
         vm.active = '1';
-        vm.$nextTick(_ => {
+        setTimeout(_ => {
           expect(vm.$refs.item1.$el.classList.contains('is-active')).to.be.true;
           done();
-        });
+        }, 20);
       }, 100);
     });
     it('vertical submenu item active', done => {
@@ -114,11 +152,11 @@ describe('Menu', () => {
       }, true);
       expect(vm.$refs.submenuItem2.$el.classList.contains('is-active')).to.be.true;
 
-      vm.$nextTick(_ => {
+      setTimeout(_ => {
         expect(vm.$refs.submenu.$el.classList.contains('is-opened')).to.be.true;
         expect(vm.$refs.submenu.$el.classList.contains('is-active')).to.be.true;
         done();
-      });
+      }, 20);
     });
     it('horizontal submenu item active', done => {
       vm = createVue({
@@ -139,15 +177,14 @@ describe('Menu', () => {
       }, true);
       expect(vm.$refs.submenuItem2.$el.classList.contains('is-active')).to.be.true;
 
-      vm.$nextTick(_ => {
+      setTimeout(_ => {
         expect(vm.$refs.submenu.$el.classList.contains('is-opened')).to.be.true;
         expect(vm.$refs.submenu.$el.classList.contains('is-active')).to.be.true;
         done();
-      });
+      }, 20);
     });
   });
   describe('submenu', function() {
-    this.timeout(3000);
     it('toggle', done => {
       vm = createVue({
         template: `
@@ -170,23 +207,23 @@ describe('Menu', () => {
       var submenuItem2 = vm.$refs.submenuItem2;
       var submenu = vm.$refs.submenu;
       submenu.$el.querySelector('.el-submenu__title').click();
-      vm.$nextTick(_ => {
+      setTimeout(_ => {
         expect(submenu.$el.classList.contains('is-opened')).to.be.true;
         submenuItem2.$el.click();
-        vm.$nextTick(_ => {
+        setTimeout(_ => {
           expect(submenuItem2.$el.classList.contains('is-active')).to.be.true;
           submenu.$el.querySelector('.el-submenu__title').click();
-          vm.$nextTick(_ => {
+          setTimeout(_ => {
             expect(submenu.$el.classList.contains('is-opened')).to.not.true;
             done();
-          });
-        });
-      });
+          }, 20);
+        }, 20);
+      }, 20);
     });
     it('default opened', done => {
       vm = createVue({
         template: `
-          <el-menu theme="dark" :default-openeds="defaultOpeneds">
+          <el-menu :default-openeds="defaultOpeneds">
             <el-menu-item index="1">default opened处理中心</el-menu-item>
             <el-submenu index="2" ref="submenu1">
               <template slot="title">default opened我的工作台</template>
@@ -211,32 +248,39 @@ describe('Menu', () => {
       expect(vm.$refs.submenu1.$el.classList.contains('is-opened')).to.be.true;
       expect(vm.$refs.submenu2.$el.classList.contains('is-opened')).to.be.true;
       vm.defaultOpeneds = ['2'];
-      vm.$nextTick(_ => {
+      setTimeout(_ => {
         expect(vm.$refs.submenu1.$el.classList.contains('is-opened')).to.be.true;
         expect(vm.$refs.submenu2.$el.classList.contains('is-opened')).to.not.true;
         done();
-      });
+      }, 20);
+    });
+    it('disabled', done => {
+      vm = createVue({
+        template: `
+          <el-menu>
+            <el-menu-item index="1" ref="item1">处理中心</el-menu-item>
+            <el-submenu index="2" ref="submenu" disabled>
+              <template slot="title">我的工作台</template>
+              <el-menu-item index="2-1">选项1</el-menu-item>
+              <el-menu-item index="2-2" ref="submenuItem2">选项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>
+        `
+      }, true);
+      var submenu = vm.$refs.submenu;
+      submenu.$el.querySelector('.el-submenu__title').click();
+      setTimeout(_ => {
+        expect(submenu.$el.classList.contains('is-opened')).to.be.false;
+        done();
+      }, 20);
     });
-  });
-  it('theme', () => {
-    vm = createVue({
-      template: `
-        <el-menu theme="dark">
-          <el-menu-item index="1" ref="item1">处理中心</el-menu-item>
-          <el-menu-item index="3">订单管理</el-menu-item>
-        </el-menu>
-      `,
-      data() {
-        return {
-        };
-      }
-    }, true);
-    expect(vm.$el.classList.contains('el-menu--dark')).to.be.true;
   });
   it('unique-opened', done => {
     vm = createVue({
       template: `
-        <el-menu theme="dark" unique-opened default-active="2-2">
+        <el-menu unique-opened default-active="2-2">
           <el-menu-item index="1">处理中心</el-menu-item>
           <el-submenu index="2" ref="submenu1">
             <template slot="title">我的工作台</template>
@@ -258,10 +302,10 @@ describe('Menu', () => {
       }
     }, true);
     vm.$refs.submenu2.$el.querySelector('.el-submenu__title').click();
-    vm.$nextTick(_ => {
+    setTimeout(_ => {
       expect(vm.$refs.submenu1.$el.classList.contains('is-opened')).to.not.true;
       done();
-    });
+    }, 20);
   });
   it('horizontal mode', done => {
     vm = createVue({
@@ -286,8 +330,7 @@ describe('Menu', () => {
     var submenu = vm.$refs.submenu;
     triggerEvent(submenu.$el, 'mouseenter');
     setTimeout(_ => {
-      expect(submenu.$el.querySelector('.el-menu').style.display).to.not.ok;
-      triggerEvent(submenu.$el, 'mouseleave');
+      expect(document.body.querySelector('.el-menu--popup').parentElement.style.display).to.not.ok;
       done();
     }, 500);
   });
@@ -318,15 +361,15 @@ describe('Menu', () => {
     triggerElm.click();
 
     setTimeout(_ => {
-      expect(submenu.$el.querySelector('.el-menu').style.display).to.not.ok;
+      expect(document.body.querySelector('.el-menu--popup').parentElement.style.display).to.not.ok;
       triggerElm.click();
       setTimeout(_ => {
-        expect(submenu.$el.querySelector('.el-menu').style.display).to.be.equal('none');
+        expect(document.body.querySelector('.el-menu--popup').parentElement.style.display).to.be.equal('none');
         done();
       }, 1000);
     }, 500);
   });
-  it('menu group', done => {
+  it('menu group', () => {
     vm = createVue({
       template: `
         <el-menu mode="vertical" default-active="1">
@@ -345,6 +388,37 @@ describe('Menu', () => {
       `
     }, true);
     expect(vm.$refs.group1.$el.querySelector('.el-menu-item-group__title').innerText).to.be.equal('分组一');
-    done();
+  });
+  it('dynamic menus, issue 9092', done => {
+    vm = createVue({
+      template: `
+          <el-menu :default-active="active">
+            <el-menu-item
+              v-for="menu in menus"
+              :index="menu.name"
+              :key="menu.name">
+              {{menu.description}}
+            </el-menu-item>
+          </el-menu>
+        `,
+      data() {
+        return {
+          active: '',
+          menus: []
+        };
+      }
+    }, true);
+    setTimeout(_ => {
+      vm.active = '2';
+      vm.menus = [
+        {name: '1', description: 'happy'},
+        {name: '2', description: 'new'},
+        {name: '3', description: 'year'}
+      ];
+      setTimeout(_ => {
+        expect(vm.$el.querySelector('.el-menu-item.is-active').innerText).to.equal('new');
+        done();
+      }, 20);
+    }, 100);
   });
 });
diff --git a/test/unit/specs/message-box.spec.js b/test/unit/specs/message-box.spec.js
index 3635643145..b2ec5a6273 100644
--- a/test/unit/specs/message-box.spec.js
+++ b/test/unit/specs/message-box.spec.js
@@ -50,6 +50,50 @@ describe('MessageBox', () => {
     }, 300);
   });
 
+  it('custom icon', done => {
+    MessageBox({
+      type: 'warning',
+      iconClass: 'el-icon-question',
+      message: '这是一段内容'
+    });
+    setTimeout(() => {
+      const icon = document.querySelector('.el-message-box__status');
+      expect(icon.classList.contains('el-icon-question')).to.true;
+      done();
+    }, 300);
+  });
+
+  it('html string', done => {
+    MessageBox({
+      title: 'html string',
+      dangerouslyUseHTMLString: true,
+      message: '<strong>html string</strong>'
+    });
+    setTimeout(() => {
+      const message = document.querySelector('.el-message-box__message strong');
+      expect(message.textContent).to.equal('html string');
+      done();
+    }, 300);
+  });
+
+  it('distinguish cancel and close', done => {
+    let msgAction = '';
+    MessageBox({
+      title: '消息',
+      message: '这是一段内容',
+      distinguishCancelAndClose: true
+    }, action => {
+      msgAction = action;
+    });
+    setTimeout(() => {
+      document.querySelector('.el-message-box__close').click();
+      setTimeout(() => {
+        expect(msgAction).to.equal('close');
+        done();
+      }, 10);
+    }, 10);
+  });
+
   it('alert', done => {
     MessageBox.alert('这是一段内容', {
       title: '标题名称',
@@ -86,15 +130,30 @@ describe('MessageBox', () => {
       inputErrorMessage: 'validation failed'
     });
     setTimeout(() => {
-      expect(document.querySelector('.el-message-box__input')).to.exist;
       const messageBox = document.querySelector('.el-message-box__wrapper').__vue__.$parent;
+      expect(messageBox.$el.querySelector('.el-message-box__input')).to.exist;
+      const haveFocus = messageBox.$el.querySelector('input').isSameNode(document.activeElement);
+      expect(haveFocus).to.true;
       messageBox.inputValue = 'no';
       setTimeout(() => {
-        expect(document.querySelector('.el-message-box__errormsg')
+        expect(messageBox.$el.querySelector('.el-message-box__errormsg')
           .textContent).to.equal('validation failed');
         done();
       }, 100);
-    }, 200);
+    }, 700);
+  });
+
+  it('prompt: focus on textarea', done => {
+    MessageBox.prompt('这是一段内容', {
+      inputType: 'textarea',
+      title: '标题名称'
+    });
+    setTimeout(() => {
+      const messageBox = document.querySelector('.el-message-box__wrapper').__vue__.$parent;
+      const haveFocus = messageBox.$el.querySelector('textarea').isSameNode(document.activeElement);
+      expect(haveFocus).to.true;
+      done();
+    }, 700);
   });
 
   describe('custom validator', () => {
@@ -151,9 +210,11 @@ describe('MessageBox', () => {
     });
     setTimeout(() => {
       document.querySelector('.el-message-box__close').click();
-      expect(msgAction).to.equal('cancel');
-      done();
-    }, 50);
+      setTimeout(() => {
+        expect(msgAction).to.equal('cancel');
+        done();
+      }, 10);
+    }, 10);
   });
 
   it('beforeClose', done => {
diff --git a/test/unit/specs/message.spec.js b/test/unit/specs/message.spec.js
index 65be7e1422..69e37f4b9f 100644
--- a/test/unit/specs/message.spec.js
+++ b/test/unit/specs/message.spec.js
@@ -18,7 +18,7 @@ describe('Message', () => {
       message: '灰风',
       duration: 500
     });
-    const message = document.querySelector('.el-message__group p');
+    const message = document.querySelector('.el-message__content');
     expect(document.querySelector('.el-message')).to.exist;
     expect(message.textContent).to.equal('灰风');
     setTimeout(() => {
@@ -41,6 +41,27 @@ describe('Message', () => {
     }, 500);
   });
 
+  it('custom icon', done => {
+    Message({
+      message: '夏天',
+      iconClass: 'el-icon-close'
+    });
+    setTimeout(() => {
+      const icon = document.querySelector('.el-message i');
+      expect(icon.classList.contains('el-icon-close')).to.true;
+      done();
+    }, 500);
+  });
+
+  it('html string', () => {
+    Message({
+      message: '<strong>夏天</strong>',
+      dangerouslyUseHTMLString: true
+    });
+    const message = document.querySelector('.el-message strong');
+    expect(message.textContent).to.equal('夏天');
+  });
+
   it('close all', done => {
     Message({
       message: '夏天',
@@ -69,6 +90,15 @@ describe('Message', () => {
     expect(document.querySelector('.el-message').__vue__.type).to.equal('success');
   });
 
+  it('center', () => {
+    Message({
+      message: '夏天',
+      center: true,
+      duration: 0
+    });
+    expect(document.querySelector('.el-message').classList.contains('is-center')).to.true;
+  });
+
   it('reset timer', done => {
     Message({
       message: '白灵',
diff --git a/test/unit/specs/mixin.vue-popup.spec.js b/test/unit/specs/mixin.vue-popup.spec.js
index e1dfce1ddf..5e11d5dac7 100644
--- a/test/unit/specs/mixin.vue-popup.spec.js
+++ b/test/unit/specs/mixin.vue-popup.spec.js
@@ -49,13 +49,13 @@ describe('Mixin:vue-popup', () => {
   it('lock scroll', done => {
     vm = createTest(Popup, { modal: true });
     vm.open();
-    expect(document.body.style.overflow).to.equal('hidden');
+    expect(document.body.classList.contains('el-popup-parent--hidden')).to.be.true;
     vm.close();
     destroyVM(vm);
     setTimeout(() => {
       vm = createTest(Popup, { modal: true, lockScroll: false });
       vm.open();
-      expect(document.body.style.overflow).to.not.equal('hidden');
+      expect(document.body.classList.contains('el-popup-parent--hidden')).to.be.false;
       done();
     }, 200);
   });
diff --git a/test/unit/specs/notification.spec.js b/test/unit/specs/notification.spec.js
index 7f07a2a779..1a4306c467 100644
--- a/test/unit/specs/notification.spec.js
+++ b/test/unit/specs/notification.spec.js
@@ -47,12 +47,23 @@ describe('Notification', () => {
     });
     const group = document.querySelector('.el-notification__group');
     const title = group.querySelector('.el-notification__title');
-    const message = group.querySelector('.el-notification__content');
+    const message = group.querySelector('.el-notification__content p');
     expect(document.querySelector('.el-notification')).to.exist;
     expect(title.textContent).to.equal('狮子');
     expect(message.textContent).to.equal('狮鹫');
   });
 
+  it('html string as message', () => {
+    Notification({
+      title: '狮子',
+      message: '<strong>狮鹫</strong>',
+      dangerouslyUseHTMLString: true,
+      duration: 0
+    });
+    const message = document.querySelector('.el-notification__content strong');
+    expect(message.textContent).to.equal('狮鹫');
+  });
+
   it('create by vnode', () => {
     const fakeVM = new Vue();
     const h = fakeVM.$createElement;
@@ -96,4 +107,15 @@ describe('Notification', () => {
       }, 700);
     }, 500);
   });
+
+  it('no close button', done => {
+    Notification({
+      message: 'Hello',
+      showClose: false
+    });
+    setTimeout(() => {
+      expect(document.querySelector('.el-notification__closeBtn')).to.not.exist;
+      done();
+    }, 500);
+  });
 });
diff --git a/test/unit/specs/pagination.spec.js b/test/unit/specs/pagination.spec.js
index f2a121f604..8858f87194 100644
--- a/test/unit/specs/pagination.spec.js
+++ b/test/unit/specs/pagination.spec.js
@@ -82,6 +82,16 @@ describe('Pagination', () => {
     expect(vm.$el.querySelectorAll('li.number')).to.length(4);
   });
 
+  it('pageSize: NaN', () => {
+    vm = createTest(Pagination, {
+      pageSize: NaN,
+      total: 100
+    });
+
+    const pagers = vm.$el.querySelectorAll('li.number');
+    expect(pagers).to.length(7);
+  });
+
   it('pageCount', () => {
     const vm = createTest(Pagination, {
       pageSize: 25,
@@ -91,6 +101,16 @@ describe('Pagination', () => {
     expect(vm.$el.querySelectorAll('li.number')).to.length(4);
   });
 
+  it('pagerCount', () => {
+    const vm = createTest(Pagination, {
+      pageSize: 25,
+      total: 1000,
+      pagerCount: 21
+    });
+
+    expect(vm.$el.querySelectorAll('li.number')).to.length(21);
+  });
+
   it('will work without total & page-count', (done) => {
     const vm = createTest(Pagination, {
       pageSize: 25,
@@ -119,6 +139,17 @@ describe('Pagination', () => {
     expect(vm.$el.querySelector('li.number.active')).to.have.property('textContent').to.equal('3');
   });
 
+  it('currentPage: NaN', () => {
+    vm = createTest(Pagination, {
+      pageSize: 20,
+      total: 200,
+      currentPage: NaN
+    });
+
+    expect(vm.$el.querySelector('li.number.active')).to.have.property('textContent').to.equal('1');
+    expect(vm.$el.querySelectorAll('li.number')).to.length(7);
+  });
+
   it('set currentPage & total', (done) => {
     vm = createVue({
       template: `
@@ -194,6 +225,7 @@ describe('Pagination', () => {
         <el-pagination
           @current-change="handleChange"
           :page-size="10"
+          layout="pager, jumper"
           :total="100" />
       `,
 
@@ -204,27 +236,42 @@ describe('Pagination', () => {
       },
 
       data() {
-        return { page: 1 };
+        return {
+          page: 1,
+          inputer: null
+        };
+      },
+
+      mounted() {
+        this.inputer = this.$children[0].$children[1].$children[0];
       }
     }, true);
-    const input = vm.$el.querySelector('.el-pagination__jump input');
-
-    input.focus();
-    input.value = -1;
-    triggerEvent(input, 'change');
+    const input = vm.inputer;
+    const changeValue = (value) => {
+      input.$emit('input', value);
+      input.setCurrentValue(value);
+      input.$emit('change', value);
+    };
+
+    changeValue(1);
     setTimeout(() => {
-      expect(vm.page).to.equal(1);
-
-      input.value = 10000;
-      triggerEvent(input, 'change');
+      expect(input.value).to.equal(1);
+      // 多次输入不在min-max区间内的数字
+      changeValue(0);
       setTimeout(() => {
-        expect(vm.page).to.equal(10);
-
-        input.value = '我好帅';
-        triggerEvent(input, 'change');
+        expect(input.value).to.equal(1);
+        changeValue(0);
         setTimeout(() => {
-          expect(vm.page).to.equal(1);
-          done();
+          expect(input.value).to.equal(1);
+          changeValue(1000);
+          setTimeout(() => {
+            expect(input.value).to.equal(10);
+            changeValue(1000);
+            setTimeout(() => {
+              expect(input.value).to.equal(10);
+              done();
+            }, 50);
+          }, 50);
         }, 50);
       }, 50);
     }, 50);
@@ -259,6 +306,38 @@ describe('Pagination', () => {
     }, 50);
   });
 
+  it('event:current-change after current page is manually updated', (done) => {
+    vm = createVue({
+      template: `
+        <el-pagination
+          :total="15"
+          :current-page.sync="currentPage"
+          @current-change="emitCount++" />
+      `,
+
+      data() {
+        return {
+          emitCount: 0,
+          currentPage: 1
+        };
+      }
+    });
+    const next = vm.$el.querySelector('button.btn-next');
+    next.click();
+    setTimeout(() => {
+      expect(vm.emitCount).to.equal(1);
+      vm.currentPage = 1;
+      setTimeout(() => {
+        expect(vm.emitCount).to.equal(1);
+        next.click();
+        setTimeout(() => {
+          expect(vm.emitCount).to.equal(2);
+          done();
+        }, 50);
+      }, 50);
+    }, 50);
+  });
+
   it('event:size-change', done => {
     vm = createVue({
       template: `
@@ -285,6 +364,34 @@ describe('Pagination', () => {
     }, 50);
   });
 
+  it('event: prev and next click', done => {
+    vm = createVue({
+      template: `
+        <el-pagination
+          :total="100"
+          layout="sizes, prev, pager, next"
+          @prev-click="trigger = true"
+          @next-click="trigger = true"
+          :pageSize="10" />
+      `,
+
+      data() {
+        return { trigger: false };
+      }
+    }, true);
+    const prev = vm.$el.querySelector('.btn-prev');
+    const next = vm.$el.querySelector('.btn-next');
+    prev.click();
+    setTimeout(_ => {
+      expect(vm.trigger).to.false;
+      next.click();
+      setTimeout(_ => {
+        expect(vm.trigger).to.true;
+        done();
+      }, 50);
+    }, 50);
+  });
+
   it('pageSize > total', () => {
     vm = createVue({
       template: `
diff --git a/test/unit/specs/popover.spec.js b/test/unit/specs/popover.spec.js
index 6b1e8c2148..b0df25ff0b 100644
--- a/test/unit/specs/popover.spec.js
+++ b/test/unit/specs/popover.spec.js
@@ -205,57 +205,46 @@ describe('Popover', () => {
     });
   });
 
-  describe('event', (done) => {
-    const createVM = (trigger) => {
-      return createVue({
-        template: `
-          <div>
-            <el-popover
-              ref="popover"
-              trigger="${trigger}"
-              @show="handleShow"
-              @hide="handleHide"
-              content="content">
-              <button slot="reference">trigger ${trigger}</button>
-            </el-popover>
-          </div>
-        `,
+  it('show/hide events', done => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-popover
+            ref="popover"
+            trigger="click"
+            @show="handleShow"
+            @hide="handleHide"
+            content="content">
+            <button slot="reference">trigger</button>
+          </el-popover>
+        </div>
+      `,
 
-        methods: {
-          handleShow() {
-            this.trigger = true;
-          },
-          handleHide() {
-            this.trigger = false;
-          }
+      methods: {
+        handleShow() {
+          this.trigger = true;
         },
-
-        data() {
-          return {
-            trigger: false
-          };
+        handleHide() {
+          this.trigger = false;
         }
-      }, true);
-    };
+      },
 
-    it('show/hide', () => {
-      vm = createVM('click');
-      const compo = vm.$refs.popover;
+      data() {
+        return {
+          trigger: false
+        };
+      }
+    }, true);
 
-      vm.$el.querySelector('button').click();
-      expect(compo.showPopper).to.true;
-      expect(vm.trigger).to.false;
+    vm.$el.querySelector('button').click();
+    setTimeout(_ => {
+      expect(vm.trigger).to.true;
       document.body.click();
-      expect(compo.showPopper).to.false;
       setTimeout(_ => {
-        expect(vm.trigger).to.true;
-        document.body.click();
-        setTimeout(_ => {
-          expect(vm.trigger).to.false;
-        }, 50);
+        expect(vm.trigger).to.false;
         done();
       }, 50);
-    });
+    }, 50);
   });
 
   it('destroy event', () => {
diff --git a/test/unit/specs/progress.spec.js b/test/unit/specs/progress.spec.js
index 4b9b0ccf91..3bb3f25b14 100644
--- a/test/unit/specs/progress.spec.js
+++ b/test/unit/specs/progress.spec.js
@@ -39,7 +39,7 @@ describe('Progress', () => {
     expect(vm.$refs.lineSuccess.$el.classList.contains('is-success')).to.be.true;
     expect(vm.$refs.lineSuccess.$el.querySelector('.el-progress__text .el-icon-circle-check')).to.be.exist;
     expect(vm.$refs.lineException.$el.classList.contains('is-exception')).to.be.true;
-    expect(vm.$refs.lineException.$el.querySelector('.el-progress__text .el-icon-circle-cross')).to.be.exist;
+    expect(vm.$refs.lineException.$el.querySelector('.el-progress__text .el-icon-circle-close')).to.be.exist;
 
     expect(vm.$refs.circleSuccess.$el.classList.contains('is-success')).to.be.true;
     expect(vm.$refs.circleSuccess.$el.querySelector('.el-progress__text .el-icon-check')).to.be.exist;
@@ -87,4 +87,20 @@ describe('Progress', () => {
     expect(vm.$el.querySelector('.el-progress-circle').style.height).to.be.equal('120px');
     expect(vm.$el.querySelector('.el-progress-circle').style.width).to.be.equal('120px');
   });
+  it('should work with stroke-width', () => {
+    vm = createVue({
+      template: `
+        <el-progress :text-inside="true" :stroke-width="36" :percentage="0"></el-progress>
+      `
+    }, true);
+    expect(vm.$el.querySelector('.el-progress-bar__innerText').offsetTop).to.be.equal(12);
+  });
+  it('color', () => {
+    vm = createVue({
+      template: `
+      <el-progress :percentage="50" color="rgb(0, 0, 0)"></el-progress>
+      `
+    }, true);
+    expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(0, 0, 0)');
+  });
 });
diff --git a/test/unit/specs/radio.spec.js b/test/unit/specs/radio.spec.js
index c242cec16f..5d8fa3751e 100644
--- a/test/unit/specs/radio.spec.js
+++ b/test/unit/specs/radio.spec.js
@@ -1,4 +1,4 @@
-import { createVue, destroyVM } from '../util';
+import { createVue, destroyVM, triggerKeyDown } from '../util';
 
 describe('Radio', () => {
   let vm;
@@ -21,10 +21,10 @@ describe('Radio', () => {
     let radioElm = vm.$el;
     expect(radioElm.classList.contains('el-radio')).to.be.true;
     radioElm.click();
-    vm.$nextTick(_ => {
+    setTimeout(_ => {
       expect(radioElm.querySelector('.is-checked')).to.be.ok;
       done();
-    });
+    }, 10);
   });
   it('disabled', done => {
     vm = createVue({
@@ -44,11 +44,87 @@ describe('Radio', () => {
     }, true);
     let radioElm = vm.$el;
     radioElm.click();
-    vm.$nextTick(_ => {
+    setTimeout(_ => {
       expect(vm.radio === '').to.be.true;
       expect(radioElm.querySelector('.is-disabled')).to.be.ok;
       done();
-    });
+    }, 10);
+  });
+  it('border', () => {
+    vm = createVue({
+      template: `
+        <el-radio
+          v-model="radio"
+          label="3"
+          border
+        >
+        </el-radio>
+      `,
+      data() {
+        return {
+          radio: ''
+        };
+      }
+    }, true);
+    let radioElm = vm.$el;
+    expect(radioElm.classList.contains('is-bordered')).to.be.true;
+  });
+  it('change event', done => {
+    vm = createVue({
+      template: `
+        <el-radio
+          v-model="radio"
+          label="3"
+          @change="handleChange"
+        >
+        </el-radio>
+      `,
+      data() {
+        return {
+          radio: '',
+          data: ''
+        };
+      },
+      methods: {
+        handleChange(val) {
+          this.data = val;
+        }
+      }
+    }, true);
+    let radioElm = vm.$el;
+    radioElm.click();
+    setTimeout(_ => {
+      expect(vm.data).to.equal('3');
+      done();
+    }, 10);
+  });
+  it('change event only triggers on user input', done => {
+    vm = createVue({
+      template: `
+        <el-radio
+          v-model="radio"
+          label="3"
+          @change="handleChange"
+        >
+        </el-radio>
+      `,
+      data() {
+        return {
+          radio: '',
+          data: ''
+        };
+      },
+      methods: {
+        handleChange(val) {
+          this.data = val;
+        }
+      }
+    }, true);
+    vm.radio = '3';
+    setTimeout(_ => {
+      expect(vm.data).to.equal('');
+      done();
+    }, 10);
   });
   describe('Radio group', () => {
     it('create', done => {
@@ -70,11 +146,11 @@ describe('Radio', () => {
         expect(vm.$refs.radio1.$el.querySelector('.is-checked')).to.be.ok;
         let radioElm = vm.$refs.radio2.$el;
         radioElm.click();
-        vm.$nextTick(_ => {
+        setTimeout(_ => {
           expect(radioElm.querySelector('.is-checked')).to.be.ok;
           expect(vm.radio === 6).to.be.true;
           done();
-        });
+        }, 10);
       }, 50);
     });
     it('disabled', done => {
@@ -93,14 +169,69 @@ describe('Radio', () => {
         }
       }, true);
       let radio2 = vm.$refs.radio2;
-      expect(vm.$el.querySelectorAll('.is-disabled').length).to.be.equal(3);
+      expect(vm.$el.querySelectorAll('label.is-disabled').length).to.be.equal(3);
       expect(vm.$refs.radio1.$el.querySelector('.is-checked')).to.be.exist;
       radio2.$el.click();
-      vm.$nextTick(_ => {
+      setTimeout(_ => {
         expect(vm.radio === 3).to.be.true;
         expect(vm.$refs.radio1.$el.querySelector('.is-checked')).to.be.exist;
         done();
-      });
+      }, 10);
+    });
+    it('change event', done => {
+      vm = createVue({
+        template: `
+          <el-radio-group v-model="radio" @change="onChange">
+            <el-radio :label="3">备选项</el-radio>
+            <el-radio :label="6" ref="radio2">备选项</el-radio>
+            <el-radio :label="9">备选项</el-radio>
+          </el-radio-group>
+        `,
+        methods: {
+          onChange(val) {
+            this.data = val;
+          }
+        },
+        data() {
+          return {
+            radio: 3,
+            data: 0
+          };
+        }
+      }, true);
+      let radio2 = vm.$refs.radio2;
+      radio2.$el.click();
+      setTimeout(_ => {
+        expect(vm.data).to.equal(6);
+        done();
+      }, 10);
+    });
+    it('change event only triggers on user input', done => {
+      vm = createVue({
+        template: `
+          <el-radio-group v-model="radio" @change="onChange">
+            <el-radio :label="3">备选项</el-radio>
+            <el-radio :label="6">备选项</el-radio>
+            <el-radio :label="9">备选项</el-radio>
+          </el-radio-group>
+        `,
+        methods: {
+          onChange(val) {
+            this.data = val;
+          }
+        },
+        data() {
+          return {
+            radio: 3,
+            data: 0
+          };
+        }
+      }, true);
+      vm.radio = 6;
+      setTimeout(_ => {
+        expect(vm.data).to.equal(0);
+        done();
+      }, 10);
     });
     it('disabled when children is radio button', done => {
       vm = createVue({
@@ -121,10 +252,50 @@ describe('Radio', () => {
       expect(vm.$el.querySelectorAll('.is-disabled').length).to.be.equal(3);
       expect(vm.$refs.radio1.$el.classList.contains('is-active')).to.be.true;
       radio2.$el.click();
-      vm.$nextTick(_ => {
+      setTimeout(_ => {
         expect(vm.radio === 3).to.be.true;
         expect(vm.$refs.radio1.$el.classList.contains('is-active')).to.be.true;
         done();
+      }, 10);
+    });
+    it('keyboard event', done => {
+      vm = createVue({
+        template: `
+          <el-radio-group v-model="radio">
+            <el-radio-button ref="radio1" :label="3">备选项</el-radio-button>
+            <el-radio-button ref="radio2" :label="6">备选项</el-radio-button>
+            <el-radio-button ref="radio3" :label="9">备选项</el-radio-button>
+          </el-radio-group>
+        `,
+        data() {
+          return {
+            radio: 6
+          };
+        }
+      }, true);
+
+      expect(vm.radio).to.be.equal(6);
+      vm.$nextTick(() => {
+        triggerKeyDown(vm.$refs.radio2.$el, 37);
+        expect(vm.radio).to.be.equal(3);
+
+        triggerKeyDown(vm.$refs.radio1.$el, 37);
+        expect(vm.radio).to.be.equal(9);
+
+        vm.$nextTick(() => {
+          triggerKeyDown(vm.$refs.radio3.$el, 39);
+          expect(vm.radio).to.be.equal(3);
+
+          triggerKeyDown(vm.$refs.radio1.$el, 39);
+          expect(vm.radio).to.be.equal(6);
+
+          vm.$nextTick(() => {
+            triggerKeyDown(vm.$refs.radio1.$el, 13);
+            expect(vm.radio).to.be.equal(6);
+
+            done();
+          });
+        });
       });
     });
     describe('Radio Button', () => {
@@ -146,11 +317,11 @@ describe('Radio', () => {
         expect(vm.$refs.radio1.$el.classList.contains('is-active')).to.be.true;
         let radio = vm.$refs.radio2;
         radio.$el.click();
-        vm.$nextTick(_ => {
+        setTimeout(_ => {
           expect(radio.$el.classList.contains('is-active')).to.be.true;
           expect(vm.radio === 6).to.be.true;
           done();
-        });
+        }, 10);
       });
       it('custom color', done => {
         vm = createVue({
@@ -167,12 +338,67 @@ describe('Radio', () => {
             };
           }
         }, true);
-        vm.$nextTick(_ => {
+        setTimeout(_ => {
           expect(vm.$refs.radio1.activeStyle.backgroundColor).to.equal('#000');
           expect(vm.$refs.radio1.activeStyle.borderColor).to.equal('#000');
           expect(vm.$refs.radio1.activeStyle.color).to.equal('#ff0');
           done();
-        });
+        }, 10);
+      });
+      it('change event', done => {
+        vm = createVue({
+          template: `
+            <el-radio-group v-model="radio" @change="onChange">
+              <el-radio-button :label="3">备选项</el-radio-button>
+              <el-radio-button :label="6" ref="radio2">备选项</el-radio-button>
+              <el-radio-button :label="9">备选项</el-radio-button>
+            </el-radio-group>
+          `,
+          methods: {
+            onChange(val) {
+              this.data = val;
+            }
+          },
+          data() {
+            return {
+              data: 0,
+              radio: 3
+            };
+          }
+        }, true);
+        let radio = vm.$refs.radio2;
+        radio.$el.click();
+        setTimeout(_ => {
+          expect(vm.data).to.equal(6);
+          done();
+        }, 10);
+      });
+      it('change event only triggers on user input', done => {
+        vm = createVue({
+          template: `
+            <el-radio-group v-model="radio" @change="onChange">
+              <el-radio-button :label="3">备选项</el-radio-button>
+              <el-radio-button :label="6" ref="radio2">备选项</el-radio-button>
+              <el-radio-button :label="9">备选项</el-radio-button>
+            </el-radio-group>
+          `,
+          methods: {
+            onChange(val) {
+              this.data = val;
+            }
+          },
+          data() {
+            return {
+              data: 0,
+              radio: 3
+            };
+          }
+        }, true);
+        vm.radio = 6;
+        setTimeout(_ => {
+          expect(vm.data).to.equal(0);
+          done();
+        }, 10);
       });
       it('size', done => {
         vm = createVue({
@@ -189,10 +415,10 @@ describe('Radio', () => {
             };
           }
         }, true);
-        vm.$nextTick(_ => {
+        setTimeout(_ => {
           expect(vm.$el.querySelectorAll('.el-radio-button--large').length).to.be.equal(3);
           done();
-        });
+        }, 10);
       });
     });
   });
diff --git a/test/unit/specs/rate.spec.js b/test/unit/specs/rate.spec.js
index 5d5de5a543..c98932c5f5 100644
--- a/test/unit/specs/rate.spec.js
+++ b/test/unit/specs/rate.spec.js
@@ -95,6 +95,40 @@ describe('Rate', () => {
     expect(thirdIcon.style.color).to.equal('rgb(255, 153, 0)');
   });
 
+  it('colors are updated after prop is changed', done => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-rate v-model="value" :colors="colors"></el-rate>
+        </div>
+      `,
+
+      computed: {
+        colors() {
+          if (this.muted) {
+            return ['#999', '#999', '#999'];
+          } else {
+            return ['#99A9BF', '#F7BA2A', '#FF9900'];
+          }
+        }
+      },
+      data() {
+        return {
+          value: 4,
+          muted: false
+        };
+      }
+    }, true);
+    setTimeout(() => {
+      vm.muted = true;
+      vm.$nextTick(() => {
+        const thirdIcon = vm.$el.querySelectorAll('.el-rate__item')[2].querySelector('.el-rate__icon');
+        expect(thirdIcon.style.color).to.equal('rgb(153, 153, 153)');
+        done();
+      });
+    }, 10);
+  });
+
   it('threshold', () => {
     vm = createVue({
       template: `
diff --git a/test/unit/specs/select.spec.js b/test/unit/specs/select.spec.js
index 3464a943d8..b9ec39cd2a 100644
--- a/test/unit/specs/select.spec.js
+++ b/test/unit/specs/select.spec.js
@@ -3,7 +3,7 @@ import Select from 'packages/select';
 
 describe('Select', () => {
   const getSelectVm = (configs = {}, options) => {
-    ['multiple', 'clearable', 'filterable', 'allowCreate', 'remote'].forEach(config => {
+    ['multiple', 'clearable', 'filterable', 'allowCreate', 'remote', 'collapseTags', 'automaticDropdown'].forEach(config => {
       configs[config] = configs[config] || false;
     });
     configs.multipleLimit = configs.multipleLimit || 0;
@@ -34,17 +34,20 @@ describe('Select', () => {
       template: `
         <div>
           <el-select
+            ref="select"
             v-model="value"
             :multiple="multiple"
             :multiple-limit="multipleLimit"
             :popper-class="popperClass"
             :clearable="clearable"
             :filterable="filterable"
+            :collapse-tags="collapseTags"
             :allow-create="allowCreate"
             :filterMethod="filterMethod"
             :remote="remote"
             :loading="loading"
-            :remoteMethod="remoteMethod">
+            :remoteMethod="remoteMethod"
+            :automatic-dropdown="automaticDropdown">
             <el-option
               v-for="item in options"
               :label="item.label"
@@ -63,8 +66,10 @@ describe('Select', () => {
           multipleLimit: configs.multipleLimit,
           clearable: configs.clearable,
           filterable: configs.filterable,
+          collapseTags: configs.collapseTags,
           allowCreate: configs.allowCreate,
           popperClass: configs.popperClass,
+          automaticDropdown: configs.automaticDropdown,
           loading: false,
           filterMethod: configs.filterMethod && configs.filterMethod(this),
           remote: configs.remote,
@@ -140,7 +145,6 @@ describe('Select', () => {
   });
 
   it('single select', done => {
-    sinon.stub(window.console, 'log');
     vm = createVue({
       template: `
         <div>
@@ -174,13 +178,14 @@ describe('Select', () => {
             value: '选项5',
             label: '北京烤鸭'
           }],
-          value: ''
+          value: '',
+          count: 0
         };
       },
 
       methods: {
         handleChange() {
-          console.log('changed');
+          this.count++;
         }
       }
     }, true);
@@ -190,12 +195,12 @@ describe('Select', () => {
     options[2].click();
     setTimeout(() => {
       expect(vm.value).to.equal('选项3');
-      expect(window.console.log.callCount).to.equal(1);
+      expect(vm.count).to.equal(1);
+      triggerEvent(options[2], 'mouseenter');
       options[4].click();
       setTimeout(() => {
         expect(vm.value).to.equal('选项5');
-        expect(window.console.log.callCount).to.equal(2);
-        window.console.log.restore();
+        expect(vm.count).to.equal(2);
         done();
       }, 100);
     }, 100);
@@ -280,9 +285,9 @@ describe('Select', () => {
     vm.value = '选项1';
     select.inputHovering = true;
     setTimeout(() => {
-      const icon = vm.$el.querySelector('.el-input__icon');
-      expect(icon.classList.contains('el-icon-circle-close')).to.true;
-      icon.click();
+      const iconClear = vm.$el.querySelector('.el-input__icon.el-icon-circle-close');
+      expect(iconClear).to.exist;
+      iconClear.click();
       expect(vm.value).to.equal('');
       done();
     }, 100);
@@ -326,6 +331,32 @@ describe('Select', () => {
     }, 100);
   });
 
+  it('prefixed icon', () => {
+    vm = createTest({
+      template: `
+        <div>
+          <el-select v-model="value">
+            <el-option
+              v-for="item in options"
+              :label="item.label"
+              :key="item.value"
+              :value="item.value">
+            </el-option>
+            <i slot="prefix" class="el-input__icon el-icon-search"></i>
+          </el-select>
+        </div>
+      `,
+
+      data() {
+        return {
+          options: [],
+          value: ''
+        };
+      }
+    });
+    expect(vm.$el.querySelector('.el-input__icon').classList.contains('el-icon-search')).to.be.true;
+  });
+
   it('custom el-option template', () => {
     vm = createVue({
       template: `
@@ -437,7 +468,7 @@ describe('Select', () => {
     };
     vm = getSelectVm({ filterable: true, filterMethod });
     const select = vm.$children[0];
-    select.$el.querySelector('input').focus();
+    select.$el.click();
     setTimeout(() => {
       select.selectedLabel = '面';
       select.onInputChange();
@@ -460,7 +491,7 @@ describe('Select', () => {
             <el-option
               v-for="item in options"
               :label="item"
-              :key="item.value"
+              :key="item"
               :value="item"
             />
           </el-select>
@@ -471,32 +502,19 @@ describe('Select', () => {
           options: ['1', '2', '3', '4', '5'],
           value: ''
         };
-      },
-      methods: {
-        filterMethod(query) {
-          // simulate async filterMethod / remoteMethod
-          setTimeout(() => {
-            this.options.filter(option => option.label.indexOf(query) !== -1);
-          }, 5);
-        }
       }
     }, true);
 
     const select = vm.$children[0];
     setTimeout(() => {
-      select.$el.querySelector('input').focus();
+      select.$el.click();
       select.query = '3';
-      select.selectedLabel = '3';
+      select.handleQueryChange('3');
+      select.selectOption();
       setTimeout(() => {
-        const enterKey = document.createEvent('Events');
-        enterKey.initEvent('keydown', true, true);
-        enterKey.keyCode = 13;
-        select.$el.querySelector('input').dispatchEvent(enterKey);
-        setTimeout(() => {
-          expect(select.value).to.equal('3');
-          done();
-        }, 10);
-      }, 10);  // wait for async filterMethod
+        expect(select.value).to.equal('3');
+        done();
+      }, 10);
     }, 10);
   });
 
@@ -585,20 +603,22 @@ describe('Select', () => {
         }
       }
     }, true);
-    const tagCloseIcons = vm.$el.querySelectorAll('.el-tag__close');
     expect(vm.value.length).to.equal(2);
-    tagCloseIcons[1].click();
     setTimeout(() => {
-      expect(vm.value.length).to.equal(1);
-      expect(window.console.log.callCount).to.equal(1);
-      tagCloseIcons[0].click();
+      const tagCloseIcons = vm.$el.querySelectorAll('.el-tag__close');
+      tagCloseIcons[1].click();
       setTimeout(() => {
-        expect(vm.value.length).to.equal(0);
-        expect(window.console.log.callCount).to.equal(2);
-        window.console.log.restore();
-        done();
-      }, 100);
-    }, 100);
+        expect(vm.value.length).to.equal(1);
+        expect(window.console.log.callCount).to.equal(1);
+        tagCloseIcons[0].click();
+        setTimeout(() => {
+          expect(vm.value.length).to.equal(0);
+          expect(window.console.log.callCount).to.equal(2);
+          window.console.log.restore();
+          done();
+        }, 50);
+      }, 50);
+    }, 50);
   });
 
   it('multiple limit', done => {
@@ -634,11 +654,11 @@ describe('Select', () => {
       remoteMethod
     });
     const select = vm.$children[0];
+    select.handleQueryChange('');
     vm.$nextTick(() => {
-      select.query = '面';
+      select.handleQueryChange('面');
       setTimeout(() => {
         expect(select.filteredOptionsCount).to.equal(1);
-        select.query = '';
         select.options[0].$el.click();
         vm.$nextTick(() => {
           expect(vm.value[0]).to.equal('选项4');
@@ -653,4 +673,159 @@ describe('Select', () => {
       }, 250);
     });
   });
+
+  it('event:focus & blur', done => {
+    vm = createVue({
+      template: `
+        <el-select ref="select"></el-select>
+      `
+    }, true);
+
+    const spyFocus = sinon.spy();
+    const spyBlur = sinon.spy();
+
+    vm.$refs.select.$on('focus', spyFocus);
+    vm.$refs.select.$on('blur', spyBlur);
+    vm.$el.querySelector('input').focus();
+    vm.$el.querySelector('input').blur();
+
+    setTimeout(_ => {
+      expect(spyFocus.calledOnce).to.be.true;
+      expect(spyBlur.calledOnce).to.be.true;
+      done();
+    }, 100);
+  });
+
+  it('should return focus to input inside select after option select', done => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-select v-model="value" ref="select">
+            <el-option label="1" :value="1" />
+          </el-select>
+        </div>
+      `,
+      data() {
+        return {
+          value: ''
+        };
+      }
+    }, true);
+
+    const spyInputFocus = sinon.spy();
+    const spySelectFocus = sinon.spy();
+
+    vm.$refs.select.$on('focus', spySelectFocus);
+    vm.$refs.select.$refs.reference.$on('focus', spyInputFocus);
+
+    const option = vm.$el.querySelectorAll('.el-select-dropdown__item')[0];
+    triggerEvent(option, 'mouseenter');
+    option.click();
+
+    vm.$nextTick(_ => {
+      expect(spyInputFocus.calledOnce).to.be.true;
+      expect(spySelectFocus.calledOnce).not.to.be.true;
+      done();
+    });
+  });
+
+  it('should not open popper when automatic-dropdown not set', done => {
+    vm = getSelectVm();
+
+    vm.$refs.select.$refs.reference.$refs.input.focus();
+
+    vm.$nextTick(_ => {
+      expect(vm.$refs.select.visible).to.be.false;
+      done();
+    });
+  });
+
+  it('should open popper when automatic-dropdown is set', done => {
+    vm = getSelectVm({ automaticDropdown: true });
+
+    vm.$refs.select.$refs.reference.$refs.input.focus();
+
+    vm.$nextTick(_ => {
+      expect(vm.$refs.select.visible).to.be.true;
+      done();
+    });
+  });
+
+  it('focus', done => {
+    vm = createVue({
+      template: `
+        <el-select ref="select"></el-select>
+      `
+    }, true);
+    const spy = sinon.spy();
+
+    vm.$refs.select.$on('focus', spy);
+    vm.$refs.select.focus();
+
+    vm.$nextTick(_ => {
+      expect(spy.calledOnce).to.be.true;
+      done();
+    });
+  });
+
+  it('only emit change on user input', done => {
+    let callCount = 0;
+    vm = createVue({
+      template: `
+        <div>
+          <el-select v-model="value" @change="change" ref="select">
+            <el-option label="1" :value="1" />
+            <el-option label="2" :value="2" />
+            <el-option label="3" :value="3" />
+          </el-select>
+        </div>
+      `,
+      data() {
+        return {
+          value: 1,
+          change: () => ++callCount
+        };
+      }
+    });
+
+    vm.value = 2;
+    setTimeout(() => {
+      expect(callCount).to.equal(0);
+      const options = vm.$el.querySelectorAll('.el-select-dropdown__item');
+      triggerEvent(options[2], 'mouseenter');
+      options[2].click();
+      setTimeout(() => {
+        expect(callCount).to.equal(1);
+        done();
+      }, 10);
+    }, 10);
+  });
+
+  describe('resetInputHeight', () => {
+    const getSelectComponentVm = (configs) => {
+      vm = getSelectVm(configs || {});
+      return vm.$refs.select;
+    };
+
+    it('should reset height if collapse-tags option is disabled', () => {
+      const select = getSelectComponentVm();
+      sinon.stub(select, '$nextTick');
+      select.resetInputHeight();
+      expect(select.$nextTick.callCount).to.equal(1);
+    });
+
+    it('should not reset height if collapse-tags option is enabled', () => {
+      const select = getSelectComponentVm({ collapseTags: true });
+      sinon.stub(select, '$nextTick');
+      select.resetInputHeight();
+      expect(select.$nextTick.callCount).to.equal(0);
+    });
+
+    it('should reset height if both collapse-tags and filterable are enabled', () => {
+      const select = getSelectComponentVm({ collapseTags: true, filterable: true });
+      sinon.stub(select, '$nextTick');
+      select.resetInputHeight();
+      expect(select.$nextTick.callCount).to.equal(1);
+    });
+  });
 });
diff --git a/test/unit/specs/slider.spec.js b/test/unit/specs/slider.spec.js
index 1b5b06417b..1e98bb29b0 100644
--- a/test/unit/specs/slider.spec.js
+++ b/test/unit/specs/slider.spec.js
@@ -112,12 +112,13 @@ describe('Slider', () => {
     vm = createVue({
       template: `
         <div>
-          <el-slider v-model="value"></el-slider>
+          <el-slider v-model="value" :vertical="vertical"></el-slider>
         </div>
       `,
 
       data() {
         return {
+          vertical: false,
           value: 0
         };
       }
@@ -128,7 +129,44 @@ describe('Slider', () => {
     slider.onDragEnd();
     setTimeout(() => {
       expect(vm.value > 0).to.true;
-      done();
+      vm.vertical = true;
+      vm.value = 0;
+      vm.$nextTick(() => {
+        expect(vm.value === 0).to.true;
+        slider.onButtonDown({ clientY: 0, preventDefault() {} });
+        slider.onDragging({ clientY: -100 });
+        slider.onDragEnd();
+        setTimeout(() => {
+          expect(vm.value > 0).to.true;
+          done();
+        }, 10);
+      });
+    }, 10);
+  });
+
+  it('accessibility', done => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-slider v-model="value"></el-slider>
+        </div>
+      `,
+
+      data() {
+        return {
+          value: 0.1
+        };
+      }
+    }, true);
+    const slider = vm.$children[0].$children[0];
+    slider.onRightKeyDown();
+    setTimeout(() => {
+      expect(vm.value).to.equal(1);
+      slider.onLeftKeyDown();
+      setTimeout(() => {
+        expect(vm.value).to.equal(0);
+        done();
+      }, 10);
     }, 10);
   });
 
@@ -180,6 +218,39 @@ describe('Slider', () => {
     }, 10);
   });
 
+  it('change event', done => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-slider v-model="value" @change="onChange">
+          </el-slider>
+        </div>
+      `,
+
+      data() {
+        return {
+          data: 0,
+          value: 0
+        };
+      },
+      methods: {
+        onChange(val) {
+          this.data = val;
+        }
+      }
+    }, true);
+    const slider = vm.$children[0];
+    vm.value = 10;
+    setTimeout(() => {
+      expect(vm.data).to.equal(0);
+      slider.onSliderClick({ clientX: 100 });
+      setTimeout(() => {
+        expect(vm.data > 0).to.true;
+        done();
+      }, 10);
+    }, 10);
+  });
+
   it('disabled', done => {
     vm = createVue({
       template: `
diff --git a/test/unit/specs/steps.spec.js b/test/unit/specs/steps.spec.js
index 03c4bce9d9..527cce8963 100644
--- a/test/unit/specs/steps.spec.js
+++ b/test/unit/specs/steps.spec.js
@@ -25,7 +25,6 @@ describe('Steps', () => {
         <el-step title="step1"></el-step>
         <el-step title="step2"></el-step>
         <el-step title="step3"></el-step>
-        <el-step title="step4"></el-step>
       </el-steps>
     `);
 
@@ -39,8 +38,8 @@ describe('Steps', () => {
     `);
 
     Vue.nextTick(_ => {
-      expect(vm.$el.querySelector('.el-step')).have.deep.property('style.width').equal('25%');
-      expect(vm2.$el.querySelector('.el-step')).have.deep.property('style.width').equal('100px');
+      expect(vm.$el.querySelector('.el-step')).have.deep.property('style.webkitFlexBasis').equal('50%');
+      expect(vm2.$el.querySelector('.el-step')).have.deep.property('style.webkitFlexBasis').equal('100px');
       done();
     });
   });
@@ -118,7 +117,25 @@ describe('Steps', () => {
     `);
 
     vm.$nextTick(_ => {
-      expect(vm.$el.querySelector('.el-step')).have.deep.property('style.height').equal('200px');
+      expect(vm.$el.querySelector('.el-step')).have.deep.property('style.webkitFlexBasis').equal('200px');
+      done();
+    });
+  });
+
+  it('step:status=error', done => {
+    vm = createVue(`
+      <el-steps :active="2" process-status="process" finish-status="success" direction="horizontal">
+        <el-step title="step1"></el-step>
+        <el-step title="step2" status="error"></el-step>
+        <el-step title="step3"></el-step>
+      </el-steps>
+    `);
+
+    vm.$nextTick(_ => {
+      const errorLine = vm.$el.querySelector('.el-step:nth-child(2) .el-step__line-inner');
+      expect(errorLine.getBoundingClientRect().width).to.equal(0);
+      const nextStep = vm.$el.querySelector('.el-step:nth-child(3) .el-step__head');
+      expect(nextStep.classList.contains('is-wait')).to.equal(true);
       done();
     });
   });
diff --git a/test/unit/specs/switch.spec.js b/test/unit/specs/switch.spec.js
index e28a93c6a9..9407a9c7c4 100644
--- a/test/unit/specs/switch.spec.js
+++ b/test/unit/specs/switch.spec.js
@@ -10,34 +10,38 @@ describe('Switch', () => {
 
   it('create', () => {
     vm = createTest(Switch, {
-      onText: 'on',
-      offText: 'off',
-      onColor: '#0f0',
-      offColor: '#f00',
+      activeText: 'on',
+      inactiveText: 'off',
+      activeColor: '#0f0',
+      inactiveColor: '#f00',
       width: 100
     });
 
     const core = vm.$el.querySelector('.el-switch__core');
     expect(core.style.backgroundColor).to.equal('rgb(255, 0, 0)');
     expect(core.style.width).to.equal('100px');
-    expect(vm.$el.querySelector('.el-switch__label--left').querySelector('span').textContent).to.equal('on');
+    expect(vm.$el.querySelector('.el-switch__label--left').querySelector('span').textContent).to.equal('off');
   });
 
   it('switch with icons', () => {
     vm = createTest(Switch, {
-      onIconClass: 'el-icon-check',
-      offIconClass: 'el-icon-close'
+      activeIconClass: 'el-icon-check',
+      inactiveIconClass: 'el-icon-close'
     });
 
     const icon = vm.$el.querySelector('.el-switch__label--left').querySelector('i');
-    expect(icon.classList.contains('el-icon-check')).to.true;
+    expect(icon.classList.contains('el-icon-close')).to.true;
   });
 
   it('value correctly update', done => {
     vm = createVue({
       template: `
         <div>
-          <el-switch v-model="value"></el-switch>
+          <el-switch
+            v-model="value"
+            activeColor="#0f0"
+            inactiveColor="#f00">
+          </el-switch>
         </div>
       `,
 
@@ -49,8 +53,10 @@ describe('Switch', () => {
     }, true);
 
     const core = vm.$el.querySelector('.el-switch__core');
+    expect(core.style.backgroundColor).to.equal('rgb(0, 255, 0)');
     core.click();
     setTimeout(() => {
+      expect(core.style.backgroundColor).to.equal('rgb(255, 0, 0)');
       expect(vm.value).to.equal(false);
       core.click();
       setTimeout(() => {
@@ -125,7 +131,7 @@ describe('Switch', () => {
     vm = createVue({
       template: `
         <div>
-          <el-switch v-model="value" :on-value="onValue" :off-value="offValue"></el-switch>
+          <el-switch v-model="value" :active-value="onValue" :inactive-value="offValue"></el-switch>
         </div>
       `,
       data() {
@@ -175,4 +181,29 @@ describe('Switch', () => {
       }, 10);
     }, 10);
   });
+
+  it('sets checkbox value', done => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-switch v-model="value"></el-switch>
+        </div>
+      `,
+      data() {
+        return {
+          value: false
+        };
+      }
+    }, true);
+
+    vm.value = true;
+    setTimeout(() => {
+      expect(vm.$el.querySelector('input').checked).to.equal(true);
+      vm.value = false;
+      setTimeout(() => {
+        expect(vm.$el.querySelector('input').checked).to.equal(false);
+        done();
+      }, 10);
+    }, 10);
+  });
 });
diff --git a/test/unit/specs/sync.spec.js b/test/unit/specs/sync.spec.js
deleted file mode 100644
index 0f8ea40e38..0000000000
--- a/test/unit/specs/sync.spec.js
+++ /dev/null
@@ -1,163 +0,0 @@
-import { createVue, triggerEvent } from '../util';
-import Sync from 'element-ui/src/utils/sync';
-
-const Test = {
-  template: `<div class="sync-test" v-show="visible">
-    <button @click="visible = false">Hide</button>
-    A test component.
-  </div>`,
-  data() {
-    return {
-      visible: true
-    };
-  }
-};
-
-describe('Sync', () => {
-  it('should not throw when use incorrectly', () => {
-    sinon.stub(window.console, 'warn');
-
-    createVue({
-      template: `
-        <test v-sync>
-        </test>
-      `,
-      components: { Test },
-      directives: { Sync },
-      data() {
-        return {
-          myVisible: true
-        };
-      }
-    });
-
-    expect(window.console.warn.callCount).to.equal(1);
-
-    createVue({
-      template: `
-        <test v-sync:visible>
-        </test>
-      `,
-      components: { Test },
-      directives: { Sync },
-      data() {
-        return {
-          myVisible: true
-        };
-      }
-    });
-
-    expect(window.console.warn.callCount).to.equal(2);
-
-    createVue({
-      template: `
-        <test v-sync.visible>
-        </test>
-      `,
-      components: { Test },
-      directives: { Sync },
-      data() {
-        return {
-          myVisible: true
-        };
-      }
-    });
-
-    expect(window.console.warn.callCount).to.equal(3);
-
-    createVue({
-      template: `
-        <div v-sync:visible="myVisible">
-        </div>
-      `,
-      components: { Test },
-      directives: { Sync },
-      data() {
-        return {
-          myVisible: true
-        };
-      }
-    });
-
-    expect(window.console.warn.callCount).to.equal(4);
-
-    window.console.warn.restore();
-  });
-
-  it('context variable should change when inner component variable change', (done) => {
-    const vm = createVue({
-      template: `
-        <test v-sync:visible="myVisible">
-        </test>
-      `,
-      components: { Test },
-      directives: { Sync },
-      data() {
-        return {
-          myVisible: true
-        };
-      }
-    }, true);
-
-    triggerEvent(vm.$el.querySelector('.sync-test button'), 'click', {});
-    setTimeout(() => {
-      expect(vm.myVisible).to.be.false;
-      done();
-    }, 10);
-  });
-
-  it('inner component variable should change when context variable change', (done) => {
-    const vm = createVue({
-      template: `
-        <test ref="test" v-sync:visible="myVisible">
-        </test>
-      `,
-      components: { Test },
-      directives: { Sync },
-      data() {
-        return {
-          myVisible: true
-        };
-      }
-    }, true);
-
-    vm.myVisible = false;
-
-    setTimeout(() => {
-      expect(vm.$refs.test.visible).to.be.false;
-      expect(vm.$refs.test.$el.style.display).to.equal('none');
-      done();
-    }, 10);
-  });
-
-  it('should unwatch expression after destroy', () => {
-    const vm = createVue({
-      template: `
-        <test ref="test" v-sync:visible="myVisible" v-if="createTest">
-        </test>
-      `,
-      components: { Test },
-      directives: { Sync },
-      data() {
-        return {
-          myVisible: true,
-          createTest: false
-        };
-      }
-    });
-
-    const beforeBindCount = vm._watchers.length;
-    vm.createTest = true;
-    const delay = 50;
-    setTimeout(() => {
-      const afterBindCount = vm._watchers.length;
-      expect(afterBindCount).to.be.equal(beforeBindCount + 1);
-
-      vm.createTest = false;
-      setTimeout(() => {
-        const afterDestroyCount = vm._watchers.length;
-        expect(afterDestroyCount).to.be.equal(beforeBindCount);
-      }, delay);
-    }, delay);
-  });
-});
diff --git a/test/unit/specs/table.spec.js b/test/unit/specs/table.spec.js
index 13e4c61a84..52cc4148c2 100644
--- a/test/unit/specs/table.spec.js
+++ b/test/unit/specs/table.spec.js
@@ -45,7 +45,7 @@ describe('Table', () => {
         const ths = toArray(vm.$el.querySelectorAll('thead th'));
 
         expect(ths.map(node => node.textContent).filter(o => o))
-        .to.eql(['片名', '发行日期', '导演', '时长（分）']);
+          .to.eql(['片名', '发行日期', '导演', '时长（分）']);
         done();
       }, DELAY);
     });
@@ -90,6 +90,15 @@ describe('Table', () => {
       }, DELAY);
     });
 
+    it('height as string', done => {
+      const vm = createTable('height="100pt"');
+      setTimeout(_ => {
+        expect(vm.$el.style.height).to.equal('100pt');
+        destroyVM(vm);
+        done();
+      }, DELAY);
+    });
+
     it('maxHeight', done => {
       const vm = createTable('max-height="134"');
       setTimeout(_ => {
@@ -138,10 +147,10 @@ describe('Table', () => {
     it('tableRowClassName', done => {
       const vm = createTable(':row-class-name="tableRowClassName"', {
         methods: {
-          tableRowClassName(row, index) {
-            if (index === 1) {
+          tableRowClassName({row, rowIndex}) {
+            if (rowIndex === 1) {
               return 'info-row';
-            } else if (index === 3) {
+            } else if (rowIndex === 3) {
               return 'positive-row';
             }
 
@@ -171,8 +180,8 @@ describe('Table', () => {
     it('tableRowStyle[Function]', done => {
       const vm = createTable(':row-style="tableRowStyle"', {
         methods: {
-          tableRowStyle(row, index) {
-            if (index === 1) {
+          tableRowStyle({row, rowIndex}) {
+            if (rowIndex === 1) {
               return { height: '60px' };
             }
 
@@ -225,6 +234,47 @@ describe('Table', () => {
         }, DELAY);
       }, DELAY);
     });
+
+    it('select-on-indeterminate', done => {
+      const vm = createVue({
+        template: `
+          <el-table :data="testData" @selection-change="change" :select-on-indeterminate="false" ref="table">
+            <el-table-column type="selection" />
+            <el-table-column prop="name" label="name" />
+            <el-table-column prop="release" label="release" />
+            <el-table-column prop="director" label="director" />
+            <el-table-column prop="runtime" label="runtime" />
+          </el-table>
+        `,
+
+        created() {
+          this.testData = getTestData();
+        },
+
+        mounted() {
+          this.$refs.table.toggleRowSelection(this.testData[0]);
+        },
+
+        data() {
+          return { selected: [] };
+        },
+
+        methods: {
+          change(val) {
+            this.selected = val;
+          }
+        }
+      }, true);
+
+      setTimeout(_ => {
+        vm.$el.querySelector('.el-checkbox').click();
+        setTimeout(_ => {
+          expect(vm.selected).to.length(0);
+          destroyVM(vm);
+          done();
+        }, DELAY);
+      }, DELAY);
+    });
   });
 
   describe('filter', () => {
@@ -622,32 +672,6 @@ describe('Table', () => {
       }, DELAY);
     });
 
-    it('inline-template', done => {
-      const vm = createVue({
-        template: `
-          <el-table :data="testData">
-            <el-table-column prop="name" inline-template>
-              <span>[{{ row.name }}]</span>
-            </el-table-column>
-            <el-table-column prop="release"/>
-            <el-table-column prop="director"/>
-            <el-table-column prop="runtime"/>
-          </el-table>
-        `,
-
-        created() {
-          this.testData = getTestData();
-        }
-      });
-
-      setTimeout(_ => {
-        const cells = toArray(vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:first-child'));
-        expect(cells.map(n => n.textContent)).to.eql(getTestData().map(o => `[${o.name}]`));
-        destroyVM(vm);
-        done();
-      }, DELAY);
-    });
-
     it('render-header', done => {
       const vm = createVue({
         template: `
@@ -831,84 +855,6 @@ describe('Table', () => {
       }, DELAY);
     });
 
-    it('reserve-selection', done => {
-      const getData = function(page = 0) {
-        let id = 0;
-        const rows = [];
-        const row = () => {
-          return {
-            id: ++id + page * 10,
-            date: new Date().getTime()
-          };
-        };
-        let count = 10;
-
-        while (--count) {
-          rows.push(row());
-        }
-        return rows;
-      };
-      const vm = createVue({
-        template: `
-          <el-table ref="table" :row-key="rowKey" :data="testData" @selection-change="change">
-            <el-table-column type="selection" reserve-selection />
-            <el-table-column prop="id" label="id" />
-            <el-table-column prop="date" label="date" />
-          </el-table>
-        `,
-
-        created() {
-          this.testData = getData();
-        },
-
-        data() {
-          return { selected: [], testData: [] };
-        },
-
-        methods: {
-          rowKey(row) {
-            return row.id;
-          },
-
-          change(rows) {
-            this.selected = rows;
-          }
-        }
-      }, true);
-
-      setTimeout(_ => {
-        // click first
-        vm.$el.querySelectorAll('.el-checkbox')[1].click();
-
-        setTimeout(_ => {
-          expect(vm.$el.querySelectorAll('.el-checkbox__input.is-checked')).to.length(1);
-          // go to second page
-          vm.testData = getData(1);
-          setTimeout(_ => {
-             // expect no checked
-            expect(vm.$el.querySelectorAll('.el-checkbox__input.is-checked')).to.length(0);
-            // click first checkbox
-            vm.$el.querySelectorAll('.el-checkbox')[1].click();
-            vm.$el.querySelectorAll('.el-checkbox')[2].click();
-            setTimeout(_ => {
-              // back first page
-              vm.testData = getData();
-              setTimeout(_ => {
-                expect(vm.$el.querySelectorAll('.el-checkbox__input.is-checked')).to.length(1);
-                // clear
-                vm.$refs.table.clearSelection();
-                setTimeout(_ => {
-                  expect(vm.$el.querySelectorAll('.el-checkbox__input.is-checked')).to.length(0);
-                  destroyVM(vm);
-                  done();
-                }, DELAY);
-              }, DELAY);
-            }, DELAY);
-          }, DELAY);
-        }, DELAY);
-      }, DELAY);
-    });
-
     describe('type', () => {
       const createTable = function(type) {
         return createVue({
@@ -1001,29 +947,28 @@ describe('Table', () => {
           extra = extra || '';
           return createVue({
             template: `
-            <el-table row-key="id" :data="testData" @expand="handleExpand" ${extra}>
+            <el-table row-key="id" :data="testData" @expand-change="handleExpand" ${extra}>
               <el-table-column type="expand">
-                <template scope="props">
+                <template slot-scope="props">
                   <div>{{props.row.name}}</div>
                 </template>
-              </el-table-column>
+            </el-table-column>
               <el-table-column prop="release" label="release" />
               <el-table-column prop="director" label="director" />
               <el-table-column prop="runtime" label="runtime" />
             </el-table>
           `,
 
-            created() {
-              this.testData = getTestData();
-            },
-
             data() {
-              return { expandCount: 0, expandRowKeys: [] };
+              return { expandCount: 0, expandRowKeys: [], testData: getTestData() };
             },
 
             methods: {
               handleExpand() {
                 this.expandCount++;
+              },
+              refreshData() {
+                this.testData = getTestData();
               }
             }
           }, true);
@@ -1080,6 +1025,29 @@ describe('Table', () => {
             done();
           }, DELAY);
         });
+
+        it('should unexpand after refresh data and click', function(done) {
+          const vm = createInstance();
+          setTimeout(_ => {
+            vm.$el.querySelector('td.el-table__expand-column .el-table__expand-icon').click();
+            setTimeout(_ => {
+              expect(vm.$el.querySelectorAll('.el-table__expanded-cell').length).to.equal(1);
+              expect(vm.expandCount).to.equal(1);
+              vm.refreshData();
+              setTimeout(_ => { // wait until refreshed
+                expect(vm.$el.querySelectorAll('.el-table__expanded-cell').length).to.equal(1);
+                vm.$el.querySelector('td.el-table__expand-column .el-table__expand-icon').click();
+                setTimeout(_ => {
+                  // should unexpand
+                  expect(vm.$el.querySelectorAll('.el-table__expanded-cell').length).to.equal(0);
+                  expect(vm.expandCount).to.equal(2);
+                  destroyVM(vm);
+                  done();
+                }, DELAY);
+              }, DELAY);
+            }, DELAY);
+          }, DELAY);
+        });
       });
     });
 
@@ -1094,12 +1062,58 @@ describe('Table', () => {
         }, DELAY);
       });
 
+      it('sortable orders', done => {
+        const vm = createTable('', '', '', 'sortable :sort-orders="[\'descending\', \'ascending\']"', {});
+
+        setTimeout(_ => {
+          const elm = vm.$el.querySelector('.caret-wrapper');
+          elm.click();
+
+          setTimeout(_ => {
+            const lastCells = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:last-child');
+            expect(toArray(lastCells).map(node => node.textContent)).to.eql(['100', '95', '92', '92', '80']);
+            destroyVM(vm);
+            done();
+          }, DELAY);
+        }, DELAY);
+      });
+
       it('sortable method', done => {
         const vm = createTable(
           'sortable :sort-method="sortMethod"', '', '', '', {
             methods: {
               sortMethod(a, b) {
-                return a.runtime < b.runtime;
+                // sort method should return number
+                if (a.runtime < b.runtime) {
+                  return 1;
+                }
+                if (a.runtime > b.runtime) {
+                  return -1;
+                }
+                return 0;
+              }
+            }
+          });
+
+        setTimeout(_ => {
+          const elm = vm.$el.querySelector('.caret-wrapper');
+          elm.click();
+
+          setTimeout(_ => {
+            const lastCells = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:last-child');
+            expect(toArray(lastCells).map(node => node.textContent)).to.eql(['100', '95', '92', '92', '80']);
+            destroyVM(vm);
+            done();
+          }, DELAY);
+        }, DELAY);
+      });
+
+      it('sortable by method', done => {
+        const vm = createTable(
+          'sortable :sort-by="sortBy"', '', '', '', {
+            methods: {
+              sortBy(a) {
+                return -a.runtime;
               }
             }
           });
@@ -1117,6 +1131,23 @@ describe('Table', () => {
         }, DELAY);
       });
 
+      it('sortable by property', done => {
+        const vm = createTable(
+          'sortable sort-by="runtime"', '', '', '', {});
+
+        setTimeout(_ => {
+          const elm = vm.$el.querySelector('.caret-wrapper');
+          elm.click();
+
+          setTimeout(_ => {
+            const lastCells = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:last-child');
+            expect(toArray(lastCells).map(node => node.textContent)).to.eql(['80', '92', '92', '95', '100']);
+            destroyVM(vm);
+            done();
+          }, DELAY);
+        }, DELAY);
+      });
+
       it('sort-change', done => {
         let result;
         const vm = createTable('sortable="custom"', '', '', '', {
@@ -1149,7 +1180,7 @@ describe('Table', () => {
         setTimeout(_ => {
           const lastCells = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:last-child');
           expect(toArray(lastCells).map(node => node.textContent))
-          .to.eql(['80', '92', '92', '95', '100']);
+            .to.eql(['80', '92', '92', '95', '100']);
           done();
         }, DELAY);
       });
@@ -1662,6 +1693,21 @@ describe('Table', () => {
       destroyVM(vm);
     });
 
+    it('toggleAllSelection', done => {
+      const vm = createTable('selection-change');
+      vm.$refs.table.toggleAllSelection();
+      setTimeout(() => {
+        expect(vm.selection).to.length(5);
+
+        vm.$refs.table.toggleAllSelection();
+        setTimeout(() => {
+          expect(vm.selection).to.length(0);
+          destroyVM(vm);
+          done();
+        }, 50);
+      }, 50);
+    });
+
     it('clearSelection', () => {
       const vm = createTable('selection-change');
       vm.$refs.table.toggleRowSelection(vm.testData[0]);
@@ -1678,6 +1724,43 @@ describe('Table', () => {
 
       destroyVM(vm);
     });
+
+    it('sort', done => {
+      const vm = createVue({
+        template: `
+          <el-table ref="table" :data="testData" :default-sort = "{prop: 'runtime', order: 'ascending'}">
+            <el-table-column prop="name" />
+            <el-table-column prop="release" />
+            <el-table-column prop="director" />
+            <el-table-column prop="runtime"/>
+          </el-table>
+        `,
+
+        created() {
+          this.testData = getTestData();
+        },
+
+        data() {
+          return { testData: this.testData };
+        }
+      });
+
+      setTimeout(() => {
+        const lastCells = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:last-child');
+        expect(toArray(lastCells).map(node => node.textContent))
+          .to.eql(['80', '92', '92', '95', '100']);
+
+        vm.$nextTick(() => {
+          vm.testData = vm.testData.map(data => Object.assign(data, { runtime: -data.runtime }));
+          vm.$refs.table.sort('runtime', 'ascending');
+          vm.$nextTick(() => {
+            expect(toArray(lastCells).map(node => node.textContent))
+              .to.eql(['-100', '-95', '-92', '-92', '-80']);
+            done();
+          });
+        });
+      }, DELAY);
+    });
   });
 
   it('hover', done => {
@@ -1717,7 +1800,7 @@ describe('Table', () => {
           <el-table-column prop="name" label="片名" />
           <el-table-column prop="release" label="发行日期" />
           <el-table-column prop="director" label="导演" />
-          <el-table-column prop="runtime" label="时长（分）" />
+          <el-table-column prop="runtime" label="时长（分）" sortable />
         </el-table>
       `,
 
@@ -1732,12 +1815,22 @@ describe('Table', () => {
         expect(tr.classList.contains('current-row')).to.be.true;
         const rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');
 
-        triggerEvent(rows[2], 'click', true, false);
+        triggerEvent(rows[1], 'click', true, false);
         setTimeout(_ => {
           expect(tr.classList.contains('current-row')).to.be.false;
-          expect(rows[2].classList.contains('current-row')).to.be.true;
-          destroyVM(vm);
-          done();
+          expect(rows[1].classList.contains('current-row')).to.be.true;
+
+          const ths = vm.$el.querySelectorAll('.el-table__header-wrapper thead th');
+          triggerEvent(ths[3], 'click', true, false);
+
+          setTimeout(_ => {
+            const rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');
+
+            expect(rows[1].classList.contains('current-row')).to.be.false;
+            expect(rows[3].classList.contains('current-row')).to.be.true;
+            destroyVM(vm);
+            done();
+          }, DELAY);
         }, DELAY);
       }, DELAY);
     }, DELAY);
diff --git a/test/unit/specs/tabs.spec.js b/test/unit/specs/tabs.spec.js
index 81fd3f0a21..75702fceea 100644
--- a/test/unit/specs/tabs.spec.js
+++ b/test/unit/specs/tabs.spec.js
@@ -1,7 +1,21 @@
-import { createVue, destroyVM } from '../util';
+import { createVue, destroyVM, triggerKeyDown } from '../util';
 
 describe('Tabs', () => {
   let vm;
+  let hasPromise = true;
+  before(() => {
+    if (!window.Promise) {
+      hasPromise = false;
+      window.Promise = require('es6-promise').Promise;
+    }
+  });
+
+  after(() => {
+    if (!hasPromise) {
+      window.Promise = undefined;
+    }
+  });
+
   afterEach(() => {
     destroyVM(vm);
   });
@@ -106,7 +120,7 @@ describe('Tabs', () => {
     vm = createVue({
       template: `
         <el-tabs type="card" ref="tabs">
-          <el-tab-pane :label="tab.label" :name="tab.name" v-for="tab in tabs">Test Content</el-tab-pane>
+          <el-tab-pane :label="tab.label" :name="tab.name" v-for="tab in tabs" :key="tab.name">Test Content</el-tab-pane>
         </el-tabs>
       `,
       data() {
@@ -146,6 +160,7 @@ describe('Tabs', () => {
         <el-tabs ref="tabs" v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
           <el-tab-pane
             v-for="(item, index) in editableTabs"
+            :key="item.name"
             :label="item.title"
             :name="item.name"
           >
@@ -208,19 +223,19 @@ describe('Tabs', () => {
       const paneList = vm.$el.querySelector('.el-tabs__content').children;
 
       tabList[1].querySelector('.el-icon-close').click();
-      vm.$nextTick(_ => {
+      setTimeout(_ => {
         expect(tabList.length).to.be.equal(2);
         expect(paneList.length).to.be.equal(2);
         expect(tabList[1].classList.contains('is-active')).to.be.true;
 
         vm.$refs.tabs.$el.querySelector('.el-tabs__new-tab').click();
-        vm.$nextTick(_ => {
+        setTimeout(_ => {
           expect(tabList.length).to.be.equal(3);
           expect(paneList.length).to.be.equal(3);
           expect(tabList[2].classList.contains('is-active')).to.be.true;
           done();
-        });
-      });
+        }, 100);
+      }, 100);
     }, 100);
   });
   it('addable & closable', done => {
@@ -238,6 +253,7 @@ describe('Tabs', () => {
           <el-tab-pane
             v-for="(item, index) in editableTabs"
             :label="item.title"
+            :key="item.name"
             :name="item.name"
           >
             {{item.content}}
@@ -294,19 +310,19 @@ describe('Tabs', () => {
 
       vm.$refs.tabs.$el.querySelector('.el-tabs__new-tab').click();
 
-      vm.$nextTick(_ => {
+      setTimeout(_ => {
         expect(tabList.length).to.be.equal(3);
         expect(paneList.length).to.be.equal(3);
         expect(tabList[2].classList.contains('is-active')).to.be.true;
 
         tabList[2].querySelector('.el-icon-close').click();
-        vm.$nextTick(_ => {
+        setTimeout(_ => {
           expect(tabList.length).to.be.equal(2);
           expect(paneList.length).to.be.equal(2);
           expect(tabList[1].classList.contains('is-active')).to.be.true;
           done();
-        });
-      });
+        }, 100);
+      }, 100);
     }, 100);
   });
   it('closable in tab-pane', (done) => {
@@ -348,4 +364,246 @@ describe('Tabs', () => {
       });
     });
   });
+  it('tab-position', done => {
+    vm = createVue({
+      template: `
+        <el-tabs ref="tabs" tab-position="left">
+          <el-tab-pane label="用户管理">A</el-tab-pane>
+          <el-tab-pane label="配置管理">B</el-tab-pane>
+          <el-tab-pane label="角色管理" ref="pane-click">C</el-tab-pane>
+          <el-tab-pane label="定时任务补偿">D</el-tab-pane>
+        </el-tabs>
+      `
+    }, true);
+
+    let paneList = vm.$el.querySelector('.el-tabs__content').children;
+    let spy = sinon.spy();
+
+    vm.$refs.tabs.$on('tab-click', spy);
+
+    setTimeout(_ => {
+      const tabList = vm.$refs.tabs.$refs.nav.$refs.tabs;
+      expect(tabList[0].classList.contains('is-active')).to.be.true;
+      expect(paneList[0].style.display).to.not.ok;
+
+      tabList[2].click();
+      vm.$nextTick(_ => {
+        expect(spy.withArgs(vm.$refs['pane-click']).calledOnce).to.true;
+        expect(tabList[2].classList.contains('is-active')).to.be.true;
+        expect(paneList[2].style.display).to.not.ok;
+        done();
+      });
+    }, 100);
+  });
+  it('stretch', done => {
+    vm = createVue({
+      template: `
+        <el-tabs ref="tabs" stretch :tab-position="tabPosition">
+          <el-tab-pane label="用户管理">A</el-tab-pane>
+          <el-tab-pane label="配置管理">B</el-tab-pane>
+          <el-tab-pane label="角色管理" ref="pane-click">C</el-tab-pane>
+          <el-tab-pane label="定时任务补偿">D</el-tab-pane>
+        </el-tabs>
+      `,
+      data() {
+        return {
+          tabPosition: 'bottom'
+        };
+      }
+    }, true);
+
+    setTimeout(_ => {
+      expect(vm.$el.querySelector('[role=tablist]').classList.contains('is-stretch')).to.be.true;
+
+      vm.tabPosition = 'left';
+
+      vm.$nextTick(_ => {
+        expect(vm.$el.querySelector('[role=tablist]').classList.contains('is-stretch')).not.to.be.true;
+        done();
+      });
+    }, 100);
+  });
+  it('horizonal-scrollable', done => {
+    vm = createVue({
+      template: `
+        <el-tabs ref="tabs" style="width: 200px;">
+          <el-tab-pane label="用户管理">A</el-tab-pane>
+          <el-tab-pane label="配置管理">B</el-tab-pane>
+          <el-tab-pane label="用户管理">A</el-tab-pane>
+          <el-tab-pane label="配置管理">B</el-tab-pane>
+          <el-tab-pane label="用户管理">A</el-tab-pane>
+          <el-tab-pane label="配置管理">B</el-tab-pane>
+          <el-tab-pane label="定时任务补偿">D</el-tab-pane>
+        </el-tabs>
+      `
+    }, true);
+
+    setTimeout(_ => {
+      const btnPrev = vm.$el.querySelector('.el-tabs__nav-prev');
+      btnPrev.click();
+      vm.$nextTick(_ => {
+        const tabNav = vm.$el.querySelector('.el-tabs__nav-wrap');
+        expect(tabNav.__vue__.navOffset).to.be.equal(0);
+
+        const btnNext = vm.$el.querySelector('.el-tabs__nav-next');
+        btnNext.click();
+
+        vm.$nextTick(_ => {
+          expect(tabNav.__vue__.navOffset).to.not.be.equal(0);
+
+          btnPrev.click();
+
+          vm.$nextTick(_ => {
+            expect(tabNav.__vue__.navOffset).to.be.equal(0);
+            done();
+          });
+        });
+      });
+    }, 100);
+  });
+  it('vertical-scrollable', done => {
+    vm = createVue({
+      template: `
+        <el-tabs ref="tabs" tab-position="left" style="height: 200px;">
+          <el-tab-pane label="用户管理">A</el-tab-pane>
+          <el-tab-pane label="配置管理">B</el-tab-pane>
+          <el-tab-pane label="用户管理">A</el-tab-pane>
+          <el-tab-pane label="配置管理">B</el-tab-pane>
+          <el-tab-pane label="用户管理">A</el-tab-pane>
+          <el-tab-pane label="配置管理">B</el-tab-pane>
+          <el-tab-pane label="定时任务补偿">D</el-tab-pane>
+        </el-tabs>
+      `
+    }, true);
+
+    setTimeout(_ => {
+      const btnPrev = vm.$el.querySelector('.el-tabs__nav-prev');
+      btnPrev.click();
+      vm.$nextTick(_ => {
+        const tabNav = vm.$el.querySelector('.el-tabs__nav-wrap');
+        expect(tabNav.__vue__.navOffset).to.be.equal(0);
+
+        const btnNext = vm.$el.querySelector('.el-tabs__nav-next');
+        btnNext.click();
+
+        vm.$nextTick(_ => {
+          expect(tabNav.__vue__.navOffset).to.not.be.equal(0);
+
+          btnPrev.click();
+
+          vm.$nextTick(_ => {
+            expect(tabNav.__vue__.navOffset).to.be.equal(0);
+            done();
+          });
+        });
+      });
+    }, 100);
+  });
+  it('should work with lazy', done => {
+    vm = createVue({
+      template: `
+        <el-tabs ref="tabs">
+          <el-tab-pane label="用户管理" name="A">A</el-tab-pane>
+          <el-tab-pane label="配置管理" name="B">B</el-tab-pane>
+          <el-tab-pane label="角色管理" name="C">C</el-tab-pane>
+          <el-tab-pane label="定时任务补偿" lazy name="D">D</el-tab-pane>
+        </el-tabs>
+      `
+    }, true);
+
+    expect(vm.$el.querySelector('.el-tabs__content').children.length).to.be.equal(3);
+    expect(vm.$el.querySelector('.el-tabs__content > #pane-D')).to.be.equal(null);
+
+    setTimeout(_ => {
+      vm.$el.querySelector('.el-tabs__nav > #tab-D').click();
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.el-tabs__content').children.length).to.be.equal(4);
+        expect(vm.$el.querySelector('.el-tabs__content > #pane-D')).not.to.be.equal(null);
+
+        vm.$el.querySelector('.el-tabs__nav > #tab-A').click();
+        vm.$nextTick(() => {
+          expect(vm.$el.querySelector('.el-tabs__content').children.length).to.be.equal(4);
+          expect(vm.$el.querySelector('.el-tabs__content > #pane-D')).not.to.be.equal(null);
+          done();
+        });
+      });
+    }, 100);
+  });
+  it('before leave', done => {
+    vm = createVue({
+      template: `
+        <el-tabs ref="tabs" v-model="activeName" :before-leave="beforeLeave">
+          <el-tab-pane name="tab-A" label="用户管理">A</el-tab-pane>
+          <el-tab-pane name="tab-B" label="配置管理">B</el-tab-pane>
+          <el-tab-pane name="tab-C" label="角色管理">C</el-tab-pane>
+          <el-tab-pane name="tab-D" label="定时任务补偿">D</el-tab-pane>
+        </el-tabs>
+      `,
+      data() {
+        return {
+          activeName: 'tab-B'
+        };
+      },
+      methods: {
+        beforeLeave() {
+          return new window.Promise((resolve, reject) => {
+            reject();
+          });
+        }
+      }
+    }, true);
+    setTimeout(_ => {
+      const paneList = vm.$el.querySelector('.el-tabs__content').children;
+      const tabList = vm.$refs.tabs.$refs.nav.$refs.tabs;
+
+      expect(tabList[1].classList.contains('is-active')).to.be.true;
+      expect(paneList[1].style.display).to.not.ok;
+
+      tabList[3].click();
+      vm.$nextTick(_ => {
+        setTimeout(() => {
+          expect(tabList[1].classList.contains('is-active')).to.be.true;
+          expect(paneList[1].style.display).to.not.ok;
+          expect(vm.activeName === 'tab-B');
+          done();
+        }, 200);
+      });
+    }, 100);
+  });
+  it('keyboard event', done => {
+    vm = createVue({
+      template: `
+        <el-tabs v-model="activeName">
+          <el-tab-pane label="用户管理" name="first">A</el-tab-pane>
+          <el-tab-pane label="配置管理" name="second">B</el-tab-pane>
+          <el-tab-pane label="角色管理" name="third">C</el-tab-pane>
+          <el-tab-pane label="定时任务补偿" name="fourth">D</el-tab-pane>
+        </el-tabs>
+      `,
+      data() {
+        return {
+          activeName: 'second'
+        };
+      }
+    }, true);
+
+    expect(vm.activeName).to.be.equal('second');
+    vm.$nextTick(() => {
+      triggerKeyDown(vm.$el.querySelector('#tab-second'), 39);
+      expect(vm.activeName).to.be.equal('third');
+
+      triggerKeyDown(vm.$el.querySelector('#tab-third'), 39);
+      expect(vm.activeName).to.be.equal('fourth');
+
+      triggerKeyDown(vm.$el.querySelector('#tab-fourth'), 39);
+      expect(vm.activeName).to.be.equal('first');
+
+      triggerKeyDown(vm.$el.querySelector('#tab-first'), 37);
+      expect(vm.activeName).to.be.equal('fourth');
+
+      triggerKeyDown(vm.$el.querySelector('#tab-fourth'), 37);
+      expect(vm.activeName).to.be.equal('third');
+      done();
+    });
+  });
 });
diff --git a/test/unit/specs/time-picker.spec.js b/test/unit/specs/time-picker.spec.js
index 3b553029da..27248f7176 100644
--- a/test/unit/specs/time-picker.spec.js
+++ b/test/unit/specs/time-picker.spec.js
@@ -1,6 +1,7 @@
-import { createTest, destroyVM } from '../util';
+import { createTest, destroyVM, createVue } from '../util';
 import TimePicker from 'packages/time-picker';
-import Vue from 'vue';
+
+const DELAY = 100;
 
 describe('TimePicker', () => {
   let vm;
@@ -15,7 +16,6 @@ describe('TimePicker', () => {
     });
     expect(vm.$el.querySelector('input').getAttribute('placeholder')).to.equal('test');
     expect(vm.$el.querySelector('input').getAttribute('readonly')).to.ok;
-    destroyVM(vm);
   });
 
   it('format', () => {
@@ -24,7 +24,30 @@ describe('TimePicker', () => {
       value: new Date(2016, 9, 10, 18, 40)
     });
     expect(vm.$el.querySelector('input').value).to.equal('18-40-00');
-    destroyVM(vm);
+  });
+
+  it('set AM/PM format', done => {
+    vm = createTest(TimePicker, {
+      format: 'hh:mm:ss A',
+      value: new Date(2016, 9, 10, 18, 40)
+    }, true);
+
+    const input = vm.$el.querySelector('input');
+
+    expect(vm.$el.querySelector('input').value).to.equal('06:40:00 PM');
+
+    input.blur();
+    input.focus();
+
+    setTimeout(_ => {
+      const list = vm.picker.$el.querySelectorAll('.el-time-spinner__list');
+      const hoursEl = list[0];
+      expect(hoursEl.querySelectorAll('.el-time-spinner__item')[0].textContent).to.equal('12 AM');
+      expect(hoursEl.querySelectorAll('.el-time-spinner__item')[1].textContent).to.equal('01 AM');
+      expect(hoursEl.querySelectorAll('.el-time-spinner__item')[12].textContent).to.equal('12 PM');
+      expect(hoursEl.querySelectorAll('.el-time-spinner__item')[15].textContent).to.equal('03 PM');
+      done();
+    }, DELAY);
   });
 
   it('default value', done => {
@@ -38,26 +61,34 @@ describe('TimePicker', () => {
     input.focus();
     input.blur();
 
-    Vue.nextTick(_ => {
+    setTimeout(_ => {
       const times = vm.picker.$el.querySelectorAll('.active');
 
       expect(times[0].textContent).to.equal('18');
       expect(times[1].textContent).to.equal('40');
-      expect(times[2].textContent).to.equal('0');
-      destroyVM(vm);
+      expect(times[2].textContent).to.equal('00');
       done();
-    });
+    }, DELAY);
   });
 
   it('select time', done => {
-    vm = createTest(TimePicker, true);
-    const input = vm.$el.querySelector('input');
+    vm = createVue({
+      template: '<el-time-picker ref="compo" v-model="value"></el-time-picker>',
+      data() {
+        return {
+          value: ''
+        };
+      }
+    }, true);
+    const timePicker = vm.$refs.compo;
+    const input = timePicker.$el.querySelector('input');
 
     input.blur();
     input.focus();
 
-    Vue.nextTick(_ => {
-      const list = vm.picker.$el.querySelectorAll('.el-time-spinner__list');
+    setTimeout(_ => {
+      const list = timePicker.picker.$el.querySelectorAll('.el-time-spinner__list');
+
       const hoursEl = list[0];
       const minutesEl = list[1];
       const secondsEl = list[2];
@@ -65,57 +96,75 @@ describe('TimePicker', () => {
       const minuteEl = minutesEl.querySelectorAll('.el-time-spinner__item')[36];
       const secondEl = secondsEl.querySelectorAll('.el-time-spinner__item')[20];
 
+      // click hour, minute, second one at a time.
       hourEl.click();
-      minuteEl.click();
-      secondEl.click();
-
-      Vue.nextTick(_ => {
-        const date = vm.picker.currentDate;
-
-        expect(hourEl.classList.contains('active')).to.true;
-        expect(minuteEl.classList.contains('active')).to.true;
-        expect(secondEl.classList.contains('active')).to.true;
-        expect(date.getHours()).to.equal(4);
-        expect(date.getMinutes()).to.equal(36);
-        expect(date.getSeconds()).to.equal(20);
-        destroyVM(vm);
-        done();
+      vm.$nextTick(_ => {
+        minuteEl.click();
+        vm.$nextTick(_ => {
+          secondEl.click();
+          setTimeout(_ => {
+            const date = timePicker.picker.date;
+            expect(hourEl.classList.contains('active')).to.true;
+            expect(minuteEl.classList.contains('active')).to.true;
+            expect(secondEl.classList.contains('active')).to.true;
+            expect(date.getHours()).to.equal(4);
+            expect(date.getMinutes()).to.equal(36);
+            expect(date.getSeconds()).to.equal(20);
+            done();
+          }, DELAY);
+        });
       });
-    });
+    }, DELAY);
   });
 
   it('click cancel button', done => {
-    vm = createTest(TimePicker, true);
-    const input = vm.$el.querySelector('input');
+    vm = createVue({
+      template: '<el-time-picker ref="compo" v-model="value"></el-time-picker>',
+      data() {
+        return {
+          value: ''
+        };
+      }
+    }, true);
+    const timePicker = vm.$refs.compo;
+    const input = timePicker.$el.querySelector('input');
 
     input.blur();
     input.focus();
 
-    Vue.nextTick(_ => {
-      vm.picker.$el.querySelector('.el-time-panel__btn.cancel').click();
+    setTimeout(_ => {
+      timePicker.picker.$el.querySelector('.el-time-panel__btn.cancel').click();
 
-      Vue.nextTick(_ => {
-        expect(vm.picker.currentDate).to.empty;
+      setTimeout(_ => {
+        expect(vm.value).to.equal('');
         done();
-      });
-    });
+      }, DELAY);
+    }, DELAY);
   });
 
   it('click confirm button', done => {
-    vm = createTest(TimePicker, true);
-    const input = vm.$el.querySelector('input');
+    vm = createVue({
+      template: '<el-time-picker ref="compo" v-model="value"></el-time-picker>',
+      data() {
+        return {
+          value: ''
+        };
+      }
+    }, true);
+    const timePicker = vm.$refs.compo;
+    const input = timePicker.$el.querySelector('input');
 
     input.blur();
     input.focus();
 
-    Vue.nextTick(_ => {
-      vm.picker.$el.querySelector('.el-time-panel__btn.confirm').click();
+    setTimeout(_ => {
+      timePicker.picker.$el.querySelector('.el-time-panel__btn.confirm').click();
 
-      Vue.nextTick(_ => {
-        expect(vm.picker.currentDate).to.exist;
+      setTimeout(_ => {
+        expect(vm.value.toISOString()).to.exist;
         done();
-      });
-    });
+      }, DELAY);
+    }, DELAY);
   });
 
   it('set format', done => {
@@ -130,7 +179,6 @@ describe('TimePicker', () => {
 
     setTimeout(_ => {
       expect(vm.picker.$el.querySelectorAll('.el-time-spinner__wrapper')[2].style.display).to.equal('none');
-      destroyVM(vm);
       done();
     }, 20);
   });
@@ -147,15 +195,14 @@ describe('TimePicker', () => {
 
     setTimeout(_ => {
       expect(vm.picker.$el.querySelectorAll('.el-time-spinner__wrapper')[2].style.display).to.equal('none');
-      destroyVM(vm);
       done();
-    }, 20);
+    }, DELAY);
   });
 
   it('selectableRange', done => {
     vm = createTest(TimePicker, {
       pickerOptions: {
-        selectableRange: '18:30:00 - 20:30:00'
+        selectableRange: ['17:30:00 - 18:30:00', '18:50:00 - 20:30:00', '21:00:00 - 22:00:00']
       }
     }, true);
     const input = vm.$el.querySelector('input');
@@ -171,61 +218,135 @@ describe('TimePicker', () => {
         .map(node => Number(node.textContent));
 
       hoursEl.querySelectorAll('.disabled')[0].click();
-      expect(disabledHours).to.not.include.members([18, 19, 20]);
-      destroyVM(vm);
+      expect(disabledHours).to.not.include.members([17, 18, 19, 20, 21, 22]);
+
+      const minutesEl = list[1];
+      hoursEl.querySelectorAll('.el-time-spinner__item')[18].click();
+      setTimeout(_ => {
+        const disabledMinutes = [].slice
+          .call(minutesEl.querySelectorAll('.disabled'))
+          .map(node => Number(node.textContent));
+        expect(disabledMinutes.every(t => t > 30 && t < 50)).to.equal(true);
+        expect(disabledMinutes.length).to.equal(19);
+        done();
+      }, DELAY);
+    }, DELAY);
+  });
+
+  it('event focus and blur', done => {
+    vm = createVue({
+      template: `
+        <el-date-picker
+          type="date"
+          placeholder="选择日期"
+          ref="picker">
+        </el-date-picker>
+      `
+    }, true);
+
+    const spyFocus = sinon.spy();
+    const spyBlur = sinon.spy();
+
+    vm.$refs.picker.$on('focus', spyFocus);
+    vm.$refs.picker.$on('blur', spyBlur);
+    vm.$el.querySelector('input').focus();
+
+    vm.$nextTick(_ => {
+      expect(spyFocus.calledOnce).to.be.true;
+      vm.$refs.picker.pickerVisible = false;
+      vm.$nextTick(_ => {
+        expect(spyBlur.calledOnce).to.be.true;
+        done();
+      });
+    });
+  });
+
+  it('focus', done => {
+    vm = createVue({
+      template: `
+        <el-date-picker
+          type="date"
+          placeholder="选择日期"
+          ref="picker">
+        </el-date-picker>
+      `
+    }, true);
+
+    const spy = sinon.spy();
+
+    vm.$refs.picker.$on('focus', spy);
+    vm.$refs.picker.focus();
+
+    vm.$nextTick(_ => {
+      expect(spy.calledOnce).to.be.true;
       done();
-    }, 20);
+    });
   });
+
 });
 
 describe('TimePicker(range)', () => {
   let vm;
-  beforeEach(done => {
+
+  afterEach(() => destroyVM(vm));
+
+  it('create', done => {
     vm = createTest(TimePicker, {
       isRange: true,
       value: [new Date(2016, 9, 10, 18, 40), new Date(2016, 9, 10, 19, 40)]
     }, true);
-    const input = vm.$el.querySelector('input');
 
-    input.blur();
-    input.focus();
-    input.blur();
-    setTimeout(done, 20);
-  });
+    vm.$el.querySelector('input').click();
 
-  afterEach(() => destroyVM(vm));
-
-  it('create', () => {
-    expect(vm.picker.$el.querySelectorAll('.el-time-range-picker__cell')).to.length(2);
-  });
-
-  it('default value', () => {
-    expect(vm.picker.minTime.getTime()).to.equal(new Date(2016, 9, 10, 18, 40).getTime());
-    expect(vm.picker.maxTime.getTime()).to.equal(new Date(2016, 9, 10, 19, 40).getTime());
+    setTimeout(_ => {
+      expect(vm.picker.$el.querySelectorAll('.el-time-range-picker__cell')).to.length(2);
+      expect(vm.picker.minDate.getTime()).to.equal(new Date(2016, 9, 10, 18, 40).getTime());
+      expect(vm.picker.maxDate.getTime()).to.equal(new Date(2016, 9, 10, 19, 40).getTime());
+      done();
+    }, DELAY);
   });
 
-  it('minTime < maxTime', done => {
-    const vm2 = createTest(TimePicker, {
-      isRange: true,
-      value: [new Date(2016, 9, 10, 23, 40), new Date(2016, 9, 10, 10, 40)]
+  it('default value', done => {
+    const defaultValue = [new Date(2000, 9, 1, 10, 0, 0), new Date(2000, 9, 1, 11, 0, 0)];
+    vm = createVue({
+      template: '<el-time-picker ref="compo" is-range v-model="value" :default-value="defaultValue"></el-time-picker>',
+      data() {
+        return {
+          value: '',
+          defaultValue
+        };
+      }
     }, true);
-    const input = vm2.$el.querySelector('input');
 
-    input.blur();
-    input.focus();
-    input.blur();
-    setTimeout(() => {
-      expect(vm2.picker.maxTime >= vm2.picker.minTime).to.true;
-      destroyVM(vm2);
+    const timePicker = vm.$refs.compo;
+    timePicker.$el.querySelector('input').click();
+
+    setTimeout(_ => {
+      expect(timePicker.picker.minDate.getTime()).to.equal(defaultValue[0].getTime());
+      expect(timePicker.picker.maxDate.getTime()).to.equal(defaultValue[1].getTime());
       done();
-    }, 100);
+    }, DELAY);
   });
 
-  it('click cancel button', done => {
-    vm.picker.$el.querySelector('.el-time-panel__btn.cancel').click();
-    Vue.nextTick(_ => {
-      expect(vm.picker.currentDate).to.empty;
-      done();
-    });
+  it('cancel button', done => {
+    vm = createVue({
+      template: '<el-time-picker ref="compo" is-range v-model="value"></el-time-picker>',
+      data() {
+        return {
+          value: ''
+        };
+      }
+    }, true);
+
+    const timePicker = vm.$refs.compo;
+    timePicker.$el.querySelector('input').click();
+    setTimeout(_ => {
+      timePicker.picker.$el.querySelector('.cancel').click();
+      setTimeout(_ => {
+        expect(timePicker.picker.visible).to.false;
+        expect(vm.value).to.equal('');
+        done();
+      }, DELAY);
+    }, DELAY);
   });
 });
diff --git a/test/unit/specs/time-select.spec.js b/test/unit/specs/time-select.spec.js
index 88eb71c471..d784dc5b6b 100644
--- a/test/unit/specs/time-select.spec.js
+++ b/test/unit/specs/time-select.spec.js
@@ -27,7 +27,6 @@ describe('TimeSelect', () => {
       expect(vm.picker.end).to.equal('18:30');
       expect(vm.picker.step).to.equal('00:15');
       expect(vm.$el.querySelector('input').getAttribute('placeholder')).to.equal('test');
-      destroyVM(vm);
       done();
     });
   });
@@ -60,7 +59,6 @@ describe('TimeSelect', () => {
       target.click();
       Vue.nextTick(_ => {
         expect(vm.value).to.equal(time);
-        destroyVM(vm);
         done();
       });
     });
@@ -79,7 +77,6 @@ describe('TimeSelect', () => {
       expect(input.value).to.equal('14:30');
       expect(vm.picker.$el.querySelector('.selected')).to.be.ok;
       expect(vm.picker.$el.querySelector('.selected').textContent).to.equal('14:30');
-      destroyVM(vm);
       done();
     }, 50);
   });
@@ -104,7 +101,6 @@ describe('TimeSelect', () => {
       const elm = elms[elms.length - 1];
 
       expect(elm.textContent).to.equal('14:30');
-      destroyVM(vm);
       done();
     }, 50);
   });
@@ -134,8 +130,7 @@ describe('TimeSelect', () => {
       vm.value = '10:30';
 
       setTimeout(_ => {
-        expect(picker.picker.value).to.equal('09:30');
-        destroyVM(vm);
+        expect(picker.picker.value).to.equal('10:30');
         done();
       }, 50);
     }, 50);
@@ -161,7 +156,6 @@ describe('TimeSelect', () => {
       const elm = picker.picker.$el.querySelector('.disabled');
 
       expect(elm.textContent).to.equal('14:30');
-      destroyVM(vm);
       done();
     }, 50);
   });
@@ -191,11 +185,59 @@ describe('TimeSelect', () => {
       vm.value = '10:30';
 
       setTimeout(_ => {
-        expect(picker.picker.value).to.equal('09:30');
-        destroyVM(vm);
+        expect(picker.picker.value).to.equal('10:30');
         done();
       }, 50);
     }, 50);
   });
 
+  it('event focus and blur', done => {
+    vm = createVue({
+      template: `
+        <el-time-select
+          ref="picker"
+          :picker-options="{
+            start: '08:30',
+            step: '00:15',
+            end: '18:30'
+          }"
+          placeholder="选择时间">
+        </el-time-select>
+      `
+    }, true);
+
+    const spyFocus = sinon.spy();
+    const spyBlur = sinon.spy();
+
+    vm.$refs.picker.$on('focus', spyFocus);
+    vm.$refs.picker.$on('blur', spyBlur);
+    vm.$el.querySelector('input').focus();
+
+    vm.$nextTick(_ => {
+      expect(spyFocus.calledOnce).to.be.true;
+      vm.$refs.picker.pickerVisible = false;
+      vm.$nextTick(_ => {
+        expect(spyBlur.calledOnce).to.be.true;
+        done();
+      });
+    });
+  });
+
+  it('focus', done => {
+    vm = createVue({
+      template: `
+        <el-time-select ref="picker"></el-time-select>
+      `
+    }, true);
+
+    const spy = sinon.spy();
+
+    vm.$refs.picker.$on('focus', spy);
+    vm.$refs.picker.focus();
+
+    vm.$nextTick(_ => {
+      expect(spy.calledOnce).to.be.true;
+      done();
+    });
+  });
 });
diff --git a/test/unit/specs/tooltip.spec.js b/test/unit/specs/tooltip.spec.js
index ee4e549bef..469e2a9249 100644
--- a/test/unit/specs/tooltip.spec.js
+++ b/test/unit/specs/tooltip.spec.js
@@ -98,4 +98,59 @@ describe('Tooltip', () => {
       done();
     });
   });
+  it('hide after', done => {
+    vm = createVue(`
+      <el-tooltip ref="tooltip" content="提示文字" :hide-after="300">
+        <button>click</button>
+      </el-tooltip>`);
+    const tooltip = vm.$refs.tooltip;
+    vm.$nextTick(_ => {
+      triggerEvent(tooltip.$el, 'mouseenter');
+      setTimeout(() => {
+        expect(tooltip.showPopper).to.be.true;
+        setTimeout(() => {
+          expect(tooltip.showPopper).to.be.false;
+          done();
+        }, 300);
+      }, 100);
+    });
+  });
+  it('remove focus', done => {
+    vm = createVue(`
+    <el-tooltip ref="tooltip" content="提示文字" :hide-after="300">
+      <button>click</button>
+    </el-tooltip>`);
+    const tooltip = vm.$refs.tooltip;
+    vm.$nextTick(_ => {
+      triggerEvent(tooltip.$el, 'mouseenter');
+      setTimeout(() => {
+        tooltip.focusing = true;
+        tooltip.$el.click();
+        setTimeout(() => {
+          expect(tooltip.showPopper).to.be.false;
+          done();
+        }, 300);
+      }, 100);
+    });
+  });
+  it('reference element focus', done => {
+    vm = createVue(`
+    <el-tooltip ref="tooltip" content="提示文字">
+      <button>click</button>
+    </el-tooltip>`);
+    const tooltip = vm.$refs.tooltip;
+    vm.$nextTick(_ => {
+      triggerEvent(tooltip.$el, 'focus');
+      setTimeout(() => {
+        expect(tooltip.showPopper).to.be.true;
+        expect(tooltip.focusing).to.be.true;
+        triggerEvent(tooltip.$el, 'blur');
+        setTimeout(() => {
+          expect(tooltip.showPopper).to.be.false;
+          expect(tooltip.focusing).to.be.false;
+          done();
+        }, 300);
+      }, 100);
+    });
+  });
 });
diff --git a/test/unit/specs/transfer.spec.js b/test/unit/specs/transfer.spec.js
index 1da5cb792d..79ce729146 100644
--- a/test/unit/specs/transfer.spec.js
+++ b/test/unit/specs/transfer.spec.js
@@ -91,11 +91,11 @@ describe('Transfer', () => {
   });
 
   it('customize', () => {
-    vm = createTransfer('v-model="value" :titles="titles" :render-content="renderFunc" :footer-format="format"', {
+    vm = createTransfer('v-model="value" :titles="titles" :render-content="renderFunc" :format="format"', {
       data() {
         return {
           value: [2],
-          titles: ['1', '2'],
+          titles: ['表1', '表2'],
           format: { noChecked: 'no', hasChecked: 'has' },
           renderFunc(h, option) {
             return <span>{ option.key } - { option.label }</span>;
@@ -104,9 +104,10 @@ describe('Transfer', () => {
       }
     });
     const transfer = vm.$refs.transfer.$el;
-    expect(transfer.querySelector('.el-transfer-panel__header').innerText).to.equal('1');
-    expect(transfer.querySelector('.el-checkbox__label span').innerText).to.equal('1 - 备选项 1');
-    expect(transfer.querySelector('.el-transfer-panel__footer .el-checkbox__label').innerText).to.equal('no');
+    const label = transfer.querySelector('.el-transfer-panel__header .el-checkbox__label');
+    expect(label.innerText.indexOf('表1') > -1).to.true;
+    expect(transfer.querySelector('.el-transfer-panel__list .el-checkbox__label span').innerText).to.equal('1 - 备选项 1');
+    expect(label.querySelector('span').innerText).to.equal('no');
   });
 
   it('check', () => {
@@ -121,4 +122,63 @@ describe('Transfer', () => {
     leftList.handleAllCheckedChange({ target: { checked: true } });
     expect(leftList.checked.length).to.equal(12);
   });
+
+  describe('target order', () => {
+    it('original(default)', done => {
+      vm = createTransfer('v-model="value" :left-default-checked="[2, 3]"', {
+        data() {
+          return {
+            value: [1, 4]
+          };
+        }
+      });
+      const transfer = vm.$refs.transfer;
+      setTimeout(() => {
+        transfer.addToRight();
+        setTimeout(() => {
+          const targetItems = [].slice.call(vm.$el.querySelectorAll('.el-transfer__buttons + .el-transfer-panel .el-transfer-panel__body .el-checkbox__label span'));
+          expect(targetItems.map(item => item.innerText)).to.deep.equal(['备选项 1', '备选项 2', '备选项 3', '备选项 4']);
+          done();
+        }, 50);
+      }, 50);
+    });
+
+    it('push', done => {
+      vm = createTransfer('v-model="value" :left-default-checked="[2, 3]" target-order="push"', {
+        data() {
+          return {
+            value: [1, 4]
+          };
+        }
+      });
+      const transfer = vm.$refs.transfer;
+      setTimeout(() => {
+        transfer.addToRight();
+        setTimeout(() => {
+          const targetItems = [].slice.call(vm.$el.querySelectorAll('.el-transfer__buttons + .el-transfer-panel .el-transfer-panel__body .el-checkbox__label span'));
+          expect(targetItems.map(item => item.innerText)).to.deep.equal(['备选项 1', '备选项 4', '备选项 2', '备选项 3']);
+          done();
+        }, 50);
+      }, 50);
+    });
+
+    it('unshift', done => {
+      vm = createTransfer('v-model="value" :left-default-checked="[2, 3]" target-order="unshift"', {
+        data() {
+          return {
+            value: [1, 4]
+          };
+        }
+      });
+      const transfer = vm.$refs.transfer;
+      setTimeout(() => {
+        transfer.addToRight();
+        setTimeout(() => {
+          const targetItems = [].slice.call(vm.$el.querySelectorAll('.el-transfer__buttons + .el-transfer-panel .el-transfer-panel__body .el-checkbox__label span'));
+          expect(targetItems.map(item => item.innerText)).to.deep.equal(['备选项 2', '备选项 3', '备选项 1', '备选项 4']);
+          done();
+        }, 50);
+      }, 50);
+    });
+  });
 });
diff --git a/test/unit/specs/tree.spec.js b/test/unit/specs/tree.spec.js
index 2d049d8262..935919ea51 100644
--- a/test/unit/specs/tree.spec.js
+++ b/test/unit/specs/tree.spec.js
@@ -119,7 +119,7 @@ describe('Tree', () => {
   const ALL_NODE_COUNT = 9;
 
   it('create', () => {
-    vm = getTreeVm(':props="defaultProps"');
+    vm = getTreeVm(':props="defaultProps" default-expand-all');
     expect(document.querySelector('.el-tree')).to.exist;
     expect(document.querySelectorAll('.el-tree > .el-tree-node').length).to.equal(3);
     expect(document.querySelectorAll('.el-tree .el-tree-node').length).to.equal(ALL_NODE_COUNT);
@@ -177,17 +177,27 @@ describe('Tree', () => {
     const firstNode = document.querySelector('.el-tree-node');
     firstNode.click();
     vm.$nextTick(() => {
-      expect(firstNode.className.indexOf('is-current') !== -1);
+      expect(firstNode.className.indexOf('is-current')).to.not.equal(-1);
       done();
     });
   });
 
   it('expandOnNodeClick', done => {
-    vm = getTreeVm(':props="defaultProps" :expand-on-node-click="false"');
+    vm = getTreeVm(':props="defaultProps" :expand-on-click-node="false"');
     const firstNode = document.querySelector('.el-tree-node');
     firstNode.click();
     vm.$nextTick(() => {
-      expect(firstNode.className.indexOf('is-expanded') === -1);
+      expect(firstNode.className.indexOf('is-expanded')).to.equal(-1);
+      done();
+    });
+  });
+
+  it('checkOnNodeClick', done => {
+    vm = getTreeVm(':props="defaultProps" show-checkbox check-on-click-node');
+    const firstNode = document.querySelector('.el-tree-node');
+    firstNode.click();
+    vm.$nextTick(() => {
+      expect(firstNode.querySelector('input').checked).to.true;
       done();
     });
   });
@@ -245,7 +255,7 @@ describe('Tree', () => {
     tree.filter('2-1');
 
     setTimeout(() => {
-      expect(tree.$el.querySelectorAll('.el-tree-node.is-hidden').length).to.equal(7);
+      expect(tree.$el.querySelectorAll('.el-tree-node.is-hidden').length).to.equal(3);
       done();
     }, 100);
   });
@@ -259,13 +269,19 @@ describe('Tree', () => {
     expect(vm.$el.querySelectorAll('.el-tree-node.is-expanded').length).to.equal(3);
   });
 
-  it('autoExpandParent = false', () => {
+  it('autoExpandParent = false', (done) => {
     vm = getTreeVm(':props="defaultProps" :default-expanded-keys="defaultExpandedKeys" node-key="id" :auto-expand-parent="false"', {
       created() {
-        this.defaultExpandedKeys = [111];
+        this.defaultExpandedKeys = [11];
       }
     });
-    expect(vm.$el.querySelectorAll('.el-tree-node.is-expanded').length).to.equal(1);
+    expect(vm.$el.querySelectorAll('.el-tree-node.is-expanded').length).to.equal(0);
+    const firstNode = document.querySelector('.el-tree-node__content');
+    firstNode.querySelector('.el-tree-node__expand-icon').click();
+    setTimeout(() => {
+      expect(document.querySelectorAll('.el-tree-node.is-expanded').length).to.equal(2);
+      done();
+    }, 100);
   });
 
   it('defaultCheckedKeys & check-strictly = false', () => {
@@ -289,34 +305,61 @@ describe('Tree', () => {
   it('show checkbox', done => {
     vm = getTreeVm(':props="defaultProps" show-checkbox');
     const tree = vm.$children[0];
-    const secondNode = document.querySelectorAll('.el-tree-node__content')[3];
+    const secondNode = document.querySelectorAll('.el-tree-node__content')[1];
     const nodeCheckbox = secondNode.querySelector('.el-checkbox');
     expect(nodeCheckbox).to.be.exist;
     nodeCheckbox.click();
-    expect(tree.getCheckedNodes().length).to.equal(3);
-    expect(tree.getCheckedNodes(true).length).to.equal(2);
-    const firstLeaf = secondNode.nextElementSibling.querySelector('.el-tree-node__content');
-    const leafCheckbox = firstLeaf.querySelector('.el-checkbox');
-    vm.$nextTick(() => {
-      leafCheckbox.click();
-      expect(tree.getCheckedNodes().length).to.equal(1);
-      done();
+    setTimeout(() => {
+      expect(tree.getCheckedNodes().length).to.equal(3);
+      expect(tree.getCheckedNodes(true).length).to.equal(2);
+      secondNode.querySelector('.el-tree-node__expand-icon').click();
+      setTimeout(() => {
+        const firstLeaf = secondNode.nextElementSibling.querySelector('.el-tree-node__content');
+        const leafCheckbox = firstLeaf.querySelector('.el-checkbox');
+        leafCheckbox.click();
+        setTimeout(() => {
+          expect(tree.getCheckedNodes().length).to.equal(1);
+          done();
+        }, 10);
+      }, 10);
+    }, 10);
+  });
+
+  it('check', done => {
+    vm = getTreeVm(':props="defaultProps" show-checkbox @check="handleCheck"', {
+      methods: {
+        handleCheck(data, args) {
+          this.data = data;
+          this.args = args;
+        }
+      }
     });
+    const secondNode = document.querySelectorAll('.el-tree-node__content')[1];
+    const nodeCheckbox = secondNode.querySelector('.el-checkbox');
+    expect(nodeCheckbox).to.be.exist;
+    nodeCheckbox.click();
+    setTimeout(() => {
+      expect(vm.args.checkedNodes.length).to.equal(3);
+      expect(vm.data.id).to.equal(2);
+      done();
+    }, 10);
   });
 
   it('setCheckedNodes', (done) => {
     vm = getTreeVm(':props="defaultProps" show-checkbox node-key="id"');
     const tree = vm.$children[0];
-    const secondNode = document.querySelectorAll('.el-tree-node__content')[3];
+    const secondNode = document.querySelectorAll('.el-tree-node__content')[1];
     const nodeCheckbox = secondNode.querySelector('.el-checkbox');
     nodeCheckbox.click();
-    expect(tree.getCheckedNodes().length).to.equal(3);
-    expect(tree.getCheckedNodes(true).length).to.equal(2);
-    vm.$nextTick(() => {
-      tree.setCheckedNodes([]);
-      expect(tree.getCheckedNodes().length).to.equal(0);
-      done();
-    });
+    setTimeout(() => {
+      expect(tree.getCheckedNodes().length).to.equal(3);
+      expect(tree.getCheckedNodes(true).length).to.equal(2);
+      setTimeout(() => {
+        tree.setCheckedNodes([]);
+        expect(tree.getCheckedNodes().length).to.equal(0);
+        done();
+      }, 10);
+    }, 10);
   });
 
   it('setCheckedKeys', () => {
@@ -399,8 +442,104 @@ describe('Tree', () => {
     }, 0);
   });
 
+  it('setCurrentKey', (done) => {
+    vm = getTreeVm(':props="defaultProps" show-checkbox node-key="id"');
+    const tree = vm.$children[0];
+    tree.setCurrentKey(111);
+    vm.$nextTick(() => {
+      expect(tree.store.currentNode.data.id).to.equal(111);
+      // cancel highlight
+      tree.setCurrentKey(null);
+      vm.$nextTick(() => {
+        expect(tree.store.currentNode).to.equal(null);
+        done();
+      });
+    });
+  });
+
+  it('setCurrentNode', (done) => {
+    vm = getTreeVm(':props="defaultProps" show-checkbox node-key="id"');
+    const tree = vm.$children[0];
+    tree.setCurrentNode({
+      id: 111,
+      label: '三级 1-1'
+    });
+    vm.$nextTick(() => {
+      expect(tree.store.currentNode.data.id).to.equal(111);
+      done();
+    });
+  });
+
+  it('getCurrentKey', (done) => {
+    vm = getTreeVm(':props="defaultProps" show-checkbox node-key="id"');
+    const tree = vm.$children[0];
+    tree.setCurrentKey(111);
+    vm.$nextTick(() => {
+      expect(tree.getCurrentKey()).to.equal(111);
+      done();
+    });
+  });
+
+  it('getCurrentNode', (done) => {
+    vm = getTreeVm(':props="defaultProps" show-checkbox node-key="id"');
+    const tree = vm.$children[0];
+    tree.setCurrentKey(111);
+    vm.$nextTick(() => {
+      expect(tree.getCurrentNode().id).to.equal(111);
+      done();
+    });
+  });
+
+  it('getNode', () => {
+    vm = getTreeVm(':props="defaultProps" node-key="id"');
+    const tree = vm.$children[0];
+    const node = tree.getNode(111);
+    expect(node.data.id).to.equal(111);
+  });
+
+  it('remove', (done) => {
+    vm = getTreeVm(':props="defaultProps" node-key="id"');
+    const tree = vm.$children[0];
+    tree.remove(1);
+    vm.$nextTick(() => {
+      expect(vm.data[0].id).to.equal(2);
+      expect(tree.getNode(1)).to.equal(null);
+      done();
+    });
+  });
+
+  it('append', () => {
+    vm = getTreeVm(':props="defaultProps" node-key="id"');
+    const tree = vm.$children[0];
+    const nodeData = { id: 88, label: '88' };
+    tree.append(nodeData, tree.getNode(1));
+
+    expect(vm.data[0].children.length).to.equal(2);
+    expect(tree.getNode(88).data).to.equal(nodeData);
+  });
+
+  it('insertBefore', () => {
+    vm = getTreeVm(':props="defaultProps" node-key="id"');
+    const tree = vm.$children[0];
+    const nodeData = { id: 88, label: '88' };
+    tree.insertBefore(nodeData, tree.getNode(11));
+    expect(vm.data[0].children.length).to.equal(2);
+    expect(vm.data[0].children[0]).to.equal(nodeData);
+    expect(tree.getNode(88).data).to.equal(nodeData);
+  });
+
+  it('insertAfter', () => {
+    vm = getTreeVm(':props="defaultProps" node-key="id"');
+    const tree = vm.$children[0];
+    const nodeData = { id: 88, label: '88' };
+    tree.insertAfter(nodeData, tree.getNode(11));
+    expect(vm.data[0].children.length).to.equal(2);
+    expect(vm.data[0].children[1]).to.equal(nodeData);
+    expect(tree.getNode(88).data).to.equal(nodeData);
+  });
+
   it('set disabled checkbox', done => {
-    vm = getDisableTreeVm(':props="defaultProps" show-checkbox node-key="id"');
+    vm = getDisableTreeVm(':props="defaultProps" show-checkbox node-key="id" default-expand-all');
     const node = document.querySelectorAll('.el-tree-node__content')[2];
     const nodeCheckbox = node.querySelector('.el-checkbox input');
     vm.$nextTick(() => {
@@ -410,7 +549,7 @@ describe('Tree', () => {
   });
 
   it('check strictly', (done) => {
-    vm = getTreeVm(':props="defaultProps" show-checkbox check-strictly');
+    vm = getTreeVm(':props="defaultProps" show-checkbox check-strictly default-expand-all');
     const tree = vm.$children[0];
     const secondNode = document.querySelectorAll('.el-tree-node__content')[3];
     const nodeCheckbox = secondNode.querySelector('.el-checkbox');
@@ -445,6 +584,63 @@ describe('Tree', () => {
     expect(button.textContent).to.equal('一级 1');
   });
 
+  it('scoped slot', () => {
+    vm = createVue({
+      template: `
+        <el-tree ref="tree" :data="data">
+          <div slot-scope="scope" class="custom-tree-template">
+            <span>{{ scope.node.label }}</span>
+            <el-button></el-button>
+          </div>
+        </el-tree>
+        `,
+
+      data() {
+        return {
+          data: [{
+            id: 1,
+            label: '一级 1',
+            children: [{
+              id: 11,
+              label: '二级 1-1',
+              children: [{
+                id: 111,
+                label: '三级 1-1'
+              }]
+            }]
+          }, {
+            id: 2,
+            label: '一级 2',
+            children: [{
+              id: 21,
+              label: '二级 2-1'
+            }, {
+              id: 22,
+              label: '二级 2-2'
+            }]
+          }, {
+            id: 3,
+            label: '一级 3',
+            children: [{
+              id: 31,
+              label: '二级 3-1'
+            }, {
+              id: 32,
+              label: '二级 3-2'
+            }]
+          }]
+        };
+      }
+    }, true);
+    const firstNode = document.querySelector('.custom-tree-template');
+    expect(firstNode).to.exist;
+    const span = firstNode.querySelector('span');
+    const button = firstNode.querySelector('.el-button');
+    expect(span).to.exist;
+    expect(span.innerText).to.equal('一级 1');
+    expect(button).to.exist;
+  });
+
   it('load node', done => {
     vm = getTreeVm(':props="defaultProps" lazy :load="loadNode" show-checkbox', {
       methods: {
@@ -463,15 +659,109 @@ describe('Tree', () => {
         }
       }
     });
-    const firstNode = document.querySelector('.el-tree-node__content');
-    expect(firstNode.nextElementSibling.childNodes.length).to.equal(0);
-    firstNode.click();
+    const nodes = document.querySelectorAll('.el-tree-node__content');
+    expect(nodes.length).to.equal(2);
+    nodes[0].click();
     setTimeout(() => {
-      expect(firstNode.nextElementSibling.childNodes.length).to.equal(2);
+      expect(document.querySelectorAll('.el-tree-node__content').length).to.equal(4);
       done();
     }, 100);
   });
 
+  it('lazy defaultChecked', done => {
+    vm = getTreeVm(':props="defaultProps" node-key="id" lazy :load="loadNode" show-checkbox', {
+      methods: {
+        loadNode(node, resolve) {
+          if (node.level === 0) {
+            return resolve([{ label: 'region1', id: this.count++ }, { label: 'region2', id: this.count++ }]);
+          }
+          if (node.level > 4) return resolve([]);
+          setTimeout(() => {
+            resolve([{
+              label: 'zone' + this.count,
+              id: this.count++
+            }, {
+              label: 'zone' + this.count,
+              id: this.count++
+            }]);
+          }, 50);
+        }
+      }
+    });
+    const tree = vm.$children[0];
+    const firstNode = document.querySelector('.el-tree-node__content');
+    const initStatus = firstNode.querySelector('.is-indeterminate');
+    expect(initStatus).to.equal(null);
+    tree.store.setCheckedKeys([3]);
+    firstNode.querySelector('.el-tree-node__expand-icon').click();
+    setTimeout(() => {
+      const clickStatus = firstNode.querySelector('.is-indeterminate');
+      expect(clickStatus).to.not.equal(null);
+      const child = document.querySelectorAll('.el-tree-node__content')[1];
+      expect(child.querySelector('input').checked).to.equal(true);
+      done();
+    }, 300);
+  });
+
+  it('lazy expandOnChecked', done => {
+    vm = getTreeVm(':props="defaultProps" node-key="id" lazy :load="loadNode" show-checkbox check-descendants', {
+      methods: {
+        loadNode(node, resolve) {
+          if (node.level === 0) {
+            return resolve([{ label: 'region1', id: this.count++ }, { label: 'region2', id: this.count++ }]);
+          }
+          if (node.level > 2) return resolve([]);
+          setTimeout(() => {
+            resolve([{
+              label: 'zone' + this.count,
+              id: this.count++
+            }, {
+              label: 'zone' + this.count,
+              id: this.count++
+            }]);
+          }, 10);
+        }
+      }
+    });
+    const tree = vm.$children[0];
+    tree.store.setCheckedKeys([1]);
+    setTimeout(() => {
+      const checkedKeys = tree.getCheckedKeys();
+      expect(checkedKeys.length).to.equal(7);
+      done();
+    }, 400);
+  });
+
+  it('lazy without expandOnChecked', done => {
+    vm = getTreeVm(':props="defaultProps" node-key="id" lazy :load="loadNode" show-checkbox', {
+      methods: {
+        loadNode(node, resolve) {
+          if (node.level === 0) {
+            return resolve([{ label: 'region1', id: this.count++ }, { label: 'region2', id: this.count++ }]);
+          }
+          if (node.level > 4) return resolve([]);
+          setTimeout(() => {
+            resolve([{
+              label: 'zone' + this.count,
+              id: this.count++
+            }, {
+              label: 'zone' + this.count,
+              id: this.count++
+            }]);
+          }, 50);
+        }
+      }
+    });
+    const tree = vm.$children[0];
+    tree.store.setCheckedKeys([1]);
+    setTimeout(() => {
+      const nodes = document.querySelectorAll('.el-tree-node__content');
+      expect(nodes[0].querySelector('input').checked).to.equal(true);
+      expect(nodes.length).to.equal(2);
+      done();
+    }, 300);
+  });
+
   it('accordion', done => {
     vm = getTreeVm(':props="defaultProps" accordion');
     const firstNode = vm.$el.querySelector('.el-tree-node__content');
@@ -514,7 +804,7 @@ describe('Tree', () => {
       }
     });
     const firstNode = document.querySelector('.el-tree-node__content');
-    expect(firstNode.nextElementSibling.childNodes.length).to.equal(0);
+    expect(firstNode.nextElementSibling).to.not.exist;
     firstNode.click();
     setTimeout(() => {
       expect(vm.nodeExpended).to.equal(true);
@@ -527,4 +817,21 @@ describe('Tree', () => {
       }, 100);
     }, 100);
   });
+
+  it('updateKeyChildren', (done) => {
+    vm = getTreeVm(':props="defaultProps" show-checkbox node-key="id" default-expand-all');
+    const tree = vm.$children[0];
+    tree.updateKeyChildren(1, [{
+      id: 111,
+      label: '三级 1-1'
+    }]);
+    const node = document.querySelectorAll('.el-tree-node__content')[2];
+    const label = node.querySelector('.el-tree-node__label');
+    vm.$nextTick(() => {
+      expect(tree.store.nodesMap['11']).to.equal(undefined);
+      expect(tree.store.nodesMap['1'].childNodes[0].data.id).to.equal(111);
+      expect(label.textContent).to.equal('三级 1-1');
+      done();
+    });
+  });
 });
diff --git a/test/unit/specs/upload.spec.js b/test/unit/specs/upload.spec.js
index 3d34ee100b..fb5ab8d838 100644
--- a/test/unit/specs/upload.spec.js
+++ b/test/unit/specs/upload.spec.js
@@ -41,7 +41,7 @@ describe('ajax', () => {
   });
   it('40x code should be error', done => {
     option.onError = e => {
-      expect(e.toString()).to.contain('404 Not found');
+      expect(e.toString()).to.contain('Not found');
       done();
     };
 
@@ -74,9 +74,6 @@ describe('Upload', () => {
   });
 
   describe('ajax upload', () => {
-    if (typeof FormData === 'undefined') {
-      return;
-    }
 
     let uploader;
     let handlers = {};
@@ -85,22 +82,39 @@ describe('Upload', () => {
       props: {
         action: '/upload',
         onSuccess(res, file, fileList) {
-          console.log('onSuccess', res);
           if (handlers.onSuccess) {
             handlers.onSuccess(res, file, fileList);
           }
         },
         onError(err, file, fileList) {
-          console.log('onError', err, file, fileList);
           if (handlers.onError) {
             handlers.onError(err, file, fileList);
           }
         },
         onPreview(file) {
-          console.log('onPreview', file);
           if (handlers.onPreview) {
             handlers.onPreview(file);
           }
+        },
+        limit: 2,
+        onExceed(files, fileList) {
+          if (handlers.onExceed) {
+            handlers.onExceed(files, fileList);
+          }
+        },
+        beforeUpload(file) {
+          if (handlers.beforeUpload) {
+            return handlers.beforeUpload(file);
+          } else {
+            return true;
+          }
+        },
+        beforeRemove(file, fileList) {
+          if (handlers.beforeRemove) {
+            return handlers.beforeRemove(file);
+          } else {
+            return true;
+          }
         }
       }
     };
@@ -123,10 +137,11 @@ describe('Upload', () => {
     });
 
     it('upload success', done => {
-      const files = [{
-        name: 'success.png',
-        type: 'xml'
-      }];
+      const file = new Blob([JSON.stringify({}, null, 2)], {
+        type: 'application/json'
+      });
+      file.name = 'success.png';
+      const files = [file];
 
       handlers.onSuccess = (res, file, fileList) => {
         expect(file.name).to.equal('success.png');
@@ -143,10 +158,11 @@ describe('Upload', () => {
     });
 
     it('upload fail', done => {
-      const files = [{
-        name: 'fail.png',
-        type: 'xml'
-      }];
+      const file = new Blob([JSON.stringify({}, null, 2)], {
+        type: 'application/json'
+      });
+      file.name = 'fail.png';
+      const files = [file];
 
       handlers.onError = (err, file, fileList) => {
         expect(err instanceof Error).to.equal(true);
@@ -161,10 +177,11 @@ describe('Upload', () => {
       }, 100);
     });
     it('preview file', done => {
-      const files = [{
-        name: 'success.png',
-        type: 'xml'
-      }];
+      const file = new Blob([JSON.stringify({}, null, 2)], {
+        type: 'application/json'
+      });
+      file.name = 'success.png';
+      const files = [file];
 
       handlers.onPreview = (file) => {
         expect(file.response).to.equal('success.png');
@@ -184,10 +201,11 @@ describe('Upload', () => {
       }, 100);
     });
     it('file remove', done => {
-      const files = [{
-        name: 'success.png',
-        type: 'xml'
-      }];
+      const file = new Blob([JSON.stringify({}, null, 2)], {
+        type: 'application/json'
+      });
+      file.name = 'success.png';
+      const files = [file];
 
       handlers.onSuccess = (res, file, fileList) => {
         uploader.$el.querySelector('.el-upload-list .el-icon-close').click();
@@ -204,10 +222,11 @@ describe('Upload', () => {
       }, 100);
     });
     it('clear files', done => {
-      const files = [{
-        name: 'success.png',
-        type: 'xml'
-      }];
+      const file = new Blob([JSON.stringify({}, null, 2)], {
+        type: 'application/json'
+      });
+      file.name = 'success.png';
+      const files = [file];
 
       handlers.onSuccess = (res, file, fileList) => {
         uploader.clearFiles();
@@ -223,5 +242,76 @@ describe('Upload', () => {
         requests[0].respond(200, {}, `${files[0].name}`);
       }, 100);
     });
+    it('beforeUpload return promise', done => {
+      const spy = sinon.spy();
+      const file = new Blob([JSON.stringify({}, null, 2)], {
+        type: 'application/json'
+      });
+      const files = [file];
+      handlers.onSuccess = () => {
+        expect(spy.calledOnce).to.equal(true);
+        done();
+      };
+      handlers.beforeUpload = (file) => {
+        return new window.Promise((resolve) => {
+          spy();
+          resolve(file);
+        });
+      };
+      uploader.$refs['upload-inner'].handleChange({ target: { files }});
+      setTimeout(() => {
+        requests[0].respond(200, {}, `${files[0].name}`);
+      }, 100);
+    });
+    it('beforeRemove return rejected promise', done => {
+      const spy = sinon.spy();
+      handlers.beforeRemove = (file) => {
+        return new window.Promise((resolve, reject) => {
+          spy();
+          reject();
+        });
+      };
+      const file = new Blob([JSON.stringify({}, null, 2)], {
+        type: 'application/json'
+      });
+      file.name = 'success.png';
+      const files = [file];
+
+      handlers.onSuccess = (res, file, fileList) => {
+        uploader.$el.querySelector('.el-upload-list .el-icon-close').click();
+        setTimeout(() => {
+          expect(spy.calledOnce).to.equal(true);
+          expect(uploader.uploadFiles.length).to.equal(1);
+          done();
+        }, 200);
+      };
+      uploader.$refs['upload-inner'].handleChange({ target: { files }});
+      setTimeout(() => {
+        requests[0].respond(200, {}, `${files[0].name}`);
+      }, 100);
+    });
+    it('limit files', done => {
+      const files = [{
+        name: 'exceed2.png',
+        type: 'xml'
+      }, {
+        name: 'exceed3.png',
+        type: 'xml'
+      }];
+
+      uploader.uploadFiles = [{
+        name: 'exceed1.png',
+        type: 'xml'
+      }];
+
+      handlers.onExceed = (files, fileList) => {
+        uploader.$nextTick(_ => {
+          expect(uploader.uploadFiles.length).to.equal(1);
+          done();
+        });
+      };
+
+      uploader.$nextTick(_ => uploader.$refs['upload-inner'].handleChange({ target: { files }}));
+    });
   });
 });
diff --git a/test/unit/util.js b/test/unit/util.js
index 10511905ec..15f7dc2bce 100644
--- a/test/unit/util.js
+++ b/test/unit/util.js
@@ -19,6 +19,7 @@ const createElm = function() {
  * @param  {Object} vm
  */
 exports.destroyVM = function(vm) {
+  vm.$destroy && vm.$destroy();
   vm.$el &&
   vm.$el.parentNode &&
   vm.$el.parentNode.removeChild(vm.$el);
@@ -93,3 +94,15 @@ exports.triggerClick = function(elm, ...opts) {
 
   return elm;
 };
+
+/**
+ * 触发 keydown 事件
+ * @param {Element} elm
+ * @param {keyCode} int
+ */
+exports.triggerKeyDown = function(el, keyCode) {
+  const evt = document.createEvent('Events');
+  evt.initEvent('keydown', true, true);
+  evt.keyCode = keyCode;
+  el.dispatchEvent(evt);
+};
diff --git a/types/alert.d.ts b/types/alert.d.ts
new file mode 100644
index 0000000000..374a580677
--- /dev/null
+++ b/types/alert.d.ts
@@ -0,0 +1,27 @@
+import { ElementUIComponent } from './component'
+
+export type AlertType = 'success' | 'warning' | 'info' | 'error'
+
+/** Alert Component */
+export declare class ElAlert extends ElementUIComponent {
+  /** Title */
+  title: string
+
+  /** Component type */
+  type: AlertType
+
+  /** Descriptive text. Can also be passed with the default slot */
+  description: string
+
+  /** If closable or not */
+  closable: boolean
+
+  /** whether to center the text */
+  center: boolean
+
+  /** Customized close button text */
+  closeText: string
+
+  /** If a type icon is displayed */
+  showIcon: boolean
+}
diff --git a/types/aside.d.ts b/types/aside.d.ts
new file mode 100644
index 0000000000..1d51fea703
--- /dev/null
+++ b/types/aside.d.ts
@@ -0,0 +1,7 @@
+import { ElementUIComponent } from './component'
+
+/** Aside Component */
+export declare class ElAside extends ElementUIComponent {
+  /** Width of the side section */
+  width: string
+}
diff --git a/types/autocomplete.d.ts b/types/autocomplete.d.ts
new file mode 100644
index 0000000000..5d8589ba66
--- /dev/null
+++ b/types/autocomplete.d.ts
@@ -0,0 +1,75 @@
+import { ElementUIComponent } from './component'
+
+export type SuggestionPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'
+
+export interface FetchSuggestionsCallback {
+  /**
+   * Callback function used in fetch-suggestions function
+   *
+   * @param data Suggestions to use
+   */
+  (data: any[]): void
+}
+
+export interface FetchSuggestions {
+  /**
+   * The function passed into the fetch-suggestions property
+   *
+   * @param queryString Current value of the text input
+   * @param callback Callback function used to indicate that suggestions have completely fetched
+   */
+  (queryString: string, callback: FetchSuggestionsCallback): void
+}
+
+/** Autocomplete Component */
+export declare class ElAutocomplete extends ElementUIComponent {
+  /** The placeholder of Autocomplete */
+  placeholder: string
+
+  /** Whether Autocomplete is disabled */
+  disabled: boolean
+
+  /** Binding value */
+  value: string
+
+  /** Debounce delay when typing */
+  debounce: number
+
+  /** Placement of the popup menu */
+  placement: SuggestionPlacement
+
+  /** Name for the inner native input */
+  name: string
+
+  /** Key name of the input suggestion object for display */
+  valueKey: string
+
+  /** Whether to emit select event on enter when there is no autocomplete match */
+  selectWhenUnmatched: boolean
+
+  /** A method to fetch input suggestions. When suggestions are ready, invoke callback(data:[]) to return them to Autocomplete */
+  fetchSuggestions: FetchSuggestions
+
+  /** Custom class name for autocomplete's dropdown */
+  popperClass: string
+
+  /** Whether show suggestions when input focus */
+  triggerOnFocus: boolean
+
+  /** Prefix icon class */
+  prefixIcon: string
+
+  /** Suffix icon class */
+  suffixIcon: string
+
+  /** Whether to hide the loading icon in remote search */
+  hideLoading: boolean
+
+  /** Whether to append the dropdown to body */
+  popperAppendToBody: boolean
+
+  /**
+   * Focus the Input component
+   */
+  focus (): void
+}
diff --git a/types/badge.d.ts b/types/badge.d.ts
new file mode 100644
index 0000000000..38e763f86d
--- /dev/null
+++ b/types/badge.d.ts
@@ -0,0 +1,16 @@
+import { ElementUIComponent } from './component'
+
+/** Badge Component */
+export declare class ElBadge extends ElementUIComponent {
+  /** Display value */
+  value: string | number
+
+  /** Maximum value, shows '{max}+' when exceeded. Only works if `value` is a number */
+  max: number
+
+  /** If a little dot is displayed */
+  isDot: boolean
+
+  /** Hidden badge */
+  hidden: boolean
+}
diff --git a/types/breadcrumb-item.d.ts b/types/breadcrumb-item.d.ts
new file mode 100644
index 0000000000..fb55c25759
--- /dev/null
+++ b/types/breadcrumb-item.d.ts
@@ -0,0 +1,10 @@
+import { ElementUIComponent } from './component'
+
+/** Breadcrumb Item Component */
+export declare class ElBreadcrumbItem extends ElementUIComponent {
+  /** Target route of the link, same as to of vue-router */
+  to: string | object
+
+  /** If true, the navigation will not leave a history record */
+  replace: boolean
+}
diff --git a/types/breadcrumb.d.ts b/types/breadcrumb.d.ts
new file mode 100644
index 0000000000..24d5ef7abc
--- /dev/null
+++ b/types/breadcrumb.d.ts
@@ -0,0 +1,10 @@
+import { ElementUIComponent } from './component'
+
+/** Displays the location of the current page, making it easier to browser back */
+export declare class ElBreadcrumb extends ElementUIComponent {
+  /** Separator character */
+  separator: string
+
+  /** Class name of the icon separator */
+  separatorClass: string
+}
diff --git a/types/button-group.d.ts b/types/button-group.d.ts
new file mode 100644
index 0000000000..e8738bde0d
--- /dev/null
+++ b/types/button-group.d.ts
@@ -0,0 +1,4 @@
+import { ElementUIComponent } from './component'
+
+/** Button Group Component */
+export declare class ElButtonGroup extends ElementUIComponent {}
diff --git a/types/button.d.ts b/types/button.d.ts
new file mode 100644
index 0000000000..b81b8f6e1a
--- /dev/null
+++ b/types/button.d.ts
@@ -0,0 +1,37 @@
+import { ElementUIComponent, ElementUIComponentSize } from './component'
+
+/** Button type */
+export type ButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
+
+/** Same as native button's type */
+export type ButtonNativeType = 'button' | 'submit' | 'reset' | 'menu'
+
+/** Button Component */
+export declare class ElButton extends ElementUIComponent {
+  /** Button size */
+  size: ElementUIComponentSize
+
+  /** Button type */
+  type: ButtonType
+
+  /** Determine whether it's a plain button */
+  plain: boolean
+
+  /** Determine whether it's a round button */
+  round: boolean
+
+  /** Determine whether it's loading */
+  loading: boolean
+
+  /** Disable the button */
+  disabled: boolean
+
+  /** Button icon, accepts an icon name of Element icon component */
+  icon: string
+
+  /** Same as native button's autofocus */
+  autofocus: boolean
+
+  /** Same as native button's type */
+  nativeType: ButtonNativeType
+}
diff --git a/types/card.d.ts b/types/card.d.ts
new file mode 100644
index 0000000000..7c5f122920
--- /dev/null
+++ b/types/card.d.ts
@@ -0,0 +1,26 @@
+import { VNode, VNodeDirective } from 'vue'
+import { ElementUIComponent } from './component'
+
+export interface CardSlots {
+  /** Content of the card */
+  default: VNode[],
+
+  /** Title of the card */
+  header: VNode[]
+
+  [key: string]: VNode[]
+}
+
+/** Integrate information in a card container */
+export declare class ElCard extends ElementUIComponent {
+  /** Title of the card */
+  header: string
+
+  /** CSS style of body */
+  bodyStyle: object
+
+  /** When to show card shadows */
+  shadow: string
+
+  $slots: CardSlots
+}
diff --git a/types/carousel-item.d.ts b/types/carousel-item.d.ts
new file mode 100644
index 0000000000..9ae7ce2077
--- /dev/null
+++ b/types/carousel-item.d.ts
@@ -0,0 +1,10 @@
+import { ElementUIComponent } from './component'
+
+/** Carousel Item Component */
+export declare class ElCarouselItem extends ElementUIComponent {
+  /** Name of the item, can be used in setActiveItem */
+  name: string
+
+  /** Text content for the corresponding indicator */
+  label: string
+}
diff --git a/types/carousel.d.ts b/types/carousel.d.ts
new file mode 100644
index 0000000000..04f5414b37
--- /dev/null
+++ b/types/carousel.d.ts
@@ -0,0 +1,53 @@
+import { ElementUIComponent } from './component'
+
+export type CarouselIndicatorTrigger = 'hover' | 'click'
+export type CarouselIndicatorPosition = 'outside' | 'none'
+export type CarouselArrowVisibility = 'always' | 'hover' | 'never'
+export type CarouselType = 'card'
+
+/** Loop a series of images or texts in a limited space */
+export declare class ElCarousel extends ElementUIComponent {
+  /** Height of the carousel */
+  height: number
+
+  /** Index of the initially active slide (starting from 0) */
+  initialIndex: number
+
+  /** How indicators are triggered */
+  trigger: CarouselIndicatorTrigger
+
+  /** Whether automatically loop the slides */
+  autoplay: boolean
+
+  /** Interval of the auto loop, in milliseconds */
+  interval: number
+
+  /** Position of the indicators */
+  indicatorPosition: CarouselIndicatorPosition
+
+  /** When arrows are shown */
+  arrow: CarouselArrowVisibility
+
+  /** Type of the Carousel */
+  type: CarouselType
+
+  /**
+   * Manually switch slide by index
+   *
+   * @param index Index of the slide to be switched to (starting from 0)
+   */
+  setActiveItem (index: number): void
+
+  /**
+   * Manually switch slide by carousel item's name
+   *
+   * @param name The name of the corresponding `el-carousel-item`
+   */
+  setActiveItem (name: string): void
+
+  /** Switch to the previous slide */
+  prev (): void
+
+  /** Switch to the next slide */
+  next (): void
+}
diff --git a/types/cascader.d.ts b/types/cascader.d.ts
new file mode 100644
index 0000000000..a602b6a1e6
--- /dev/null
+++ b/types/cascader.d.ts
@@ -0,0 +1,57 @@
+import { ElementUIComponent, ElementUIComponentSize } from './component'
+
+/** Trigger mode of expanding current item */
+export type ExpandTrigger = 'click' | 'hover'
+
+/** Cascader Option */
+export interface CascaderOption {
+  label: string,
+  value: any,
+  children: CascaderOption[],
+  disabled: boolean
+}
+
+/** Cascader Component */
+export declare class ElCascader extends ElementUIComponent {
+  /** Data of the options */
+  options: CascaderOption[]
+
+  /** Configuration options */
+  props: object
+
+  /** Selected value */
+  value: any[]
+
+  /** Custom class name for Cascader's dropdown */
+  popperClass: string
+
+  /** Input placeholder */
+  placeholder: string
+
+  /** Whether Cascader is disabled */
+  disabled: boolean
+
+  /** Whether selected value can be cleared */
+  clearable: boolean
+
+  /** Trigger mode of expanding current item */
+  expandTrigger: ExpandTrigger
+
+  /** Whether to display all levels of the selected value in the input */
+  showAllLevels: boolean
+
+  /** Whether the options can be searched */
+  filterable: boolean
+
+  /** Debounce delay when typing filter keyword, in millisecond */
+  debounce: number
+
+  /** Whether selecting an option of any level is permitted */
+  changeOnSelect: boolean
+
+  /** Size of Input */
+  size: ElementUIComponentSize
+
+  /** Hook function before filtering with the value to be filtered as its parameter */
+  beforeFilter: (value: string) => boolean | Promise<any>
+}
diff --git a/types/checkbox-button.d.ts b/types/checkbox-button.d.ts
new file mode 100644
index 0000000000..dce7562f0a
--- /dev/null
+++ b/types/checkbox-button.d.ts
@@ -0,0 +1,22 @@
+import { ElementUIComponent } from './component'
+
+/** Checkbox Button Component */
+export declare class ElCheckboxButton extends ElementUIComponent {
+  /** Value of the checkbox when used inside a checkbox-group */
+  label: string | number | boolean
+
+  /** Value of the checkbox if it's checked */
+  trueLabel: string | number
+
+  /** Value of the checkbox if it's not checked */
+  falseLabel: string | number
+
+  /** Native 'name' attribute */
+  name: string
+
+  /** If the checkbox is disabled */
+  disabled: boolean
+
+  /** If the checkbox is checked */
+  checked: boolean
+}
diff --git a/types/checkbox-group.d.ts b/types/checkbox-group.d.ts
new file mode 100644
index 0000000000..250554c810
--- /dev/null
+++ b/types/checkbox-group.d.ts
@@ -0,0 +1,22 @@
+import { ElementUIComponent, ElementUIComponentSize } from './component'
+
+/** Checkbox Group Component */
+export declare class ElCheckboxGroup extends ElementUIComponent {
+  /** Size of checkbox buttons or bordered checkboxes */
+  size: ElementUIComponentSize
+
+  /** Whether the nesting checkboxes are disabled */
+  disabled: boolean
+
+  /** Minimum number of checkbox checked */
+  min: number
+
+  /** Maximum number of checkbox checked */
+  max: number
+
+  /** Font color when button is active */
+  textColor: string
+
+  /** Border and background color when button is active */
+  fill: string
+}
diff --git a/types/checkbox.d.ts b/types/checkbox.d.ts
new file mode 100644
index 0000000000..aec7c574c4
--- /dev/null
+++ b/types/checkbox.d.ts
@@ -0,0 +1,34 @@
+import { ElementUIComponent, ElementUIComponentSize } from './component'
+
+/** Checkbox Component */
+export declare class ElCheckbox extends ElementUIComponent {
+  /** The form input value */
+  value: string | string[]
+
+  /** Value of the checkbox when used inside a checkbox-group */
+  label: string | number | boolean
+
+  /** Value of the checkbox if it's checked */
+  trueLabel: string | number
+
+  /** Value of the checkbox if it's not checked */
+  falseLabel: string | number
+
+  /** Native 'name' attribute */
+  name: string
+
+  /** Whether to add a border around Checkbox */
+  border: boolean
+
+  /** Size of the Checkbox, only works when border is true */
+  size: ElementUIComponentSize
+
+  /** If the checkbox is disabled */
+  disabled: boolean
+
+  /** If the checkbox is checked */
+  checked: boolean
+
+  /** Same as indeterminate in native checkbox */
+  indeterminate: boolean
+}
diff --git a/types/col.d.ts b/types/col.d.ts
new file mode 100644
index 0000000000..bbdb33297e
--- /dev/null
+++ b/types/col.d.ts
@@ -0,0 +1,46 @@
+import { ElementUIComponent } from './component'
+
+/** Responsive column props */
+export interface ResponsiveColumnProperties {
+  /** Number of column the grid spans */
+  span: number,
+
+  /** Number of spacing on the left side of the grid */
+  offset: number
+}
+
+/** Responsive column property */
+export type ResponsiveColumn = number | ResponsiveColumnProperties
+
+/** Colunm Layout Component */
+export declare class ElCol extends ElementUIComponent {
+  /** Number of column the grid spans */
+  span: number
+
+  /** Number of spacing on the left side of the grid */
+  offset: number
+
+  /** Number of columns that grid moves to the right */
+  push: number
+
+  /** Number of columns that grid moves to the left */
+  pull: number
+
+  /** <768px Responsive columns or column props object */
+  xs: ResponsiveColumn
+
+  /** ≥768px Responsive columns or column props object */
+  sm: ResponsiveColumn
+
+  /** ≥992px Responsive columns or column props object */
+  md: ResponsiveColumn
+
+  /** ≥1200px Responsive columns or column props object */
+  lg: ResponsiveColumn
+
+  /** ≥1920px Responsive columns or column props object */
+  xl: ResponsiveColumn
+
+  /** custom element tag */
+  tag: string
+}
diff --git a/types/collapse-item.d.ts b/types/collapse-item.d.ts
new file mode 100644
index 0000000000..135ce20d7d
--- /dev/null
+++ b/types/collapse-item.d.ts
@@ -0,0 +1,23 @@
+import { VNode } from 'vue'
+import { ElementUIComponent } from './component'
+
+export interface CollapseItemSlots {
+  /** Content of the collapse item */
+  default: VNode[],
+
+  /** Title of the collapse item */
+  title: VNode[]
+
+  [key: string]: VNode[]
+}
+
+/** Collapse Item Component */
+export declare class ElCollapseItem extends ElementUIComponent {
+  /** Unique identification of the panel */
+  name: string | number
+
+  /** Title of the panel */
+  title: string
+
+  $slots: CollapseItemSlots
+}
diff --git a/types/collapse.d.ts b/types/collapse.d.ts
new file mode 100644
index 0000000000..78af337260
--- /dev/null
+++ b/types/collapse.d.ts
@@ -0,0 +1,10 @@
+import { ElementUIComponent } from './component'
+
+/** Use Collapse to store contents. */
+export declare class ElCollapse extends ElementUIComponent {
+  /** Whether to activate accordion mode */
+  accordion: boolean
+
+  /** Currently active panel */
+  value: string | number | string[] | number[]
+}
diff --git a/types/color-picker.d.ts b/types/color-picker.d.ts
new file mode 100644
index 0000000000..a3bc53c149
--- /dev/null
+++ b/types/color-picker.d.ts
@@ -0,0 +1,21 @@
+import { ElementUIComponent, ElementUIComponentSize } from './component'
+
+export type ColorFormat = 'hsl' | 'hsv' | 'hex' | 'rgb'
+
+/** ColorPicker Component */
+export declare class ElColorPicker extends ElementUIComponent {
+  /** Whether to display the alpha slider */
+  showAlpha: boolean
+
+  /** Whether to disable the ColorPicker */
+  disabled: boolean
+
+  /** Size of ColorPicker */
+  size: ElementUIComponentSize
+
+  /** Whether to display the alpha slider */
+  popperClass: string
+
+  /** Custom class name for ColorPicker's dropdown */
+  colorFormat: ColorFormat
+}
diff --git a/types/component.d.ts b/types/component.d.ts
new file mode 100644
index 0000000000..61bf6bc06e
--- /dev/null
+++ b/types/component.d.ts
@@ -0,0 +1,13 @@
+import Vue from 'vue'
+
+/** ElementUI component common definition */
+export declare class ElementUIComponent extends Vue {
+  /** Install component into Vue */
+  static install (vue: typeof Vue): void
+}
+
+/** Component size definition for button, input, etc */
+export type ElementUIComponentSize = 'large' | 'medium' | 'small' | 'mini'
+
+/** Horizontal alignment */
+export type ElementUIHorizontalAlignment = 'left' | 'center' | 'right'
diff --git a/types/container.d.ts b/types/container.d.ts
new file mode 100644
index 0000000000..b0fc5d5d3d
--- /dev/null
+++ b/types/container.d.ts
@@ -0,0 +1,7 @@
+import { ElementUIComponent } from './component'
+
+/** Container Component */
+export declare class ElContainer extends ElementUIComponent {
+  /** Layout direction for child elements */
+  direction: 'horizontal' | 'vertical'
+}
diff --git a/types/date-picker.d.ts b/types/date-picker.d.ts
new file mode 100644
index 0000000000..b4e9e6f406
--- /dev/null
+++ b/types/date-picker.d.ts
@@ -0,0 +1,124 @@
+import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'
+
+export type DatePickerType = 'year' | 'month' | 'date' | 'datetime' | 'week' | 'datetimerange' | 'daterange' | 'dates'
+export type FirstDayOfWeek = 1 | 2 | 3 | 4 | 5 | 6 | 7
+
+export interface DisabledDateChecker {
+  /**
+   * Determine if `date` will be disabled in the picker
+   *
+   * @param date The date to check
+   * @returns if `date` will be disabled in the picker
+   */
+  (date: Date): boolean
+}
+
+// Picked date range
+export interface DateRange {
+  minDate: Date,
+  maxDate: Date
+}
+
+export interface PickEventHandler {
+  /**
+   * Callback function that triggers when picks a date range
+   *
+   * @param dateRange The selected date range
+   */
+  (dateRange: DateRange): void
+}
+
+export interface ShortcutClickEventHandler {
+  /**
+   * Callback function that triggers when clicking on a shortcut.
+   * You can change the picker value by emitting the pick event.
+   * Example: `vm.$emit('pick', new Date())`
+   */
+  (vm: ElDatePicker): void
+}
+
+/** Shortcut options */
+export interface Shortcut {
+  /** Title of the shortcut */
+  text: string,
+
+  /** Callback function that triggers when picks a date range */
+  onClick?: ShortcutClickEventHandler
+}
+
+/** Options of el-date-picker */
+export interface DatePickerOptions {
+  /** An object array to set shortcut options */
+  shortcuts?: Shortcut[]
+
+  /** A function determining if a date is disabled. */
+  disabledDate?: DisabledDateChecker
+
+  /** First day of week */
+  firstDayOfWeek?: FirstDayOfWeek
+
+  /** A callback that triggers when the seleted date is changed. Only for daterange and datetimerange. */
+  onPick?: PickEventHandler
+}
+
+/** DatePicker Component */
+export declare class ElDatePicker extends ElementUIComponent {
+  /** The value of the date picker */
+  value: Date | string | Date[] | string[]
+
+  /** Whether DatePicker is read only */
+  readonly: boolean
+
+  /** Whether DatePicker is disabled */
+  disabled: boolean
+
+  /** Size of Input */
+  size: ElementUIComponentSize
+
+  /** Whether the input is editable */
+  editable: boolean
+
+  /** Whether to show clear button */
+  clearable: boolean
+
+  /** Placeholder */
+  placeholder: string
+
+  /** Placeholder for the start date in range mode */
+  startPlaceholder: string
+
+  /** Placeholder for the end date in range mode */
+  endPlaceholder: string
+
+  /** Type of the picker */
+  type: DatePickerType
+
+  /** Format of the picker */
+  format: string
+
+  /** Alignment */
+  align: ElementUIHorizontalAlignment
+
+  /** Custom class name for DatePicker's dropdown */
+  popperClass: string
+
+  /** Additional options, check the table below */
+  pickerOptions: DatePickerOptions
+
+  /** Range separator */
+  rangeSeparator: string
+
+  /** Default date of the calendar */
+  defaultValue: Date | number | string
+
+  /** Format of binding value. If not specified, the binding value will be a Date object */
+  valueFormat: string
+
+  /** name for the inner native input */
+  name: string
+
+  /**
+   * Focus the Input component
+   */
+  focus (): void
+}
diff --git a/types/dialog.d.ts b/types/dialog.d.ts
new file mode 100644
index 0000000000..85c7e3ff53
--- /dev/null
+++ b/types/dialog.d.ts
@@ -0,0 +1,59 @@
+import { VNode } from 'vue'
+import { ElementUIComponent } from './component'
+
+export interface DialogSlots {
+  /** Content of the Dialog */
+  default: VNode[],
+
+  /** Content of the Dialog title */
+  title: VNode[],
+
+  /** Content of the Dialog footer */
+  footer: VNode[],
+
+  [key: string]: VNode[]
+}
+
+/** Informs users while preserving the current page state */
+export declare class ElDialog extends ElementUIComponent {
+  /** Title of Dialog */
+  title: string
+
+  /** Width of Dialog */
+  width: string
+
+  /** Whether the Dialog takes up full screen */
+  fullscreen: boolean
+
+  /** Value for margin-top of Dialog CSS */
+  top: string
+
+  /** Whether a mask is displayed */
+  modal: boolean
+
+  /** Whether to append modal to body element. If false, the modal will be appended to Dialog's parent element */
+  modalAppendToBody: boolean
+
+  /** Whether scroll of body is disabled while Dialog is displayed */
+  lockScroll: boolean
+
+  /** Custom class names for Dialog */
+  customClass: string
+
+  /** Whether the Dialog can be closed by clicking the mask */
+  closeOnClickModal: boolean
+
+  /** Whether the Dialog can be closed by pressing ESC */
+  closeOnPressEscape: boolean
+
+  /** Whether to show a close button */
+  showClose: boolean
+
+  /** Callback before Dialog closes, and it will prevent Dialog from closing */
+  beforeClose: (done: Function) => void
+
+  /** Whether to align the header and footer in center */
+  center: boolean
+
+  $slots: DialogSlots
+}
diff --git a/types/dropdown-item.d.ts b/types/dropdown-item.d.ts
new file mode 100644
index 0000000000..0fb9b451a3
--- /dev/null
+++ b/types/dropdown-item.d.ts
@@ -0,0 +1,13 @@
+import { ElementUIComponent } from './component'
+
+/** Toggleable menu for displaying lists of links and actions. */
+export declare class ElDropdownItem extends ElementUIComponent {
+  /** A command to be dispatched to Dropdown's command callback */
+  command: string | number | object
+
+  /** Whether the item is disabled */
+  disabled: boolean
+
+  /** Whether a divider is displayed */
+  divided: boolean
+}
diff --git a/types/dropdown-menu.d.ts b/types/dropdown-menu.d.ts
new file mode 100644
index 0000000000..74dc4b8b8e
--- /dev/null
+++ b/types/dropdown-menu.d.ts
@@ -0,0 +1,4 @@
+import { ElementUIComponent } from './component'
+
+/** Dropdown Menu Component */
+export declare class ElDropdownMenu extends ElementUIComponent {}
diff --git a/types/dropdown.d.ts b/types/dropdown.d.ts
new file mode 100644
index 0000000000..02b0112f6f
--- /dev/null
+++ b/types/dropdown.d.ts
@@ -0,0 +1,26 @@
+import { ElementUIComponent, ElementUIComponentSize } from './component'
+import { ButtonType } from './button'
+
+export type DropdownMenuAlignment = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'
+export type DropdownMenuTrigger = 'hover' | 'click'
+
+/** Toggleable menu for displaying lists of links and actions */
+export declare class ElDropdown extends ElementUIComponent {
+  /** Menu button type. only works when split-button is true */
+  type: ButtonType
+
+  /** Whether a button group is displayed */
+  splitButton: boolean
+
+  /** menu size, also works on the split button */
+  size: ElementUIComponentSize
+
+  /** Placement of the menu */
+  placement: DropdownMenuAlignment
+
+  /** How to trigger */
+  trigger: DropdownMenuTrigger
+
+  /** Whether to hide menu after clicking menu-item */
+  hideOnClick: boolean
+}
diff --git a/types/element-ui.d.ts b/types/element-ui.d.ts
new file mode 100644
index 0000000000..6411cdb53a
--- /dev/null
+++ b/types/element-ui.d.ts
@@ -0,0 +1,294 @@
+import Vue from 'vue'
+import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'
+
+import { ElAlert } from './alert'
+import { ElAside } from './aside'
+import { ElAutocomplete } from './autocomplete'
+import { ElBadge } from './badge'
+import { ElBreadcrumb } from './breadcrumb'
+import { ElBreadcrumbItem } from './breadcrumb-item'
+import { ElButton } from './button'
+import { ElButtonGroup } from './button-group'
+import { ElCard } from './card'
+import { ElCarousel } from './carousel'
+import { ElCarouselItem } from './carousel-item'
+import { ElCascader } from './cascader'
+import { ElCheckbox } from './checkbox'
+import { ElCheckboxButton } from './checkbox-button'
+import { ElCheckboxGroup } from './checkbox-group'
+import { ElCol } from './col'
+import { ElCollapse } from './collapse'
+import { ElCollapseItem } from './collapse-item'
+import { ElColorPicker } from './color-picker'
+import { ElContainer } from './container'
+import { ElDatePicker } from './date-picker'
+import { ElDialog } from './dialog'
+import { ElDropdown } from './dropdown'
+import { ElDropdownItem } from './dropdown-item'
+import { ElDropdownMenu } from './dropdown-menu'
+import { ElFooter } from './footer'
+import { ElForm } from './form'
+import { ElFormItem } from './form-item'
+import { ElHeader } from './header'
+import { ElInput } from './input'
+import { ElInputNumber } from './input-number'
+import { ElLoading } from './loading'
+import { ElMain } from './main'
+import { ElMenu } from './menu'
+import { ElMenuItem } from './menu-item'
+import { ElMenuItemGroup } from './menu-item-group'
+import { ElMessage } from './message'
+import { ElMessageBox } from './message-box'
+import { ElNotification } from './notification'
+import { ElOption } from './option'
+import { ElOptionGroup } from './option-group'
+import { ElPagination } from './pagination'
+import { ElPopover } from './popover'
+import { ElProgress } from './progress'
+import { ElRate } from './rate'
+import { ElRadio } from './radio'
+import { ElRadioButton } from './radio-button'
+import { ElRadioGroup } from './radio-group'
+import { ElRow } from './row'
+import { ElSelect } from './select'
+import { ElSlider } from './slider'
+import { ElStep } from './step'
+import { ElSteps } from './steps'
+import { ElSubmenu } from './submenu'
+import { ElSwitch } from './switch'
+import { ElTable } from './table'
+import { ElTableColumn } from './table-column'
+import { ElTag } from './tag'
+import { ElTabs } from './tabs'
+import { ElTabPane } from './tab-pane'
+import { ElTimePicker } from './time-picker'
+import { ElTimeSelect } from './time-select'
+import { ElTooltip } from './tooltip'
+import { ElTransfer } from './transfer'
+import { ElTree } from './tree'
+import { ElUpload } from './upload'
+
+export interface InstallationOptions {
+  locale: any,
+  i18n: any,
+  size: string
+}
+
+/** The version of element-ui */
+export const version: string
+
+/**
+ * Install all element-ui components into Vue.
+ * Please do not invoke this method directly.
+ * Call `Vue.use(ElementUI)` to install.
+ */
+export function install (vue: typeof Vue, options: InstallationOptions): void
+
+/** ElementUI component common definition */
+export type Component = ElementUIComponent
+
+/** Component size definition for button, input, etc */
+export type ComponentSize = ElementUIComponentSize
+
+/** Horizontal alignment */
+export type HorizontalAlignment = ElementUIHorizontalAlignment
+
+/** Show animation while loading data */
+export const Loading: ElLoading
+
+/** Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification. */
+export const Message: ElMessage
+
+/** A set of modal boxes simulating system message box, mainly for message prompt, success tips, error messages and query information */
+export const MessageBox: ElMessageBox
+
+/** Displays a global notification message at the upper right corner of the page */
+export const Notification: ElNotification
+
+// TS cannot merge imported class with namespace, so declare subclasses instead
+
+/** Alert Component */
+export class Alert extends ElAlert {}
+
+/** Aside Component */
+export class Aside extends ElAside {}
+
+/** Autocomplete Component */
+export class Autocomplete extends ElAutocomplete {}
+
+/** Bagde Component */
+export class Badge extends ElBadge {}
+
+/** Breadcrumb Component */
+export class Breadcrumb extends ElBreadcrumb {}
+
+/** Breadcrumb Item Component */
+export class BreadcrumbItem extends ElBreadcrumbItem {}
+
+/** Button Component */
+export class Button extends ElButton {}
+
+/** Button Group Component */
+export class ButtonGroup extends ElButtonGroup {}
+
+/** Card Component */
+export class Card extends ElCard {}
+
+/** Cascader Component */
+export class Cascader extends ElCascader {}
+
+/** Carousel Component */
+export class Carousel extends ElCarousel {}
+
+/** Carousel Item Component */
+export class CarouselItem extends ElCarouselItem {}
+
+/** Checkbox Component */
+export class Checkbox extends ElCheckbox {}
+
+/** Checkbox Button Component */
+export class CheckboxButton extends ElCheckboxButton {}
+
+/** Checkbox Group Component */
+export class CheckboxGroup extends ElCheckboxGroup {}
+
+/** Colunm Layout Component */
+export class Col extends ElCol {}
+
+/** Collapse Component */
+export class Collapse extends ElCollapse {}
+
+/** Collapse Item Component */
+export class CollapseItem extends ElCollapseItem {}
+
+/** Color Picker Component */
+export class ColorPicker extends ElColorPicker {}
+
+/** Container Component */
+export class Container extends ElContainer {}
+
+/** Date Picker Component */
+export class DatePicker extends ElDatePicker {}
+
+/** Dialog Component */
+export class Dialog extends ElDialog {}
+
+/** Dropdown Component */
+export class Dropdown extends ElDropdown {}
+
+/** Dropdown Item Component */
+export class DropdownItem extends ElDropdownItem {}
+
+/** Dropdown Menu Component */
+export class DropdownMenu extends ElDropdownMenu {}
+
+/** Footer Component */
+export class Footer extends ElFooter {}
+
+/** Form Component */
+export class Form extends ElForm {}
+
+/** Form Item Component */
+export class FormItem extends ElFormItem {}
+
+/** Header Component */
+export class Header extends ElHeader {}
+
+/** Input Component */
+export class Input extends ElInput {}
+
+/** Input Number Component */
+export class InputNumber extends ElInputNumber {}
+
+/** Main Component */
+export class Main extends ElMain {}
+
+/** Menu that provides navigation for your website */
+export class Menu extends ElMenu {}
+
+/** Menu Item Component */
+export class MenuItem extends ElMenuItem {}
+
+/** Menu Item Group Component */
+export class MenuItemGroup extends ElMenuItemGroup {}
+
+/** Dropdown Select Option Component */
+export class Option extends ElOption {}
+
+/** Dropdown Select Option Group Component */
+export class OptionGroup extends ElOptionGroup {}
+
+/** Pagination Component */
+export class Pagination extends ElPagination {}
+
+/** Popover Component */
+export class Popover extends ElPopover {}
+
+/** Progress Component */
+export class Progress extends ElProgress {}
+
+/** Rate Component */
+export class Rate extends ElRate {}
+
+/** Radio Component */
+export class Radio extends ElRadio {}
+
+/** Radio Button Component */
+export class RadioButton extends ElRadioButton {}
+
+/** Radio Group Component */
+export class RadioGroup extends ElRadioGroup {}
+
+/** Row Layout Component */
+export class Row extends ElRow {}
+
+/** Dropdown Select Component */
+export class Select extends ElSelect {}
+
+/** Slider Component */
+export class Slider extends ElSlider {}
+
+/** Step Component */
+export class Step extends ElStep {}
+
+/** Steps Component */
+export class Steps extends ElSteps {}
+
+/** Submenu Component */
+export class Submenu extends ElSubmenu {}
+
+/** Switch Component */
+export class Switch extends ElSwitch {}
+
+/** Table Component */
+export class Table extends ElTable {}
+
+/** Table Column Component */
+export class TableColumn extends ElTableColumn {}
+
+/** Tabs Component */
+export class Tabs extends ElTabs {}
+
+/** Tab Pane Component */
+export class TabPane extends ElTabPane {}
+
+/** Tag Component */
+export class Tag extends ElTag {}
+
+/** TimePicker Component */
+export class TimePicker extends ElTimePicker {}
+
+/** TimeSelect Component */
+export class TimeSelect extends ElTimeSelect {}
+
+/** Tooltip Component */
+export class Tooltip extends ElTooltip {}
+
+/** Transfer Component */
+export class Transfer extends ElTransfer {}
+
+/** Tree Component */
+export class Tree extends ElTree {}
+
+/** Upload Component */
+export class Upload extends ElUpload {}
diff --git a/types/footer.d.ts b/types/footer.d.ts
new file mode 100644
index 0000000000..16ea27d26f
--- /dev/null
+++ b/types/footer.d.ts
@@ -0,0 +1,7 @@
+import { ElementUIComponent } from './component'
+
+/** Footer Component */
+export declare class ElFooter extends ElementUIComponent {
+  /** Height of the footer */
+  height: string
+}
diff --git a/types/form-item.d.ts b/types/form-item.d.ts
new file mode 100644
index 0000000000..fdbd68e723
--- /dev/null
+++ b/types/form-item.d.ts
@@ -0,0 +1,37 @@
+import { ElementUIComponent, ElementUIComponentSize } from './component'
+
+/** FormItem Component */
+export declare class ElFormItem extends ElementUIComponent {
+  /** A key of `model` of the enclosing `el-form` component */
+  prop: string
+
+  /** Label */
+  label: string
+
+  /** Width of label, e.g. '50px' */
+  labelWidth: string
+
+  /** Whether the field is required or not, will be determined by validation rules if omitted */
+  required: boolean
+
+  /** Validation rules of form */
+  rules: object
+
+  /** Field error message, set its value and the field will validate error and show this message immediately */
+  error: string
+
+  /** Whether to show the error message */
+  showMessage: boolean
+
+  /** Whether to display the error message inline with the form item */
+  inlineMessage: boolean
+
+  /** Controls the size of components in this form */
+  size: ElementUIComponentSize
+
+  /** Reset current field and remove validation result */
+  resetField (): void
+
+  /** Remove validation status of the field */
+  clearValidate (): void
+}
diff --git a/types/form.d.ts b/types/form.d.ts
new file mode 100644
index 0000000000..c0e35eae69
--- /dev/null
+++ b/types/form.d.ts
@@ -0,0 +1,82 @@
+import { ElementUIComponent, ElementUIComponentSize } from './component'
+
+export type FormItemLabelPosition = 'left' | 'right' | 'top'
+
+export interface ValidateCallback {
+  /**
+   * The callback to tell the validation result
+   *
+   * @param isValid Whether the form is valid
+   * @param invalidFields fields that fail validation
+   */
+  (isValid: boolean, invalidFields: object): void
+}
+
+export interface ValidateFieldCallback {
+  /**
+   * The callback to tell the field validation result
+   *
+   * @param errorMessage The error message. It will be empty if there is no error
+   */
+  (errorMessage: string): void
+}
+
+/** Form Component */
+export declare class ElForm extends ElementUIComponent {
+  /** Data of form component */
+  model: object
+
+  /** Validation rules of form */
+  rules: object
+
+  /** Whether the form is inline */
+  inline: boolean
+
+  /** Whether the form is disabled */
+  disabled: boolean
+
+  /** Position of label */
+  labelPosition: FormItemLabelPosition
+
+  /** Width of label, and all form items will inherit from Form */
+  labelWidth: string
+
+  /** Suffix of the label */
+  labelSuffix: string
+
+  /** Whether to show the error message */
+  showMessage: boolean
+
+  /** Whether to display the error message inline with the form item */
+  inlineMessage: boolean
+
+  /** Whether to display an icon indicating the validation result */
+  statusIcon: boolean
+
+  /** Whether to trigger validation when the `rules` prop is changed */
+  validateOnRuleChange: boolean
+
+  /** Controls the size of components in this form */
+  size: ElementUIComponentSize
+
+  /**
+   * Validate the whole form
+   *
+   * @param callback A callback to tell the validation result
+   */
+  validate (callback: ValidateCallback): void
+  validate (): Promise<boolean>
+  /**
+   * Validate a certain form item
+   *
+   * @param prop The property of `model` that is going to validate
+   * @param callback A callback to tell the field validation result
+   */
+  validateField (prop: string, callback: ValidateFieldCallback): void
+
+  /** reset all the fields and remove validation result */
+  resetFields (): void
+  
+  /** clear validation message for certain fields */
+  clearValidate (props?: string[]): void
+}
diff --git a/types/header.d.ts b/types/header.d.ts
new file mode 100644
index 0000000000..bb63b82090
--- /dev/null
+++ b/types/header.d.ts
@@ -0,0 +1,7 @@
+import { ElementUIComponent } from './component'
+
+/** Header Component */
+export declare class ElHeader extends ElementUIComponent {
+  /** Height of the header */
+  height: string
+}
diff --git a/types/index.d.ts b/types/index.d.ts
new file mode 100644
index 0000000000..b02a041fe0
--- /dev/null
+++ b/types/index.d.ts
@@ -0,0 +1,4 @@
+export * from './element-ui'
+
+import * as ElementUI from './element-ui'
+export default ElementUI
diff --git a/types/input-number.d.ts b/types/input-number.d.ts
new file mode 100644
index 0000000000..deec6f59bc
--- /dev/null
+++ b/types/input-number.d.ts
@@ -0,0 +1,44 @@
+import { ElementUIComponent } from './component'
+
+export type InputNumberSize = 'large' | 'small'
+
+/** InputNumber Component */
+export declare class ElInputNumber extends ElementUIComponent {
+  /** Binding value */
+  value: number
+
+  /** The minimum allowed value */
+  min: number
+
+  /** The maximum allowed value */
+  max: number
+
+  /** Incremental step */
+  step: number
+
+  /** Size of the component */
+  size: InputNumberSize
+
+  /** Whether the component is disabled */
+  disabled: boolean
+
+  /** Whether to enable the control buttons */
+  controls: boolean
+
+  /** Debounce delay when typing, in milliseconds */
+  debounce: number
+
+  /** Position of the control buttons */
+  controlsPosition: string
+
+  /** Same as name in native input */
+  name: string
+
+  /** Precision of input value */
+  precision: Number
+
+  /**
+   * Focus the Input component
+   */
+  focus (): void
+}
diff --git a/types/input.d.ts b/types/input.d.ts
new file mode 100644
index 0000000000..5d02b43831
--- /dev/null
+++ b/types/input.d.ts
@@ -0,0 +1,95 @@
+import { ElementUIComponent, ElementUIComponentSize } from './component'
+
+/** The resizability of el-input component */
+export type Resizability = 'none' | 'both' | 'horizontal' | 'vertical'
+export type InputType = 'text' | 'textarea'
+
+/** Controls how el-input component automatically sets size */
+export interface AutoSize {
+  /** Minimum rows to show */
+  minRows: number,
+
+  /** Maximum rows to show */
+  maxRows: number
+}
+
+/** Input Component */
+export declare class ElInput extends ElementUIComponent {
+  /** Type of input */
+  type: InputType
+
+  /** Binding value */
+  value: string | number
+
+  /** Maximum Input text length */
+  maxlength: number
+
+  /** Minimum Input text length */
+  minlength: number
+
+  /** Placeholder of Input */
+  placeholder: string
+
+  /** Whether Input is disabled */
+  disabled: boolean
+
+  /** Size of Input, works when type is not 'textarea' */
+  size: ElementUIComponentSize
+
+  /** Prefix icon class */
+  prefixIcon: string
+
+  /** Suffix icon class */
+  suffixIcon: string
+
+  /** Number of rows of textarea, only works when type is 'textarea' */
+  rows: number
+
+  /** Whether textarea has an adaptive height, only works when type is 'textarea' */
+  autosize: boolean | AutoSize
+
+  /** @Deprecated in next major version */
+  autoComplete: string
+
+  /** Same as autocomplete in native input */
+  autocomplete: string
+
+  /** Same as name in native input */
+  name: string
+
+  /** Same as readonly in native input */
+  readonly: boolean
+
+  /** Same as max in native input */
+  max: any
+
+  /** Same as min in native input */
+  min: any
+
+  /** Same as step in native input */
+  step: any
+
+  /** Control the resizability */
+  resize: Resizability
+
+  /** Same as autofocus in native input */
+  autofocus: boolean
+
+  /** Same as form in native input */
+  form: string
+
+  /**
+   * Focus the Input component
+   */
+  focus (): void
+
+  /**
+   * Blur the Input component
+   */
+  blur (): void
+
+  /**
+   * Select the text in input element
+   */
+  select (): void
+}
diff --git a/types/loading.d.ts b/types/loading.d.ts
new file mode 100644
index 0000000000..e86df3edb3
--- /dev/null
+++ b/types/loading.d.ts
@@ -0,0 +1,62 @@
+import Vue, { VNodeDirective } from 'vue'
+
+/** Options used in Loading service */
+export interface LoadingServiceOptions {
+  /** The DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to `document.querySelector` to get the corresponding DOM node */
+  target?: HTMLElement | string
+
+  /** Whether to make the mask append to the body element */
+  body?: boolean
+
+  /** Whether to show the loading mask in fullscreen */
+  fullscreen?: boolean
+
+  /** Whether to disable scrolling on body */
+  lock?: boolean
+
+  /** Loading text that displays under the spinner */
+  text?: string
+
+  /** Class name of the custom spinner */
+  spinner?: string
+
+  /** Background color of the mask */
+  background?: string
+
+  /** Custom class name for Loading */
+  customClass?: string
+}
+
+/** Loading Component */
+export declare class ElLoadingComponent extends Vue {
+  /** Close the Loading instance */
+  close (): void
+}
+
+/** Loading directive definition */
+export interface ElLoadingDirective extends VNodeDirective {
+  name: 'loading',
+  value: boolean,
+  modifiers: {
+    body: boolean,
+    fullscreen: boolean
+  }
+}
+
+/** Show animation while loading data */
+export interface ElLoading {
+  /** Install Loading directive into Vue */
+  install (vue: typeof Vue): void
+
+  /** If you do not have a specific DOM node to attach the Loading directive, or if you simply prefer not to use Loading as a directive, you can call this service with some configs to open a Loading instance. */
+  service (options: LoadingServiceOptions): ElLoadingComponent
+
+  directive: object
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    /** If you do not have a specific DOM node to attach the Loading directive, or if you simply prefer not to use Loading as a directive, you can call this service with some configs to open a Loading instance. */
+    $loading (options: LoadingServiceOptions): ElLoadingComponent
+  }
+}
diff --git a/types/main.d.ts b/types/main.d.ts
new file mode 100644
index 0000000000..5b16bbc7b4
--- /dev/null
+++ b/types/main.d.ts
@@ -0,0 +1,4 @@
+import { ElementUIComponent } from './component'
+
+/** Main Component */
+export declare class ElMain extends ElementUIComponent {}
diff --git a/types/menu-item-group.d.ts b/types/menu-item-group.d.ts
new file mode 100644
index 0000000000..cbdaa1ac0f
--- /dev/null
+++ b/types/menu-item-group.d.ts
@@ -0,0 +1,7 @@
+import { ElementUIComponent } from './component'
+
+/** Menu Item Group Component */
+export declare class ElMenuItemGroup extends ElementUIComponent {
+  /** Group title */
+  title: string
+}
diff --git a/types/menu-item.d.ts b/types/menu-item.d.ts
new file mode 100644
index 0000000000..30d3db573c
--- /dev/null
+++ b/types/menu-item.d.ts
@@ -0,0 +1,10 @@
+import { ElementUIComponent } from './component'
+
+/** Menu Item Component */
+export declare class ElMenuItem extends ElementUIComponent {
+  /** Unique identification */
+  index: string
+
+  /** Vue Router object */
+  route: object
+}
diff --git a/types/menu.d.ts b/types/menu.d.ts
new file mode 100644
index 0000000000..0f04d2428c
--- /dev/null
+++ b/types/menu.d.ts
@@ -0,0 +1,46 @@
+import { ElementUIComponent } from './component'
+
+export type MenuDisplayMode = 'horizontal' | 'vertical'
+export type MenuTheme = 'light' | 'dark'
+
+/** Menu that provides navigation for your website */
+export declare class ElMenu extends ElementUIComponent {
+  /** Menu display mode */
+  mode: MenuDisplayMode
+
+  /** Whether the menu is collapsed (available only in vertical mode) */
+  collapse: boolean
+
+  /** Background color of Menu (hex format) */
+  backgroundColor: string
+
+  /** Text color of Menu (hex format) */
+  textColor: string
+
+  /** Text color of currently active menu item (hex format) */
+  activeTextColor: string
+
+  /** Index of currently active menu */
+  defaultActive: string
+
+  /** Array that contains keys of currently active sub-menus */
+  defaultOpeneds: string[]
+
+  /** Whether only one sub-menu can be active */
+  uniqueOpened: boolean
+
+  /** How sub-menus are triggered, only works when mode is 'horizontal' */
+  menuTrigger: string
+
+  /** Whether vue-router mode is activated. If true, index will be used as 'path' to activate the route action */
+  router: boolean
+
+  /** Whether the menu collapse transition is active */
+  collapseTransition: boolean
+  
+  /** Open the specified sub-menu */
+  open (index: string): void
+
+  /** Close the specified sub-menu */
+  close (index: string): void
+}
diff --git a/types/message-box.d.ts b/types/message-box.d.ts
new file mode 100644
index 0000000000..0622c2b238
--- /dev/null
+++ b/types/message-box.d.ts
@@ -0,0 +1,176 @@
+import Vue, { VNode } from 'vue'
+import { MessageType } from './message'
+
+export type MessageBoxCloseAction = 'confirm' | 'cancel' | 'close'
+export type MessageBoxData = MessageBoxInputData
+
+export interface MessageBoxInputData {
+  value: string,
+  action: MessageBoxCloseAction
+}
+
+export interface MessageBoxInputValidator {
+  (value: string): boolean | string
+}
+
+export declare class ElMessageBoxComponent extends Vue {
+  title: string
+  message: string
+  type: MessageType
+  iconClass: string
+  customClass: string
+  showInput: boolean
+  showClose: boolean
+  inputValue: string
+  inputPlaceholder: string
+  inputType: string
+  inputPattern: RegExp
+  inputValidator: MessageBoxInputValidator
+  inputErrorMessage: string
+  showConfirmButton: boolean
+  showCancelButton: boolean
+  action: MessageBoxCloseAction
+  dangerouslyUseHTMLString: boolean
+  confirmButtonText: string
+  cancelButtonText: string
+  confirmButtonLoading: boolean
+  cancelButtonLoading: boolean
+  confirmButtonClass: string
+  confirmButtonDisabled: boolean
+  cancelButtonClass: string
+  editorErrorMessage: string
+}
+
+/** Options used in MessageBox */
+export interface ElMessageBoxOptions {
+  /** Title of the MessageBox */
+  title?: string
+
+  /** Content of the MessageBox */
+  message?: string | VNode
+
+  /** Message type, used for icon display */
+  type?: MessageType
+
+  /** Custom icon's class */
+  iconClass?: string
+
+  /** Custom class name for MessageBox */
+  customClass?: string
+
+  /** MessageBox closing callback if you don't prefer Promise */
+  callback?: (action: MessageBoxCloseAction, instance: ElMessageBoxComponent) => void
+
+  /** Callback before MessageBox closes, and it will prevent MessageBox from closing */
+  beforeClose?: (action: MessageBoxCloseAction, instance: ElMessageBoxComponent, done: (() => void)) => void
+
+  /** Whether to lock body scroll when MessageBox prompts */
+  lockScroll?: boolean
+
+  /** Whether to show a cancel button */
+  showCancelButton?: boolean
+
+  /** Whether to show a confirm button */
+  showConfirmButton?: boolean
+
+  /** Whether to show a close button */
+  showClose?: boolean
+
+  /** Text content of cancel button */
+  cancelButtonText?: string
+
+  /** Text content of confirm button */
+  confirmButtonText?: string
+
+  /** Custom class name of cancel button */
+  cancelButtonClass?: string
+
+  /** Custom class name of confirm button */
+  confirmButtonClass?: string
+
+  /** Whether to align the content in center */
+  center?: boolean
+
+  /** Whether message is treated as HTML string */
+  dangerouslyUseHTMLString?: boolean
+
+  /** Whether to use round button */
+  roundButton?: boolean
+
+  /** Whether MessageBox can be closed by clicking the mask */
+  closeOnClickModal?: boolean
+
+  /** Whether MessageBox can be closed by pressing the ESC */
+  closeOnPressEscape?: boolean
+
+  /** Whether to close MessageBox when hash changes */
+  closeOnHashChange?: boolean
+
+  /** Whether to show an input */
+  showInput?: boolean
+
+  /** Placeholder of input */
+  inputPlaceholder?: string
+
+  /** Initial value of input */
+  inputValue?: string
+
+  /** Regexp for the input */
+  inputPattern?: RegExp
+
+  /** Input Type: text, textArea, password or number */
+  inputType?: string
+
+  /** Validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage */
+  inputValidator?: MessageBoxInputValidator
+
+  /** Error message when validation fails */
+  inputErrorMessage?: string
+
+  /** Whether to distinguish canceling and closing */
+  distinguishCancelAndClose?: boolean
+}
+
+export interface ElMessageBoxShortcutMethod {
+  (message: string, title: string, options?: ElMessageBoxOptions): Promise<MessageBoxData>
+  (message: string, options?: ElMessageBoxOptions): Promise<MessageBoxData>
+}
+
+export interface ElMessageBox {
+  /** Show a message box */
+  (message: string, title?: string, type?: string): Promise<MessageBoxData>
+
+  /** Show a message box */
+  (options: ElMessageBoxOptions): Promise<MessageBoxData>
+
+  /** Show an alert message box */
+  alert: ElMessageBoxShortcutMethod
+
+  /** Show a confirm message box */
+  confirm: ElMessageBoxShortcutMethod
+
+  /** Show a prompt message box */
+  prompt: ElMessageBoxShortcutMethod
+
+  /** Set default options of message boxes */
+  setDefaults (defaults: ElMessageBoxOptions): void
+
+  /** Close current message box */
+  close (): void
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    /** Show a message box */
+    $msgbox: ElMessageBox
+
+    /** Show an alert message box */
+    $alert: ElMessageBoxShortcutMethod
+
+    /** Show a confirm message box */
+    $confirm: ElMessageBoxShortcutMethod
+
+    /** Show a prompt message box */
+    $prompt: ElMessageBoxShortcutMethod
+  }
+}
diff --git a/types/message.d.ts b/types/message.d.ts
new file mode 100644
index 0000000000..90b8f94ac2
--- /dev/null
+++ b/types/message.d.ts
@@ -0,0 +1,75 @@
+import Vue, {VNode} from 'vue'
+
+export type MessageType = 'success' | 'warning' | 'info' | 'error'
+
+/** Message Component */
+export declare class ElMessageComponent extends Vue {
+  /** Close the Loading instance */
+  close (): void
+}
+
+export interface CloseEventHandler {
+  /**
+   * Triggers when a message is being closed
+   *
+   * @param instance The message component that is being closed
+   */
+  (instance: ElMessageComponent): void
+}
+
+/** Options used in Message */
+export interface ElMessageOptions {
+  /** Message text */
+  message: string | VNode
+
+  /** Message type */
+  type?: MessageType
+
+  /** Custom icon's class, overrides type */
+  iconClass?: string
+
+  /** Custom class name for Message */
+  customClass?: string
+
+  /** Display duration, millisecond. If set to 0, it will not turn off automatically */
+  duration?: number
+
+  /** Whether to show a close button */
+  showClose?: boolean
+
+  /** Whether to center the text */
+  center?: boolean
+
+  /** Whether message is treated as HTML string */
+  dangerouslyUseHTMLString?: boolean
+
+  /** Callback function when closed with the message instance as the parameter */
+  onClose?: CloseEventHandler
+}
+
+export interface ElMessage {
+  /** Show an info message */
+  (text: string): ElMessageComponent
+
+  /** Show message */
+  (options: ElMessageOptions): ElMessageComponent
+
+  /** Show a success message */
+  success (text: string): ElMessageComponent
+
+  /** Show a warning message */
+  warning (text: string): ElMessageComponent
+
+  /** Show an info message */
+  info (text: string): ElMessageComponent
+
+  /** Show an error message */
+  error (text: string): ElMessageComponent
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+  /** Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification. */
+    $message: ElMessage
+  }
+}
diff --git a/types/notification.d.ts b/types/notification.d.ts
new file mode 100644
index 0000000000..a2cf871d16
--- /dev/null
+++ b/types/notification.d.ts
@@ -0,0 +1,84 @@
+import Vue, { VNode } from 'vue'
+import { MessageType } from './message'
+
+export type NotificationPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
+
+/** Notification Component */
+export declare class ElNotificationComponent extends Vue {
+  /** Close the Notification instance */
+  close (): void
+}
+
+export interface ElNotificationOptions {
+  /** Title */
+  title: string
+
+  /** Description text */
+  message: string | VNode
+
+  /** Notification type */
+  type?: MessageType
+
+  /** Custom icon's class. It will be overridden by type */
+  iconClass?: string
+
+  /** Custom class name for Notification */
+  customClass?: string
+
+  /** Duration before close. It will not automatically close if set 0 */
+  duration?: number
+
+  /** Whether to show a close button */
+  showClose?: boolean
+
+  /** Whether message is treated as HTML string */
+  dangerouslyUseHTMLString?: boolean
+
+  /** Callback function when closed */
+  onClose?: () => void
+
+  /** Callback function when notification clicked */
+  onClick?: () => void
+
+  /** Offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset */
+  offset?: number
+
+  /** custom position */
+  position?: NotificationPosition
+}
+
+export interface ElNotification {
+  /** Show a notification */
+  (options: ElNotificationOptions): ElNotificationComponent
+
+  /** Show a success notification */
+  success (message: string | VNode): ElNotificationComponent
+
+  /** Show a success notification */
+  success (options: ElNotificationOptions): ElNotificationComponent
+
+  /** Show a warning notification */
+  warning (message: string | VNode): ElNotificationComponent
+
+  /** Show a warning notification */
+  warning (options: ElNotificationOptions): ElNotificationComponent
+
+  /** Show an info notification */
+  info (message: string | VNode): ElNotificationComponent
+
+  /** Show an info notification */
+  info (options: ElNotificationOptions): ElNotificationComponent
+
+  /** Show an error notification */
+  error (message: string | VNode): ElNotificationComponent
+
+  /** Show an error notification */
+  error (options: ElNotificationOptions): ElNotificationComponent
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    /** Displays a global notification message at the upper right corner of the page */
+    $notify: ElNotification
+  }
+}
diff --git a/types/option-group.d.ts b/types/option-group.d.ts
new file mode 100644
index 0000000000..1530965650
--- /dev/null
+++ b/types/option-group.d.ts
@@ -0,0 +1,10 @@
+import { ElementUIComponent } from './component'
+
+/** Dropdown Select Option Group Component */
+export declare class ElOptionGroup extends ElementUIComponent {
+  /** Name of the group */
+  label: string
+
+  /** Whether to disable all options in this group */
+  disabled: boolean
+}
diff --git a/types/option.d.ts b/types/option.d.ts
new file mode 100644
index 0000000000..d949a54cbe
--- /dev/null
+++ b/types/option.d.ts
@@ -0,0 +1,13 @@
+import { ElementUIComponent } from './component'
+
+/** Dropdown Select Option Component */
+export declare class ElOption extends ElementUIComponent {
+  /** Value of option */
+  value: any
+
+  /** Label of option, same as value if omitted */
+  label: string
+
+  /** Whether option is disabled */
+  disabled: boolean
+}
diff --git a/types/pagination.d.ts b/types/pagination.d.ts
new file mode 100644
index 0000000000..278d820267
--- /dev/null
+++ b/types/pagination.d.ts
@@ -0,0 +1,40 @@
+import { ElementUIComponent } from './component'
+
+/** Pagination Component */
+export declare class ElPagination extends ElementUIComponent {
+  /** Whether to use small pagination */
+  small: boolean
+
+  /** Item count of each page */
+  pageSize: number
+
+  /** Total item count */
+  total: number
+
+  /** Total page count. Set either total or page-count and pages will be displayed; if you need page-sizes, total is required */
+  pageCount: number
+
+  /** Number of pagers */
+  pagerCount: number
+
+  /** Current page number */
+  currentPage: number
+
+  /**
+   * Layout of Pagination. Elements separated with a comma.
+   * Accepted values: `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot`
+   */
+  layout: string
+
+  /** Options of item count per page */
+  pageSizes: number[]
+
+  /** Custom class name for the page size Select's dropdown */
+  popperClass: string
+
+  /** Text for the prev button */
+  prevText: string
+
+  /** Text for the prev button */
+  nextText: string
+}
diff --git a/types/popover.d.ts b/types/popover.d.ts
new file mode 100644
index 0000000000..310884092e
--- /dev/null
+++ b/types/popover.d.ts
@@ -0,0 +1,65 @@
+import { VNode, VNodeDirective } from 'vue'
+import { ElementUIComponent } from './component'
+
+export type PopoverTrigger = 'click' | 'focus' | 'hover' | 'manual'
+export type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
+
+export interface PopoverSlots {
+  /** Content of popover */
+  default: VNode[],
+
+  /** HTML element that triggers popover */
+  reference: VNode[]
+
+  [key: string]: VNode[]
+}
+
+/** Popover directive definition */
+export interface ElPopoverDirective extends VNodeDirective {
+  name: 'popover',
+  arg: string
+}
+
+/** Popover Component */
+export declare class ElPopover extends ElementUIComponent {
+  /** How the popover is triggered */
+  trigger: PopoverTrigger
+
+  /** Popover title */
+  title: string
+
+  /** Popover content, can be replaced with a default slot */
+  content: string
+
+  /** Popover width */
+  width: string | number
+
+  /** Popover placement */
+  placement: PopoverPlacement
+
+  /** Whether Popover is disabled */
+  disabled: boolean
+
+  /** Whether popover is visible */
+  value: boolean
+
+  /** Popover offset */
+  offset: number
+
+  /** Popover transition animation */
+  transition: string
+
+  /** Whether a tooltip arrow is displayed or not. For more info, please refer to Vue-popper */
+  visibleArrow: boolean
+
+  /** Parameters for popper.js */
+  popperOptions: object
+
+  /** Custom class name for popover */
+  popperClass: string
+
+  /** Delay of appearance when trigger is hover, in milliseconds */
+  openDelay: number
+
+  $slots: PopoverSlots
+}
diff --git a/types/progress.d.ts b/types/progress.d.ts
new file mode 100644
index 0000000000..933347c4b7
--- /dev/null
+++ b/types/progress.d.ts
@@ -0,0 +1,31 @@
+import { ElementUIComponent } from './component'
+
+export type ProgressType = 'line' | 'circle'
+export type ProgressStatus = 'success' | 'exception'
+
+/** Progress Component */
+export declare class ElProgress extends ElementUIComponent {
+  /** Percentage, required */
+  percentage: number
+
+  /** The type of progress bar */
+  type: ProgressType
+
+  /** The width of progress bar */
+  strokeWidth: number
+
+  /** Whether to place the percentage inside progress bar, only works when type is 'line' */
+  textInside: boolean
+
+  /** The current status of progress bar */
+  status: ProgressStatus
+
+  /** Background color of progress bar. Overrides `status` prop */
+  color: string
+
+  /** The canvas width of circle progress bar */
+  width: number
+
+  /** Whether to show percentage */
+  showText: boolean
+}
diff --git a/types/radio-button.d.ts b/types/radio-button.d.ts
new file mode 100644
index 0000000000..0b7df8acb0
--- /dev/null
+++ b/types/radio-button.d.ts
@@ -0,0 +1,16 @@
+import { ElementUIComponent } from './component'
+
+/** Radio Button Component */
+export declare class ElRadioButton extends ElementUIComponent {
+  /** The form input value */
+  value: string
+
+  /** The value of radio */
+  label: string | number
+
+  /** Whether radio is disabled */
+  disabled: boolean
+
+  /** Native 'name' attribute */
+  name: string
+}
diff --git a/types/radio-group.d.ts b/types/radio-group.d.ts
new file mode 100644
index 0000000000..f61144b65f
--- /dev/null
+++ b/types/radio-group.d.ts
@@ -0,0 +1,18 @@
+import { ElementUIComponent } from './component'
+
+export type RadioGroupSize = 'large' | 'small'
+
+/** Radio Group Component */
+export declare class ElRadioGroup extends ElementUIComponent {
+  /** The size of radio buttons */
+  size: RadioGroupSize
+
+  /** Border and background color when button is active */
+  fill: string
+
+  /** Whether the nesting radios are disabled */
+  disabled: boolean
+
+  /** Font color when button is active */
+  textColor: string
+}
diff --git a/types/radio.d.ts b/types/radio.d.ts
new file mode 100644
index 0000000000..22826ead7e
--- /dev/null
+++ b/types/radio.d.ts
@@ -0,0 +1,19 @@
+import { ElementUIComponent } from './component'
+
+/** Radio Component */
+export declare class ElRadio extends ElementUIComponent {
+  /** The form input value */
+  value: string
+
+  /** The value of radio */
+  label: string | number | boolean
+
+  /** Whether radio is disabled */
+  disabled: boolean
+
+  /** Whether to add a border around Radio */
+  border: boolean
+
+  /** Native 'name' attribute */
+  name: string
+}
diff --git a/types/rate.d.ts b/types/rate.d.ts
new file mode 100644
index 0000000000..9fe80a25fc
--- /dev/null
+++ b/types/rate.d.ts
@@ -0,0 +1,52 @@
+import { ElementUIComponent } from './component'
+
+/** Rate Component */
+export declare class ElRate extends ElementUIComponent {
+  /** Max rating score */
+  max: number
+
+  /** Whether Rate is read-only */
+  disabled: boolean
+
+  /** Whether picking half start is allowed */
+  allowHalf: boolean
+
+  /** Threshold value between low and medium level. The value itself will be included in low level */
+  lowThreshold: number
+
+  /** Threshold value between medium and high level. The value itself will be included in high level */
+  highThreshold: number
+
+  /** Color array for icons. It should have 3 elements, each of which corresponds with a score level */
+  colors: string[]
+
+  /** Color of unselected icons */
+  voidColor: string
+
+  /** Color of unselected read-only icons */
+  disabledVoidColor: string
+
+  /** Array of class names of icons. It should have 3 elements, each of which corresponds with a score level */
+  iconClasses: string[]
+
+  /** Class name of unselected icons */
+  voidIconClass: string
+
+  /** Class name of unselected read-only icons */
+  disabledVoidIconClass: string
+
+  /** Whether to display texts */
+  showText: boolean
+
+  /** Whether to display current score. show-score and show-text cannot be true at the same time */
+  showScore: boolean
+
+  /** Color of texts */
+  textColor: string
+
+  /** Text array */
+  texts: string[]
+
+  /** Text template when the component is read-only */
+  scoreTemplate: string
+}
diff --git a/types/row.d.ts b/types/row.d.ts
new file mode 100644
index 0000000000..4769de71c8
--- /dev/null
+++ b/types/row.d.ts
@@ -0,0 +1,25 @@
+import { ElementUIComponent } from './component'
+
+/** Horizontal alignment of flex layout */
+export type HorizontalAlignment = 'start' | 'end' | 'center' | 'space-around' | 'space-between'
+
+/** vertical alignment of flex layout */
+export type VertialAlignment = 'top' | 'middle' | 'bottom'
+
+/** Row Layout Component */
+export declare class ElRow extends ElementUIComponent {
+  /** Grid spacing */
+  gutter: number
+
+  /** Layout mode. You can use flex. Works in modern browsers */
+  type: string
+
+  /** Horizontal alignment of flex layout */
+  justify: HorizontalAlignment
+
+  /** Vertical alignment of flex layout */
+  align: VertialAlignment
+
+  /** Custom element tag */
+  tag: string
+}
diff --git a/types/select.d.ts b/types/select.d.ts
new file mode 100644
index 0000000000..110835ea97
--- /dev/null
+++ b/types/select.d.ts
@@ -0,0 +1,90 @@
+import { ElementUIComponent, ElementUIComponentSize } from './component'
+
+export interface QueryChangeHandler {
+  /**
+   * @param queryString Current value of the text input
+   */
+  (queryString: string): void
+}
+
+/** Dropdown Select Component */
+export declare class ElSelect extends ElementUIComponent {
+  /** The form input value */
+  value: any
+
+  /** Whether multiple-select is activated */
+  multiple: boolean
+
+  /** Whether Select is disabled */
+  disabled: boolean
+
+  /** Unique identity key name for value, required when value is an object */
+  valueKey: string
+
+  /** Size of Input */
+  size: ElementUIComponentSize
+
+  /** Whether single select can be cleared */
+  clearable: boolean
+
+  /** Maximum number of options user can select when multiple is true. No limit when set to 0 */
+  multipleLimit: number
+
+  /** @Deprecated in next major version */
+  autoComplete: string
+
+  /** Same as autocomplete in native input */
+  autocomplete: string
+
+  /** The name attribute of select input */
+  name: string
+
+  /** Placeholder */
+  placeholder: string
+
+  /** Whether Select is filterable */
+  filterable: boolean
+
+  /** Whether creating new items is allowed. To use this, filterable must be true */
+  allowCreate: boolean
+
+  /** Custom filter method */
+  filterMethod: QueryChangeHandler
+
+  /** Whether options are loaded from server */
+  remote: boolean
+
+  /** Custom remote search method */
+  remoteMethod: QueryChangeHandler
+
+  /** Whether Select is loading data from server */
+  loading: boolean
+
+  /** Displayed text while loading data from server */
+  loadingText: string
+
+  /** Displayed text when no data matches the filtering query */
+  noMatchText: string
+
+  /** Displayed text when there is no options */
+  noDataText: string
+
+  /** Custom class name for Select's dropdown */
+  popperClass: string
+
+  /** Select first matching option on enter key. Use with filterable or remote */
+  defaultFirstOption: boolean
+
+  /** Whether to append the popper menu to body */
+  popperAppendToBody: boolean
+
+  /**
+   * Focus the Input component
+   */
+  focus (): void
+
+  /**
+   * Blur the Input component, and hide the dropdown
+   */
+  blur (): void
+}
diff --git a/types/slider.d.ts b/types/slider.d.ts
new file mode 100644
index 0000000000..af706754fc
--- /dev/null
+++ b/types/slider.d.ts
@@ -0,0 +1,62 @@
+import { ElementUIComponent } from './component'
+
+export interface SliderTooltipFormat {
+  /**
+   * Format the displayed value of Slider
+   *
+   * @param value Value of the Slider
+   * @returns formatted value
+   */
+  (value: number): string
+}
+
+/** Slider Component */
+export declare class ElSlider extends ElementUIComponent {
+  /** Current value of the slider */
+  value: number | number[]
+
+  /** Minimum value */
+  min: number
+
+  /** Maximum value */
+  max: number
+
+  /** Whether Slider is disabled */
+  disabled: boolean
+
+  /** Step size */
+  step: number
+
+  /** Whether to display an input box, works when range is false */
+  showInput: boolean
+
+  /** Format of displayed tooltip value */
+  formatTooltip: SliderTooltipFormat
+
+  /** Whether to display control buttons when show-input is true */
+  showInputControls: boolean
+
+  /** Size of the input box */
+  inputSize: string
+
+  /** Whether to display breakpoints */
+  showStops: boolean
+
+  /** Whether to display tooltip value */
+  showTooltip: boolean
+
+  /** Whether to select a range */
+  range: boolean
+
+  /** Vertical mode */
+  vertical: boolean
+
+  /** Slider height, required in vertical mode */
+  height: boolean
+
+  /** Debounce delay when typing, in milliseconds, works when show-input is true */
+  debounce: number
+
+  /** Custom class name for the tooltip */
+  tooltipClass: string
+}
diff --git a/types/step.d.ts b/types/step.d.ts
new file mode 100644
index 0000000000..68ed2b33ed
--- /dev/null
+++ b/types/step.d.ts
@@ -0,0 +1,34 @@
+import { VNode } from 'vue'
+import { ElementUIComponent } from './component'
+
+export type StepStatus = 'wait' | 'process' | 'finish' | 'error' | 'success'
+
+export interface StepRenderSlots {
+  /** Custom icon */
+  icon: VNode[],
+
+  /** Step title */
+  title: VNode[],
+
+  /** Step description */
+  description: VNode[],
+
+  [key: string]: VNode[]
+}
+
+/** Step Component */
+export declare class ElStep extends ElementUIComponent {
+  /** Step title */
+  title: string
+
+  /** Step description */
+  description: string
+
+  /** Step icon */
+  icon: string
+
+  /** Current status. It will be automatically set by Steps if not configured. */
+  status: StepStatus
+
+  readonly $slots: StepRenderSlots
+}
diff --git a/types/steps.d.ts b/types/steps.d.ts
new file mode 100644
index 0000000000..ed40ab6db0
--- /dev/null
+++ b/types/steps.d.ts
@@ -0,0 +1,28 @@
+import { ElementUIComponent } from './component'
+import { StepStatus } from './step'
+
+export type StepsDirection = 'vertical' | 'horizontal'
+
+/** Guide the user to complete tasks in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2. */
+export declare class ElSteps extends ElementUIComponent {
+  /** The spacing of each step, will be responsive if omitted. Support percentage. */
+  space: number | string
+
+  /** Display direction */
+  direction: StepsDirection
+
+  /** Current activation step */
+  active: number
+
+  /** Status of current step */
+  processStatus: StepStatus
+
+  /** Status of end step */
+  finishStatus: StepStatus
+
+  /** Whether step description is centered */
+  alignCenter: boolean
+
+  /** Whether to apply simple theme */
+  simple: boolean
+}
diff --git a/types/submenu.d.ts b/types/submenu.d.ts
new file mode 100644
index 0000000000..f5e1359540
--- /dev/null
+++ b/types/submenu.d.ts
@@ -0,0 +1,22 @@
+import { ElementUIComponent } from './component'
+
+/** Submenu Component */
+export declare class ElSubmenu extends ElementUIComponent {
+  /** Unique identification */
+  index: string
+
+  /** Delay time before showing a sub-menu */
+  showTimeout: number
+
+  /** Delay time before hiding a sub-menu */
+  hideTimeout: number
+
+  /** Custom class name for the popup menu */
+  popperClass: string
+
+  /** Whether the sub-menu is disabled */
+  disabled: boolean
+
+  /** Whether to append the popper menu to body */
+  popperAppendToBody: boolean
+}
diff --git a/types/switch.d.ts b/types/switch.d.ts
new file mode 100644
index 0000000000..b63987bd93
--- /dev/null
+++ b/types/switch.d.ts
@@ -0,0 +1,40 @@
+import { ElementUIComponent } from './component'
+
+/** Switch Component */
+export declare class ElSwitch extends ElementUIComponent {
+  /** Whether Switch is on */
+  value: boolean
+
+  /** Whether Switch is disabled */
+  disabled: boolean
+
+  /** Width of Switch */
+  width: number
+
+  /** Class name of the icon displayed when in on state, overrides on-text */
+  activeIconClass: string
+
+  /** Class name of the icon displayed when in off state, overrides off-text */
+  inactiveIconClass: string
+
+  /** Text displayed when in on state */
+  activeText: string
+
+  /** Text displayed when in off state */
+  inactiveText: string
+
+  /** Background color when in on state */
+  activeColor: string
+
+  /** Background color when in off state */
+  inactiveColor: string
+
+  /** Switch value when in on state */
+  activeValue: string | boolean | number
+
+  /** Switch value when in off state */
+  inactiveValue: string | boolean | number
+
+  /** Input name of Switch */
+  name: string
+}
diff --git a/types/tab-pane.d.ts b/types/tab-pane.d.ts
new file mode 100644
index 0000000000..b4f69990ff
--- /dev/null
+++ b/types/tab-pane.d.ts
@@ -0,0 +1,19 @@
+import { ElementUIComponent } from './component'
+
+/** Tab Pane Component */
+export declare class ElTabPane extends ElementUIComponent {
+  /** Title of the tab */
+  label: string
+
+  /** Whether Tab is disabled */
+  disabled: boolean
+
+  /** Identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane */
+  name: string
+
+  /** Whether Tab is closable */
+  closable: boolean
+
+  /** Whether Tab is lazily rendered */
+  lazy: boolean
+}
diff --git a/types/table-column.d.ts b/types/table-column.d.ts
new file mode 100644
index 0000000000..193ce25ee8
--- /dev/null
+++ b/types/table-column.d.ts
@@ -0,0 +1,117 @@
+import { CreateElement, VNode } from 'vue'
+import { ElementUIComponent, ElementUIHorizontalAlignment } from './component'
+import { PopoverPlacement } from './popover'
+
+export type TableColumnType = 'default' | 'selection' | 'index' | 'expand'
+export type TableColumnFixedType = 'left' | 'right'
+export type SortOrders = 'ascending' | 'descending' | null
+
+export type TableColumn = {
+  /** Label of the column */
+  label: string,
+
+  /** Property name of the source data */
+  property: string,
+
+  /** Type of the column */
+  type: string,
+
+  /** Whether column is fixed at left/right */
+  fixed: boolean | string
+}
+
+/** Data used in renderHeader function */
+export interface RenderHeaderData {
+  /** The column that is current rendering */
+  column: any,
+
+  /** The index of the rendering column */
+  $index: number
+}
+
+/** Filter Object */
+export interface TableColumnFilter {
+  /** The text to show in the filter's panel */
+  text: string,
+
+  /** The value of the filter */
+  value: any
+}
+
+/** TableColumn Component */
+export declare class ElTableColumn extends ElementUIComponent {
+  /** Type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon. */
+  type: TableColumnType
+
+  /** Column label */
+  label: string
+
+  /** Column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered */
+  columnKey: string
+
+  /** Field name. You can also use its alias: property */
+  prop: string
+
+  /** Column width */
+  width: string
+
+  /** Column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion */
+  minWidth: string
+
+  /** Whether column is fixed at left/right. Will be fixed at left if `true` */
+  fixed: boolean | TableColumnFixedType
+
+  /** Render function for table header of this column */
+  renderHeader: (h: CreateElement, data: RenderHeaderData) => VNode | string
+
+  /** Whether column can be sorted */
+  sortable: boolean
+
+  /** Sorting method. Works when `sortable` is `true` */
+  sortMethod: (a: any, b: any) => number
+
+  /** The order of the sorting strategies used when sorting the data. Works when `sortable` is `true`. */
+  sortOrders: SortOrders[]
+
+  /** Whether column width can be resized. Works when border of `el-table` is `true` */
+  resizable: boolean
+
+  /** Function that formats content */
+  formatter: (row: object, column: TableColumn) => any
+
+  /** Whether to hide extra content and show them in a tooltip when hovering on the cell */
+  showOverflowTooltip: boolean
+
+  /** Alignment */
+  align: ElementUIHorizontalAlignment
+
+  /** Alignment of the table header. If omitted, the value of the `align` attribute will be applied */
+  headerAlign: ElementUIHorizontalAlignment
+
+  /** Class name of cells in the column */
+  className: string
+
+  /** Class name of the label of this column */
+  labelClassName: string
+
+  /** Function that determines if a certain row can be selected, works when `type` is `'selection'` */
+  selectable: (row: object, index: number) => boolean
+
+  /** Whether to reserve selection after data refreshing, works when `type` is `'selection'` */
+  reserveSelection: boolean
+
+  /** An array of data filtering options */
+  filters: TableColumnFilter[]
+
+  /** Placement for the filter dropdown */
+  filterPlacement: PopoverPlacement
+
+  /** Whether data filtering supports multiple options */
+  filterMultiple: Boolean
+
+  /** Data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true` */
+  filterMethod: (value: any, row: object) => boolean
+
+  /** Filter value for selected data, might be useful when table header is rendered with `render-header` */
+  filteredValue: TableColumnFilter[]
+}
diff --git a/types/table.d.ts b/types/table.d.ts
new file mode 100644
index 0000000000..bc27961c54
--- /dev/null
+++ b/types/table.d.ts
@@ -0,0 +1,157 @@
+import { ElementUIComponent } from './component'
+import { TooltipEffect } from './tooltip'
+
+export type SortOrder = 'ascending' | 'descending'
+
+/** Options to set the default sort column and order */
+export interface DefaultSortOptions {
+  /** Default sort column */
+  prop: string,
+
+  /** Default sort order */
+  order: SortOrder
+}
+
+export interface SummaryMethodParams {
+  columns: object[],
+  data: object
+}
+
+export interface rowCallbackParams {
+  row: object,
+  rowIndex: number
+}
+
+export interface cellCallbackParams {
+  row: object,
+  rowIndex: number,
+  column: object,
+  columnIndex: number
+}
+
+/** Table Component */
+export declare class ElTable extends ElementUIComponent {
+  /** Table data */
+  data: object[]
+
+  /** Table's height. By default it has an auto height. If its value is a number, the height is measured in pixels; if its value is a string, the height is affected by external styles */
+  height: string | number
+
+  /** Table's max-height. The height of the table starts from auto until it reaches the maxHeight limit. The maxHeight is measured in pixels, same as height */
+  maxHeight: string | number
+
+  /** Whether table is striped */
+  stripe: boolean
+
+  /** Whether table has vertical border */
+  border: boolean
+
+  /** Whether width of column automatically fits its container */
+  fit: boolean
+
+  /** Whether table header is visible */
+  showHeader: boolean
+
+  /** Whether current row is highlighted */
+  highlightCurrentRow: boolean
+
+  /** Key of current row, a set only prop */
+  currentRowKey: string | number
+
+  /** Function that returns custom class names for a row, or a string assigning class names for every row */
+  rowClassName: string | ((param: rowCallbackParams) => string)
+
+  /** Function that returns custom style for a row, or an object assigning custom style for every row */
+  rowStyle: object | ((param: rowCallbackParams) => object)
+
+  /** Function that returns custom class names for a cell, or a string assigning class names for every cell */
+  cellClassName: string | ((param: cellCallbackParams) => string)
+
+  /** Function that returns custom style for a cell, or an object assigning custom style for every cell */
+  cellStyle: object | ((param: cellCallbackParams) => object)
+
+  /** Function that returns custom class names for a row in table header, or a string assigning class names for every row in table header */
+  headerRowClassName: string | ((param: rowCallbackParams) => string)
+
+  /** Function that returns custom style for a row in table header, or an object assigning custom style for every row in table header */
+  headerRowStyle: object | ((param: rowCallbackParams) => object)
+
+  /** Function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header */
+  headerCellClassName: string | ((param: cellCallbackParams) => string)
+
+  /** Function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header */
+  headerCellStyle: object | ((param: cellCallbackParams) => object)
+
+  /** Key of row data, used for optimizing rendering. Required if reserve-selection is on */
+  rowKey: (row: object) => any
+
+  /** Displayed text when data is empty. You can customize this area with `slot="empty"` */
+  emptyText: String
+
+  /** Whether expand all rows by default. Only works when the table has a column `type="expand"` */
+  defaultExpandAll: Boolean
+
+  /** Set expanded rows by this prop. Prop's value is the keys of expand rows, you should set row-key before using this prop */
+  expandRowKeys: any[]
+
+  /** Set the default sort column and order */
+  defaultSort: DefaultSortOptions
+
+  /** Tooltip effect property */
+  tooltipEffect: TooltipEffect
+
+  /** Whether to display a summary row */
+  showSummary: boolean
+
+  /** Displayed text for the first column of summary row */
+  sumText: string
+
+  /** Custom summary method */
+  summaryMethod: (param: SummaryMethodParams) => any[]
+
+  /** Controls the behavior of master checkbox in multi-select tables when only some rows are selected */
+  selectOnIndeterminate: boolean
+
+  /** Clear selection. Might be useful when `reserve-selection` is on */
+  clearSelection (): void
+
+  /**
+   * Toggle or set if a certain row is selected
+   *
+   * @param row The row that is going to set its selected state
+   * @param selected Whether the row is selected. The selected state will be toggled if not set
+   */
+  toggleRowSelection (row: object, selected?: boolean): void
+
+  /**
+   * Toggle or set all rows
+   */
+  toggleAllSelection (): void
+
+  /**
+   * Set a certain row as selected
+   *
+   * @param row The row that is going to set as selected
+   */
+  setCurrentRow (row?: object): void
+  
+  /**
+   * Toggle or set if a certain row is expanded
+   *
+   * @param row The row that is going to set its expanded state
+   * @param expanded Whether the row is expanded. The expanded state will be toggled if not set
+   */
+  toggleRowExpansion (row: object, expanded?: boolean): void
+
+  /** Clear sort status, reset the table to unsorted  */
+  clearSort (): void
+
+  /** Clear filter, reset the table to unfiltered  */
+  clearFilter (): void
+
+  /** Relayout the table, maybe needed when change the table or it's ancestors visibility */
+  doLayout (): void
+
+  /** Sort Table manually */
+  sort (prop: string, order: string): void
+}
diff --git a/types/tabs.d.ts b/types/tabs.d.ts
new file mode 100644
index 0000000000..fee7c1a8a7
--- /dev/null
+++ b/types/tabs.d.ts
@@ -0,0 +1,31 @@
+import { ElementUIComponent } from './component'
+
+export type TabType = 'card' | 'border-card'
+export type TabPosition = 'top' | 'right' | 'bottom' | 'left'
+
+/** Divide data collections which are related yet belong to different types */
+export declare class ElTabs extends ElementUIComponent {
+  /** Type of Tab */
+  type: TabType
+
+  /** Whether Tab is closable */
+  closable: boolean
+
+  /** Whether Tab is addable */
+  addable: boolean
+
+  /** Whether Tab is addable and closable */
+  editable: boolean
+
+  /** Name of the selected tab */
+  value: string
+
+  /** Position of tabs */
+  tabPosition: TabPosition
+
+  /** Whether width of tab automatically fits its container */
+  stretch: Boolean
+
+  /** Hook function before switching tab. If false or a Promise is returned and then is rejected, switching will be prevented */
+  beforeLeave: (activeName: string, oldActiveName: string) => boolean | Promise<any>
+}
diff --git a/types/tag.d.ts b/types/tag.d.ts
new file mode 100644
index 0000000000..5fa0116b55
--- /dev/null
+++ b/types/tag.d.ts
@@ -0,0 +1,24 @@
+import { ElementUIComponent, ElementUIComponentSize } from './component'
+
+export type TagType = 'primary' | 'gray' | 'success' | 'warning' | 'danger'
+
+/** Tag Component */
+export declare class ElTag extends ElementUIComponent {
+  /** Theme */
+  type: TagType
+
+  /** Whether Tab can be removed */
+  closable: boolean
+
+  /** Whether the removal animation is disabled */
+  disableTransitions: boolean
+
+  /** Whether Tag has a highlighted border */
+  hit: boolean
+
+  /** Background color of the tag */
+  color: string
+
+  /** Tag size */
+  size: ElementUIComponentSize
+}
diff --git a/types/time-picker.d.ts b/types/time-picker.d.ts
new file mode 100644
index 0000000000..40114f4891
--- /dev/null
+++ b/types/time-picker.d.ts
@@ -0,0 +1,63 @@
+import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'
+
+export interface TimePickerOptions {
+  /**
+   * Available time range.
+   * e.g. `'18:30:00 - 20:30:00'`
+   * or `['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']`
+   */
+  selectableRange?: string | string[],
+
+  /** Format  of the picker */
+  format?: string
+}
+
+/** TimePicker Component */
+export declare class ElTimePicker extends ElementUIComponent {
+  /** Whether DatePicker is read only */
+  readonly: boolean
+
+  /** Whether DatePicker is disabled */
+  disabled: boolean
+
+  /** Whether the input is editable */
+  editable: boolean
+
+  /** Whether to show clear button */
+  clearable: boolean
+
+  /** Size of Input */
+  size: ElementUIComponentSize
+
+  /** Placeholder */
+  placeholder: string
+
+  /** Placeholder for the start time in range mode */
+  startPlaceholder: string
+
+  /** Placeholder for the end time in range mode */
+  endPlaceholder: string
+
+  /** Whether to pick a time range */
+  isRange: boolean
+
+  /** Value of the picker */
+  value: string | Date
+
+  /** Alignment */
+  align: ElementUIHorizontalAlignment
+
+  /** Custom class name for TimePicker's dropdown */
+  popperClass: string
+
+  /** Additional options, check the table below */
+  pickerOptions: TimePickerOptions
+
+  /** Range separator */
+  rangeSeparator: string
+
+  /**
+   * Focus the Input component
+   */
+  focus (): void
+}
diff --git a/types/time-select.d.ts b/types/time-select.d.ts
new file mode 100644
index 0000000000..a784f8edb6
--- /dev/null
+++ b/types/time-select.d.ts
@@ -0,0 +1,56 @@
+import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'
+
+export interface TimeSelectOptions {
+  /** Start time */
+  start?: string,
+
+  /** End time */
+  end?: string,
+
+  /** Time step */
+  step?: string,
+
+  /** Minimum time, any time before this time will be disabled */
+  minTime?: string,
+
+  /** Maximum time, any time after this time will be disabled */
+  maxTime?: string
+}
+
+/** TimeSelect Component */
+export declare class ElTimeSelect extends ElementUIComponent {
+  /** Whether DatePicker is read only */
+  readonly: boolean
+
+  /** Whether DatePicker is disabled */
+  disabled: boolean
+
+  /** Whether the input is editable */
+  editable: boolean
+
+  /** Whether to show clear button */
+  clearable: boolean
+
+  /** Size of Input */
+  size: ElementUIComponentSize
+
+  /** Placeholder */
+  placeholder: string
+
+  /** Value of the picker */
+  value: string | Date
+
+  /** Alignment */
+  align: ElementUIHorizontalAlignment
+
+  /** Custom class name for TimePicker's dropdown */
+  popperClass: string
+
+  /** Additional options, check the table below */
+  pickerOptions: TimeSelectOptions
+
+  /**
+   * Focus the Input component
+   */
+  focus (): void
+}
diff --git a/types/tooltip.d.ts b/types/tooltip.d.ts
new file mode 100644
index 0000000000..a62c17972e
--- /dev/null
+++ b/types/tooltip.d.ts
@@ -0,0 +1,49 @@
+import { ElementUIComponent } from './component'
+import { PopoverPlacement } from './popover'
+
+export type TooltipEffect = 'dark' | 'light'
+
+/** Tooltip Component */
+export declare class ElTooltip extends ElementUIComponent {
+  /** Tooltip theme */
+  effect: TooltipEffect
+
+  /** Display content, can be overridden by slot#content */
+  content: String
+
+  /** Position of Tooltip */
+  placement: PopoverPlacement
+
+  /** Visibility of Tooltip */
+  value: boolean
+
+  /** Whether Tooltip is disabled */
+  disabled: boolean
+
+  /** Offset of the Tooltip */
+  offset: number
+
+  /** Animation name */
+  transition: string
+
+  /** Whether an arrow is displayed. For more information, check Vue-popper page */
+  visibleArrow: boolean
+
+  /** Popper.js parameters */
+  popperOptions: object
+
+  /** Delay of appearance, in millisecond */
+  openDelay: number
+
+  /** Whether to control Tooltip manually. mouseenter and mouseleave won't have effects if set to true */
+  manual: boolean
+
+  /** Custom class name for Tooltip's popper */
+  popperClass: string
+
+  /** Whether the mouse can enter the tooltip	 */
+  enterable: string
+
+  /** Timeout in milliseconds to hide tooltip */
+  hideAfter: string
+}
diff --git a/types/transfer.d.ts b/types/transfer.d.ts
new file mode 100644
index 0000000000..9f35a7b04d
--- /dev/null
+++ b/types/transfer.d.ts
@@ -0,0 +1,73 @@
+import { CreateElement, VNode } from 'vue'
+import { ElementUIComponent } from './component'
+
+export type TransferPanelPosition = 'left' | 'right'
+
+export interface TransferData {
+  key: any,
+  label: string,
+  disabled: boolean
+}
+
+export interface TransferFormat {
+  noChecked: string,
+  hasChecked: string,
+}
+
+export interface TransferProps {
+  key: string,
+  label: string,
+  disabled: string
+}
+
+export interface TransferRenderContent {
+  /**
+   * Render function for a specific option
+   *
+   * @param h The render function
+   * @param option The option data object
+   */
+  (h: CreateElement, option: TransferData): VNode
+}
+
+/** Transfer Component */
+export declare class ElTransfer extends ElementUIComponent {
+  /** Data source */
+  data: TransferData[]
+
+  /** Whether Transfer is filterable */
+  filterable: boolean
+
+  /** Placeholder for the filter input */
+  filterPlaceholder: string
+
+  /** Custom filter method */
+  filterMethod: (query: string, item: TransferData) => boolean
+
+  /** Order strategy for elements in the target list */
+  targetOrder: string
+
+  /** Custom list titles */
+  titles: string[]
+
+  /** Custom button texts */
+  buttonTexts: string[]
+
+  /** Custom render function for data items */
+  renderContent: TransferRenderContent
+
+  /** Texts for checking status in list header */
+  format: TransferFormat
+
+  /** Prop aliases for data source */
+  props: TransferProps
+
+  /** Key array of initially checked data items of the left list */
+  leftDefaultChecked: any[]
+
+  /** Key array of initially checked data items of the right list */
+  rightDefaultChecked: any[]
+
+  /** Clear the query text in specified panel */
+  clearQuery (which: TransferPanelPosition): void
+}
diff --git a/types/tree.d.ts b/types/tree.d.ts
new file mode 100644
index 0000000000..cc06003ad3
--- /dev/null
+++ b/types/tree.d.ts
@@ -0,0 +1,260 @@
+import { CreateElement, VNode } from 'vue';
+import { ElementUIComponent } from './component';
+
+export interface TreeData {
+  id?: any;
+  label?: string;
+  disabled?: boolean;
+  isLeaf?: boolean;
+  children?: TreeData[];
+}
+
+export interface TreeProps {
+  label: string;
+  disabled: string;
+  isLeaf: string;
+  children: string;
+}
+
+export interface TreeNode<K, D> {
+  checked: boolean;
+  childNodes: TreeNode<K, D>[];
+  data: D;
+  expanded: boolean;
+  id: number;
+  indeterminate: boolean;
+  isLeaf: boolean;
+  level: number;
+  loaded: boolean;
+  loading: boolean;
+  parent: TreeNode<K, D> | null;
+  store: any;
+  visible: boolean;
+  disabled: boolean;
+  icon: string;
+  key: K;
+  label: string;
+  nextSibling: TreeNode<K, D> | null;
+  previousSibling: TreeNode<K, D> | null;
+}
+
+/** incomplete, you can convert to any to use other properties */
+export interface TreeStore<K, D> {
+  _getAllNodes: () => TreeNode<K, D>[];
+}
+
+/** Tree Component */
+export declare class ElTree<K = any, D = TreeData> extends ElementUIComponent {
+  /** TreeStore */
+  store: TreeStore<K, D>;
+
+  /** Tree data */
+  data: D[];
+
+  /** Text displayed when data is void */
+  emptyText: string;
+
+  /** Unique identity key name for nodes, its value should be unique across the whole tree */
+  nodeKey: string;
+
+  /** Configuration options, see the following table */
+  props: TreeProps;
+
+  /** Method for loading subtree data */
+  load: (data: D, resolve: Function) => void;
+
+  /**
+   * Render function for a specific node
+   *
+   * @param h The render function
+   */
+  renderContent: (h: CreateElement, context: { node: TreeNode<K, D>; data: D; store: TreeStore<K, D> }) => VNode;
+
+  /** Whether current node is highlighted */
+  highlightCurrent: boolean;
+
+  /** Whether to expand all nodes by default */
+  defaultExpandAll: boolean;
+
+  /** Whether to expand or collapse node when clicking on the node. If false, then expand or collapse node only when clicking on the arrow icon. */
+  expandOnClickNode: boolean;
+
+  /** Whether to check or uncheck node when clicking on the node, if false, the node can only be checked or unchecked by clicking on the checkbox. */
+  checkOnClickNode: boolean;
+
+  /** Whether to expand father node when a child node is expanded */
+  autoExpandParent: boolean;
+
+  /** Array of keys of initially expanded nodes */
+  defaultExpandedKeys: K[];
+
+  /** Whether node is selectable */
+  showCheckbox: boolean;
+
+  /** Whether checked state of a node not affects its father and child nodes when show-checkbox is true */
+  checkStrictly: boolean;
+
+  /** Array of keys of initially checked nodes */
+  defaultCheckedKeys: K[];
+
+  /**
+   * This function will be executed on each node when use filter method. If return false, tree node will be hidden.
+   *
+   * @param value The query string
+   * @param data The original data object
+   * @param node Tree node
+   */
+  filterNodeMethod: (value: string, data: D, node: TreeNode<K, D>) => boolean;
+
+  /** Whether only one node among the same level can be expanded at one time */
+  accordion: boolean;
+
+  /** Horizontal indentation of nodes in adjacent levels in pixels */
+  indent: number;
+
+  /** Whether enable tree nodes drag and drop */
+  draggable: boolean;
+
+  /**
+   * Function to be executed before dragging a node
+   *
+   * @param node The node to be dragged
+   */
+  allowDrag: (node: TreeNode<K, D>) => boolean;
+
+  /**
+   * Function to be executed before the dragging node is dropped
+   *
+   * @param draggingNode The dragging node
+   * @param dropNode The target node
+   * @param type Drop type
+   */
+  allowDrop: (draggingNode: TreeNode<K, D>, dropNode: TreeNode<K, D>, type: 'prev' | 'inner' | 'next') => boolean;
+
+  /**
+   * Filter all tree nodes. Filtered nodes will be hidden
+   *
+   * @param value The value to be used as first parameter for `filter-node-method`
+   */
+  filter(value: any): void;
+
+  /**
+   * Update the children of the node which specified by the key
+   *
+   * @param key the key of the node which children will be updated
+   * @param data the children data
+   */
+  updateKeyChildren(key: K, data: D[]): void;
+
+  /**
+   * If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes
+   *
+   * @param leafOnly If the `leafOnly` is `true`, it only returns the currently selected array of sub-nodes
+   * @param includeHalfChecked If the `includeHalfChecked` is `true`, the return value contains halfchecked nodes
+   */
+  getCheckedNodes(leafOnly?: boolean, includeHalfChecked?: boolean): D[];
+
+  /**
+   * Set certain nodes to be checked. Only works when `node-key` is assigned
+   *
+   * @param nodes An array of nodes to be checked
+   * @param leafOnly If the parameter is true, it only returns the currently selected array of sub-nodes
+   */
+  setCheckedNodes(data: D[], leafOnly?: boolean): void;
+
+  /**
+   * If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes' keys
+   *
+   * @param leafOnly If the `leafOnly` is `true`, it only returns the currently selected array of sub-nodes
+   */
+  getCheckedKeys(leafOnly?: boolean): K[];
+
+  /**
+   * Set certain nodes to be checked. Only works when `node-key` is assigned
+   *
+   * @param keys An array of node's keys to be checked
+   * @param leafOnly If the parameter is true, it only returns the currently selected array of sub-nodes
+   */
+  setCheckedKeys(keys: K[], leafOnly?: boolean): void;
+
+  /**
+   * Set node to be checked or not. Only works when `node-key` is assigned
+   *
+   * @param data Node's key or data to be checked
+   * @param checked Indicating the node checked or not
+   * @param deep Indicating whether to checked state deeply or not
+   */
+  setChecked(data: D | K, checked: boolean, deep: boolean): void;
+
+  /**
+   * If the node can be selected (`show-checkbox` is `true`), it returns the currently half selected array of nodes
+   */
+  getHalfCheckedNodes(): D[];
+
+  /**
+   * If the node can be selected (`show-checkbox` is `true`), it returns the currently half selected array of nodes' keys
+   */
+  getHalfCheckedKeys(): K[];
+
+  /**
+   * Return the highlight node's key (null if no node is highlighted)
+   */
+  getCurrentKey(): K;
+
+  /**
+   * Set highlighted node by key, only works when node-key is assigned
+   *
+   * @param key The node's key to be highlighted
+   */
+  setCurrentKey(key: K): void;
+
+  /**
+   * Return the highlight node (null if no node is highlighted)
+   */
+  getCurrentNode(): D;
+
+  /**
+   * Set highlighted node, only works when node-key is assigned
+   *
+   * @param node The node to be highlighted
+   */
+  setCurrentNode(data: D): void;
+
+  /**
+   * Get node by node key or node data
+   *
+   * @param by node key or node data
+   */
+  getNode(by: D | K): TreeNode<K, D>;
+
+  /**
+   * Remove node by key or node data or node instance
+   *
+   * @param by key or node data or node instance
+   */
+  remove(by: D | K): void;
+
+  /**
+   * Append a child node to specified node
+   *
+   * @param childData the data of appended node
+   * @param parent key or node data or node instance of the parent node
+   */
+  append(childData: D, parent: D | K): void;
+
+  /**
+   * insert a node before specified node
+   *
+   * @param data the data of inserted node
+   * @param ref key or node data or node instance of the reference node
+   */
+  insertBefore(data: D, ref: D | K): void;
+
+  /**
+   * insert a node after specified node
+   *
+   * @param data the data of inserted node
+   * @param ref key or node data or node instance of the reference node
+   */
+  insertAfter(data: D, ref: D | K): void;
+}
diff --git a/types/upload.d.ts b/types/upload.d.ts
new file mode 100644
index 0000000000..6539695828
--- /dev/null
+++ b/types/upload.d.ts
@@ -0,0 +1,124 @@
+import { ElementUIComponent } from './component'
+
+export type ListType = 'text' | 'picture' | 'picture-card'
+export type FileUploadStatus = 'ready' | 'uploading' | 'success' | 'fail'
+
+export interface FileListItem {
+  name: string,
+  url: string,
+  status?: FileUploadStatus
+}
+
+export interface ElUploadInternalRawFile extends File {
+  uid: number
+}
+
+export interface ElUploadInternalFileDetail {
+  status: FileUploadStatus,
+  name: string,
+  size: number,
+  percentage: number,
+  uid: number,
+  raw: ElUploadInternalRawFile,
+  url?: string
+}
+
+export interface ElUploadProgressEvent extends ProgressEvent {
+  percent: number
+}
+
+export interface HttpRequestOptions {
+  headers: object,
+  withCredentials: boolean,
+  file: ElUploadInternalFileDetail,
+  data: object,
+  filename: string,
+  action: string,
+  onProgress: (e: ElUploadProgressEvent) => void,
+  onSuccess: (response: any) => void,
+  onError: (err: ErrorEvent) => void
+}
+
+/** Upload Component */
+export declare class ElUpload extends ElementUIComponent {
+  /** Request URL (required) */
+  action: string
+
+  /** Request headers */
+  headers: object
+
+  /** Whether uploading multiple files is permitted */
+  multiple: boolean
+
+  /** Additions options of request */
+  data: object
+
+  /** Key name for uploaded file */
+  name: string
+
+  /** Whether cookies are sent */
+  withCredentials: boolean
+
+  /** Whether to show the uploaded file list */
+  showFileList: boolean
+
+  /** Whether to activate drag and drop mode */
+  drag: boolean
+
+  /** Accepted file types, will not work when thumbnail-mode is true */
+  accept: string
+
+  /** Hook function when clicking the uploaded files */
+  onPreview: (file: ElUploadInternalFileDetail) => void
+
+  /** Hook function when files are removed */
+  onRemove: (file: ElUploadInternalFileDetail, fileList: ElUploadInternalFileDetail[]) => void
+
+  /** Hook function when uploaded successfully */
+  onSuccess: (response: any, file: ElUploadInternalFileDetail, fileList: ElUploadInternalFileDetail) => void
+
+  /** Hook function when some errors occurs */
+  onError: (err: ErrorEvent, file: ElUploadInternalFileDetail, fileList: ElUploadInternalFileDetail) => void
+
+  /** Hook function when some progress occurs */
+  onProgress: (event: ElUploadProgressEvent, file: ElUploadInternalFileDetail, fileList: ElUploadInternalFileDetail) => void
+
+  /** Hook function when file status change */
+  onChange: (file: ElUploadInternalFileDetail, fileList: ElUploadInternalFileDetail[]) => void
+
+  /** Hook function before uploading with the file to be uploaded as its parameter. If false or a Promise is returned, uploading will be aborted */
+  beforeUpload: (file: ElUploadInternalRawFile) => boolean | Promise<File | Blob | boolean>
+
+  /** Whether thumbnail is displayed */
+  thumbnailMode: boolean
+
+  /** Default uploaded files */
+  fileList: FileListItem[]
+
+  /** Type of fileList */
+  listType: ListType
+
+  /** Whether to auto upload file */
+  autoUpload: boolean
+
+  /** Override default xhr behavior, allowing you to implement your own upload-file's request */
+  httpRequest: (options: HttpRequestOptions) => void
+
+  /** Whether to disable upload */
+  disabled: boolean
+
+  /** Maximum number of uploads allowed */
+  limit: number
+
+  /** Hook function when limit is exceeded */
+  onExceed: (file: ElUploadInternalFileDetail, fileList: ElUploadInternalFileDetail[]) => void
+
+  /** Clear the upload file list */
+  clearFiles (): void;
+
+  /** Abort specified file */
+  abort (file: ElUploadInternalFileDetail): void
+
+  /** Upload the file list manually */
+  submit ():void;
+}
diff --git a/yarn.lock b/yarn.lock
index c2039f8d79..01565ab137 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,13 +2,6 @@
 # yarn lockfile v1
 
 
-"2webpack2@^0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/2webpack2/-/2webpack2-0.5.0.tgz#20c6818b9feb558381f457daeff039557e60d7d7"
-  dependencies:
-    chalk "^1.1.3"
-    object-set "^1.0.1"
-
 CSSselect@~0.4.0:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/CSSselect/-/CSSselect-0.4.1.tgz#f8ab7e1f8418ce63cda6eb7bd778a85d7ec492b2"
@@ -42,13 +35,19 @@ accepts@~1.3.3:
     mime-types "~2.1.11"
     negotiator "0.6.1"
 
+acorn-dynamic-import@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-2.0.2.tgz#c752bd210bef679501b6c6cb7fc84f8f47158cc4"
+  dependencies:
+    acorn "^4.0.3"
+
 acorn-globals@^1.0.4:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-1.0.9.tgz#55bb5e98691507b74579d0513413217c380c54cf"
   dependencies:
     acorn "^2.1.0"
 
-acorn-jsx@^3.0.0, acorn-jsx@^3.0.1:
+acorn-jsx@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
   dependencies:
@@ -58,29 +57,76 @@ acorn@^2.1.0, acorn@^2.4.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-2.7.0.tgz#ab6e7d9d886aaca8b085bc3312b79a198433f0e7"
 
-acorn@^3.0.0, acorn@^3.0.4:
+acorn@^3.0.4:
   version "3.3.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
+  resolved "http://registry.npm.taobao.org/acorn/download/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
 
-acorn@^4.0.1:
+acorn@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.3.tgz#1a3e850b428e73ba6b09d1cc527f5aaad4d03ef1"
 
+acorn@^5.0.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.1.2.tgz#911cb53e036807cf0fa778dc5d370fbd864246d7"
+
+acorn@^5.2.1:
+  version "5.3.0"
+  resolved "http://registry.npm.taobao.org/acorn/download/acorn-5.3.0.tgz#7446d39459c54fb49a80e6ee6478149b940ec822"
+
 after@0.8.1:
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/after/-/after-0.8.1.tgz#ab5d4fb883f596816d3515f8f791c0af486dd627"
 
-ajv-keywords@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.2.0.tgz#676c4f087bfe1e8b12dca6fda2f3c74f417b099c"
+agentkeepalive@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/agentkeepalive/-/agentkeepalive-2.2.0.tgz#c5d1bd4b129008f1163f236f86e5faea2026e2ef"
+
+ajv-keywords@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.0.tgz#a296e17f7bfae7c1ce4f7e0de53d29cb32162df0"
+
+ajv-keywords@^2.1.0:
+  version "2.1.1"
+  resolved "http://registry.npm.taobao.org/ajv-keywords/download/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
 
-ajv@^4.7.0:
-  version "4.10.0"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.10.0.tgz#7ae6169180eb199192a8b9a19fd0f47fc9ac8764"
+ajv@^5.0.0, ajv@^5.1.5:
+  version "5.2.3"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.3.tgz#c06f598778c44c6b161abafe3466b81ad1814ed2"
   dependencies:
     co "^4.6.0"
+    fast-deep-equal "^1.0.0"
+    json-schema-traverse "^0.3.0"
     json-stable-stringify "^1.0.1"
 
+ajv@^5.2.3, ajv@^5.3.0:
+  version "5.5.2"
+  resolved "http://registry.npm.taobao.org/ajv/download/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
+  dependencies:
+    co "^4.6.0"
+    fast-deep-equal "^1.0.0"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.3.0"
+
+algoliasearch@^3.24.5:
+  version "3.24.5"
+  resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-3.24.5.tgz#15d1e6c6a059b8b357d7d40122d9841829acfd20"
+  dependencies:
+    agentkeepalive "^2.2.0"
+    debug "^2.6.8"
+    envify "^4.0.0"
+    es6-promise "^4.1.0"
+    events "^1.1.0"
+    foreach "^2.0.5"
+    global "^4.3.2"
+    inherits "^2.0.1"
+    isarray "^2.0.1"
+    load-script "^1.0.0"
+    object-keys "^1.0.11"
+    querystring-es3 "^0.2.1"
+    reduce "^1.0.1"
+    semver "^5.1.0"
+    tunnel-agent "^0.6.0"
+
 align-text@^0.1.1, align-text@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
@@ -97,17 +143,25 @@ amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
 
-ansi-escapes@^1.1.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
+ansi-escapes@^3.0.0:
+  version "3.0.0"
+  resolved "http://registry.npm.taobao.org/ansi-escapes/download/ansi-escapes-3.0.0.tgz#ec3e8b4e9f8064fc02c3ac9b65f1c275bda8ef92"
+
+ansi-html@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
 
 ansi-regex@^0.2.0, ansi-regex@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-0.2.1.tgz#0d8e946967a3d8143f93e24e298525fc1b2235f9"
 
 ansi-regex@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.0.0.tgz#c5061b6e0ef8a81775e50f5d66151bf6bf371107"
+  version "2.1.1"
+  resolved "http://registry.npm.taobao.org/ansi-regex/download/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
+
+ansi-regex@^3.0.0:
+  version "3.0.0"
+  resolved "http://registry.npm.taobao.org/ansi-regex/download/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
 
 ansi-styles@^1.1.0:
   version "1.1.0"
@@ -115,7 +169,19 @@ ansi-styles@^1.1.0:
 
 ansi-styles@^2.2.1:
   version "2.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+  resolved "http://registry.npm.taobao.org/ansi-styles/download/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+
+ansi-styles@^3.1.0:
+  version "3.2.0"
+  resolved "http://registry.npm.taobao.org/ansi-styles/download/ansi-styles-3.2.0.tgz#c159b8d5be0f9e5a6f346dab94f16ce022161b88"
+  dependencies:
+    color-convert "^1.9.0"
+
+ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "http://registry.npm.taobao.org/ansi-styles/download/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  dependencies:
+    color-convert "^1.9.0"
 
 ansi-styles@~1.0.0:
   version "1.0.0"
@@ -153,7 +219,7 @@ are-we-there-yet@~1.1.2:
 
 argparse@^1.0.7:
   version "1.0.9"
-  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.9.tgz#73d83bc263f86e97f8cc4f6bae1b0e90a7d22c86"
+  resolved "http://registry.npm.taobao.org/argparse/download/argparse-1.0.9.tgz#73d83bc263f86e97f8cc4f6bae1b0e90a7d22c86"
   dependencies:
     sprintf-js "~1.0.2"
 
@@ -179,9 +245,16 @@ array-flatten@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
 
-array-from@^2.1.1:
+array-flatten@^2.1.0:
   version "2.1.1"
-  resolved "https://registry.yarnpkg.com/array-from/-/array-from-2.1.1.tgz#cfe9d8c26628b9dc5aecc62a9f5d8f1f352c1195"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.1.tgz#426bb9da84090c1838d812c8150af20a8331e296"
+
+array-includes@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.0.3.tgz#184b48f62d92d7452bb31b323165c7f8bd02266d"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.7.0"
 
 array-slice@^0.2.3:
   version "0.2.3"
@@ -189,13 +262,13 @@ array-slice@^0.2.3:
 
 array-union@^1.0.1:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  resolved "http://registry.npm.taobao.org/array-union/download/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
   dependencies:
     array-uniq "^1.0.1"
 
 array-uniq@^1.0.1, array-uniq@^1.0.2:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+  resolved "http://registry.npm.taobao.org/array-uniq/download/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
 
 array-unique@^0.2.1:
   version "0.2.1"
@@ -207,7 +280,15 @@ arraybuffer.slice@0.0.6:
 
 arrify@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+  resolved "http://registry.npm.taobao.org/arrify/download/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+
+asn1.js@^4.0.0:
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.1.tgz#48ba240b45a9280e94748990ba597d216617fd40"
+  dependencies:
+    bn.js "^4.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
 
 asn1@~0.2.3:
   version "0.2.3"
@@ -239,17 +320,31 @@ async-each@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
 
-async-validator@1.6.9:
-  version "1.6.9"
-  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.6.9.tgz#a8309daa8b83421cdbd4628e026d6abb25192d34"
+async-foreach@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
+
+async-validator@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.8.1.tgz#6665788ca39269af770e5ee02f0e557f2438d2ca"
+  dependencies:
+    babel-runtime "6.x"
 
-async@1.5.2, async@1.x, async@^1.3.0, async@^1.4.0, async@^1.5.0:
+async@1.5.2, async@1.x, async@^1.4.0, async@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
-async@^0.9.0, async@~0.9.0:
-  version "0.9.2"
-  resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
+async@^2.0.0:
+  version "2.6.0"
+  resolved "http://registry.npm.taobao.org/async/download/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4"
+  dependencies:
+    lodash "^4.14.0"
+
+async@^2.1.2, async@^2.1.5, async@^2.4.1:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d"
+  dependencies:
+    lodash "^4.14.0"
 
 async@~0.2.6:
   version "0.2.10"
@@ -270,6 +365,17 @@ autoprefixer@^6.0.2, autoprefixer@^6.3.1:
     postcss "^5.2.6"
     postcss-value-parser "^3.2.3"
 
+autoprefixer@^7.0.0:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.1.2.tgz#fbeaf07d48fd878e0682bf7cbeeade728adb2b18"
+  dependencies:
+    browserslist "^2.1.5"
+    caniuse-lite "^1.0.30000697"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^6.0.6"
+    postcss-value-parser "^3.2.3"
+
 aws-sign2@~0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
@@ -299,7 +405,7 @@ babel-cli@^6.14.0:
   optionalDependencies:
     chokidar "^1.0.0"
 
-babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.20.0:
+babel-code-frame@^6.11.0, babel-code-frame@^6.20.0:
   version "6.20.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.20.0.tgz#b968f839090f9a8bc6d41938fb96cb84f7387b26"
   dependencies:
@@ -307,7 +413,15 @@ babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.20.0:
     esutils "^2.0.2"
     js-tokens "^2.0.0"
 
-babel-core@^6.1.4, babel-core@^6.14.0, babel-core@^6.18.0:
+babel-code-frame@^6.22.0:
+  version "6.26.0"
+  resolved "http://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
+  dependencies:
+    chalk "^1.1.3"
+    esutils "^2.0.2"
+    js-tokens "^3.0.2"
+
+babel-core@^6.1.4, babel-core@^6.14.0, babel-core@^6.18.0, babel-core@~6:
   version "6.20.0"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.20.0.tgz#ab0d7176d9dea434e66badadaf92237865eab1ec"
   dependencies:
@@ -422,14 +536,13 @@ babel-helpers@^6.16.0:
     babel-runtime "^6.0.0"
     babel-template "^6.16.0"
 
-babel-loader@^6.2.5:
-  version "6.2.9"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-6.2.9.tgz#2bce6a1c29b47afa90b937ba1fb1f87084d61c61"
+babel-loader@^7.1.2:
+  version "7.1.4"
+  resolved "http://registry.npm.taobao.org/babel-loader/download/babel-loader-7.1.4.tgz#e3463938bd4e6d55d1c174c5485d406a188ed015"
   dependencies:
-    find-cache-dir "^0.1.1"
-    loader-utils "^0.2.11"
+    find-cache-dir "^1.0.0"
+    loader-utils "^1.0.2"
     mkdirp "^0.5.1"
-    object-assign "^4.0.1"
 
 babel-messages@^6.8.0:
   version "6.8.0"
@@ -696,7 +809,7 @@ babel-register@^6.18.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.2"
 
-babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.20.0, babel-runtime@^6.9.0:
+babel-runtime@6.x, babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.20.0, babel-runtime@^6.9.0:
   version "6.20.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.20.0.tgz#87300bdcf4cd770f09bf0048c64204e17806d16f"
   dependencies:
@@ -752,10 +865,14 @@ balanced-match@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.2.1.tgz#7bc658b4bed61eee424ad74f75f5c3e2c4df3cc7"
 
-balanced-match@^0.4.1, balanced-match@^0.4.2:
+balanced-match@^0.4.2:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
 
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "http://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+
 base64-arraybuffer@0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.2.tgz#474df4a9f2da24e05df3158c3b1db3c3cd46a154"
@@ -816,13 +933,13 @@ block-stream@*:
   dependencies:
     inherits "~2.0.0"
 
-bluebird@^2.10.2:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-2.11.0.tgz#534b9033c022c9579c56ba3b3e5a5caafbb650e1"
+bluebird@^3.1.1, bluebird@^3.3.0, bluebird@^3.4.7, bluebird@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
 
-bluebird@^3.0.5, bluebird@^3.1.1, bluebird@^3.3.0, bluebird@^3.4.6:
-  version "3.4.6"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.4.6.tgz#01da8d821d87813d158967e743d5fe6c62cf8c0f"
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
 
 body-parser@^1.12.4:
   version "1.15.2"
@@ -839,6 +956,17 @@ body-parser@^1.12.4:
     raw-body "~2.1.7"
     type-is "~1.6.13"
 
+bonjour@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/bonjour/-/bonjour-3.5.0.tgz#8e890a183d8ee9a2393b3844c691a42bcf7bc9f5"
+  dependencies:
+    array-flatten "^2.1.0"
+    deep-equal "^1.0.1"
+    dns-equal "^1.0.0"
+    dns-txt "^2.0.2"
+    multicast-dns "^6.0.1"
+    multicast-dns-service-types "^1.1.0"
+
 boolbase@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
@@ -849,18 +977,11 @@ boom@2.x.x:
   dependencies:
     hoek "2.x.x"
 
-bottom-tip@0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/bottom-tip/-/bottom-tip-0.0.4.tgz#2094bc55dc22eb386c71676f4edabc2208296631"
-  dependencies:
-    hsl "^0.1.1"
-    virtual-dom "^2.1.1"
-
-brace-expansion@^1.0.0:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.6.tgz#7197d7eaa9b87e648390ea61fc66c84427420df9"
+brace-expansion@^1.0.0, brace-expansion@^1.1.7:
+  version "1.1.8"
+  resolved "http://registry.npm.taobao.org/brace-expansion/download/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
   dependencies:
-    balanced-match "^0.4.1"
+    balanced-match "^1.0.0"
     concat-map "0.0.1"
 
 braces@^0.1.2:
@@ -877,19 +998,59 @@ braces@^1.8.2:
     preserve "^0.2.0"
     repeat-element "^1.1.2"
 
-browser-split@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/browser-split/-/browser-split-0.0.1.tgz#7b097574f8e3ead606fb4664e64adfdda2981a93"
+brorand@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
 
 browser-stdout@1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.0.tgz#f351d32969d32fa5d7a5567154263d928ae3bd1f"
 
-browserify-aes@0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-0.4.0.tgz#067149b668df31c4b58533e02d01e806d8608e2c"
+browserify-aes@^1.0.0, browserify-aes@^1.0.4:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.1.0.tgz#1d2ad62a8b479f23f0ab631c1be86a82dbccbe48"
+  dependencies:
+    buffer-xor "^1.0.3"
+    cipher-base "^1.0.0"
+    create-hash "^1.1.0"
+    evp_bytestokey "^1.0.3"
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+browserify-cipher@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.0.tgz#9988244874bf5ed4e28da95666dcd66ac8fc363a"
+  dependencies:
+    browserify-aes "^1.0.4"
+    browserify-des "^1.0.0"
+    evp_bytestokey "^1.0.0"
+
+browserify-des@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.0.tgz#daa277717470922ed2fe18594118a175439721dd"
+  dependencies:
+    cipher-base "^1.0.1"
+    des.js "^1.0.0"
+    inherits "^2.0.1"
+
+browserify-rsa@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.0.1.tgz#21e0abfaf6f2029cf2fafb133567a701d4135524"
+  dependencies:
+    bn.js "^4.1.0"
+    randombytes "^2.0.1"
+
+browserify-sign@^4.0.0:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.0.4.tgz#aa4eb68e5d7b658baa6bf6a57e630cbd7a93d298"
   dependencies:
+    bn.js "^4.1.1"
+    browserify-rsa "^4.0.0"
+    create-hash "^1.1.0"
+    create-hmac "^1.1.2"
+    elliptic "^6.0.0"
     inherits "^2.0.1"
+    parse-asn1 "^5.0.0"
 
 browserify-zlib@^0.1.4:
   version "0.1.4"
@@ -903,11 +1064,26 @@ browserslist@^1.0.0, browserslist@^1.0.1, browserslist@~1.4.0:
   dependencies:
     caniuse-db "^1.0.30000539"
 
+browserslist@^2.1.5:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.3.3.tgz#2b0cabc4d28489f682598605858a0782f14b154c"
+  dependencies:
+    caniuse-lite "^1.0.30000715"
+    electron-to-chromium "^1.3.18"
+
+buffer-indexof@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/buffer-indexof/-/buffer-indexof-1.1.1.tgz#52fabcc6a606d1a00302802648ef68f639da268c"
+
 buffer-shims@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/buffer-shims/-/buffer-shims-1.0.0.tgz#9978ce317388c649ad8793028c3477ef044a8b51"
 
-buffer@^4.9.0:
+buffer-xor@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
+
+buffer@^4.3.0:
   version "4.9.1"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.1.tgz#6d1bb601b07a4efced97094132093027c95bc298"
   dependencies:
@@ -933,7 +1109,7 @@ bytes@2.4.0:
 
 caller-path@^0.1.0:
   version "0.1.0"
-  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
+  resolved "http://registry.npm.taobao.org/caller-path/download/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
   dependencies:
     callsites "^0.2.0"
 
@@ -943,7 +1119,7 @@ callsite@1.0.0:
 
 callsites@^0.2.0:
   version "0.2.0"
-  resolved "https://registry.yarnpkg.com/callsites/-/callsites-0.2.0.tgz#afab96262910a7f33c19a5775825c69f34e350ca"
+  resolved "http://registry.npm.taobao.org/callsites/download/callsites-0.2.0.tgz#afab96262910a7f33c19a5775825c69f34e350ca"
 
 camel-case@3.0.x:
   version "3.0.0"
@@ -971,9 +1147,9 @@ camelcase@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
 
-camelize@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
+camelcase@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
 
 caniuse-api@^1.3.2:
   version "1.5.2"
@@ -989,6 +1165,10 @@ caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000539, caniuse-db@^1.0.30000597:
   version "1.0.30000597"
   resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000597.tgz#b52e6cbe9dc83669affb98501629feaee1af6588"
 
+caniuse-lite@^1.0.30000697, caniuse-lite@^1.0.30000715:
+  version "1.0.30000716"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000716.tgz#2b40dd4a7edb7f0c468643b899b832b315988e6a"
+
 caseless@~0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.11.0.tgz#715b96ea9841593cc33067923f5ec60ebda4f7d7"
@@ -1028,6 +1208,22 @@ chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
+chalk@^2.0.0, chalk@^2.1.0:
+  version "2.3.0"
+  resolved "http://registry.npm.taobao.org/chalk/download/chalk-2.3.0.tgz#b5ea48efc9c1793dccc9b4767c93914d3f2d52ba"
+  dependencies:
+    ansi-styles "^3.1.0"
+    escape-string-regexp "^1.0.5"
+    supports-color "^4.0.0"
+
+chalk@^2.0.1:
+  version "2.4.1"
+  resolved "http://registry.npm.taobao.org/chalk/download/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e"
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
 chalk@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-0.4.0.tgz#5199a3ddcd0c1efe23bc08c1b027b06176e0c64f"
@@ -1036,6 +1232,10 @@ chalk@~0.4.0:
     has-color "~0.1.0"
     strip-ansi "~0.1.0"
 
+chardet@^0.4.0:
+  version "0.4.2"
+  resolved "http://registry.npm.taobao.org/chardet/download/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
+
 cheerio@^0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-0.18.0.tgz#4e1c06377e725b740e996e0dfec353863de677fa"
@@ -1058,9 +1258,9 @@ cheerio@^0.20.0:
   optionalDependencies:
     jsdom "^7.0.2"
 
-chokidar@^1.0.0, chokidar@^1.4.1:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.6.1.tgz#2f4447ab5e96e50fb3d789fd90d4c72e0e4c70c2"
+chokidar@^1.0.0, chokidar@^1.4.1, chokidar@^1.6.0, chokidar@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
   dependencies:
     anymatch "^1.3.0"
     async-each "^1.0.0"
@@ -1073,9 +1273,16 @@ chokidar@^1.0.0, chokidar@^1.4.1:
   optionalDependencies:
     fsevents "^1.0.0"
 
-circular-json@^0.3.0:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.1.tgz#be8b36aefccde8b3ca7aa2d6afc07a37242c0d2d"
+cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+circular-json@^0.3.1:
+  version "0.3.3"
+  resolved "http://registry.npm.taobao.org/circular-json/download/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66"
 
 clap@^1.0.9:
   version "1.1.2"
@@ -1090,15 +1297,22 @@ clean-css@3.4.x, clean-css@^3.1.9:
     commander "2.8.x"
     source-map "0.4.x"
 
-cli-cursor@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-1.0.2.tgz#64da3f7d56a54412e59794bd62dc35295e8f2987"
+cli-cursor@^2.1.0:
+  version "2.1.0"
+  resolved "http://registry.npm.taobao.org/cli-cursor/download/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
   dependencies:
-    restore-cursor "^1.0.1"
+    restore-cursor "^2.0.0"
 
 cli-width@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.1.0.tgz#b234ca209b29ef66fc518d9b98d5847b00edf00a"
+  version "2.2.0"
+  resolved "http://registry.npm.taobao.org/cli-width/download/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
+
+cli@~1.0.0:
+  version "1.0.1"
+  resolved "http://registry.npm.taobao.org/cli/download/cli-1.0.1.tgz#22817534f24bfa4950c34d532d48ecbc621b8c14"
+  dependencies:
+    exit "0.1.2"
+    glob "^7.1.1"
 
 cliui@^2.1.0:
   version "2.1.0"
@@ -1116,6 +1330,15 @@ cliui@^3.2.0:
     strip-ansi "^3.0.1"
     wrap-ansi "^2.0.0"
 
+clone-deep@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-0.3.0.tgz#348c61ae9cdbe0edfe053d91ff4cc521d790ede8"
+  dependencies:
+    for-own "^1.0.0"
+    is-plain-object "^2.0.1"
+    kind-of "^3.2.2"
+    shallow-clone "^0.1.2"
+
 clone-stats@^0.0.1, clone-stats@~0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/clone-stats/-/clone-stats-0.0.1.tgz#b88f94a82cf38b8791d58046ea4029ad88ca99d1"
@@ -1128,16 +1351,9 @@ clone@^1.0.0, clone@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
 
-cmd-shim@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/cmd-shim/-/cmd-shim-2.0.2.tgz#6fcbda99483a8fd15d7d30a196ca69d688a2efdb"
-  dependencies:
-    graceful-fs "^4.1.2"
-    mkdirp "~0.5.0"
-
 co@^4.6.0:
   version "4.6.0"
-  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+  resolved "http://registry.npm.taobao.org/co/download/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
 
 coa@~1.0.1:
   version "1.0.1"
@@ -1156,15 +1372,25 @@ collections@^0.2.0:
     weak-map "1.0.0"
 
 color-convert@^1.3.0:
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.8.2.tgz#be868184d7c8631766d54e7078e2672d7c7e3339"
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a"
+  dependencies:
+    color-name "^1.1.1"
+
+color-convert@^1.9.0:
+  version "1.9.1"
+  resolved "http://registry.npm.taobao.org/color-convert/download/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
   dependencies:
     color-name "^1.1.1"
 
-color-name@^1.0.0, color-name@^1.1.1:
+color-name@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.1.tgz#4b1415304cf50028ea81643643bd82ea05803689"
 
+color-name@^1.1.1:
+  version "1.1.3"
+  resolved "http://registry.npm.taobao.org/color-name/download/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+
 color-string@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991"
@@ -1207,13 +1433,6 @@ combined-stream@^1.0.5, combined-stream@~1.0.5:
   dependencies:
     delayed-stream "~1.0.0"
 
-command-join@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/command-join/-/command-join-1.1.1.tgz#09e7609012e1dd8b4f0a14fde41a69eff1d2111f"
-  dependencies:
-    array-from "^2.1.1"
-    repeat-string "^1.5.4"
-
 commander@2.8.x:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.8.1.tgz#06be367febfda0c330aa1e2a072d3dc9762425d4"
@@ -1265,30 +1484,15 @@ compression@^1.5.2:
 
 concat-map@0.0.1:
   version "0.0.1"
-  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
-
-concat-stream@1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.5.0.tgz#53f7d43c51c5e43f81c8fdd03321c631be68d611"
-  dependencies:
-    inherits "~2.0.1"
-    readable-stream "~2.0.0"
-    typedarray "~0.0.5"
-
-concat-stream@^1.4.6:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.5.2.tgz#708978624d856af41a5a741defdd261da752c266"
-  dependencies:
-    inherits "~2.0.1"
-    readable-stream "~2.0.0"
-    typedarray "~0.0.5"
+  resolved "http://registry.npm.taobao.org/concat-map/download/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
 
-config-chain@~1.1.5:
-  version "1.1.11"
-  resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.11.tgz#aba09747dfbe4c3e70e766a6e41586e1859fc6f2"
+concat-stream@^1.6.0:
+  version "1.6.0"
+  resolved "http://registry.npm.taobao.org/concat-stream/download/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
   dependencies:
-    ini "^1.3.4"
-    proto-list "~1.2.1"
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
 
 connect-history-api-fallback@^1.3.0:
   version "1.3.0"
@@ -1303,7 +1507,7 @@ connect@^3.3.5:
     parseurl "~1.3.1"
     utils-merge "1.0.0"
 
-console-browserify@^1.1.0:
+console-browserify@1.1.x, console-browserify@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
   dependencies:
@@ -1343,50 +1547,17 @@ cookie@0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
 
-cooking-lint@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/cooking-lint/-/cooking-lint-0.1.3.tgz#ad46c165eb4ecf4a65af63000bb0d69a8b869581"
-  dependencies:
-    eslint "*"
-    eslint-config-defaults "*"
-    eslint-config-elemefe "*"
-    eslint-friendly-formatter "*"
-    eslint-loader "*"
-    eslint-plugin-html "*"
-    eslint-plugin-react "*"
-    eslint-plugin-vue "*"
-
-cooking-vue2@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/cooking-vue2/-/cooking-vue2-0.3.0.tgz#a38062164d80df49a788b1669dcb45eddab91238"
-  dependencies:
-    vue-loader ">=9.4.2"
-    vue-template-compiler "*"
-
-cooking@^1.2.0:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/cooking/-/cooking-1.2.7.tgz#89f0f8a38aa506b11fd7bdceeca9b8242bb0c9e1"
-  dependencies:
-    "2webpack2" "^0.5.0"
-    chalk "^1.1.3"
-    commander "^2.9.0"
-    is-path-inside "^1.0.0"
-    lodash "^4.15.0"
-    progress-bar-webpack-plugin "^1.9.0"
-    shelljs "^0.7.4"
-    webpack-hud "*"
-
-copy-webpack-plugin@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.0.1.tgz#9728e383b94316050d0c7463958f2b85c0aa8200"
+copy-webpack-plugin@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.1.1.tgz#53ae69e04955ebfa9fda411f54cbb968531d71fd"
   dependencies:
-    bluebird "^2.10.2"
-    fs-extra "^0.26.4"
-    glob "^6.0.4"
-    is-glob "^3.1.0"
+    bluebird "^3.5.1"
+    fs-extra "^4.0.2"
+    glob "^7.1.2"
+    is-glob "^4.0.0"
     loader-utils "^0.2.15"
     lodash "^4.3.0"
-    minimatch "^3.0.0"
+    minimatch "^3.0.4"
     node-dir "^0.1.10"
 
 core-js@^2.2.0, core-js@^2.4.0:
@@ -1395,7 +1566,7 @@ core-js@^2.2.0, core-js@^2.4.0:
 
 core-util-is@~1.0.0:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
+  resolved "http://registry.npm.taobao.org/core-util-is/download/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
 
 cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
   version "2.1.2"
@@ -1426,24 +1597,52 @@ cp-cli@^1.0.2:
     fs-extra "^0.30.0"
     yargs "^4.6.0"
 
+create-ecdh@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.0.tgz#888c723596cdf7612f6498233eebd7a35301737d"
+  dependencies:
+    bn.js "^4.1.0"
+    elliptic "^6.0.0"
+
+create-hash@^1.1.0, create-hash@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.1.3.tgz#606042ac8b9262750f483caddab0f5819172d8fd"
+  dependencies:
+    cipher-base "^1.0.1"
+    inherits "^2.0.1"
+    ripemd160 "^2.0.0"
+    sha.js "^2.4.0"
+
+create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.6.tgz#acb9e221a4e17bdb076e90657c42b93e3726cf06"
+  dependencies:
+    cipher-base "^1.0.3"
+    create-hash "^1.1.0"
+    inherits "^2.0.1"
+    ripemd160 "^2.0.0"
+    safe-buffer "^5.0.1"
+    sha.js "^2.4.8"
+
 cross-env@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-3.1.3.tgz#58cd8231808f50089708b091f7dd37275a8e8154"
   dependencies:
     cross-spawn "^3.0.1"
 
-cross-spawn@^3.0.1:
+cross-spawn@^3.0.0, cross-spawn@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
   dependencies:
     lru-cache "^4.0.1"
     which "^1.2.9"
 
-cross-spawn@^4.0.0:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41"
+cross-spawn@^5.0.1, cross-spawn@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
   dependencies:
     lru-cache "^4.0.1"
+    shebang-command "^1.2.0"
     which "^1.2.9"
 
 cryptiles@2.x.x:
@@ -1452,14 +1651,20 @@ cryptiles@2.x.x:
   dependencies:
     boom "2.x.x"
 
-crypto-browserify@3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.3.0.tgz#b9fc75bb4a0ed61dcf1cd5dae96eb30c9c3e506c"
+crypto-browserify@^3.11.0:
+  version "3.11.1"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.11.1.tgz#948945efc6757a400d6e5e5af47194d10064279f"
   dependencies:
-    browserify-aes "0.4.0"
-    pbkdf2-compat "2.0.1"
-    ripemd160 "0.2.0"
-    sha.js "2.2.6"
+    browserify-cipher "^1.0.0"
+    browserify-sign "^4.0.0"
+    create-ecdh "^4.0.0"
+    create-hash "^1.1.0"
+    create-hmac "^1.1.0"
+    diffie-hellman "^5.0.0"
+    inherits "^2.0.1"
+    pbkdf2 "^3.0.3"
+    public-encrypt "^4.0.0"
+    randombytes "^2.0.0"
 
 css-color-function@^1.2.0:
   version "1.3.0"
@@ -1478,22 +1683,24 @@ css-font-weight-names@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/css-font-weight-names/-/css-font-weight-names-0.2.1.tgz#5710d485ad295f6b3f1ceec41f882e324a46b516"
 
-css-loader@^0.24.0:
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.24.0.tgz#7afaafb4c0fb2f90b335ed10a1c77b34d64843fe"
+css-loader@^0.28.7:
+  version "0.28.7"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.7.tgz#5f2ee989dd32edd907717f953317656160999c1b"
   dependencies:
     babel-code-frame "^6.11.0"
-    css-selector-tokenizer "^0.6.0"
+    css-selector-tokenizer "^0.7.0"
     cssnano ">=2.6.1 <4"
-    loader-utils "~0.2.2"
-    lodash.camelcase "^3.0.1"
+    icss-utils "^2.1.0"
+    loader-utils "^1.0.2"
+    lodash.camelcase "^4.3.0"
     object-assign "^4.0.1"
     postcss "^5.0.6"
     postcss-modules-extract-imports "^1.0.0"
     postcss-modules-local-by-default "^1.0.1"
     postcss-modules-scope "^1.0.0"
     postcss-modules-values "^1.1.0"
-    source-list-map "^0.1.4"
+    postcss-value-parser "^3.3.0"
+    source-list-map "^2.0.0"
 
 css-select@^1.1.0, css-select@^1.2.0, css-select@~1.2.0:
   version "1.2.0"
@@ -1512,6 +1719,14 @@ css-selector-tokenizer@^0.6.0:
     fastparse "^1.1.1"
     regexpu-core "^1.0.0"
 
+css-selector-tokenizer@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz#e6988474ae8c953477bf5e7efecfceccd9cf4c86"
+  dependencies:
+    cssesc "^0.1.0"
+    fastparse "^1.1.1"
+    regexpu-core "^1.0.0"
+
 css-what@2.1:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
@@ -1584,6 +1799,12 @@ custom-event@~1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.1.tgz#5d02a46850adf1b4a317946a3928fccb5bfd0425"
 
+d@1:
+  version "1.0.0"
+  resolved "http://registry.npm.taobao.org/d/download/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
+  dependencies:
+    es5-ext "^0.10.9"
+
 d@^0.1.1, d@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/d/-/d-0.1.1.tgz#da184c535d18d8ee7ba2aa229b914009fae11309"
@@ -1621,11 +1842,17 @@ debug@2.2.0, debug@~2.2.0:
   dependencies:
     ms "0.7.1"
 
-debug@^2.1.1, debug@^2.2.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.4.1.tgz#ef2532d2753d282045c13c82ce47a09e56b91d53"
+debug@^2.1.1, debug@^2.2.0, debug@^2.6.6, debug@^2.6.8:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
+debug@^3.1.0:
+  version "3.1.0"
+  resolved "http://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
   dependencies:
-    ms "0.7.2"
+    ms "2.0.0"
 
 decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
   version "1.2.0"
@@ -1637,13 +1864,17 @@ deep-eql@^0.1.3:
   dependencies:
     type-detect "0.1.1"
 
+deep-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
+
 deep-extend@~0.4.0:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.1.tgz#efe4113d08085f4e6f9687759810f807469e2253"
 
 deep-is@~0.1.3:
   version "0.1.3"
-  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
+  resolved "http://registry.npm.taobao.org/deep-is/download/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
 
 deepmerge@^1.2.0:
   version "1.3.1"
@@ -1668,7 +1899,7 @@ defined@^1.0.0:
 
 del@^2.0.2:
   version "2.2.2"
-  resolved "https://registry.yarnpkg.com/del/-/del-2.2.2.tgz#c12c981d067846c84bcaf862cff930d907ffd1a8"
+  resolved "http://registry.npm.taobao.org/del/download/del-2.2.2.tgz#c12c981d067846c84bcaf862cff930d907ffd1a8"
   dependencies:
     globby "^5.0.0"
     is-path-cwd "^1.0.0"
@@ -1678,6 +1909,17 @@ del@^2.0.2:
     pinkie-promise "^2.0.0"
     rimraf "^2.2.8"
 
+del@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/del/-/del-3.0.0.tgz#53ecf699ffcbcb39637691ab13baf160819766e5"
+  dependencies:
+    globby "^6.1.0"
+    is-path-cwd "^1.0.0"
+    is-path-in-cwd "^1.0.0"
+    p-map "^1.1.1"
+    pify "^3.0.0"
+    rimraf "^2.2.8"
+
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@@ -1694,6 +1936,13 @@ deprecated@^0.0.1:
   version "0.0.1"
   resolved "http://registry.npmjs.org/deprecated/-/deprecated-0.0.1.tgz#f9c9af5464afa1e7a971458a8bdef2aa94d5bb19"
 
+des.js@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.0.tgz#c074d2e2aa6a8a9a07dbd61f9a15c2cd83ec8ecc"
+  dependencies:
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+
 destroy@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
@@ -1710,6 +1959,10 @@ detect-indent@^4.0.0:
   dependencies:
     repeating "^2.0.0"
 
+detect-node@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.3.tgz#a2033c09cc8e158d37748fbde7507832bd6ce127"
+
 di@^0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/di/-/di-0.0.1.tgz#806649326ceaa7caa3306d75d985ea2748ba913c"
@@ -1718,6 +1971,14 @@ diff@1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-1.4.0.tgz#7f28d2eb9ee7b15a97efd89ce63dcfdaa3ccbabf"
 
+diffie-hellman@^5.0.0:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.2.tgz#b5835739270cfe26acf632099fded2a07f209e5e"
+  dependencies:
+    bn.js "^4.1.0"
+    miller-rabin "^4.0.0"
+    randombytes "^2.0.0"
+
 directory-encoder@^0.7.2:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/directory-encoder/-/directory-encoder-0.7.2.tgz#59b4e2aa4f25422f6c63b527b462f5e2d0dd2c58"
@@ -1726,18 +1987,28 @@ directory-encoder@^0.7.2:
     handlebars "^1.3.0"
     img-stats "^0.5.2"
 
-doc-ready@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/doc-ready/-/doc-ready-1.0.4.tgz#37f5391969cff994303fdfef2e5d50357f8164d3"
+dns-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
+
+dns-packet@^1.0.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.2.2.tgz#a8a26bec7646438963fc86e06f8f8b16d6c8bf7a"
   dependencies:
-    eventie "^1"
+    ip "^1.1.0"
+    safe-buffer "^5.0.1"
 
-doctrine@^1.2.2:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
+dns-txt@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/dns-txt/-/dns-txt-2.0.2.tgz#b91d806f5d27188e4ab3e7d107d881a1cc4642b6"
+  dependencies:
+    buffer-indexof "^1.0.0"
+
+doctrine@^2.0.2:
+  version "2.0.2"
+  resolved "http://registry.npm.taobao.org/doctrine/download/doctrine-2.0.2.tgz#68f96ce8efc56cc42651f1faadb4f175273b0075"
   dependencies:
     esutils "^2.0.2"
-    isarray "^1.0.0"
 
 dom-converter@~0.1:
   version "0.1.4"
@@ -1768,7 +2039,7 @@ dom-serializer@~0.0.0:
     domelementtype "~1.1.1"
     entities "~1.1.1"
 
-dom-walk@^0.1.0:
+dom-walk@^0.1.0, dom-walk@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
 
@@ -1827,19 +2098,26 @@ ecc-jsbn@~0.1.1:
   dependencies:
     jsbn "~0.1.0"
 
-editorconfig@^0.13.2:
-  version "0.13.2"
-  resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.13.2.tgz#8e57926d9ee69ab6cb999f027c2171467acceb35"
-  dependencies:
-    bluebird "^3.0.5"
-    commander "^2.9.0"
-    lru-cache "^3.2.0"
-    sigmund "^1.0.1"
-
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
+electron-to-chromium@^1.3.18:
+  version "1.3.18"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.18.tgz#3dcc99da3e6b665f6abbc71c28ad51a2cd731a9c"
+
+elliptic@^6.0.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
+  dependencies:
+    bn.js "^4.4.0"
+    brorand "^1.0.1"
+    hash.js "^1.0.0"
+    hmac-drbg "^1.0.0"
+    inherits "^2.0.1"
+    minimalistic-assert "^1.0.0"
+    minimalistic-crypto-utils "^1.0.0"
+
 emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
@@ -1892,13 +2170,14 @@ engine.io@1.6.10:
     engine.io-parser "1.2.4"
     ws "1.0.1"
 
-enhanced-resolve@~0.9.0:
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-0.9.1.tgz#4d6e689b3725f86090927ccc86cd9f1635b89e2e"
+enhanced-resolve@^3.4.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.4.1.tgz#0421e339fd71419b3da13d129b3979040230476e"
   dependencies:
     graceful-fs "^4.1.2"
-    memory-fs "^0.2.0"
-    tapable "^0.1.8"
+    memory-fs "^0.4.0"
+    object-assign "^4.0.1"
+    tapable "^0.2.7"
 
 ent@~2.2.0:
   version "2.2.0"
@@ -1912,6 +2191,13 @@ entities@^1.1.1, entities@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
 
+envify@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/envify/-/envify-4.1.0.tgz#f39ad3db9d6801b4e6b478b61028d3f0b6819f7e"
+  dependencies:
+    esprima "^4.0.0"
+    through "~2.3.4"
+
 errno@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.4.tgz#b896e23a9e5e8ba33871fc996abd3635fc9a1c7d"
@@ -1924,13 +2210,31 @@ error-ex@^1.2.0:
   dependencies:
     is-arrayish "^0.2.1"
 
-error@^4.3.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/error/-/error-4.4.0.tgz#bf69ff251fb4a279c19adccdaa6b61e90d9bf12a"
+es-abstract@^1.7.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.9.0.tgz#690829a07cae36b222e7fd9b75c0d0573eb25227"
+  dependencies:
+    es-to-primitive "^1.1.1"
+    function-bind "^1.1.1"
+    has "^1.0.1"
+    is-callable "^1.1.3"
+    is-regex "^1.0.4"
+
+es-to-primitive@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.1.1.tgz#45355248a88979034b6792e19bb81f2b7975dd0d"
+  dependencies:
+    is-callable "^1.1.1"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.1"
+
+es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.14:
+  version "0.10.42"
+  resolved "http://registry.npm.taobao.org/es5-ext/download/es5-ext-0.10.42.tgz#8c07dd33af04d5dcd1310b5cef13bea63a89ba8d"
   dependencies:
-    camelize "^1.0.0"
-    string-template "~0.2.0"
-    xtend "~4.0.0"
+    es6-iterator "~2.0.3"
+    es6-symbol "~3.1.1"
+    next-tick "1"
 
 es5-ext@^0.10.7, es5-ext@^0.10.8, es5-ext@~0.10.11, es5-ext@~0.10.2, es5-ext@~0.10.7:
   version "0.10.12"
@@ -1947,6 +2251,14 @@ es6-iterator@2:
     es5-ext "^0.10.7"
     es6-symbol "3"
 
+es6-iterator@~2.0.3:
+  version "2.0.3"
+  resolved "http://registry.npm.taobao.org/es6-iterator/download/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
+  dependencies:
+    d "1"
+    es5-ext "^0.10.35"
+    es6-symbol "^3.1.1"
+
 es6-map@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/es6-map/-/es6-map-0.1.4.tgz#a34b147be224773a4d7da8072794cefa3632b897"
@@ -1958,10 +2270,14 @@ es6-map@^0.1.3:
     es6-symbol "~3.1.0"
     event-emitter "~0.3.4"
 
-es6-promise@^4.0.5, es6-promise@~4.0.3:
+es6-promise@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.0.5.tgz#7882f30adde5b240ccfa7f7d78c548330951ae42"
 
+es6-promise@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.1.1.tgz#8811e90915d9a0dba36274f0b242dbda78f9c92a"
+
 es6-set@~0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.4.tgz#9516b6761c2964b92ff479456233a247dc707ce8"
@@ -1979,7 +2295,14 @@ es6-symbol@3, es6-symbol@~3.1, es6-symbol@~3.1.0:
     d "~0.1.1"
     es5-ext "~0.10.11"
 
-es6-templates@^0.2.2:
+es6-symbol@^3.1.1, es6-symbol@~3.1.1:
+  version "3.1.1"
+  resolved "http://registry.npm.taobao.org/es6-symbol/download/es6-symbol-3.1.1.tgz#bf00ef4fdab6ba1b46ecb7b629b4c7ed5715cc77"
+  dependencies:
+    d "1"
+    es5-ext "~0.10.14"
+
+es6-templates@^0.2.2:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/es6-templates/-/es6-templates-0.2.3.tgz#5cb9ac9fb1ded6eb1239342b81d792bbb4078ee4"
   dependencies:
@@ -2001,7 +2324,7 @@ escape-html@~1.0.3:
 
 escape-string-regexp@1.0.5, escape-string-regexp@^1.0.0, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+  resolved "http://registry.npm.taobao.org/escape-string-regexp/download/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 
 escodegen@1.8.x, escodegen@^1.6.1:
   version "1.8.1"
@@ -2023,139 +2346,133 @@ escope@^3.6.0:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
-eslint-config-defaults@*:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-defaults/-/eslint-config-defaults-9.0.0.tgz#a090adc13b2935e3f43b3cd048a92701654e5ad5"
-
-eslint-config-elemefe@*:
+eslint-config-elemefe@0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/eslint-config-elemefe/-/eslint-config-elemefe-0.1.1.tgz#5a1664ce3f7d91f68528b508d040044ae6c10aa3"
 
-eslint-friendly-formatter@*:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/eslint-friendly-formatter/-/eslint-friendly-formatter-2.0.6.tgz#eddd18dd001798b8f769e169936a3749c36c2d5a"
-  dependencies:
-    chalk "^1.0.0"
-    extend "^3.0.0"
-    minimist "^1.2.0"
-    text-table "^0.2.0"
-
-eslint-loader@*:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/eslint-loader/-/eslint-loader-1.6.1.tgz#96c47c812772eeb077e3a81681818e671a2cabf5"
+eslint-loader@^1.9.0:
+  version "1.9.0"
+  resolved "http://registry.npm.taobao.org/eslint-loader/download/eslint-loader-1.9.0.tgz#7e1be9feddca328d3dcfaef1ad49d5beffe83a13"
   dependencies:
-    find-cache-dir "^0.1.1"
-    loader-utils "^0.2.7"
+    loader-fs-cache "^1.0.0"
+    loader-utils "^1.0.2"
     object-assign "^4.0.1"
     object-hash "^1.1.4"
+    rimraf "^2.6.1"
 
-eslint-plugin-html@*, eslint-plugin-html@^1.5.2:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-html/-/eslint-plugin-html-1.7.0.tgz#2a5b03884d8d56adf9ad9864e9c036480fb629c9"
+eslint-plugin-html@^4.0.1:
+  version "4.0.1"
+  resolved "http://registry.npm.taobao.org/eslint-plugin-html/download/eslint-plugin-html-4.0.1.tgz#fc70072263cc938496fbbc9cf648660e41fa269a"
   dependencies:
     htmlparser2 "^3.8.2"
 
-eslint-plugin-react@*, eslint-plugin-react@^6.2.0:
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-6.8.0.tgz#741ab5438a094532e5ce1bbb935d6832356f492d"
+eslint-plugin-json@^1.2.0:
+  version "1.2.0"
+  resolved "http://registry.npm.taobao.org/eslint-plugin-json/download/eslint-plugin-json-1.2.0.tgz#9ba73bb0be99d50093e889f5b968463d2a30efae"
   dependencies:
-    doctrine "^1.2.2"
-    jsx-ast-utils "^1.3.4"
+    jshint "^2.8.0"
 
-eslint-plugin-vue@*:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-1.0.0.tgz#01b133cef42c40d807f535011715d3fd18795337"
+eslint-scope@^3.7.1:
+  version "3.7.1"
+  resolved "http://registry.npm.taobao.org/eslint-scope/download/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8"
   dependencies:
-    eslint-plugin-html "^1.5.2"
-    eslint-plugin-react "^6.2.0"
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
 
-eslint@*, eslint@^3.10.2:
-  version "3.12.1"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.12.1.tgz#507a609fe251dfefd58fda03e6dbd7e851c07581"
-  dependencies:
-    babel-code-frame "^6.16.0"
-    chalk "^1.1.3"
-    concat-stream "^1.4.6"
-    debug "^2.1.1"
-    doctrine "^1.2.2"
-    escope "^3.6.0"
-    espree "^3.3.1"
-    estraverse "^4.2.0"
+eslint-visitor-keys@^1.0.0:
+  version "1.0.0"
+  resolved "http://registry.npm.taobao.org/eslint-visitor-keys/download/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
+
+eslint@4.14.0:
+  version "4.14.0"
+  resolved "http://registry.npm.taobao.org/eslint/download/eslint-4.14.0.tgz#96609768d1dd23304faba2d94b7fefe5a5447a82"
+  dependencies:
+    ajv "^5.3.0"
+    babel-code-frame "^6.22.0"
+    chalk "^2.1.0"
+    concat-stream "^1.6.0"
+    cross-spawn "^5.1.0"
+    debug "^3.1.0"
+    doctrine "^2.0.2"
+    eslint-scope "^3.7.1"
+    eslint-visitor-keys "^1.0.0"
+    espree "^3.5.2"
+    esquery "^1.0.0"
     esutils "^2.0.2"
     file-entry-cache "^2.0.0"
-    glob "^7.0.3"
-    globals "^9.14.0"
-    ignore "^3.2.0"
+    functional-red-black-tree "^1.0.1"
+    glob "^7.1.2"
+    globals "^11.0.1"
+    ignore "^3.3.3"
     imurmurhash "^0.1.4"
-    inquirer "^0.12.0"
-    is-my-json-valid "^2.10.0"
+    inquirer "^3.0.6"
     is-resolvable "^1.0.0"
-    js-yaml "^3.5.1"
-    json-stable-stringify "^1.0.0"
+    js-yaml "^3.9.1"
+    json-stable-stringify-without-jsonify "^1.0.1"
     levn "^0.3.0"
-    lodash "^4.0.0"
-    mkdirp "^0.5.0"
+    lodash "^4.17.4"
+    minimatch "^3.0.2"
+    mkdirp "^0.5.1"
     natural-compare "^1.4.0"
     optionator "^0.8.2"
-    path-is-inside "^1.0.1"
-    pluralize "^1.2.1"
-    progress "^1.1.8"
-    require-uncached "^1.0.2"
-    shelljs "^0.7.5"
-    strip-bom "^3.0.0"
-    strip-json-comments "~1.0.1"
-    table "^3.7.8"
+    path-is-inside "^1.0.2"
+    pluralize "^7.0.0"
+    progress "^2.0.0"
+    require-uncached "^1.0.3"
+    semver "^5.3.0"
+    strip-ansi "^4.0.0"
+    strip-json-comments "~2.0.1"
+    table "^4.0.1"
     text-table "~0.2.0"
-    user-home "^2.0.0"
 
-espree@^3.3.1:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-3.3.2.tgz#dbf3fadeb4ecb4d4778303e50103b3d36c88b89c"
+espree@^3.5.2:
+  version "3.5.2"
+  resolved "http://registry.npm.taobao.org/espree/download/espree-3.5.2.tgz#756ada8b979e9dcfcdb30aad8d1a9304a905e1ca"
   dependencies:
-    acorn "^4.0.1"
+    acorn "^5.2.1"
     acorn-jsx "^3.0.0"
 
 esprima@2.7.x, esprima@^2.1.0, esprima@^2.6.0, esprima@^2.7.1:
   version "2.7.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
 
+esprima@^4.0.0:
+  version "4.0.0"
+  resolved "http://registry.npm.taobao.org/esprima/download/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804"
+
 esprima@~3.1.0:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.2.tgz#954b5d19321ca436092fa90f06d6798531fe8184"
 
+esquery@^1.0.0:
+  version "1.0.0"
+  resolved "http://registry.npm.taobao.org/esquery/download/esquery-1.0.0.tgz#cfba8b57d7fba93f17298a8a006a04cda13d80fa"
+  dependencies:
+    estraverse "^4.0.0"
+
 esrecurse@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.1.0.tgz#4713b6536adf7f2ac4f327d559e7756bff648220"
+  version "4.2.0"
+  resolved "http://registry.npm.taobao.org/esrecurse/download/esrecurse-4.2.0.tgz#fa9568d98d3823f9a41d91e902dcab9ea6e5b163"
   dependencies:
-    estraverse "~4.1.0"
+    estraverse "^4.1.0"
     object-assign "^4.0.1"
 
 estraverse@^1.9.1:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-1.9.3.tgz#af67f2dc922582415950926091a4005d29c9bb44"
 
-estraverse@^4.1.1, estraverse@^4.2.0:
+estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
 
-estraverse@~4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.1.1.tgz#f6caca728933a850ef90661d0e17982ba47111a2"
-
 esutils@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+  resolved "http://registry.npm.taobao.org/esutils/download/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
 
 etag@~1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.7.0.tgz#03d30b5f67dd6e632d2945d30d6652731a34d5d8"
 
-ev-store@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/ev-store/-/ev-store-7.0.0.tgz#1ab0c7f82136505dd74b31d17701cb2be6d26558"
-  dependencies:
-    individual "^3.0.0"
-
 event-emitter@~0.3.4:
   version "0.3.4"
   resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.4.tgz#8d63ddfb4cfe1fae3b32ca265c4c720222080bb5"
@@ -2167,23 +2484,38 @@ eventemitter3@1.x.x:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
 
-eventie@^1:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/eventie/-/eventie-1.0.6.tgz#d4ffc8b0c2b5e493c2aa1b22cbe918d3aee74437"
-
-events@^1.0.0:
+events@^1.0.0, events@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
 
-eventsource@~0.1.6:
+eventsource@0.1.6:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-0.1.6.tgz#0acede849ed7dd1ccc32c811bb11b944d4f29232"
   dependencies:
     original ">=0.0.5"
 
-exit-hook@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
+evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"
+  dependencies:
+    md5.js "^1.3.4"
+    safe-buffer "^5.1.1"
+
+execa@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
+  dependencies:
+    cross-spawn "^5.0.1"
+    get-stream "^3.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
+exit@0.1.2, exit@0.1.x:
+  version "0.1.2"
+  resolved "http://registry.npm.taobao.org/exit/download/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
 
 expand-braces@^0.1.1:
   version "0.1.2"
@@ -2253,28 +2585,28 @@ extend@^3.0.0, extend@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.0.tgz#5a474353b9f3353ddd8176dfd37b91c83a46f1d4"
 
+external-editor@^2.0.4:
+  version "2.1.0"
+  resolved "http://registry.npm.taobao.org/external-editor/download/external-editor-2.1.0.tgz#3d026a21b7f95b5726387d4200ac160d372c3b48"
+  dependencies:
+    chardet "^0.4.0"
+    iconv-lite "^0.4.17"
+    tmp "^0.0.33"
+
 extglob@^0.3.1:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
   dependencies:
     is-extglob "^1.0.0"
 
-extract-text-webpack-plugin@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-1.0.1.tgz#c95bf3cbaac49dc96f1dc6e072549fbb654ccd2c"
-  dependencies:
-    async "^1.5.0"
-    loader-utils "^0.2.3"
-    webpack-sources "^0.1.0"
-
-extract-zip@~1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.5.0.tgz#92ccf6d81ef70a9fa4c1747114ccef6d8688a6c4"
+extract-text-webpack-plugin@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-3.0.1.tgz#605a8893faca1dd49bb0d2ca87493f33fd43d102"
   dependencies:
-    concat-stream "1.5.0"
-    debug "0.7.4"
-    mkdirp "0.5.0"
-    yauzl "2.4.1"
+    async "^2.4.1"
+    loader-utils "^1.1.0"
+    schema-utils "^0.3.0"
+    webpack-sources "^1.0.1"
 
 extsprintf@1.0.2:
   version "1.0.2"
@@ -2287,9 +2619,17 @@ fancy-log@^1.1.0:
     chalk "^1.1.1"
     time-stamp "^1.0.0"
 
+fast-deep-equal@^1.0.0:
+  version "1.0.0"
+  resolved "http://registry.npm.taobao.org/fast-deep-equal/download/fast-deep-equal-1.0.0.tgz#96256a3bc975595eb36d82e9929d060d893439ff"
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.0.0"
+  resolved "http://registry.npm.taobao.org/fast-json-stable-stringify/download/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
+
 fast-levenshtein@~2.0.4:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.5.tgz#bd33145744519ab1c36c3ee9f31f08e9079b67f2"
+  version "2.0.6"
+  resolved "http://registry.npm.taobao.org/fast-levenshtein/download/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
 
 fastparse@^1.1.1:
   version "1.1.1"
@@ -2307,31 +2647,25 @@ faye-websocket@~0.11.0:
   dependencies:
     websocket-driver ">=0.5.1"
 
-fd-slicer@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65"
-  dependencies:
-    pend "~1.2.0"
-
-figures@^1.3.5:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
+figures@^2.0.0:
+  version "2.0.0"
+  resolved "http://registry.npm.taobao.org/figures/download/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
   dependencies:
     escape-string-regexp "^1.0.5"
-    object-assign "^4.1.0"
 
 file-entry-cache@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-2.0.0.tgz#c392990c3e684783d838b8c84a45d8a048458361"
+  resolved "http://registry.npm.taobao.org/file-entry-cache/download/file-entry-cache-2.0.0.tgz#c392990c3e684783d838b8c84a45d8a048458361"
   dependencies:
     flat-cache "^1.2.1"
     object-assign "^4.0.1"
 
-file-loader@^0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-0.9.0.tgz#1d2daddd424ce6d1b07cfe3f79731bed3617ab42"
+file-loader@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.5.tgz#91c25b6b6fbe56dae99f10a425fd64933b5c9daa"
   dependencies:
-    loader-utils "~0.2.5"
+    loader-utils "^1.0.2"
+    schema-utils "^0.3.0"
 
 file-save@^0.2.0:
   version "0.2.0"
@@ -2382,6 +2716,14 @@ find-cache-dir@^0.1.1:
     mkdirp "^0.5.1"
     pkg-dir "^1.0.0"
 
+find-cache-dir@^1.0.0:
+  version "1.0.0"
+  resolved "http://registry.npm.taobao.org/find-cache-dir/download/find-cache-dir-1.0.0.tgz#9288e3e9e3cc3748717d39eade17cf71fc30ee6f"
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^1.0.0"
+    pkg-dir "^2.0.0"
+
 find-index@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/find-index/-/find-index-0.1.1.tgz#675d358b2ca3892d795a1ab47232f8b6e2e0dde4"
@@ -2393,6 +2735,12 @@ find-up@^1.0.0:
     path-exists "^2.0.0"
     pinkie-promise "^2.0.0"
 
+find-up@^2.0.0, find-up@^2.1.0:
+  version "2.1.0"
+  resolved "http://registry.npm.taobao.org/find-up/download/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
+  dependencies:
+    locate-path "^2.0.0"
+
 findup-sync@^0.4.2:
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-0.4.3.tgz#40043929e7bc60adf0b7f4827c4c6e75a0deca12"
@@ -2423,10 +2771,10 @@ flagged-respawn@^0.3.2:
   resolved "https://registry.yarnpkg.com/flagged-respawn/-/flagged-respawn-0.3.2.tgz#ff191eddcd7088a675b2610fffc976be9b8074b5"
 
 flat-cache@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-1.2.1.tgz#6c837d6225a7de5659323740b36d5361f71691ff"
+  version "1.3.0"
+  resolved "http://registry.npm.taobao.org/flat-cache/download/flat-cache-1.3.0.tgz#d3030b32b38154f4e3b7e9c709f490f7ef97c481"
   dependencies:
-    circular-json "^0.3.0"
+    circular-json "^0.3.1"
     del "^2.0.2"
     graceful-fs "^4.1.2"
     write "^0.2.1"
@@ -2435,16 +2783,26 @@ flatten@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
-for-in@^0.1.5:
+for-in@^0.1.3, for-in@^0.1.5:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.6.tgz#c9f96e89bfad18a545af5ec3ed352a1d9e5b4dc8"
 
+for-in@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
+
 for-own@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.4.tgz#0149b41a39088c7515f51ebe1c1386d45f935072"
   dependencies:
     for-in "^0.1.5"
 
+for-own@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-1.0.0.tgz#c63332f415cedc4b04dbfe70cf836494c53cb44b"
+  dependencies:
+    for-in "^1.0.1"
+
 foreach@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
@@ -2483,6 +2841,12 @@ fresh@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.3.0.tgz#651f838e22424e7566de161d8358caa199f83d4f"
 
+fs-access@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/fs-access/-/fs-access-1.0.1.tgz#d6a87f262271cefebec30c553407fb995da8777a"
+  dependencies:
+    null-check "^1.0.0"
+
 fs-exists-sync@^0.1.0:
   version "0.1.0"
   resolved "http://registry.npmjs.org/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz#982d6893af918e72d08dec9e8673ff2b5a8d6add"
@@ -2505,7 +2869,7 @@ fs-extra@^0.24.0:
     path-is-absolute "^1.0.0"
     rimraf "^2.2.8"
 
-fs-extra@^0.26.4, fs-extra@^0.26.5:
+fs-extra@^0.26.5:
   version "0.26.7"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.26.7.tgz#9ae1fdd94897798edab76d0918cf42d0c3184fa9"
   dependencies:
@@ -2525,13 +2889,13 @@ fs-extra@^0.30.0:
     path-is-absolute "^1.0.0"
     rimraf "^2.2.8"
 
-fs-extra@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-1.0.0.tgz#cd3ce5f7e7cb6145883fcae3191e9877f8587950"
+fs-extra@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.2.tgz#f91704c53d1b461f893452b0c307d9997647ab6b"
   dependencies:
     graceful-fs "^4.1.2"
-    jsonfile "^2.1.0"
-    klaw "^1.0.0"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
 
 fs-promise@^0.3.1:
   version "0.3.1"
@@ -2554,7 +2918,7 @@ fs-readdir-recursive@^1.0.0:
 
 fs.realpath@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  resolved "http://registry.npm.taobao.org/fs.realpath/download/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
 
 fsevents@^1.0.0:
   version "1.0.15"
@@ -2580,9 +2944,13 @@ fstream@^1.0.0, fstream@^1.0.2, fstream@~1.0.10:
     mkdirp ">=0.5 0"
     rimraf "2"
 
-function-bind@^1.0.2, function-bind@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.0.tgz#16176714c801798e4e8f2cf7f7529467bb4a5771"
+function-bind@^1.0.2, function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+
+functional-red-black-tree@^1.0.1:
+  version "1.0.1"
+  resolved "http://registry.npm.taobao.org/functional-red-black-tree/download/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
 
 gauge@~2.7.1:
   version "2.7.2"
@@ -2604,6 +2972,12 @@ gaze@^0.5.1:
   dependencies:
     globule "~0.1.0"
 
+gaze@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/gaze/-/gaze-1.1.2.tgz#847224677adb8870d679257ed3388fdb61e40105"
+  dependencies:
+    globule "^1.0.0"
+
 generate-function@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/generate-function/-/generate-function-2.0.0.tgz#6858fe7c0969b7d4e9093337647ac79f60dfbe74"
@@ -2622,6 +2996,10 @@ get-stdin@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
 
+get-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
+
 getpass@^0.1.1:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.6.tgz#283ffd9fc1256840875311c1b60e8c40187110e6"
@@ -2706,7 +3084,7 @@ glob@^5.0.15, glob@^5.0.3, glob@^5.0.5:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^6.0.1, glob@^6.0.4:
+glob@^6.0.1:
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
   dependencies:
@@ -2716,7 +3094,18 @@ glob@^6.0.1, glob@^6.0.4:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.0.6, glob@^7.1.1:
+glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.2, glob@~7.1.1:
+  version "7.1.2"
+  resolved "http://registry.npm.taobao.org/glob/download/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"
   dependencies:
@@ -2751,14 +3140,18 @@ global-prefix@^0.1.4:
     is-windows "^0.2.0"
     which "^1.2.12"
 
-global@^4.3.0:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/global/-/global-4.3.1.tgz#5f757908c7cbabce54f386ae440e11e26b7916df"
+global@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/global/-/global-4.3.2.tgz#e76989268a6c74c38908b1305b10fc0e394e9d0f"
   dependencies:
     min-document "^2.19.0"
     process "~0.5.1"
 
-globals@^9.0.0, globals@^9.14.0:
+globals@^11.0.1:
+  version "11.1.0"
+  resolved "http://registry.npm.taobao.org/globals/download/globals-11.1.0.tgz#632644457f5f0e3ae711807183700ebf2e4633e4"
+
+globals@^9.0.0:
   version "9.14.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.14.0.tgz#8859936af0038741263053b39d0e76ca241e4034"
 
@@ -2786,7 +3179,7 @@ globby@^4.0.0:
 
 globby@^5.0.0:
   version "5.0.0"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
+  resolved "http://registry.npm.taobao.org/globby/download/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
   dependencies:
     array-union "^1.0.1"
     arrify "^1.0.0"
@@ -2795,6 +3188,24 @@ globby@^5.0.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+globby@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
+  dependencies:
+    array-union "^1.0.1"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
+globule@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/globule/-/globule-1.2.0.tgz#1dc49c6822dd9e8a2fa00ba2a295006e8664bd09"
+  dependencies:
+    glob "~7.1.1"
+    lodash "~4.17.4"
+    minimatch "~3.0.2"
+
 globule@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/globule/-/globule-0.1.0.tgz#d9c8edde1da79d125a151b79533b978676346ae5"
@@ -2809,7 +3220,7 @@ glogg@^1.0.0:
   dependencies:
     sparkles "^1.0.0"
 
-graceful-fs@4.1.2, graceful-fs@^4.1.2:
+graceful-fs@4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.2.tgz#fe2239b7574972e67e41f808823f9bfa4a991e37"
 
@@ -2819,7 +3230,7 @@ graceful-fs@^3.0.0:
   dependencies:
     natives "^1.1.0"
 
-graceful-fs@^4.1.4, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
+graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
 
@@ -2839,6 +3250,16 @@ growl@1.9.2:
   version "1.9.2"
   resolved "https://registry.yarnpkg.com/growl/-/growl-1.9.2.tgz#0ea7743715db8d8de2c5ede1775e1b45ac85c02f"
 
+gulp-autoprefixer@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/gulp-autoprefixer/-/gulp-autoprefixer-4.0.0.tgz#e00a8c571b85d06516ac26341be90dfd9fc1eab0"
+  dependencies:
+    autoprefixer "^7.0.0"
+    gulp-util "^3.0.0"
+    postcss "^6.0.1"
+    through2 "^2.0.0"
+    vinyl-sourcemaps-apply "^0.2.0"
+
 gulp-cssmin@^0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/gulp-cssmin/-/gulp-cssmin-0.1.7.tgz#f576fe5211d107baa9401504249bf87aed1556bd"
@@ -2865,7 +3286,17 @@ gulp-rename@~1.1.0:
   dependencies:
     map-stream ">=0.0.4"
 
-gulp-util@^3.0.0, gulp-util@^3.0.7:
+gulp-sass@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/gulp-sass/-/gulp-sass-3.1.0.tgz#53dc4b68a1f5ddfe4424ab4c247655269a8b74b7"
+  dependencies:
+    gulp-util "^3.0"
+    lodash.clonedeep "^4.3.2"
+    node-sass "^4.2.0"
+    through2 "^2.0.0"
+    vinyl-sourcemaps-apply "^0.2.0"
+
+gulp-util@^3.0, gulp-util@^3.0.0, gulp-util@^3.0.7:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-3.0.7.tgz#78925c4b8f8b49005ac01a011c557e6218941cbb"
   dependencies:
@@ -2925,6 +3356,10 @@ gulplog@^1.0.0:
   dependencies:
     glogg "^1.0.0"
 
+handle-thing@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4"
+
 handlebars@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-1.3.0.tgz#9e9b130a93e389491322d975cf3ec1818c37ce34"
@@ -2960,7 +3395,7 @@ has-ansi@^0.1.0:
 
 has-ansi@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  resolved "http://registry.npm.taobao.org/has-ansi/download/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
   dependencies:
     ansi-regex "^2.0.0"
 
@@ -2988,12 +3423,24 @@ has-flag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
 
+has-flag@^2.0.0:
+  version "2.0.0"
+  resolved "http://registry.npm.taobao.org/has-flag/download/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "http://registry.npm.taobao.org/has-flag/download/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+
 has-gulplog@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/has-gulplog/-/has-gulplog-0.1.0.tgz#6414c82913697da51590397dafb12f22967811ce"
   dependencies:
     sparkles "^1.0.0"
 
+has-symbols@^1.0.0:
+  version "1.0.0"
+  resolved "http://registry.npm.taobao.org/has-symbols/download/has-symbols-1.0.0.tgz#ba1a8f1af2a0fc39650f5c850367704122063b44"
+
 has-unicode@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
@@ -3004,16 +3451,29 @@ has@^1.0.1:
   dependencies:
     function-bind "^1.0.2"
 
+hash-base@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-2.0.2.tgz#66ea1d856db4e8a5470cadf6fce23ae5244ef2e1"
+  dependencies:
+    inherits "^2.0.1"
+
+hash-base@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.0.4.tgz#5fc8686847ecd73499403319a6b0a3f3f6ae4918"
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
 hash-sum@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-1.0.2.tgz#33b40777754c6432573c120cc3808bbd10d47f04"
 
-hasha@~2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/hasha/-/hasha-2.2.0.tgz#78d7cbfc1e6d66303fe79837365984517b2f6ee1"
+hash.js@^1.0.0, hash.js@^1.0.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.3.tgz#340dedbe6290187151c1ea1d777a3448935df846"
   dependencies:
-    is-stream "^1.0.1"
-    pinkie-promise "^2.0.0"
+    inherits "^2.0.3"
+    minimalistic-assert "^1.0.0"
 
 hawk@~3.1.3:
   version "3.1.3"
@@ -3032,6 +3492,14 @@ highlight.js@^9.3.0, highlight.js@^9.4.0:
   version "9.9.0"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.9.0.tgz#b9995dcfdc2773e307a34f0460d92b9a474782c0"
 
+hmac-drbg@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
+  dependencies:
+    hash.js "^1.0.3"
+    minimalistic-assert "^1.0.0"
+    minimalistic-crypto-utils "^1.0.1"
+
 hoek@2.x.x:
   version "2.16.3"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
@@ -3053,25 +3521,34 @@ hosted-git-info@^2.1.4:
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.1.5.tgz#0ba81d90da2e25ab34a332e6ec77936e1598118b"
 
-hsl@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/hsl/-/hsl-0.1.1.tgz#328d5d7bead2feec37b75baf8d055b83648579b6"
+hpack.js@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
+  dependencies:
+    inherits "^2.0.1"
+    obuf "^1.0.0"
+    readable-stream "^2.0.1"
+    wbuf "^1.1.0"
 
 html-comment-regex@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e"
 
-html-loader@^0.4.3:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/html-loader/-/html-loader-0.4.4.tgz#f2b5b9acd5e035ff3ab5fd369c13c97a7bb014da"
+html-entities@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
+
+html-loader@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/html-loader/-/html-loader-0.5.1.tgz#4f1e8396a1ea6ab42bedc987dfac058070861ebe"
   dependencies:
     es6-templates "^0.2.2"
     fastparse "^1.1.1"
     html-minifier "^3.0.1"
-    loader-utils "^0.2.15"
+    loader-utils "^1.0.2"
     object-assign "^4.1.0"
 
-html-minifier@^3.0.1, html-minifier@^3.1.0:
+html-minifier@^3.0.1, html-minifier@^3.2.3:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.2.3.tgz#d2ff536e24d95726c332493d8f77d84dbed85372"
   dependencies:
@@ -3084,18 +3561,18 @@ html-minifier@^3.0.1, html-minifier@^3.1.0:
     relateurl "0.2.x"
     uglify-js "2.7.x"
 
-html-webpack-plugin@^2.22.0:
-  version "2.24.1"
-  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-2.24.1.tgz#7f45fc678f66eac2d433f22336b4399da023b57e"
+html-webpack-plugin@^2.30.1:
+  version "2.30.1"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-2.30.1.tgz#7f9c421b7ea91ec460f56527d78df484ee7537d5"
   dependencies:
-    bluebird "^3.4.6"
-    html-minifier "^3.1.0"
+    bluebird "^3.4.7"
+    html-minifier "^3.2.3"
     loader-utils "^0.2.16"
-    lodash "^4.16.4"
+    lodash "^4.17.3"
     pretty-error "^2.0.2"
     toposort "^1.0.0"
 
-htmlparser2@^3.8.2, htmlparser2@~3.8.1:
+htmlparser2@3.8.x, htmlparser2@^3.8.2, htmlparser2@~3.8.1:
   version "3.8.3"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.8.3.tgz#996c28b191516a8be86501a7d79757e5c70c1068"
   dependencies:
@@ -3125,6 +3602,10 @@ htmlparser2@~3.3.0:
     domutils "1.1"
     readable-stream "1.0"
 
+http-deceiver@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
+
 http-errors@~1.5.0:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.5.1.tgz#788c0d2c1de2c81b9e6e8c01843b6b97eb920750"
@@ -3133,9 +3614,9 @@ http-errors@~1.5.0:
     setprototypeof "1.0.2"
     statuses ">= 1.3.1 < 2"
 
-http-proxy-middleware@~0.17.1:
-  version "0.17.3"
-  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.3.tgz#940382147149b856084f5534752d5b5a8168cd1d"
+http-proxy-middleware@~0.17.4:
+  version "0.17.4"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.4.tgz#642e8848851d66f09d4f124912846dbaeb41b833"
   dependencies:
     http-proxy "^1.16.2"
     is-glob "^3.1.0"
@@ -3169,17 +3650,27 @@ iconv-lite@0.4.13:
   version "0.4.13"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
 
+iconv-lite@^0.4.17:
+  version "0.4.19"
+  resolved "http://registry.npm.taobao.org/iconv-lite/download/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
+
 icss-replace-symbols@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.0.2.tgz#cb0b6054eb3af6edc9ab1d62d01933e2d4c8bfa5"
 
+icss-utils@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-2.1.0.tgz#83f0a0ec378bf3246178b6c2ad9136f135b1c962"
+  dependencies:
+    postcss "^6.0.1"
+
 ieee754@^1.1.4:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
 
-ignore@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.2.0.tgz#8d88f03c3002a0ac52114db25d2c673b0bf1e435"
+ignore@^3.3.3:
+  version "3.3.7"
+  resolved "http://registry.npm.taobao.org/ignore/download/ignore-3.3.7.tgz#612289bfb3c220e186a58118618d5be8c1bab021"
 
 img-stats@^0.5.2:
   version "0.5.2"
@@ -3189,7 +3680,11 @@ img-stats@^0.5.2:
 
 imurmurhash@^0.1.4:
   version "0.1.4"
-  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+  resolved "http://registry.npm.taobao.org/imurmurhash/download/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+
+in-publish@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/in-publish/-/in-publish-2.0.0.tgz#e20ff5e3a2afc2690320b6dc552682a9c7fadf51"
 
 indent-string@^2.1.0:
   version "2.1.0"
@@ -3205,13 +3700,9 @@ indexof@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
 
-individual@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/individual/-/individual-3.0.0.tgz#e7ca4f85f8957b018734f285750dc22ec2f9862d"
-
 inflight@^1.0.4:
   version "1.0.6"
-  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  resolved "http://registry.npm.taobao.org/inflight/download/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
   dependencies:
     once "^1.3.0"
     wrappy "1"
@@ -3220,7 +3711,7 @@ inherits@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-1.0.2.tgz#ca4309dadee6b54cc0b8d247e8d7c7a0975bdc9b"
 
-inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@~2.0.0, inherits@~2.0.1:
+inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
 
@@ -3232,33 +3723,36 @@ ini@^1.3.4, ini@~1.3.0:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
 
-inject-loader@^3.0.0-beta2:
-  version "3.0.0-beta2"
-  resolved "https://registry.yarnpkg.com/inject-loader/-/inject-loader-3.0.0-beta2.tgz#57952bfdeeb27532c11b04a3c509932a4c353808"
+inject-loader@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/inject-loader/-/inject-loader-3.0.1.tgz#844a4596150cf6b864c2f79806d40a2caee4c2c7"
   dependencies:
-    loader-utils "^0.2.3"
+    babel-core "~6"
 
-inquirer@^0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-0.12.0.tgz#1ef2bfd63504df0bc75785fff8c2c41df12f077e"
+inquirer@^3.0.6:
+  version "3.3.0"
+  resolved "http://registry.npm.taobao.org/inquirer/download/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
   dependencies:
-    ansi-escapes "^1.1.0"
-    ansi-regex "^2.0.0"
-    chalk "^1.0.0"
-    cli-cursor "^1.0.1"
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.0"
+    cli-cursor "^2.1.0"
     cli-width "^2.0.0"
-    figures "^1.3.5"
+    external-editor "^2.0.4"
+    figures "^2.0.0"
     lodash "^4.3.0"
-    readline2 "^1.0.1"
-    run-async "^0.1.0"
-    rx-lite "^3.1.2"
-    string-width "^1.0.1"
-    strip-ansi "^3.0.0"
+    mute-stream "0.0.7"
+    run-async "^2.2.0"
+    rx-lite "^4.0.8"
+    rx-lite-aggregates "^4.0.8"
+    string-width "^2.1.0"
+    strip-ansi "^4.0.0"
     through "^2.3.6"
 
-interpret@^0.6.4:
-  version "0.6.6"
-  resolved "https://registry.yarnpkg.com/interpret/-/interpret-0.6.6.tgz#fecd7a18e7ce5ca6abfb953e1f86213a49f1625b"
+internal-ip@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-1.2.0.tgz#ae9fbf93b984878785d50a8de1b356956058cf5c"
+  dependencies:
+    meow "^3.3.0"
 
 interpret@^1.0.0:
   version "1.0.1"
@@ -3274,6 +3768,10 @@ invert-kv@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
 
+ip@^1.1.0, ip@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
+
 ipaddr.js@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.1.1.tgz#c791d95f52b29c1247d5df80ada39b8a73647230"
@@ -3289,18 +3787,6 @@ is-absolute@^0.2.3:
     is-relative "^0.2.1"
     is-windows "^0.2.0"
 
-is-array-like@^1.0.3:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/is-array-like/-/is-array-like-1.1.2.tgz#7f280aa777f53eb31f74e1dcd3e040923186c205"
-  dependencies:
-    is-array "^1.0.1"
-    is-function "^1.0.1"
-    is-window "^1.0.1"
-
-is-array@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-array/-/is-array-1.0.1.tgz#e9850cc2cc860c3bc0977e84ccf0dd464584279a"
-
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
@@ -3311,9 +3797,9 @@ is-binary-path@^1.0.0:
   dependencies:
     binary-extensions "^1.0.0"
 
-is-buffer@^1.0.2:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.4.tgz#cfc86ccd5dc5a52fa80489111c6920c457e2d98b"
+is-buffer@^1.0.2, is-buffer@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"
 
 is-builtin-module@^1.0.0:
   version "1.0.0"
@@ -3321,6 +3807,14 @@ is-builtin-module@^1.0.0:
   dependencies:
     builtin-modules "^1.0.0"
 
+is-callable@^1.1.1, is-callable@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.3.tgz#86eb75392805ddc33af71c92a0eedf74ee7604b2"
+
+is-date-object@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
+
 is-directory@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
@@ -3343,7 +3837,7 @@ is-extglob@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
 
-is-extglob@^2.1.0:
+is-extglob@^2.1.0, is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
 
@@ -3361,11 +3855,7 @@ is-fullwidth-code-point@^1.0.0:
 
 is-fullwidth-code-point@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
-
-is-function@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"
+  resolved "http://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
 
 is-glob@^2.0.0, is-glob@^2.0.1:
   version "2.0.1"
@@ -3379,13 +3869,13 @@ is-glob@^3.1.0:
   dependencies:
     is-extglob "^2.1.0"
 
-is-index@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-index/-/is-index-1.0.2.tgz#061485330cbc309e850e324ee2071454c11c6afb"
+is-glob@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.0.tgz#9521c76845cc2610a85203ddf080a958c2ffabc0"
   dependencies:
-    is-nil "^1.0.0"
+    is-extglob "^2.1.1"
 
-is-my-json-valid@^2.10.0, is-my-json-valid@^2.12.4:
+is-my-json-valid@^2.12.4:
   version "2.15.0"
   resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.15.0.tgz#936edda3ca3c211fd98f3b2d3e08da43f7b2915b"
   dependencies:
@@ -3394,10 +3884,6 @@ is-my-json-valid@^2.10.0, is-my-json-valid@^2.12.4:
     jsonpointer "^4.0.0"
     xtend "^4.0.0"
 
-is-nil@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-nil/-/is-nil-1.0.1.tgz#2daba29e0b585063875e7b539d071f5b15937969"
-
 is-number@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-0.1.1.tgz#69a7af116963d47206ec9bd9b48a14216f1e3806"
@@ -3408,23 +3894,19 @@ is-number@^2.0.2, is-number@^2.1.0:
   dependencies:
     kind-of "^3.0.2"
 
-is-object@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-object/-/is-object-1.0.1.tgz#8952688c5ec2ffd6b03ecc85e769e02903083470"
-
 is-path-cwd@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
+  resolved "http://registry.npm.taobao.org/is-path-cwd/download/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
 
 is-path-in-cwd@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.0.tgz#6477582b8214d602346094567003be8a9eac04dc"
+  resolved "http://registry.npm.taobao.org/is-path-in-cwd/download/is-path-in-cwd-1.0.0.tgz#6477582b8214d602346094567003be8a9eac04dc"
   dependencies:
     is-path-inside "^1.0.0"
 
 is-path-inside@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.0.tgz#fc06e5a1683fbda13de667aff717bbc10a48f37f"
+  version "1.0.1"
+  resolved "http://registry.npm.taobao.org/is-path-inside/download/is-path-inside-1.0.1.tgz#8ef5b7de50437a3fdca6b4e865ef7aa55cb48036"
   dependencies:
     path-is-inside "^1.0.1"
 
@@ -3432,6 +3914,12 @@ is-plain-obj@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
 
+is-plain-object@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
+  dependencies:
+    isobject "^3.0.1"
+
 is-posix-bracket@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
@@ -3440,10 +3928,20 @@ is-primitive@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
 
+is-promise@^2.1.0:
+  version "2.1.0"
+  resolved "http://registry.npm.taobao.org/is-promise/download/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
+
 is-property@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84"
 
+is-regex@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491"
+  dependencies:
+    has "^1.0.1"
+
 is-relative@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-relative/-/is-relative-0.2.1.tgz#d27f4c7d516d175fb610db84bbeef23c3bc97aa5"
@@ -3451,12 +3949,10 @@ is-relative@^0.2.1:
     is-unc-path "^0.1.1"
 
 is-resolvable@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.0.0.tgz#8df57c61ea2e3c501408d100fb013cf8d6e0cc62"
-  dependencies:
-    tryit "^1.0.1"
+  version "1.0.1"
+  resolved "http://registry.npm.taobao.org/is-resolvable/download/is-resolvable-1.0.1.tgz#acca1cd36dbe44b974b924321555a70ba03b1cf4"
 
-is-stream@^1.0.1:
+is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
 
@@ -3484,14 +3980,14 @@ is-utf8@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
 
-is-window@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-window/-/is-window-1.0.2.tgz#2c896ca53db97de45d3c33133a65d8c9f563480d"
-
 is-windows@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-0.2.0.tgz#de1aa6d63ea29dd248737b69f1ff8b8002d2108c"
 
+is-wsl@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
+
 isarray@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
@@ -3500,13 +3996,21 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
 
+isarray@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.2.tgz#5aa99638daf2248b10b9598b763a045688ece3ee"
+
 isbinaryfile@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-3.0.1.tgz#6e99573675372e841a0520c036b41513d783e79e"
 
 isexe@^1.1.1:
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/isexe/-/isexe-1.1.2.tgz#36f3e22e60750920f5e7241a476a8c6a42275ad0"
+  resolved "http://registry.npm.taobao.org/isexe/download/isexe-1.1.2.tgz#36f3e22e60750920f5e7241a476a8c6a42275ad0"
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "http://registry.npm.taobao.org/isexe/download/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
 
 isobject@^2.0.0:
   version "2.1.0"
@@ -3514,6 +4018,10 @@ isobject@^2.0.0:
   dependencies:
     isarray "1.0.0"
 
+isobject@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+
 isparta-loader@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isparta-loader/-/isparta-loader-2.0.0.tgz#4425f496c93f765bbceb4dd938576da307566ed1"
@@ -3567,30 +4075,32 @@ jodid25519@^1.0.0:
   dependencies:
     jsbn "~0.1.0"
 
-js-base64@^2.1.5, js-base64@^2.1.9:
+js-base64@^2.1.5, js-base64@^2.1.8, js-base64@^2.1.9:
   version "2.1.9"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.1.9.tgz#f0e80ae039a4bd654b5f281fc93f04a914a7fcce"
 
-js-beautify@^1.6.3:
-  version "1.6.4"
-  resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.6.4.tgz#a9af79699742ac9a1b6fddc1fdbc78bc4d515fc3"
-  dependencies:
-    config-chain "~1.1.5"
-    editorconfig "^0.13.2"
-    mkdirp "~0.5.0"
-    nopt "~3.0.1"
-
 js-tokens@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-2.0.0.tgz#79903f5563ee778cc1162e6dcf1a0027c97f9cb5"
 
-js-yaml@3.6.1, js-yaml@3.x, js-yaml@^3.4.3, js-yaml@^3.5.1, js-yaml@~3.6.1:
+js-tokens@^3.0.2:
+  version "3.0.2"
+  resolved "http://registry.npm.taobao.org/js-tokens/download/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
+
+js-yaml@3.6.1, js-yaml@3.x, js-yaml@^3.4.3, js-yaml@~3.6.1:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.6.1.tgz#6e5fe67d8b205ce4d22fad05b7781e8dadcc4b30"
   dependencies:
     argparse "^1.0.7"
     esprima "^2.6.0"
 
+js-yaml@^3.9.1:
+  version "3.10.0"
+  resolved "http://registry.npm.taobao.org/js-yaml/download/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
 jsbn@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.0.tgz#650987da0dd74f4ebf5a11377a2aa2d273e97dfd"
@@ -3623,9 +4133,22 @@ jsesc@~0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
 
-json-loader@^0.5.4:
-  version "0.5.4"
-  resolved "https://registry.yarnpkg.com/json-loader/-/json-loader-0.5.4.tgz#8baa1365a632f58a3c46d20175fc6002c96e37de"
+jshint@^2.8.0:
+  version "2.9.5"
+  resolved "http://registry.npm.taobao.org/jshint/download/jshint-2.9.5.tgz#1e7252915ce681b40827ee14248c46d34e9aa62c"
+  dependencies:
+    cli "~1.0.0"
+    console-browserify "1.1.x"
+    exit "0.1.x"
+    htmlparser2 "3.8.x"
+    lodash "3.7.x"
+    minimatch "~3.0.2"
+    shelljs "0.3.x"
+    strip-json-comments "1.0.x"
+
+json-loader@^0.5.4, json-loader@^0.5.7:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/json-loader/-/json-loader-0.5.7.tgz#dca14a70235ff82f0ac9a3abeb60d337a365185d"
 
 json-parse-helpfulerror@^1.0.3:
   version "1.0.3"
@@ -3633,13 +4156,21 @@ json-parse-helpfulerror@^1.0.3:
   dependencies:
     jju "^1.1.0"
 
+json-schema-traverse@^0.3.0:
+  version "0.3.1"
+  resolved "http://registry.npm.taobao.org/json-schema-traverse/download/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
+
 json-schema@0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
 
-json-stable-stringify@^1.0.0, json-stable-stringify@^1.0.1:
+json-stable-stringify-without-jsonify@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
+  resolved "http://registry.npm.taobao.org/json-stable-stringify-without-jsonify/download/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
+
+json-stable-stringify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
   dependencies:
     jsonify "~0.0.0"
 
@@ -3659,7 +4190,7 @@ json3@3.3.2, json3@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1"
 
-json5@^0.5.0:
+json5@^0.5.0, json5@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
 
@@ -3669,6 +4200,12 @@ jsonfile@^2.1.0:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+jsonfile@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
 jsonify@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
@@ -3685,12 +4222,12 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.3.6"
 
-jsx-ast-utils@^1.3.4:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.3.4.tgz#0257ed1cc4b1e65b39d7d9940f9fb4f20f7ba0a9"
+karma-chrome-launcher@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/karma-chrome-launcher/-/karma-chrome-launcher-2.2.0.tgz#cf1b9d07136cc18fe239327d24654c3dbc368acf"
   dependencies:
-    acorn-jsx "^3.0.1"
-    object-assign "^4.1.0"
+    fs-access "^1.0.0"
+    which "^1.2.1"
 
 karma-coverage@^1.1.1:
   version "1.1.1"
@@ -3708,13 +4245,6 @@ karma-mocha@^1.2.0:
   dependencies:
     minimist "1.2.0"
 
-karma-phantomjs-launcher@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/karma-phantomjs-launcher/-/karma-phantomjs-launcher-1.0.2.tgz#19e1041498fd75563ed86730a22c1fe579fa8fb1"
-  dependencies:
-    lodash "^4.0.1"
-    phantomjs-prebuilt "^2.1.7"
-
 karma-sinon-chai@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/karma-sinon-chai/-/karma-sinon-chai-1.2.4.tgz#fea935f62be3366cf0271c8d8be51c0c70e40abc"
@@ -3733,15 +4263,16 @@ karma-spec-reporter@0.0.26:
   dependencies:
     colors "~0.6.0"
 
-karma-webpack@^1.8.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/karma-webpack/-/karma-webpack-1.8.0.tgz#340c7999eb3745b47becab47d0d304dac2c55257"
+karma-webpack@^3.0.0:
+  version "3.0.0"
+  resolved "http://registry.npm.taobao.org/karma-webpack/download/karma-webpack-3.0.0.tgz#bf009c5b73c667c11c015717e9e520f581317c44"
   dependencies:
-    async "~0.9.0"
-    loader-utils "^0.2.5"
-    lodash "^3.8.0"
-    source-map "^0.1.41"
-    webpack-dev-middleware "^1.0.11"
+    async "^2.0.0"
+    babel-runtime "^6.0.0"
+    loader-utils "^1.0.0"
+    lodash "^4.0.0"
+    source-map "^0.5.6"
+    webpack-dev-middleware "^2.0.6"
 
 karma@^1.3.0:
   version "1.3.0"
@@ -3774,22 +4305,28 @@ karma@^1.3.0:
     tmp "0.0.28"
     useragent "^2.1.9"
 
-kew@~0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/kew/-/kew-0.7.0.tgz#79d93d2d33363d6fdd2970b335d9141ad591d79b"
-
-kind-of@^3.0.2:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.1.0.tgz#475d698a5e49ff5e53d14e3e732429dc8bf4cf47"
+kind-of@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-2.0.1.tgz#018ec7a4ce7e3a86cb9141be519d24c8faa981b5"
   dependencies:
     is-buffer "^1.0.2"
 
+kind-of@^3.0.2, kind-of@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
+  dependencies:
+    is-buffer "^1.1.5"
+
 klaw@^1.0.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439"
   optionalDependencies:
     graceful-fs "^4.1.9"
 
+lazy-cache@^0.2.3:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-0.2.7.tgz#7feddf2dcb6edb77d11ef1d117ab5ffdf0ab1b65"
+
 lazy-cache@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
@@ -3804,37 +4341,9 @@ lcov-parse@0.0.10:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/lcov-parse/-/lcov-parse-0.0.10.tgz#1b0b8ff9ac9c7889250582b70b71315d9da6d9a3"
 
-lerna@^2.0.0-beta.32:
-  version "2.0.0-beta.32"
-  resolved "https://registry.yarnpkg.com/lerna/-/lerna-2.0.0-beta.32.tgz#67d51b1520ce57a27b8445160726b48f6dba3f1c"
-  dependencies:
-    async "^1.5.0"
-    chalk "^1.1.1"
-    cmd-shim "^2.0.2"
-    command-join "^1.1.1"
-    cross-spawn "^4.0.0"
-    glob "^7.0.6"
-    inquirer "^0.12.0"
-    lodash.find "^4.3.0"
-    lodash.unionwith "^4.2.0"
-    meow "^3.7.0"
-    minimatch "^3.0.0"
-    mkdirp "^0.5.1"
-    normalize-path "^2.0.1"
-    object-assign "^4.0.1"
-    object-assign-sorted "^1.0.0"
-    pad "^1.0.0"
-    path-exists "^2.1.0"
-    progress "^1.1.8"
-    read-cmd-shim "^1.0.1"
-    rimraf "^2.4.4"
-    semver "^5.1.0"
-    signal-exit "^2.1.2"
-    sync-exec "^0.6.2"
-
 levn@^0.3.0, levn@~0.3.0:
   version "0.3.0"
-  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
+  resolved "http://registry.npm.taobao.org/levn/download/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
   dependencies:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
@@ -3869,7 +4378,31 @@ load-json-file@^1.0.0:
     pinkie-promise "^2.0.0"
     strip-bom "^2.0.0"
 
-loader-utils@0.2.x, loader-utils@^0.2.11, loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.2.3, loader-utils@^0.2.5, loader-utils@^0.2.7, loader-utils@~0.2.2, loader-utils@~0.2.5:
+load-json-file@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    strip-bom "^3.0.0"
+
+load-script@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+
+loader-fs-cache@^1.0.0:
+  version "1.0.1"
+  resolved "http://registry.npm.taobao.org/loader-fs-cache/download/loader-fs-cache-1.0.1.tgz#56e0bf08bd9708b26a765b68509840c8dec9fdbc"
+  dependencies:
+    find-cache-dir "^0.1.1"
+    mkdirp "0.5.1"
+
+loader-runner@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2"
+
+loader-utils@^0.2.15, loader-utils@^0.2.16:
   version "0.2.16"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.16.tgz#f08632066ed8282835dff88dfb52704765adee6d"
   dependencies:
@@ -3878,7 +4411,7 @@ loader-utils@0.2.x, loader-utils@^0.2.11, loader-utils@^0.2.15, loader-utils@^0.
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
-loader-utils@^1.0.2, loader-utils@^1.1.0:
+loader-utils@^1.0.0, loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
   dependencies:
@@ -3886,6 +4419,13 @@ loader-utils@^1.0.2, loader-utils@^1.1.0:
     emojis-list "^2.0.0"
     json5 "^0.5.0"
 
+locate-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
+  dependencies:
+    p-locate "^2.0.0"
+    path-exists "^3.0.0"
+
 lodash._baseassign@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz#8c38a099500f215ad09e59f1722fd0c52bfe0a4e"
@@ -3909,13 +4449,6 @@ lodash._basevalues@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz#5b775762802bde3d3297503e26300820fdf661b7"
 
-lodash._createcompounder@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/lodash._createcompounder/-/lodash._createcompounder-3.0.0.tgz#5dd2cb55372d6e70e0e2392fb2304d6631091075"
-  dependencies:
-    lodash.deburr "^3.0.0"
-    lodash.words "^3.0.0"
-
 lodash._escapehtmlchar@~2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/lodash._escapehtmlchar/-/lodash._escapehtmlchar-2.4.1.tgz#df67c3bb6b7e8e1e831ab48bfa0795b92afe899d"
@@ -3979,7 +4512,7 @@ lodash._shimkeys@~2.4.1:
   dependencies:
     lodash._objecttypes "~2.4.1"
 
-lodash.assign@^4.0.3, lodash.assign@^4.0.6:
+lodash.assign@^4.0.3, lodash.assign@^4.0.6, lodash.assign@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
 
@@ -3987,11 +4520,13 @@ lodash.assignwith@^4.0.7:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.assignwith/-/lodash.assignwith-4.2.0.tgz#127a97f02adc41751a954d24b0de17e100e038eb"
 
-lodash.camelcase@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-3.0.1.tgz#932c8b87f8a4377897c67197533282f97aeac298"
-  dependencies:
-    lodash._createcompounder "^3.0.0"
+lodash.camelcase@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
+
+lodash.clonedeep@^4.3.2:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
 
 lodash.create@3.1.1:
   version "3.1.1"
@@ -4001,12 +4536,6 @@ lodash.create@3.1.1:
     lodash._basecreate "^3.0.0"
     lodash._isiterateecall "^3.0.0"
 
-lodash.deburr@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.deburr/-/lodash.deburr-3.2.0.tgz#6da8f54334a366a7cf4c4c76ef8d80aa1b365ed5"
-  dependencies:
-    lodash._root "^3.0.0"
-
 lodash.defaults@~2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-2.4.1.tgz#a7e8885f05e68851144b6e12a8f3678026bc4c54"
@@ -4028,10 +4557,6 @@ lodash.escape@~2.4.1:
     lodash._reunescapedhtml "~2.4.1"
     lodash.keys "~2.4.1"
 
-lodash.find@^4.3.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/lodash.find/-/lodash.find-4.6.0.tgz#cb0704d47ab71789ffa0de8b97dd926fb88b13b1"
-
 lodash.indexof@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/lodash.indexof/-/lodash.indexof-4.0.5.tgz#53714adc2cddd6ed87638f893aa9b6c24e31ef3c"
@@ -4086,6 +4611,10 @@ lodash.memoize@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
 
+lodash.mergewith@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz#150cf0a16791f5903b8891eab154609274bdea55"
+
 lodash.pick@^4.2.1:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"
@@ -4094,6 +4623,10 @@ lodash.restparam@^3.0.0:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
 
+lodash.tail@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
+
 lodash.template@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-2.4.1.tgz#9e611007edf629129a974ab3c48b817b3e1cf20d"
@@ -4147,10 +4680,6 @@ lodash.templatesettings@~2.4.1:
     lodash._reinterpolate "~2.4.1"
     lodash.escape "~2.4.1"
 
-lodash.unionwith@^4.2.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/lodash.unionwith/-/lodash.unionwith-4.6.0.tgz#74d140b5ca8146e6c643c3724f5152538d9ac1f0"
-
 lodash.uniq@^4.3.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -4161,20 +4690,22 @@ lodash.values@~2.4.1:
   dependencies:
     lodash.keys "~2.4.1"
 
-lodash.words@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.words/-/lodash.words-3.2.0.tgz#4e2a8649bc08745b17c695b1a3ce8fee596623b3"
-  dependencies:
-    lodash._root "^3.0.0"
+lodash@3.7.x:
+  version "3.7.0"
+  resolved "http://registry.npm.taobao.org/lodash/download/lodash-3.7.0.tgz#3678bd8ab995057c07ade836ed2ef087da811d45"
 
 lodash@^3.8.0:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
 
-lodash@^4.0.0, lodash@^4.0.1, lodash@^4.1.0, lodash@^4.15.0, lodash@^4.16.4, lodash@^4.17.2, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.5.0:
+lodash@^4.0.0, lodash@^4.2.0:
   version "4.17.2"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.2.tgz#34a3055babe04ce42467b607d700072c7ff6bf42"
 
+lodash@^4.1.0, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.5.0, lodash@~4.17.4:
+  version "4.17.4"
+  resolved "http://registry.npm.taobao.org/lodash/download/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
+
 lodash@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-1.0.2.tgz#8f57560c83b59fc270bd3d561b690043430e2551"
@@ -4187,6 +4718,12 @@ log-driver@1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/log-driver/-/log-driver-1.2.5.tgz#7ae4ec257302fd790d557cb10c97100d857b0056"
 
+log-symbols@^2.1.0:
+  version "2.2.0"
+  resolved "http://registry.npm.taobao.org/log-symbols/download/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
+  dependencies:
+    chalk "^2.0.1"
+
 log4js@^0.6.31:
   version "0.6.38"
   resolved "https://registry.yarnpkg.com/log4js/-/log4js-0.6.38.tgz#2c494116695d6fb25480943d3fc872e662a522fd"
@@ -4194,6 +4731,17 @@ log4js@^0.6.31:
     readable-stream "~1.0.2"
     semver "~4.3.3"
 
+loglevel@^1.4.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.5.1.tgz#189078c94ab9053ee215a0acdbf24244ea0f6502"
+
+loglevelnext@^1.0.1:
+  version "1.0.5"
+  resolved "http://registry.npm.taobao.org/loglevelnext/download/loglevelnext-1.0.5.tgz#36fc4f5996d6640f539ff203ba819641680d75a2"
+  dependencies:
+    es6-symbol "^3.1.1"
+    object.assign "^4.1.0"
+
 lolex@1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/lolex/-/lolex-1.3.2.tgz#7c3da62ffcb30f0f5a80a2566ca24e45d8a01f31"
@@ -4212,7 +4760,7 @@ loose-envify@^1.0.0:
   dependencies:
     js-tokens "^2.0.0"
 
-loud-rejection@^1.0.0:
+loud-rejection@^1.0.0, loud-rejection@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
   dependencies:
@@ -4227,23 +4775,23 @@ lru-cache@2, lru-cache@2.2.x:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.2.4.tgz#6c658619becf14031d0d0b594b16042ce4dc063d"
 
-lru-cache@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-3.2.0.tgz#71789b3b7f5399bec8565dda38aa30d2a097efee"
-  dependencies:
-    pseudomap "^1.0.1"
-
-lru-cache@^4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.0.2.tgz#1d17679c069cda5d040991a09dbc2c0db377e55e"
+lru-cache@^4.0.1, lru-cache@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55"
   dependencies:
-    pseudomap "^1.0.1"
-    yallist "^2.0.0"
+    pseudomap "^1.0.2"
+    yallist "^2.1.2"
 
 macaddress@^0.2.8:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
 
+make-dir@^1.0.0:
+  version "1.3.0"
+  resolved "http://registry.npm.taobao.org/make-dir/download/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
+  dependencies:
+    pify "^3.0.0"
+
 map-cache@^0.2.0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
@@ -4282,6 +4830,13 @@ math-expression-evaluator@^1.2.14:
   dependencies:
     lodash.indexof "^4.0.5"
 
+md5.js@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d"
+  dependencies:
+    hash-base "^3.0.0"
+    inherits "^2.0.1"
+
 mdurl@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
@@ -4290,13 +4845,15 @@ media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
 
-memory-fs@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.2.0.tgz#f2bb25368bc121e391c2520de92969caee0a0290"
+mem@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mem/-/mem-1.1.0.tgz#5edd52b485ca1d900fe64895505399a0dfa45f76"
+  dependencies:
+    mimic-fn "^1.0.0"
 
-memory-fs@~0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.3.0.tgz#7bcc6b629e3a43e871d7e29aca6ae8a7f15cbb20"
+memory-fs@^0.4.0, memory-fs@~0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
   dependencies:
     errno "^0.1.3"
     readable-stream "^2.0.1"
@@ -4342,6 +4899,13 @@ micromatch@^2.1.5, micromatch@^2.3.11, micromatch@^2.3.7:
     parse-glob "^3.0.4"
     regex-cache "^0.4.2"
 
+miller-rabin@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
+  dependencies:
+    bn.js "^4.0.0"
+    brorand "^1.0.1"
+
 "mime-db@>= 1.24.0 < 2", mime-db@~1.25.0:
   version "1.25.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.25.0.tgz#c18dbd7c73a5dbf6f44a024dc0d165a1e7b1c392"
@@ -4362,29 +4926,45 @@ mime-types@~2.0.4:
   dependencies:
     mime-db "~1.12.0"
 
-mime@1.2.x:
-  version "1.2.11"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.2.11.tgz#58203eed86e3a5ef17aed2b7d9ebd47f0a60dd10"
-
-mime@1.3.4, mime@^1.2.11, mime@^1.3.4:
+mime@1.3.4, mime@^1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
 
+mime@^1.2.11, mime@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
+
+mime@^2.1.0:
+  version "2.3.1"
+  resolved "http://registry.npm.taobao.org/mime/download/mime-2.3.1.tgz#b1621c54d63b97c47d3cfe7f7215f7d64517c369"
+
 mimeparse@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/mimeparse/-/mimeparse-0.1.4.tgz#dafb02752370fd226093ae3152c271af01ac254a"
 
+mimic-fn@^1.0.0:
+  version "1.1.0"
+  resolved "http://registry.npm.taobao.org/mimic-fn/download/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"
+
 min-document@^2.19.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
   dependencies:
     dom-walk "^0.1.0"
 
-"minimatch@2 || 3", minimatch@^3.0.0, minimatch@^3.0.2:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.3.tgz#2a4e4090b96b2db06a9d7df01055a62a77c9b774"
+minimalistic-assert@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
+
+minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
+
+"minimatch@2 || 3", minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.4, minimatch@~3.0.2:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   dependencies:
-    brace-expansion "^1.0.0"
+    brace-expansion "^1.1.7"
 
 minimatch@^2.0.1:
   version "2.0.10"
@@ -4401,7 +4981,7 @@ minimatch@~0.2.11:
 
 minimist@0.0.8, minimist@~0.0.1:
   version "0.0.8"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+  resolved "http://registry.npm.taobao.org/minimist/download/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
 
 minimist@1.2.0, minimist@^1.1.0, minimist@^1.1.3, minimist@^1.2.0:
   version "1.2.0"
@@ -4411,11 +4991,12 @@ minimist@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.2.0.tgz#4dffe525dae2b864c66c2e23c6271d7afdecefce"
 
-mkdirp@0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.0.tgz#1d73076a6df986cd9344e15e71fcc05a4c9abf12"
+mixin-object@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/mixin-object/-/mixin-object-2.0.1.tgz#4fb949441dab182540f1fe035ba60e1947a5e57e"
   dependencies:
-    minimist "0.0.8"
+    for-in "^0.1.3"
+    is-extendable "^0.1.1"
 
 mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
   version "0.5.1"
@@ -4443,9 +5024,20 @@ ms@0.7.1:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
 
-ms@0.7.2:
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
+ms@2.0.0:
+  version "2.0.0"
+  resolved "http://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
+multicast-dns-service-types@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"
+
+multicast-dns@^6.0.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.1.1.tgz#6e7de86a570872ab17058adea7160bbeca814dde"
+  dependencies:
+    dns-packet "^1.0.1"
+    thunky "^0.1.0"
 
 multipipe@^0.1.0, multipipe@^0.1.2:
   version "0.1.2"
@@ -4453,9 +5045,9 @@ multipipe@^0.1.0, multipipe@^0.1.2:
   dependencies:
     duplexer2 "0.0.2"
 
-mute-stream@0.0.5:
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.5.tgz#8fbfabb0a98a253d3184331f9e8deb7372fac6c0"
+mute-stream@0.0.7:
+  version "0.0.7"
+  resolved "http://registry.npm.taobao.org/mute-stream/download/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
 
 mz@^2.3.1:
   version "2.6.0"
@@ -4465,7 +5057,7 @@ mz@^2.3.1:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-nan@^2.3.0:
+nan@^2.3.0, nan@^2.3.2:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.4.0.tgz#fb3c59d45fe4effe215f0b890f8adf6eb32d2232"
 
@@ -4475,7 +5067,7 @@ natives@^1.1.0:
 
 natural-compare@^1.4.0:
   version "1.4.0"
-  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+  resolved "http://registry.npm.taobao.org/natural-compare/download/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
 
 ncname@1.0.x:
   version "1.0.0"
@@ -4491,9 +5083,9 @@ negotiator@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
 
-next-tick@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-0.2.2.tgz#75da4a927ee5887e39065880065b7336413b310d"
+next-tick@1:
+  version "1.0.0"
+  resolved "http://registry.npm.taobao.org/next-tick/download/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
 
 no-case@^2.2.0:
   version "2.3.0"
@@ -4507,16 +5099,38 @@ node-dir@^0.1.10:
   dependencies:
     minimatch "^3.0.2"
 
-node-libs-browser@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-0.7.0.tgz#3e272c0819e308935e26674408d7af0e1491b83b"
+node-forge@0.6.33:
+  version "0.6.33"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.6.33.tgz#463811879f573d45155ad6a9f43dc296e8e85ebc"
+
+node-gyp@^3.3.1:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.6.2.tgz#9bfbe54562286284838e750eac05295853fa1c60"
+  dependencies:
+    fstream "^1.0.0"
+    glob "^7.0.3"
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    mkdirp "^0.5.0"
+    nopt "2 || 3"
+    npmlog "0 || 1 || 2 || 3 || 4"
+    osenv "0"
+    request "2"
+    rimraf "2"
+    semver "~5.3.0"
+    tar "^2.0.0"
+    which "1"
+
+node-libs-browser@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.0.0.tgz#a3a59ec97024985b46e958379646f96c4b616646"
   dependencies:
     assert "^1.1.1"
     browserify-zlib "^0.1.4"
-    buffer "^4.9.0"
+    buffer "^4.3.0"
     console-browserify "^1.1.0"
     constants-browserify "^1.0.0"
-    crypto-browserify "3.3.0"
+    crypto-browserify "^3.11.0"
     domain-browser "^1.1.1"
     events "^1.0.0"
     https-browserify "0.0.1"
@@ -4549,6 +5163,29 @@ node-pre-gyp@^0.6.29:
     tar "~2.2.1"
     tar-pack "~3.3.0"
 
+node-sass@^4.2.0, node-sass@^4.5.3:
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.5.3.tgz#d09c9d1179641239d1b97ffc6231fdcec53e1568"
+  dependencies:
+    async-foreach "^0.1.3"
+    chalk "^1.1.1"
+    cross-spawn "^3.0.0"
+    gaze "^1.0.0"
+    get-stdin "^4.0.1"
+    glob "^7.0.3"
+    in-publish "^2.0.0"
+    lodash.assign "^4.2.0"
+    lodash.clonedeep "^4.3.2"
+    lodash.mergewith "^4.6.0"
+    meow "^3.7.0"
+    mkdirp "^0.5.1"
+    nan "^2.3.2"
+    node-gyp "^3.3.1"
+    npmlog "^4.0.0"
+    request "^2.79.0"
+    sass-graph "^2.1.1"
+    stdout-stream "^1.4.0"
+
 node-uuid@~1.4.7:
   version "1.4.7"
   resolved "https://registry.yarnpkg.com/node-uuid/-/node-uuid-1.4.7.tgz#6da5a17668c4b3dd59623bda11cf7fa4c1f60a6f"
@@ -4560,7 +5197,7 @@ nomnomnomnom@^2.0.0:
     chalk "~0.4.0"
     underscore "~1.6.0"
 
-nopt@3.x, nopt@~3.0.1, nopt@~3.0.6:
+"nopt@2 || 3", nopt@3.x, nopt@~3.0.6:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
   dependencies:
@@ -4592,7 +5229,17 @@ normalize-url@^1.4.0:
     query-string "^4.1.0"
     sort-keys "^1.0.0"
 
-npmlog@^4.0.1:
+normalize-wheel@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45"
+
+npm-run-path@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
+  dependencies:
+    path-key "^2.0.0"
+
+"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.0.2.tgz#d03950e0e78ce1527ba26d2a7592e9348ac3e75f"
   dependencies:
@@ -4607,6 +5254,10 @@ nth-check@~1.0.1:
   dependencies:
     boolbase "~1.0.0"
 
+null-check@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/null-check/-/null-check-1.0.0.tgz#977dffd7176012b9ec30d2a39db5cf72a0439edd"
+
 num2fraction@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
@@ -4623,18 +5274,15 @@ oauth-sign@~0.8.1:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
 
-object-assign-sorted@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/object-assign-sorted/-/object-assign-sorted-1.0.0.tgz#e739f698164014ec1f050f38decabad1e9b228bf"
-  dependencies:
-    object-assign "^4.0.1"
-    sorted-object "^2.0.0"
-
 object-assign@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2"
 
-object-assign@^4.0.1, object-assign@^4.1.0:
+object-assign@^4.0.1:
+  version "4.1.1"
+  resolved "http://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+
+object-assign@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.0.tgz#7a3b3d0e98063d43f4c03f2e8ae6cd51a86883a0"
 
@@ -4646,26 +5294,18 @@ object-hash@^1.1.4:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.1.5.tgz#bdd844e030d0861b692ca175c6cab6868ec233d7"
 
-object-keys@^1.0.10, object-keys@^1.0.8:
+object-keys@^1.0.11, object-keys@^1.0.8, object-keys@~1.0.0:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
 
-object-set@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/object-set/-/object-set-1.0.1.tgz#f611222f68a2b04eb9826c2df70e00050f4d30a6"
-  dependencies:
-    is-index "^1.0.0"
-    is-nil "^1.0.0"
-    is-object "^1.0.1"
-    to-path "^1.0.0"
-
-object.assign@^4.0.1:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.0.4.tgz#b1c9cc044ef1b9fe63606fc141abbb32e14730cc"
+object.assign@^4.0.1, object.assign@^4.1.0:
+  version "4.1.0"
+  resolved "http://registry.npm.taobao.org/object.assign/download/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da"
   dependencies:
     define-properties "^1.1.2"
-    function-bind "^1.1.0"
-    object-keys "^1.0.10"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.0"
+    object-keys "^1.0.11"
 
 object.omit@^2.0.0:
   version "2.0.1"
@@ -4674,6 +5314,10 @@ object.omit@^2.0.0:
     for-own "^0.1.4"
     is-extendable "^0.1.1"
 
+obuf@^1.0.0, obuf@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.1.tgz#104124b6c602c6796881a042541d36db43a5264e"
+
 on-finished@~2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
@@ -4686,7 +5330,7 @@ on-headers@~1.0.1:
 
 once@1.x, once@^1.3.0:
   version "1.4.0"
-  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  resolved "http://registry.npm.taobao.org/once/download/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
   dependencies:
     wrappy "1"
 
@@ -4696,15 +5340,19 @@ once@~1.3.0, once@~1.3.3:
   dependencies:
     wrappy "1"
 
-onetime@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-1.1.0.tgz#a1f7838f8314c516f05ecefcbc4ccfe04b4ed789"
+onetime@^2.0.0:
+  version "2.0.1"
+  resolved "http://registry.npm.taobao.org/onetime/download/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
+  dependencies:
+    mimic-fn "^1.0.0"
 
-open@0.0.5:
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/open/-/open-0.0.5.tgz#42c3e18ec95466b6bf0dc42f3a2945c3f0cad8fc"
+opn@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-5.1.0.tgz#72ce2306a17dbea58ff1041853352b4a8fc77519"
+  dependencies:
+    is-wsl "^1.1.0"
 
-optimist@^0.6.1, optimist@~0.6.0, optimist@~0.6.1:
+optimist@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
   dependencies:
@@ -4719,7 +5367,7 @@ optimist@~0.3, optimist@~0.3.5:
 
 optionator@^0.8.1, optionator@^0.8.2:
   version "0.8.2"
-  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
+  resolved "http://registry.npm.taobao.org/optionator/download/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
   dependencies:
     deep-is "~0.1.3"
     fast-levenshtein "~2.0.4"
@@ -4764,10 +5412,25 @@ os-locale@^1.4.0:
   dependencies:
     lcid "^1.0.0"
 
-os-tmpdir@^1.0.1, os-tmpdir@~1.0.1:
+os-locale@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-2.1.0.tgz#42bc2900a6b5b8bd17376c8e882b65afccf24bf2"
+  dependencies:
+    execa "^0.7.0"
+    lcid "^1.0.0"
+    mem "^1.1.0"
+
+os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.1, os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
 
+osenv@0:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.4.tgz#42fe6d5953df06c8064be6f176c3d05aaaa34644"
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
 output-file-sync@^1.1.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/output-file-sync/-/output-file-sync-1.1.2.tgz#d0a33eefe61a205facb90092e826598d5245ce76"
@@ -4776,9 +5439,23 @@ output-file-sync@^1.1.0:
     mkdirp "^0.5.1"
     object-assign "^4.1.0"
 
-pad@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/pad/-/pad-1.0.2.tgz#f6e36ff3ceb468e4ae2ed33ad5ecf25ace920960"
+p-finally@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
+
+p-limit@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.1.0.tgz#b07ff2d9a5d88bec806035895a2bab66a27988bc"
+
+p-locate@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
+  dependencies:
+    p-limit "^1.1.0"
+
+p-map@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.2.0.tgz#e4e94f311eabbc8633a1e79908165fca26241b6b"
 
 pako@~0.2.0:
   version "0.2.9"
@@ -4790,6 +5467,16 @@ param-case@2.1.x:
   dependencies:
     no-case "^2.2.0"
 
+parse-asn1@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.0.tgz#37c4f9b7ed3ab65c74817b5f2480937fbf97c712"
+  dependencies:
+    asn1.js "^4.0.0"
+    browserify-aes "^1.0.0"
+    create-hash "^1.1.0"
+    evp_bytestokey "^1.0.0"
+    pbkdf2 "^3.0.3"
+
 parse-filepath@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parse-filepath/-/parse-filepath-1.0.1.tgz#159d6155d43904d16c10ef698911da1e91969b73"
@@ -4847,7 +5534,7 @@ path-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
 
-path-exists@^2.0.0, path-exists@^2.1.0:
+path-exists@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
   dependencies:
@@ -4859,11 +5546,15 @@ path-exists@^3.0.0:
 
 path-is-absolute@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  resolved "http://registry.npm.taobao.org/path-is-absolute/download/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
 
-path-is-inside@^1.0.1:
+path-is-inside@^1.0.1, path-is-inside@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
+  resolved "http://registry.npm.taobao.org/path-is-inside/download/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
+
+path-key@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
 
 path-parse@^1.0.5:
   version "1.0.5"
@@ -4891,31 +5582,37 @@ path-type@^1.0.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
-pbkdf2-compat@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/pbkdf2-compat/-/pbkdf2-compat-2.0.1.tgz#b6e0c8fa99494d94e0511575802a59a5c142f288"
+path-type@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
+  dependencies:
+    pify "^2.0.0"
 
-pend@~1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
-
-phantomjs-prebuilt@^2.1.13, phantomjs-prebuilt@^2.1.7:
-  version "2.1.14"
-  resolved "https://registry.yarnpkg.com/phantomjs-prebuilt/-/phantomjs-prebuilt-2.1.14.tgz#d53d311fcfb7d1d08ddb24014558f1188c516da0"
-  dependencies:
-    es6-promise "~4.0.3"
-    extract-zip "~1.5.0"
-    fs-extra "~1.0.0"
-    hasha "~2.2.0"
-    kew "~0.7.0"
-    progress "~1.1.8"
-    request "~2.79.0"
-    request-progress "~2.0.1"
-    which "~1.2.10"
+pbkdf2@^3.0.3:
+  version "3.0.14"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.14.tgz#a35e13c64799b06ce15320f459c230e68e73bade"
+  dependencies:
+    create-hash "^1.1.2"
+    create-hmac "^1.1.4"
+    ripemd160 "^2.0.1"
+    safe-buffer "^5.0.1"
+    sha.js "^2.4.8"
+
+perspective.js@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/perspective.js/-/perspective.js-1.0.0.tgz#b14aca449043fcfd21297fabd2dfa184f42cb26c"
+  dependencies:
+    color-convert "^1.9.0"
+    dom-walk "^0.1.1"
+    throttle-debounce "^1.0.1"
 
 pify@^2.0.0, pify@^2.3.0:
   version "2.3.0"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+  resolved "http://registry.npm.taobao.org/pify/download/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+
+pify@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
 
 pinkie-promise@^1.0.0:
   version "1.0.0"
@@ -4925,7 +5622,7 @@ pinkie-promise@^1.0.0:
 
 pinkie-promise@^2.0.0:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  resolved "http://registry.npm.taobao.org/pinkie-promise/download/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
   dependencies:
     pinkie "^2.0.0"
 
@@ -4935,7 +5632,7 @@ pinkie@^1.0.0:
 
 pinkie@^2.0.0:
   version "2.0.4"
-  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+  resolved "http://registry.npm.taobao.org/pinkie/download/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
 
 pixrem@^3.0.0:
   version "3.0.2"
@@ -4951,9 +5648,23 @@ pkg-dir@^1.0.0:
   dependencies:
     find-up "^1.0.0"
 
-pluralize@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"
+pkg-dir@^2.0.0:
+  version "2.0.0"
+  resolved "http://registry.npm.taobao.org/pkg-dir/download/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
+  dependencies:
+    find-up "^2.1.0"
+
+pluralize@^7.0.0:
+  version "7.0.0"
+  resolved "http://registry.npm.taobao.org/pluralize/download/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
+
+portfinder@^1.0.9:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
+  dependencies:
+    async "^1.5.2"
+    debug "^2.2.0"
+    mkdirp "0.5.x"
 
 postcss-advanced-variables@1.2.2:
   version "1.2.2"
@@ -5119,7 +5830,7 @@ postcss-load-plugins@^2.3.0:
     cosmiconfig "^2.1.1"
     object-assign "^4.1.0"
 
-postcss-loader@^0.11.1:
+postcss-loader@0.11.1:
   version "0.11.1"
   resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-0.11.1.tgz#c4eb0054269ec32695fd5682fbd7e654cdcac636"
   dependencies:
@@ -5528,6 +6239,14 @@ postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.
     source-map "^0.5.6"
     supports-color "^3.1.2"
 
+postcss@^6.0.1, postcss@^6.0.6, postcss@^6.0.8:
+  version "6.0.9"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.9.tgz#54819766784a51c65b1ec4d54c2f93765438c35a"
+  dependencies:
+    chalk "^2.1.0"
+    source-map "^0.5.6"
+    supports-color "^4.2.1"
+
 precss@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/precss/-/precss-1.4.0.tgz#8d7c3ae70f10a00a3955287f85a66e0f8b31cda3"
@@ -5551,7 +6270,7 @@ precss@^1.4.0:
 
 prelude-ls@~1.1.2:
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
+  resolved "http://registry.npm.taobao.org/prelude-ls/download/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
 
 prepend-http@^1.0.0:
   version "1.0.4"
@@ -5561,6 +6280,10 @@ preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
+prettier@^1.7.0:
+  version "1.7.4"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.7.4.tgz#5e8624ae9363c80f95ec644584ecdf55d74f93fa"
+
 pretty-error@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.0.2.tgz#a7db19cbb529ca9f0af3d3a2f77d5caf8e5dec23"
@@ -5578,7 +6301,7 @@ private@^0.1.6, private@~0.1.5:
 
 process-nextick-args@~1.0.6:
   version "1.0.7"
-  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+  resolved "http://registry.npm.taobao.org/process-nextick-args/download/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
 
 process@^0.11.0:
   version "0.11.9"
@@ -5588,21 +6311,21 @@ process@~0.5.1:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/process/-/process-0.5.2.tgz#1638d8a8e34c2f440a91db95ab9aeb677fc185cf"
 
-progress-bar-webpack-plugin@^1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/progress-bar-webpack-plugin/-/progress-bar-webpack-plugin-1.9.0.tgz#efe9055ae03ed1a6a9864c104120ebfe5b7de341"
+progress-bar-webpack-plugin@^1.11.0:
+  version "1.11.0"
+  resolved "http://registry.npm.taobao.org/progress-bar-webpack-plugin/download/progress-bar-webpack-plugin-1.11.0.tgz#4f801288443c55ec029b20cbfdcbf3e1dc17f852"
   dependencies:
     chalk "^1.1.1"
     object.assign "^4.0.1"
     progress "^1.1.8"
 
-progress@^1.1.8, progress@~1.1.8:
+progress@^1.1.8:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"
 
-proto-list@~1.2.1:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
+progress@^2.0.0:
+  version "2.0.0"
+  resolved "http://registry.npm.taobao.org/progress/download/progress-2.0.0.tgz#8a1be366bf8fc23db2bd23f10c6fe920b4389d1f"
 
 proxy-addr@~1.1.2:
   version "1.1.2"
@@ -5615,9 +6338,19 @@ prr@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/prr/-/prr-0.0.0.tgz#1a84b85908325501411853d0081ee3fa86e2926a"
 
-pseudomap@^1.0.1:
+pseudomap@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+  resolved "http://registry.npm.taobao.org/pseudomap/download/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+
+public-encrypt@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.0.tgz#39f699f3a46560dd5ebacbca693caf7c65c18cc6"
+  dependencies:
+    bn.js "^4.1.0"
+    browserify-rsa "^4.0.0"
+    create-hash "^1.1.0"
+    parse-asn1 "^5.0.0"
+    randombytes "^2.0.1"
 
 punycode@1.3.2:
   version "1.3.2"
@@ -5669,7 +6402,7 @@ query-string@^4.1.0:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
-querystring-es3@^0.2.0:
+querystring-es3@^0.2.0, querystring-es3@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
 
@@ -5681,6 +6414,10 @@ querystringify@0.0.x:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-0.0.4.tgz#0cf7f84f9463ff0ae51c4c4b142d95be37724d9c"
 
+querystringify@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-1.0.0.tgz#6286242112c5b712fa654e526652bf6a13ff05cb"
+
 randomatic@^1.1.3:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.6.tgz#110dcabff397e9dcff7c0789ccc0a49adf1ec5bb"
@@ -5688,6 +6425,12 @@ randomatic@^1.1.3:
     is-number "^2.0.2"
     kind-of "^3.0.2"
 
+randombytes@^2.0.0, randombytes@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.5.tgz#dc009a246b8d09a177b4b7a0ae77bc570f4b1b79"
+  dependencies:
+    safe-buffer "^5.1.0"
+
 range-parser@^1.0.3, range-parser@^1.2.0, range-parser@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
@@ -5715,12 +6458,6 @@ read-cache@^1.0.0:
   dependencies:
     pify "^2.3.0"
 
-read-cmd-shim@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-1.0.1.tgz#2d5d157786a37c055d22077c32c53f8329e91c7b"
-  dependencies:
-    graceful-fs "^4.1.2"
-
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
@@ -5728,6 +6465,13 @@ read-pkg-up@^1.0.1:
     find-up "^1.0.0"
     read-pkg "^1.0.0"
 
+read-pkg-up@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be"
+  dependencies:
+    find-up "^2.0.0"
+    read-pkg "^2.0.0"
+
 read-pkg@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
@@ -5736,6 +6480,14 @@ read-pkg@^1.0.0:
     normalize-package-data "^2.3.2"
     path-type "^1.0.0"
 
+read-pkg@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-2.0.0.tgz#8ef1c0623c6a6db0dc6713c4bfac46332b2368f8"
+  dependencies:
+    load-json-file "^2.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^2.0.0"
+
 readable-stream@1.0, "readable-stream@>=1.0.33-1 <1.1.0-0", readable-stream@~1.0.17, readable-stream@~1.0.2:
   version "1.0.34"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
@@ -5754,7 +6506,7 @@ readable-stream@1.1, readable-stream@~1.1.9:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-"readable-stream@^2.0.0 || ^1.1.13", readable-stream@^2.1.0, readable-stream@^2.1.5:
+"readable-stream@^2.0.0 || ^1.1.13", readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.1.0, readable-stream@^2.1.5:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.2.2.tgz#a9e6fec3c7dda85f8bb1b3ba7028604556fc825e"
   dependencies:
@@ -5766,15 +6518,27 @@ readable-stream@1.1, readable-stream@~1.1.9:
     string_decoder "~0.10.x"
     util-deprecate "~1.0.1"
 
-readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@~2.0.0, readable-stream@~2.0.5:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e"
+readable-stream@^2.2.2, readable-stream@^2.2.9:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
   dependencies:
     core-util-is "~1.0.0"
-    inherits "~2.0.1"
+    inherits "~2.0.3"
     isarray "~1.0.0"
     process-nextick-args "~1.0.6"
-    string_decoder "~0.10.x"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.0.3"
+    util-deprecate "~1.0.1"
+
+readable-stream@~2.0.5:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    string_decoder "~0.10.x"
     util-deprecate "~1.0.1"
 
 readable-stream@~2.1.4:
@@ -5798,14 +6562,6 @@ readdirp@^2.0.0:
     readable-stream "^2.0.2"
     set-immediate-shim "^1.0.1"
 
-readline2@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/readline2/-/readline2-1.0.1.tgz#41059608ffc154757b715d9989d199ffbf372e35"
-  dependencies:
-    code-point-at "^1.0.0"
-    is-fullwidth-code-point "^1.0.0"
-    mute-stream "0.0.5"
-
 recast@~0.11.12:
   version "0.11.18"
   resolved "https://registry.yarnpkg.com/recast/-/recast-0.11.18.tgz#07af6257ca769868815209401d4d60eef1b5b947"
@@ -5842,6 +6598,12 @@ reduce-function-call@^1.0.1:
   dependencies:
     balanced-match "^0.4.2"
 
+reduce@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/reduce/-/reduce-1.0.1.tgz#14fa2e5ff1fc560703a020cbb5fbaab691565804"
+  dependencies:
+    object-keys "~1.0.0"
+
 regenerate@^1.2.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.2.tgz#d1941c67bad437e1be76433add5b385f95b19260"
@@ -5913,7 +6675,7 @@ repeat-string@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-0.2.2.tgz#c7a8d3236068362059a7e4651fc6884e8b1fb4ae"
 
-repeat-string@^1.5.2, repeat-string@^1.5.4:
+repeat-string@^1.5.2:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
 
@@ -5927,24 +6689,17 @@ replace-ext@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-0.0.1.tgz#29bbd92078a739f0bcce2b4ee41e837953522924"
 
-request-progress@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/request-progress/-/request-progress-2.0.1.tgz#5d36bb57961c673aa5b788dbc8141fdf23b44e08"
-  dependencies:
-    throttleit "^1.0.0"
-
-request@2.75.0:
-  version "2.75.0"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.75.0.tgz#d2b8268a286da13eaa5d01adf5d18cc90f657d93"
+request@2, request@^2.55.0, request@^2.79.0:
+  version "2.79.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
   dependencies:
     aws-sign2 "~0.6.0"
     aws4 "^1.2.1"
-    bl "~1.1.2"
     caseless "~0.11.0"
     combined-stream "~1.0.5"
     extend "~3.0.0"
     forever-agent "~0.6.1"
-    form-data "~2.0.0"
+    form-data "~2.1.1"
     har-validator "~2.0.6"
     hawk "~3.1.3"
     http-signature "~1.1.0"
@@ -5952,24 +6707,25 @@ request@2.75.0:
     isstream "~0.1.2"
     json-stringify-safe "~5.0.1"
     mime-types "~2.1.7"
-    node-uuid "~1.4.7"
     oauth-sign "~0.8.1"
-    qs "~6.2.0"
+    qs "~6.3.0"
     stringstream "~0.0.4"
     tough-cookie "~2.3.0"
     tunnel-agent "~0.4.1"
+    uuid "^3.0.0"
 
-request@^2.55.0, request@^2.79.0, request@~2.79.0:
-  version "2.79.0"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
+request@2.75.0:
+  version "2.75.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.75.0.tgz#d2b8268a286da13eaa5d01adf5d18cc90f657d93"
   dependencies:
     aws-sign2 "~0.6.0"
     aws4 "^1.2.1"
+    bl "~1.1.2"
     caseless "~0.11.0"
     combined-stream "~1.0.5"
     extend "~3.0.0"
     forever-agent "~0.6.1"
-    form-data "~2.1.1"
+    form-data "~2.0.0"
     har-validator "~2.0.6"
     hawk "~3.1.3"
     http-signature "~1.1.0"
@@ -5977,12 +6733,12 @@ request@^2.55.0, request@^2.79.0, request@~2.79.0:
     isstream "~0.1.2"
     json-stringify-safe "~5.0.1"
     mime-types "~2.1.7"
+    node-uuid "~1.4.7"
     oauth-sign "~0.8.1"
-    qs "~6.3.0"
+    qs "~6.2.0"
     stringstream "~0.0.4"
     tough-cookie "~2.3.0"
     tunnel-agent "~0.4.1"
-    uuid "^3.0.0"
 
 require-directory@^2.1.1:
   version "2.1.1"
@@ -5996,7 +6752,7 @@ require-main-filename@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
 
-require-uncached@^1.0.2:
+require-uncached@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/require-uncached/-/require-uncached-1.0.3.tgz#4e0d56d6c9662fd31e43011c4b95aa49955421d3"
   dependencies:
@@ -6007,6 +6763,10 @@ requires-port@1.0.x, requires-port@1.x.x:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
 
+resize-observer-polyfill@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69"
+
 resolve-dir@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-0.1.1.tgz#b219259a5602fac5c5c496ad894a6e8cc430261e"
@@ -6016,15 +6776,15 @@ resolve-dir@^0.1.0:
 
 resolve-from@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
+  resolved "http://registry.npm.taobao.org/resolve-from/download/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
 
 resolve@1.1.x:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
 
-resolve@^1.1.6, resolve@^1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.3.3.tgz#655907c3469a8680dc2de3a275a8fdd69691f0e5"
+resolve@^1.1.6, resolve@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.4.0.tgz#a75be01c53da25d934a98ebd0e4c4a7312f92a86"
   dependencies:
     path-parse "^1.0.5"
 
@@ -6032,12 +6792,12 @@ resolve@^1.1.7:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.2.0.tgz#9589c3f2f6149d1417a40becc1663db6ec6bc26c"
 
-restore-cursor@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541"
+restore-cursor@^2.0.0:
+  version "2.0.0"
+  resolved "http://registry.npm.taobao.org/restore-cursor/download/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
   dependencies:
-    exit-hook "^1.0.0"
-    onetime "^1.0.0"
+    onetime "^2.0.0"
+    signal-exit "^3.0.2"
 
 rgb@~0.1.0:
   version "0.1.0"
@@ -6049,25 +6809,44 @@ right-align@^0.1.1:
   dependencies:
     align-text "^0.1.1"
 
-rimraf@2, rimraf@^2.2.8, rimraf@^2.3.3, rimraf@^2.4.4, rimraf@^2.5.2, rimraf@^2.5.4, rimraf@~2.5.1, rimraf@~2.5.4:
+rimraf@2, rimraf@^2.3.3, rimraf@^2.5.4, rimraf@~2.5.1, rimraf@~2.5.4:
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.5.4.tgz#96800093cbf1a0c86bd95b4625467535c29dfa04"
   dependencies:
     glob "^7.0.5"
 
-ripemd160@0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-0.2.0.tgz#2bf198bde167cacfa51c0a928e84b68bbe171fce"
+rimraf@^2.2.8, rimraf@^2.6.1:
+  version "2.6.2"
+  resolved "http://registry.npm.taobao.org/rimraf/download/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
+  dependencies:
+    glob "^7.0.5"
 
-run-async@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/run-async/-/run-async-0.1.0.tgz#c8ad4a5e110661e402a7d21b530e009f25f8e389"
+ripemd160@^2.0.0, ripemd160@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.1.tgz#0f4584295c53a3628af7e6d79aca21ce57d1c6e7"
   dependencies:
-    once "^1.3.0"
+    hash-base "^2.0.0"
+    inherits "^2.0.1"
 
-rx-lite@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102"
+run-async@^2.2.0:
+  version "2.3.0"
+  resolved "http://registry.npm.taobao.org/run-async/download/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
+  dependencies:
+    is-promise "^2.1.0"
+
+rx-lite-aggregates@^4.0.8:
+  version "4.0.8"
+  resolved "http://registry.npm.taobao.org/rx-lite-aggregates/download/rx-lite-aggregates-4.0.8.tgz#753b87a89a11c95467c4ac1626c4efc4e05c67be"
+  dependencies:
+    rx-lite "*"
+
+rx-lite@*, rx-lite@^4.0.8:
+  version "4.0.8"
+  resolved "http://registry.npm.taobao.org/rx-lite/download/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444"
+
+safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
 
 saladcss-bem@^0.0.1:
   version "0.0.1"
@@ -6079,10 +6858,52 @@ samsam@1.1.2, samsam@~1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/samsam/-/samsam-1.1.2.tgz#bec11fdc83a9fda063401210e40176c3024d1567"
 
+sass-graph@^2.1.1:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.2.4.tgz#13fbd63cd1caf0908b9fd93476ad43a51d1e0b49"
+  dependencies:
+    glob "^7.0.0"
+    lodash "^4.0.0"
+    scss-tokenizer "^0.2.3"
+    yargs "^7.0.0"
+
+sass-loader@^6.0.6:
+  version "6.0.6"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-6.0.6.tgz#e9d5e6c1f155faa32a4b26d7a9b7107c225e40f9"
+  dependencies:
+    async "^2.1.5"
+    clone-deep "^0.3.0"
+    loader-utils "^1.0.1"
+    lodash.tail "^4.1.1"
+    pify "^3.0.0"
+
 sax@^1.1.4, sax@~1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
 
+schema-utils@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"
+  dependencies:
+    ajv "^5.0.0"
+
+scss-tokenizer@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
+  dependencies:
+    js-base64 "^2.1.8"
+    source-map "^0.4.2"
+
+select-hose@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
+
+selfsigned@^1.9.1:
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.1.tgz#bf8cb7b83256c4551e31347c6311778db99eec52"
+  dependencies:
+    node-forge "0.6.33"
+
 "semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@~5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
@@ -6091,6 +6912,10 @@ semver@^4.1.0, semver@~4.3.3:
   version "4.3.6"
   resolved "https://registry.yarnpkg.com/semver/-/semver-4.3.6.tgz#300bc6e0e86374f7ba61068b5b1ecd57fc6532da"
 
+semver@^5.3.0:
+  version "5.4.1"
+  resolved "http://registry.npm.taobao.org/semver/download/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
+
 send@0.14.1:
   version "0.14.1"
   resolved "https://registry.yarnpkg.com/send/-/send-0.14.1.tgz#a954984325392f51532a7760760e459598c89f7a"
@@ -6150,11 +6975,37 @@ setprototypeof@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.2.tgz#81a552141ec104b88e89ce383103ad5c66564d08"
 
-sha.js@2.2.6:
-  version "2.2.6"
-  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.2.6.tgz#17ddeddc5f722fb66501658895461977867315ba"
+sha.js@^2.4.0, sha.js@^2.4.8:
+  version "2.4.9"
+  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.9.tgz#98f64880474b74f4a38b8da9d3c0f2d104633e7d"
+  dependencies:
+    inherits "^2.0.1"
+    safe-buffer "^5.0.1"
+
+shallow-clone@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-0.1.2.tgz#5909e874ba77106d73ac414cfec1ffca87d97060"
+  dependencies:
+    is-extendable "^0.1.1"
+    kind-of "^2.0.1"
+    lazy-cache "^0.2.3"
+    mixin-object "^2.0.1"
+
+shebang-command@^1.2.0:
+  version "1.2.0"
+  resolved "http://registry.npm.taobao.org/shebang-command/download/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
+  dependencies:
+    shebang-regex "^1.0.0"
+
+shebang-regex@^1.0.0:
+  version "1.0.0"
+  resolved "http://registry.npm.taobao.org/shebang-regex/download/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
+
+shelljs@0.3.x:
+  version "0.3.0"
+  resolved "http://registry.npm.taobao.org/shelljs/download/shelljs-0.3.0.tgz#3596e6307a781544f591f37da618360f31db57b1"
 
-shelljs@^0.7.0, shelljs@^0.7.4, shelljs@^0.7.5:
+shelljs@^0.7.0:
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.5.tgz#2eef7a50a21e1ccf37da00df767ec69e30ad0675"
   dependencies:
@@ -6162,15 +7013,11 @@ shelljs@^0.7.0, shelljs@^0.7.4, shelljs@^0.7.5:
     interpret "^1.0.0"
     rechoir "^0.6.2"
 
-sigmund@^1.0.1, sigmund@~1.0.0:
+sigmund@~1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
 
-signal-exit@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-2.1.2.tgz#375879b1f92ebc3b334480d038dc546a6d558564"
-
-signal-exit@^3.0.0:
+signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
 
@@ -6191,9 +7038,11 @@ slash@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
 
-slice-ansi@0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-0.0.4.tgz#edbf8903f66f7ce2f8eafd6ceed65e264c831b35"
+slice-ansi@1.0.0:
+  version "1.0.0"
+  resolved "http://registry.npm.taobao.org/slice-ansi/download/slice-ansi-1.0.0.tgz#044f1a49d8842ff307aad6b505ed178bd950134d"
+  dependencies:
+    is-fullwidth-code-point "^2.0.0"
 
 sntp@1.x.x:
   version "1.0.9"
@@ -6255,18 +7104,18 @@ socket.io@1.4.7:
     socket.io-client "1.4.6"
     socket.io-parser "2.2.6"
 
-sockjs-client@^1.0.3, sockjs-client@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.1.tgz#284843e9a9784d7c474b1571b3240fca9dda4bb0"
+sockjs-client@1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.4.tgz#5babe386b775e4cf14e7520911452654016c8b12"
   dependencies:
-    debug "^2.2.0"
-    eventsource "~0.1.6"
+    debug "^2.6.6"
+    eventsource "0.1.6"
     faye-websocket "~0.11.0"
     inherits "^2.0.1"
     json3 "^3.3.2"
-    url-parse "^1.1.1"
+    url-parse "^1.1.8"
 
-sockjs@^0.3.15:
+sockjs@0.3.18:
   version "0.3.18"
   resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.18.tgz#d9b289316ca7df77595ef299e075f0f937eb4207"
   dependencies:
@@ -6279,13 +7128,9 @@ sort-keys@^1.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
-sorted-object@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/sorted-object/-/sorted-object-2.0.1.tgz#7d631f4bd3a798a24af1dffcfbfe83337a5df5fc"
-
-source-list-map@^0.1.4, source-list-map@~0.1.0, source-list-map@~0.1.7:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.7.tgz#d4b5ce2a46535c72c7e8527c71a77d250618172e"
+source-list-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
 
 source-map-support@^0.4.2:
   version "0.4.6"
@@ -6293,22 +7138,26 @@ source-map-support@^0.4.2:
   dependencies:
     source-map "^0.5.3"
 
-source-map@0.4.x, source-map@^0.4.4, source-map@~0.4.1:
+source-map@0.4.x, source-map@^0.4.2, source-map@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@^0.1.41, source-map@~0.1.7:
+source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.0, source-map@~0.5.1, source-map@~0.5.3:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
+
+source-map@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+
+source-map@~0.1.7:
   version "0.1.43"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.0, source-map@~0.5.1, source-map@~0.5.3:
-  version "0.5.6"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
-
 source-map@~0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.2.0.tgz#dab73fbcfc2ba819b4de03bd6f6eaa48164b3f9d"
@@ -6333,9 +7182,32 @@ spdx-license-ids@^1.0.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-1.2.2.tgz#c9df7a3424594ade6bd11900d596696dc06bac57"
 
+spdy-transport@^2.0.18:
+  version "2.0.20"
+  resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-2.0.20.tgz#735e72054c486b2354fe89e702256004a39ace4d"
+  dependencies:
+    debug "^2.6.8"
+    detect-node "^2.0.3"
+    hpack.js "^2.1.6"
+    obuf "^1.1.1"
+    readable-stream "^2.2.9"
+    safe-buffer "^5.0.1"
+    wbuf "^1.7.2"
+
+spdy@^3.4.1:
+  version "3.4.7"
+  resolved "https://registry.yarnpkg.com/spdy/-/spdy-3.4.7.tgz#42ff41ece5cc0f99a3a6c28aabb73f5c3b03acbc"
+  dependencies:
+    debug "^2.6.8"
+    handle-thing "^1.2.5"
+    http-deceiver "^1.2.7"
+    safe-buffer "^5.0.1"
+    select-hose "^2.0.0"
+    spdy-transport "^2.0.18"
+
 sprintf-js@~1.0.2:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  resolved "http://registry.npm.taobao.org/sprintf-js/download/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
 
 sshpk@^1.7.0:
   version "1.10.1"
@@ -6356,6 +7228,12 @@ sshpk@^1.7.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
 
+stdout-stream@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/stdout-stream/-/stdout-stream-1.4.0.tgz#a2c7c8587e54d9427ea9edb3ac3f2cd522df378b"
+  dependencies:
+    readable-stream "^2.0.1"
+
 stream-browserify@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"
@@ -6363,10 +7241,6 @@ stream-browserify@^2.0.1:
     inherits "~2.0.1"
     readable-stream "^2.0.2"
 
-stream-cache@~0.0.1:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/stream-cache/-/stream-cache-0.0.2.tgz#1ac5ad6832428ca55667dbdee395dad4e6db118f"
-
 stream-consume@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/stream-consume/-/stream-consume-0.1.0.tgz#a41ead1a6d6081ceb79f65b061901b6d8f3d1d0f"
@@ -6389,10 +7263,6 @@ string-hash@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.1.tgz#8e85bed291e0763b8f6809d9c3368fea048db3dc"
 
-string-template@~0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/string-template/-/string-template-0.2.1.tgz#42932e598a352d01fc22ec3367d9d84eec6c9add"
-
 string-width@^1.0.1, string-width@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
@@ -6408,6 +7278,13 @@ string-width@^2.0.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^3.0.0"
 
+string-width@^2.1.0, string-width@^2.1.1:
+  version "2.1.1"
+  resolved "http://registry.npm.taobao.org/string-width/download/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
+  dependencies:
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^4.0.0"
+
 string@^3.0.1:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/string/-/string-3.3.3.tgz#5ea211cd92d228e184294990a6cc97b366a77cb0"
@@ -6416,6 +7293,12 @@ string_decoder@^0.10.25, string_decoder@~0.10.x:
   version "0.10.31"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
 
+string_decoder@~1.0.3:
+  version "1.0.3"
+  resolved "http://registry.npm.taobao.org/string_decoder/download/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
+  dependencies:
+    safe-buffer "~5.1.0"
+
 stringstream@~0.0.4:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
@@ -6432,6 +7315,12 @@ strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   dependencies:
     ansi-regex "^2.0.0"
 
+strip-ansi@^4.0.0:
+  version "4.0.0"
+  resolved "http://registry.npm.taobao.org/strip-ansi/download/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
+  dependencies:
+    ansi-regex "^3.0.0"
+
 strip-ansi@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-0.1.1.tgz#39e8a98d044d150660abe4a6808acf70bb7bc991"
@@ -6453,23 +7342,32 @@ strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
 
+strip-eof@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
+
 strip-indent@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
   dependencies:
     get-stdin "^4.0.1"
 
-strip-json-comments@~1.0.1, strip-json-comments@~1.0.4:
+strip-json-comments@1.0.x, strip-json-comments@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-1.0.4.tgz#1e15fbcac97d3ee99bf2d73b4c656b082bbafb91"
 
-style-loader@^0.13.1:
-  version "0.13.1"
-  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.13.1.tgz#468280efbc0473023cd3a6cd56e33b5a1d7fc3a9"
+strip-json-comments@~2.0.1:
+  version "2.0.1"
+  resolved "http://registry.npm.taobao.org/strip-json-comments/download/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
+
+style-loader@^0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.19.0.tgz#7258e788f0fee6a42d710eaf7d6c2412a4c50759"
   dependencies:
-    loader-utils "^0.2.7"
+    loader-utils "^1.0.2"
+    schema-utils "^0.3.0"
 
-supports-color@3.1.2, supports-color@^3.1.0, supports-color@^3.1.1, supports-color@^3.1.2:
+supports-color@3.1.2, supports-color@^3.1.0, supports-color@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.1.2.tgz#72a262894d9d408b956ca05ff37b2ed8a6e2a2d5"
   dependencies:
@@ -6481,7 +7379,25 @@ supports-color@^0.2.0:
 
 supports-color@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+  resolved "http://registry.npm.taobao.org/supports-color/download/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+
+supports-color@^4.0.0:
+  version "4.5.0"
+  resolved "http://registry.npm.taobao.org/supports-color/download/supports-color-4.5.0.tgz#be7a0de484dec5c5cddf8b3d59125044912f635b"
+  dependencies:
+    has-flag "^2.0.0"
+
+supports-color@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.2.1.tgz#65a4bb2631e90e02420dba5554c375a4754bb836"
+  dependencies:
+    has-flag "^2.0.0"
+
+supports-color@^5.3.0:
+  version "5.4.0"
+  resolved "http://registry.npm.taobao.org/supports-color/download/supports-color-5.4.0.tgz#1c6b337402c2137605efe19f10fec390f6faab54"
+  dependencies:
+    has-flag "^3.0.0"
 
 svgo@^0.7.0:
   version "0.7.1"
@@ -6499,24 +7415,20 @@ svgo@^0.7.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.0.tgz#2183fcd165fc30048b3421aad29ada7a339ea566"
 
-sync-exec@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/sync-exec/-/sync-exec-0.6.2.tgz#717d22cc53f0ce1def5594362f3a89a2ebb91105"
-
-table@^3.7.8:
-  version "3.8.3"
-  resolved "https://registry.yarnpkg.com/table/-/table-3.8.3.tgz#2bbc542f0fda9861a755d3947fefd8b3f513855f"
+table@^4.0.1:
+  version "4.0.2"
+  resolved "http://registry.npm.taobao.org/table/download/table-4.0.2.tgz#a33447375391e766ad34d3486e6e2aedc84d2e36"
   dependencies:
-    ajv "^4.7.0"
-    ajv-keywords "^1.0.0"
-    chalk "^1.1.1"
-    lodash "^4.0.0"
-    slice-ansi "0.0.4"
-    string-width "^2.0.0"
+    ajv "^5.2.3"
+    ajv-keywords "^2.1.0"
+    chalk "^2.1.0"
+    lodash "^4.17.4"
+    slice-ansi "1.0.0"
+    string-width "^2.1.1"
 
-tapable@^0.1.8, tapable@~0.1.8:
-  version "0.1.10"
-  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.1.10.tgz#29c35707c2b70e50d07482b5d202e8ed446dafd4"
+tapable@^0.2.7:
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.8.tgz#99372a5c999bf2df160afc0d74bed4f47948cd22"
 
 tar-pack@~3.3.0:
   version "3.3.0"
@@ -6531,7 +7443,7 @@ tar-pack@~3.3.0:
     tar "~2.2.1"
     uid-number "~0.0.6"
 
-tar@~2.2.1:
+tar@^2.0.0, tar@~2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
   dependencies:
@@ -6556,14 +7468,10 @@ tempfile@~0.1.2:
   dependencies:
     uuid "~1.4.0"
 
-text-table@^0.2.0, text-table@~0.2.0:
+text-table@~0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
 
-theaterjs@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/theaterjs/-/theaterjs-3.1.0.tgz#74b1a750c54c4b3bef74383ea83cbcb19ab4f185"
-
 thenify-all@^1.0.0, thenify-all@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
@@ -6580,10 +7488,6 @@ throttle-debounce@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-1.0.1.tgz#dad0fe130f9daf3719fdea33dc36a8e6ba7f30b5"
 
-throttleit@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"
-
 through2@^0.5.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/through2/-/through2-0.5.1.tgz#dfdd012eb9c700e2323fd334f38ac622ab372da7"
@@ -6605,10 +7509,14 @@ through2@^2.0.0:
     readable-stream "^2.1.5"
     xtend "~4.0.1"
 
-through@^2.3.6, through@~2.3.6:
+through@^2.3.6, through@~2.3.4, through@~2.3.6:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
 
+thunky@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/thunky/-/thunky-0.1.0.tgz#bf30146824e2b6e67b0f2d7a4ac8beb26908684e"
+
 tildify@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/tildify/-/tildify-1.2.0.tgz#dcec03f55dca9b7aa3e5b04f21817eb56e63588a"
@@ -6619,6 +7527,10 @@ time-stamp@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-1.0.1.tgz#9f4bd23559c9365966f3302dbba2b07c6b99b151"
 
+time-stamp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-2.0.0.tgz#95c6a44530e15ba8d6f4a3ecb8c3a3fac46da357"
+
 timers-browserify@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.2.tgz#ab4883cf597dcd50af211349a00fbca56ac86b86"
@@ -6631,6 +7543,12 @@ tmp@0.0.28:
   dependencies:
     os-tmpdir "~1.0.1"
 
+tmp@^0.0.33:
+  version "0.0.33"
+  resolved "http://registry.npm.taobao.org/tmp/download/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
+  dependencies:
+    os-tmpdir "~1.0.2"
+
 to-array@0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890"
@@ -6643,24 +7561,6 @@ to-fast-properties@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.2.tgz#f3f5c0c3ba7299a7ef99427e44633257ade43320"
 
-to-path@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/to-path/-/to-path-1.0.1.tgz#ade88449c855925aa6464e33ff92f0b8fc5bcb8a"
-  dependencies:
-    is-array-like "^1.0.3"
-    is-nil "^1.0.0"
-    is-symbol "^1.0.1"
-    to-str "^1.0.0"
-
-to-str@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/to-str/-/to-str-1.0.0.tgz#9034248f56f439804c1fd45a3cbe8195ecb608f1"
-  dependencies:
-    is-function "^1.0.1"
-    is-nil "^1.0.0"
-    is-object "^1.0.1"
-    is-symbol "^1.0.1"
-
 toposort@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.0.tgz#b66cf385a1a8a8e68e45b8259e7f55875e8b06ef"
@@ -6685,14 +7585,16 @@ trim-newlines@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
 
-tryit@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/tryit/-/tryit-1.0.3.tgz#393be730a9446fd1ead6da59a014308f36c289cb"
-
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
 
+tunnel-agent@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
+  dependencies:
+    safe-buffer "^5.0.1"
+
 tunnel-agent@~0.4.1:
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.4.3.tgz#6373db76909fe570e08d73583365ed828a74eeeb"
@@ -6703,7 +7605,7 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0:
 
 type-check@~0.3.2:
   version "0.3.2"
-  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
+  resolved "http://registry.npm.taobao.org/type-check/download/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
   dependencies:
     prelude-ls "~1.1.2"
 
@@ -6722,7 +7624,7 @@ type-is@~1.6.13:
     media-typer "0.3.0"
     mime-types "~2.1.13"
 
-typedarray@~0.0.5:
+typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
@@ -6730,7 +7632,7 @@ uc.micro@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.3.tgz#7ed50d5e0f9a9fb0a573379259f2a77458d50192"
 
-uglify-js@2.7.x, uglify-js@^2.6, uglify-js@~2.7.3:
+uglify-js@2.7.x:
   version "2.7.5"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.7.5.tgz#4612c0c7baaee2ba7c487de4904ae122079f2ca8"
   dependencies:
@@ -6739,6 +7641,15 @@ uglify-js@2.7.x, uglify-js@^2.6, uglify-js@~2.7.3:
     uglify-to-browserify "~1.0.0"
     yargs "~3.10.0"
 
+uglify-js@^2.6, uglify-js@^2.8.29:
+  version "2.8.29"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
+  dependencies:
+    source-map "~0.5.1"
+    yargs "~3.10.0"
+  optionalDependencies:
+    uglify-to-browserify "~1.0.0"
+
 uglify-js@~2.3:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.3.6.tgz#fa0984770b428b7a9b2a8058f46355d14fef211a"
@@ -6751,6 +7662,14 @@ uglify-to-browserify@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
 
+uglifyjs-webpack-plugin@^0.4.6:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-0.4.6.tgz#b951f4abb6bd617e66f63eb891498e391763e309"
+  dependencies:
+    source-map "^0.5.6"
+    uglify-js "^2.8.29"
+    webpack-sources "^1.0.1"
+
 uid-number@~0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
@@ -6785,6 +7704,10 @@ unique-stream@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unique-stream/-/unique-stream-1.0.0.tgz#d59a4a75427447d9aa6c91e70263f8d26a4b104b"
 
+universalify@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
+
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
@@ -6799,12 +7722,17 @@ uppercamelcase@^1.1.0:
   dependencies:
     camelcase "^1.2.1"
 
-url-loader@^0.5.7:
-  version "0.5.7"
-  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.5.7.tgz#67e8779759f8000da74994906680c943a9b0925d"
+url-join@^2.0.2:
+  version "2.0.5"
+  resolved "http://registry.npm.taobao.org/url-join/download/url-join-2.0.5.tgz#5af22f18c052a000a48d7b82c5e9c2e2feeda728"
+
+url-loader@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.6.2.tgz#a007a7109620e9d988d14bce677a1decb9a993f7"
   dependencies:
-    loader-utils "0.2.x"
-    mime "1.2.x"
+    loader-utils "^1.0.2"
+    mime "^1.4.1"
+    schema-utils "^0.3.0"
 
 url-parse@1.0.x:
   version "1.0.5"
@@ -6813,11 +7741,11 @@ url-parse@1.0.x:
     querystringify "0.0.x"
     requires-port "1.0.x"
 
-url-parse@^1.1.1:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.1.7.tgz#025cff999653a459ab34232147d89514cc87d74a"
+url-parse@^1.1.8:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.1.9.tgz#c67f1d775d51f0a18911dd7b3ffad27bb9e5bd19"
   dependencies:
-    querystringify "0.0.x"
+    querystringify "~1.0.0"
     requires-port "1.0.x"
 
 url2@^0.0.0:
@@ -6835,12 +7763,6 @@ user-home@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/user-home/-/user-home-1.1.1.tgz#2b5be23a32b63a7c9deb8d0f28d485724a3df190"
 
-user-home@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/user-home/-/user-home-2.0.0.tgz#9c70bfd8169bc1dcbf48604e0f04b8b49cde9e9f"
-  dependencies:
-    os-homedir "^1.0.0"
-
 useragent@^2.1.9:
   version "2.1.9"
   resolved "https://registry.yarnpkg.com/useragent/-/useragent-2.1.9.tgz#4dba2bc4dad1875777ab15de3ff8098b475000b7"
@@ -6853,7 +7775,7 @@ utf8@2.1.0:
 
 util-deprecate@~1.0.1:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  resolved "http://registry.npm.taobao.org/util-deprecate/download/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
 
 util@0.10.3, "util@>=0.10.3 <1", util@^0.10.3:
   version "0.10.3"
@@ -6881,6 +7803,10 @@ uuid@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
 
+uuid@^3.1.0:
+  version "3.2.1"
+  resolved "http://registry.npm.taobao.org/uuid/download/uuid-3.2.1.tgz#12c528bb9d58d0b9265d9a2f6f0fe8be17ff1f14"
+
 uuid@~1.4.0:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-1.4.2.tgz#453019f686966a6df83cdc5244e7c990ecc332fc"
@@ -6952,19 +7878,6 @@ vinyl@^0.5.0:
     clone-stats "^0.0.1"
     replace-ext "0.0.1"
 
-virtual-dom@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/virtual-dom/-/virtual-dom-2.1.1.tgz#80eda2d481b9ede0c049118cefcb4a05f21d1375"
-  dependencies:
-    browser-split "0.0.1"
-    error "^4.3.0"
-    ev-store "^7.0.0"
-    global "^4.3.0"
-    is-object "^1.0.1"
-    next-tick "^0.2.2"
-    x-is-array "0.1.0"
-    x-is-string "0.1.0"
-
 vm-browserify@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
@@ -6975,41 +7888,40 @@ void-elements@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
 
-vue-hot-reload-api@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.1.0.tgz#9ca58a6e0df9078554ce1708688b6578754d86de"
+vue-hot-reload-api@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.2.0.tgz#9a21b35ced3634434a43ee80efb7350ea8fb206d"
 
-vue-loader@>=9.4.2, vue-loader@^12.0.2:
-  version "12.0.2"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-12.0.2.tgz#f539036b1e0e9516b474a8fd1b5f533145248406"
+vue-loader@^13.3.0:
+  version "13.3.0"
+  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-13.3.0.tgz#3bf837d490ba5dea6fc07e0835ffa6c688c8af33"
   dependencies:
     consolidate "^0.14.0"
     hash-sum "^1.0.2"
-    js-beautify "^1.6.3"
     loader-utils "^1.1.0"
-    lru-cache "^4.0.1"
-    postcss "^5.0.21"
+    lru-cache "^4.1.1"
+    postcss "^6.0.8"
     postcss-load-config "^1.1.0"
     postcss-selector-parser "^2.0.0"
-    resolve "^1.3.3"
-    source-map "^0.5.6"
-    vue-hot-reload-api "^2.1.0"
+    prettier "^1.7.0"
+    resolve "^1.4.0"
+    source-map "^0.6.1"
+    vue-hot-reload-api "^2.2.0"
     vue-style-loader "^3.0.0"
-    vue-template-es2015-compiler "^1.2.2"
+    vue-template-es2015-compiler "^1.6.0"
 
-vue-markdown-loader@^0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/vue-markdown-loader/-/vue-markdown-loader-0.5.1.tgz#f52c05f1f05aa4d7f182ede72a68d5f427332f26"
+vue-markdown-loader@1:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/vue-markdown-loader/-/vue-markdown-loader-1.0.0.tgz#255a2608e388991faa354618e4f4b642ebb7e0db"
   dependencies:
     cheerio "^0.20.0"
     highlight.js "^9.4.0"
     loader-utils "^0.2.15"
     markdown-it "^6.0.5"
-    rimraf "^2.5.2"
 
-vue-router@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-2.1.1.tgz#10c31bbdcb6da92bd3e0223fa12345e73018625a"
+vue-router@2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-2.7.0.tgz#16d424493aa51c3c8cce8b7c7210ea4c3a89aff1"
 
 vue-style-loader@^3.0.0:
   version "3.0.1"
@@ -7018,29 +7930,35 @@ vue-style-loader@^3.0.0:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@*, vue-template-compiler@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.3.0.tgz#a89a17064b68e182569da51ebbedd71ce57f93bf"
+vue-template-compiler@^2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.2.tgz#6f198ebc677b8f804315cd33b91e849315ae7177"
   dependencies:
     de-indent "^1.0.2"
     he "^1.1.0"
 
-vue-template-es2015-compiler@^1.2.2, vue-template-es2015-compiler@^1.5.2:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.5.2.tgz#a0a6c50c941d2a4abda963f2f42c337ac450ee95"
+vue-template-es2015-compiler@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
 
-vue@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.3.0.tgz#bc44db0488c5245c788304c7683efe7b4c862d82"
+vue@^2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.2.tgz#fd367a87bae7535e47f9dc5c9ec3b496e5feb5a4"
 
-watchpack@^0.2.1:
-  version "0.2.9"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-0.2.9.tgz#62eaa4ab5e5ba35fdfc018275626e3c0f5e3fb0b"
+watchpack@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.4.0.tgz#4a1472bcbb952bd0a9bb4036801f954dfb39faac"
   dependencies:
-    async "^0.9.0"
-    chokidar "^1.0.0"
+    async "^2.1.2"
+    chokidar "^1.7.0"
     graceful-fs "^4.1.2"
 
+wbuf@^1.1.0, wbuf@^1.7.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/wbuf/-/wbuf-1.7.2.tgz#d697b99f1f59512df2751be42769c1580b5801fe"
+  dependencies:
+    minimalistic-assert "^1.0.0"
+
 weak-map@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/weak-map/-/weak-map-1.0.0.tgz#b66e56a9df0bd25a76bbf1b514db129080614a37"
@@ -7049,79 +7967,103 @@ webidl-conversions@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-2.0.1.tgz#3bf8258f7d318c7443c36f2e169402a1a6703506"
 
-webpack-core@~0.6.9:
-  version "0.6.9"
-  resolved "https://registry.yarnpkg.com/webpack-core/-/webpack-core-0.6.9.tgz#fc571588c8558da77be9efb6debdc5a3b172bdc2"
+webpack-dev-middleware@^1.11.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.12.0.tgz#d34efefb2edda7e1d3b5dbe07289513219651709"
   dependencies:
-    source-list-map "~0.1.7"
-    source-map "~0.4.1"
+    memory-fs "~0.4.1"
+    mime "^1.3.4"
+    path-is-absolute "^1.0.0"
+    range-parser "^1.0.3"
+    time-stamp "^2.0.0"
 
-webpack-dev-middleware@^1.0.11, webpack-dev-middleware@^1.4.0:
-  version "1.8.4"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.8.4.tgz#e8765c9122887ce9e3abd4cc9c3eb31b61e0948d"
+webpack-dev-middleware@^2.0.6:
+  version "2.0.6"
+  resolved "http://registry.npm.taobao.org/webpack-dev-middleware/download/webpack-dev-middleware-2.0.6.tgz#a51692801e8310844ef3e3790e1eacfe52326fd4"
   dependencies:
-    memory-fs "~0.3.0"
-    mime "^1.3.4"
+    loud-rejection "^1.6.0"
+    memory-fs "~0.4.1"
+    mime "^2.1.0"
     path-is-absolute "^1.0.0"
     range-parser "^1.0.3"
+    url-join "^2.0.2"
+    webpack-log "^1.0.1"
 
-webpack-dev-server@^1.15.1:
-  version "1.16.2"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-1.16.2.tgz#8bebc2c4ce1c45a15c72dd769d9ba08db306a793"
+webpack-dev-server@^2.9.1:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.9.1.tgz#7ac9320b61b00eb65b2109f15c82747fc5b93585"
   dependencies:
+    ansi-html "0.0.7"
+    array-includes "^3.0.3"
+    bonjour "^3.5.0"
+    chokidar "^1.6.0"
     compression "^1.5.2"
     connect-history-api-fallback "^1.3.0"
+    del "^3.0.0"
     express "^4.13.3"
-    http-proxy-middleware "~0.17.1"
-    open "0.0.5"
-    optimist "~0.6.1"
+    html-entities "^1.2.0"
+    http-proxy-middleware "~0.17.4"
+    internal-ip "1.2.0"
+    ip "^1.1.5"
+    loglevel "^1.4.1"
+    opn "^5.1.0"
+    portfinder "^1.0.9"
+    selfsigned "^1.9.1"
     serve-index "^1.7.2"
-    sockjs "^0.3.15"
-    sockjs-client "^1.0.3"
-    stream-cache "~0.0.1"
-    strip-ansi "^3.0.0"
-    supports-color "^3.1.1"
-    webpack-dev-middleware "^1.4.0"
+    sockjs "0.3.18"
+    sockjs-client "1.1.4"
+    spdy "^3.4.1"
+    strip-ansi "^3.0.1"
+    supports-color "^4.2.1"
+    webpack-dev-middleware "^1.11.0"
+    yargs "^6.6.0"
 
-webpack-hud@*:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/webpack-hud/-/webpack-hud-0.0.10.tgz#5acbd3435003144bc79c0c7a5081fcffada3ecec"
+webpack-log@^1.0.1:
+  version "1.2.0"
+  resolved "http://registry.npm.taobao.org/webpack-log/download/webpack-log-1.2.0.tgz#a4b34cda6b22b518dbb0ab32e567962d5c72a43d"
   dependencies:
-    bottom-tip "0.0.4"
-    doc-ready "^1.0.4"
-    sockjs-client "^1.1.0"
-    strip-ansi "^3.0.1"
+    chalk "^2.1.0"
+    log-symbols "^2.1.0"
+    loglevelnext "^1.0.1"
+    uuid "^3.1.0"
 
-webpack-node-externals@^1.5.4:
-  version "1.5.4"
-  resolved "https://registry.yarnpkg.com/webpack-node-externals/-/webpack-node-externals-1.5.4.tgz#ea05ba17108a23e776c35c42e7bb0e86c225be00"
+webpack-node-externals@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/webpack-node-externals/-/webpack-node-externals-1.6.0.tgz#232c62ec6092b100635a3d29d83c1747128df9bd"
 
-webpack-sources@^0.1.0:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.1.3.tgz#15ce2fb79d0a1da727444ba7c757bf164294f310"
+webpack-sources@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.0.1.tgz#c7356436a4d13123be2e2426a05d1dad9cbe65cf"
   dependencies:
-    source-list-map "~0.1.0"
+    source-list-map "^2.0.0"
     source-map "~0.5.3"
 
-webpack@^1.13.2:
-  version "1.14.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-1.14.0.tgz#54f1ffb92051a328a5b2057d6ae33c289462c823"
+webpack@^3.7.1:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.7.1.tgz#6046b5c415ff7df7a0dc54c5b6b86098e8b952da"
   dependencies:
-    acorn "^3.0.0"
-    async "^1.3.0"
-    clone "^1.0.2"
-    enhanced-resolve "~0.9.0"
-    interpret "^0.6.4"
-    loader-utils "^0.2.11"
-    memory-fs "~0.3.0"
+    acorn "^5.0.0"
+    acorn-dynamic-import "^2.0.0"
+    ajv "^5.1.5"
+    ajv-keywords "^2.0.0"
+    async "^2.1.2"
+    enhanced-resolve "^3.4.0"
+    escope "^3.6.0"
+    interpret "^1.0.0"
+    json-loader "^0.5.4"
+    json5 "^0.5.1"
+    loader-runner "^2.3.0"
+    loader-utils "^1.1.0"
+    memory-fs "~0.4.1"
     mkdirp "~0.5.0"
-    node-libs-browser "^0.7.0"
-    optimist "~0.6.0"
-    supports-color "^3.1.0"
-    tapable "~0.1.8"
-    uglify-js "~2.7.3"
-    watchpack "^0.2.1"
-    webpack-core "~0.6.9"
+    node-libs-browser "^2.0.0"
+    source-map "^0.5.3"
+    supports-color "^4.2.1"
+    tapable "^0.2.7"
+    uglifyjs-webpack-plugin "^0.4.6"
+    watchpack "^1.4.0"
+    webpack-sources "^1.0.1"
+    yargs "^8.0.2"
 
 websocket-driver@>=0.5.1:
   version "0.6.5"
@@ -7147,12 +8089,22 @@ which-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
 
-which@^1.0.9, which@^1.1.1, which@^1.2.12, which@^1.2.9, which@~1.2.10:
+which-module@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
+
+which@1, which@^1.0.9, which@^1.1.1, which@^1.2.1, which@^1.2.12:
   version "1.2.12"
   resolved "https://registry.yarnpkg.com/which/-/which-1.2.12.tgz#de67b5e450269f194909ef23ece4ebe416fa1192"
   dependencies:
     isexe "^1.1.1"
 
+which@^1.2.9:
+  version "1.3.0"
+  resolved "http://registry.npm.taobao.org/which/download/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
+  dependencies:
+    isexe "^2.0.0"
+
 wide-align@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.0.tgz#40edde802a71fea1f070da3e62dcda2e7add96ad"
@@ -7173,7 +8125,7 @@ wordwrap@0.0.2:
 
 wordwrap@^1.0.0, wordwrap@~1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
+  resolved "http://registry.npm.taobao.org/wordwrap/download/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
 
 wordwrap@~0.0.2:
   version "0.0.3"
@@ -7188,7 +8140,7 @@ wrap-ansi@^2.0.0:
 
 wrappy@1:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  resolved "http://registry.npm.taobao.org/wrappy/download/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
 
 wrench@1.5.8:
   version "1.5.8"
@@ -7196,7 +8148,7 @@ wrench@1.5.8:
 
 write@^0.2.1:
   version "0.2.1"
-  resolved "https://registry.yarnpkg.com/write/-/write-0.2.1.tgz#5fc03828e264cea3fe91455476f7a3c566cb0757"
+  resolved "http://registry.npm.taobao.org/write/download/write-0.2.1.tgz#5fc03828e264cea3fe91455476f7a3c566cb0757"
   dependencies:
     mkdirp "^0.5.1"
 
@@ -7207,14 +8159,6 @@ ws@1.0.1:
     options ">=0.0.5"
     ultron "1.0.x"
 
-x-is-array@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/x-is-array/-/x-is-array-0.1.0.tgz#de520171d47b3f416f5587d629b89d26b12dc29d"
-
-x-is-string@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/x-is-string/-/x-is-string-0.1.0.tgz#474b50865af3a49a9c4657f05acd145458f77d82"
-
 xml-char-classes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/xml-char-classes/-/xml-char-classes-1.0.0.tgz#64657848a20ffc5df583a42ad8a277b4512bbc4d"
@@ -7231,7 +8175,7 @@ xmlhttprequest-ssl@1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.1.tgz#3b7741fea4a86675976e908d296d4445961faa67"
 
-"xtend@>=4.0.0 <4.1.0-0", xtend@^4.0.0, xtend@~4.0.0, xtend@~4.0.1:
+"xtend@>=4.0.0 <4.1.0-0", xtend@^4.0.0, xtend@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
 
@@ -7243,9 +8187,9 @@ y18n@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
 
-yallist@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.0.0.tgz#306c543835f09ee1a4cb23b7bce9ab341c91cdd4"
+yallist@^2.1.2:
+  version "2.1.2"
+  resolved "http://registry.npm.taobao.org/yallist/download/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
 
 yargs-parser@^2.4.1:
   version "2.4.1"
@@ -7260,6 +8204,18 @@ yargs-parser@^4.2.0:
   dependencies:
     camelcase "^3.0.0"
 
+yargs-parser@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-5.0.0.tgz#275ecf0d7ffe05c77e64e7c86e4cd94bf0e1228a"
+  dependencies:
+    camelcase "^3.0.0"
+
+yargs-parser@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-7.0.0.tgz#8d0ac42f16ea55debd332caf4c4038b3e3f5dfd9"
+  dependencies:
+    camelcase "^4.1.0"
+
 yargs@^4.6.0:
   version "4.8.1"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-4.8.1.tgz#c0c42924ca4aaa6b0e6da1739dfb216439f9ddc0"
@@ -7298,6 +8254,60 @@ yargs@^6.4.0:
     y18n "^3.2.1"
     yargs-parser "^4.2.0"
 
+yargs@^6.6.0:
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
+  dependencies:
+    camelcase "^3.0.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^1.4.0"
+    read-pkg-up "^1.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^1.0.2"
+    which-module "^1.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^4.2.0"
+
+yargs@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.0.tgz#6ba318eb16961727f5d284f8ea003e8d6154d0c8"
+  dependencies:
+    camelcase "^3.0.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^1.4.0"
+    read-pkg-up "^1.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^1.0.2"
+    which-module "^1.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^5.0.0"
+
+yargs@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-8.0.2.tgz#6299a9055b1cefc969ff7e79c1d918dceb22c360"
+  dependencies:
+    camelcase "^4.1.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^2.0.0"
+    read-pkg-up "^2.0.0"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^7.0.0"
+
 yargs@~3.10.0:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
@@ -7307,12 +8317,6 @@ yargs@~3.10.0:
     decamelize "^1.0.0"
     window-size "0.1.0"
 
-yauzl@2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.4.1.tgz#9528f442dab1b2284e58b4379bb194e22e0c4005"
-  dependencies:
-    fd-slicer "~1.0.1"
-
 yeast@0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"