Docs: official page foot picture size is incorrect (#22765) (#22801)

* Update transition.md

* Update table.md

* Update transition.md

* Update table.md

* Update transition.md

* Update table.md

* Update table.md

* Update transition.md

* Update popover.md

.eslintignore

@@ -1,5 +1,6 @@
 src/utils/popper.js
 src/utils/date.js
+src/utils/lodash.js
 examples/play
 *.sh
 node_modules

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: true
+contact_links:
+  - name: Create new issue
+    url: https://elementui.github.io/issue-generator
+    about: The issue which is not created via https://elementui.github.io/issue-generator will be closed immediately.

.github/workflows/preview-build.yml

@@ -0,0 +1,45 @@
+name: Preview Build
+
+on: pull_request
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    env:
+      PULL_REQUEST_NUMBER: ${{ github.event.number }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '10.15.0'
+          registry-url: https://registry.npmjs.com/
+
+      - name: Build
+        run: npm run bootstrap && npm run deploy:build
+        
+
+      # share website dist
+      - name: Upload artifact
+        uses: actions/upload-artifact@v2
+        with:
+          name: docs
+          path: examples/element-ui/
+          retention-days: 1
+
+      # write pr.txt for share
+      - name: Save pr number
+        if: ${{ always() }}
+        run: echo ${PULL_REQUEST_NUMBER} > ./pr.txt
+
+      # share pr number
+      - name: Upload pr number
+        if: ${{ always() }}
+        uses: actions/upload-artifact@v2
+        with:
+          name: pr
+          path: ./pr.txt
+          retention-days: 1

.github/workflows/preview-deploy.yml

@@ -0,0 +1,83 @@
+name: Preview Deploy
+
+on:
+  workflow_run:
+    workflows: ['Preview Build']
+    types:
+      - completed
+
+jobs:
+  success:
+    runs-on: ubuntu-latest
+    if: github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.conclusion == 'success'
+    steps:
+      - name: download pr artifact
+        uses: dawidd6/action-download-artifact@v2
+        with:
+          workflow: ${{ github.event.workflow_run.workflow_id }}
+          name: pr
+
+      - name: save PR id
+        id: pr
+        run: echo "::set-output name=id::$(<pr.txt)"
+
+      - name: download docs artifact
+        uses: dawidd6/action-download-artifact@v2
+        with:
+          workflow: ${{ github.event.workflow_run.workflow_id }}
+          workflow_conclusion: success
+          name: docs
+
+      - name: upload surge service
+        id: deploy
+        run: |
+          export DEPLOY_DOMAIN=https://preview-pr-${{ steps.pr.outputs.id }}-element-ui.surge.sh
+          npx surge --project ./ --domain $DEPLOY_DOMAIN --token ${{ secrets.SURGE_TOKEN }}
+
+      - name: update status comment
+        uses: actions-cool/maintain-one-comment@v1.2.1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          body: |
+            🎊 PR Preview has been successfully built and deployed to https://preview-pr-${{ steps.pr.outputs.id }}-element-ui.surge.sh
+            <img width="300" src="https://user-images.githubusercontent.com/507615/90250366-88233900-de6e-11ea-95a5-84f0762ffd39.png">
+            <!-- Sticky Pull Request Comment -->
+          body-include: '<!-- Sticky Pull Request Comment -->'
+          number: ${{ steps.pr.outputs.id }}
+
+      - name: The job failed
+        if: ${{ failure() }}
+        uses: actions-cool/maintain-one-comment@v1.2.1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          body: |
+            😭 Deploy PR Preview failed.
+            <img width="300" src="https://user-images.githubusercontent.com/507615/90250824-4e066700-de6f-11ea-8230-600ecc3d6a6b.png">
+            <!-- Sticky Pull Request Comment -->
+          body-include: '<!-- Sticky Pull Request Comment -->'
+          number: ${{ steps.pr.outputs.id }}
+
+  failed:
+    runs-on: ubuntu-latest
+    if: github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.conclusion == 'failure'
+    steps:
+      - name: download pr artifact
+        uses: dawidd6/action-download-artifact@v2
+        with:
+          workflow: ${{ github.event.workflow_run.workflow_id }}
+          name: pr
+
+      - name: save PR id
+        id: pr
+        run: echo "::set-output name=id::$(<pr.txt)"
+
+      - name: The job failed
+        uses: actions-cool/maintain-one-comment@v1.2.1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          body: |
+            😭 Deploy PR Preview failed.
+            <img width="300" src="https://user-images.githubusercontent.com/507615/90250824-4e066700-de6f-11ea-8230-600ecc3d6a6b.png">
+            <!-- Sticky Pull Request Comment -->
+          body-include: '<!-- Sticky Pull Request Comment -->'
+          number: ${{ steps.pr.outputs.id }}

.gitignore

@@ -22,3 +22,4 @@ coverage
 waiter.config.js
 build/bin/algolia-key.js
 .envrc
+.history/

CHANGELOG.en-US.md

@@ -1,5 +1,359 @@
 ## Changelog
 
+### 2.15.14
+
+*2023-08-24*
+
+#### Bug fixes
+- Img
+  - Delete referrerpolicy prop (#22651 by @xinguanhua)
+#### Optimization
+- Docs
+  - Update readme and website example links (#22642 by @lyfeyaj)
+  - Update popper links (#22539 by @brizer)
+- I18n
+  - Update translation of Spanish (#22430 by @jcardus)
+  - Add sr-Latn translation (#22567 by @N-M)
+  - Update Uzbek translation (#22390 by @akahon)
+- Statistics
+  - Fix doc; Optimized code (#22384 by @webvs2)
+- Table
+  - Add highlight selection row (#22382 by @wangdaodao)
+
+### 2.15.13
+
+*2023-02-12*
+
+#### Bug fixes
+- Docs
+  - Fix Statistic docs (#22383 by @JUST-Limbo) 
+  - Fix Input docs (#22093 by @lm312)  
+  - Fix en-US docs (#22268 #22269 #22270 by @Hazel-Lin)  
+  - Fix Pagination docs (#22288 by @xujintai123)
+  - Fix: Links docs (#22370 by @itmier)    
+- Statistics
+  - fix slot display bug  (#22375 by @webvs2)
+- Chore
+  - missing web-type after publishing (#22271 by @loosheng)
+#### Optimization
+- InputNumber
+  - Fix touch one click trigger twice on the window touch pad (#22185 by @mrsai)
+- Image
+  - Add initialIndex prop (#22346 by @inkroom) 
+- Statistics
+  - Updated countdown feature to localize lodash Closes (#22260 by @webvs2)
+  - Update code and doc (#22276 by @webvs2)
+- Other
+  - fix web-types type props (#22281 by @whzxc)
+
+### 2.15.12
+
+*2022-11-16*
+
+#### Bug fixes
+- Statistic：
+  - Fixed the thousandth bit bug (#22252 by @webvs2)
+- Other
+  - Fix 2.15.11 element-theme-chalk publish fail bug
+
+### 2.15.11
+
+*2022-11-15*
+
+#### Bug fixes
+- Docs
+  - Fix Radio docs (#22178 by @bchen1029) 
+  - Fix Progress docs
+#### Optimization
+- I18n
+  - Update translation of Malaysian (#22185 by @z4q)
+  - Update translation of Norwegian (#22145 by @Barsnes)
+- Progress
+  - Add defineBackColor and textColor prop (#22089 by @lm312)
+- Statistics
+  - Add new component Statistics (#22159 by @webvs2)
+- Other
+  - Add Web Types to improve code assistance in WebStorm IDE and other JetBrains IDEs (#22135 by @piotrtomiak)
+
+### 2.15.10
+
+*2022-09-13*
+
+#### Bug fixes
+
+- DatePicker
+  - Fix props placement error (#21908 by @lqzhgood)
+- Loading
+  - Fix sticky DOM error (#22087 by @zzjjhh001)
+- Docs
+  - Fix Popover docs (#22083 by @lm312)
+  - Fix Skeleton docs (#22092 by @lm312)
+  - Fix DatePicker docs (#21970 by @guojiongwei)
+- Tree: 
+  - fix lazy-load default check problem (#21934 by @kiss-yu)
+
+#### Optimization
+
+- I18n
+  - Add translation of Sinhalese (#21936 by @sayuri-gi)
+  - Update translation of Spanish (#21924 by @jcardus)
+  - Add translation of Malaysian (#22028 by @iorange0411)
+  - Update translation of Swahili (#21904 by @Cholowao)
+- Utils
+  - update date-util.js (#22099 by @Due07)  
+- DatePicker
+  - add months And years type (#21918 by @akiko123456)
+
+### 2.15.9
+
+*2022-06-02*
+
+#### Bug fixes
+
+- Table
+  - Fix Tabl-header shake bug (#21863 by @bofeng)
+  - Fix when partial import  show `el-checkbox not imported` error (#21828 by @bobohuochai)
+- FormItem
+  - Fix  change rules  verification not reset bug (#21892 by @bofeng)
+- Cascader
+  - Fix change options unexpect error (#21759 by @louiebb)
+- Docs
+  - Fix Popover docs (#21843 by @lod61)
+  - Fix Calendar docs (#21814 by @GoJam11)
+  - Fix TimePicker docs (#21803 by @Alanscut)
+  - Fix DatePicker docs (#21877 by @Nirvanaiu)
+- Other
+  - Fix codepen display bug (#21863 by @bofeng)
+
+#### Optimization
+
+- I18n
+  - Add translation of Swahili (#21895 by @quilltouch)
+- Chore
+  - Use launch-editor-middleware in dev environment (#21633 by @polemices)
+- DatePicker & Cascader
+  - Optimize the dropdown animation direction (#21806 by @XivLaw)
+- Tooltip
+  - Optimize `getFirstElement` code (#21886 by @zhankang)
+- Input
+  - Optimize scss code (#21558 by @cheese-git)
+
+### 2.15.8
+
+*2022-04-12*
+
+#### Bug fixes
+
+- Drawer
+  - Fix appendToBody failure problem (#21264 by @cs1707)
+- Switch
+  - Fix toggling value problem(#19473 by @EdwinBetanc0urt)
+- Docs
+  - Fix input docs (#21723 by @justforuse)
+  - Fix DatePicker docs (#21663 by @justforuse)
+  - Fix Skeleton docs (#21601 by @yanwydxf)
+- Others
+  - Fix vue version (#21736 by @ckvv)
+
+#### Optimization
+
+- I18n
+  - add translation of Azerbaijani (#21012 by @ricardotondello)
+  - update translation of Slovenian (#21729 by @patik123)
+  - update translation of Slovak (#21711 by @sjaustirni )
+  - add translation of Icelandic (#21709 by @aronhr)
+  - add translation of Bengali (#21485 by @llwwtt)
+
+#### Others
+
+- Due to compatibility considerations, the PR on node-sass (#21019 by @linxsbox) of 2.15.7 release has been withdrawn and will be published in an appropriate version after re-evaluation.
+
+### 2.15.7
+
+*2021-11-18*
+
+#### Bug fixes
+
+- Select
+  - fix click icon triggering dropdown (#21314 by @dennyak47)
+  - fix keydown event when composition (#21336 by @bchen1029)
+- Badge
+  - fix type class when is-dot (#21308 by @adaex)
+- Form
+  - validate method reject error info (#21374 by @cs1707)
+- Table
+  - fix resizeObserver loop limit exceeded (#21255 by @tomieric)
+  - fix toggleAllSelection bug when table is empty (#21456 by @cs1707)
+  - optimize performance (#21330 by @cs1707)
+- Button
+  - fix disabled priority (#21375 by @cs1707)
+- Descriptions
+  - fix label slot bug (#21462 by @cs1707)
+- SASS
+  - replace node-sass with dart-sass (#21019 by @linxsbox)
+- Docs
+  - fix skeleton typos (#21408 by @zhhbstudio)
+
+### 2.15.6
+
+*2021-09-02*
+
+#### Bug fixes
+
+- Cascader
+  - fix a bug that makes the browser jitter in zoom mode (#21207 by @cs1707)
+  - optimize performance (#21231 by @cs1707)
+- Select
+  - fix long text overflow in multiple mode (#21237 by @cs1707)
+- Dropdown
+  - add disabled property (#21235 by @mshioda)
+- Radio
+  - fix checked state when browser go back (#21250 by @cs1707)
+- Descriptions
+  - fix type declaration (#21265 by @adaex)
+  - avoid table style conflict (#21254 by @adaex)
+- Drawer
+  - fix append to body (#21264 by @cs1707)
+- Local
+  - fix italian mistake (#21012 by @ricardotondello)
+
+### 2.15.5
+
+*2021-08-04*
+
+#### Bug fixes
+
+- Select
+  - fix resetInputHeight (#21201 by @cs1707)
+
+### 2.15.4
+
+*2021-08-03*
+
+#### New features
+
+- Descriptions 
+  - add description component (#21129 by @cs1707)
+- Result 
+  - add result component (#21171 by @cs1707)
+
+#### Bug fixes
+
+- Utils 
+  - fix isScroll (#21098 by @canvascat)
+- Translation 
+  - update it.js (#21133 by @bliberi)
+- RadioGroup 
+  - fix RadioGroup used in component causes exception #17908 (#20783 by @lceric)
+- Message 
+  - fix message[type] (#21088 by @cs1707)
+- Carousel 
+  - reset the timer when setActiveItem method is called (#20846 by @Nekojita1)
+- Cascader 
+  - fix emitPath (#21185 by @cs1707)
+- Select 
+  - fix select filterable bug (#17494 by @profore)
+  - fix a bug that makes the browser jitter in zoom mode (#21197 by @cs1707)
+- Tree 
+  - fix insertChild (#21194 by @cs1707)
+  
+### 2.15.3
+
+*2021-06-29*
+
+#### New features
+
+- Skeleton
+  - add skeleton component (#21038 by @cs1707)
+- Empty
+  - add empty component (#21080 by @cs1707)
+
+#### Bug fixes
+
+- Local
+  - fix week translations for hr locale (#21040 by @cs1707)
+- Table
+  - fix lazy load data (#21041 by @cs1707)
+- Docs
+  - fix form hide-required-asterisk description (#21045 by @cs1707)
+- Drawer:
+  - fix destroy (#20715 by @zj9495)
+- Row
+  - fix align top (#20963 by @cs1707)
+- Select
+  - fix the bug when the value is Boolean (#21052 by @cs1707)
+- Calendar
+  - fix first-day-of-week (#21057 by @cs1707)
+- Utils
+  - fix isScroll (#21065 by @cs1707)
+  - fix(utils.dom by @fw6)
+- TypeScript
+  - add CascaderPanel export type (#21070 by @qige2016)
+  - add spinner.d.ts (#21090 by @qige2016)
+
+### 2.15.2
+
+*2021-05-28*
+
+#### Bug fixes
+
+- Image
+  - fix z-index and keydown event add stopPropagation (#20859 by @cs1707)
+- Input
+  - fix show password cursor (#20870 by @cs1707)
+  - fix show password icon in edge (#20902 by @cs1707)
+- Carousel
+  - fix interval and scale bug (#20931 by @cs1707)
+- Cascader
+  - fix delete tag bug (#20939 by @cs1707)
+- Drawer
+  - add overflow auto (#20948 by @cs1707)
+- Others
+  - fix isFunction (#20912 by @cs1707)
+
+### 2.15.1
+
+*2021-02-23*
+
+#### Bug fixes
+
+- Drawer
+  - bugfix (by @cs1707)
+- Image
+  - fix incorrect image object fit ratio in IE (#19583 by @charlie0228)
+- Cascader
+  - fix cascader panel active path (#20730 by @cs1707)
+- Calendar 
+  - fix calendar component i18n bug (#20758 by @iamkun)
+- ColorPicker
+  - fix bugs (by @UxieVerity)
+
+#### Optimization
+
+- Doc
+  - update Axure resource v2.1.0 (by @iamkun)
+
+### 2.15.0
+
+*2021-01-15*
+
+#### Bug fixes
+
+- Select
+  - Fix placeholder i18n bug (#17644 by @nzh63)
+- Popconfirm
+  - Popconfirm i18n bug by @iamkun)
+- Drawer
+  - Fix focus bug (#20626 by @cs1707)
+- Image
+  - Preview optimization (#20652 by @cs1707)
+
+#### Optimization
+
+- Doc
+  - Fix typo in french translation of datetime-picker.md (#20543 by @lonk)
+  - Add format attribute description to the progress component (#20641 by @cs1707)
+
 ### 2.14.1
 
 *2020-11-11*

CHANGELOG.es.md

@@ -1,5 +1,358 @@
 ## Changelog
 
+### 2.15.14
+
+*2023-08-24*
+
+#### Bug fixes
+- Img
+  - Delete referrerpolicy prop (#22651 by @xinguanhua)
+#### Optimization
+- Docs
+  - Update readme and website example links (#22642 by @lyfeyaj)
+  - Update popper links (#22539 by @brizer)
+- I18n
+  - Update translation of Spanish (#22430 by @jcardus)
+  - Add sr-Latn translation (#22567 by @N-M)
+  - Update Uzbek translation (#22390 by @akahon)
+- Statistics
+  - Fix doc; Optimized code (#22384 by @webvs2)
+- Table
+  - Add highlight selection row (#22382 by @wangdaodao)
+
+### 2.15.13
+
+*2023-02-12*
+
+#### Bug fixes
+- Docs
+  - Fix Statistic docs (#22383 by @JUST-Limbo) 
+  - Fix Input docs (#22093 by @lm312)  
+  - Fix en-US docs (#22268 #22269 #22270 by @Hazel-Lin)  
+  - Fix Pagination docs (#22288 by @xujintai123)
+  - Fix: Links docs (#22370 by @itmier)    
+- Statistics
+  - fix slot display bug  (#22375 by @webvs2)
+- Chore
+  - missing web-type after publishing (#22271 by @loosheng)
+#### Optimization
+- InputNumber
+  - Fix touch one click trigger twice on the window touch pad (#22185 by @mrsai)
+- Image
+  - Add initialIndex prop (#22346 by @inkroom) 
+- Statistics
+  - Updated countdown feature to localize lodash Closes (#22260 by @webvs2)
+  - Update code and doc (#22276 by @webvs2)
+- Other
+  - fix web-types type props (#22281 by @whzxc)
+
+### 2.15.12
+
+*2022-11-16*
+
+#### Bug fixes
+- Statistic：
+  - Fixed the thousandth bit bug (#22252 by @webvs2)
+- Other
+  - Fix 2.15.11 element-theme-chalk publish fail bug
+
+### 2.15.11
+
+*2022-11-15*
+
+#### Bug fixes
+- Docs
+  - Fix Radio docs (#22178 by @bchen1029) 
+  - Fix Progress docs
+#### Optimization
+- I18n
+  - Update translation of Malaysian (#22185 by @z4q)
+  - Update translation of Norwegian (#22145 by @Barsnes)
+- Progress
+  - Add defineBackColor and textColor prop (#22089 by @lm312)
+- Statistics
+  - Add new component Statistics (#22159 by @webvs2)
+- Other
+  - Add Web Types to improve code assistance in WebStorm IDE and other JetBrains IDEs (#22135 by @piotrtomiak)
+
+### 2.15.10
+
+*2022-09-13*
+
+#### Bug fixes
+
+- DatePicker
+  - Fix props placement error (#21908 by @lqzhgood)
+- Loading
+  - Fix sticky DOM error (#22087 by @zzjjhh001)
+- Docs
+  - Fix Popover docs (#22083 by @lm312)
+  - Fix Skeleton docs (#22092 by @lm312)
+  - Fix DatePicker docs (#21970 by @guojiongwei)
+- Tree: 
+  - fix lazy-load default check problem (#21934 by @kiss-yu)
+
+#### Optimization
+
+- I18n
+  - Add translation of Sinhalese (#21936 by @sayuri-gi)
+  - Update translation of Spanish (#21924 by @jcardus)
+  - Add translation of Malaysian (#22028 by @iorange0411)
+  - Update translation of Swahili (#21904 by @Cholowao)
+- Utils
+  - update date-util.js (#22099 by @Due07)  
+- DatePicker
+  - add months And years type (#21918 by @akiko123456)
+
+### 2.15.9
+
+*2022-06-02*
+
+#### Bug fixes
+
+- Table
+  - Fix Tabl-header shake bug (#21863 by @bofeng)
+  - Fix when partial import  show `el-checkbox not imported` error (#21828 by @bobohuochai)
+- FormItem
+  - Fix  change rules  verification not reset bug (#21892 by @bofeng)
+- Cascader
+  - Fix change options unexpect error (#21759 by @louiebb)
+- Docs
+  - Fix Popover docs (#21843 by @lod61)
+  - Fix Calendar docs (#21814 by @GoJam11)
+  - Fix TimePicker docs (#21803 by @Alanscut)
+  - Fix DatePicker docs (#21877 by @Nirvanaiu)
+- Other
+  - Fix codepen display bug (#21863 by @bofeng)
+
+#### Optimization
+
+- I18n
+  - Add translation of Swahili (#21895 by @quilltouch)
+- Chore
+  - Use launch-editor-middleware in dev environment (#21633 by @polemices)
+- DatePicker & Cascader
+  - Optimize the dropdown animation direction (#21806 by @XivLaw)
+- Tooltip
+  - Optimize `getFirstElement` code (#21886 by @zhankang)
+- Input
+  - Optimize scss code (#21558 by @cheese-git)
+
+### 2.15.8
+
+*2022-04-12*
+
+#### Bug fixes
+
+- Drawer
+  - Fix appendToBody failure problem (#21264 by @cs1707)
+- Switch
+  - Fix toggling value problem(#19473 by @EdwinBetanc0urt)
+- Docs
+  - Fix input docs (#21723 by @justforuse)
+  - Fix DatePicker docs (#21663 by @justforuse)
+  - Fix Skeleton docs (#21601 by @yanwydxf)
+- Others
+  - Fix vue version (#21736 by @ckvv)
+
+#### Optimization
+
+- I18n
+  - add translation of Azerbaijani (#21012 by @ricardotondello)
+  - update translation of Slovenian (#21729 by @patik123)
+  - update translation of Slovak (#21711 by @sjaustirni )
+  - add translation of Icelandic (#21709 by @aronhr)
+  - add translation of Bengali (#21485 by @llwwtt)
+
+#### Others
+
+- Due to compatibility considerations, the PR on node-sass (#21019 by @linxsbox) of 2.15.7 release has been withdrawn and will be published in an appropriate version after re-evaluation.
+
+### 2.15.7
+
+*2021-11-18*
+
+#### Bug fixes
+
+- Select
+  - fix click icon triggering dropdown (#21314 by @dennyak47)
+  - fix keydown event when composition (#21336 by @bchen1029)
+- Badge
+  - fix type class when is-dot (#21308 by @adaex)
+- Form
+  - validate method reject error info (#21374 by @cs1707)
+- Table
+  - fix resizeObserver loop limit exceeded (#21255 by @tomieric)
+  - fix toggleAllSelection bug when table is empty (#21456 by @cs1707)
+  - optimize performance (#21330 by @cs1707)
+- Button
+  - fix disabled priority (#21375 by @cs1707)
+- Descriptions
+  - fix label slot bug (#21462 by @cs1707)
+- SASS
+  - replace node-sass with dart-sass (#21019 by @linxsbox)
+- Docs
+  - fix skeleton typos (#21408 by @zhhbstudio)
+
+### 2.15.6
+
+*2021-09-02*
+
+#### Bug fixes
+
+- Cascader
+  - fix a bug that makes the browser jitter in zoom mode (#21207 by @cs1707)
+  - optimize performance (#21231 by @cs1707)
+- Select
+  - fix long text overflow in multiple mode (#21237 by @cs1707)
+- Dropdown
+  - add disabled property (#21235 by @mshioda)
+- Radio
+  - fix checked state when browser go back (#21250 by @cs1707)
+- Descriptions
+  - fix type declaration (#21265 by @adaex)
+  - avoid table style conflict (#21254 by @adaex)
+- Drawer
+  - fix append to body (#21264 by @cs1707)
+- Local
+  - fix italian mistake (#21012 by @ricardotondello)
+
+### 2.15.5
+
+*2021-08-04*
+
+#### Bug fixes
+
+- Select
+  - fix resetInputHeight (#21201 by @cs1707)
+
+### 2.15.4
+
+*2021-08-03*
+
+#### New features
+
+- Descriptions 
+  - add description component (#21129 by @cs1707)
+- Result 
+  - add result component (#21171 by @cs1707)
+
+#### Bug fixes
+
+- Utils 
+  - fix isScroll (#21098 by @canvascat)
+- Translation 
+  - update it.js (#21133 by @bliberi)
+- RadioGroup 
+  - fix RadioGroup used in component causes exception #17908 (#20783 by @lceric)
+- Message 
+  - fix message[type] (#21088 by @cs1707)
+- Carousel 
+  - reset the timer when setActiveItem method is called (#20846 by @Nekojita1)
+- Cascader 
+  - fix emitPath (#21185 by @cs1707)
+- Select 
+  - fix select filterable bug (#17494 by @profore)
+  - fix a bug that makes the browser jitter in zoom mode (#21197 by @cs1707)
+- Tree 
+  - fix insertChild (#21194 by @cs1707)
+
+### 2.15.3
+
+*2021-06-29*
+
+#### New features
+
+- Skeleton
+  - add skeleton component (#21038 by @cs1707)
+- Empty
+  - add empty component (#21080 by @cs1707)
+
+#### Bug fixes
+
+- Local
+  - fix week translations for hr locale (#21040 by @cs1707)
+- Table
+  - fix lazy load data (#21041 by @cs1707)
+- Docs
+  - fix form hide-required-asterisk description (#21045 by @cs1707)
+- Drawer:
+  - fix destroy (#20715 by @zj9495)
+- Row
+  - fix align top (#20963 by @cs1707)
+- Select
+  - fix the bug when the value is Boolean (#21052 by @cs1707)
+- Calendar
+  - fix first-day-of-week (#21057 by @cs1707)
+- Utils
+  - fix isScroll (#21065 by @cs1707)
+  - fix(utils.dom by @fw6)
+- TypeScript
+  - add CascaderPanel export type (#21070 by @qige2016)
+  - add spinner.d.ts (#21090 by @qige2016)
+  
+### 2.15.2
+
+*2021-05-28*
+
+#### Bug fixes
+
+- Image
+  - fix z-index and keydown event add stopPropagation (#20859 by @cs1707)
+- Input
+  - fix show password cursor (#20870 by @cs1707)
+  - fix show password icon in edge (#20902 by @cs1707)
+- Carousel
+  - fix interval and scale bug (#20931 by @cs1707)
+- Cascader
+  - fix delete tag bug (#20939 by @cs1707)
+- Drawer
+  - add overflow auto (#20948 by @cs1707)
+- Others
+  - fix isFunction (#20912 by @cs1707)
+
+### 2.15.1
+
+*2021-02-23*
+
+#### Bug fixes
+
+- Drawer
+  - bugfix (by @cs1707)
+- Image
+  - fix incorrect image object fit ratio in IE (#19583 by @charlie0228)
+- Cascader
+  - fix cascader panel active path (#20730 by @cs1707)
+- Calendar 
+  - fix calendar component i18n bug (#20758 by @iamkun)
+- ColorPicker
+  - fix bugs (by @UxieVerity)
+
+#### Optimization
+
+- Doc
+  - update Axure resource v2.1.0 (by @iamkun)
+### 2.15.0
+
+*2021-01-15*
+
+#### Bug fixes
+
+- Select
+  - Fix placeholder i18n bug (#17644 by @nzh63)
+- Popconfirm
+  - Popconfirm i18n bug by @iamkun
+- Drawer
+  - Fix focus bug (#20626 by @cs1707)
+- Image
+  - Preview optimization (#20652 by @cs1707)
+
+#### Optimization
+
+- Doc
+  - Fix typo in french translation of datetime-picker.md (#20543 by @lonk)
+  - Add format attribute description to the progress component (#20641 by @cs1707)
+
 ### 2.14.1
 
 *2020-11-11*

CHANGELOG.fr-FR.md

@@ -1,5 +1,359 @@
 ## Changelog
 
+### 2.15.14
+
+*2023-08-24*
+
+#### Bug fixes
+- Img
+  - Delete referrerpolicy prop (#22651 by @xinguanhua)
+#### Optimization
+- Docs
+  - Update readme and website example links (#22642 by @lyfeyaj)
+  - Update popper links (#22539 by @brizer)
+- I18n
+  - Update translation of Spanish (#22430 by @jcardus)
+  - Add sr-Latn translation (#22567 by @N-M)
+  - Update Uzbek translation (#22390 by @akahon)
+- Statistics
+  - Fix doc; Optimized code (#22384 by @webvs2)
+- Table
+  - Add highlight selection row (#22382 by @wangdaodao)
+
+### 2.15.13
+
+*2023-02-12*
+
+#### Bug fixes
+- Docs
+  - Fix Statistic docs (#22383 by @JUST-Limbo) 
+  - Fix Input docs (#22093 by @lm312)  
+  - Fix en-US docs (#22268 #22269 #22270 by @Hazel-Lin)  
+  - Fix Pagination docs (#22288 by @xujintai123)
+  - Fix: Links docs (#22370 by @itmier)    
+- Statistics
+  - fix slot display bug  (#22375 by @webvs2)
+- Chore
+  - missing web-type after publishing (#22271 by @loosheng)
+#### Optimization
+- InputNumber
+  - Fix touch one click trigger twice on the window touch pad (#22185 by @mrsai)
+- Image
+  - Add initialIndex prop (#22346 by @inkroom) 
+- Statistics
+  - Updated countdown feature to localize lodash Closes (#22260 by @webvs2)
+  - Update code and doc (#22276 by @webvs2)
+- Other
+  - fix web-types type props (#22281 by @whzxc)
+
+### 2.15.12
+
+*2022-11-16*
+
+#### Bug fixes
+- Statistic：
+  - Fixed the thousandth bit bug (#22252 by @webvs2)
+- Other
+  - Fix 2.15.11 element-theme-chalk publish fail bug
+
+### 2.15.11
+
+*2022-11-15*
+
+#### Bug fixes
+- Docs
+  - Fix Radio docs (#22178 by @bchen1029) 
+  - Fix Progress docs
+#### Optimization
+- I18n
+  - Update translation of Malaysian (#22185 by @z4q)
+  - Update translation of Norwegian (#22145 by @Barsnes)
+- Progress
+  - Add defineBackColor and textColor prop (#22089 by @lm312)
+- Statistics
+  - Add new component Statistics (#22159 by @webvs2)
+- Other
+  - Add Web Types to improve code assistance in WebStorm IDE and other JetBrains IDEs (#22135 by @piotrtomiak)
+
+### 2.15.10
+
+*2022-09-13*
+
+#### Bug fixes
+
+- DatePicker
+  - Fix props placement error (#21908 by @lqzhgood)
+- Loading
+  - Fix sticky DOM error (#22087 by @zzjjhh001)
+- Docs
+  - Fix Popover docs (#22083 by @lm312)
+  - Fix Skeleton docs (#22092 by @lm312)
+  - Fix DatePicker docs (#21970 by @guojiongwei)
+- Tree: 
+  - fix lazy-load default check problem (#21934 by @kiss-yu)
+
+#### Optimization
+
+- I18n
+  - Add translation of Sinhalese (#21936 by @sayuri-gi)
+  - Update translation of Spanish (#21924 by @jcardus)
+  - Add translation of Malaysian (#22028 by @iorange0411)
+  - Update translation of Swahili (#21904 by @Cholowao)
+- Utils
+  - update date-util.js (#22099 by @Due07)  
+- DatePicker
+  - add months And years type (#21918 by @akiko123456)
+
+### 2.15.9
+
+*2022-06-02*
+
+#### Bug fixes
+
+- Table
+  - Fix Tabl-header shake bug (#21863 by @bofeng)
+  - Fix when partial import  show `el-checkbox not imported` error (#21828 by @bobohuochai)
+- FormItem
+  - Fix  change rules  verification not reset bug (#21892 by @bofeng)
+- Cascader
+  - Fix change options unexpect error (#21759 by @louiebb)
+- Docs
+  - Fix Popover docs (#21843 by @lod61)
+  - Fix Calendar docs (#21814 by @GoJam11)
+  - Fix TimePicker docs (#21803 by @Alanscut)
+  - Fix DatePicker docs (#21877 by @Nirvanaiu)
+- Other
+  - Fix codepen display bug (#21863 by @bofeng)
+
+#### Optimization
+
+- I18n
+  - Add translation of Swahili (#21895 by @quilltouch)
+- Chore
+  - Use launch-editor-middleware in dev environment (#21633 by @polemices)
+- DatePicker & Cascader
+  - Optimize the dropdown animation direction (#21806 by @XivLaw)
+- Tooltip
+  - Optimize `getFirstElement` code (#21886 by @zhankang)
+- Input
+  - Optimize scss code (#21558 by @cheese-git)
+
+### 2.15.8
+
+*2022-04-12*
+
+#### Bug fixes
+
+- Drawer
+  - Fix appendToBody failure problem (#21264 by @cs1707)
+- Switch
+  - Fix toggling value problem(#19473 by @EdwinBetanc0urt)
+- Docs
+  - Fix input docs (#21723 by @justforuse)
+  - Fix DatePicker docs (#21663 by @justforuse)
+  - Fix Skeleton docs (#21601 by @yanwydxf)
+- Others
+  - Fix vue version (#21736 by @ckvv)
+
+#### Optimization
+
+- I18n
+  - add translation of Azerbaijani (#21012 by @ricardotondello)
+  - update translation of Slovenian (#21729 by @patik123)
+  - update translation of Slovak (#21711 by @sjaustirni )
+  - add translation of Icelandic (#21709 by @aronhr)
+  - add translation of Bengali (#21485 by @llwwtt)
+
+#### Others
+
+- Due to compatibility considerations, the PR on node-sass (#21019 by @linxsbox) of 2.15.7 release has been withdrawn and will be published in an appropriate version after re-evaluation.
+
+### 2.15.7
+
+*2021-11-18*
+
+#### Bug fixes
+
+- Select
+  - fix click icon triggering dropdown (#21314 by @dennyak47)
+  - fix keydown event when composition (#21336 by @bchen1029)
+- Badge
+  - fix type class when is-dot (#21308 by @adaex)
+- Form
+  - validate method reject error info (#21374 by @cs1707)
+- Table
+  - fix resizeObserver loop limit exceeded (#21255 by @tomieric)
+  - fix toggleAllSelection bug when table is empty (#21456 by @cs1707)
+  - optimize performance (#21330 by @cs1707)
+- Button
+  - fix disabled priority (#21375 by @cs1707)
+- Descriptions
+  - fix label slot bug (#21462 by @cs1707)
+- SASS
+  - replace node-sass with dart-sass (#21019 by @linxsbox)
+- Docs
+  - fix skeleton typos (#21408 by @zhhbstudio)
+
+### 2.15.6
+
+*2021-09-02*
+
+#### Bug fixes
+
+- Cascader
+  - fix a bug that makes the browser jitter in zoom mode (#21207 by @cs1707)
+  - optimize performance (#21231 by @cs1707)
+- Select
+  - fix long text overflow in multiple mode (#21237 by @cs1707)
+- Dropdown
+  - add disabled property (#21235 by @mshioda)
+- Radio
+  - fix checked state when browser go back (#21250 by @cs1707)
+- Descriptions
+  - fix type declaration (#21265 by @adaex)
+  - avoid table style conflict (#21254 by @adaex)
+- Drawer
+  - fix append to body (#21264 by @cs1707)
+- Local
+  - fix italian mistake (#21012 by @ricardotondello)
+
+### 2.15.5
+
+*2021-08-04*
+
+#### Bug fixes
+
+- Select
+  - fix resetInputHeight (#21201 by @cs1707)
+
+### 2.15.4
+
+*2021-08-03*
+
+#### New features
+
+- Descriptions 
+  - add description component (#21129 by @cs1707)
+- Result 
+  - add result component (#21171 by @cs1707)
+
+#### Bug fixes
+
+- Utils 
+  - fix isScroll (#21098 by @canvascat)
+- Translation 
+  - update it.js (#21133 by @bliberi)
+- RadioGroup 
+  - fix RadioGroup used in component causes exception #17908 (#20783 by @lceric)
+- Message 
+  - fix message[type] (#21088 by @cs1707)
+- Carousel 
+  - reset the timer when setActiveItem method is called (#20846 by @Nekojita1)
+- Cascader 
+  - fix emitPath (#21185 by @cs1707)
+- Select 
+  - fix select filterable bug (#17494 by @profore)
+  - fix a bug that makes the browser jitter in zoom mode (#21197 by @cs1707)
+- Tree 
+  - fix insertChild (#21194 by @cs1707)
+
+### 2.15.3
+
+*2021-06-29*
+
+#### New features
+
+- Skeleton
+  - add skeleton component (#21038 by @cs1707)
+- Empty
+  - add empty component (#21080 by @cs1707)
+
+#### Bug fixes
+
+- Local
+  - fix week translations for hr locale (#21040 by @cs1707)
+- Table
+  - fix lazy load data (#21041 by @cs1707)
+- Docs
+  - fix form hide-required-asterisk description (#21045 by @cs1707)
+- Drawer:
+  - fix destroy (#20715 by @zj9495)
+- Row
+  - fix align top (#20963 by @cs1707)
+- Select
+  - fix the bug when the value is Boolean (#21052 by @cs1707)
+- Calendar
+  - fix first-day-of-week (#21057 by @cs1707)
+- Utils
+  - fix isScroll (#21065 by @cs1707)
+  - fix(utils.dom by @fw6)
+- TypeScript
+  - add CascaderPanel export type (#21070 by @qige2016)
+  - add spinner.d.ts (#21090 by @qige2016)
+  
+### 2.15.2
+
+*2021-05-28*
+
+#### Bug fixes
+
+- Image
+  - fix z-index and keydown event add stopPropagation (#20859 by @cs1707)
+- Input
+  - fix show password cursor (#20870 by @cs1707)
+  - fix show password icon in edge (#20902 by @cs1707)
+- Carousel
+  - fix interval and scale bug (#20931 by @cs1707)
+- Cascader
+  - fix delete tag bug (#20939 by @cs1707)
+- Drawer
+  - add overflow auto (#20948 by @cs1707)
+- Others
+  - fix isFunction (#20912 by @cs1707)
+
+### 2.15.1
+
+*2021-02-23*
+
+#### Bug fixes
+
+- Drawer
+  - bugfix (by @cs1707)
+- Image
+  - fix incorrect image object fit ratio in IE (#19583 by @charlie0228)
+- Cascader
+  - fix cascader panel active path (#20730 by @cs1707)
+- Calendar 
+  - fix calendar component i18n bug (#20758 by @iamkun)
+- ColorPicker
+  - fix bugs (by @UxieVerity)
+
+#### Optimization
+
+- Doc
+  - update Axure resource v2.1.0 (by @iamkun)
+
+### 2.15.0
+
+*2021-01-15*
+
+#### Bug fixes
+
+- Select
+  - Fix placeholder i18n bug (#17644 by @nzh63)
+- Popconfirm
+  - Popconfirm i18n bug by @iamkun
+- Drawer
+  - Fix focus bug (#20626 by @cs1707)
+- Image
+  - Preview optimization (#20652 by @cs1707)
+
+#### Optimization
+
+- Doc
+  - Fix typo in french translation of datetime-picker.md (#20543 by @lonk)
+  - Add format attribute description to the progress component (#20641 by @cs1707)
+
 ### 2.14.1
 
 *2020-11-11*

CHANGELOG.zh-CN.md

@@ -1,5 +1,358 @@
 ## 更新日志
 
+### 2.15.14
+
+*2023-08-24*
+
+#### Bug 修复
+- Img
+  - 删除 referrerpolicy 属性 (#22651 by @xinguanhua)
+#### 优化
+- Docs
+  - 更新 readme and website example links (#22642 by @lyfeyaj)
+  - 更新 popper 官方文档链接 (#22539 by @brizer)
+- I18n
+  - 更新 西班牙语 翻译 (#22430 by @jcardus)
+  - 新增 塞尔维亚语（拉丁) 翻译 (#22567 by @N-M)
+  - 更新 乌兹别克语 翻译 (#22390 by @akahon)
+- Statistics
+  - 文档更新; 代码优化 (#22384 by @webvs2)
+- Table
+  - 增加高亮选中行属性 (#22382 by @wangdaodao)
+
+### 2.15.13
+
+*2023-02-12*
+
+#### Bug 修复
+- Docs
+  - 修复 Statistic 文案 (#22383 by @JUST-Limbo) 
+  - 修复 Input 文案 (#22093 by @lm312)  
+  - 修复 en-US 文案 (#22268 #22269 #22270 by @Hazel-Lin)  
+  - 修复 Pagination 文案 (#22288 by @xujintai123)  
+  - 修复 Links 文案 (#22370 by @itmier)  
+- Statistics
+  - 修复 slot 显示问题 (#22375 by @webvs2)
+- Chore
+  - 修复 web-type 文件丢失问题 (#22271 by @loosheng)
+#### 优化
+- InputNumber
+  - windows触摸屏响应优化 (#22185 by @mrsai)
+- Image
+  - 新增 initialIndex 属性 (#22346 by @inkroom) 
+- Statistics
+  - countdown 特性更新 (#22260 by @webvs2)
+  - 代码优化及doc更新 (#22276 by @webvs2)
+- 其他
+  - web-type代码优化 (#22281 by @whzxc)
+
+### 2.15.12
+
+*2022-11-16*
+
+#### Bug 修复
+- Statistics
+  - 修改 千分位 问题 (#22252 by @webvs2)
+- 其他
+  - 修复 2.15.11版本element-theme-chalk未成功发布 问题
+
+### 2.15.11
+
+*2022-11-15*
+
+#### Bug 修复
+- Docs
+  - 修复 Radio 文案 (#22178 by @bchen1029)
+  - 修复 Progress 文案 
+#### 优化
+- I18n
+  - 更新 马来西亚语 翻译 (#22185 by @z4q)
+  - 更新 挪威语 翻译 (#22145 by @Barsnes)
+- Progress
+  - 新增 defineBackColor 和 textColor 属性 (#22089 by @lm312) 
+- Statistics
+  - 新增组件 Statistics (#22159 by @webvs2)
+- Other
+  - 改进WebStorm IDE和其他JetBrains IDE中的代码帮助 (#22135 by @piotrtomiak)
+
+### 2.15.10
+
+*2022-09-13*
+
+#### Bug 修复
+
+- DatePicker
+  - 修复 props placement 报错信息 问题 (#21908 by @lqzhgood)
+- Loading
+  - 修复 使用 Loading 的DOM元素 sticky失效 问题 (#22087 by @zzjjhh001)
+- Docs
+  - 修复 Popover 文案 (#22083 by @lm312)
+  - 修复 Skeleton 文案 (#22092 by @lm312)
+  - 修复 DatePicker 文案 (#21970 by @guojiongwei)
+- Tree
+  - 修复 懒加载默认选中 问题 (#21934 by @kiss-yu)
+
+#### 优化
+
+- I18n
+  - 新增 僧伽罗语 翻译 (#21936 by @sayuri-gi)
+  - 更新 西班牙语 翻译 (#21924 by @jcardus)
+  - 新增 马来西亚语 翻译 (#22028 by @iorange0411)
+  - 更新 斯瓦希里语 翻译 (#21904 by @Cholowao)
+- Utils
+  - 更新 date-util.js (#22099 by @Due07)
+- DatePicker
+  - 新增 months 和 years 类型 (#21918 by @akiko123456)
+
+### 2.15.9
+
+*2022-06-02*
+
+#### Bug 修复
+
+- Table
+  - 表头抖动修复 (#21863 by @bofeng)
+  - 按需引用时 `el-checkbox not imported` 修复 (#21828 by @bobohuochai)
+- FormItem
+  - 修复 rules 切换为 null 时校验未重置 问题 (#21892 by @bofeng)
+- Cascader
+  - 修复 切换 options 时错误报错信息 问题 (#21759 by @louiebb)
+- Docs
+  - 修复 Popover 文案 (#21843 by @lod61)
+  - 修复 Calendar 文案 (#21814 by @GoJam11)
+  - 修复 TimePicker 文案 (#21803 by @Alanscut)
+  - 修复 DatePicker 文案 (#21877 by @Nirvanaiu)
+- 其他
+  - 官网在线演示功能修复 (#21863 by @bofeng)
+
+#### 优化
+
+- I18n
+  - 新增 斯瓦希里语 翻译 (#21895 by @quilltouch)
+- Chore
+  - 本地开发时可从 devTools 工具跳转源代码 (#21633 by @polemices)
+- DatePicker & Cascader
+  - 弹窗方向优化 (#21806 by @XivLaw)
+- Tooltip
+  - 优化 `getFirstElement` 代码 (#21886 by @zhankang)
+- Input
+  - 优化 scss 代码 (#21558 by @cheese-git)
+
+### 2.15.8
+
+*2022-04-12*
+
+#### Bug 修复
+
+- Drawer
+  - 修复 appendToBody 失效问题 (#21264 by @cs1707)
+- Switch
+  - 修复 toggling value 问题(#19473 by @EdwinBetanc0urt)
+- Docs
+  - 修复 input 文案 (#21723 by @justforuse)
+  - 修复 DatePicker 文案 (#21663 by @justforuse)
+  - 修复 Skeleton 文案 (#21601 by @yanwydxf)
+- 其他
+  - 修复 vue 版本(#21736 by @ckvv)
+
+#### 优化
+
+- I18n
+  - 新增 阿塞拜疆语 翻译 (#21012 by @ricardotondello)
+  - 更新 斯洛文尼亚语 翻译 (#21729 by @patik123)
+  - 更新 斯洛伐克语 翻译 (#21711 by @sjaustirni )
+  - 新增 冰岛语 的翻译 (#21709 by @aronhr)
+  - 新增 孟加拉 语的翻译 (#21485 by @llwwtt)
+
+#### 其他
+
+- 因兼容性考虑，撤回2.15.7关于node-sass的更新(#21019 by @linxsbox)，重新评估后会在后续合适版本上线
+
+### 2.15.7
+
+*2021-11-18*
+
+#### Bug 修复
+
+- Select
+  - 修复 filter 模式下，点击图标不能触发下拉的 bug (#21314 by @dennyak47)
+  - 修复 composition 模式下 keydown 事件 (#21336 by @bchen1029)
+- Badge
+  - 修复 is-dot class (#21308 by @adaex)
+- Form
+  - validate 方法返回错误信息 (#21374 by @cs1707)
+- Table
+  - 修复 resizeObserver loop limit exceeded (#21255 by @tomieric)
+  - 修复 toggleAllSelection (#21456 by @cs1707)
+  - 优化 table 性能 (#21330 by @cs1707)
+- Button
+  - 修复 disabled 优先级 (#21375 by @cs1707)
+- Descriptions
+  - 修复 label slot bug (#21462 by @cs1707)
+- SASS
+  - node-sass 替换为 dart-sass (#21019 by @linxsbox)
+- Docs
+  - 修复 skeleton 文案 (#21408 by @zhhbstudio)
+
+### 2.15.6
+
+*2021-09-02*
+
+#### Bug 修复
+
+- Cascader
+  - 修复浏览器缩放模式下抖动的 bug (#21207 by @cs1707)
+  - 优化性能 (#21231 by @cs1707)
+- Select
+  - 修复多选模式下文字溢出的 bug (#21237 by @cs1707)
+- Dropdown
+  - 增加 disabled 属性 (#21235 by @mshioda)
+- Radio
+  - 修复浏览器返回后保留状态的 bug (#21250 by @cs1707)
+- Descriptions
+  - 修复类型定义 (#21265 by @adaex)
+  - 修复与表格组件混用样式冲突的问题 (#21254 by @adaex)
+- Drawer
+  - 修复 append-to-body (#21264 by @cs1707)
+- Local
+  - 修复 italian 翻译错误 (#21012 by @ricardotondello)
+
+### 2.15.5
+
+*2021-08-04*
+
+#### Bug 修复
+
+- Select
+  - 修复 resetInputHeight 报错的 bug (#21201 by @cs1707)
+
+### 2.15.4
+
+*2021-08-03*
+
+#### 新特性
+
+- Descriptions
+  - 新增 Descriptions 组件 (#21129 by @cs1707)
+- Result
+  - 新增 Result 组件 (#21171 by @cs1707)
+
+#### Bug 修复
+
+- Utils
+  - 修复 isScroll (#21098 by @canvascat)
+- Translation
+  - 更新 it.js (#21133 by @bliberi)
+- RadioGroup
+  - 修复 RadioGroup 与 component 兼容的 bug (#20783 by @lceric)
+- Message
+  - 修复 message[type] (#21088 by @cs1707)
+- Carousel
+  - 修复 setActiveItem 重置计时 (#20846 by @Nekojita1)
+- Cascader
+  - 修复 emitPath (#21185 by @cs1707)
+- Select
+  - 修复 filterable bug (#17494 by @profore)
+  - 修复浏览器缩放模式下抖动的 bug (#21197 by @cs1707)
+- Tree
+  - 修复 insertChild (#21194 by @cs1707)
+
+### 2.15.3
+
+*2021-06-29*
+#### 新特性
+
+- Skeleton
+  - 新增 Skeleton 组件 (#21038 by @cs1707)
+- Empty
+  - 新增 Empty 组件 (#21080 by @cs1707)
+
+#### Bug 修复
+
+- Local
+  - 修复 hr 语言 week 翻译 (#21040 by @cs1707)
+- Table
+  - 修复 lazy load data (#21041 by @cs1707)
+- Docs
+  - 修改 form 组件 hide-required-asterisk 描述 (#21045 by @cs1707)
+- Drawer:
+  - 修复 destroy (#20715 by @zj9495)
+- Row
+  - 修复 align top (#20963 by @cs1707)
+- Select
+  - 修复 value 为 Boolean 类型的bug (#21052 by @cs1707)
+- Calendar
+  - 修复 first-day-of-week (#21057 by @cs1707)
+- Utils
+  - 修复 fix isScroll (#21065 by @cs1707)
+  - 修复 (utils.dom by @fw6)
+- TypeScript
+  - 增加 CascaderPanel 类型导出 (#21070 by @qige2016)
+  - 增加 spinner.d.ts (#21090 by @qige2016)
+
+### 2.15.2
+
+*2021-05-28*
+
+#### Bug 修复
+
+- Image
+  - 修复 z-index 增加 keydown 事件 添加 stopPropagation (#20859 by @cs1707)
+- Input
+  - 修复 password cursor 展示 (#20870 by @cs1707)
+  - 修复 password icon 在 edge 下的展示 (#20902 by @cs1707)
+- Carousel
+  - 修复 interval 和 scale bug (#20931 by @cs1707)
+- Cascader
+  - 修复 delete tag bug (#20939 by @cs1707)
+- Drawer
+  - 支持 overflow auto (#20948 by @cs1707)
+- 其他
+  - 修复 isFunction (#20912 by @cs1707)
+
+### 2.15.1
+
+*2021-02-23*
+
+#### Bug 修复
+
+- Drawer
+  - 修复 Drawer bug (by @cs1707)
+- Image
+  - 修复 image object fit ratio 在 IE 下的 bug  (#19583 by @charlie0228)
+- Cascader
+  - 修复 cascader panel active path (#20730 by @cs1707)
+- Calendar 
+  - 修复 calendar 国际化 bug (#20758 by @iamkun)
+- ColorPicker
+  - 修复 bugs (by @UxieVerity)
+
+#### 优化
+
+- Doc
+  - 更新 Axure 设计资源 v2.1.0 (by @iamkun)
+
+### 2.15.0
+
+*2021-01-15*
+
+#### Bug 修复
+
+- Select
+  - 修复 placeholder 国际化 bug (#17644 by @nzh63)
+- Popconfirm
+  - 修复 Popconfirm 国际化 bug by @iamkun
+- Drawer
+  - 修复 focus bug (#20626 by @cs1707)
+- Image
+  - 图片预览优化 (#20652 by @cs1707)
+
+#### 优化
+
+- Doc
+  - 更新法语文档 datetime-picker.md (#20543 by @lonk)
+  - 更新 Progress 组件文档 (#20641 by @cs1707)
+
 ### 2.14.1
 
 *2020-11-11*

README.md

@@ -38,14 +38,16 @@
 
 > A Vue.js 2.0 UI Toolkit for Web.
 
-Element will stay with Vue 2.x 
+Element will stay with Vue 2.x
 
-For Vue 3.0, we recommend using [Element Plus](https://github.com/element-plus/element-plus) from the same team
+For Vue 3.0, we recommend using [Element Plus](https://github.com/element-plus/element-plus)(Element Plus is a community develop project)
+
+For MiniProgram development, we recommend using [MorJS](https://github.com/eleme/morjs)
 
 ## Links
 - Homepage and documentation
   - [International users](http://element.eleme.io/#/en-US)
-  - [Chinese users](http://element-cn.eleme.io/#/zh-CN)
+  - [Chinese users](http://element.eleme.io/#/zh-CN)
   - [Spanish users](http://element.eleme.io/#/es)
   - [French users](http://element.eleme.io/#/fr-FR)
 - [awesome-element](https://github.com/ElementUI/awesome-element)

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.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.11': '2.4', '2.5.4': '2.5', '2.6.3': '2.6', '2.7.2': '2.7', '2.8.2': '2.8', '2.9.2': '2.9', '2.10.1': '2.10', '2.11.1': '2.11', '2.12.0': '2.12', '2.13.2': '2.13' };
-if (!content[version]) content[version] = '2.14';
+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', '2.4.11': '2.4', '2.5.4': '2.5', '2.6.3': '2.6', '2.7.2': '2.7', '2.8.2': '2.8', '2.9.2': '2.9', '2.10.1': '2.10', '2.11.1': '2.11', '2.12.0': '2.12', '2.13.2': '2.13', '2.14.1': '2.14' };
+if (!content[version]) content[version] = '2.15';
 fs.writeFileSync(path.resolve(__dirname, '../../examples/versions.json'), JSON.stringify(content));

build/config.js

@@ -46,4 +46,4 @@ exports.vue = {
   amd: 'vue'
 };
 
-exports.jsexclude = /node_modules|utils\/popper\.js|utils\/date\.js/;
+exports.jsexclude = /node_modules|utils\/popper\.js|utils\/date\.js|utils\/lodash\.js/;

build/deploy-ci.sh

@@ -40,7 +40,7 @@ if [ "$TRAVIS_TAG" ]; then
   # build sub folder
   echo $TRAVIS_TAG
 
-  SUB_FOLDER='2.14'
+  SUB_FOLDER='2.15'
   mkdir $SUB_FOLDER
   rm -rf *.js *.css *.map static
   rm -rf $SUB_FOLDER/**

build/deploy-faas.sh

@@ -6,7 +6,7 @@ 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.14'
+SUB_FOLDER='2.15'
 mkdir -p $SUB_FOLDER
 rm -rf *.js *.css *.map static
 rm -rf $SUB_FOLDER/**
@@ -15,5 +15,5 @@ cp -rf ../../examples/element-ui/** $SUB_FOLDER/
 cd ../..
 
 # deploy domestic site
-faas deploy alpha -P element
+faas deploy daily -P element
 rm -rf temp_web

build/webpack.demo.js

@@ -7,6 +7,7 @@ const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const launchEditorMiddleware = require('launch-editor-middleware');
 
 const config = require('./config');
 
@@ -33,7 +34,16 @@ const webpackConfig = {
     host: '0.0.0.0',
     port: 8085,
     publicPath: '/',
-    hot: true
+    hot: true,
+    before: (app) => {
+      /*
+       * 编辑器类型 :此处的指令表示的时各个各个编辑器在cmd或terminal中的命令
+       * webstorm
+       * code // vscode
+       * idea
+      */
+      app.use('/__open-in-editor', launchEditorMiddleware('code'));
+    }
   },
   performance: {
     hints: false

components.json

@@ -80,5 +80,12 @@
   "cascader-panel": "./packages/cascader-panel/index.js",
   "avatar": "./packages/avatar/index.js",
   "drawer": "./packages/drawer/index.js",
-  "popconfirm": "./packages/popconfirm/index.js"
+  "statistic": "./packages/statistic/index.js",
+  "popconfirm": "./packages/popconfirm/index.js",
+  "skeleton": "./packages/skeleton/index.js",
+  "skeleton-item": "./packages/skeleton-item/index.js",
+  "empty": "./packages/empty/index.js",
+  "descriptions": "./packages/descriptions/index.js",
+  "descriptions-item": "./packages/descriptions-item/index.js",
+  "result": "./packages/result/index.js"
 }

examples/components/demo-block.vue

@@ -205,7 +205,7 @@
       goCodepen() {
         // since 2.6.2 use code rather than jsfiddle https://blog.codepen.io/documentation/api/prefill/
         const { script, html, style } = this.codepen;
-        const resourcesTpl = '<scr' + 'ipt src="//unpkg.com/vue/dist/vue.js"></scr' + 'ipt>' +
+        const resourcesTpl = '<scr' + 'ipt src="//unpkg.com/vue@2/dist/vue.js"></scr' + 'ipt>' +
         '\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>`;

examples/components/footer.vue

@@ -10,6 +10,7 @@
         <a :href="'/#/' + lang + '/component/custom-theme'" class="footer-main-link" target="_blank">{{ langConfig.theme }}</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>
+        <a href="https://github.com/eleme/morjs" class="footer-main-link" target="_blank">MorJS</a>
       </div>
       <div class="footer-main">
         <h4>{{ langConfig.community }}</h4>
@@ -27,8 +28,17 @@
           width="120"
           popper-class="footer-popover"
           trigger="hover">
-          <div class="footer-popover-title">{{ langConfig.eleme }} UED</div>
-          <img src="../assets/images/qrcode.png" alt="">
+          <div class="footer-popover-title">{{ langConfig.elemeTech }}</div>
+          <img src="https://gw.alicdn.com/imgextra/i4/O1CN01dBDgJP1t4R3qikGBP_!!6000000005848-0-tps-344-344.jpg" alt="">
+        </el-popover>
+        <el-popover
+          ref="weixin"
+          placement="top"
+          width="120"
+          popper-class="footer-popover"
+          trigger="hover">
+          <div class="footer-popover-title">{{ langConfig.elemeDesign }}</div>
+          <img src="https://gw.alicdn.com/imgextra/i4/O1CN015ha1O71yg3g1QaKEi_!!6000000006607-0-tps-1280-1280.jpg" alt="">
         </el-popover>
         <i class="doc-icon-weixin elementdoc" v-popover:weixin></i>
         <a href="https://github.com/elemefe" target="_blank">
@@ -134,7 +144,7 @@
     }
 
     img {
-      size: 100px;
+      width: 100px;
       margin: 10px;
     }
   }

examples/components/header.vue

@@ -3,6 +3,21 @@
     height: 80px;
   }
 
+  #v3-banner {
+    background-color: #409EFF;
+    min-height: 30px;
+    padding: 5px 60px;
+    z-index: 19;
+    box-sizing: border-box;
+    text-align: center;
+    color: #eee;
+  }
+
+  #v3-banner a {
+    color: #FFF;
+    font-weight: bold;
+  }
+
   .header {
     height: 80px;
     background-color: #fff;
@@ -97,11 +112,11 @@
       list-style: none;
       position: relative;
       cursor: pointer;
-    
+
       &.nav-algolia-search {
         cursor: default;
       }
-    
+
       &.lang-item,
       &:last-child {
         cursor: default;
@@ -195,7 +210,7 @@
       }
     }
   }
-  
+
   .nav-dropdown-list {
     width: auto;
   }
@@ -215,7 +230,7 @@
         &:last-child {
           margin-left: 10px;
         }
-         
+
         a {
           padding: 0 5px;
         }
@@ -239,11 +254,11 @@
 
         &.lang-item {
           height: 100%;
-         
+
           .nav-lang {
             display: flex;
             align-items: center;
-            
+
             span {
               padding-bottom: 0;
             }
@@ -267,6 +282,18 @@
 </style>
 <template>
   <div class="headerWrapper">
+    <div id="v3-banner" v-if="isHome">
+      <template v-if="lang === 'zh-CN'">
+        您正在浏览基于 Vue 2.x 的文档;
+        <a href="https://element-plus.org/#/zh-CN">点击查看 Vue 3.x 版本。</a>
+        饿了么开源了自研多端框架 MorJS，
+        <a href="https://github.com/eleme/morjs">欢迎点击查看或试用 👏🏻</a>
+      </template>
+      <template v-else>
+        You’re browsing the documentation of Element UI for Vue 2.x version.
+        <a href="https://element-plus.org">Click here</a> for Vue 3.x version
+      </template>
+    </div>
     <header class="header" ref="header">
       <div class="container">
         <h1><router-link :to="`/${ lang }`">
@@ -301,7 +328,7 @@
               :to="`/${ lang }/component`">{{ langConfig.components }}
             </router-link>
           </li>
-          <li 
+          <li
             class="nav-item nav-item-theme"
           >
             <router-link
@@ -380,7 +407,6 @@
   import compoLang from '../i18n/component.json';
   import Element from 'main/index.js';
   import themeLoader from './theme/loader';
-  import { getTestEle } from './theme/loader/api.js';
   import bus from '../bus';
   import { ACTION_USER_CONFIG_UPDATE } from './theme/constant.js';
 
@@ -422,19 +448,12 @@
       },
       isComponentPage() {
         return /^component/.test(this.$route.name);
+      },
+      isHome() {
+        return /^home/.test(this.$route.name);
       }
     },
     mounted() {
-      getTestEle()
-        .then(() => {
-          this.$isEle = true;
-          ga('send', 'event', 'DocView', 'Ele', 'Inner');
-        })
-        .catch((err) => {
-          ga('send', 'event', 'DocView', 'Ele', 'Outer');
-          console.error(err);
-        });
-  
       const testInnerImg = new Image();
       testInnerImg.onload = () => {
         this.$isEle = true;

examples/components/theme/loader/api.js

@@ -5,7 +5,6 @@ const { version } = Element;
 
 const hostList = {
   local: 'http://localhost:3008/',
-  alpha: 'https://element-api.ar.elenet.me/element/theme/',
   production: 'https://element-api.ele.me/element/theme/'
 };
 
@@ -15,10 +14,6 @@ export const getVars = () => {
   return get(`${host}getVariable?version=${version}`);
 };
 
-export const getTestEle = () => {
-  return get(`${hostList.alpha}getVariable`);
-};
-
 export const updateVars = (data, cb) => {
   return post(`${host}updateVariable?version=${version}`, data, cb);
 };

examples/demo-styles/descriptions.scss

@@ -0,0 +1,13 @@
+.demo-block.demo-descriptions {
+  .margin-top {
+    margin-top: 20px;
+  }
+
+  .my-label {
+    background: #E1F3D8;
+  }
+
+  .my-content {
+    background: #FDE2E2;
+  }
+}

examples/demo-styles/index.scss

@@ -44,4 +44,6 @@
 @import "./infinite-scroll.scss";
 @import "./avatar.scss";
 @import "./drawer.scss";
+@import "./skeleton.scss";
+@import "./descriptions.scss";
 

examples/demo-styles/skeleton.scss

@@ -0,0 +1,46 @@
+.demo-block.demo-skeleton {
+  .el-card {
+    margin-bottom: 16px;
+  }
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .time {
+    font-size: 13px;
+    color: #999;
+  }
+
+  .bottom {
+    margin-top: 13px;
+    line-height: 12px;
+  }
+
+  .button {
+    padding: 0;
+    min-height: auto;
+  }
+
+  .image {
+    &.multi-content {
+      width: 400px;
+      height: 267px;
+    }
+
+    width: 100%;
+    display: block;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: '';
+  }
+
+  .clearfix:after {
+    clear: both;
+  }
+}

examples/docs/en-US/calendar.md

@@ -57,7 +57,7 @@ Display date.
 |-----------------|------------------- |---------- |---------------------- |--------- |
 | value / v-model | binding value      | Date/string/number | —            | —        |
 | range           | time range, including start time and end time. Start time must be start day of week, end time must be end day of week, the time span cannot exceed two months. | Array  | —  | —  |
-| first-day-of-week | fisrt day of week| Number    | 1 to 7                |  1       |
+| first-day-of-week | first day of week| Number    | 1 to 7                |  1       |
 
 ### dateCell Scoped Slot Parameters
 | Attribute       | Description   | Type      | Accepted Values       | Default  |

examples/docs/en-US/date-picker.md

@@ -112,6 +112,24 @@ You can choose week, month, year or multiple dates by extending the standard dat
     </el-date-picker>
   </div>
 </div>
+<div class="container">
+  <div class="block">
+    <span class="demonstration">months</span>
+    <el-date-picker
+      type="months"
+      v-model="value5"
+      placeholder="Pick one or more months">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">years</span>
+    <el-date-picker
+      type="years"
+      v-model="value6"
+      placeholder="Pick one or more years">
+    </el-date-picker>
+  </div>
+</div>
 
 <script>
   export default {
@@ -120,7 +138,9 @@ You can choose week, month, year or multiple dates by extending the standard dat
         value1: '',
         value2: '',
         value3: '',
-        value4: ''
+        value4: '',
+        value5: '',
+        value6: ''
       };
     }
   };
@@ -442,7 +462,7 @@ When picking a date range, you can assign the time part for start date and end d
 | 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/ monthrange | date |
+| type | type of the picker | string | year/month/date/dates/months/years/datetime/ week/datetimerange/daterange/ monthrange | 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 | — | — |
@@ -456,6 +476,7 @@ When picking a date range, you can assign the time part for start date and end d
 | prefix-icon | Custom prefix icon class | string | — | el-icon-date |
 | clear-icon | Custom clear icon class | string | — | el-icon-circle-close |
 | validate-event | whether to trigger form validation | boolean | - | true |
+| append-to-body | whether to append DatePicker itself to body | boolean   | — | true |
 
 ### Picker Options
 | Attribute      | Description          | Type      | Accepted Values       | Default  |

examples/docs/en-US/datetime-picker.md

@@ -210,7 +210,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
 | 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 |
+| 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 |
 

examples/docs/en-US/descriptions.md

@@ -0,0 +1,191 @@
+## Descriptions
+
+Display multiple fields in list form.
+
+### Basic usage
+
+:::demo
+
+```html
+<el-descriptions title="User Info">
+    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
+    <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+    <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
+    <el-descriptions-item label="Remarks">
+      <el-tag size="small">School</el-tag>
+    </el-descriptions-item>
+    <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
+</el-descriptions>
+```
+:::
+
+### Sizes
+
+:::demo
+
+```html
+<template>
+  <el-radio-group v-model="size">
+    <el-radio label="">Default</el-radio>
+    <el-radio label="medium">Medium</el-radio>
+    <el-radio label="small">Small</el-radio>
+    <el-radio label="mini">Mini</el-radio>
+  </el-radio-group>
+
+  <el-descriptions class="margin-top" title="With border" :column="3" :size="size" border>
+    <template slot="extra">
+      <el-button type="primary" size="small">Operation</el-button>
+    </template>
+    <el-descriptions-item>
+      <template slot="label">
+        <i class="el-icon-user"></i>
+        Username
+      </template>
+      kooriookami
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template slot="label">
+        <i class="el-icon-mobile-phone"></i>
+        Telephone
+      </template>
+      18100000000
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template slot="label">
+        <i class="el-icon-location-outline"></i>
+        Place
+      </template>
+      Suzhou
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template slot="label">
+        <i class="el-icon-tickets"></i>
+        Remarks
+      </template>
+      <el-tag size="small">School</el-tag>
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template slot="label">
+        <i class="el-icon-office-building"></i>
+        Address
+      </template>
+      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
+    </el-descriptions-item>
+  </el-descriptions>
+
+  <el-descriptions class="margin-top" title="Without border" :column="3" :size="size">
+    <template slot="extra">
+      <el-button type="primary" size="small">Operation</el-button>
+    </template>
+    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
+    <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+    <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
+    <el-descriptions-item label="Remarks">
+      <el-tag size="small">School</el-tag>
+    </el-descriptions-item>
+    <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
+  </el-descriptions>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        size: ''
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Vertical List
+
+:::demo
+
+```html
+<el-descriptions title="Vertical list with border" direction="vertical" :column="4" border>
+  <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+  <el-descriptions-item label="Place" :span="2">Suzhou</el-descriptions-item>
+  <el-descriptions-item label="Remarks">
+    <el-tag size="small">School</el-tag>
+  </el-descriptions-item>
+  <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
+</el-descriptions>
+
+<el-descriptions class="margin-top" title="Vertical list without border" :column="4" direction="vertical">
+  <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+  <el-descriptions-item label="Place" :span="2">Suzhou</el-descriptions-item>
+  <el-descriptions-item label="Remarks">
+    <el-tag size="small">School</el-tag>
+  </el-descriptions-item>
+  <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
+</el-descriptions>
+```
+:::
+
+### Customized Style
+
+:::demo
+
+```html
+<el-descriptions title="Customized style list" :column="3" border>
+  <el-descriptions-item label="Username" label-class-name="my-label" content-class-name="my-content">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+  <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
+  <el-descriptions-item label="Remarks">
+    <el-tag size="small">School</el-tag>
+  </el-descriptions-item>
+  <el-descriptions-item label="Address" :content-style="{'text-align': 'right'}">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
+</el-descriptions>
+<style>
+  .my-label {
+    background: #E1F3D8;
+  }
+
+  .my-content {
+    background: #FDE2E2;
+  }
+</style>
+```
+:::
+
+### Descriptions Attributes
+| Attribute     | Description       | Type       | Accepted Values        | Default   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| border        | with or without border      | boolean  |          —             |    false     |
+| column        | numbers of `Descriptions Item` in one line  | number | — |    3  |
+| direction     | direction of list  | string | vertical / horizontal |    horizontal  |
+| size          | size of list    | string  |    medium / small / mini  |  — |
+| title         | title text, display on the top left    | string  |    —  |  — |
+| extra         | extra text, display on the top right    | string  |    —  |  — |
+| colon | change default props colon value of Descriptions Item   | boolean |    —  |  true |
+| labelClassName          | custom label class name         | string  |          —             |    —     |
+| contentClassName          | custom content class name         | string  |          —             |    —     |
+| labelStyle          | custom label style | object |          —             |    —     |
+| contentStyle         | custom content style | object |          —             |    —     |
+
+### Descriptions Slots
+
+| Name | Description |
+|------|--------|
+| title | custom title, display on the top left  |
+| extra | custom extra area, display on the top right  |
+
+### Descriptions Item Attributes
+| Attribute       | Description        | Type       | Accepted Values       | Default   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| label          | label text         | string  |          —             |    —     |
+| span          | colspan of column       | number  |          —             |    1     |
+| labelClassName          | custom label class name         | string  |          —             |    —     |
+| contentClassName          | custom content class name         | string  |          —             |    —     |
+| labelStyle          | custom label style | object |          —             |    —     |
+| contentStyle         | custom content style | object |          —             |    —     |
+
+### Descriptions Item Slots
+
+| Name | Description |
+|------|--------|
+| label | custom label  |

examples/docs/en-US/dropdown.md

@@ -279,6 +279,7 @@ Besides default size, Dropdown component provides three additional sizes for you
 | 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 |
 | tabindex     | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Dropdown | number | — | 0 |
+| disabled     | whether the Dropdown is disabled | boolean | — | false |
 
 ### Dropdown Slots
 

examples/docs/en-US/empty.md

@@ -0,0 +1,61 @@
+## Empty
+
+Placeholder hints for empty states.
+
+### Basic usage
+
+:::demo
+
+```html
+<el-empty description="description"></el-empty>
+```
+:::
+
+### Custom image
+
+Use `image` prop to set image URL.
+
+:::demo
+
+```html
+<el-empty image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-empty>
+```
+:::
+
+### Image size
+
+Use `image-size` prop to control image size.
+
+:::demo
+
+```html
+<el-empty :image-size="200"></el-empty>
+```
+:::
+
+### Bottom content
+
+Use the default slot to insert content at the bottom.
+
+:::demo
+```html
+<el-empty>
+  <el-button type="primary">Button</el-button>
+</el-empty>
+```
+:::
+
+### Empty Attributes
+| Attribute       | Description      | Type         | Acceptable Value    | Default   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| image          | image URL       | string  |          —             |    —     |
+| image-size    | image size (width)  | number | — |    —  |
+| description  | description    | string  |    —  |  — |
+
+### Empty Slots
+
+| Name | Description |
+|------|--------|
+| default | Custom bottom content  |
+| image | Custom image     |
+| description | Custom description     |

examples/docs/en-US/form.md

@@ -476,7 +476,7 @@ Custom validate callback function must be called. See more advanced usage at [as
       { type: 'number', message: 'age must be a number'}
     ]"
   >
-    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
+    <el-input 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>
@@ -520,7 +520,7 @@ When an `el-form-item` is nested in another `el-form-item`, its label width will
 
 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.
+:::demo Still you can fine tune each component's `size` if you don't want that component to inherit its size from From or FormItem.
 ```html
 <el-form ref="form" :model="sizeForm" label-width="120px" size="mini">
   <el-form-item label="Activity name">
@@ -595,7 +595,7 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
 | 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, e.g. '50px'. All its direct child form items will inherit this value. Width `auto` is supported.        | 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 |
+| hide-required-asterisk | whether to hide a red asterisk (star) next to the required field label. | 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 |

examples/docs/en-US/i18n.md

@@ -144,7 +144,7 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
 ## Import via CDN
 
 ```html
-<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/vue@2"></script>
 <script src="//unpkg.com/element-ui"></script>
 <script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
 
@@ -156,7 +156,7 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
 Compatible with `vue-i18n`
 
 ```html
-<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/vue@2"></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>

examples/docs/en-US/image.md

@@ -147,6 +147,7 @@ Besides the native features of img, support lazy load, custom placeholder and lo
 | scroll-container | The container to add scroll listener when using lazy load | string / HTMLElement | — | The nearest parent container whose overflow property is auto or scroll |
 | preview-src-list | allow big image preview | Array | — | - |
 | z-index | set image preview z-index | Number | — | 2000 |
+| initial-index | set image preview array index | Number | — | - |
 
 ### Events
 | Event Name | Description | Parameters |

examples/docs/en-US/input.md

@@ -263,7 +263,7 @@ 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: `medium`, `small` and `mini`.
 ```html
 <div class="demo-input-size">
   <el-input

examples/docs/en-US/installation.md

@@ -25,11 +25,11 @@ We recommend our users to lock Element's version when using CDN. Please refer to
 
 ### Hello world
 
-If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://codepen.io/ziyoung/pen/rRKYpd)
+If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://codepen.io/bofeng/pen/poaEmJY)
 
-<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html" frameborder="no" allowtransparency="true" allowfullscreen="true">
-  See the Pen <a href='https://codepen.io/ziyoung/pen/rRKYpd/'>Element demo</a> by hetech
-  (<a href='https://codepen.io/ziyoung'>@ziyoung</a>) on <a href='https://codepen.io'>CodePen</a>.
+<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/bofeng/embed/poaEmJY/?height=265&theme-id=light&default-tab=html" frameborder="no" allowtransparency="true" allowfullscreen="true">
+  See the Pen <a href='https://codepen.io/bofeng/pen/poaEmJY/'>Element demo</a> by hetech
+  (<a href='https://codepen.io/bofeng'>@bofeng</a>) on <a href='https://codepen.io'>CodePen</a>.
 </iframe>
 
 If you are using npm and wish to apply webpack, please continue to the next page: [Quick Start](/#/en-US/component/quickstart).

examples/docs/en-US/layout.md

@@ -337,7 +337,7 @@ The classes are:
 | gutter | grid spacing | number | — | 0 |
 | type | layout mode, you can use flex, works in modern browsers | string | — | — |
 | justify | horizontal alignment of flex layout | string | start/end/center/space-around/space-between | start |
-| align | vertical alignment of flex layout | string | top/middle/bottom | top |
+| align | vertical alignment of flex layout | string | top/middle/bottom | — |
 | tag | custom element tag | string | * | div |
 
 ### Col Attributes

examples/docs/en-US/popover.md

@@ -149,7 +149,7 @@ Of course, you can nest other operations. It's more light-weight than using a di
 |  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-options        | parameters for [popper.js](https://popper.js.org/docs/v2/) | object            | please refer to [popper.js](https://popper.js.org/docs/v2/) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
 |  popper-class        |  custom class name for popover | string | — | — |
 |  open-delay        | delay before appearing when `trigger` is hover, in milliseconds | number | — | — |
 |  close-delay        | delay before disappearing when `trigger` is hover, in milliseconds | number | — | 200 |

examples/docs/en-US/progress.md

@@ -170,4 +170,7 @@ You also can specify `type` attribute to `dashboard` to use dashboard progress b
 | color  | background color of progress bar. Overrides `status` prop | string/function/array | — | '' |
 | width | the canvas width of circle progress bar | number | — | 126 |
 | show-text | whether to show percentage | boolean | — | true |
-| stroke-linecap  | circle/dashboard type shape at the end path | string | butt/round/square | round |
+| stroke-linecap  | circle/dashboard type shape at the end path | string | butt/round/square | round |
+| format  | custom text format  | function(percentage) | — | — |
+| define-back-color  | background color of progress bar (hex format) | string | — | — |
+| text-color  | text color of progress bar (hex format) | string | — | — |

examples/docs/en-US/result.md

@@ -0,0 +1,76 @@
+## Result
+
+Used to give feedback on the result of user's operation or access exception.
+
+### Basic usage
+
+:::demo
+
+```html
+<el-row>
+  <el-col :sm="12" :lg="6">
+    <el-result icon="success" title="Success Tip" subTitle="Please follow the instructions">
+      <template slot="extra">
+        <el-button type="primary" size="medium">Back</el-button>
+      </template>
+    </el-result>
+  </el-col>
+  <el-col :sm="12" :lg="6">
+    <el-result icon="warning" title="Warning Tip" subTitle="Please follow the instructions">
+      <template slot="extra">
+        <el-button type="primary" size="medium">Back</el-button>
+      </template>
+    </el-result>
+  </el-col>
+  <el-col :sm="12" :lg="6">
+    <el-result icon="error" title="Error Tip" subTitle="Please follow the instructions">
+      <template slot="extra">
+        <el-button type="primary" size="medium">Back</el-button>
+      </template>
+    </el-result>
+  </el-col>
+  <el-col :sm="12" :lg="6">
+    <el-result icon="info" title="Info Tip" subTitle="Please follow the instructions">
+      <template slot="extra">
+        <el-button type="primary" size="medium">Back</el-button>
+      </template>
+    </el-result>
+  </el-col>
+</el-row>
+```
+
+:::
+
+### Customized content
+
+:::demo
+
+```html
+<el-result title="404" subTitle="Sorry, request error">
+  <template slot="icon">
+    <el-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
+  </template>
+  <template slot="extra">
+    <el-button type="primary" size="medium">Back</el-button>
+  </template>
+</el-result>
+```
+
+:::
+
+### Result Attributes
+
+| Attribute     | Description    | Type            | Accepted Values      | Default   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| title          | title         | string  |          —             |    —     |
+| sub-title    | sub title  | string | — |    —  |
+| icon  | icon type    | string  |    success / warning / info / error  |  info |
+
+### Result Slots
+
+| Name | Description |
+|------|--------|
+| icon | custom icon  |
+| title | custom title     |
+| subTitle | custom sub title     |
+| extra | custom  extra area    |

examples/docs/en-US/skeleton.md

@@ -0,0 +1,315 @@
+## Skeleton
+
+When loading data, and you need a rich experience for visual and interactions for your end users, you can choose `skeleton`.
+
+### Basic usage
+
+The basic skeleton.
+
+:::demo
+
+```html
+<template>
+  <el-skeleton />
+</template>
+```
+
+:::
+
+### Configurable Rows
+
+You can configure the row numbers yourself, we are rendering a title row with 33% width of the others.
+
+:::demo
+
+```html
+<el-skeleton :rows="6" />
+```
+
+:::
+
+### Animation
+We have provided a switch flag indicating whether showing the loading animation, called `animated` when this is true, all children of `el-skeleton` will show animation
+
+:::demo
+
+```html
+<el-skeleton :rows="6" animated />
+```
+
+:::
+
+### Customized Template
+Element only provides the most common template, sometimes that could be a problem, so you have a slot named `template` to do that work.
+
+Also we have provided different types skeleton unit that you can choose, for more detailed info, please scroll down to the bottom of this page to see the API description. Also, when building your own customized skeleton structure, you should be structuring them as closer to the real DOM as possible, which avoiding the DOM bouncing caused by the height difference.
+
+:::demo
+
+```html
+<template>
+  <el-skeleton style="width: 240px">
+    <template slot="template">
+      <el-skeleton-item variant="image" style="width: 240px; height: 240px;" />
+      <div style="padding: 14px;">
+        <el-skeleton-item variant="p" style="width: 50%" />
+        <div
+          style="display: flex; align-items: center; justify-items: space-between;"
+        >
+          <el-skeleton-item variant="text" style="margin-right: 16px;" />
+          <el-skeleton-item variant="text" style="width: 30%;" />
+        </div>
+      </div>
+    </template>
+  </el-skeleton>
+</template>
+```
+
+:::
+
+### Loading state
+
+When `Loading` ends, we always need to show the real UI with data to our end users. with the attribtue `loading` we can control whether showing the DOM. You can also use slot `default` to structure the real DOM element.
+
+:::demo
+
+```html
+<template>
+  <div style="width: 240px">
+    <p>
+      <label style="margin-right: 16px;">Switch Loading</label>
+      <el-switch v-model="loading" />
+    </p>
+    <el-skeleton style="width: 240px" :loading="loading" animated>
+      <template slot="template">
+        <el-skeleton-item
+          variant="image"
+          style="width: 240px; height: 240px;"
+        />
+        <div style="padding: 14px;">
+          <el-skeleton-item variant="h3" style="width: 50%;" />
+          <div
+            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
+          >
+            <el-skeleton-item variant="text" style="margin-right: 16px;" />
+            <el-skeleton-item variant="text" style="width: 30%;" />
+          </div>
+        </div>
+      </template>
+      <template>
+        <el-card :body-style="{ padding: '0px', marginBottom: '1px' }">
+          <img
+            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
+            class="image"
+          />
+          <div style="padding: 14px;">
+            <span>Delicious hamberger</span>
+            <div class="bottom card-header">
+              <span class="time">{{ currentDate }}</span>
+              <el-button type="text" class="button">Operation button</el-button>
+            </div>
+          </div>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        loading: true,
+        currentDate: '2021-06-01'
+      }
+    },
+  }
+</script>
+```
+
+:::
+
+
+### Rendering a list of data
+
+Most of the time, skeleton is used as indicators of rendering a list of data which haven't been fetched from server yet, then we need to create a list of skeleton out of no where to make it look like it is loading, with `count` attribute, you can control how many these templates you need to render to the browser.
+
+
+:::tip
+We do not recommend rendering lots of fake UI to the browser, it will still cause the performance issue, it also costs longer to destroy the skeleton. Keep `count` as small as it can be to make better user experience.
+:::
+
+:::demo
+
+```html
+<template>
+  <div style="width: 400px">
+    <p>
+      <el-button @click="setLoading">Click me to reload</el-button>
+    </p>
+    <el-skeleton style="width:400px" :loading="loading" animated :count="3">
+      <template slot="template">
+        <el-skeleton-item
+          variant="image"
+          style="width: 400px; height: 267px;"
+        />
+        <div style="padding: 14px;">
+          <el-skeleton-item variant="h3" style="width: 50%;" />
+          <div
+            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
+          >
+            <el-skeleton-item variant="text" style="margin-right: 16px;" />
+            <el-skeleton-item variant="text" style="width: 30%;" />
+          </div>
+        </div>
+      </template>
+      <template>
+        <el-card
+          :body-style="{ padding: '0px', marginBottom: '1px' }"
+          v-for="item in lists"
+          :key="item.name"
+        >
+          <img :src="item.imgUrl" class="image multi-content" />
+          <div style="padding: 14px;">
+            <span>Delicious hamberger</span>
+            <div class="bottom card-header">
+              <span class="time">{{ currentDate }}</span>
+              <el-button type="text" class="button">Operation button</el-button>
+            </div>
+          </div>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        loading: true,
+        currentDate: '2021-06-01',
+        lists: [],
+      }
+    },
+    mounted() {
+      this.loading = false
+      this.lists = [
+        {
+          imgUrl:
+            'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+          name: 'Deer',
+        },
+        {
+          imgUrl:
+            'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+          name: 'Horse',
+        },
+        {
+          imgUrl:
+            'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+          name: 'Mountain Lion',
+        },
+      ]
+    },
+    methods: {
+      setLoading() {
+        this.loading = true
+        setTimeout(() => (this.loading = false), 2000)
+      },
+    },
+  }
+</script>
+```
+
+:::
+
+### Avoiding rendering bouncing.
+Sometimes API responds very quickly, when that happens, the skeleton just gets rendered to the DOM then it needs to switch back to real DOM, that causes the sudden flashy. To avoid such thing, you can use the `throttle` attribute.
+
+
+:::demo
+
+```html
+<template>
+  <div style="width: 240px">
+    <p>
+      <label style="margin-right: 16px;">Switch Loading</label>
+      <el-switch v-model="loading" />
+    </p>
+    <el-skeleton
+      style="width: 240px"
+      :loading="loading"
+      animated
+      :throttle="500"
+    >
+      <template slot="template">
+        <el-skeleton-item
+          variant="image"
+          style="width: 240px; height: 240px;"
+        />
+        <div style="padding: 14px;">
+          <el-skeleton-item variant="h3" style="width: 50%;" />
+          <div
+            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
+          >
+            <el-skeleton-item variant="text" style="margin-right: 16px;" />
+            <el-skeleton-item variant="text" style="width: 30%;" />
+          </div>
+        </div>
+      </template>
+      <template>
+        <el-card :body-style="{ padding: '0px', marginBottom: '1px'}">
+          <img
+            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
+            class="image"
+          />
+          <div style="padding: 14px;">
+            <span>Delicious hamberger</span>
+            <div class="bottom card-header">
+              <span class="time">{{ currentDate }}</span>
+              <el-button type="text" class="button">operation button</el-button>
+            </div>
+          </div>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        loading: false,
+        currentDate: '2021-06-01'
+      }
+    },
+  }
+</script>
+```
+:::
+
+### Skeleton Attributes
+
+| Attribute    | Description  | Type    | Acceptable Value | Default |
+| ------- | ---------------- | ------- | ------------ | ------ |
+| animated | whether showing the animation | boolean | true / false | false |
+| count   | how many fake items to render to the DOM | number | integer | 1 |
+| loading | whether showing the skeleton | boolean | true / false | true  |
+| rows    | numbers of the row, only useful when no template slot were given | number  | integer  | 4      |
+| throttle | Rendering delay in millseconds | number | integer | 0 |
+
+
+### Skeleton Item Attributes
+| Attribute    | Description             | Type    | Acceptable Value       | Default  |
+| ------- | ---------------- | ------- | ------------ | ------ |
+| variant | The current rendering skeleton type | Enum(string) | p / h1 / h3 / text / caption / button / image / circle / rect | text |
+
+
+### Skeleton Slots
+
+| Name | Description |
+| ---- | ----------- |
+| default | Real rendering DOM |
+| template | Custom rendering skeleton template |

examples/docs/en-US/statistic.md

@@ -0,0 +1,252 @@
+## Statistic
+
+Used to highlight a certain number or group of numbers, such as showing a numerical value, such as a dollar amount, ranking, etc.
+
+Countdown mode
+
+### Basic usage
+
+The component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on
+:::demo
+
+```html
+<template>
+  <div>
+    <el-row :gutter="20">
+      <el-col :span="6">
+        <div>
+          <el-statistic
+            group-separator=","
+            :precision="2"
+            :value="value2"
+            :title="title"
+          ></el-statistic>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div>
+          <el-statistic title="Gender Distribution">
+            <template slot="formatter">
+              456/2
+            </template>
+          </el-statistic>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div>
+          <el-statistic
+            group-separator=","
+            :precision="2"
+            decimal-separator="."
+            :value="value1"
+            :title="title"
+          >
+            <template slot="prefix">
+              <i class="el-icon-s-flag" style="color: red"></i>
+            </template>
+            <template slot="suffix">
+              <i class="el-icon-s-flag" style="color: blue"></i>
+            </template>
+          </el-statistic>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div>
+          <el-statistic :value="like ? 521 : 520" title="Feedback">
+            <template slot="suffix">
+              <span @click="like = !like" class="like">
+                <i
+                  class="el-icon-star-on"
+                  style="color:red"
+                  v-show="!!like"
+                ></i>
+                <i class="el-icon-star-off" v-show="!like"></i>
+              </span>
+            </template>
+          </el-statistic>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        like: true,
+        value1: 4154.564,
+        value2: 2222,
+        title: "Growth this year",
+      };
+    },
+  };
+</script>
+<style lang="scss">
+  .like {
+    cursor: pointer;
+    font-size: 25px;
+    display: inline-block;
+  }
+</style>
+```
+
+:::
+
+### Count down
+
+:::warning
+Suspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node **
+
+If you need to add time to the original, please note that the overall time (the amount of time added and the original time) must be a ** future ** time node, otherwise it is still the end of the countdown
+:::
+:::demo Providing a future time via 'value' will enable the countdown function
+
+```html
+<template>
+  <div>
+    <el-row :gutter="20">
+      <el-col :span="14">
+        <el-card shadow="hover" style="width: 100%; ">
+          <div style="width: 100%; display: inline-block; ">
+            <el-statistic
+              :value="deadline2"
+              time-indices
+              title="🎉Price reduction of goods🎉"
+            >
+              <template slot="suffix">
+               panic purchase
+              </template>
+            </el-statistic>
+          </div>
+        </el-card>
+        <el-card shadow="hover" style="width: 100%;margin-top: 20px; ">
+          <div style="width: 100%; display: inline-block;">
+            <el-statistic
+              @finish="hilarity"
+              :value="deadline3"
+              time-indices
+              title="The Value of Time"
+            >
+              <template slot="suffix">
+                <el-button type="primary " size="small" @click="add"
+                  >add 10s</el-button
+                >
+              </template>
+            </el-statistic>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="10">
+        <el-card shadow="hover" style="width: 100%;">
+          <div slot="header" class="clearfix">
+            <span style="font-size: 14px;">Henry·Wadsworth·Longfellow</span>
+            <el-button
+              style="float: right; padding: 3px 0"
+              type="text"
+              @click="clickFn"
+              >suspend</el-button
+            >
+          </div>
+          <div style="font-size: 16px;text-align: left;">
+            Don't sigh in the past, it is no longer back
+          </div>
+          <div style="font-size: 16px;text-align: left;margin-top: 15px;">
+            Be wise to improve the present
+          </div>
+          <div style="font-size: 16px;text-align: left;margin-top: 15px;">
+            To not worry not afraid of the firm will into the complicated future
+          </div>
+          <div style="margin-top: 40px;"></div>
+          <el-statistic
+            ref="statistic"
+            @finish="hilarity"
+            format="HH:mm:ss"
+            :value="deadline4"
+            title="Distance to Tomorrow:"
+            time-indices
+          >
+          </el-statistic>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        deadline2: Date.now() + 1000 * 60 * 60 * 8,
+        deadline3: Date.now() + 1000 * 60 * 30,
+        deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
+        stop: true,
+      };
+    },
+    methods: {
+      hilarity() {
+        this.$notify({
+          title: "Prompt",
+          message:
+            "Time is up, do you know that an inch of gold can't buy an inch of time?",
+          duration: 0,
+        });
+      },
+      clickFn() {
+        this.$refs.statistic.suspend(this.stop);
+        this.stop = !this.stop;
+      },
+      add() {
+        this.deadline3 = this.deadline3 + 1000 * 10;
+      },
+    },
+  };
+</script>
+```
+
+:::
+
+### Statistic Attributes
+
+| Attribute         | Description                    | Type                        | Accepted Values | Default |
+| ----------------- | ------------------------------ | --------------------------- | --------------- | ------- |
+| value             | Numerical content              | string \| number            | -               | -       |
+| decimal-separator | Setting the decimal point      | string                      | -               | .       |
+| formatter         | Custom numerical presentation  | v-slot \|({value}) => VNode | -               | -       |
+| group-separator   | Sets the thousandth identifier | string                      | -               | ,       |
+| precision         | numerical precision            | number                      | -               | -       |
+| prefix            | Sets the prefix of a number    | string \| v-slot            | -               | -       |
+| suffix            | Sets the suffix of a number    | string \| v-slot            | -               | -       |
+| title             | Numeric titles                 | string \| v-slot            | -               | -       |
+| value-style       | Styles numeric values          | style                       | -               | -       |
+| rate              | Set the ratio                  | number                      | -               | 1000    |
+
+### Statistic Slots
+
+| Name      | Description                 |
+| --------- | --------------------------- |
+| prefix    | Numeric prefix              |
+| suffix    | Suffixes for numeric values |
+| formatter | Numerical content           |
+| title     | Numeric titles              |
+
+### Statistic.Countdown Attributes
+
+| Attribute    | Description                              | Type    | Options     | Default    |
+| ------------ | ---------------------------------------- | ------- | ----------- | ---------- |
+| time-indices | Whether to enable the countdown function | boolean | true\|false | false      |
+| value        | Required value, enter the bound value    | string  | —           | —          |
+| format       | Formatting the countdown display         | string  | —           | 'HH:mm:ss' |
+
+### Statistic.Countdown Events
+
+| Method | Description                                | Parameters       |
+| ------ | ------------------------------------------ | ---------------- |
+| change | Enable in the 'countdown' function         | (value: Date)    |
+| finish | Launched after the 'countdown' is complete | (value: boolean) |
+
+### Statistic Methods
+
+| Method  | Description         | Parameters      | CallBack      |
+| ------- | ------------------- | --------------- | ------------- |
+| suspend | Pause the countdown | (value:boolean) | (value: Date) |

examples/docs/en-US/table.md

@@ -1088,7 +1088,7 @@ 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).
+:::demo You have access to the following data: row, column, $index and store (state management of Table) by [Scoped slot](https://v2.vuejs.org/v2/guide/components-slots#Scoped-Slots).
 ```html
 <template>
   <el-table
@@ -1169,7 +1169,7 @@ 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 header [scoped slots](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots).
+:::demo You can customize how the header looks by header [scoped slots](https://v2.vuejs.org/v2/guide/components-slots#Scoped-Slots).
 ```html
 <template>
   <el-table
@@ -1817,6 +1817,7 @@ You can customize row index in `type=index` columns.
 | fit | whether width of column automatically fits its container | boolean | — | true |
 | show-header | whether Table header is visible | boolean | — | true |
 | highlight-current-row | whether current row is highlighted | boolean | — | false |
+| highlight-selection-row | whether selection 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, 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 | — | — |

examples/docs/en-US/tooltip.md

@@ -187,7 +187,7 @@ Disabled form elements are not supported for Tooltip, more information can be fo
 |  offset        |  offset of the Tooltip   | number    | — |  0 |
 |  transition     |  animation name | string             | — | el-fade-in-linear |
 |  visible-arrow   |  whether an arrow is displayed. For more information, check [Vue-popper](https://github.com/element-component/vue-popper) page | boolean | — | true |
-|  popper-options        | [popper.js](https://popper.js.org/documentation.html) parameters | Object            | refer to [popper.js](https://popper.js.org/documentation.html) doc | `{ boundariesElement: 'body', gpuAcceleration: false }` |
+|  popper-options        | [popper.js](https://popper.js.org/docs/v2/) parameters | Object            | refer to [popper.js](https://popper.js.org/docs/v2/) doc | `{ boundariesElement: 'body', gpuAcceleration: false }` |
 | open-delay | delay of appearance, in millisecond | number | — | 0 |
 | 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 | — | — |

examples/docs/en-US/transition.md

@@ -1,6 +1,6 @@
 ## Built-in transition
 
-You can use Element's built-in transitions directly. Before that, please read the [transition docs](https://vuejs.org/v2/api/#transition).
+You can use Element's built-in transitions directly. Before that, please read the [transition docs](https://v2.vuejs.org/v2/api/#transition).
 
 ### fade
 

examples/docs/es/date-picker.md

@@ -114,6 +114,24 @@ Puede elegir la semana, el mes, el año o varias fechas ampliando el componente
     </el-date-picker>
   </div>
 </div>
+<div class="container">
+  <div class="block">
+    <span class="demonstration">months</span>
+    <el-date-picker
+      type="months"
+      v-model="value5"
+      placeholder="Pick one or more months">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">years</span>
+    <el-date-picker
+      type="years"
+      v-model="value6"
+      placeholder="Pick one or more years">
+    </el-date-picker>
+  </div>
+</div>
 
 <script>
   export default {
@@ -122,7 +140,9 @@ Puede elegir la semana, el mes, el año o varias fechas ampliando el componente
         value1: '',
         value2: '',
         value3: '',
-        value4: ''
+        value4: '',
+        value5: '',
+        value6: ''
       };
     }
   };
@@ -443,7 +463,7 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
 | 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/ monthrange | date                 |
+| type              | tipo de picker                           | string            | year/month/date/dates/months/years/datetime/ week/datetimerange/daterange/ monthrange | 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            | —                                        | —                    |
@@ -456,6 +476,7 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
 | 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 |
+| append-to-body    | Si adjuntar el cuadro de DatePicker al cuerpo | boolean       | —                 | true       |
 
 ### Opciones del Picker
 | Atributo       | Descripción                                                  | Tipo                           | Valores aceptados | Por defecto |

examples/docs/es/descriptions.md

@@ -0,0 +1,191 @@
+## Descriptions
+
+Display multiple fields in list form.
+
+### Basic usage
+
+:::demo
+
+```html
+<el-descriptions title="User Info">
+    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
+    <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+    <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
+    <el-descriptions-item label="Remarks">
+      <el-tag size="small">School</el-tag>
+    </el-descriptions-item>
+    <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
+</el-descriptions>
+```
+:::
+
+### Sizes
+
+:::demo
+
+```html
+<template>
+  <el-radio-group v-model="size">
+    <el-radio label="">Default</el-radio>
+    <el-radio label="medium">Medium</el-radio>
+    <el-radio label="small">Small</el-radio>
+    <el-radio label="mini">Mini</el-radio>
+  </el-radio-group>
+
+  <el-descriptions class="margin-top" title="With border" :column="3" :size="size" border>
+    <template slot="extra">
+      <el-button type="primary" size="small">Operation</el-button>
+    </template>
+    <el-descriptions-item>
+      <template slot="label">
+        <i class="el-icon-user"></i>
+        Username
+      </template>
+      kooriookami
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template slot="label">
+        <i class="el-icon-mobile-phone"></i>
+        Telephone
+      </template>
+      18100000000
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template slot="label">
+        <i class="el-icon-location-outline"></i>
+        Place
+      </template>
+      Suzhou
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template slot="label">
+        <i class="el-icon-tickets"></i>
+        Remarks
+      </template>
+      <el-tag size="small">School</el-tag>
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template slot="label">
+        <i class="el-icon-office-building"></i>
+        Address
+      </template>
+      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
+    </el-descriptions-item>
+  </el-descriptions>
+
+  <el-descriptions class="margin-top" title="Without border" :column="3" :size="size">
+    <template slot="extra">
+      <el-button type="primary" size="small">Operation</el-button>
+    </template>
+    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
+    <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+    <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
+    <el-descriptions-item label="Remarks">
+      <el-tag size="small">School</el-tag>
+    </el-descriptions-item>
+    <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
+  </el-descriptions>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        size: ''
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Vertical List
+
+:::demo
+
+```html
+<el-descriptions title="Vertical list with border" direction="vertical" :column="4" border>
+  <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+  <el-descriptions-item label="Place" :span="2">Suzhou</el-descriptions-item>
+  <el-descriptions-item label="Remarks">
+    <el-tag size="small">School</el-tag>
+  </el-descriptions-item>
+  <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
+</el-descriptions>
+
+<el-descriptions class="margin-top" title="Vertical list without border" :column="4" direction="vertical">
+  <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+  <el-descriptions-item label="Place" :span="2">Suzhou</el-descriptions-item>
+  <el-descriptions-item label="Remarks">
+    <el-tag size="small">School</el-tag>
+  </el-descriptions-item>
+  <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
+</el-descriptions>
+```
+:::
+
+### Customized Style
+
+:::demo
+
+```html
+<el-descriptions title="Customized style list" :column="3" border>
+  <el-descriptions-item label="Username" label-class-name="my-label" content-class-name="my-content">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+  <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
+  <el-descriptions-item label="Remarks">
+    <el-tag size="small">School</el-tag>
+  </el-descriptions-item>
+  <el-descriptions-item label="Address" :content-style="{'text-align': 'right'}">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
+</el-descriptions>
+<style>
+  .my-label {
+    background: #E1F3D8;
+  }
+
+  .my-content {
+    background: #FDE2E2;
+  }
+</style>
+```
+:::
+
+### Descriptions Attributes
+| Attribute     | Description       | Type       | Accepted Values        | Default   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| border        | with or without border      | boolean  |          —             |    false     |
+| column        | numbers of `Descriptions Item` in one line  | number | — |    3  |
+| direction     | direction of list  | string | vertical / horizontal |    horizontal  |
+| size          | size of list    | string  |    medium / small / mini  |  — |
+| title         | title text, display on the top left    | string  |    —  |  — |
+| extra         | extra text, display on the top right    | string  |    —  |  — |
+| colon | change default props colon value of Descriptions Item   | boolean |    —  |  true |
+| labelClassName          | custom label class name         | string  |          —             |    —     |
+| contentClassName          | custom content class name         | string  |          —             |    —     |
+| labelStyle          | custom label style | object |          —             |    —     |
+| contentStyle         | custom content style | object |          —             |    —     |
+
+### Descriptions Slots
+
+| Name | Description |
+|------|--------|
+| title | custom title, display on the top left  |
+| extra | custom extra area, display on the top right  |
+
+### Descriptions Item Attributes
+| Attribute       | Description        | Type       | Accepted Values       | Default   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| label          | label text         | string  |          —             |    —     |
+| span          | colspan of column       | number  |          —             |    1     |
+| labelClassName          | custom label class name         | string  |          —             |    —     |
+| contentClassName          | custom content class name         | string  |          —             |    —     |
+| labelStyle          | custom label style | object |          —             |    —     |
+| contentStyle         | custom content style | object |          —             |    —     |
+
+### Descriptions Item Slots
+
+| Name | Description |
+|------|--------|
+| label | custom label  |

examples/docs/es/dropdown.md

@@ -281,6 +281,7 @@ Además del tamaño predeterminado, el componente Dropdown proporciona tres tama
 | 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         |
 | tabindex      | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) de Dropdown | number              |          —         | 0           |
+| disabled      | si el desplegable está desactivado       | boolean | —                                      | false       |
 
 ### Dropdown Slots
 

examples/docs/es/empty.md

@@ -0,0 +1,61 @@
+## Empty
+
+Placeholder hints for empty states.
+
+### Basic usage
+
+:::demo
+
+```html
+<el-empty description="descrição"></el-empty>
+```
+:::
+
+### Custom image
+
+Use `image` prop to set image URL.
+
+:::demo
+
+```html
+<el-empty image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-empty>
+```
+:::
+
+### Image size
+
+Use `image-size` prop to control image size.
+
+:::demo
+
+```html
+<el-empty :image-size="200"></el-empty>
+```
+:::
+
+### Bottom content
+
+Use the default slot to insert content at the bottom.
+
+:::demo
+```html
+<el-empty>
+  <el-button type="primary">Button</el-button>
+</el-empty>
+```
+:::
+
+### Empty Attributes
+| Attribute       | Description      | Type         | Acceptable Value    | Default Value   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| image          | image URL       | string  |          —             |    —     |
+| image-size    | image size (width)  | number | — |    —  |
+| description  | description    | string  |    —  |  — |
+
+### Empty Slots
+
+| Name | Description |
+|------|--------|
+| default | Custom bottom content  |
+| image | Custom image     |
+| description | Custom description     |

examples/docs/es/form.md

@@ -485,7 +485,7 @@ Se debe llamar a la función de validación de llamada de retorno personalizada.
       { type: 'number', message: 'age must be a number'}
     ]"
   >
-    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
+    <el-input 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>

examples/docs/es/i18n.md

@@ -144,7 +144,7 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
 ## Importar via CDN
 
 ```html
-<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/vue@2"></script>
 <script src="//unpkg.com/element-ui"></script>
 <script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
 
@@ -156,7 +156,7 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
 Compatible con `vue-i18n`
 
 ```html
-<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/vue@2"></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>

examples/docs/es/image.md

@@ -149,6 +149,7 @@ Además de las características nativas de img, soporte de carga perezosa, marca
 | scroll-container | El contenedor para añadir el scroll listener cuando se utiliza lazy load | string / HTMLElement | — | El contenedor padre más cercano cuya propiedad de desbordamiento es auto o scroll |
 | preview-src-list | permitir una vista previa grande de la imagen | Array | — | - |
 | z-index | establecer el z-index de la vista previa de la imagen | Number | — | 2000 |
+| initial-index | set image preview array index | Number | — | - |
 
 ### Eventos
 | Nombre del evento | Descripción | Parámetros |

examples/docs/es/input.md

@@ -269,7 +269,7 @@ export default {
 
 ### 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`.
+:::demo Añada el atributo `size` para cambiar el tamaño del Input. Además del tamaño predeterminado, hay otras tres opciones: `medium`, `small` y `mini`.
 
 ```html
 <div class="demo-input-size">
@@ -617,7 +617,6 @@ export default {
 | ------ | ------------------------------------------------------------ | ------------------------- |
 | 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) |
 | change | se activa solo cuando el cuadro de entrada pierde el foco o el usuario presiona Enter | (value: string \| number) |
 | input  | 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`. | —                         |

examples/docs/es/installation.md

@@ -24,11 +24,11 @@ Recomendamos a nuestros usuarios congelar la versión de Element cuando usas un
 
 ### Hello world
 
-Si esta usando un CDN, una página con Hello-World es fácil con Element. [Online Demo](https://codepen.io/ziyoung/pen/rRKYpd)
+Si esta usando un CDN, una página con Hello-World es fácil con Element. [Online Demo](https://codepen.io/bofeng/pen/poaEmJY)
 
-<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
-  See the Pen <a href='https://codepen.io/ziyoung/pen/rRKYpd/'>Element demo</a> by hetech
-  (<a href='https://codepen.io/ziyoung'>@ziyoung</a>) on <a href='https://codepen.io'>CodePen</a>.
+<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/bofeng/embed/poaEmJY/?height=265&theme-id=light&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
+  See the Pen <a href='https://codepen.io/bofeng/pen/poaEmJY/'>Element demo</a> by hetech
+  (<a href='https://codepen.io/bofeng'>@bofeng</a>) on <a href='https://codepen.io'>CodePen</a>.
 </iframe>
 
 Si esta usando npm y desea combinarlo con webpack, por favor continué a la siguiente página: [Quick Start](/#/es/component/quickstart)

examples/docs/es/layout.md

@@ -338,7 +338,7 @@ Las clases son:
 | 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               |
+| align     | alineación vertical del layout flex      | string | top/middle/bottom                        | —                |
 | tag       | tag de elemento propio                   | string | *                                        | div               |
 
 ### Atributos Col 

examples/docs/es/popover.md

@@ -4,7 +4,7 @@
 
 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`. En cuanto al elemento desencadenante, puedes escribirlo de dos maneras diferentes: usando el `slot="reference"`[named slot](https://vuejs.org/v2/guide/components.html#Named-Slots), o usando la directiva `v-popover` y poniendo  el `ref` de Popover.
+:::demo El atributo `trigger` es usado para definir como el popover se dispara: `hover`, `click`, `focus` o `manual`. En cuanto al elemento desencadenante, puedes escribirlo de dos maneras diferentes: usando el `slot="reference"`[named slot](https://v2.vuejs.org/v2/guide/components-slots#Named-Slots), o usando la directiva `v-popover` y poniendo  el `ref` de Popover.
 
 ```html
 <template>
@@ -148,7 +148,7 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
 | offset         | popover offset                           | number         | —                                        | 0                                        |
 | transition     | animación de transición del popover | 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-options | parámetros para [popper.js](https://popper.js.org/docs/v2/) | object         | por favor, refiérase a [popper.js](https://popper.js.org/docs/v2/) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
 | popper-class   | clase propia para popover                | string         | —                                        | —                                        |
 | open-delay     | retraso de la aparición cuando `trigger` es hover, en mili segundos | number         | —                                        | —                                        |
 | close-delay    | Retraso antes de desaparecer cuando el `trigger` es hover, en mili segundos. | number | — | 200 |

examples/docs/es/progress.md

@@ -168,4 +168,7 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
 | color        | color de fondo de la barra de progreso. Sobrescribe la propiedad `status` | string/function/array | — | '' |
 | width        | ancho del canvas que contiene la barra de progreso circula | number  | —                 | 126         |
 | show-text    | mostrar porcentaje                       | boolean | —                 | true        |
-| stroke-linecap  | circle/dashboard tipo de diseño al final del camino | string | butt/round/square | round |
+| stroke-linecap  | circle/dashboard tipo de diseño al final del camino | string | butt/round/square | round |
+| format  | personalizar el formato de texto estableciendo format  | function(percentage) | — | — |
+| define-back-color  | background color of progress bar (hex format) | string | — | — |
+| text-color  | text color of progress bar (hex format) | string | — | — |

examples/docs/es/result.md

@@ -0,0 +1,76 @@
+## Result
+
+Used to give feedback on the result of user's operation or access exception.
+
+### Basic usage
+
+:::demo
+
+```html
+<el-row>
+  <el-col :sm="12" :lg="6">
+    <el-result icon="success" title="Success Tip" subTitle="Please follow the instructions">
+      <template slot="extra">
+        <el-button type="primary" size="medium">Back</el-button>
+      </template>
+    </el-result>
+  </el-col>
+  <el-col :sm="12" :lg="6">
+    <el-result icon="warning" title="Warning Tip" subTitle="Please follow the instructions">
+      <template slot="extra">
+        <el-button type="primary" size="medium">Back</el-button>
+      </template>
+    </el-result>
+  </el-col>
+  <el-col :sm="12" :lg="6">
+    <el-result icon="error" title="Error Tip" subTitle="Please follow the instructions">
+      <template slot="extra">
+        <el-button type="primary" size="medium">Back</el-button>
+      </template>
+    </el-result>
+  </el-col>
+  <el-col :sm="12" :lg="6">
+    <el-result icon="info" title="Info Tip" subTitle="Please follow the instructions">
+      <template slot="extra">
+        <el-button type="primary" size="medium">Back</el-button>
+      </template>
+    </el-result>
+  </el-col>
+</el-row>
+```
+
+:::
+
+### Customized content
+
+:::demo
+
+```html
+<el-result title="404" subTitle="Sorry, request error">
+  <template slot="icon">
+    <el-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
+  </template>
+  <template slot="extra">
+    <el-button type="primary" size="medium">Back</el-button>
+  </template>
+</el-result>
+```
+
+:::
+
+### Result Attributes
+
+| Attribute     | Description    | Type            | Accepted Values      | Default   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| title          | title         | string  |          —             |    —     |
+| sub-title    | sub title  | string | — |    —  |
+| icon  | icon type    | string  |    success / warning / info / error  |  info |
+
+### Result Slots
+
+| Name | Description |
+|------|--------|
+| icon | custom icon  |
+| title | custom title     |
+| subTitle | custom sub title     |
+| extra | custom  extra area    |

examples/docs/es/skeleton.md

@@ -0,0 +1,315 @@
+## Skeleton
+
+When loading data, and you need a rich experience for visual and interactions for your end users, you can choose `skeleton`.
+
+### Basic usage
+
+The basic skeleton.
+
+:::demo
+
+```html
+<template>
+  <el-skeleton />
+</template>
+```
+
+:::
+
+### Configurable Rows
+
+You can configure the row numbers yourself, we are rendering a title row with 33% width of the others.
+
+:::demo
+
+```html
+<el-skeleton :rows="6" />
+```
+
+:::
+
+### Animation
+We have provided a switch flag indicating whether showing the loading animation, called `animated` when this is true, all children of `el-skeleton` will show animation
+
+:::demo
+
+```html
+<el-skeleton :rows="6" animated />
+```
+
+:::
+
+### Customized Template
+Element only provides the most common template, sometimes that could be a problem, so you have a slot named `template` to do that work.
+
+Also we have provided different types skeleton unit that you can choose, for more detailed info, please scroll down to the bottom of this page to see the API description. Also, when building your own customized skeleton structure, you should be structuring them as closer to the real DOM as possible, which avoiding the DOM bouncing caused by the height difference.
+
+:::demo
+
+```html
+<template>
+  <el-skeleton style="width: 240px">
+    <template slot="template">
+      <el-skeleton-item variant="image" style="width: 240px; height: 240px;" />
+      <div style="padding: 14px;">
+        <el-skeleton-item variant="p" style="width: 50%" />
+        <div
+          style="display: flex; align-items: center; justify-items: space-between;"
+        >
+          <el-skeleton-item variant="text" style="margin-right: 16px;" />
+          <el-skeleton-item variant="text" style="width: 30%;" />
+        </div>
+      </div>
+    </template>
+  </el-skeleton>
+</template>
+```
+
+:::
+
+### Loading state
+
+When `Loading` ends, we always need to show the real UI with data to our end users. with the attribtue `loading` we can control whether showing the DOM. You can also use slot `default` to structure the real DOM element.
+
+:::demo
+
+```html
+<template>
+  <div style="width: 240px">
+    <p>
+      <label style="margin-right: 16px;">Switch Loading</label>
+      <el-switch v-model="loading" />
+    </p>
+    <el-skeleton style="width: 240px" :loading="loading" animated>
+      <template slot="template">
+        <el-skeleton-item
+          variant="image"
+          style="width: 240px; height: 240px;"
+        />
+        <div style="padding: 14px;">
+          <el-skeleton-item variant="h3" style="width: 50%;" />
+          <div
+            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
+          >
+            <el-skeleton-item variant="text" style="margin-right: 16px;" />
+            <el-skeleton-item variant="text" style="width: 30%;" />
+          </div>
+        </div>
+      </template>
+      <template>
+        <el-card :body-style="{ padding: '0px', marginBottom: '1px' }">
+          <img
+            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
+            class="image"
+          />
+          <div style="padding: 14px;">
+            <span>Delicious hamberger</span>
+            <div class="bottom card-header">
+              <span class="time">{{ currentDate }}</span>
+              <el-button type="text" class="button">Operation button</el-button>
+            </div>
+          </div>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        loading: true,
+        currentDate: '2021-06-01'
+      }
+    },
+  }
+</script>
+```
+
+:::
+
+
+### Rendering a list of data
+
+Most of the time, skeleton is used as indicators of rendering a list of data which haven't been fetched from server yet, then we need to create a list of skeleton out of no where to make it look like it is loading, with `count` attribute, you can control how many these templates you need to render to the browser.
+
+
+:::tip
+We do not recommend rendering lots of fake UI to the browser, it will still cause the performance issue, it also costs longer to destroy the skeleton. Keep `count` as small as it can be to make better user experience.
+:::
+
+:::demo
+
+```html
+<template>
+  <div style="width: 400px">
+    <p>
+      <el-button @click="setLoading">Click me to reload</el-button>
+    </p>
+    <el-skeleton style="width:400px" :loading="loading" animated :count="3">
+      <template slot="template">
+        <el-skeleton-item
+          variant="image"
+          style="width: 400px; height: 267px;"
+        />
+        <div style="padding: 14px;">
+          <el-skeleton-item variant="h3" style="width: 50%;" />
+          <div
+            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
+          >
+            <el-skeleton-item variant="text" style="margin-right: 16px;" />
+            <el-skeleton-item variant="text" style="width: 30%;" />
+          </div>
+        </div>
+      </template>
+      <template>
+        <el-card
+          :body-style="{ padding: '0px', marginBottom: '1px' }"
+          v-for="item in lists"
+          :key="item.name"
+        >
+          <img :src="item.imgUrl" class="image multi-content" />
+          <div style="padding: 14px;">
+            <span>Delicious hamberger</span>
+            <div class="bottom card-header">
+              <span class="time">{{ currentDate }}</span>
+              <el-button type="text" class="button">Operation button</el-button>
+            </div>
+          </div>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        loading: true,
+        currentDate: '2021-06-01',
+        lists: [],
+      }
+    },
+    mounted() {
+      this.loading = false
+      this.lists = [
+        {
+          imgUrl:
+            'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+          name: 'Deer',
+        },
+        {
+          imgUrl:
+            'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+          name: 'Horse',
+        },
+        {
+          imgUrl:
+            'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+          name: 'Mountain Lion',
+        },
+      ]
+    },
+    methods: {
+      setLoading() {
+        this.loading = true
+        setTimeout(() => (this.loading = false), 2000)
+      },
+    },
+  }
+</script>
+```
+
+:::
+
+### Avoiding rendering bouncing.
+Sometimes API responds very quickly, when that happens, the skeleton just gets rendered to the DOM then it needs to switch back to real DOM, that causes the sudden flashy. To avoid such thing, you can use the `throttle` attribute.
+
+
+:::demo
+
+```html
+<template>
+  <div style="width: 240px">
+    <p>
+      <label style="margin-right: 16px;">Switch Loading</label>
+      <el-switch v-model="loading" />
+    </p>
+    <el-skeleton
+      style="width: 240px"
+      :loading="loading"
+      animated
+      :throttle="500"
+    >
+      <template slot="template">
+        <el-skeleton-item
+          variant="image"
+          style="width: 240px; height: 240px;"
+        />
+        <div style="padding: 14px;">
+          <el-skeleton-item variant="h3" style="width: 50%;" />
+          <div
+            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
+          >
+            <el-skeleton-item variant="text" style="margin-right: 16px;" />
+            <el-skeleton-item variant="text" style="width: 30%;" />
+          </div>
+        </div>
+      </template>
+      <template>
+        <el-card :body-style="{ padding: '0px', marginBottom: '1px'}">
+          <img
+            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
+            class="image"
+          />
+          <div style="padding: 14px;">
+            <span>Delicious hamberger</span>
+            <div class="bottom card-header">
+              <span class="time">{{ currentDate }}</span>
+              <el-button type="text" class="button">operation button</el-button>
+            </div>
+          </div>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        loading: false,
+        currentDate: '2021-06-01'
+      }
+    },
+  }
+</script>
+```
+:::
+
+### Skeleton Attributes
+
+| Attribute    | Description  | Type    | Acceptable Value | Default |
+| ------- | ---------------- | ------- | ------------ | ------ |
+| animated | whether showing the animation | boolean | true / false | false |
+| count   | how many fake items to render to the DOM | number | integer | 1 |
+| loading | whether showing the skeleton | boolean | true / false | true  |
+| rows    | numbers of the row, only useful when no template slot were given | number  | integer  | 4      |
+| throttle | Rendering delay in millseconds | number | integer | 0 |
+
+
+### Skeleton Item Attributes
+| Attribute    | Description             | Type    | Acceptable Value       | Default  |
+| ------- | ---------------- | ------- | ------------ | ------ |
+| variant | The current rendering skeleton type | Enum(string) | p / h1 / h3 / text / caption / button / image / circle / rect | text |
+
+
+### Skeleton Slots
+
+| Name | Description |
+| ---- | ----------- |
+| default | Real rendering DOM |
+| template | Custom rendering skeleton template |

examples/docs/es/statistic.md

@@ -0,0 +1,252 @@
+## Statistic
+
+Used to highlight a certain number or group of numbers, such as showing a numerical value, such as a dollar amount, ranking, etc.
+
+Countdown mode
+
+### Basic usage
+
+The component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on
+:::demo
+
+```html
+<template>
+  <div>
+    <el-row :gutter="20">
+      <el-col :span="6">
+        <div>
+          <el-statistic
+            group-separator=","
+            :precision="2"
+            :value="value2"
+            :title="title"
+          ></el-statistic>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div>
+          <el-statistic title="Gender Distribution">
+            <template slot="formatter">
+              456/2
+            </template>
+          </el-statistic>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div>
+          <el-statistic
+            group-separator=","
+            :precision="2"
+            decimal-separator="."
+            :value="value1"
+            :title="title"
+          >
+            <template slot="prefix">
+              <i class="el-icon-s-flag" style="color: red"></i>
+            </template>
+            <template slot="suffix">
+              <i class="el-icon-s-flag" style="color: blue"></i>
+            </template>
+          </el-statistic>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div>
+          <el-statistic :value="like ? 521 : 520" title="Feedback">
+            <template slot="suffix">
+              <span @click="like = !like" class="like">
+                <i
+                  class="el-icon-star-on"
+                  style="color:red"
+                  v-show="!!like"
+                ></i>
+                <i class="el-icon-star-off" v-show="!like"></i>
+              </span>
+            </template>
+          </el-statistic>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        like: true,
+        value1: 4154.564,
+        value2: 2222,
+        title: "Growth this year",
+      };
+    },
+  };
+</script>
+<style lang="scss">
+  .like {
+    cursor: pointer;
+    font-size: 25px;
+    display: inline-block;
+  }
+</style>
+```
+
+:::
+
+### Count down
+
+:::warning
+Suspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node **
+
+If you need to add time to the original, please note that the overall time (the amount of time added and the original time) must be a **future** time node, otherwise it is still the end of the countdown
+:::
+:::demo Providing a future time via 'value' will enable the countdown function
+
+```html
+<template>
+  <div>
+    <el-row :gutter="20">
+      <el-col :span="14">
+        <el-card shadow="hover" style="width: 100%; ">
+          <div style="width: 100%; display: inline-block; ">
+            <el-statistic
+              :value="deadline2"
+              time-indices
+              title="🎉Price reduction of goods🎉"
+            >
+              <template slot="suffix">
+                panic purchase
+              </template>
+            </el-statistic>
+          </div>
+        </el-card>
+        <el-card shadow="hover" style="width: 100%;margin-top: 20px; ">
+          <div style="width: 100%; display: inline-block;">
+            <el-statistic
+              @finish="hilarity"
+              :value="deadline3"
+              time-indices
+              title="The Value of Time"
+            >
+              <template slot="suffix">
+                <el-button type="primary " size="small" @click="add"
+                  >add 10s</el-button
+                >
+              </template>
+            </el-statistic>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="10">
+        <el-card shadow="hover" style="width: 100%;">
+          <div slot="header" class="clearfix">
+            <span style="font-size: 14px;">Henry·Wadsworth·Longfellow</span>
+            <el-button
+              style="float: right; padding: 3px 0"
+              type="text"
+              @click="clickFn"
+              >suspend</el-button
+            >
+          </div>
+          <div style="font-size: 16px;text-align: left;">
+            Don't sigh in the past, it is no longer back
+          </div>
+          <div style="font-size: 16px;text-align: left;margin-top: 15px;">
+            Be wise to improve the present
+          </div>
+          <div style="font-size: 16px;text-align: left;margin-top: 15px;">
+            To not worry not afraid of the firm will into the complicated future
+          </div>
+          <div style="margin-top: 40px;"></div>
+          <el-statistic
+            ref="statistic"
+            @finish="hilarity"
+            format="HH:mm:ss"
+            :value="deadline4"
+            title="Distance to Tomorrow:"
+            time-indices
+          >
+          </el-statistic>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        deadline2: Date.now() + 1000 * 60 * 60 * 8,
+        deadline3: Date.now() + 1000 * 60 * 30,
+        deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
+        stop: true,
+      };
+    },
+    methods: {
+      hilarity() {
+        this.$notify({
+          title: "Prompt",
+          message:
+            "Time is up, do you know that an inch of gold can't buy an inch of time?",
+          duration: 0,
+        });
+      },
+      clickFn() {
+        this.$refs.statistic.suspend(this.stop);
+        this.stop = !this.stop;
+      },
+      add() {
+        this.deadline3 = this.deadline3 + 1000 * 10;
+      },
+    },
+  };
+</script>
+```
+
+:::
+
+### Statistic Attributes
+
+| Attribute         | Description                    | Type                        | Accepted Values | Default |
+| ----------------- | ------------------------------ | --------------------------- | --------------- | ------- |
+| value             | Numerical content              | string \| number            | -               | -       |
+| decimal-separator | Setting the decimal point      | string                      | -               | .       |
+| formatter         | Custom numerical presentation  | v-slot \|({value}) => VNode | -               | -       |
+| group-separator   | Sets the thousandth identifier | string                      | -               | ,       |
+| precision         | numerical precision            | number                      | -               | -       |
+| prefix            | Sets the prefix of a number    | string \| v-slot            | -               | -       |
+| suffix            | Sets the suffix of a number    | string \| v-slot            | -               | -       |
+| title             | Numeric titles                 | string \| v-slot            | -               | -       |
+| value-style       | Styles numeric values          | style                       | -               | -       |
+| rate              | Set the ratio                  | number                      | -               | 1000    |
+
+### Statistic Slots
+
+| Name      | Description                 |
+| --------- | --------------------------- |
+| prefix    | Numeric prefix              |
+| suffix    | Suffixes for numeric values |
+| formatter | Numerical content           |
+| title     | Numeric titles              |
+
+### Statistic.Countdown Attributes
+
+| Attribute    | Description                              | Type    | Options     | Default    |
+| ------------ | ---------------------------------------- | ------- | ----------- | ---------- |
+| time-indices | Whether to enable the countdown function | boolean | true\|false | false      |
+| value        | Required value, enter the bound value    | string  | —           | —          |
+| format       | Formatting the countdown display         | string  | —           | 'HH:mm:ss' |
+
+### Statistic.Countdown Events
+
+| Method | Description                                | Parameters       |
+| ------ | ------------------------------------------ | ---------------- |
+| change | Enable in the 'countdown' function         | (value: Date)    |
+| finish | Launched after the 'countdown' is complete | (value: boolean) |
+
+### Statistic Methods
+
+| Method  | Description         | Parameters      | CallBack      |
+| ------- | ------------------- | --------------- | ------------- |
+| suspend | Pause the countdown | (value:boolean) | (value: Date) |

examples/docs/es/table.md

@@ -1089,7 +1089,7 @@ Filtra la tabla para encontrar la información que necesita.
 
 Personalice la columna de la tabla para que pueda integrarse con otros componentes.
 
-:::demo Tiene acceso a la siguiente información: row, column, $index, store (gestor de estados de la tabla) por [Scoped slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots).
+:::demo Tiene acceso a la siguiente información: row, column, $index, store (gestor de estados de la tabla) por [Scoped slots](https://v2.vuejs.org/v2/guide/components-slots#Scoped-Slots).
 ```html
 <template>
   <el-table
@@ -1170,7 +1170,7 @@ Personalice la columna de la tabla para que pueda integrarse con otros component
 ### Table con cabecera personalizada
 
 Se puede personalizar el encabezado de la tabla para que se pueda adaptar aún más.
-:::demo Puede personalizar el aspecto del encabezado con header [scoped slots](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots).
+:::demo Puede personalizar el aspecto del encabezado con header [scoped slots](https://v2.vuejs.org/v2/guide/components-slots#Scoped-Slots).
 ```html
 <template>
   <el-table
@@ -1822,6 +1822,7 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
 | 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                                    |
+| highlight-selection-row | resaltar la selección de líneas de verificación | 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         | —                              | —                                        |
@@ -1921,4 +1922,4 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
 | Name | Description |
 |------|--------|
 | — | Contenido personalizado para las columnas de la tabla. El parámetro del scope es { row, column, $index } |
-| header | Contenido personalizado para el encabezado de la tabla. El parámetro del scope es { column, $index } |
+| header | Contenido personalizado para el encabezado de la tabla. El parámetro del scope es { column, $index } |

examples/docs/es/tooltip.md

@@ -187,7 +187,7 @@ Es necesario envolver los elementos de forma deshabilitados en un elemento conte
 | 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 }` |
+| popper-options | parámetros de [popper.js](https://popper.js.org/docs/v2/) | Object  | referirse a la documentación de [popper.js](https://popper.js.org/docs/v2/) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
 | open-delay     | retraso de la apariencia, en mili segundos | 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  | —                                        | —                                        |

examples/docs/es/transition.md

@@ -1,6 +1,6 @@
 ## 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).
+Puede usar directamente las transiciones incorporadas en Element. Antes de hacerlo, por favor lea la [documentación](https://v2.vuejs.org/v2/api/#transition).
 
 ### Fade
 

examples/docs/fr-FR/date-picker.md

@@ -456,6 +456,7 @@ Lorsque vous choisissez une plage de dates, vous pouvez assigner l'horaire de d
 | prefix-icon | Icône de préfixe. | string | — | el-icon-date |
 | clear-icon | Icône de reset. | string | — | el-icon-circle-close |
 | validate-event | Si la validation doit être déclenchée. | boolean | - | true |
+| append-to-body     | S'il faut ajouter le DatePicker au body | boolean   | — | true |
 
 ### Options du Picker
 | Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |

examples/docs/fr-FR/datetime-picker.md

@@ -46,7 +46,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
       return {
         pickerOptions: {
           shortcuts: [{
-            text: 'Aujourdh\'ui',
+            text: 'Aujourd\'hui',
             onClick(picker) {
               picker.$emit('pick', new Date());
             }

examples/docs/fr-FR/descriptions.md

@@ -0,0 +1,191 @@
+## Descriptions
+
+Display multiple fields in list form.
+
+### Basic usage
+
+:::demo
+
+```html
+<el-descriptions title="User Info">
+    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
+    <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+    <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
+    <el-descriptions-item label="Remarks">
+      <el-tag size="small">School</el-tag>
+    </el-descriptions-item>
+    <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
+</el-descriptions>
+```
+:::
+
+### Sizes
+
+:::demo
+
+```html
+<template>
+  <el-radio-group v-model="size">
+    <el-radio label="">Default</el-radio>
+    <el-radio label="medium">Medium</el-radio>
+    <el-radio label="small">Small</el-radio>
+    <el-radio label="mini">Mini</el-radio>
+  </el-radio-group>
+
+  <el-descriptions class="margin-top" title="With border" :column="3" :size="size" border>
+    <template slot="extra">
+      <el-button type="primary" size="small">Operation</el-button>
+    </template>
+    <el-descriptions-item>
+      <template slot="label">
+        <i class="el-icon-user"></i>
+        Username
+      </template>
+      kooriookami
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template slot="label">
+        <i class="el-icon-mobile-phone"></i>
+        Telephone
+      </template>
+      18100000000
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template slot="label">
+        <i class="el-icon-location-outline"></i>
+        Place
+      </template>
+      Suzhou
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template slot="label">
+        <i class="el-icon-tickets"></i>
+        Remarks
+      </template>
+      <el-tag size="small">School</el-tag>
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template slot="label">
+        <i class="el-icon-office-building"></i>
+        Address
+      </template>
+      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
+    </el-descriptions-item>
+  </el-descriptions>
+
+  <el-descriptions class="margin-top" title="Without border" :column="3" :size="size">
+    <template slot="extra">
+      <el-button type="primary" size="small">Operation</el-button>
+    </template>
+    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
+    <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+    <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
+    <el-descriptions-item label="Remarks">
+      <el-tag size="small">School</el-tag>
+    </el-descriptions-item>
+    <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
+  </el-descriptions>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        size: ''
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Vertical List
+
+:::demo
+
+```html
+<el-descriptions title="Vertical list with border" direction="vertical" :column="4" border>
+  <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+  <el-descriptions-item label="Place" :span="2">Suzhou</el-descriptions-item>
+  <el-descriptions-item label="Remarks">
+    <el-tag size="small">School</el-tag>
+  </el-descriptions-item>
+  <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
+</el-descriptions>
+
+<el-descriptions class="margin-top" title="Vertical list without border" :column="4" direction="vertical">
+  <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+  <el-descriptions-item label="Place" :span="2">Suzhou</el-descriptions-item>
+  <el-descriptions-item label="Remarks">
+    <el-tag size="small">School</el-tag>
+  </el-descriptions-item>
+  <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
+</el-descriptions>
+```
+:::
+
+### Customized Style
+
+:::demo
+
+```html
+<el-descriptions title="Customized style list" :column="3" border>
+  <el-descriptions-item label="Username" label-class-name="my-label" content-class-name="my-content">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+  <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
+  <el-descriptions-item label="Remarks">
+    <el-tag size="small">School</el-tag>
+  </el-descriptions-item>
+  <el-descriptions-item label="Address" :content-style="{'text-align': 'right'}">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
+</el-descriptions>
+<style>
+  .my-label {
+    background: #E1F3D8;
+  }
+
+  .my-content {
+    background: #FDE2E2;
+  }
+</style>
+```
+:::
+
+### Descriptions Attributes
+| Attribute     | Description       | Type       | Accepted Values        | Default   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| border        | with or without border      | boolean  |          —             |    false     |
+| column        | numbers of `Descriptions Item` in one line  | number | — |    3  |
+| direction     | direction of list  | string | vertical / horizontal |    horizontal  |
+| size          | size of list    | string  |    medium / small / mini  |  — |
+| title         | title text, display on the top left    | string  |    —  |  — |
+| extra         | extra text, display on the top right    | string  |    —  |  — |
+| colon | change default props colon value of Descriptions Item   | boolean |    —  |  true |
+| labelClassName          | custom label class name         | string  |          —             |    —     |
+| contentClassName          | custom content class name         | string  |          —             |    —     |
+| labelStyle          | custom label style | object |          —             |    —     |
+| contentStyle         | custom content style | object |          —             |    —     |
+
+### Descriptions Slots
+
+| Name | Description |
+|------|--------|
+| title | custom title, display on the top left  |
+| extra | custom extra area, display on the top right  |
+
+### Descriptions Item Attributes
+| Attribute       | Description        | Type       | Accepted Values       | Default   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| label          | label text         | string  |          —             |    —     |
+| span          | colspan of column       | number  |          —             |    1     |
+| labelClassName          | custom label class name         | string  |          —             |    —     |
+| contentClassName          | custom content class name         | string  |          —             |    —     |
+| labelStyle          | custom label style | object |          —             |    —     |
+| contentStyle         | custom content style | object |          —             |    —     |
+
+### Descriptions Item Slots
+
+| Name | Description |
+|------|--------|
+| label | custom label  |

examples/docs/fr-FR/dropdown.md

@@ -281,6 +281,7 @@ En plus de la taille par défaut, le composant Dropdown propose trois autres tai
 | show-timeout | Délai avant d'afficher le menu (ne marche que si `trigger` est `hover`) | number | — | 250 |
 | hide-timeout | Délai avant de cacher le menu (ne marche que si `trigger` est `hover`) | number | — | 150 |
 | tabindex     | [tabindex](https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/tabindex) de Dropdown | number | — | 0 |
+| disabled     | Si le Dropdown est désactivé | boolean | — | false |
 
 ### Dropdown Slots
 

examples/docs/fr-FR/empty.md

@@ -0,0 +1,61 @@
+## Empty
+
+Placeholder hints for empty states.
+
+### Basic usage
+
+:::demo
+
+```html
+<el-empty description="description"></el-empty>
+```
+:::
+
+### Custom image
+
+Use `image` prop to set image URL.
+
+:::demo
+
+```html
+<el-empty image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-empty>
+```
+:::
+
+### Image size
+
+Use `image-size` prop to control image size.
+
+:::demo
+
+```html
+<el-empty :image-size="200"></el-empty>
+```
+:::
+
+### Bottom content
+
+Use the default slot to insert content at the bottom.
+
+:::demo
+```html
+<el-empty>
+  <el-button type="primary">Button</el-button>
+</el-empty>
+```
+:::
+
+### Empty Attributes
+| Attribute       | Description      | Type         | Acceptable Value    | Default Value   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| image          | image URL       | string  |          —             |    —     |
+| image-size    | image size (width)  | number | — |    —  |
+| description  | description    | string  |    —  |  — |
+
+### Empty Slots
+
+| Name | Description |
+|------|--------|
+| default | Custom bottom content  |
+| image | Custom image     |
+| description | Custom description     |

examples/docs/fr-FR/form.md

@@ -475,7 +475,7 @@ Les callback de validations personnalisées doivent être appelées. Un usage pl
       { type: 'number', message: 'l\'âge doit être un nombre'}
     ]"
   >
-    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
+    <el-input v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
   </el-form-item>
   <el-form-item>
     <el-button type="primary" @click="submitForm('numberValidateForm')">Soumettre</el-button>

examples/docs/fr-FR/i18n.md

@@ -147,7 +147,7 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
 ## Import via un CDN
 
 ```html
-<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/vue@2"></script>
 <script src="//unpkg.com/element-ui"></script>
 <script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
 
@@ -159,7 +159,7 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
 Compatible avec `vue-i18n`
 
 ```html
-<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/vue@2"></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>

examples/docs/fr-FR/image.md

@@ -148,6 +148,7 @@ En plus des propriétés natives de img, ce composant supporte le lazy loading,
 | scroll-container | Le conteneur auquel ajouter le listener du scroll en mode lazy loading. | string / HTMLElement | — | Le conteneur parent le plus proche avec la propriété overflow à auto ou scroll. |
 | preview-src-list | allow big image preview | Array | — | - |
 | z-index | set image preview z-index | Number | — | 2000 |
+| initial-index | set image preview array index | Number | — | - |
 
 ### Évènements
 | Nom | Description | Paramètres |

examples/docs/fr-FR/input.md

@@ -262,7 +262,7 @@ export default {
 
 ### Tailles
 
-:::demo Ajoutez l'attribut `size` pour changer la taille de l'input. En plus de la taille par défaut, il y a trois autres options: `large`, `small` et `mini`.
+:::demo Ajoutez l'attribut `size` pour changer la taille de l'input. En plus de la taille par défaut, il y a trois autres options: `medium`, `small` et `mini`.
 ```html
 <div class="demo-input-size">
   <el-input
@@ -603,7 +603,6 @@ export default {
 |----| ----| ----|
 | blur | Se déclenche quand Input perds le focus. | (event: Event) |
 | focus | Se déclenche quand Input a le focus. | (event: Event) |
-| change | Se déclenche quand la valeur change. | (value: string \ number) |
 | change | Déclenché uniquement lorsque la zone de saisie perd le focus ou que l'utilisateur appuie sur Entrée. | (value: string \| number) |
 | input | Déclenché lorsque la valeur d'entrée change. | (value: string \| number) |
 | clear | Se déclenche quand le champ est effacé par le bouton de reset. | — |

examples/docs/fr-FR/installation.md

@@ -25,11 +25,11 @@ Il est recommandé de fixer la version d'Element lors de l'utilisation du CDN. R
 
 ### Hello world
 
-Si vous utilisez un CDN, une page hello-world peut être obtenue facilement avec Element ([démo en ligne](https://codepen.io/ziyoung/pen/rRKYpd)).
+Si vous utilisez un CDN, une page hello-world peut être obtenue facilement avec Element ([démo en ligne](https://codepen.io/bofeng/pen/poaEmJY)).
 
-<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html" frameborder="no" allowtransparency="true" allowfullscreen="true">
-  See the Pen <a href='https://codepen.io/ziyoung/pen/rRKYpd/'>Element demo</a> by hetech
-  (<a href='https://codepen.io/ziyoung'>@ziyoung</a>) on <a href='https://codepen.io'>CodePen</a>.
+<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/bofeng/embed/poaEmJY/?height=265&theme-id=light&default-tab=html" frameborder="no" allowtransparency="true" allowfullscreen="true">
+  See the Pen <a href='https://codepen.io/bofeng/pen/poaEmJY/'>Element demo</a> by hetech
+  (<a href='https://codepen.io/bofeng'>@bofeng</a>) on <a href='https://codepen.io'>CodePen</a>.
 </iframe>
 
 Si vous utilisez npm et souhaitez ajouter webpack, continuez sur la page suivante: [Démarrer](/#/fr-FR/component/quickstart).

examples/docs/fr-FR/layout.md

@@ -338,7 +338,7 @@ Ces classes sont:
 | gutter | Espacement de la grille. | number | — | 0 |
 | type | Mode de mise en page. Vous pouvez utiliser flex, qui fonctionne sur les navigateurs modernes. | string | — | — |
 | justify | Alignement horizontal pour le mise en page flex. | string | start/end/center/space-around/space-between | start |
-| align | Alignement vertical pour la mise en page flex. | string | top/middle/bottom | top |
+| align | Alignement vertical pour la mise en page flex. | string | top/middle/bottom | — |
 | tag | Élément de tag personnalisé. | string | * | div |
 
 ### Attributs des colonnes

examples/docs/fr-FR/popover.md

@@ -150,7 +150,7 @@ Vous pouvez aussi imbriquer des opérations. Procéder ainsi est plus léger que
 | offset | Décalage du popover. | number | — |  0 |
 | transition | Animation de transition du popover. | string | — | el-fade-in-linear |
 | visible-arrow | Si une flèche doit être affichée ou non. Pour plus d'informations, référez-vous à [Vue-popper](https://github.com/element-component/vue-popper). | boolean | — | true |
-| popper-options | Paramètres pour [popper.js](https://popper.js.org/documentation.html). | object | Référez-vous à [popper.js](https://popper.js.org/documentation.html). | `{ boundariesElement: 'body', gpuAcceleration: false }` |
+| popper-options | Paramètres pour [popper.js](https://popper.js.org/docs/v2/). | object | Référez-vous à [popper.js](https://popper.js.org/docs/v2/). | `{ boundariesElement: 'body', gpuAcceleration: false }` |
 | popper-class | Classe du popover. | string | — | — |
 | open-delay | Délai d'affichage, lorsque `trigger` est 'hover', en millisecondes. | number | — | — |
 | close-delay | delay before disappearing when `trigger` is hover, in milliseconds | number | — | 200 |

examples/docs/fr-FR/progress.md

@@ -4,7 +4,7 @@ Progress est utilisé pour afficher la progression d'une opération et informer
 
 ### Barre de progression linéaire
 
-:::demo Utilisez l'attribut `percentage` pour indiquer le pourcentage. Cet attribut est **requis** et doit être compris entre 0 et 100. You can custom text format by setting `format`.
+:::demo Utilisez l'attribut `percentage` pour indiquer le pourcentage. Cet attribut est **requis** et doit être compris entre 0 et 100. Vous pouvez personnaliser le format du texte en définissant le `format`.
 ```html
 <el-progress :percentage="50"></el-progress>
 <el-progress :percentage="100" :format="format"></el-progress>
@@ -171,4 +171,7 @@ Vous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser
 | color  | La couleur de fon de la barre. Écrase `status`. | string/function/array | — | '' |
 | width | La largeur du canvas dans le cas d'une barre circulaire. | number | — | 126 |
 | show-text | Si le pourcentage doit être affiché. | boolean | — | true |
-| stroke-linecap  | circle/dashboard type shape at the end path | string | butt/round/square | round |
+| stroke-linecap  | circle/dashboard type shape at the end path | string | butt/round/square | round |
+| format  | Vous pouvez personnaliser le format du texte en définissant le format  | function(percentage) | — | — |
+| define-back-color  | background color of progress bar (hex format) | string | — | — |
+| text-color  | text color of progress bar (hex format) | string | — | — |

examples/docs/fr-FR/result.md

@@ -0,0 +1,76 @@
+## Result
+
+Used to give feedback on the result of user's operation or access exception.
+
+### Basic usage
+
+:::demo
+
+```html
+<el-row>
+  <el-col :sm="12" :lg="6">
+    <el-result icon="success" title="Success Tip" subTitle="Please follow the instructions">
+      <template slot="extra">
+        <el-button type="primary" size="medium">Back</el-button>
+      </template>
+    </el-result>
+  </el-col>
+  <el-col :sm="12" :lg="6">
+    <el-result icon="warning" title="Warning Tip" subTitle="Please follow the instructions">
+      <template slot="extra">
+        <el-button type="primary" size="medium">Back</el-button>
+      </template>
+    </el-result>
+  </el-col>
+  <el-col :sm="12" :lg="6">
+    <el-result icon="error" title="Error Tip" subTitle="Please follow the instructions">
+      <template slot="extra">
+        <el-button type="primary" size="medium">Back</el-button>
+      </template>
+    </el-result>
+  </el-col>
+  <el-col :sm="12" :lg="6">
+    <el-result icon="info" title="Info Tip" subTitle="Please follow the instructions">
+      <template slot="extra">
+        <el-button type="primary" size="medium">Back</el-button>
+      </template>
+    </el-result>
+  </el-col>
+</el-row>
+```
+
+:::
+
+### Customized content
+
+:::demo
+
+```html
+<el-result title="404" subTitle="Sorry, request error">
+  <template slot="icon">
+    <el-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
+  </template>
+  <template slot="extra">
+    <el-button type="primary" size="medium">Back</el-button>
+  </template>
+</el-result>
+```
+
+:::
+
+### Result Attributes
+
+| Attribute     | Description    | Type            | Accepted Values      | Default   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| title          | title         | string  |          —             |    —     |
+| sub-title    | sub title  | string | — |    —  |
+| icon  | icon type    | string  |    success / warning / info / error  |  info |
+
+### Result Slots
+
+| Name | Description |
+|------|--------|
+| icon | custom icon  |
+| title | custom title     |
+| subTitle | custom sub title     |
+| extra | custom  extra area    |

examples/docs/fr-FR/skeleton.md

@@ -0,0 +1,315 @@
+## Skeleton
+
+When loading data, and you need a rich experience for visual and interactions for your end users, you can choose `skeleton`.
+
+### Basic usage
+
+The basic skeleton.
+
+:::demo
+
+```html
+<template>
+  <el-skeleton />
+</template>
+```
+
+:::
+
+### Configurable Rows
+
+You can configure the row numbers yourself, we are rendering a title row with 33% width of the others.
+
+:::demo
+
+```html
+<el-skeleton :rows="6" />
+```
+
+:::
+
+### Animation
+We have provided a switch flag indicating whether showing the loading animation, called `animated` when this is true, all children of `el-skeleton` will show animation
+
+:::demo
+
+```html
+<el-skeleton :rows="6" animated />
+```
+
+:::
+
+### Customized Template
+Element only provides the most common template, sometimes that could be a problem, so you have a slot named `template` to do that work.
+
+Also we have provided different types skeleton unit that you can choose, for more detailed info, please scroll down to the bottom of this page to see the API description. Also, when building your own customized skeleton structure, you should be structuring them as closer to the real DOM as possible, which avoiding the DOM bouncing caused by the height difference.
+
+:::demo
+
+```html
+<template>
+  <el-skeleton style="width: 240px">
+    <template slot="template">
+      <el-skeleton-item variant="image" style="width: 240px; height: 240px;" />
+      <div style="padding: 14px;">
+        <el-skeleton-item variant="p" style="width: 50%" />
+        <div
+          style="display: flex; align-items: center; justify-items: space-between;"
+        >
+          <el-skeleton-item variant="text" style="margin-right: 16px;" />
+          <el-skeleton-item variant="text" style="width: 30%;" />
+        </div>
+      </div>
+    </template>
+  </el-skeleton>
+</template>
+```
+
+:::
+
+### Loading state
+
+When `Loading` ends, we always need to show the real UI with data to our end users. with the attribtue `loading` we can control whether showing the DOM. You can also use slot `default` to structure the real DOM element.
+
+:::demo
+
+```html
+<template>
+  <div style="width: 240px">
+    <p>
+      <label style="margin-right: 16px;">Switch Loading</label>
+      <el-switch v-model="loading" />
+    </p>
+    <el-skeleton style="width: 240px" :loading="loading" animated>
+      <template slot="template">
+        <el-skeleton-item
+          variant="image"
+          style="width: 240px; height: 240px;"
+        />
+        <div style="padding: 14px;">
+          <el-skeleton-item variant="h3" style="width: 50%;" />
+          <div
+            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
+          >
+            <el-skeleton-item variant="text" style="margin-right: 16px;" />
+            <el-skeleton-item variant="text" style="width: 30%;" />
+          </div>
+        </div>
+      </template>
+      <template>
+        <el-card :body-style="{ padding: '0px', marginBottom: '1px' }">
+          <img
+            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
+            class="image"
+          />
+          <div style="padding: 14px;">
+            <span>Delicious hamberger</span>
+            <div class="bottom card-header">
+              <span class="time">{{ currentDate }}</span>
+              <el-button type="text" class="button">Operation button</el-button>
+            </div>
+          </div>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        loading: true,
+        currentDate: '2021-06-01'
+      }
+    },
+  }
+</script>
+```
+
+:::
+
+
+### Rendering a list of data
+
+Most of the time, skeleton is used as indicators of rendering a list of data which haven't been fetched from server yet, then we need to create a list of skeleton out of no where to make it look like it is loading, with `count` attribute, you can control how many these templates you need to render to the browser.
+
+
+:::tip
+We do not recommend rendering lots of fake UI to the browser, it will still cause the performance issue, it also costs longer to destroy the skeleton. Keep `count` as small as it can be to make better user experience.
+:::
+
+:::demo
+
+```html
+<template>
+  <div style="width: 400px">
+    <p>
+      <el-button @click="setLoading">Click me to reload</el-button>
+    </p>
+    <el-skeleton style="width:400px" :loading="loading" animated :count="3">
+      <template slot="template">
+        <el-skeleton-item
+          variant="image"
+          style="width: 400px; height: 267px;"
+        />
+        <div style="padding: 14px;">
+          <el-skeleton-item variant="h3" style="width: 50%;" />
+          <div
+            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
+          >
+            <el-skeleton-item variant="text" style="margin-right: 16px;" />
+            <el-skeleton-item variant="text" style="width: 30%;" />
+          </div>
+        </div>
+      </template>
+      <template>
+        <el-card
+          :body-style="{ padding: '0px', marginBottom: '1px' }"
+          v-for="item in lists"
+          :key="item.name"
+        >
+          <img :src="item.imgUrl" class="image multi-content" />
+          <div style="padding: 14px;">
+            <span>Delicious hamberger</span>
+            <div class="bottom card-header">
+              <span class="time">{{ currentDate }}</span>
+              <el-button type="text" class="button">Operation button</el-button>
+            </div>
+          </div>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        loading: true,
+        currentDate: '2021-06-01',
+        lists: [],
+      }
+    },
+    mounted() {
+      this.loading = false
+      this.lists = [
+        {
+          imgUrl:
+            'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+          name: 'Deer',
+        },
+        {
+          imgUrl:
+            'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+          name: 'Horse',
+        },
+        {
+          imgUrl:
+            'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+          name: 'Mountain Lion',
+        },
+      ]
+    },
+    methods: {
+      setLoading() {
+        this.loading = true
+        setTimeout(() => (this.loading = false), 2000)
+      },
+    },
+  }
+</script>
+```
+
+:::
+
+### Avoiding rendering bouncing.
+Sometimes API responds very quickly, when that happens, the skeleton just gets rendered to the DOM then it needs to switch back to real DOM, that causes the sudden flashy. To avoid such thing, you can use the `throttle` attribute.
+
+
+:::demo
+
+```html
+<template>
+  <div style="width: 240px">
+    <p>
+      <label style="margin-right: 16px;">Switch Loading</label>
+      <el-switch v-model="loading" />
+    </p>
+    <el-skeleton
+      style="width: 240px"
+      :loading="loading"
+      animated
+      :throttle="500"
+    >
+      <template slot="template">
+        <el-skeleton-item
+          variant="image"
+          style="width: 240px; height: 240px;"
+        />
+        <div style="padding: 14px;">
+          <el-skeleton-item variant="h3" style="width: 50%;" />
+          <div
+            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
+          >
+            <el-skeleton-item variant="text" style="margin-right: 16px;" />
+            <el-skeleton-item variant="text" style="width: 30%;" />
+          </div>
+        </div>
+      </template>
+      <template>
+        <el-card :body-style="{ padding: '0px', marginBottom: '1px'}">
+          <img
+            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
+            class="image"
+          />
+          <div style="padding: 14px;">
+            <span>Delicious hamberger</span>
+            <div class="bottom card-header">
+              <span class="time">{{ currentDate }}</span>
+              <el-button type="text" class="button">operation button</el-button>
+            </div>
+          </div>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        loading: false,
+        currentDate: '2021-06-01'
+      }
+    },
+  }
+</script>
+```
+:::
+
+### Skeleton Attributes
+
+| Attribute    | Description  | Type    | Acceptable Value | Default |
+| ------- | ---------------- | ------- | ------------ | ------ |
+| animated | whether showing the animation | boolean | true / false | false |
+| count   | how many fake items to render to the DOM | number | integer | 1 |
+| loading | whether showing the skeleton | boolean | true / false | true  |
+| rows    | numbers of the row, only useful when no template slot were given | number  | integer  | 4      |
+| throttle | Rendering delay in millseconds | number | integer | 0 |
+
+
+### Skeleton Item Attributes
+| Attribute    | Description             | Type    | Acceptable Value       | Default  |
+| ------- | ---------------- | ------- | ------------ | ------ |
+| variant | The current rendering skeleton type | Enum(string) | p / h1 / h3 / text / caption / button / image / circle / rect | text |
+
+
+### Skeleton Slots
+
+| Name | Description |
+| ---- | ----------- |
+| default | Real rendering DOM |
+| template | Custom rendering skeleton template |

examples/docs/fr-FR/statistic.md

@@ -0,0 +1,252 @@
+## Statistic
+
+Used to highlight a certain number or group of numbers, such as showing a numerical value, such as a dollar amount, ranking, etc.
+
+Countdown mode
+
+### Basic usage
+
+The component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on
+:::demo
+
+```html
+<template>
+  <div>
+    <el-row :gutter="20">
+      <el-col :span="6">
+        <div>
+          <el-statistic
+            group-separator=","
+            :precision="2"
+            :value="value2"
+            :title="title"
+          ></el-statistic>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div>
+          <el-statistic title="Gender Distribution">
+            <template slot="formatter">
+              456/2
+            </template>
+          </el-statistic>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div>
+          <el-statistic
+            group-separator=","
+            :precision="2"
+            decimal-separator="."
+            :value="value1"
+            :title="title"
+          >
+            <template slot="prefix">
+              <i class="el-icon-s-flag" style="color: red"></i>
+            </template>
+            <template slot="suffix">
+              <i class="el-icon-s-flag" style="color: blue"></i>
+            </template>
+          </el-statistic>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div>
+          <el-statistic :value="like ? 521 : 520" title="Feedback">
+            <template slot="suffix">
+              <span @click="like = !like" class="like">
+                <i
+                  class="el-icon-star-on"
+                  style="color:red"
+                  v-show="!!like"
+                ></i>
+                <i class="el-icon-star-off" v-show="!like"></i>
+              </span>
+            </template>
+          </el-statistic>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        like: true,
+        value1: 4154.564,
+        value2: 2222,
+        title: "Growth this year",
+      };
+    },
+  };
+</script>
+<style lang="scss">
+  .like {
+    cursor: pointer;
+    font-size: 25px;
+    display: inline-block;
+  }
+</style>
+```
+
+:::
+
+### Count down
+
+:::warning
+Suspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node **
+
+If you need to add time to the original, please note that the overall time (the amount of time added and the original time) must be a ** future ** time node, otherwise it is still the end of the countdown
+:::
+:::demo Providing a future time via 'value' will enable the countdown function
+
+```html
+<template>
+  <div>
+    <el-row :gutter="20">
+      <el-col :span="14">
+        <el-card shadow="hover" style="width: 100%; ">
+          <div style="width: 100%; display: inline-block; ">
+            <el-statistic
+              :value="deadline2"
+              time-indices
+              title="🎉Price reduction of goods🎉"
+            >
+              <template slot="suffix">
+                panic purchase
+              </template>
+            </el-statistic>
+          </div>
+        </el-card>
+        <el-card shadow="hover" style="width: 100%;margin-top: 20px; ">
+          <div style="width: 100%; display: inline-block;">
+            <el-statistic
+              @finish="hilarity"
+              :value="deadline3"
+              time-indices
+              title="The Value of Time"
+            >
+              <template slot="suffix">
+                <el-button type="primary " size="small" @click="add"
+                  >add 10s</el-button
+                >
+              </template>
+            </el-statistic>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="10">
+        <el-card shadow="hover" style="width: 100%;">
+          <div slot="header" class="clearfix">
+            <span style="font-size: 14px;">Henry·Wadsworth·Longfellow</span>
+            <el-button
+              style="float: right; padding: 3px 0"
+              type="text"
+              @click="clickFn"
+              >suspend</el-button
+            >
+          </div>
+          <div style="font-size: 16px;text-align: left;">
+            Don't sigh in the past, it is no longer back
+          </div>
+          <div style="font-size: 16px;text-align: left;margin-top: 15px;">
+            Be wise to improve the present
+          </div>
+          <div style="font-size: 16px;text-align: left;margin-top: 15px;">
+            To not worry not afraid of the firm will into the complicated future
+          </div>
+          <div style="margin-top: 40px;"></div>
+          <el-statistic
+            ref="statistic"
+            @finish="hilarity"
+            format="HH:mm:ss"
+            :value="deadline4"
+            title="Distance to Tomorrow:"
+            time-indices
+          >
+          </el-statistic>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        deadline2: Date.now() + 1000 * 60 * 60 * 8,
+        deadline3: Date.now() + 1000 * 60 * 30,
+        deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
+        stop: true,
+      };
+    },
+    methods: {
+      hilarity() {
+        this.$notify({
+          title: "Prompt",
+          message:
+            "Time is up, do you know that an inch of gold can't buy an inch of time?",
+          duration: 0,
+        });
+      },
+      clickFn() {
+        this.$refs.statistic.suspend(this.stop);
+        this.stop = !this.stop;
+      },
+      add() {
+        this.deadline3 = this.deadline3 + 1000 * 10;
+      },
+    },
+  };
+</script>
+```
+
+:::
+
+### Statistic Attributes
+
+| Attribute         | Description                    | Type                        | Accepted Values | Default |
+| ----------------- | ------------------------------ | --------------------------- | --------------- | ------- |
+| value             | Numerical content              | string \| number            | -               | -       |
+| decimal-separator | Setting the decimal point      | string                      | -               | .       |
+| formatter         | Custom numerical presentation  | v-slot \|({value}) => VNode | -               | -       |
+| group-separator   | Sets the thousandth identifier | string                      | -               | ,       |
+| precision         | numerical precision            | number                      | -               | -       |
+| prefix            | Sets the prefix of a number    | string \| v-slot            | -               | -       |
+| suffix            | Sets the suffix of a number    | string \| v-slot            | -               | -       |
+| title             | Numeric titles                 | string \| v-slot            | -               | -       |
+| value-style       | Styles numeric values          | style                       | -               | -       |
+| rate              | Set the ratio                  | number                      | -               | 1000    |
+
+### Statistic Slots
+
+| Name      | Description                 |
+| --------- | --------------------------- |
+| prefix    | Numeric prefix              |
+| suffix    | Suffixes for numeric values |
+| formatter | Numerical content           |
+| title     | Numeric titles              |
+
+### Statistic.Countdown Attributes
+
+| Attribute    | Description                              | Type    | Options     | Default    |
+| ------------ | ---------------------------------------- | ------- | ----------- | ---------- |
+| time-indices | Whether to enable the countdown function | boolean | true\|false | false      |
+| value        | Required value, enter the bound value    | string  | —           | —          |
+| format       | Formatting the countdown display         | string  | —           | 'HH:mm:ss' |
+
+### Statistic.Countdown Events
+
+| Method | Description                                | Parameters       |
+| ------ | ------------------------------------------ | ---------------- |
+| change | Enable in the 'countdown' function         | (value: Date)    |
+| finish | Launched after the 'countdown' is complete | (value: boolean) |
+
+### Statistic Methods
+
+| Method  | Description         | Parameters      | CallBack      |
+| ------- | ------------------- | --------------- | ------------- |
+| suspend | Pause the countdown | (value:boolean) | (value: Date) |

examples/docs/fr-FR/table.md

@@ -1089,7 +1089,7 @@ Vous pouvez filtrer la table pour obtenir rapidement les lignes désirées.
 
 Vous pouvez customiser le contenu des colonnes afin de pouvoir utiliser d'autres composants.
 
-:::demo Vous avez acccès aux données suivantes: `row`, `column`, `$index` et `store` (gestionnaire d'état de Table) grâce aux [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots).
+:::demo Vous avez acccès aux données suivantes: `row`, `column`, `$index` et `store` (gestionnaire d'état de Table) grâce aux [Scoped slot](https://v2.vuejs.org/v2/guide/components-slots#Scoped-Slots).
 ```html
 <template>
   <el-table
@@ -1171,7 +1171,7 @@ Vous pouvez customiser le contenu des colonnes afin de pouvoir utiliser d'autres
 
 Vous pouvez également personnaliser le header de la table.
 
-:::demo Vous pouvez personnaliser le header grâce aux [slots avec portée](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots).
+:::demo Vous pouvez personnaliser le header grâce aux [slots avec portée](https://v2.vuejs.org/v2/guide/components-slots#Scoped-Slots).
 ```html
 <template>
   <el-table
@@ -1824,6 +1824,7 @@ Vous pouvez personnaliser les indices des colonnes de type `index`.
 | fit | Si la largeur des colonnes s'adapte au conteneur. | boolean | — | true |
 | show-header | Si le header de la table est visible. | boolean | — | true |
 | highlight-current-row | Si la ligne courante est mise en valeur. | boolean | — | false |
+| highlight-selection-row | Sélectionner la ligne à cocher en surbrillance | boolean | — | false |
 | current-row-key | Clé de la ligne actuelle. Propriété set-only. | string,number | — | — |
 | row-class-name | Fonction qui retourne un nom de classe pour chaque ligne. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne. | Function({row, rowIndex})/String | — | — |
 | row-style | Fonction qui retourne un style pour chaque ligne. Peut aussi être un objet assignant un style à chaque ligne. | Function({row, rowIndex})/Object | — | — |

examples/docs/fr-FR/tooltip.md

@@ -188,7 +188,7 @@ Les éléments de formulaire désactivés ne sont pas supportés par Tooltip, pl
 | offset | Décalage du Tooltip. | number | — |  0 |
 | transition | Animation de transition. | string | — | el-fade-in-linear |
 | visible-arrow | Si une flèche doit être affichée. Pour plus d'information, voir [Vue-popper](https://github.com/element-component/vue-popper). | boolean | — | true |
-| popper-options | Paramètres [popper.js](https://popper.js.org/documentation.html). | Object | Se référer à  [popper.js](https://popper.js.org/documentation.html). | `{ boundariesElement: 'body', gpuAcceleration: false }` |
+| popper-options | Paramètres [popper.js](https://popper.js.org/docs/v2/). | Object | Se référer à  [popper.js](https://popper.js.org/docs/v2/). | `{ boundariesElement: 'body', gpuAcceleration: false }` |
 | open-delay | Délai avant l'apparition en millisecondes. | number | — | 0 |
 | manual | Si le contrôle du Tooltip doit être manuel. `mouseenter` et `mouseleave` n'auront pas d'effet si `true`. | boolean | — | false |
 | popper-class | Classe du popper de Tooltip. | string | — | — |

examples/docs/fr-FR/transition.md

@@ -1,6 +1,6 @@
 ## Transitions
 
-Vous pouvez utiliser les transitions d'Element directement. Mais avant ça, merci de lire la [documentation](https://vuejs.org/v2/api/#transition).
+Vous pouvez utiliser les transitions d'Element directement. Mais avant ça, merci de lire la [documentation](https://v2.vuejs.org/v2/api/#transition).
 
 ### Fade
 

examples/docs/zh-CN/calendar.md

@@ -1,4 +1,4 @@
-## Calendar calendar
+## Calendar 日历
 
 显示日期
 

examples/docs/zh-CN/date-picker.md

@@ -111,6 +111,24 @@
     </el-date-picker>
   </div>
 </div>
+<div class="container">
+  <div class="block">
+    <span class="demonstration">多个月</span>
+    <el-date-picker
+      type="months"
+      v-model="value5"
+      placeholder="选择一个或多个月">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">多个年</span>
+    <el-date-picker
+      type="years"
+      v-model="value6"
+      placeholder="选择一个或多个年">
+    </el-date-picker>
+  </div>
+</div>
 
 <script>
   export default {
@@ -119,7 +137,9 @@
         value1: '',
         value2: '',
         value3: '',
-        value4: ''
+        value4: '',
+        value5: '',
+        value6: ''
       };
     }
   };
@@ -273,7 +293,7 @@
 
 使用`format`指定输入框的格式；使用`value-format`指定绑定值的格式。
 
-默认情况下，组件接受并返回`Date`对象。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：
+默认情况下，组件接受并返回`Date`对象。以下为可用的格式化字符串，以 UTC 2017年1月2日 03:04:05 为例：
 
 :::warning
 请注意大小写
@@ -395,7 +415,7 @@
 | placeholder | 非范围选择时的占位内容 | string | — | — |
 | start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
 | end-placeholder | 范围选择时结束日期的占位内容 | string | — | — |
-| type | 显示类型 | string | year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange | date |
+| type | 显示类型 | string | year/month/date/dates/months/years week/datetime/datetimerange/ daterange/monthrange | 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 | — | — |
@@ -409,6 +429,7 @@
 | prefix-icon | 自定义头部图标的类名 | string | — | el-icon-date |
 | clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |
 | validate-event | 输入时是否触发表单的校验 | boolean | - | true |
+| append-to-body | DetePicker 自身是否插入至 body 元素上。   | boolean   | — | true |
 
 ### Picker Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |

examples/docs/zh-CN/descriptions.md

@@ -0,0 +1,191 @@
+## Descriptions 描述列表
+
+列表形式展示多个字段。
+
+### 基础用法
+
+:::demo
+
+```html
+<el-descriptions title="用户信息">
+    <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
+    <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
+    <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
+    <el-descriptions-item label="备注">
+      <el-tag size="small">学校</el-tag>
+    </el-descriptions-item>
+    <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
+</el-descriptions>
+```
+:::
+
+### 不同尺寸
+
+:::demo
+
+```html
+<template>
+  <el-radio-group v-model="size">
+    <el-radio label="">默认</el-radio>
+    <el-radio label="medium">中等</el-radio>
+    <el-radio label="small">小型</el-radio>
+    <el-radio label="mini">超小</el-radio>
+  </el-radio-group>
+
+  <el-descriptions class="margin-top" title="带边框列表" :column="3" :size="size" border>
+    <template slot="extra">
+      <el-button type="primary" size="small">操作</el-button>
+    </template>
+    <el-descriptions-item>
+      <template slot="label">
+        <i class="el-icon-user"></i>
+        用户名
+      </template>
+      kooriookami
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template slot="label">
+        <i class="el-icon-mobile-phone"></i>
+        手机号
+      </template>
+      18100000000
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template slot="label">
+        <i class="el-icon-location-outline"></i>
+        居住地
+      </template>
+      苏州市
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template slot="label">
+        <i class="el-icon-tickets"></i>
+        备注
+      </template>
+      <el-tag size="small">学校</el-tag>
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template slot="label">
+        <i class="el-icon-office-building"></i>
+        联系地址
+      </template>
+      江苏省苏州市吴中区吴中大道 1188 号
+    </el-descriptions-item>
+  </el-descriptions>
+
+  <el-descriptions class="margin-top" title="无边框列表" :column="3" :size="size">
+    <template slot="extra">
+      <el-button type="primary" size="small">操作</el-button>
+    </template>
+    <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
+    <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
+    <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
+    <el-descriptions-item label="备注">
+      <el-tag size="small">学校</el-tag>
+    </el-descriptions-item>
+    <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
+  </el-descriptions>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        size: ''
+      };
+    }
+  }
+</script>
+```
+:::
+
+### 垂直列表
+
+:::demo
+
+```html
+<el-descriptions title="垂直带边框列表" direction="vertical" :column="4" border>
+  <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
+  <el-descriptions-item label="居住地" :span="2">苏州市</el-descriptions-item>
+  <el-descriptions-item label="备注">
+    <el-tag size="small">学校</el-tag>
+  </el-descriptions-item>
+  <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
+</el-descriptions>
+
+<el-descriptions class="margin-top" title="垂直无边框列表" :column="4" direction="vertical">
+  <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
+  <el-descriptions-item label="居住地" :span="2">苏州市</el-descriptions-item>
+  <el-descriptions-item label="备注">
+    <el-tag size="small">学校</el-tag>
+  </el-descriptions-item>
+  <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
+</el-descriptions>
+```
+:::
+
+### 自定义样式
+
+:::demo
+
+```html
+<el-descriptions title="自定义样式列表" :column="3" border>
+  <el-descriptions-item label="用户名" label-class-name="my-label" content-class-name="my-content">kooriookami</el-descriptions-item>
+  <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
+  <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
+  <el-descriptions-item label="备注">
+    <el-tag size="small">学校</el-tag>
+  </el-descriptions-item>
+  <el-descriptions-item label="联系地址" :contentStyle="{'text-align': 'right'}">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
+</el-descriptions>
+<style>
+  .my-label {
+    background: #E1F3D8;
+  }
+
+  .my-content {
+    background: #FDE2E2;
+  }
+</style>
+```
+:::
+
+### Descriptions Attributes
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| border        | 是否带有边框         | boolean  |          —             |    false     |
+| column        | 一行 `Descriptions Item` 的数量  | number | — |    3  |
+| direction     | 排列的方向  | string | vertical / horizontal |    horizontal  |
+| size          | 列表的尺寸    | string  |    medium / small / mini  |  — |
+| title         | 标题文本，显示在左上方    | string  |    —  |  — |
+| extra         | 操作区文本，显示在右上方    | string  |    —  |  — |
+| colon         | 是否显示冒号    | boolean  |    —  |  true |
+| labelClassName | 自定义标签类名    | string |    —  |  — |
+| contentClassName | 自定义内容类名    | string |    —  | — |
+| labelStyle | 自定义标签样式 | object |    —  | — |
+| contentStyle | 自定义内容样式    | object |    —  | — |
+
+### Descriptions Slots
+
+| Name | 说明 |
+|------|--------|
+| title | 自定义标题，显示在左上方  |
+| extra | 自定义操作区，显示在右上方  |
+
+### Descriptions Item Attributes
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| label          | 标签文本         | string  |          —             |    —     |
+| span          | 列的数量         | number  |          —             |    1     |
+| labelClassName | 自定义标签类名    | string |    —  |  — |
+| contentClassName | 自定义内容类名    | string |    —  | — |
+| labelStyle | 自定义标签样式 | object |    —  | — |
+| contentStyle | 自定义内容样式    | object |    —  | — |
+
+### Descriptions Item Slots
+
+| Name | 说明 |
+|------|--------|
+| label | 自定义标签文本  |

examples/docs/zh-CN/dropdown.md

@@ -283,6 +283,7 @@ Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场
 | show-timeout  | 展开下拉菜单的延时（仅在 trigger 为 hover 时有效）| number          | — | 250 |
 | hide-timeout  | 收起下拉菜单的延时（仅在 trigger 为 hover 时有效）| number          | — | 150 |
 | tabindex      | Dropdown 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |
+| disabled      | 是否禁用        | boolean         | —                      | false |
 
 ### Dropdown Slots
 

examples/docs/zh-CN/empty.md

@@ -0,0 +1,61 @@
+## Empty 空状态
+
+空状态时的占位提示。
+
+### 基础用法
+
+:::demo
+
+```html
+<el-empty description="描述文字"></el-empty>
+```
+:::
+
+### 自定义图片
+
+通过设置 `image` 属性传入图片 URL。
+
+:::demo
+
+```html
+<el-empty image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-empty>
+```
+:::
+
+### 图片尺寸
+
+通过设置 `image-size` 属性来控制图片大小。
+
+:::demo
+
+```html
+<el-empty :image-size="200"></el-empty>
+```
+:::
+
+### 底部内容
+
+使用默认插槽可在底部插入内容。
+
+:::demo
+```html
+<el-empty>
+  <el-button type="primary">按钮</el-button>
+</el-empty>
+```
+:::
+
+### Empty Attributes
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| image          | 图片地址         | string  |          —             |    —     |
+| image-size    | 图片大小（宽度）  | number | — |    —  |
+| description  | 文本描述    | string  |    —  |  — |
+
+### Empty Slots
+
+| Name | 说明 |
+|------|--------|
+| default | 自定义底部内容  |
+| image | 自定义图片     |
+| description | 自定义描述文字     |

examples/docs/zh-CN/form.md

@@ -470,7 +470,7 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
       { type: 'number', message: '年龄必须为数字值'}
     ]"
   >
-    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
+    <el-input v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
   </el-form-item>
   <el-form-item>
     <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
@@ -590,7 +590,7 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
 | label-position | 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 `label-width` | string |  right/left/top            | right |
 | label-width | 表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 `auto`。 | string | — | — |
 | label-suffix | 表单域标签的后缀 | string | — | — |
-| hide-required-asterisk | 是否显示必填字段的标签旁边的红色星号 | boolean | — | false |
+| hide-required-asterisk | 是否隐藏必填字段的标签旁边的红色星号 | boolean | — | false |
 | show-message  | 是否显示校验错误信息 | boolean | — | true |
 | inline-message  | 是否以行内形式展示校验信息 | boolean | — | false |
 | status-icon  | 是否在输入框中显示校验结果反馈图标 | boolean | — | false |

examples/docs/zh-CN/i18n.md

@@ -146,7 +146,7 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
 ## 通过 CDN 的方式加载语言文件
 
 ```html
-<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/vue@2"></script>
 <script src="//unpkg.com/element-ui"></script>
 <script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
 
@@ -158,7 +158,7 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
 搭配 `vue-i18n` 使用
 
 ```html
-<script src="//unpkg.com/vue"></script>
+<script src="//unpkg.com/vue@2"></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>

examples/docs/zh-CN/image.md

@@ -147,6 +147,7 @@
 | scroll-container | 开启懒加载后，监听 scroll 事件的容器 | string / HTMLElement | — | 最近一个 overflow 值为 auto 或 scroll 的父元素 |
 | preview-src-list | 开启图片预览功能 | Array | — | - |
 | z-index | 设置图片预览的 z-index | Number | — | 2000 |
+| initial-index | 图片预览初始图片index | Number | — | - |
 
 ### Events
 | 事件名称      | 说明    | 回调参数      |

examples/docs/zh-CN/input.md

@@ -250,7 +250,7 @@ export default {
 
 ### 尺寸
 
-:::demo 可通过 `size` 属性指定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。
+:::demo 可通过 `size` 属性指定输入框的尺寸，除了默认的大小外，还提供了 medium、small 和 mini 三种尺寸。
 ```html
 <div class="demo-input-size">
   <el-input

examples/docs/zh-CN/installation.md

@@ -25,11 +25,11 @@ npm i element-ui -S
 
 ### Hello world
 
-通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://codepen.io/ziyoung/pen/rRKYpd)
+通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://codepen.io/bofeng/pen/poaEmJY)
 
-<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html" frameborder="no" allowtransparency="true" allowfullscreen="true">
-  See the Pen <a href='https://codepen.io/ziyoung/pen/rRKYpd/'>Element demo</a> by hetech
-  (<a href='https://codepen.io/ziyoung'>@ziyoung</a>) on <a href='https://codepen.io'>CodePen</a>.
+<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/bofeng/embed/poaEmJY/?height=265&theme-id=light&default-tab=html" frameborder="no" allowtransparency="true" allowfullscreen="true">
+  See the Pen <a href='https://codepen.io/bofeng/pen/poaEmJY/'>Element demo</a> by hetech
+  (<a href='https://codepen.io/bofeng'>@bofeng</a>) on <a href='https://codepen.io'>CodePen</a>.
 </iframe>
 
 如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：[快速上手](/#/zh-CN/component/quickstart)。

examples/docs/zh-CN/layout.md

@@ -336,7 +336,7 @@ import 'element-ui/lib/theme-chalk/display.css';
 | gutter | 栅格间隔 | number | — | 0 |
 | type | 布局模式，可选 flex，现代浏览器下有效 | string | — | — |
 | justify | flex 布局下的水平排列方式 | string | start/end/center/space-around/space-between | start |
-| align | flex 布局下的垂直排列方式 | string | top/middle/bottom | top |
+| align | flex 布局下的垂直排列方式 | string | top/middle/bottom | — |
 | tag | 自定义元素标签 | string | * | div |
 
 ### Col Attributes

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`，`sizes`和特殊的布局符号`->`，`->`后的元素会靠右显示，`jumper`表示跳页元素，`total`表示总条目数，`sizes`用于设置每页显示的页码数量。
 ```html
 <div class="block">
   <span class="demonstration">页数较少时的效果</span>

examples/docs/zh-CN/popover.md

@@ -146,7 +146,7 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
 |  offset        |  出现位置的偏移量  | Number           | — |  0 |
 |  transition     |  定义渐变动画      | String             | — | fade-in-linear |
 |  visible-arrow   |  是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |
-|  popper-options        | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object            | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
+|  popper-options        | [popper.js](https://popper.js.org/docs/v2/) 的参数 | Object            | 参考 [popper.js](https://popper.js.org/docs/v2/) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
 | popper-class | 为 popper 添加类名 | String | — | — |
 | open-delay | 触发方式为 hover 时的显示延迟，单位为毫秒 | Number | — | — |
 | close-delay | 触发方式为 hover 时的隐藏延迟，单位为毫秒 | number | — | 200 |

examples/docs/zh-CN/progress.md

@@ -174,4 +174,7 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形
 | color  | 进度条背景色（会覆盖 status 状态颜色） | string/function/array | — | '' |
 | width  | 环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用） | number |  | 126 |
 | show-text  | 是否显示进度条文字内容 | boolean | — | true |
-| stroke-linecap  | circle/dashboard 类型路径两端的形状 | string | butt/round/square | round |
+| stroke-linecap  | circle/dashboard 类型路径两端的形状 | string | butt/round/square | round |
+| format  | 指定进度条文字内容 | function(percentage) | — | — |
+| define-back-color  | 指定进度条底色（支持 hex 格式） | string | — | — |
+| text-color  | 指定进度条字体颜色（支持 hex 格式） | string | — | — |

examples/docs/zh-CN/radio.md

@@ -187,7 +187,7 @@
 ### Radio Events
 | 事件名称 | 说明 | 回调参数 |
 |---------- |-------- |---------- |
-| change  | 绑定值变化时触发的事件 |  选中的 Radio label 值  |
+| input  | 绑定值变化时触发的事件 |  选中的 Radio label 值  |
 
 ### Radio-group Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
@@ -201,7 +201,7 @@
 ### Radio-group Events
 | 事件名称 | 说明 | 回调参数 |
 |---------- |-------- |---------- |
-| change  | 绑定值变化时触发的事件 |  选中的 Radio label 值  |
+| input  | 绑定值变化时触发的事件 |  选中的 Radio label 值  |
 
 ### Radio-button Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |

examples/docs/zh-CN/result.md

@@ -0,0 +1,76 @@
+## Result 结果
+
+用于对用户的操作结果或者异常状态做反馈。
+
+### 基础用法
+
+:::demo
+
+```html
+<el-row>
+  <el-col :sm="12" :lg="6">
+    <el-result icon="success" title="成功提示" subTitle="请根据提示进行操作">
+      <template slot="extra">
+        <el-button type="primary" size="medium">返回</el-button>
+      </template>
+    </el-result>
+  </el-col>
+  <el-col :sm="12" :lg="6">
+    <el-result icon="warning" title="警告提示" subTitle="请根据提示进行操作">
+      <template slot="extra">
+        <el-button type="primary" size="medium">返回</el-button>
+      </template>
+    </el-result>
+  </el-col>
+  <el-col :sm="12" :lg="6">
+    <el-result icon="error" title="错误提示" subTitle="请根据提示进行操作">
+      <template slot="extra">
+        <el-button type="primary" size="medium">返回</el-button>
+      </template>
+    </el-result>
+  </el-col>
+  <el-col :sm="12" :lg="6">
+    <el-result icon="info" title="信息提示" subTitle="请根据提示进行操作">
+      <template slot="extra">
+        <el-button type="primary" size="medium">返回</el-button>
+      </template>
+    </el-result>
+  </el-col>
+</el-row>
+```
+
+:::
+
+### 自定义内容
+
+:::demo
+
+```html
+<el-result title="404" subTitle="抱歉，请求错误">
+  <template slot="icon">
+    <el-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
+  </template>
+  <template slot="extra">
+    <el-button type="primary" size="medium">返回</el-button>
+  </template>
+</el-result>
+```
+
+:::
+
+### Result Attributes
+
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| title          | 标题         | string  |          —             |    —     |
+| sub-title    | 二级标题  | string | — |    —  |
+| icon  | 图标类型    | string  |    success / warning / info / error  |  info |
+
+### Result Slots
+
+| Name | 说明 |
+|------|--------|
+| icon | 自定义图标  |
+| title | 自定义标题     |
+| subTitle | 自定义二级标题     |
+| extra | 自定义底部额外区域     |

examples/docs/zh-CN/skeleton.md

@@ -0,0 +1,316 @@
+## Skeleton 骨架屏
+
+在需要等待加载内容的位置设置一个骨架屏，某些场景下比 Loading 的视觉效果更好。
+
+### 基础用法
+
+基础的骨架效果。
+
+:::demo
+
+```html
+<template>
+  <el-skeleton />
+</template>
+```
+
+:::
+
+### 更多参数
+
+可以配置骨架屏段落数量，以便更接近真实渲染效果。首行会被渲染一个长度 33% 的段首。
+
+:::demo
+
+```html
+<el-skeleton :rows="6" />
+```
+
+:::
+
+### 动画效果
+
+显示动画效果。
+
+:::demo
+
+```html
+<el-skeleton :rows="6" animated />
+```
+
+:::
+
+### 自定义样式
+
+Element 提供的排版模式有时候并不满足要求，当您想要用自己定义的模板时，可以通过一个具名 Slot 来自己设定模板。
+
+我们提供了不同的模板单元可供使用，具体可选值请看 API 详细描述。 建议在描述模板的时候，尽量靠近真实的 DOM 结构，这样可以避免 DOM 高度差距引起的抖动。
+:::demo
+
+```html
+<template>
+  <el-skeleton style="width: 240px">
+    <template slot="template">
+      <el-skeleton-item variant="image" style="width: 240px; height: 240px;" />
+      <div style="padding: 14px;">
+        <el-skeleton-item variant="p" style="width: 50%" />
+        <div
+          style="display: flex; align-items: center; justify-items: space-between;"
+        >
+          <el-skeleton-item variant="text" style="margin-right: 16px;" />
+          <el-skeleton-item variant="text" style="width: 30%;" />
+        </div>
+      </div>
+    </template>
+  </el-skeleton>
+</template>
+```
+
+:::
+
+### Loading 状态
+
+当 Loading 结束之后，我们往往需要显示真实的 UI，可以通过 `loading` 的值来控制是否显示真实的 DOM。然后通过
+具名 Slot 来设置当 loading 结束之后需要展示的 UI。
+
+:::demo
+
+```html
+<template>
+  <div style="width: 240px">
+    <p>
+      <label style="margin-right: 16px;">切换 Loading</label>
+      <el-switch v-model="loading" />
+    </p>
+    <el-skeleton style="width: 240px" :loading="loading" animated>
+      <template slot="template">
+        <el-skeleton-item
+          variant="image"
+          style="width: 240px; height: 240px;"
+        />
+        <div style="padding: 14px;">
+          <el-skeleton-item variant="h3" style="width: 50%;" />
+          <div
+            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
+          >
+            <el-skeleton-item variant="text" style="margin-right: 16px;" />
+            <el-skeleton-item variant="text" style="width: 30%;" />
+          </div>
+        </div>
+      </template>
+      <template>
+        <el-card :body-style="{ padding: '0px', marginBottom: '1px' }">
+          <img
+            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
+            class="image"
+          />
+          <div style="padding: 14px;">
+            <span>好吃的汉堡</span>
+            <div class="bottom card-header">
+              <span class="time">{{ currentDate }}</span>
+              <el-button type="text" class="button">操作按钮</el-button>
+            </div>
+          </div>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        loading: true,
+        currentDate: '2021-06-01'
+      }
+    },
+  }
+</script>
+```
+
+:::
+
+### 渲染多条数据
+
+大多时候, 骨架屏都被用来渲染列表, 当我们需要在从服务器获取数据的时候来渲染一个假的 UI。利用 `count` 这个属性就能控制渲染多少条假的数据在页面上
+
+:::tip
+请注意, 请尽可能的将 `count` 的大小保持在最小状态, 即使是假的 UI, DOM 元素多了之后, 照样会引起性能问题, 并且在骨架屏销毁时所消耗的时间也会更长(相对的)。
+:::
+
+:::demo
+
+
+```html
+<template>
+  <div style="width: 400px">
+    <p>
+      <el-button @click="setLoading">点我重新加载</el-button>
+    </p>
+    <el-skeleton style="width:400px" :loading="loading" animated :count="3">
+      <template slot="template">
+        <el-skeleton-item
+          variant="image"
+          style="width: 400px; height: 267px;"
+        />
+        <div style="padding: 14px;">
+          <el-skeleton-item variant="h3" style="width: 50%;" />
+          <div
+            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
+          >
+            <el-skeleton-item variant="text" style="margin-right: 16px;" />
+            <el-skeleton-item variant="text" style="width: 30%;" />
+          </div>
+        </div>
+      </template>
+      <template>
+        <el-card
+          :body-style="{ padding: '0px', marginBottom: '1px' }"
+          v-for="item in lists"
+          :key="item.name"
+        >
+          <img :src="item.imgUrl" class="image multi-content" />
+          <div style="padding: 14px;">
+            <span>{{ item.name }}</span>
+            <div class="bottom card-header">
+              <span class="time">{{ currentDate }}</span>
+              <el-button type="text" class="button">操作按钮</el-button>
+            </div>
+          </div>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        loading: true,
+        currentDate: '2021-06-01',
+        lists: [],
+      }
+    },
+    mounted() {
+      this.loading = false
+      this.lists = [
+        {
+          imgUrl:
+            'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+          name: '鹿',
+        },
+        {
+          imgUrl:
+            'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+          name: '马',
+        },
+        {
+          imgUrl:
+            'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+          name: '山狮',
+        },
+      ]
+    },
+    methods: {
+      setLoading() {
+        this.loading = true
+        setTimeout(() => (this.loading = false), 2000)
+      },
+    },
+  }
+</script>
+```
+
+:::
+
+### 防止渲染抖动
+
+有的时候，API 的请求回来的特别快，往往骨架占位刚刚被渲染，真实的数据就已经回来了，用户的界面会突然一闪，此时为了避免这种情况，就需要通过 `throttle` 属性来避免这个问题。
+
+:::demo
+
+```html
+<template>
+  <div style="width: 240px">
+    <p>
+      <label style="margin-right: 16px;">切换 Loading</label>
+      <el-switch v-model="loading" />
+    </p>
+    <el-skeleton
+      style="width: 240px"
+      :loading="loading"
+      animated
+      :throttle="500"
+    >
+      <template slot="template">
+        <el-skeleton-item
+          variant="image"
+          style="width: 240px; height: 240px;"
+        />
+        <div style="padding: 14px;">
+          <el-skeleton-item variant="h3" style="width: 50%;" />
+          <div
+            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
+          >
+            <el-skeleton-item variant="text" style="margin-right: 16px;" />
+            <el-skeleton-item variant="text" style="width: 30%;" />
+          </div>
+        </div>
+      </template>
+      <template>
+        <el-card :body-style="{ padding: '0px', marginBottom: '1px'}">
+          <img
+            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
+            class="image"
+          />
+          <div style="padding: 14px;">
+            <span>好吃的汉堡</span>
+            <div class="bottom card-header">
+              <span class="time">{{ currentDate }}</span>
+              <el-button type="text" class="button">操作按钮</el-button>
+            </div>
+          </div>
+        </el-card>
+      </template>
+    </el-skeleton>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        loading: false,
+        currentDate: '2021-06-01'
+      }
+    },
+  }
+</script>
+```
+
+:::
+
+### Skeleton Attributes
+
+| 参数     | 说明                                        | 类型    | 可选值       | 默认值 |
+| -------- | ------------------------------------------- | ------- | ------------ | ------ |
+| animated | 是否使用动画                                | boolean | true / false | false  |
+| count    | 渲染多少个 template, 建议使用尽可能小的数字 | number  | integer      | 1      |
+| loading  | 是否显示 skeleton 骨架屏                    | boolean | true / false | true |
+| rows     | 骨架屏段落数量                              | number  | 正整数       | 4      |
+| throttle | 延迟占位 DOM 渲染的时间, 单位是毫秒         | number  | 正整数       | 0      |
+
+### Skeleton Item Attributes
+
+| 参数    | 说明                     | 类型         | 可选值                                                               | 默认值 |
+| ------- | ------------------------ | ------------ | -------------------------------------------------------------------- | ------ |
+| variant | 当前显示的占位元素的样式 | Enum(string) | p / h1 / h3 / text / caption / button / image / circle / rect | text   |
+
+### Skeleton Slots
+
+| name     | description          |
+| -------- | -------------------- |
+| default  | 用来展示真实 UI     |
+| template | 用来展示自定义占位符 |

examples/docs/zh-CN/statistic.md

@@ -0,0 +1,254 @@
+## Statistic 统计数值
+
+用于突出某个或某组数字时，如显示数值，如金额，排名等。
+
+倒计时模式
+
+### 基础用法
+
+组件提供千分位的展示，不过可以通过 rate 来设置相应万分位等
+:::demo
+
+```html
+<template>
+  <div>
+    <el-row :gutter="20">
+      <el-col :span="6">
+        <div>
+          <el-statistic
+            group-separator=","
+            :precision="2"
+            :value="value2"
+            :title="title"
+          ></el-statistic>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div>
+          <el-statistic title="男女比">
+            <template slot="formatter">
+              456/2
+            </template>
+          </el-statistic>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div>
+          <el-statistic
+            group-separator=","
+            :precision="2"
+            decimal-separator="."
+            :value="value1"
+            :title="title"
+          >
+            <template slot="prefix">
+              <i class="el-icon-s-flag" style="color: red"></i>
+            </template>
+            <template slot="suffix">
+              <i class="el-icon-s-flag" style="color: blue"></i>
+            </template>
+          </el-statistic>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div>
+          <el-statistic :value="like ? 521 : 520" title="Feedback">
+            <template slot="suffix">
+              <span @click="like = !like" class="like">
+                <i
+                  class="el-icon-star-on"
+                  style="color:red"
+                  v-show="!!like"
+                ></i>
+                <i class="el-icon-star-off" v-show="!like"></i>
+              </span>
+            </template>
+          </el-statistic>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        like: true,
+        value1: 4154.564,
+        value2: 1314,
+        title: "增长人数",
+      };
+    },
+  };
+</script>
+<style lang="scss">
+  .like {
+    cursor: pointer;
+    font-size: 25px;
+    display: inline-block;
+  }
+</style>
+```
+
+:::
+
+### 倒计时
+
+:::warning
+如果需要在原基础上添加时间，请注意：整体的时间（添加的时间量和原定时间）必须是**未来**的时间节点，否则依旧是倒计时结束
+:::
+:::demo 通过 `value` 提供未来的时间，将开启倒计时功能
+
+```html
+<template>
+  <div>
+    <el-row :gutter="20">
+      <el-col :span="14">
+        <el-card shadow="hover" style="width: 100%;">
+          <div style="width: 100%; display: inline-block; ">
+            <el-statistic :value="deadline2" time-indices title="🎉商品降价🎉">
+              <template slot="suffix">
+                抢购即将开始
+              </template>
+            </el-statistic>
+          </div>
+        </el-card>
+        <el-card shadow="hover" style="width: 100%;margin-top: 20px; ">
+          <div style="width: 100%; display: inline-block; ">
+            <el-statistic
+              @finish="hilarity"
+              :value="deadline3"
+              time-indices
+              title="时间游戏"
+            >
+              <template slot="suffix">
+                <el-button type="primary " size="mini" @click="add"
+                  >add 10s</el-button
+                >
+              </template>
+            </el-statistic>
+          </div>
+        </el-card>
+        <el-card shadow="hover" style="width: 100%;margin-top: 20px; ">
+          <div style="width: 100%; display: inline-block;">
+            <el-statistic
+              format="DD天HH小时mm分钟"
+              :value="deadline5"
+              time-indices
+              title="🚩距离立夏还有："
+            >
+            </el-statistic>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="10">
+        <el-card shadow="hover" style="width: 100%;">
+          <div slot="header" class="clearfix">
+            <span>文嘉《明日歌》</span>
+            <el-button
+              style="float: right; padding: 3px 0"
+              type="text"
+              @click="clickFn"
+              >暂停</el-button
+            >
+          </div>
+          <div style="font-size: 18px;text-align: center; margin-top: 35px;">
+            明日复明日
+          </div>
+          <div style="font-size: 18px;text-align: center;">明日何其多</div>
+          <div style="font-size: 18px;text-align: center;">我生待明日</div>
+          <div style="font-size: 18px;text-align: center;">万事成蹉跎</div>
+          <div style="margin-top: 35px;"></div>
+          <el-statistic
+            ref="statistic"
+            @finish="hilarity"
+            format="HH:mm:ss"
+            :value="deadline4"
+            title="距离明日："
+            time-indices
+          >
+          </el-statistic>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        deadline2: Date.now() + 1000 * 60 * 60 * 8,
+        deadline3: Date.now() + 1000 * 60 * 30,
+        deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
+        deadline5: new Date("2023-05-06"),
+        stop: true,
+      };
+    },
+    methods: {
+      hilarity() {
+        this.$notify({
+          title: "提示",
+          message: "时间已到",
+          duration: 0,
+        });
+      },
+      clickFn() {
+        this.$refs.statistic.suspend(this.stop);
+        this.stop = !this.stop;
+      },
+      add() {
+        this.deadline3 = this.deadline3 + 1000 * 10;
+      },
+    },
+  };
+</script>
+```
+
+:::
+
+### Statistic Attributes
+
+| 参数              | 说明             | 类型                        | 可选值 | 默认值 |
+| ----------------- | ---------------- | --------------------------- | ------ | ------ |
+| value             | 数值内容         | string \| number            | —      | —      |
+| decimal-separator | 设置小数点       | string                      | —      | .      |
+| formatter         | 自定义数值展示   | v-slot \|({value}) => VNode | —      | —      |
+| group-separator   | 设置千分位标识符 | string                      | —      | ,      |
+| precision         | 数值精度         | number                      | —      | —      |
+| prefix            | 设置数值的前缀   | string \| v-slot            | —      | —      |
+| suffix            | 设置数值的后缀   | string \| v-slot            | —      | —      |
+| title             | 数值的标题       | string \| v-slot            | —      | —      |
+| value-style       | 设置数值的样式   | object                      | —      | —      |
+| rate              | 设置倍率         | number                      | —      | 1000   |
+
+### Statistic Slots
+
+| name      | 说明       |
+| --------- | ---------- |
+| prefix    | 数值的前缀 |
+| suffix    | 数值的后缀 |
+| formatter | 数值内容   |
+| title     | 数值的标题 |
+
+### Statistic.Countdown Attributes
+
+| 参数         | 说明               | 类型    | 可选值      | 默认值     |
+| ------------ | ------------------ | ------- | ----------- | ---------- |
+| time-indices | 是否开启倒计时功能 | boolean | true\|false | false      |
+| value        | 必填值，输入绑定值 | string  | —           | —          |
+| format       | 格式化倒计时展示   | string  | —           | 'HH:mm:ss' |
+
+### Statistic.Countdown Events
+
+| 事件名称 | 说明                   | 回调参数         |
+| -------- | ---------------------- | ---------------- |
+| change   | 在`倒计时`的功能中开启 | (value: Date)    |
+| finish   | 在`倒计时` 完成后启动  | (value: boolean) |
+
+### Statistic Methods
+
+| 方法名  | 说明       | 参数            | 回调参数      |
+| ------- | ---------- | --------------- | ------------- |
+| suspend | 暂停倒计时 | (value:boolean) | (value: Date) |

examples/docs/zh-CN/table.md

@@ -1420,7 +1420,7 @@
 
 表头支持自定义。
 
-:::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) 来自定义表头。
+:::demo 通过设置 [Scoped slot](https://v2.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
@@ -1860,6 +1860,7 @@
 | fit | 列的宽度是否自撑开 | boolean | — | true |
 | show-header | 是否显示表头 | boolean | — | true |
 | highlight-current-row | 是否要高亮当前行 | boolean | — | false |
+| highlight-selection-row | 是否要高亮复选框选中行（仅针对开启 `selection` 有效） | boolean | — | false |
 | current-row-key | 当前行的 key，只写属性 | String,Number | — | — |
 | row-class-name | 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 | Function({row, rowIndex})/String | — | — |
 | row-style | 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 | Function({row, rowIndex})/Object | — | — |

examples/docs/zh-CN/time-picker.md

@@ -1,6 +1,6 @@
 ## TimePicker 时间选择器
 
- 用于选择或输入日期
+ 用于选择或输入时间
 
 ### 固定时间点