mirror of
https://github.com/ElemeFE/element.git
synced 2025-12-19 12:04:02 +08:00
Compare commits
118 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
bf534d977e | ||
|
|
d6107fe33f | ||
|
|
d6f9adf5f7 | ||
|
|
6d6df13e56 | ||
|
|
e6785d6e3d | ||
|
|
a4c3ec847d | ||
|
|
3bc2d2b4db | ||
|
|
abb16771a5 | ||
|
|
f89fa65442 | ||
|
|
49d367e993 | ||
|
|
d578b018b9 | ||
|
|
2b6111338b | ||
|
|
d9f71dcd57 | ||
|
|
4b869fbe41 | ||
|
|
f3c76ee0ad | ||
|
|
3235daa363 | ||
|
|
7259a83852 | ||
|
|
bc7dcc6281 | ||
|
|
624c1e90ff | ||
|
|
3b7f95a308 | ||
|
|
73de4b655d | ||
|
|
b903a87ce9 | ||
|
|
590d7b8356 | ||
|
|
091f63ad78 | ||
|
|
7122ddb9e5 | ||
|
|
6ec5f8e900 | ||
|
|
be23628822 | ||
|
|
bf9743271f | ||
|
|
2919e5769b | ||
|
|
5491e52391 | ||
|
|
f3c1666ac8 | ||
|
|
57e9007893 | ||
|
|
068b3ad1b0 | ||
|
|
7bf3924b29 | ||
|
|
fa7bdd42be | ||
|
|
fcaec91eb9 | ||
|
|
6ff305cbbe | ||
|
|
cf27c7664d | ||
|
|
6f62feed3d | ||
|
|
0c31a0a48b | ||
|
|
42e74d1d65 | ||
|
|
05ca2d1bae | ||
|
|
2842399eb7 | ||
|
|
df3562d905 | ||
|
|
d15b778826 | ||
|
|
5558398411 | ||
|
|
ed73a1bef9 | ||
|
|
7f4d7b0c8d | ||
|
|
a78f4b9e5a | ||
|
|
096966a4c8 | ||
|
|
2830c04783 | ||
|
|
45c0ef46f2 | ||
|
|
059448bf7d | ||
|
|
4db58f39e7 | ||
|
|
c002304a8e | ||
|
|
de3c38f7b1 | ||
|
|
3864d86732 | ||
|
|
069d96a857 | ||
|
|
90c5d74fd3 | ||
|
|
5480fb1dda | ||
|
|
3807b54ab2 | ||
|
|
10592d12ea | ||
|
|
957d645121 | ||
|
|
89dc71584e | ||
|
|
b6b9aaecce | ||
|
|
c9f4e8fd0d | ||
|
|
1793e7ad0b | ||
|
|
3f7d98b629 | ||
|
|
b9eacfeb9b | ||
|
|
45cb58aafa | ||
|
|
2e2428289d | ||
|
|
6ed76994c2 | ||
|
|
59a57a5a00 | ||
|
|
3270276c3c | ||
|
|
70f6384257 | ||
|
|
eddf85271e | ||
|
|
f7e3103513 | ||
|
|
8d74c67bb1 | ||
|
|
b12695fff4 | ||
|
|
474ad25153 | ||
|
|
79a1b498e4 | ||
|
|
da7aec9ce9 | ||
|
|
c3a2d417f4 | ||
|
|
747334f06e | ||
|
|
625b4e9262 | ||
|
|
fc822fe810 | ||
|
|
77c77efb33 | ||
|
|
d961d9d5c6 | ||
|
|
91297a9761 | ||
|
|
27398103c4 | ||
|
|
0bff072fa7 | ||
|
|
75f0eb81ab | ||
|
|
a907d3922b | ||
|
|
4680e55b96 | ||
|
|
ab32ec0a44 | ||
|
|
58b544e55e | ||
|
|
f29f49a17d | ||
|
|
8b8a1a2e87 | ||
|
|
e9c5e469c1 | ||
|
|
465c38bfaa | ||
|
|
0734dc7960 | ||
|
|
b8e96b35a1 | ||
|
|
27d4e0ac66 | ||
|
|
6105a75595 | ||
|
|
744bad1f96 | ||
|
|
31cb7d3036 | ||
|
|
64d0acec80 | ||
|
|
8dbc66aefe | ||
|
|
6cc6bc4feb | ||
|
|
be71239990 | ||
|
|
c80e77f942 | ||
|
|
e26e70fe4d | ||
|
|
ec3326e0bc | ||
|
|
484a033a66 | ||
|
|
a08cc0f19d | ||
|
|
f4df252253 | ||
|
|
54887e5b61 | ||
|
|
2a32b84fb4 |
@@ -1,6 +1,7 @@
|
||||
{
|
||||
"globals": {
|
||||
"ga": true
|
||||
"ga": true,
|
||||
"chrome": true
|
||||
},
|
||||
"plugins": ["html", "json"],
|
||||
"extends": "elemefe",
|
||||
|
||||
2
.github/CONTRIBUTING.en-US.md
vendored
2
.github/CONTRIBUTING.en-US.md
vendored
@@ -43,7 +43,7 @@ npm run dev
|
||||
# open http://localhost:8085
|
||||
```
|
||||
|
||||
> **Notice**: modify `examples/play/index.vue` file, use the component you contribute, then run `npm run dev:play`, go ahead http://localhost:8085, get result, more quickly and friendly.
|
||||
> **Notice**: modify `examples/play/index.vue` file, use the component you contribute, then run `npm run dev:play`, go ahead [http://localhost:8085](http://localhost:8085), get result, more quickly and friendly.
|
||||
|
||||
To build:
|
||||
|
||||
|
||||
2
.github/CONTRIBUTING.es.md
vendored
2
.github/CONTRIBUTING.es.md
vendored
@@ -47,7 +47,7 @@ npm run dev
|
||||
# abra http://localhost:8085
|
||||
```
|
||||
|
||||
> **Notice**: modify `examples/play/index.vue` file, use the component you contribute, then run `npm run dev:play`, go ahead http://localhost:8085, get result, more quickly and friendly.
|
||||
> **Notice**: modify `examples/play/index.vue` file, use the component you contribute, then run `npm run dev:play`, go ahead [http://localhost:8085](http://localhost:8085), get result, more quickly and friendly.
|
||||
|
||||
Para armar:
|
||||
|
||||
|
||||
2
.github/CONTRIBUTING.fr-FR.md
vendored
2
.github/CONTRIBUTING.fr-FR.md
vendored
@@ -43,7 +43,7 @@ npm run dev
|
||||
# open http://localhost:8085
|
||||
```
|
||||
|
||||
> **Remarque** : modifiez le fichier `examples/play/index.vue`, utilisez le composant auquel vous contribuez, puis lancez `npm run dev:play`, allez sur http://localhost:8085, regardez le résultat rapidement et facilement.
|
||||
> **Remarque** : modifiez le fichier `examples/play/index.vue`, utilisez le composant auquel vous contribuez, puis lancez `npm run dev:play`, allez sur [http://localhost:8085](http://localhost:8085), regardez le résultat rapidement et facilement.
|
||||
|
||||
Pour le build:
|
||||
|
||||
|
||||
2
.github/CONTRIBUTING.zh-CN.md
vendored
2
.github/CONTRIBUTING.zh-CN.md
vendored
@@ -41,7 +41,7 @@ npm run dev
|
||||
# open http://localhost:8085
|
||||
```
|
||||
|
||||
> **提示**:可以运行 `npm run dev:play`,修改 `examples/play/index.vue` 文件,调用你修改后的组件,仍然访问 http://localhost:8085,查看修改效果,更快更方便。
|
||||
> **提示**:可以运行 `npm run dev:play`,修改 `examples/play/index.vue` 文件,调用你修改后的组件,仍然访问 [http://localhost:8085](http://localhost:8085),查看修改效果,更快更方便。
|
||||
|
||||
打包代码:
|
||||
|
||||
|
||||
@@ -1,5 +1,202 @@
|
||||
## Changelog
|
||||
|
||||
### 2.13.2
|
||||
|
||||
*2020-05-18*
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- Autocomplete
|
||||
- Fix change event bug (#19200 by @sxzz)
|
||||
- Image
|
||||
- Update error status (#19194 by @lhx6538665)
|
||||
|
||||
#### Optimization
|
||||
|
||||
- I18n
|
||||
- Update ru-RU popconfirm translation (#19220 by @Opppex)
|
||||
- Update vi translation (#19244 by @quangln2810)
|
||||
- Update Catalan and Spanish translations (#19296 by @Ismaaa)
|
||||
- Update Indonesia translation (#19320) by @therour)
|
||||
- Update Brazilian Portuguese translation (#19374 by @diegomengarda)
|
||||
|
||||
### 2.13.1
|
||||
|
||||
*2020-04-13*
|
||||
|
||||
#### New features
|
||||
- Autocomplete
|
||||
- Add change event (#17913 by @sxzz)
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- Autocomplete
|
||||
- Fix suggestion error when textarea (#18478 by @Roojay)
|
||||
- Carousel
|
||||
- Fix console typo bug (#18264 by @IceFox)
|
||||
- Image
|
||||
- Fix preview dose not show when preview list not contain src issue (#18975) (#19130 by @luckyCao)
|
||||
- Fix shortcut key not work at second time issue (#18983) (#19156 by @luckyCao)
|
||||
- Don't show image-viewer when preview is false (#18967 by @inooNgt)
|
||||
- Transfer
|
||||
- Fix incorrect line-height of el-transfer's first list item when it was used with el-form-item (#18917 by @Hanx)
|
||||
- InputNumber
|
||||
- Correctly compute inputNumberDisabled (#18439 by @ashuser-pendo)
|
||||
- Chore
|
||||
- Remove index intro (#19155 by @iamkun)
|
||||
- Doc
|
||||
- Popconfirm doc update (#18324 by @iamkun)
|
||||
- Fix step-strictly docs typo (#18705 by @dream2023)
|
||||
- Fix a type error in document of steps component (#17555 by @haoranyu)
|
||||
|
||||
### 2.13.0
|
||||
|
||||
*2019-11-26*
|
||||
|
||||
#### New features
|
||||
|
||||
- Popconfirm
|
||||
- Add popconfirm component (#17548 by @iamkun)
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- BackTop
|
||||
- Use cubic bezier scrolling (by @lon)
|
||||
- DatePicker
|
||||
- Fix bug of only select min date of date range problem (#17191 by @smk0621)
|
||||
- Select
|
||||
- Fix select test cases by (@msidolphin)
|
||||
- Tree
|
||||
- Add font-size for the style of tree empty-text (#17094 by @spengjie)
|
||||
- Table
|
||||
- Column header can be costumed (#17291 by @ziyoung)
|
||||
- Update table header cell style (#17284 by @ziyoung)
|
||||
- Fix table header height after filter (#17348 by @ziyoung)
|
||||
- Fixed row-style with display not work (#17002 by @a631807682)
|
||||
- Fix header table not display (#17341 by @ziyoung)
|
||||
- Calendar
|
||||
- Import el-button and el-button-group (#17376 by @masongzhi)
|
||||
- MessageBox
|
||||
- Fix icon position error (#17410 by @nullptru)
|
||||
- TimePicker
|
||||
- Set the selection range after scrolling up or down (#16868 by @mattheyan)
|
||||
- Message
|
||||
- Fix close instace offsetHeight(#17564) (#17852 by @gzwgq222)
|
||||
- Form
|
||||
- Callback of validateField should be optional (#17314 by @CarterLi)
|
||||
- Cascader
|
||||
- Fix TypeScript 3.7 compatibility (#17881 by @CarterLi)
|
||||
- Menu
|
||||
- Fix router NavigationDuplicated error when using vue-router@^3.1.0 (#17269 by @iamkun)
|
||||
- Dropdown
|
||||
- Update type file (#17550 by @iamkun)
|
||||
- Progress
|
||||
- Add strokeLinecap prop (#17552 by @iamkun)
|
||||
- InfiniteScroll
|
||||
- Skip trigger event on invisible element (#17553 by @iamkun)
|
||||
- Image
|
||||
- Perfect picture preview behavior (#16985 by @luckyCao)
|
||||
- Fix shield the page when preview big image (#16796 by @luckyCao)
|
||||
- Drawer
|
||||
- Bugfix drawer-append-to-body-not-working (#16953 by @JeremyWuuuuu)
|
||||
- Select
|
||||
- Fix tag show value or empty issue (17199 by @luckyCao)
|
||||
- Scrollbar
|
||||
- Fix FireFox scroll bar width (#18091 by @iamkun)
|
||||
|
||||
#### Optimization
|
||||
|
||||
- I18n
|
||||
- Update sv-SE.js (#17926 by @FOLLGAD)
|
||||
- Update avatar component fr doc (#17762 by @blombard)
|
||||
- Docs
|
||||
- Fix time-select typo (#17250 by @wacky6)
|
||||
- Fix Drawer attribute accepted value typo in es (#17122 by @haoranyu)
|
||||
- Update Spanish changelog 2.12.0 (#17364 by @Gonzalo2310)
|
||||
- Fix Changelog typo (#17874 by @renlixin)
|
||||
- Fix Loading demo (#17862 by @MBearo)
|
||||
- Add input event in input Events Table (#18061 by @zhouxinyong)
|
||||
- Delete Input repeat change event (#18085 by @zhouxinyong)
|
||||
|
||||
### 2.12.0
|
||||
|
||||
*2019-08-29*
|
||||
|
||||
#### New features
|
||||
|
||||
- Popover
|
||||
- Add close-delay prop (#16671 by @LachlanStuart)
|
||||
- Theme
|
||||
- Add Chrome Extension: Element Theme Extension (#16686 by @iamkun)
|
||||
- Icon
|
||||
- Add font-display to @font-face declaration (#16805 by @iamfaizalandyka)
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- Carousel
|
||||
- Fix onChange emit value (#16705 by @iamkun)
|
||||
- Notification
|
||||
- Fix modifying incoming option object (#16704 by @iamkun)
|
||||
- DatePicker
|
||||
- Add className for picker option (#16632 by @iamkun)
|
||||
- DateTimePicker
|
||||
- Fix time-spinner not scroll to right position (#16854 by @jesse-li)
|
||||
- Table
|
||||
- Prevent click handler after drag (#16850 by @ziyoung)
|
||||
- Fix chrome crash when set thead css display to none (#16956 by @luckyCao)
|
||||
- Fix wrong empty block height (#16861 by @ziyoung)
|
||||
- Not throw error when calling toggleExpansion (#16304 by @yyjjqq94)
|
||||
- Not trigger sort-change event when mounted (#17113 by @a631807682)
|
||||
- Fix setCurrentRow unable to clear highlight row (#16879 by @ziyoung)
|
||||
- Fix expand-row-keys not work when data is loaded asynchronously (#16899 by @ziyoung)
|
||||
- set toggleAllSelection as instance property (#17137 by @ziyoung)
|
||||
- Tree
|
||||
- Fix distance between label and checkbox (#16799 by @Hazlank)
|
||||
- Tabs
|
||||
- Fix incorrect TabItem's position (#16520 by @victorting)
|
||||
- Fix activated tab is out of visual range bug (#17033 by @nullptru)
|
||||
- Calendar
|
||||
- Fix weekdays i18n issue (#16772 by @ubitoffee)
|
||||
- fix locale error (#17208 by @iamkun)
|
||||
- Cascader
|
||||
- Fix CascaderPanel display error (#16716 by @zhangHongEn)
|
||||
- Fix disable status and close button issue (#16224 by @yyjjqq94)
|
||||
- Input
|
||||
- Fix Korean composition event (#15069 by @MoonHyuk)
|
||||
- Fix click event of clear button not trigger when using v-loading (#16576 by @a631807682)
|
||||
- Select
|
||||
- Not toggle dropdown when filtering (#17205 by @luckyCao)
|
||||
- Transfer
|
||||
- Fix style error (#17206 by @iamkun)
|
||||
- Dialog
|
||||
- update sass var (#16365 by @haoranyu)
|
||||
- RadioGroup
|
||||
- Not produce invalid HTML in table if "is" attribute is specify (#17070 by @nullptru)
|
||||
- Divider
|
||||
- Support custom classes (#17078 by @island205)
|
||||
|
||||
#### Optimization
|
||||
|
||||
- Checkbox
|
||||
- Improve screen reader experience (#16575 by @tylertrotter)
|
||||
- Docs
|
||||
- Update changelog (#16773 by @SimonaliaChen)
|
||||
- Update contributing guide (#14800 by @sinchang)
|
||||
- Fix typo in Drawer docs (#16848 by @winkay)
|
||||
- Update custom theme (#16983 by @iamkun)
|
||||
- Add Esperanto translation (#16955 by @maxkoryukov)
|
||||
- Update input-number document about change event (#16316 by @luckyCao)
|
||||
- Update spanish doc 2.11.1 (#16961 by @Gonzalo2310)
|
||||
- I18n
|
||||
- Remove translation of 'year' in catalan language as in the other languages (#14722 by @oscaralbareda)
|
||||
- Update spanish changelog 2.10.0 and 2.10.1 (#16548 by @Gonzalo2310)
|
||||
- Update ar.js (#16653 by @l3op)
|
||||
- Test
|
||||
- Correct spelling error (#16672 by @boomler)
|
||||
- Refactor unit test to use data-uri (#16847 by @a631807682)
|
||||
- Types
|
||||
- Fix httprequest type (#16633 by @luckyCao)
|
||||
|
||||
### 2.11.1
|
||||
|
||||
*2019-07-26*
|
||||
@@ -9,7 +206,7 @@
|
||||
- Image
|
||||
- Fix Image component SSR compatibility (#16737 by @luckyCao)
|
||||
- Chore
|
||||
- Update dart-sass compatibility by @LewisChennnnn)
|
||||
- Update dart-sass compatibility (#16744 by @LewisChennnnn)
|
||||
|
||||
### 2.11.0
|
||||
|
||||
@@ -31,10 +228,11 @@
|
||||
- Fix split-button caret default color (#15931 by @JuniorTour)
|
||||
- Cascader
|
||||
- Fix level 1 children is empty update problem (#16399 by @luckyCao)
|
||||
- Display correct header when range is specified (#16354 by @ziyoung)
|
||||
- Add sets default values when lazy is true (#16420 by @luckyCao)
|
||||
- Fix display errors (#15935 by @junyiz)
|
||||
- Fix display errors when node value is duplicate (#15935 by @junyiz)
|
||||
- Expose getCheckedNodes and fix options change bug (#16709 by @SimonaliaChen)
|
||||
- Calendar
|
||||
- Display correct header when range is specified (#16354 by @ziyoung)
|
||||
- Submenu
|
||||
- Fix prop append-to-body (#16289 by @a631807682)
|
||||
- Table
|
||||
|
||||
376
CHANGELOG.es.md
376
CHANGELOG.es.md
@@ -1,170 +1,368 @@
|
||||
## Changelog
|
||||
|
||||
### 2.13.2
|
||||
|
||||
*2020-05-18*
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- Autocomplete
|
||||
- Fix change event bug (#19200 by @sxzz)
|
||||
- Image
|
||||
- Update error status (#19194 by @lhx6538665)
|
||||
|
||||
#### Optimization
|
||||
|
||||
- I18n
|
||||
- Update ru-RU popconfirm translation (#19220 by @Opppex)
|
||||
- Update vi translation (#19244 by @quangln2810)
|
||||
- Update Catalan and Spanish translations (#19296 by @Ismaaa)
|
||||
- Update Indonesia translation (#19320) by @therour)
|
||||
- Update Brazilian Portuguese translation (#19374 by @diegomengarda)
|
||||
|
||||
|
||||
### 2.13.1
|
||||
|
||||
*2020-04-13*
|
||||
|
||||
#### New features
|
||||
- Autocomplete
|
||||
- Add change event (#17913 by @sxzz)
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- Autocomplete
|
||||
- Fix suggestion error when textarea (#18478 by @Roojay)
|
||||
- Carousel
|
||||
- Fix console typo bug (#18264 by @IceFox)
|
||||
- Image
|
||||
- Fix preview dose not show when preview list not contain src issue (#18975) (#19130 by @luckyCao)
|
||||
- Fix shortcut key not work at second time issue (#18983) (#19156 by @luckyCao)
|
||||
- Don't show image-viewer when preview is false (#18967 by @inooNgt)
|
||||
- Transfer
|
||||
- Fix incorrect line-height of el-transfer's first list item when it was used with el-form-item (#18917 by @Hanx)
|
||||
- InputNumber
|
||||
- Correctly compute inputNumberDisabled (#18439 by @ashuser-pendo)
|
||||
- Chore
|
||||
- Remove index intro (#19155 by @iamkun)
|
||||
- Doc
|
||||
- Popconfirm doc update (#18324 by @iamkun)
|
||||
- Fix step-strictly docs typo (#18705 by @dream2023)
|
||||
- Fix a type error in document of steps component (#17555 by @haoranyu)
|
||||
|
||||
### 2.13.0
|
||||
|
||||
*2019-11-26*
|
||||
|
||||
#### New features
|
||||
|
||||
- Popconfirm
|
||||
- Add popconfirm component (#17548 by @iamkun)
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- BackTop
|
||||
- Use cubic bezier scrolling (by @lon)
|
||||
- DatePicker
|
||||
- Fix bug of only select min date of date range problem (#17191 by @smk0621)
|
||||
- Select
|
||||
- Fix select test cases by (@msidolphin)
|
||||
- Tree
|
||||
- Add font-size for the style of tree empty-text (#17094 by @spengjie)
|
||||
- Table
|
||||
- Column header can be costumed (#17291 by @ziyoung)
|
||||
- Update table header cell style (#17284 by @ziyoung)
|
||||
- Fix table header height after filter (#17348 by @ziyoung)
|
||||
- Fixed row-style with display not work (#17002 by @a631807682)
|
||||
- Fix header table not display (#17341 by @ziyoung)
|
||||
- Calendar
|
||||
- Import el-button and el-button-group (#17376 by @masongzhi)
|
||||
- MessageBox
|
||||
- Fix icon position error (#17410 by @nullptru)
|
||||
- TimePicker
|
||||
- Set the selection range after scrolling up or down (#16868 by @mattheyan)
|
||||
- Message
|
||||
- Fix close instace offsetHeight(#17564) (#17852 by @gzwgq222)
|
||||
- Form
|
||||
- Callback of validateField should be optional (#17314 by @CarterLi)
|
||||
- Cascader
|
||||
- Fix TypeScript 3.7 compatibility (#17881 by @CarterLi)
|
||||
- Menu
|
||||
- Fix router NavigationDuplicated error when using vue-router@^3.1.0 (#17269 by @iamkun)
|
||||
- Dropdown
|
||||
- Update type file (#17550 by @iamkun)
|
||||
- Progress
|
||||
- Add strokeLinecap prop (#17552 by @iamkun)
|
||||
- InfiniteScroll
|
||||
- Skip trigger event on invisible element (#17553 by @iamkun)
|
||||
- Image
|
||||
- Perfect picture preview behavior (#16985 by @luckyCao)
|
||||
- Fix shield the page when preview big image (#16796 by @luckyCao)
|
||||
- Drawer
|
||||
- Bugfix drawer-append-to-body-not-working (#16953 by @JeremyWuuuuu)
|
||||
- Select
|
||||
- Fix tag show value or empty issue (17199 by @luckyCao)
|
||||
- Scrollbar
|
||||
- Fix FireFox scroll bar width (#18091 by @iamkun)
|
||||
|
||||
#### Optimization
|
||||
|
||||
- I18n
|
||||
- Update sv-SE.js (#17926 by @FOLLGAD)
|
||||
- Update avatar component fr doc (#17762 by @blombard)
|
||||
- Docs
|
||||
- Fix time-select typo (#17250 by @wacky6)
|
||||
- Fix Drawer attribute accepted value typo in es (#17122 by @haoranyu)
|
||||
- Update Spanish changelog 2.12.0 (#17364 by @Gonzalo2310)
|
||||
- Fix Changelog typo (#17874 by @renlixin)
|
||||
- Fix Loading demo (#17862 by @MBearo)
|
||||
- Add input event in input Events Table (#18061 by @zhouxinyong)
|
||||
- Delete Input repeat change event (#18085 by @zhouxinyong)
|
||||
|
||||
### 2.12.0
|
||||
|
||||
*2019-08-29*
|
||||
|
||||
#### Nuevas características
|
||||
|
||||
- Popover
|
||||
- Agregada la prop close-delay (#16671 by @LachlanStuart)
|
||||
- Theme
|
||||
- Añadida la extensión Chrome: Element Theme Extensión (#16686 by @iamkun)
|
||||
- Icon
|
||||
- Añadido font-display a la declaración @font-face (#16805 by @iamfaizalandyka)
|
||||
|
||||
#### Corrección de errores
|
||||
|
||||
- Carousel
|
||||
- Corregido el valor emitido por onChange (#16705 by @iamkun)
|
||||
- Notification
|
||||
- Corrección de la modificación del objeto de opción entrante (#16704 by @iamkun)
|
||||
- DatePicker
|
||||
- Agregado el className para la opción picker (#16632 by @iamkun)
|
||||
- DateTimePicker
|
||||
- Corrección del time-spinner que no se desplazaba a la posición correcta (#16854 by @jesse-li)
|
||||
- Table
|
||||
- Evitar la propagación del click después del arrastre (#16850 by @ziyoung)
|
||||
- Corregido una error en chrome que se producía cuando el css de thead tenia display: none (#16956 by @luckyCao)
|
||||
- Corregida la altura incorrecta de los bloques vacíos (#16861 by @ziyoung)
|
||||
- No hay lanzamiento de error cuando se llama a toggleExpansion (#16304 by @yyjjqq94)
|
||||
- No se lanza el evento sort-change cuando esta montado (#17113 by @a631807682)
|
||||
- Corregido que el setCurrentRow no borraba la linea resaltada (#16879 by @ziyoung)
|
||||
- Corregido que expand-row-keys no funcionaba cuando los datos eran cargados asincrónicamente (#16899 by @ziyoung)
|
||||
- Establecido toggleAllSelection como propiedad instanciada (#17137 by @ziyoung)
|
||||
- Tree
|
||||
- Corregida la distancia entre label y checkbox (#16799 by @Hazlank)
|
||||
- Tabs
|
||||
- Corregida la posición incorrecta de los item's del Tab (#16520 by @victorting)
|
||||
- Corregido el error de que la pestaña activada estaba fuera del rango visual (#17033 by @nullptru)
|
||||
- Calendar
|
||||
- Arreglado el problema de los días de la semana con i18n (#16772 by @ubitoffee)
|
||||
- Corregido el error de localización (#17208 by @iamkun)
|
||||
- Cascader
|
||||
- Corregido un error de visualización del CascaderPanel (#16716 by @zhangHongEn)
|
||||
- Corregido el problema de disable status y close button (#16224 by @yyjjqq94)
|
||||
- Input
|
||||
- Arreglado el evento de composición coreana (#15069 by @MoonHyuk)
|
||||
- Arreglado el evento click del botón clear que no se lanzaba cuando se usaba v-loading (#16576 by @a631807682)
|
||||
- Select
|
||||
- No cambiaba el dropdown cuando se filtraba (#17205 by @luckyCao)
|
||||
- Transfer
|
||||
- Arreglado un error de estilo (#17206 by @iamkun)
|
||||
- Dialog
|
||||
- Actualizada las variables Sass (#16365 by @haoranyu)
|
||||
- RadioGroup
|
||||
- No produce HTML invalido en la tabla si el atributo 'is' es especificado (#17070 by @nullptru)
|
||||
- Divider
|
||||
- Soporta clases personalizadas (#17078 by @island205)
|
||||
|
||||
#### Optimización
|
||||
|
||||
- Checkbox
|
||||
- Mejorada la experiencia del lector de pantalla (#16575 by @tylertrotter)
|
||||
- Docs
|
||||
- Actualizado changelog (#16773 by @SimonaliaChen)
|
||||
- Actualizada la guía de contribución (#14800 by @sinchang)
|
||||
- Arreglado typo en la documentación de Drawer (#16848 by @winkay)
|
||||
- Actualizado el tema personalizado (#16983 by @iamkun)
|
||||
- Agregada traducción en Esperanto (#16955 by @maxkoryukov)
|
||||
- Actualizada la documentación de input-number sobre el evento change (#16316 by @luckyCao)
|
||||
- Actualizada la documentación en Español 2.11.1 (#16961 by @Gonzalo2310)
|
||||
- I18n
|
||||
- Eliminada la traducción de 'year' en idioma Catalán como en otros idiomas (#14722 by @oscaralbareda)
|
||||
- Actualizado el changelog de las versiones 2.10.0 y 2.10.1 en Español (#16548 by @Gonzalo2310)
|
||||
- Actualizado ar.js (#16653 by @l3op)
|
||||
- Test
|
||||
- Corregir error ortográfico (#16672 by @boomler)
|
||||
- Refractorizacion del unit test para usar data-uri (#16847 by @a631807682)
|
||||
- Types
|
||||
- Corrección del tipo httprequest (#16633 by @luckyCao)
|
||||
|
||||
### 2.11.1
|
||||
|
||||
*2019-07-26*
|
||||
|
||||
#### Bug fixes
|
||||
#### Corrección de errores
|
||||
|
||||
- Image
|
||||
- Fix Image component SSR compatibility (#16737 by @luckyCao)
|
||||
- Chore
|
||||
- Update dart-sass compatibility by @LewisChennnnn)
|
||||
- Corregido el componente Image para compatibilidad SSR (#16737 by @luckyCao)
|
||||
- Tarea
|
||||
- Actualizado para compatibilidad con dart-sass by @LewisChennnnn)
|
||||
|
||||
### 2.11.0
|
||||
|
||||
*2019-07-25*
|
||||
|
||||
#### New features
|
||||
#### Nuevas características
|
||||
|
||||
- Drawer
|
||||
- Add drawer component (#16577 by @JeremyWuuuuu)
|
||||
- Agregado componente drawer (#16577 by @JeremyWuuuuu)
|
||||
|
||||
#### Bug fixes
|
||||
#### Corrección de errores
|
||||
|
||||
- Checkbox
|
||||
- Enhance css selector (#16006 by @Hazlank)
|
||||
- Mejora del selector css (#16006 by @Hazlank)
|
||||
- Tree
|
||||
- Make el-tree generic (#15934 by @JeremyWuuuuu)
|
||||
- Set isCurrent prop to False (#15870 by @kkkisme)
|
||||
- Establecido el el-tree como genérico (#15934 by @JeremyWuuuuu)
|
||||
- Establecido la prop isCurrent como False (#15870 by @kkkisme)
|
||||
- Dropdown
|
||||
- Fix split-button caret default color (#15931 by @JuniorTour)
|
||||
- Corregido el color predeterminado de los split-button (#15931 by @JuniorTour)
|
||||
- Cascader
|
||||
- Fix level 1 children is empty update problem (#16399 by @luckyCao)
|
||||
- Display correct header when range is specified (#16354 by @ziyoung)
|
||||
- Add sets default values when lazy is true (#16420 by @luckyCao)
|
||||
- Fix display errors (#15935 by @junyiz)
|
||||
- Expose getCheckedNodes and fix options change bug (#16709 by @SimonaliaChen)
|
||||
- Corregido un problema de actualización cuando el nivel 1 de children estaba vació (#16399 by @luckyCao)
|
||||
- Ahora se muestra correctamente header cuando range esta especificado (#16354 by @ziyoung)
|
||||
- Agregados valores por defecto cuando lazy es true (#16420 by @luckyCao)
|
||||
- Solucionado problemas de visualización (#15935 by @junyiz)
|
||||
- Expuestos los getCheckedNodes y corrección de errores en el cambio de opciones (#16709 by @SimonaliaChen)
|
||||
- Submenu
|
||||
- Fix prop append-to-body (#16289 by @a631807682)
|
||||
- Corregida la prop append-to-body (#16289 by @a631807682)
|
||||
- Table
|
||||
- Fix tree table when updating data (#16481 by @island205)
|
||||
- Arreglado un fallo en la actualizacion de los datos de tree table (#16481 by @island205)
|
||||
- Select
|
||||
- Fix memory leak issue (#16463 by @island205)
|
||||
- Arreglado un problema de fuga de memoria (#16463 by @island205)
|
||||
- InfiniteScroll
|
||||
- Update naming & doc (#16698 by @iamkun)
|
||||
- Actualizada la nomenclatura y la documentacion (#16698 by @iamkun)
|
||||
- Avatar
|
||||
- Fix image not center vertically issue (#16489 by @luckyCao)
|
||||
- Arreglado que la imagen no se centraba verticalmente (#16489 by @luckyCao)
|
||||
- Dialog
|
||||
- Add destroyOnClose attribute (#16455 by @ziyoung)
|
||||
- Agregado el atributo destroyOnClosee (#16455 by @ziyoung)
|
||||
- Image
|
||||
- Add big Image preview feature (#16333 by @luckyCao)
|
||||
- Agregada la función de vista previa grande de imágenes (#16333 by @luckyCao)
|
||||
|
||||
#### Optimization
|
||||
#### Optimización
|
||||
|
||||
- Docs
|
||||
- Fix dropdown demo (#16193 by @webxmsj)
|
||||
- Fix typo in table documents (#15971 by @howiefh)
|
||||
- Documentación
|
||||
- Arreglada la demo de dropdown (#16193 by @webxmsj)
|
||||
- Corrección de errores tipográficos en las tablas de documentos (#15971 by @howiefh)
|
||||
- I18n
|
||||
- Update translation of Thai language (#16689 by @ponkrit)
|
||||
- Chore
|
||||
- Update theme base api (#16607 by @iamkun)
|
||||
- Add form theme token (#16699 by @iamkun)
|
||||
- Mark ali inner user's access (#16609 by @iamkun)
|
||||
- Fix doc anchor bug (#16692 by @iamkun)
|
||||
- Actualizada la traduccion del lenguage Thai (#16689 by @ponkrit)
|
||||
- Tareas
|
||||
- Actualizada la api base del tema (#16607 by @iamkun)
|
||||
- Añadido token del formulario del tema (#16699 by @iamkun)
|
||||
- Marcar todos los accesos internos del usuario (#16609 by @iamkun)
|
||||
- Corrección del error de anclaje del documento (#16692 by @iamkun)
|
||||
|
||||
### 2.10.1
|
||||
|
||||
*2019-07-02*
|
||||
|
||||
#### Bug fixes
|
||||
#### Corrección de errores
|
||||
|
||||
|
||||
- Table
|
||||
- Fix sort icon (#15439 by @bezany)
|
||||
- Fix layout breaks when append slot exists (#16332 by @ziyoung)
|
||||
- Fix showOverflowTooltip not reactive (#16295 by @a631807682)
|
||||
- Register scrollbar in filter-panel (#16246 by @ziyoung)
|
||||
- Chore
|
||||
- Fix 2.9 docs (#16233 by @ziyoung)
|
||||
- Fix index page theme intro english css style issue (#16254 by @iamkun)
|
||||
- Corregido el icono de ordenación (#15439 by @bezany)
|
||||
- Corregidas las rupturas del layout cuando existía un slot (#16332 by @ziyoung)
|
||||
- Corregido showOverflowTooltip no era reactivo (#16295 by @a631807682)
|
||||
- Registrada la scrollbar en el panel de filtro (#16246 by @ziyoung)
|
||||
- Tareas
|
||||
- Arreglada la documentación 2.9 (#16233 by @ziyoung)
|
||||
- Corregido el índice de la página de introducción del tema en inglés que tenia un error en los estilos css (#16254 by @iamkun)
|
||||
|
||||
#### Optimization
|
||||
#### Optimización
|
||||
|
||||
- Tag
|
||||
- Compatible with IE (#16334 by @ziyoung)
|
||||
- Chore
|
||||
- Update Dingtalk Group QR image (#16236 by @iamkun)
|
||||
- Compatible con IE (#16334 by @ziyoung)
|
||||
- Tarea
|
||||
- Actualizada la imagen QR de Dingtalk Group (#16236 by @iamkun)
|
||||
- Doc
|
||||
- Update online theme roller doc (#16244 by @iamkun)
|
||||
- Actualizada la documentación online del theme roller (#16244 by @iamkun)
|
||||
|
||||
### 2.10.0
|
||||
|
||||
*2019-06-25*
|
||||
|
||||
#### New features
|
||||
#### Nuevas características
|
||||
|
||||
- I18n
|
||||
- Added Uzbek language (#15796 by @ogabek96)
|
||||
- Añadido idioma Uzbeko (#15796 by @ogabek96)
|
||||
- Calendar
|
||||
- Add first-day-of-week attribute (#16047 by @ziyoung)
|
||||
- Añadido el atributo del primer día de la semana (#16047 by @ziyoung)
|
||||
- Avatar
|
||||
- Add avatar component (#16144 by @luckyCao)
|
||||
- Agregado componente Avatar (#16144 by @luckyCao)
|
||||
- Upload:
|
||||
- Add capability to customize thumbnail template (#13192 by @victorzhuk)
|
||||
- Añade capacidad para personalizar la plantilla de miniaturas (#13192 by @victorzhuk)
|
||||
|
||||
#### Bug fixes
|
||||
#### Corrección de errores
|
||||
|
||||
- Tree
|
||||
- Not highlight tree node when currentKey is null (#15668 by @yyjjqq94)
|
||||
- Fix issue #15538 caused by two Tree sharing the same data. (#15615 by @VanMess)
|
||||
- No resaltar el nodo de árbol cuando currentKey es nulo (#15668 by @yyjjqq94)
|
||||
- Solucionado el problema #15538 causado por dos Tree que compartian los mismos datos.(#15615 by @VanMess)
|
||||
- Upload
|
||||
- Update the parameter `fileList` type (#15716 by @underfin)
|
||||
- Actualizado el tipo del parámetro `fileList` (#15716 by @underfin)
|
||||
- Table
|
||||
- Fix loading icon not display (#15868 by @ziyoung)
|
||||
- Fix background color of complex table when hovering (#15504 by @cnlon)
|
||||
- Fix current-row-key and select event bug (#15983 by @ziyoung)
|
||||
- Height accepts more units (#16013 by @ziyoung)
|
||||
- Fix reserve-selection not work (#16135 by @ziyoung)
|
||||
- Solucionado que el icono de loading no se mostraba (#15868 by @ziyoung)
|
||||
- Corregido el color de fondo de una tabla compleja cuando se desplaza el cursor (#15504 by @cnlon)
|
||||
- Corregido current-row-key y el bug del evento select (#15983 by @ziyoung)
|
||||
- Height acepta más unidades (#16013 by @ziyoung)
|
||||
- Solucionado reserve-selection no funcionaba (#16135 by @ziyoung)
|
||||
- Docs
|
||||
- Fix Divider attribute type in zh-cn (#15889 by @haoranyu)
|
||||
- Corregido el tipo de atributo Divider en zh-cn (#15889 by @haoranyu)
|
||||
- Se elimina una etiqueta html de cierre incorrecta y el código de bloque vacío (#16194 por @Alexeykhr)
|
||||
- Menu
|
||||
- Fixed submenu hidden bug after adding popper-append-to-body (#15391 by @PanJiaChen)
|
||||
- Corregido un error oculto en el submenú después de añadir popper-append-to-body (#15391 by @PanJiaChen)
|
||||
- Select
|
||||
- Fix initialInputHeight (#15989 by @yyjjqq94)
|
||||
- Fix default-first-option behavior when typing Chinese (#15431 by @VanMess)
|
||||
- fix double import problem (#16215 by @lengband)
|
||||
- Arreglado initialInputHeight (#15989 by @yyjjqq94)
|
||||
- Corregido el comportamiento de default-first-option cuando se escribe chino (#15431 by @VanMess)
|
||||
- Corregido el problema de importación doble (#16215 by @lengband)
|
||||
- Message
|
||||
- Add type def for offset option (#16027 by @matjaz)
|
||||
- Añadida la opción type def para offset (#16027 by @matjaz)
|
||||
- Timeline
|
||||
- Fix reverse broken (#16091 by @ziyoung)
|
||||
- Arreglado reverso roto (#16091 by @ziyoung)
|
||||
- Slider
|
||||
- Fix #15545 by adding explains about "input" event in Chinese (#15588 by @VanMess)
|
||||
- Corregido #15545 agregando explicaciones sobre el evento "input" en chino (#15588 by @VanMess)
|
||||
- InfiniteScroll
|
||||
- Update package name (#16125 by @iamkun)
|
||||
- Actualización del nombre del paquete (#16125 by @iamkun)
|
||||
- MessageBox
|
||||
- Fix distinguishCancelAndClose action not same as docs bug (#15438 by @qingdengyue)
|
||||
- Arreglado el bug de distinguishCancelAndClose, la acción no era la misma que la documentada (#15438 by @qingdengyue)
|
||||
- PopupManager
|
||||
- Fix z-index cannot be rewritten at first using (#15738 by @luckyCao)
|
||||
- Docs
|
||||
- Delete an incorrect closing html tag and empty block code (#16194 by @Alexeykhr)
|
||||
- Chore
|
||||
- Update test api host (#15807 by @iamkun)
|
||||
- Arreglado que el z-index no podía ser reescrito la primera vez que se usaba (#15738 by @luckyCao)
|
||||
- Tarea
|
||||
- Actualizado el test del api host (#15807 by @iamkun)
|
||||
|
||||
#### Optimization
|
||||
#### Optimizacion
|
||||
|
||||
- Tree
|
||||
- Modify loop conditions to improve performance (#15699 by @KingJeason)
|
||||
- Modificar las condiciones del bucle para mejorar el rendimiento (#15699 by @KingJeason)
|
||||
- Theme
|
||||
- Refine GA track & Update footer link forward to online theme roller (#16007 by @island205)
|
||||
- Refinado GA track & actualizado el link del pie que lleva al theme roller online (#16007 by @island205)
|
||||
- Badge
|
||||
- Update badge prop check (#16198 by @iamkun)
|
||||
- Actualizado el check del prop badge (#16198 by @iamkun)
|
||||
- Avatar
|
||||
- Update theme config var (#16202 by @luckyCao)
|
||||
- Actualizado el var del config del theme (#16202 by @luckyCao)
|
||||
- I18n
|
||||
- Update pt-br.js (#15776 by @gigioSouza)
|
||||
- Update Farsi translation (#15881 by @pamenary)
|
||||
- Actualizada la traducción del portugués (#15776 by @gigioSouza)
|
||||
- Actualizada la traducción del idioma Farsi (#15881 by @pamenary)
|
||||
- Docs
|
||||
- Add missing components in quickstart (#16063 by @pape2016)
|
||||
- Update french translation (#16208 by @blombard)
|
||||
- Add description $slots.default (#15444 by @Alexeykhr)
|
||||
- Update Spanish Doc 2.9.1 (#15840 by @Gonzalo2310)
|
||||
- Fix spelling mistakes in fr (#15837 by @blombard)
|
||||
- Update changelog 2.9.2 Spanish (#16185 by @Gonzalo2310)
|
||||
- Agregado componentes faltantes en el quick start (#16063 by @pape2016)
|
||||
- Actualizada la traducción al francés (#16208 by @blombard)
|
||||
- Agregada descripción $slots.default (#15444 by @Alexeykhr)
|
||||
- Actualizada la Doc en Español 2.9.1 (#15840 by @Gonzalo2310)
|
||||
- Corrección de errores ortográficos en fr (#15837 by @blombard)
|
||||
- Actualizado el changelog 2.9.2 en español (#16185 by @Gonzalo2310)
|
||||
|
||||
#### Breaking changes
|
||||
|
||||
- Form
|
||||
- Remove success status (#16159 by @ziyoung)
|
||||
- Eliminado el estado success (#16159 by @ziyoung)
|
||||
|
||||
### 2.9.2
|
||||
|
||||
|
||||
@@ -1,5 +1,203 @@
|
||||
## Changelog
|
||||
|
||||
### 2.13.2
|
||||
|
||||
*2020-05-18*
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- Autocomplete
|
||||
- Fix change event bug (#19200 by @sxzz)
|
||||
- Image
|
||||
- Update error status (#19194 by @lhx6538665)
|
||||
|
||||
#### Optimization
|
||||
|
||||
- I18n
|
||||
- Update ru-RU popconfirm translation (#19220 by @Opppex)
|
||||
- Update vi translation (#19244 by @quangln2810)
|
||||
- Update Catalan and Spanish translations (#19296 by @Ismaaa)
|
||||
- Update Indonesia translation (#19320) by @therour)
|
||||
- Update Brazilian Portuguese translation (#19374 by @diegomengarda)
|
||||
|
||||
|
||||
### 2.13.1
|
||||
|
||||
*2020-04-13*
|
||||
|
||||
#### New features
|
||||
- Autocomplete
|
||||
- Add change event (#17913 by @sxzz)
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- Autocomplete
|
||||
- Fix suggestion error when textarea (#18478 by @Roojay)
|
||||
- Carousel
|
||||
- Fix console typo bug (#18264 by @IceFox)
|
||||
- Image
|
||||
- Fix preview dose not show when preview list not contain src issue (#18975) (#19130 by @luckyCao)
|
||||
- Fix shortcut key not work at second time issue (#18983) (#19156 by @luckyCao)
|
||||
- Don't show image-viewer when preview is false (#18967 by @inooNgt)
|
||||
- Transfer
|
||||
- Fix incorrect line-height of el-transfer's first list item when it was used with el-form-item (#18917 by @Hanx)
|
||||
- InputNumber
|
||||
- Correctly compute inputNumberDisabled (#18439 by @ashuser-pendo)
|
||||
- Chore
|
||||
- Remove index intro (#19155 by @iamkun)
|
||||
- Doc
|
||||
- Popconfirm doc update (#18324 by @iamkun)
|
||||
- Fix step-strictly docs typo (#18705 by @dream2023)
|
||||
- Fix a type error in document of steps component (#17555 by @haoranyu)
|
||||
|
||||
### 2.13.0
|
||||
|
||||
*2019-11-26*
|
||||
|
||||
#### New features
|
||||
|
||||
- Popconfirm
|
||||
- Add popconfirm component (#17548 by @iamkun)
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- BackTop
|
||||
- Use cubic bezier scrolling (by @lon)
|
||||
- DatePicker
|
||||
- Fix bug of only select min date of date range problem (#17191 by @smk0621)
|
||||
- Select
|
||||
- Fix select test cases (by @msidolphin)
|
||||
- Tree
|
||||
- Add font-size for the style of tree empty-text (#17094 by @spengjie)
|
||||
- Table
|
||||
- Column header can be costumed (#17291 by @ziyoung)
|
||||
- Update table header cell style (#17284 by @ziyoung)
|
||||
- Fix table header height after filter (#17348 by @ziyoung)
|
||||
- Fixed row-style with display not work (#17002 by @a631807682)
|
||||
- Fix header table not display (#17341 by @ziyoung)
|
||||
- Calendar
|
||||
- Import el-button and el-button-group (#17376 by @masongzhi)
|
||||
- MessageBox
|
||||
- Fix icon position error (#17410 by @nullptru)
|
||||
- TimePicker
|
||||
- Set the selection range after scrolling up or down (#16868 by @mattheyan)
|
||||
- Message
|
||||
- Fix close instace offsetHeight(#17564) (#17852 by @gzwgq222)
|
||||
- Form
|
||||
- Callback of validateField should be optional (#17314 by @CarterLi)
|
||||
- Cascader
|
||||
- Fix TypeScript 3.7 compatibility (#17881 by @CarterLi)
|
||||
- Menu
|
||||
- Fix router NavigationDuplicated error when using vue-router@^3.1.0 (#17269 by @iamkun)
|
||||
- Dropdown
|
||||
- Update type file (#17550 by @iamkun)
|
||||
- Progress
|
||||
- Add strokeLinecap prop (#17552 by @iamkun)
|
||||
- InfiniteScroll
|
||||
- Skip trigger event on invisible element (#17553 by @iamkun)
|
||||
- Image
|
||||
- Perfect picture preview behavior (#16985 by @luckyCao)
|
||||
- Fix shield the page when preview big image (#16796 by @luckyCao)
|
||||
- Drawer
|
||||
- Bugfix drawer-append-to-body-not-working (#16953 by @JeremyWuuuuu)
|
||||
- Select
|
||||
- Fix tag show value or empty issue (17199 by @luckyCao)
|
||||
- Scrollbar
|
||||
- Fix FireFox scroll bar width (#18091 by @iamkun)
|
||||
|
||||
#### Optimization
|
||||
|
||||
- I18n
|
||||
- Update sv-SE.js (#17926 by @FOLLGAD)
|
||||
- Update avatar component fr doc (#17762 by @blombard)
|
||||
- Docs
|
||||
- Fix time-select typo (#17250 by @wacky6)
|
||||
- Fix Drawer attribute accepted value typo in es (#17122 by @haoranyu)
|
||||
- Update Spanish changelog 2.12.0 (#17364 by @Gonzalo2310)
|
||||
- Fix Changelog typo (#17874 by @renlixin)
|
||||
- Fix Loading demo (#17862 by @MBearo)
|
||||
- Add input event in input Events Table (#18061 by @zhouxinyong)
|
||||
- Delete Input repeat change event (#18085 by @zhouxinyong)
|
||||
|
||||
### 2.12.0
|
||||
|
||||
*2019-08-29*
|
||||
|
||||
#### New features
|
||||
|
||||
- Popover
|
||||
- Add close-delay prop (#16671 by @LachlanStuart)
|
||||
- Theme
|
||||
- Add Chrome Extension: Element Theme Extension (#16686 by @iamkun)
|
||||
- Icon
|
||||
- Add font-display to @font-face declaration (#16805 by @iamfaizalandyka)
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- Carousel
|
||||
- Fix onChange emit value (#16705 by @iamkun)
|
||||
- Notification
|
||||
- Fix modifying incoming option object (#16704 by @iamkun)
|
||||
- DatePicker
|
||||
- Add className for picker option (#16632 by @iamkun)
|
||||
- DateTimePicker
|
||||
- Fix time-spinner not scroll to right position (#16854 by @jesse-li)
|
||||
- Table
|
||||
- Prevent click handler after drag (#16850 by @ziyoung)
|
||||
- Fix chrome crash when set thead css display to none (#16956 by @luckyCao)
|
||||
- Fix wrong empty block height (#16861 by @ziyoung)
|
||||
- Not throw error when calling toggleExpansion (#16304 by @yyjjqq94)
|
||||
- Not trigger sort-change event when mounted (#17113 by @a631807682)
|
||||
- Fix setCurrentRow unable to clear highlight row (#16879 by @ziyoung)
|
||||
- Fix expand-row-keys not work when data is loaded asynchronously (#16899 by @ziyoung)
|
||||
- set toggleAllSelection as instance property (#17137 by @ziyoung)
|
||||
- Tree
|
||||
- Fix distance between label and checkbox (#16799 by @Hazlank)
|
||||
- Tabs
|
||||
- Fix incorrect TabItem's position (#16520 by @victorting)
|
||||
- Fix activated tab is out of visual range bug (#17033 by @nullptru)
|
||||
- Calendar
|
||||
- Fix weekdays i18n issue (#16772 by @ubitoffee)
|
||||
- fix locale error by (#17208 by @iamkun)
|
||||
- Cascader
|
||||
- Fix CascaderPanel display error (#16716 by @zhangHongEn)
|
||||
- Fix disable status and close button issue (#16224 by @yyjjqq94)
|
||||
- Input
|
||||
- Fix Korean composition event (#15069 by @MoonHyuk)
|
||||
- Fix click event of clear button not trigger when using v-loading (#16576 by @a631807682)
|
||||
- Select
|
||||
- Not toggle dropdown when filtering (#17205 by @luckyCao)
|
||||
- Transfer
|
||||
- Fix style error (#17206 by @iamkun)
|
||||
- Dialog
|
||||
- update sass var (#16365 by @haoranyu)
|
||||
- RadioGroup
|
||||
- Not produce invalid HTML in table if "is" attribute is specify (#17070 by @nullptru)
|
||||
- Divider
|
||||
- Support custom classes (#17078 by @island205)
|
||||
|
||||
#### Optimization
|
||||
|
||||
- Checkbox
|
||||
- Improve screen reader experience (#16575 by @tylertrotter)
|
||||
- Docs
|
||||
- Update changelog (#16773 by @SimonaliaChen)
|
||||
- Update contributing guide (#14800 by @sinchang)
|
||||
- Fix typo in Drawer docs (#16848 by @winkay)
|
||||
- Update custom theme (#16983 by @iamkun)
|
||||
- Add Esperanto translation (#16955 by @maxkoryukov)
|
||||
- Update input-number document about change event (#16316 by @luckyCao)
|
||||
- Update spanish doc 2.11.1 (#16961 by @Gonzalo2310)
|
||||
- I18n
|
||||
- Remove translation of 'year' in catalan language as in the other languages (#14722 by @oscaralbareda)
|
||||
- Update spanish changelog 2.10.0 and 2.10.1 (#16548 by @Gonzalo2310)
|
||||
- Update ar.js (#16653 by @l3op)
|
||||
- Test
|
||||
- Correct spelling error (#16672 by @boomler)
|
||||
- Refactor unit test to use data-uri (#16847 by @a631807682)
|
||||
- Types
|
||||
- Fix httprequest type (#16633 by @luckyCao)
|
||||
|
||||
### 2.11.1
|
||||
|
||||
*2019-07-26*
|
||||
@@ -9,7 +207,7 @@
|
||||
- Image
|
||||
- Fix Image component SSR compatibility (#16737 by @luckyCao)
|
||||
- Chore
|
||||
- Update dart-sass compatibility by @LewisChennnnn)
|
||||
- Update dart-sass compatibility (#16744 by @LewisChennnnn)
|
||||
|
||||
### 2.11.0
|
||||
|
||||
@@ -31,10 +229,11 @@
|
||||
- Fix split-button caret default color (#15931 by @JuniorTour)
|
||||
- Cascader
|
||||
- Fix level 1 children is empty update problem (#16399 by @luckyCao)
|
||||
- Display correct header when range is specified (#16354 by @ziyoung)
|
||||
- Add sets default values when lazy is true (#16420 by @luckyCao)
|
||||
- Fix display errors (#15935 by @junyiz)
|
||||
- Fix display errors when node value is duplicate (#15935 by @junyiz)
|
||||
- Expose getCheckedNodes and fix options change bug (#16709 by @SimonaliaChen)
|
||||
- Calendar
|
||||
- Display correct header when range is specified (#16354 by @ziyoung)
|
||||
- Submenu
|
||||
- Fix prop append-to-body (#16289 by @a631807682)
|
||||
- Table
|
||||
|
||||
@@ -1,5 +1,202 @@
|
||||
## 更新日志
|
||||
|
||||
### 2.13.2
|
||||
|
||||
*2020-05-18*
|
||||
|
||||
#### Bug 修复
|
||||
|
||||
- Autocomplete
|
||||
- 修复 'change event' 错误 (#19200 by @sxzz)
|
||||
- Image
|
||||
- 更新错误状态 (#19194 by @lhx6538665)
|
||||
|
||||
#### Optimization
|
||||
|
||||
- I18n
|
||||
- 更新 ru-RU popconfirm 翻译 (#19220 by @Opppex)
|
||||
- 更新 vi 翻译 (#19244 by @quangln2810)
|
||||
- 更新 Catalan 和 Spanish 翻译 (#19296 by @Ismaaa)
|
||||
- 更新 Indonesia 翻译 (#19320) by @therour)
|
||||
- 更新 Brazilian Portuguese 翻译 (#19374 by @diegomengarda)
|
||||
|
||||
|
||||
### 2.13.1
|
||||
|
||||
*2020-04-13*
|
||||
|
||||
#### 新特性
|
||||
- Autocomplete
|
||||
- 添加 change 事件 (#17913 by @sxzz)
|
||||
|
||||
#### Bug 修复
|
||||
|
||||
- Autocomplete
|
||||
- 修复类型为 textarea 时建议错误问题 (#18478 by @Roojay)
|
||||
- Carousel
|
||||
- 修复 console.warn 文案拼写错误 (#18264 by @IceFox)
|
||||
- Image
|
||||
- 修复当 preview-src-list 属性不包含 src 时图片预览大图展示为空的问题 (#18975) (#19130 by @luckyCao)
|
||||
- 修复第二次图片预览时快捷键失效问题 (#18983) (#19156 by @luckyCao)
|
||||
- 修复 preview-src-list 为空时点击图片会给 body 添加 overflow: scroll 的问题 (#18967 by @inooNgt)
|
||||
- Transfer
|
||||
- 修复和 Form 组件一起使用时错误的行高问题 (#18917 by @Hanx)
|
||||
- InputNumber
|
||||
- 正确计算 inputNumberDisabled (#18439 by @ashuser-pendo)
|
||||
- Chore
|
||||
- 更新首页文案 (#19155 by @iamkun)
|
||||
- Doc
|
||||
- 更新 Popconfirm 文档 (#18324 by @iamkun)
|
||||
- 修复 step-strictly 文档拼写问题 (#18705 by @dream2023)
|
||||
- 修复 Steps 组件文档问题 (#17555 by @haoranyu)
|
||||
|
||||
### 2.13.0
|
||||
|
||||
*2019-11-26*
|
||||
|
||||
#### 新特性
|
||||
|
||||
- Popconfirm
|
||||
- 新增 Popconfirm 组件 (#17548 by @iamkun)
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- BackTop
|
||||
- 平滑过渡动画 (by @lon)
|
||||
- DatePicker
|
||||
- 修复选择最小日期的 bug (#17191 by @smk0621)
|
||||
- Select
|
||||
- 修复测试用例 (by @msidolphin)
|
||||
- Tree
|
||||
- 增加 font-size 样式 (#17094 by @spengjie)
|
||||
- Table
|
||||
- 头部可自定义 (#17291 by @ziyoung)
|
||||
- 更新头部样式 (#17284 by @ziyoung)
|
||||
- 修复时候 filter 之后高度问题 (#17348 by @ziyoung)
|
||||
- 修复 row-style 失效的 bug (#17002 by @a631807682)
|
||||
- 修复头部消失的 bug (#17341 by @ziyoung)
|
||||
- Calendar
|
||||
- 导入 el-button 和 el-button-group (#17376 by @masongzhi)
|
||||
- MessageBox
|
||||
- 修复图表位置 (#17410 by @nullptru)
|
||||
- TimePicker
|
||||
- 滚动后设置正确的位置 (#16868 by @mattheyan)
|
||||
- Message
|
||||
- 修复关闭的 offsetHeight(#17564) (#17852 by @gzwgq222)
|
||||
- Form
|
||||
- ValidateField 的回调应为可选项 (#17314 by @CarterLi)
|
||||
- Cascader
|
||||
- 修复 TypeScript 3.7 的兼容问题 (#17881 by @CarterLi)
|
||||
- Menu
|
||||
- 修复 NavigationDuplicated 在 vue-router@^3.1.0 的报错 (#17269 by @iamkun)
|
||||
- Dropdown
|
||||
- 更新类型文件 (#17550 by @iamkun)
|
||||
- Progress
|
||||
- 增加 strokeLinecap 属性 (#17552 by @iamkun)
|
||||
- InfiniteScroll
|
||||
- 跳过不可见元素触发 (#17553 by @iamkun)
|
||||
- Image
|
||||
- 优化用户体验 (#16985 by @luckyCao)
|
||||
- 优化大图片展示问题 (#16796 by @luckyCao)
|
||||
- Drawer
|
||||
- 修复 drawer-append-to-body 失效的 bug (#16953 by @JeremyWuuuuu)
|
||||
- Select
|
||||
- 修复空 tag 的 bug (17199 by @luckyCao)
|
||||
- Scrollbar
|
||||
- 修复 FireFox 双滚动条的 bug (#18091 by @iamkun)
|
||||
|
||||
#### Optimization
|
||||
|
||||
- I18n
|
||||
- 更新 sv-SE.js (#17926 by @FOLLGAD)
|
||||
- 更新 avatar 组件法语文档 (#17762 by @blombard)
|
||||
- Docs
|
||||
- 修复 time-select 文档错误 (#17250 by @wacky6)
|
||||
- 修复 Drawer 文档错误 (#17122 by @haoranyu)
|
||||
- 更新 Spanish changelog 2.12.0 (#17364 by @Gonzalo2310)
|
||||
- 修复 Changelog 文档错误 (#17874 by @renlixin)
|
||||
- 修复 Loading 示例 (#17862 by @MBearo)
|
||||
- 增加 input event 相关文档 (#18061 by @zhouxinyong)
|
||||
- 移除 Input repeat change event 相关文档 (#18085 by @zhouxinyong)
|
||||
|
||||
### 2.12.0
|
||||
|
||||
*2019-08-29*
|
||||
|
||||
#### 新特性
|
||||
|
||||
- Popover
|
||||
- 添加 close-delay 属性 (#16671 by @LachlanStuart)
|
||||
- Theme
|
||||
- 增加 Chrome 插件: Element Theme Extension (#16686 by @iamkun)
|
||||
- Icon
|
||||
- 支持 font-display 属性的配置 (#16805 by @iamfaizalandyka)
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- Table
|
||||
- 在表头拖拽后阻止 click 事件的触发 (#16850 by @ziyoung)
|
||||
- 修复表头 display 为 none 造成浏览器崩溃的问题 (#16956 by @luckyCao)
|
||||
- 修复没有数据的时表格高度问题 (#16861 by @ziyoung)
|
||||
- 调用 toggleExpansion 不再抛出异常 (#16304 by @yyjjqq94)
|
||||
- 挂载时不再触发 sort-change 事件 (#17113 by @a631807682)
|
||||
- 修复 setCurrentRow 方法不生效的问题 (#16879 by @ziyoung)
|
||||
- 修复当数据异步加载时,expand-row-keys 不生效的问题 (#16899 by @ziyoung)
|
||||
- 把 toggleAllSelection 设置为 Table 示例的属性 (#17137 by @ziyoung)
|
||||
- Tree
|
||||
- 修复文字与复选框之间的距离 (#16799 by @Hazlank)
|
||||
- Tabs
|
||||
- 修复 TabItem 位置不正确的问题 (#16520 by @victorting)
|
||||
- 修复高亮的 Tab 不在可视区的问题 (#17033 by @nullptru)
|
||||
- Calendar
|
||||
- 修复日期的显示问题 (#16772 by @ubitoffee)
|
||||
- 修复在夏令时的显示问题 (#17208 by @iamkun)
|
||||
- Cascader
|
||||
- 修复 CascaderPanel 的显示问题 (#16716 by @zhangHongEn)
|
||||
- 禁用状态下,关闭按钮不显示 (#16224 by @yyjjqq94)
|
||||
- Input
|
||||
- 修复韩语输入问题 (#15069 by @MoonHyuk)
|
||||
- 触发清除按钮的点击事件 (#16576 by @a631807682)
|
||||
- Select
|
||||
- 过滤时,不收起下拉框 (#17205 by @luckyCao)
|
||||
- Transfer
|
||||
- 修复样式问题 (#17206 by @iamkun)
|
||||
- Dialog
|
||||
- 添加 SCSS 变量 (#16365 by @haoranyu)
|
||||
- RadioGroup
|
||||
- is 指定时,不产生非法的 HTML 片段 (#17070 by @nullptru)
|
||||
- Divider
|
||||
- 支持自定义类 (#17078 by @island205)
|
||||
- Carousel
|
||||
- 修复 change 的触发时机 (#16705 by @iamkun)
|
||||
- Notification
|
||||
- 不修改传入的 option (#16704 by @iamkun)
|
||||
- DatePicker
|
||||
- 给 picker-option 添加 className 属性 (#16632 by @iamkun)
|
||||
- DateTimePicker
|
||||
- 修复时间选择滚动条的问题 (#16854 by @jesse-li)
|
||||
|
||||
#### Optimization
|
||||
|
||||
- Checkbox
|
||||
- 提高可访问性 (#16575 by @tylertrotter)
|
||||
- Docs
|
||||
- 更新 changelog (#16773 by @SimonaliaChen)
|
||||
- 更新贡献指南 (#14800 by @sinchang)
|
||||
- 修复 Drawer 文档中的拼写错误 (#16848 by @winkay)
|
||||
- 更新自定义主题 (#16983 by @iamkun)
|
||||
- 新增 Esperanto 翻译 (#16955 by @maxkoryukov)
|
||||
- 更新 input-number 文档 (#16316 by @luckyCao)
|
||||
- 更新 Spanish 文档 (#16961 #16548 by @Gonzalo2310)
|
||||
- I18n
|
||||
- 更新加泰罗尼亚语翻译 (#14722 by @oscaralbareda)
|
||||
- 更新阿拉伯语翻译 (#16653 by @l3op)
|
||||
- Test
|
||||
- 修复拼写错误 (#16672 by @boomler)
|
||||
- 优化 image 的单元测试 (#16847 by @a631807682)
|
||||
- Types
|
||||
- 修复 httprequest 的类型 (#16633 by @luckyCao)
|
||||
|
||||
### 2.11.1
|
||||
|
||||
*2019-07-26*
|
||||
@@ -9,7 +206,7 @@
|
||||
- Image
|
||||
- 修复 Image 组件 SSR 兼容性 (#16737 by @luckyCao)
|
||||
- Chore
|
||||
- 更新 dart-sass 的兼容性 by @LewisChennnnn)
|
||||
- 更新 dart-sass 的兼容性 (#16744 by @LewisChennnnn)
|
||||
|
||||
### 2.11.0
|
||||
|
||||
@@ -31,10 +228,11 @@
|
||||
- 更新 split-button 默认颜色 (#15931 by @JuniorTour)
|
||||
- Cascader
|
||||
- 修复一级菜单更新问题 (#16399 by @luckyCao)
|
||||
- 更新显示正确的 header 的逻辑 (#16354 by @ziyoung)
|
||||
- 懒加载时设默认值 (#16420 by @luckyCao)
|
||||
- 修复显示问题 (#15935 by @junyiz)
|
||||
- 对外暴露 getCheckedNodes 和修复 option 问题 (#16709 by @SimonaliaChen)
|
||||
- 修复当节点值重复时的显示问题 (#15935 by @junyiz)
|
||||
- 对外暴露 getCheckedNodes 和修复 options 改变会影响选中的问题 (#16709 by @SimonaliaChen)
|
||||
- Calendar
|
||||
- 更新显示正确的 header 的逻辑 (#16354 by @ziyoung)
|
||||
- Submenu
|
||||
- 修复 append-to-body 问题 (#16289 by @a631807682)
|
||||
- Table
|
||||
|
||||
@@ -233,11 +233,11 @@ Become a sponsor and get your logo on our README on Github with a link to your s
|
||||
<a href="https://opencollective.com/element/sponsor/28/website" target="_blank"><img src="https://opencollective.com/element/sponsor/28/avatar.svg"></a>
|
||||
<a href="https://opencollective.com/element/sponsor/29/website" target="_blank"><img src="https://opencollective.com/element/sponsor/29/avatar.svg"></a>
|
||||
|
||||
## Join Discusion Group
|
||||
## Join Discussion Group
|
||||
|
||||
Scan the QR code using [Dingtalk App](https://www.dingtalk.com/) to join in discusion group :
|
||||
Scan the QR code using [Dingtalk App](https://www.dingtalk.com/) to join in discussion group :
|
||||
|
||||
<img alt="Join Discusion Group" src="https://user-images.githubusercontent.com/17680888/60150281-95183f80-980a-11e9-88a8-d324c5e8d83b.png" width="300">
|
||||
<img alt="Join Discusion Group" src="https://user-images.githubusercontent.com/17680888/66537329-9a4b9100-eb52-11e9-9d99-65469cfdae58.jpeg" width="300">
|
||||
|
||||
|
||||
## LICENSE
|
||||
|
||||
@@ -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' };
|
||||
if (!content[version]) content[version] = '2.11';
|
||||
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' };
|
||||
if (!content[version]) content[version] = '2.13';
|
||||
fs.writeFileSync(path.resolve(__dirname, '../../examples/versions.json'), JSON.stringify(content));
|
||||
|
||||
@@ -40,7 +40,7 @@ if [ "$TRAVIS_TAG" ]; then
|
||||
# build sub folder
|
||||
echo $TRAVIS_TAG
|
||||
|
||||
SUB_FOLDER='2.11'
|
||||
SUB_FOLDER='2.13'
|
||||
mkdir $SUB_FOLDER
|
||||
rm -rf *.js *.css *.map static
|
||||
rm -rf $SUB_FOLDER/**
|
||||
|
||||
@@ -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.11'
|
||||
SUB_FOLDER='2.13'
|
||||
mkdir -p $SUB_FOLDER
|
||||
rm -rf *.js *.css *.map static
|
||||
rm -rf $SUB_FOLDER/**
|
||||
|
||||
@@ -15,6 +15,9 @@ then
|
||||
# build
|
||||
VERSION=$VERSION npm run dist
|
||||
|
||||
# ssr test
|
||||
node test/ssr/require.test.js
|
||||
|
||||
# publish theme
|
||||
echo "Releasing theme-chalk $VERSION ..."
|
||||
cd packages/theme-chalk
|
||||
|
||||
@@ -16,8 +16,7 @@ const isPlay = !!process.env.PLAY_ENV;
|
||||
const webpackConfig = {
|
||||
mode: process.env.NODE_ENV,
|
||||
entry: isProd ? {
|
||||
docs: './examples/entry.js',
|
||||
'element-ui': './src/index.js'
|
||||
docs: './examples/entry.js'
|
||||
} : (isPlay ? './examples/play.js' : './examples/entry.js'),
|
||||
output: {
|
||||
path: path.resolve(process.cwd(), './examples/element-ui/'),
|
||||
@@ -148,6 +147,16 @@ if (isProd) {
|
||||
}),
|
||||
new OptimizeCSSAssetsPlugin({})
|
||||
);
|
||||
// https://webpack.js.org/configuration/optimization/#optimizationsplitchunks
|
||||
webpackConfig.optimization.splitChunks = {
|
||||
cacheGroups: {
|
||||
vendor: {
|
||||
test: /\/src\//,
|
||||
name: 'element-ui',
|
||||
chunks: 'all'
|
||||
}
|
||||
}
|
||||
};
|
||||
webpackConfig.devtool = false;
|
||||
}
|
||||
|
||||
|
||||
33
build/webpack.extension.js
Normal file
33
build/webpack.extension.js
Normal file
@@ -0,0 +1,33 @@
|
||||
const path = require('path');
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
const demoConfig = require('./webpack.demo');
|
||||
const webpack = require('webpack');
|
||||
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
|
||||
const VueLoaderPlugin = require('vue-loader/lib/plugin');
|
||||
|
||||
demoConfig.entry = {
|
||||
background: path.join(process.cwd(), './examples/extension/src/background'),
|
||||
entry: path.join(process.cwd(), './examples/extension/src/entry')
|
||||
};
|
||||
demoConfig.output = {
|
||||
path: path.join(process.cwd(), './examples/extension/dist'),
|
||||
filename: '[name].js'
|
||||
};
|
||||
demoConfig.plugins = [
|
||||
new CopyWebpackPlugin([
|
||||
{ from: 'examples/extension/src/manifest.json' },
|
||||
{ from: 'examples/extension/src/icon.png' }
|
||||
]),
|
||||
new VueLoaderPlugin(),
|
||||
new ProgressBarPlugin(),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
vue: {
|
||||
compilerOptions: {
|
||||
preserveWhitespace: false
|
||||
}
|
||||
}
|
||||
}),
|
||||
new webpack.HotModuleReplacementPlugin()
|
||||
];
|
||||
demoConfig.module.rules.find(a => a.loader === 'url-loader').query = {};
|
||||
module.exports = demoConfig;
|
||||
@@ -79,5 +79,6 @@
|
||||
"page-header": "./packages/page-header/index.js",
|
||||
"cascader-panel": "./packages/cascader-panel/index.js",
|
||||
"avatar": "./packages/avatar/index.js",
|
||||
"drawer": "./packages/drawer/index.js"
|
||||
"drawer": "./packages/drawer/index.js",
|
||||
"popconfirm": "./packages/popconfirm/index.js"
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<section class="config" :key="displayName">
|
||||
<div class="config-label">
|
||||
<el-tooltip :content="displayName">
|
||||
<el-tooltip :content="displayName" placement="top">
|
||||
<span>{{displayKeyName}}</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<section class="config" :key="displayName">
|
||||
<div class="config-label">
|
||||
<el-tooltip :content="displayName">
|
||||
<el-tooltip :content="displayName" placement="top">
|
||||
<span>{{displayKeyName}}</span>
|
||||
</el-tooltip>
|
||||
<el-button
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<section class="config" :key="displayName">
|
||||
<div class="config-label">
|
||||
<el-tooltip :content="displayName">
|
||||
<el-tooltip :content="displayName" placement="top">
|
||||
<span>{{displayKeyName}}</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<section class="config" :key="displayName">
|
||||
<div class="config-label">
|
||||
<el-tooltip :content="displayName">
|
||||
<el-tooltip :content="displayName" placement="top">
|
||||
<span>{{displayKeyName}}</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<section class="config" :key="displayName">
|
||||
<div class="config-label">
|
||||
<el-tooltip :content="displayName">
|
||||
<el-tooltip :content="displayName" placement="top">
|
||||
<span>{{displayKeyName}}</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<section class="config" :key="displayName">
|
||||
<div class="config-label">
|
||||
<el-tooltip :content="displayName">
|
||||
<el-tooltip :content="displayName" placement="top">
|
||||
<span>{{displayKeyName}}</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<section class="config" :key="displayName">
|
||||
<div class="config-label">
|
||||
<el-tooltip :content="displayName">
|
||||
<el-tooltip :content="displayName" placement="top">
|
||||
<span>{{displayKeyName}}</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
@@ -102,7 +102,7 @@ export default {
|
||||
defaultConfig = res;
|
||||
})
|
||||
.catch(err => {
|
||||
this.onError(err);
|
||||
this.onError && this.onError(err);
|
||||
})
|
||||
.then(() => {
|
||||
setTimeout(() => {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="main" ref="mainPanel">
|
||||
<div class="editor-main" ref="mainPanel">
|
||||
<!-- <span>{{configName}}</span> -->
|
||||
<div v-for="(config, key) in configByOrder" :key="key">
|
||||
<span
|
||||
@@ -22,7 +22,7 @@
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.main {
|
||||
.editor-main {
|
||||
padding: 0 18px 15px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@@ -260,7 +260,8 @@ export default {
|
||||
base: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
from: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -308,6 +309,10 @@ export default {
|
||||
switch (e) {
|
||||
case 'preview':
|
||||
case 'edit':
|
||||
if (this.from) {
|
||||
this.$emit('action', e, this.config);
|
||||
return;
|
||||
}
|
||||
const { name, theme } = this.config;
|
||||
savePreviewToLocal({
|
||||
type: this.type,
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
## Custom theme
|
||||
Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea. We provide four ways to change the style variables.
|
||||
|
||||
### Online Theme Roller
|
||||
### Theme Roller
|
||||
Use [Online Theme Roller](./#/en-US/theme) to customize all Design Tokens of global variables and components,and preview the new theme in real-time.and it can generate a complete style package based on the new theme for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' part of this section).
|
||||
|
||||
<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 70%;margin: 30px auto 0;display: block;">
|
||||
Also, use [Theme Roller Chrome Extension](https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim),to customize theme and preview in real-time on any website developed by Element.
|
||||
|
||||
<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 100%;margin: 30px auto 0;display: block;">
|
||||
|
||||
### Changing theme color
|
||||
If you just want to change the theme color of Element, the [theme preview website](https://elementui.github.io/theme-chalk-preview/#/en-US) is recommended. The theme color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects.
|
||||
|
||||
@@ -462,6 +462,7 @@ When picking a date range, you can assign the time part for start date and end d
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |
|
||||
| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
|
||||
| cellClassName | set custom className | Function(Date) | — | — |
|
||||
| firstDayOfWeek | first day of week | Number | 1 to 7 | 7 |
|
||||
| onPick | a callback that triggers when the selected date is changed. Only for `daterange` and `datetimerange`. | Function({ maxDate, minDate }) | - | - |
|
||||
|
||||
|
||||
@@ -219,6 +219,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |
|
||||
| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
|
||||
| cellClassName | set custom className | Function(Date) | — | — |
|
||||
| firstDayOfWeek | first day of week | Number | 1 to 7 | 7 |
|
||||
|
||||
### shortcuts
|
||||
|
||||
@@ -50,6 +50,36 @@ Callout a temporary drawer, from multiple direction
|
||||
```
|
||||
:::
|
||||
|
||||
### No Title
|
||||
|
||||
When you no longer need a title, you can remove title from drawer.
|
||||
|
||||
:::demo Set the `withHeader` attribute to **false**, you can remove the title from drawer, thus your drawer can have more space on screen. If you want to be accessible, make sure to set the `title` attribute.
|
||||
|
||||
```html
|
||||
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
|
||||
open
|
||||
</el-button>
|
||||
|
||||
<el-drawer
|
||||
title="I am the title"
|
||||
:visible.sync="drawer"
|
||||
:with-header="false">
|
||||
<span>Hi there!</span>
|
||||
</el-drawer>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
drawer: false,
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Customization Content
|
||||
|
||||
Like `Dialog`, `Drawer` can do many diverse interaction as you wanted.
|
||||
@@ -92,7 +122,7 @@ Like `Dialog`, `Drawer` can do many diverse interaction as you wanted.
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="demo-drawer__footer">
|
||||
<el-button @click="dialog = false">Cancel</el-button>
|
||||
<el-button @click="cancelForm">Cancel</el-button>
|
||||
<el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? 'Submitting ...' : 'Submit' }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -132,20 +162,32 @@ export default {
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formLabelWidth: '80px'
|
||||
formLabelWidth: '80px',
|
||||
timer: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClose(done) {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
this.$confirm('Do you want to submit?')
|
||||
.then(_ => {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.timer = setTimeout(() => {
|
||||
done();
|
||||
// animation takes time
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 400);
|
||||
}, 2000);
|
||||
})
|
||||
.catch(_ => {});
|
||||
},
|
||||
cancelForm() {
|
||||
this.loading = false;
|
||||
this.dialog = false;
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -232,12 +274,13 @@ If the variable bound to `visible` is managed in Vuex store, the `.sync` can not
|
||||
| destroy-on-close | Indicates whether children should be destroyed after Drawer closed | boolean | - | false |
|
||||
| modal | Should show shadowing layer | boolean | — | true |
|
||||
| modal-append-to-body | Indicates should shadowing layer be insert into DocumentBody element | boolean | — | true |
|
||||
| direction | Drawer's opening direction | Direction | rtl / ltr / ttb / tbb | rtl |
|
||||
| direction | Drawer's opening direction | Direction | rtl / ltr / ttb / btt | rtl |
|
||||
| show-close | Should show close button at the top right of Drawer | boolean | — | true |
|
||||
| size | Drawer's size, if Drawer is horizontal mode, it effects the width property, otherwise it effects the height property, when size is `number` type, it describes the size by unit of pixels; when size is `string` type, it should be used with `x%` notation, other wise it will be interpreted to pixel unit | number / string | - | '30%' |
|
||||
| title | Drawer's title, can also be set by named slot, detailed descriptions can be found in the slot form | string | — | — |
|
||||
| visible | Should Drawer be displayed, also support the `.sync` notation | boolean | — | false |
|
||||
| wrapperClosable | Indicates whether user can close Drawer by clicking the shadowing layer. | boolean | - | true |
|
||||
| withHeader | Flag that controls the header section's existance, default to true, when withHeader set to false, both `title attribute` and `title slot` won't work | boolean | - | true |
|
||||
|
||||
### Drawer Slot
|
||||
|
||||
|
||||
@@ -220,6 +220,7 @@ Currently Element ships with the following languages:
|
||||
<li>Kyrgyz (kg)</li>
|
||||
<li>Armenian (hy)</li>
|
||||
<li>Croatian (hr)</li>
|
||||
<li>Esperanto (eo)</li>
|
||||
</ul>
|
||||
|
||||
If your target language is not included, you are more than welcome to contribute: just add another language config [here](https://github.com/ElemeFE/element/tree/dev/src/locale/lang) and create a pull request.
|
||||
|
||||
@@ -174,7 +174,7 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
|
||||
|min | the minimum allowed value | number | — | `-Infinity` |
|
||||
|max | the maximum allowed value | number | — | `Infinity` |
|
||||
|step | incremental step | number | — | 1 |
|
||||
|step-strictly | whether input value can only be multiple of step | number | — | false |
|
||||
|step-strictly | whether input value can only be multiple of step | boolean | — | false |
|
||||
|precision | precision of input value | number | — | — |
|
||||
|size | size of the component | string | large/small| — |
|
||||
|disabled| whether the component is disabled | boolean | — | false |
|
||||
@@ -188,7 +188,7 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
|
||||
|
||||
| Event Name | Description | Parameters |
|
||||
|----| ---- | -----|
|
||||
|change | triggers when the value changes | value after change |
|
||||
|change | triggers when the value changes | currentValue, oldValue |
|
||||
| blur | triggers when Input blurs | (event: Event) |
|
||||
| focus | triggers when Input focuses | (event: Event) |
|
||||
|
||||
|
||||
@@ -604,7 +604,8 @@ export default {
|
||||
|----| ----| ----|
|
||||
| blur | triggers when Input blurs | (event: Event) |
|
||||
| focus | triggers when Input focuses | (event: Event) |
|
||||
| change | triggers when the icon inside Input value change | (value: string \| number) |
|
||||
| change | triggers only when the input box loses focus or the user presses Enter | (value: string \| number) |
|
||||
| input | triggers when the Input value change | (value: string \| number) |
|
||||
| clear | triggers when the Input is cleared by clicking the clear button | — |
|
||||
|
||||
### Input Methods
|
||||
@@ -658,6 +659,7 @@ Attribute | Description | Type | Options | Default
|
||||
| Event Name | Description | Parameters |
|
||||
|----| ----| ----|
|
||||
|select | triggers when a suggestion is clicked | suggestion being clicked |
|
||||
| change | triggers when the icon inside Input value change | (value: string \| number) |
|
||||
|
||||
### Autocomplete Methods
|
||||
|
||||
|
||||
@@ -128,13 +128,13 @@ Show a full screen animation while loading data.
|
||||
<template>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="openFullScreen"
|
||||
@click="openFullScreen1"
|
||||
v-loading.fullscreen.lock="fullscreenLoading">
|
||||
As a directive
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="openFullScreen">
|
||||
@click="openFullScreen2">
|
||||
As a service
|
||||
</el-button>
|
||||
</template>
|
||||
@@ -147,13 +147,13 @@ Show a full screen animation while loading data.
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openFullScreen() {
|
||||
openFullScreen1() {
|
||||
this.fullscreenLoading = true;
|
||||
setTimeout(() => {
|
||||
this.fullscreenLoading = false;
|
||||
}, 2000);
|
||||
},
|
||||
openFullScreen() {
|
||||
openFullScreen2() {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Loading',
|
||||
|
||||
60
examples/docs/en-US/popconfirm.md
Normal file
60
examples/docs/en-US/popconfirm.md
Normal file
@@ -0,0 +1,60 @@
|
||||
## Popconfirm
|
||||
|
||||
A simple confirmation dialog of an element click action.
|
||||
|
||||
### Basic usage
|
||||
|
||||
Popconfirm is similar to Popover. So for some duplicated attributes, please refer to the documentation of Popover.
|
||||
|
||||
:::demo Only `title` attribute is avaliable in Popconfirm, `content` will be ignored.
|
||||
```html
|
||||
<template>
|
||||
<el-popconfirm
|
||||
title="Are you sure to delete this?"
|
||||
>
|
||||
<el-button slot="reference">Delete</el-button>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
````
|
||||
:::
|
||||
|
||||
### Customise
|
||||
You can customise Popconfirm like:
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<el-popconfirm
|
||||
confirmButtonText='OK'
|
||||
cancelButtonText='No, Thanks'
|
||||
icon="el-icon-info"
|
||||
iconColor="red"
|
||||
title="Are you sure to delete this?"
|
||||
>
|
||||
<el-button slot="reference">Delete</el-button>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
|
||||
| title | Title | String | — | — |
|
||||
| confirmButtonText | Confirm button text | String | — | — |
|
||||
| cancelButtonText | Cancel button text | String | — | — |
|
||||
| confirmButtonType | Confirm button type | String | — | Primary |
|
||||
| cancelButtonType | Cancel button type | String | — | Text |
|
||||
| icon | Icon | String | — | el-icon-question |
|
||||
| iconColor | Icon color | String | — | #f90 |
|
||||
| hideIcon | is hide Icon | Boolean | — | false |
|
||||
|
||||
### Slot
|
||||
| Name | Description |
|
||||
|--- | ---|
|
||||
| reference | HTML element that triggers Popconfirm |
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------|--------|---------|
|
||||
| onConfirm | triggers when click confirm button | — |
|
||||
| onCancel | triggers when click cancel button | — |
|
||||
@@ -151,7 +151,8 @@ Of course, you can nest other operations. It's more light-weight than using a di
|
||||
| visible-arrow | whether a tooltip arrow is displayed or not. For more info, please refer to [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
|
||||
| popper-options | parameters for [popper.js](https://popper.js.org/documentation.html) | object | please refer to [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| popper-class | custom class name for popover | string | — | — |
|
||||
| open-delay | delay of appearance when `trigger` is hover, in milliseconds | number | — | — |
|
||||
| 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 |
|
||||
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover | number | — | 0 |
|
||||
|
||||
### Slot
|
||||
|
||||
@@ -170,3 +170,4 @@ 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 |
|
||||
@@ -453,7 +453,7 @@ Enter keywords and search data from server.
|
||||
},
|
||||
mounted() {
|
||||
this.list = this.states.map(item => {
|
||||
return { value: item, label: item };
|
||||
return { value: `value:${item}`, label: `label:${item}` };
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -6,7 +6,7 @@ Guide the user to complete tasks in accordance with the process. Its steps can b
|
||||
|
||||
Simple step bar.
|
||||
|
||||
:::demo Set `active` attribute with `Number` type, which indicates the index of steps and starts from 0. You can set `space` attribute when the width of the step needs to be fixed which accepts `Boolean` type. The unit of the `space` attribute is `px`. If not set, it is responsive. Setting the `finish-status` attribute can change the state of the steps that have been completed.
|
||||
:::demo Set `active` attribute with `Number` type, which indicates the index of steps and starts from 0. You can set `space` attribute when the width of the step needs to be fixed which accepts `Number` type. The unit of the `space` attribute is `px`. If not set, it is responsive. Setting the `finish-status` attribute can change the state of the steps that have been completed.
|
||||
|
||||
```html
|
||||
<el-steps :active="active" finish-status="success">
|
||||
@@ -50,7 +50,7 @@ Shows the status of the step for each step.
|
||||
```
|
||||
:::
|
||||
|
||||
### Center
|
||||
### Center
|
||||
|
||||
Title and desription can be centered.
|
||||
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
## Avatar avatar
|
||||
## Avatar
|
||||
|
||||
Avatars can be used to represent people or objects. It supports images, Icons, or characters.
|
||||
Los avatares pueden utilizarse para representar personas u objetos. Soporta imágenes, iconos o caracteres.
|
||||
|
||||
### Basic
|
||||
### Básico
|
||||
|
||||
use `shape` and `size` prop to set avatar's shape and size
|
||||
Use los props `shape` y `size` para establecer la forma y el tamaño del avatar
|
||||
|
||||
:::demo
|
||||
```html
|
||||
@@ -45,9 +45,9 @@ use `shape` and `size` prop to set avatar's shape and size
|
||||
```
|
||||
:::
|
||||
|
||||
### Types
|
||||
### Tipos
|
||||
|
||||
It supports images, Icons, or characters
|
||||
Soporta imágenes, iconos o caracteres.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
@@ -67,9 +67,9 @@ It supports images, Icons, or characters
|
||||
```
|
||||
:::
|
||||
|
||||
### Fallback when image load error
|
||||
### Fallback cuando se produce un error de carga de imagen
|
||||
|
||||
fallback when image load error
|
||||
Fallback cuando se produce un error de carga de imagen
|
||||
|
||||
:::demo
|
||||
```html
|
||||
@@ -93,9 +93,9 @@ fallback when image load error
|
||||
```
|
||||
:::
|
||||
|
||||
### How the image fit its container
|
||||
### Cómo encaja la imagen en su contenedor
|
||||
|
||||
Set how the image fit its container for an image avatar, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
|
||||
Establezca cómo la imagen se ajusta a su contenedor para un avatar de imagen, igual que [object-fit](https://developer.mozilla.org/es/docs/Web/CSS/object-fit).
|
||||
|
||||
:::demo
|
||||
```html
|
||||
@@ -121,25 +121,26 @@ Set how the image fit its container for an image avatar, same as [object-fit](ht
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
### Atributos
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ----------------- | -------------------------------- | --------------- | ------ | ------ |
|
||||
| icon | set representation type to Icon, more info on Icon Component | string | | |
|
||||
| size | set avatar size | number/string | number / large / medium / small | large |
|
||||
| shape | set avatar shape | string | circle / square | circle |
|
||||
| src | the address of the image for an image avatar | string | | |
|
||||
| srcSet | A list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use | string | | |
|
||||
| alt | This attribute defines an alternative text description of the image | string | | |
|
||||
| fit | set how the image fit its container for an image avatar | string | fill / contain / cover / none / scale-down | cover |
|
||||
| icon | establece el tipo de representación a Icono, más información en Componente Icon | string | | |
|
||||
| size | Establece el tamaño del avatar | number/string | number / large / medium / small | large |
|
||||
| shape | establece la forma del avatar | string | circle / square | circle |
|
||||
| src | la dirección de la imagen para un avatar de imagen | string | | |
|
||||
| srcSet | Una lista de una o más cadenas separadas por comas que indica un conjunto de posibles fuentes de imágenes para que el agente de usuario las utilice. | string | | |
|
||||
| alt | Este atributo define una descripción de texto alternativo de la imagen | string | | |
|
||||
| fit | establece cómo encaja la imagen en su contenedor para un avatar de imagen | string | fill / contain / cover / none / scale-down | cover |
|
||||
|
||||
### Events
|
||||
### Eventos
|
||||
|
||||
| Event Name | Description | Parameters |
|
||||
| Nombre | Descripción | Parámetros |
|
||||
| ------ | ------------------ | -------- |
|
||||
| error | handler when img load error, return false to prevent default fallback behavior |(e: Event) |
|
||||
| error | cuando se produce un error de carga de img, devuelve false para evitar el comportamiento de repliegue predeterminado |(e: Event) |
|
||||
|
||||
### Slot
|
||||
|
||||
| Slot Name | Description |
|
||||
| default | customize avatar content |
|
||||
| Nombre | Descripción |
|
||||
| default | personalice el contenido del avatar |
|
||||
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
## Tema personalizado
|
||||
Element utiliza la metodología BEM en CSS con la finalidad de que puedas sobrescribir los estilos fácilmente. Pero, si necesita remplazar estilos a gran escala, por ejemplo, cambiar el color del tema de azul a naranja o verde, quizás reemplazarlos uno a uno no sea lo más adecuado, para ello hay 4 maneras de modificar los estilos.
|
||||
|
||||
### Online Theme Roller
|
||||
### Theme Roller
|
||||
Use [Online Theme Roller](./#/es/theme) to customize all Design Tokens of global variables and components,and preview the new theme in real-time.and it can generate a complete style package based on the new theme for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or part of this section).
|
||||
|
||||
<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 70%;margin: 30px auto 0;display: block;">
|
||||
Also, use [Theme Roller Chrome Extension](https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim),to customize theme and preview in real-time on any website developed by Element.
|
||||
|
||||
<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 100%;margin: 30px auto 0;display: block;">
|
||||
|
||||
### Cambiando el color del tema
|
||||
Si lo que se busca es cambiar el color del tema de Element, se recomienda utilizar el [sitio de visualización de temas](https://elementui.github.io/theme-chalk-preview/#/en-US). Element utiliza un color azul brillante y amigable como tema principal. Al cambiarlo, puede hacer que Element este más conectado visualmente a proyectos específicos.
|
||||
|
||||
@@ -462,6 +462,7 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
|
||||
| -------------- | ------------------------------------------------------------ | ------------------------------ | ----------------- | ----------- |
|
||||
| shortcuts | { text, onClick } un array de objetos para establecer opciones de acceso directo, verifique la tabla siguiente | object[] | — | — |
|
||||
| disabledDate | una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un valor booleano | function | — | — |
|
||||
| cellClassName | establecer nombre de clase personalizado | Function(Date) | — | — |
|
||||
| firstDayOfWeek | primer día de la semana | Number | 1 to 7 | 7 |
|
||||
| onPick | una función que se dispara cuando se cambia la fecha seleccionada. Solamente para `daterange` y `datetimerange`. | Function({ maxDate, minDate }) | - | - |
|
||||
|
||||
|
||||
@@ -221,6 +221,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
|
||||
| -------------- | ---------------------------------------- | -------- | ----------------- | ----------- |
|
||||
| shortcuts | un array de objetos { text, onClick } para establecer las opciones de acceso directo, verifique la tabla debajo | objeto[] | — | — |
|
||||
| disabledDate | una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un booleano | función | — | — |
|
||||
| cellClassName | establecer nombre de clase personalizado | Function(Date) | — | — |
|
||||
| firstDayOfWeek | primera día de semana | Número | 1 to 7 | 7 |
|
||||
|
||||
### Accesos directos
|
||||
|
||||
@@ -229,7 +229,7 @@ Si la variable ligada a `visible` se gestiona en el Vuex store, el `.sync` no pu
|
||||
| show-close | si mostrar un botón de cerrar | boolean | — | true |
|
||||
| before-close | una devolución de llamada antes de que se cierre el cuadro de diálogo, y evitar cerrar el cuadro de diálogo | función(done) `done`se usa para cerrar el diálog | — | — |
|
||||
| center | si alinear el encabezado y el pie de página en el centro | boolean | — | false |
|
||||
| destroy-on-close | Destroy elements in Dialog when closed | boolean | — | false |
|
||||
| destroy-on-close | Destruir elementos en Dialog cuando se cierra | boolean | — | false |
|
||||
|
||||
### Slots
|
||||
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
## Drawer
|
||||
|
||||
Sometimes, `Dialog` does not always satisfy our requirements, let's say you have a massive form, or you need space to display something like `terms & conditions`, `Drawer` has almost identical API with `Dialog`, but it introduces different user experience.
|
||||
A veces, `Dialog` no siempre satisface nuestros requisitos, digamos que tiene un formulario masivo, o necesita espacio para mostrar algo como `terminos & condiciones`, `Drawer` tiene una API casi idéntica a `Dialog`, pero introduce una experiencia de usuario diferente.
|
||||
|
||||
### Basic Usage
|
||||
### Uso básico
|
||||
|
||||
Callout a temporary drawer, from multiple direction
|
||||
Llamada de un drawer temporal, desde varias direcciones
|
||||
|
||||
:::demo You must set `visible` for `Drawer` like `Dialog` does to control the visibility of `Drawer` itself, it's `boolean` type. `Drawer` has to parts: `title` & `body`, the `title` is a named slot, you can also set the title through attribute named `title`, default to an empty string, the `body` part is the main area of `Drawer`, which contains user defined content. When opening, `Drawer` expand itself from the **right corner to left** which size is **30%** of the browser window by default. You can change that default behavior by setting `direction` and `size` attribute. This show case also demonstrated how to use the `before-close` API, check the Attribute section for more detail
|
||||
:::demo Debe establecer `visible` para `Drawer` como lo hace `Dialog` para controlar la visibilidad. `visible` es del tipo `boolean`. `Drawer` tiene partes: `title` & `body`, el `title` es un slot con nombre, también puede establecer el título a través de un atributo llamado `title`, por defecto a una cadena vacía, la parte `body` es el área principal de `Drawer`, que contiene contenido definido por el usuario. Al abrir, `Drawer` se expande desde la **esquina derecha a la izquierda** cuyo tamaño es **30%** de la ventana del navegador por defecto. Puede cambiar ese comportamiento predeterminado estableciendo los atributos `direction` y `size`. Este caso de demostración también muestra cómo utilizar la API `before-close`, consulte la sección Atributos para obtener más detalles.
|
||||
|
||||
```html
|
||||
<el-radio-group v-model="direction">
|
||||
@@ -50,9 +50,39 @@ Callout a temporary drawer, from multiple direction
|
||||
```
|
||||
:::
|
||||
|
||||
### Customization Content
|
||||
### No Title
|
||||
|
||||
Like `Dialog`, `Drawer` can do many diverse interaction as you wanted.
|
||||
When you no longer need a title, you can remove title from drawer.
|
||||
|
||||
:::demo Set the `withHeader` attribute to **false**, you can remove the title from drawer, thus your drawer can have more space on screen. If you want to be accessible, make sure to set the `title` attribute.
|
||||
|
||||
```html
|
||||
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
|
||||
open
|
||||
</el-button>
|
||||
|
||||
<el-drawer
|
||||
title="I am the title"
|
||||
:visible.sync="drawer"
|
||||
:with-header="false">
|
||||
<span>Hi there!</span>
|
||||
</el-drawer>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
drawer: false,
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Personalizar el contenido
|
||||
|
||||
Al igual que `Dialog`, `Drawer` puede hacer muchas interacciones diversas.
|
||||
|
||||
:::demo
|
||||
|
||||
@@ -92,7 +122,7 @@ Like `Dialog`, `Drawer` can do many diverse interaction as you wanted.
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="demo-drawer__footer">
|
||||
<el-button @click="dialog = false">Cancel</el-button>
|
||||
<el-button @click="cancelForm">Cancel</el-button>
|
||||
<el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? 'Submitting ...' : 'Submit' }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -132,20 +162,32 @@ export default {
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formLabelWidth: '80px'
|
||||
formLabelWidth: '80px',
|
||||
timer: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClose(done) {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
this.$confirm('Do you want to submit?')
|
||||
.then(_ => {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.timer = setTimeout(() => {
|
||||
done();
|
||||
// animation takes time
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 400);
|
||||
}, 2000);
|
||||
})
|
||||
.catch(_ => {});
|
||||
},
|
||||
cancelForm() {
|
||||
this.loading = false;
|
||||
this.dialog = false;
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -153,10 +195,10 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### Nested Drawer
|
||||
### Drawer anidados
|
||||
|
||||
You can also have multiple layer of `Drawer` just like `Dialog`.
|
||||
:::demo If you need multiple Drawer in different layer, you must set the `append-to-body` attribute to **true**
|
||||
También puede tener varias capas de `Drawer` al igual que con `Dialog`.
|
||||
:::demo Si necesita varios drawer en diferentes capas, debe establecer el atributo `append-to-body` en **true**
|
||||
|
||||
```html
|
||||
|
||||
@@ -205,58 +247,59 @@ You can also have multiple layer of `Drawer` just like `Dialog`.
|
||||
|
||||
:::tip
|
||||
|
||||
The content inside Drawer should be lazy rendered, which means that the content inside Drawer will not impact the initial render performance, therefore any DOM operation should be performed through `ref` or after `open` event emitted.
|
||||
El contenido dentro del Drawer debe ser renderizado de forma perezosa, lo que significa que el contenido dentro del Drawer no afectará al rendimiento inicial del renderizado, por lo que cualquier operación DOM debe realizarse a través de `ref' o después de que se emita el evento `open'.
|
||||
|
||||
:::
|
||||
|
||||
:::tip
|
||||
|
||||
Drawer provides an API called `destroyOnClose`, which is a flag variable that indicates should destroy the children content inside Drawer after Drawer was closed. You can use this API when you need your `mounted` life cycle to be called every time the Drawer opens.
|
||||
El Drawer proporciona una API llamada "destroyOnClose", que es una variable de bandera que indica que debe destruir el contenido hijo dentro del Drawer después de que se haya cerrado. Puede utilizar esta API cuando necesite que su ciclo de vida "mounted" sea llamado cada vez que se abra el Cajón.
|
||||
|
||||
:::
|
||||
|
||||
:::tip
|
||||
|
||||
If the variable bound to `visible` is managed in Vuex store, the `.sync` can not work properly. In this case, please remove the `.sync` modifier, listen to `open` and `close` events of Dialog, and commit Vuex mutations to update the value of that variable in the event handlers.
|
||||
Si la variable `visible` se gestiona en el almacén de Vuex, el `.sync` no puede funcionar correctamente. En este caso, elimine el modificador `.sync`, escuche los eventos `open` y `close` de Drawer, y envíe mutaciones Vuex para actualizar el valor de esa variable en los manejadores de eventos.
|
||||
|
||||
:::
|
||||
|
||||
### Drawer Attributes
|
||||
### Atributos de Drawer
|
||||
|
||||
| Parameter| Description | Type | Acceptable Values | Defaults |
|
||||
| Parámetros | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| append-to-body | Controls should Drawer be inserted to DocumentBody Element, nested Drawer must assign this param to **true**| boolean | — | false |
|
||||
| before-close | If set, closing procedure will be halted | function(done), done is function type that accepts a boolean as parameter, calling done with true or without parameter will abort the close procedure | — | — |
|
||||
| close-on-press-escape | Indicates whether Drawer can be closed by pressing ESC | boolean | — | true |
|
||||
| custom-class | Extra class names for Drawer | string | — | — |
|
||||
| destroy-on-close | Indicates whether children should be destroyed after Drawer closed | boolean | - | false |
|
||||
| modal | Should show shadowing layer | boolean | — | true |
|
||||
| modal-append-to-body | Indicates should shadowing layer be insert into DocumentBody element | boolean | — | true |
|
||||
| direction | Drawer's opening direction | Direction | rtl / ltr / ttb / tbb | rtl |
|
||||
| show-close | Should show close button at the top right of Drawer | boolean | — | true |
|
||||
| size | Drawer's size, if Drawer is horizontal mode, it effects the width property, otherwise it effects the height property, when size is `number` type, it describes the size by unit of pixels; when size is `string` type, it should be used with `x%` notation, other wise it will be interpreted to pixel unit | number / string | - | '30%' |
|
||||
| title | Drawer's title, can also be set by named slot, detailed descriptions can be found in the slot form | string | — | — |
|
||||
| visible | Should Drawer be displayed, also support the `.sync` notation | boolean | — | false |
|
||||
| wrapperClosable | Indicates whether user can close Drawer by clicking the shadowing layer. | boolean | - | true |
|
||||
| append-to-body | Los controles deberían insertar Drawer en el elemento DocumentBody, los Drawer anidados deben asignar este parámetro a **true** | boolean | — | false |
|
||||
| before-close | Si está configurado, el procedimiento de cierre se detendrá. | function(done), done es un tipo de función que acepta un booleano como parámetro, una llamada hecha con true o sin parámetro abortará el procedimiento de cierre. | — | — |
|
||||
| close-on-press-escape | Indica si el Drawer puede cerrarse pulsando ESC | boolean | — | true |
|
||||
| custom-class | Nombre extra de clase para Drawer | string | — | — |
|
||||
| destroy-on-close | Indica si los children deben ser destruidos después de cerrar el Drawer. | boolean | - | false |
|
||||
| modal | Mostrará una capa de sombra | boolean | — | true |
|
||||
| modal-append-to-body | Indica si se debe insertar una capa de sombreado en el elemento DocumentBody | boolean | — | true |
|
||||
| direction | Dirección de apertura del Drawer | Direction | rtl / ltr / ttb / btt | rtl |
|
||||
| show-close | Se mostrará el botón de cerrar en la parte superior derecha del Drawer | boolean | — | true |
|
||||
| size | Tamaño del Drawer. Si el Drawer está en modo horizontal, afecta a la propiedad width, de lo contrario afecta a la propiedad height, cuando el tamaño es tipo `number`, describe el tamaño por unidad de píxeles; cuando el tamaño es tipo `string`, se debe usar con notación `x%`, de lo contrario se interpretará como unidad de píxeles. | number / string | - | '30%' |
|
||||
| title | El título del Drawer, también se puede establecer por slot con nombre, las descripciones detalladas se pueden encontrar en el formulario de slot. | string | — | — |
|
||||
| visible | Si se muestra el Drawer, también soporta la notación `.sync` | boolean | — | false |
|
||||
| wrapperClosable | Indica si el usuario puede cerrar el Drawer haciendo clic en la capa de sombreado. | boolean | - | true |
|
||||
| withHeader | Flag that controls the header section's existance, default to true, when withHeader set to false, both `title attribute` and `title slot` won't work | boolean | - | true |
|
||||
|
||||
### Drawer Slot
|
||||
### Drawer Slot's
|
||||
|
||||
| Name | Description |
|
||||
| Nombre | Descripción |
|
||||
|------|--------|
|
||||
| — | Drawer's Content |
|
||||
| title | Drawer Title Section |
|
||||
| — | El contenido del Drawer |
|
||||
| title | El titulo de la sección del Drawer |
|
||||
|
||||
### Drawer Methods
|
||||
### Métodos Drawer
|
||||
|
||||
| Name | Description |
|
||||
| Nombre | Descripción |
|
||||
| ---- | --- |
|
||||
| closeDrawer | In order to close Drawer, this method will call `before-close`. |
|
||||
| closeDrawer | Para cerrar el Drawer, este método llamará `before-close`. |
|
||||
|
||||
### Drawer Events
|
||||
### Eventos Drawer
|
||||
|
||||
| Event Name | Description | Parameter |
|
||||
| Nombre | Descripción | Parámetros |
|
||||
|---------- |-------- |---------- |
|
||||
| open | Triggered before Drawer opening animation begins | — |
|
||||
| opened | Triggered after Drawer opening animation ended | — |
|
||||
| close | Triggered before Drawer closing animation begins | — |
|
||||
| closed | Triggered after Drawer closing animation ended | — |
|
||||
| open | Se activa antes de que comience la animación de apertura del Drawer. | — |
|
||||
| opened | Se activa cuando finaliza la animación de apertura del Drawer. | — |
|
||||
| close | Se activa antes de que comience la animación de cierre del Drawer. | — |
|
||||
| closed | Se activa después de que finaliza la animación de cierre del Drawer. | — |
|
||||
|
||||
@@ -220,6 +220,7 @@ Actualmente Element está disponible en los siguientes idiomas:
|
||||
<li>Kirguizstán (kg)</li>
|
||||
<li>Armenio (hy)</li>
|
||||
<li>Croatian (hr)</li>
|
||||
<li>Esperanto (eo)</li>
|
||||
</ul>
|
||||
|
||||
Si su idioma de destino no está incluido, puede contribuir: simplemente añada [aqui](https://github.com/ElemeFE/element/tree/dev/src/locale/lang) otra configuración de idioma y cree un pull request.
|
||||
|
||||
@@ -110,9 +110,9 @@ Además de las características nativas de img, soporte de carga perezosa, marca
|
||||
```
|
||||
:::
|
||||
|
||||
### Image Preview
|
||||
### Vista previa de la imagen
|
||||
|
||||
:::demo allow big image preview by setting `previewSrcList` prop.
|
||||
:::demo permitir una vista previa grande de la imagen configurando la prop `previewSrcList`.
|
||||
```html
|
||||
<div class="demo-image__preview">
|
||||
<el-image
|
||||
@@ -147,8 +147,8 @@ Además de las características nativas de img, soporte de carga perezosa, marca
|
||||
| referrer-policy | referrerPolicy nativo | string | - | - |
|
||||
| lazy | si se usara lazy load | boolean | — | false |
|
||||
| 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 | allow big image preview | Array | — | - |
|
||||
| z-index | set image preview z-index | Number | — | 2000 |
|
||||
| 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 |
|
||||
|
||||
### Eventos
|
||||
| Nombre del evento | Descripción | Parámetros |
|
||||
|
||||
@@ -176,7 +176,7 @@ Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `s
|
||||
| min | el valor mínimo permitido | number | — | `-Infinity` |
|
||||
| max | el valor maximo permitido | number | — | `Infinity` |
|
||||
| step | incremento (salto) | number | — | 1 |
|
||||
| step-strictly | si el valor del input puede ser solo un multiplo de step | number | — | false |
|
||||
| step-strictly | si el valor del input puede ser solo un multiplo de step | boolean | — | false |
|
||||
| precision | precisión del valor del input | number | — | — |
|
||||
| size | tamaño del componente | string | large/small | — |
|
||||
| disabled | si el componente esta deshabilitado | boolean | — | false |
|
||||
@@ -190,7 +190,7 @@ Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `s
|
||||
|
||||
| Nombre | Descripción | Parámetros |
|
||||
| ------ | ---------------------------------------- | ------------------ |
|
||||
| change | se produce cuando el valor cambia | value after change |
|
||||
| change | se produce cuando el valor cambia | currentValue, oldValue |
|
||||
| blur | se produce cuando el componente pierde el foco | (event: Event) |
|
||||
| focus | se produce cuando el componente obtiene el foco | (event: Event) |
|
||||
|
||||
|
||||
@@ -618,6 +618,8 @@ 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`. | — |
|
||||
|
||||
### Input Metodo
|
||||
@@ -672,6 +674,7 @@ export default {
|
||||
| Nombre | Descripción | Parametros |
|
||||
| ------ | ----------------------------------------------- | ------------------------------------------ |
|
||||
| select | se dispara cuando se hace clic a una sugerencia | sugerencia en la que se está haciendo clic |
|
||||
| change | se activa cuando cambia el valor de entrada | (value: string \| number) |
|
||||
|
||||
### Autocomplete Metodo
|
||||
|
||||
|
||||
@@ -128,13 +128,13 @@ Muestra una animación de pantalla completa mientras se cargan los datos
|
||||
<template>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="openFullScreen"
|
||||
@click="openFullScreen1"
|
||||
v-loading.fullscreen.lock="fullscreenLoading">
|
||||
Como directiva
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="openFullScreen">
|
||||
@click="openFullScreen2">
|
||||
Como servicio
|
||||
</el-button>
|
||||
</template>
|
||||
@@ -147,13 +147,13 @@ Muestra una animación de pantalla completa mientras se cargan los datos
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openFullScreen() {
|
||||
openFullScreen1() {
|
||||
this.fullscreenLoading = true;
|
||||
setTimeout(() => {
|
||||
this.fullscreenLoading = false;
|
||||
}, 2000);
|
||||
},
|
||||
openFullScreen() {
|
||||
openFullScreen2() {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Loading',
|
||||
|
||||
60
examples/docs/es/popconfirm.md
Normal file
60
examples/docs/es/popconfirm.md
Normal file
@@ -0,0 +1,60 @@
|
||||
## Popconfirm
|
||||
|
||||
A simple confirmation dialog of an element click action.
|
||||
|
||||
### Basic usage
|
||||
|
||||
Popconfirm is similar to Popover. So for some duplicated attributes, please refer to the documentation of Popover.
|
||||
|
||||
:::demo Only `title` attribute is avaliable in Popconfirm, `content` will be ignored.
|
||||
```html
|
||||
<template>
|
||||
<el-popconfirm
|
||||
title="Are you sure to delete this?"
|
||||
>
|
||||
<el-button slot="reference">Delete</el-button>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
````
|
||||
:::
|
||||
|
||||
### Customise
|
||||
You can customise Popconfirm like:
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<el-popconfirm
|
||||
confirmButtonText='OK'
|
||||
cancelButtonText='No, Thanks'
|
||||
icon="el-icon-info"
|
||||
iconColor="red"
|
||||
title="Are you sure to delete this?"
|
||||
>
|
||||
<el-button slot="reference">Delete</el-button>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
|
||||
| title | Title | String | — | — |
|
||||
| confirmButtonText | Confirm button text | String | — | — |
|
||||
| cancelButtonText | Cancel button text | String | — | — |
|
||||
| confirmButtonType | Confirm button type | String | — | Primary |
|
||||
| cancelButtonType | Cancel button type | String | — | Text |
|
||||
| icon | Icon | String | — | el-icon-question |
|
||||
| iconColor | Icon color | String | — | #f90 |
|
||||
| hideIcon | is hide Icon | Boolean | — | false |
|
||||
|
||||
### Slot
|
||||
| Name | Description |
|
||||
|--- | ---|
|
||||
| reference | HTML element that triggers Popconfirm |
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------|--------|---------|
|
||||
| onConfirm | triggers when click confirm button | — |
|
||||
| onCancel | triggers when click cancel button | — |
|
||||
@@ -151,6 +151,7 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
|
||||
| popper-options | parámetros para [popper.js](https://popper.js.org/documentation.html) | object | por favor, refiérase a [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| popper-class | clase propia para popover | string | — | — |
|
||||
| open-delay | retraso de la aparición cuando `trigger` es hover, en milisegundos | number | — | — |
|
||||
| close-delay | Retraso antes de desaparecer cuando el `trigger` es hover, en milisegundos. | number | — | 200 |
|
||||
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) de Popover | number | — | 0 |
|
||||
|
||||
### Slot
|
||||
|
||||
@@ -168,3 +168,4 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
|
||||
| color | color de fondo de la barra de progreso. Sobreescribe 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 type shape at the end path | string | butt/round/square | round |
|
||||
@@ -457,7 +457,7 @@ Introduzca palabras y datos para buscar desde el servidor.
|
||||
},
|
||||
mounted() {
|
||||
this.list = this.states.map(item => {
|
||||
return { value: item, label: item };
|
||||
return { value: `value:${item}`, label: `label:${item}` };
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -6,7 +6,7 @@ Guía al usuario para completar tareas de acuerdo con el proceso. Sus pasos pued
|
||||
|
||||
Barra de pasos simple.
|
||||
|
||||
:::demo Defina el atributo `active` con un valor de tipo `Number`, que indica el índice de pasos y comienza desde 0. Puede definir el atributo `space` cuando es necesario fijar el ancho del paso que acepta el tipo `Boolean`. La unidad del atributo `space` es px. Si no está configurado, es responsive. La configuración del atributo `finish-status` puede cambiar el estado de los pasos completados.
|
||||
:::demo Defina el atributo `active` con un valor de tipo `Number`, que indica el índice de pasos y comienza desde 0. Puede definir el atributo `space` cuando es necesario fijar el ancho del paso que acepta el tipo `Number`. La unidad del atributo `space` es px. Si no está configurado, es responsive. La configuración del atributo `finish-status` puede cambiar el estado de los pasos completados.
|
||||
|
||||
```html
|
||||
<el-steps :active="active" finish-status="success">
|
||||
@@ -50,7 +50,7 @@ Muestra el estado del step para cada paso.
|
||||
```
|
||||
:::
|
||||
|
||||
### Centrado
|
||||
### Centrado
|
||||
|
||||
El título y la descripción pueden estar centrados.
|
||||
|
||||
|
||||
@@ -1,17 +1,18 @@
|
||||
## Avatar avatar
|
||||
|
||||
Avatars can be used to represent people or objects. It supports images, Icons, or characters.
|
||||
Les avatars peuvent être utilisés pour représenter des personnes ou des objets. Les images, icônes et les caractères sont supportés.
|
||||
|
||||
### Basic
|
||||
|
||||
use `shape` and `size` prop to set avatar's shape and size
|
||||
utilisez les prop `shape` et` size` pour définir la forme et la taille de l'avatar
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<el-row class="demo-avatar demo-basic">
|
||||
<el-col :span="12">
|
||||
<div class="sub-title">circle</div>
|
||||
<div class="sub-title">cercle</div>
|
||||
<div class="demo-basic--circle">
|
||||
<div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
|
||||
<div class="block" v-for="size in sizeList" :key="size">
|
||||
@@ -20,14 +21,14 @@ use `shape` and `size` prop to set avatar's shape and size
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="sub-title">square</div>
|
||||
<div class="sub-title">carré</div>
|
||||
<div class="demo-basic--circle">
|
||||
<div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div>
|
||||
<div class="block" v-for="size in sizeList" :key="size">
|
||||
<el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
<script>
|
||||
@@ -47,7 +48,7 @@ use `shape` and `size` prop to set avatar's shape and size
|
||||
|
||||
### Types
|
||||
|
||||
It supports images, Icons, or characters
|
||||
Les images, icônes et les caractères sont supportés.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
@@ -67,9 +68,9 @@ It supports images, Icons, or characters
|
||||
```
|
||||
:::
|
||||
|
||||
### Fallback when image load error
|
||||
### fallback en cas d'erreur de chargement d'image
|
||||
|
||||
fallback when image load error
|
||||
fallback en cas d'erreur de chargement d'image
|
||||
|
||||
:::demo
|
||||
```html
|
||||
@@ -93,9 +94,9 @@ fallback when image load error
|
||||
```
|
||||
:::
|
||||
|
||||
### How the image fit its container
|
||||
### Comment l'image s'adapte à son conteneur
|
||||
|
||||
Set how the image fit its container for an image avatar, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
|
||||
Défini comment l'image s'adapte à son conteneur, pareil que [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
|
||||
|
||||
:::demo
|
||||
```html
|
||||
@@ -123,23 +124,23 @@ Set how the image fit its container for an image avatar, same as [object-fit](ht
|
||||
|
||||
### Attributes
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| Attribute | Description | Type | Valeurs acceptées | Default |
|
||||
| ----------------- | -------------------------------- | --------------- | ------ | ------ |
|
||||
| icon | set representation type to Icon, more info on Icon Component | string | | |
|
||||
| size | set avatar size | number/string | number / large / medium / small | large |
|
||||
| shape | set avatar shape | string | circle / square | circle |
|
||||
| src | the address of the image for an image avatar | string | | |
|
||||
| srcSet | A list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use | string | | |
|
||||
| alt | This attribute defines an alternative text description of the image | string | | |
|
||||
| fit | set how the image fit its container for an image avatar | string | fill / contain / cover / none / scale-down | cover |
|
||||
| icon | Défini le type de représentation sur Icon, plus d’informations sur le composant Icon | string | | |
|
||||
| size | Défini la taille de l'avatar | number/string | number / large / medium / small | large |
|
||||
| shape | Défini la forme de l'avatar | string | circle / square | circle |
|
||||
| src | L'adresse de l'image pour un avatar image | string | | |
|
||||
| srcSet | Une liste d'un ou plusieurs string séparés par des virgules indiquant un ensemble de sources d'images possibles que le user agent peut utiliser | string | | |
|
||||
| alt | Cet attribut définit une description textuelle alternative de l'image | string | | |
|
||||
| fit | Défini comment l'image s'adapte à son conteneur | string | fill / contain / cover / none / scale-down | cover |
|
||||
|
||||
### Events
|
||||
### Évènements
|
||||
|
||||
| Event Name | Description | Parameters |
|
||||
| Event Name | Description | Paramètres |
|
||||
| ------ | ------------------ | -------- |
|
||||
| error | handler when img load error, return false to prevent default fallback behavior |(e: Event) |
|
||||
| error | handler en cas d'erreur de chargement de l'image, renvoie false pour éviter le fallback par défaut |(e: Event) |
|
||||
|
||||
### Slot
|
||||
|
||||
| Slot Name | Description |
|
||||
| default | customize avatar content |
|
||||
| Slot Name | Description |
|
||||
| default | personnalise le contenu de l'avatar |
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
| Se## Cascader
|
||||
## Cascader
|
||||
|
||||
Si les options ont une structure hiérarchique claire, Le composant Cascader peut être utilisé pour les afficher et les sélectionner.
|
||||
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
## Thème
|
||||
Element utilise le style BEM pour le CSS afin que vous puissiez écraser les règles prédéfinies facilement. Mais si vous avez besoin de remplacer des styles à une plus grande échelle , e.g. changer le thème de bleu à orange ou vert, les modifier une par une serait fastidieux. Nous fournissons ttrtois méthodes pour changer les variables de style.
|
||||
|
||||
### Online Theme Roller
|
||||
### Theme Roller
|
||||
Utilisez [Online Theme Roller](./#/fr-FR/theme) pour personnaliser les Design Tokens des variables globales et des composants, et prévisualisez le nouveau thème en temps réel. Il peut générer un package de style complet basé sur le nouveau thème que vous pouvez télécharger directement (pour importer de nouveaux fichiers de style dans votre projet, veuillez vous reporter à la partie 'Importer un thème personnalisé'' de cette section).
|
||||
|
||||
<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 70%;margin: 30px auto 0;display: block;">
|
||||
Also, use [Theme Roller Chrome Extension](https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim),to customize theme and preview in real-time on any website developed by Element.
|
||||
|
||||
<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 100%;margin: 30px auto 0;display: block;">
|
||||
|
||||
### Changer la couleur du thème
|
||||
Si vous avez juste besoin de changer la couleur du thème, le [générateur de thème en ligne](https://elementui.github.io/theme-chalk-preview/#/en-US) est recommandé. La couleur du thème d'Element est un bleu clair et agréable. En le changeant, vous rendez Element visuellement plus adapté à vos projets.
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
## DatePicker
|
||||
|
||||
Utilisez DatePicker pour les champs de dates.
|
||||
@@ -463,6 +462,7 @@ Lorsque vous choisissez une plage de dates, vous pouvez assigner l'horaire de d
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| shortcuts | Un tableau d'objets { text, onClick } pour configurer les raccourcis, voir table ci-dessous. | object[] | — | — |
|
||||
| disabledDate | Une fonction qui détermine si une date est désactivée ou pas, avec cette date en paramètre. Doit retourner un booléen. | function | — | — |
|
||||
| cellClassName | set custom className | Function(Date) | — | — |
|
||||
| firstDayOfWeek | Premier jour du mois. | Number | 1 to 7 | 7 |
|
||||
| onPick | Callback se déclenchant quand la date sélectionnée change. Uniquement pour `daterange` et `datetimerange`. | Function({ maxDate, minDate }) | - | - |
|
||||
|
||||
|
||||
@@ -219,6 +219,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| shortcuts | Un tableau d'objets { text, onClick } pour mettre en place des raccourcis, vérifier le tableau ci-dessous | object[] | — | — |
|
||||
| disabledDate | Une fonction déterminant si une date est désactivée avec cette date en paramètre. Retourne un Boolean | function | — | — |
|
||||
| cellClassName | set custom className | Function(Date) | — | — |
|
||||
| firstDayOfWeek | Le premier jour de la semaine | Number | 1 à 7 | 7 |
|
||||
|
||||
### Raccourcis
|
||||
|
||||
@@ -50,6 +50,36 @@ Callout a temporary drawer, from multiple direction
|
||||
```
|
||||
:::
|
||||
|
||||
### No Title
|
||||
|
||||
When you no longer need a title, you can remove title from drawer.
|
||||
|
||||
:::demo Set the `withHeader` attribute to **false**, you can remove the title from drawer, thus your drawer can have more space on screen. If you want to be accessible, make sure to set the `title` attribute.
|
||||
|
||||
```html
|
||||
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
|
||||
open
|
||||
</el-button>
|
||||
|
||||
<el-drawer
|
||||
title="I am the title"
|
||||
:visible.sync="drawer"
|
||||
:with-header="false">
|
||||
<span>Hi there!</span>
|
||||
</el-drawer>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
drawer: false,
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Customization Content
|
||||
|
||||
Like `Dialog`, `Drawer` can do many diverse interaction as you wanted.
|
||||
@@ -92,7 +122,7 @@ Like `Dialog`, `Drawer` can do many diverse interaction as you wanted.
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="demo-drawer__footer">
|
||||
<el-button @click="dialog = false">Cancel</el-button>
|
||||
<el-button @click="cancelForm">Cancel</el-button>
|
||||
<el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? 'Submitting ...' : 'Submit' }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -132,20 +162,32 @@ export default {
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formLabelWidth: '80px'
|
||||
formLabelWidth: '80px',
|
||||
timer: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClose(done) {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
this.$confirm('Do you want to submit?')
|
||||
.then(_ => {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.timer = setTimeout(() => {
|
||||
done();
|
||||
// animation takes time
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 400);
|
||||
}, 2000);
|
||||
})
|
||||
.catch(_ => {});
|
||||
},
|
||||
cancelForm() {
|
||||
this.loading = false;
|
||||
this.dialog = false;
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -232,12 +274,13 @@ If the variable bound to `visible` is managed in Vuex store, the `.sync` can not
|
||||
| destroy-on-close | Indicates whether children should be destroyed after Drawer closed | boolean | - | false |
|
||||
| modal | Should show shadowing layer | boolean | — | true |
|
||||
| modal-append-to-body | Indicates should shadowing layer be insert into DocumentBody element | boolean | — | true |
|
||||
| direction | Drawer's opening direction | Direction | rtl / ltr / ttb / tbb | rtl |
|
||||
| direction | Drawer's opening direction | Direction | rtl / ltr / ttb / btt | rtl |
|
||||
| show-close | Should show close button at the top right of Drawer | boolean | — | true |
|
||||
| size | Drawer's size, if Drawer is horizontal mode, it effects the width property, otherwise it effects the height property, when size is `number` type, it describes the size by unit of pixels; when size is `string` type, it should be used with `x%` notation, other wise it will be interpreted to pixel unit | number / string | - | '30%' |
|
||||
| title | Drawer's title, can also be set by named slot, detailed descriptions can be found in the slot form | string | — | — |
|
||||
| visible | Should Drawer be displayed, also support the `.sync` notation | boolean | — | false |
|
||||
| wrapperClosable | Indicates whether user can close Drawer by clicking the shadowing layer. | boolean | - | true |
|
||||
| withHeader | Flag that controls the header section's existance, default to true, when withHeader set to false, both `title attribute` and `title slot` won't work | boolean | - | true |
|
||||
|
||||
### Drawer Slot
|
||||
|
||||
|
||||
@@ -223,6 +223,7 @@ Actuellement, Element supporte les langues suivantes:
|
||||
<li>Kirghize (kg)</li>
|
||||
<li>Croate (hr)</li>
|
||||
<li>Arménien (hy)</li>
|
||||
<li>Espéranto (eo)</li>
|
||||
</ul>
|
||||
|
||||
Si votre langue n'apparaît pas dans la liste, n'hésitez pas a contribuer: ajoutez simplement un fichier de configuration [ici](https://github.com/ElemeFE/element/tree/dev/src/locale/lang) et créez une pull request.
|
||||
|
||||
@@ -174,7 +174,7 @@ Utilisez l'attribut `size` pour régler la taille avec `medium`, `small` ou `min
|
||||
| min | La valeur minimale autorisée. | number | — | `-Infinity` |
|
||||
| max | La valeur maximale autorisée. | number | — | `Infinity` |
|
||||
| step | Le pas pour l'incrémentation. | number | — | 1 |
|
||||
| step-strictly | Si la valeur ne peut être qu'un multiple du pas. | number | — | false |
|
||||
| step-strictly | Si la valeur ne peut être qu'un multiple du pas. | boolean | — | false |
|
||||
| precision | La précision de la valeur. | number | — | — |
|
||||
| size | La taille du composant. | string | large/small| — |
|
||||
| disabled| Si le composant est désactivé. | boolean | — | false |
|
||||
@@ -188,7 +188,7 @@ Utilisez l'attribut `size` pour régler la taille avec `medium`, `small` ou `min
|
||||
|
||||
| Nom | Description | Paramètres |
|
||||
|----| ---- | -----|
|
||||
| change | Se déclenche quand la valeur change. | La nouvelle valeur. |
|
||||
| change | Se déclenche quand la valeur change. | currentValue, oldValue |
|
||||
| blur | Se déclenche quand le champ perds le focus. | (event: Event) |
|
||||
| focus | Se déclenche quand le champ a le focus. | (event: Event) |
|
||||
|
||||
|
||||
@@ -604,6 +604,8 @@ 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. | — |
|
||||
|
||||
### Méthodes de l'Input
|
||||
@@ -658,6 +660,7 @@ export default {
|
||||
| Nom | Description | Paramètres |
|
||||
|----| ----| ----|
|
||||
| select | Se déclenche quand une suggestion est cliquée. | La suggestion sélectionnée. |
|
||||
| change | Se déclenche quand la valeur change. | (value: string \ number) |
|
||||
|
||||
### Méthodes de l'autocomplétion
|
||||
|
||||
|
||||
@@ -128,13 +128,13 @@ Affichez une animation en plein écran quand vous charger des données.
|
||||
<template>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="openFullScreen"
|
||||
@click="openFullScreen1"
|
||||
v-loading.fullscreen.lock="fullscreenLoading">
|
||||
Comme directive
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="openFullScreen">
|
||||
@click="openFullScreen2">
|
||||
Comme service
|
||||
</el-button>
|
||||
</template>
|
||||
@@ -147,13 +147,13 @@ Affichez une animation en plein écran quand vous charger des données.
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openFullScreen() {
|
||||
openFullScreen1() {
|
||||
this.fullscreenLoading = true;
|
||||
setTimeout(() => {
|
||||
this.fullscreenLoading = false;
|
||||
}, 2000);
|
||||
},
|
||||
openFullScreen() {
|
||||
openFullScreen2() {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Loading',
|
||||
|
||||
60
examples/docs/fr-FR/popconfirm.md
Normal file
60
examples/docs/fr-FR/popconfirm.md
Normal file
@@ -0,0 +1,60 @@
|
||||
## Popconfirm
|
||||
|
||||
A simple confirmation dialog of an element click action.
|
||||
|
||||
### Basic usage
|
||||
|
||||
Popconfirm is similar to Popover. So for some duplicated attributes, please refer to the documentation of Popover.
|
||||
|
||||
:::demo Only `title` attribute is avaliable in Popconfirm, `content` will be ignored.
|
||||
```html
|
||||
<template>
|
||||
<el-popconfirm
|
||||
title="Are you sure to delete this?"
|
||||
>
|
||||
<el-button slot="reference">Delete</el-button>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
````
|
||||
:::
|
||||
|
||||
### Customise
|
||||
You can customise Popconfirm like:
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<el-popconfirm
|
||||
confirmButtonText='OK'
|
||||
cancelButtonText='No, Thanks'
|
||||
icon="el-icon-info"
|
||||
iconColor="red"
|
||||
title="Are you sure to delete this?"
|
||||
>
|
||||
<el-button slot="reference">Delete</el-button>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
|
||||
| title | Title | String | — | — |
|
||||
| confirmButtonText | Confirm button text | String | — | — |
|
||||
| cancelButtonText | Cancel button text | String | — | — |
|
||||
| confirmButtonType | Confirm button type | String | — | Primary |
|
||||
| cancelButtonType | Cancel button type | String | — | Text |
|
||||
| icon | Icon | String | — | el-icon-question |
|
||||
| iconColor | Icon color | String | — | #f90 |
|
||||
| hideIcon | is hide Icon | Boolean | — | false |
|
||||
|
||||
### Slot
|
||||
| Name | Description |
|
||||
|--- | ---|
|
||||
| reference | HTML element that triggers Popconfirm |
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------|--------|---------|
|
||||
| onConfirm | triggers when click confirm button | — |
|
||||
| onCancel | triggers when click cancel button | — |
|
||||
@@ -153,6 +153,7 @@ Vous pouvez aussi imbriquer des opérations. Procéder ainsi est plus léger que
|
||||
| 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-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 |
|
||||
| tabindex | [tabindex](https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/tabindex) de Popover | number | — | 0 |
|
||||
|
||||
### Slot
|
||||
|
||||
@@ -171,3 +171,4 @@ 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 |
|
||||
@@ -453,7 +453,7 @@ Vous pouvez aller chercher les options sur le serveur de manière dynamique.
|
||||
},
|
||||
mounted() {
|
||||
this.list = this.states.map(item => {
|
||||
return { value: item, label: item };
|
||||
return { value: `value:${item}`, label: `label:${item}` };
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -6,7 +6,7 @@ Permet de guider l'utilisateur dans l'accomplissement de toutes les taches d'un
|
||||
|
||||
Voici une barre d'étapes basique.
|
||||
|
||||
:::demo Réglez l'attribut `active` avec une variable `Number`, qui indique l'index des étapes et commence à 0. L'attribut `space` permet de déterminer si l'espace entre les étapes doit être fixe à l'aide d'un `Boolean`. L'unité de `space` est `px`. Si cet attribut est absent, la barre sera responsive. L'attribut `finish-status` change le statut d'accomplissement des étapes.
|
||||
:::demo Réglez l'attribut `active` avec une variable `Number`, qui indique l'index des étapes et commence à 0. L'attribut `space` permet de déterminer si l'espace entre les étapes doit être fixe à l'aide d'un `Number`. L'unité de `space` est `px`. Si cet attribut est absent, la barre sera responsive. L'attribut `finish-status` change le statut d'accomplissement des étapes.
|
||||
|
||||
```html
|
||||
<el-steps :active="active" finish-status="success">
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
## 自定义主题
|
||||
Element 默认提供一套主题,CSS 命名采用 BEM 的风格,方便使用者覆盖样式。我们提供了四种方法,可以进行不同程度的样式自定义。
|
||||
|
||||
### 在线主题编辑器
|
||||
### 主题编辑器
|
||||
使用[在线主题编辑器](./#/zh-CN/theme),可以修改定制 Element 所有全局和组件的 Design Tokens,并可以方便地实时预览样式改变后的视觉。同时它还可以基于新的定制样式生成完整的样式文件包,供直接下载使用(关于如何使用下载的主题包,请参考本节「引入自定义主题」部分)。
|
||||
|
||||
<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 70%;margin: 30px auto 0;display: block;">
|
||||
也可以使用[主题编辑器 Chrome 插件](https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim),在任何使用 Element 开发的网站上配置并实时预览主题。
|
||||
|
||||
<img src="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png" style="width: 100%;margin: 30px auto 0;display: block;">
|
||||
|
||||
### 仅替换主题色
|
||||
如果仅希望更换 Element 的主题色,推荐使用[在线主题生成工具](https://elementui.github.io/theme-chalk-preview)。Element 默认的主题色是鲜艳、友好的蓝色。通过替换主题色,能够让 Element 的视觉更加符合具体项目的定位。
|
||||
|
||||
@@ -415,6 +415,7 @@
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| shortcuts | 设置快捷选项,需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — |
|
||||
| disabledDate | 设置禁用状态,参数为当前日期,要求返回 Boolean | Function | — | — |
|
||||
| cellClassName | 设置日期的 className | Function(Date) | — | — |
|
||||
| firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |
|
||||
| onPick | 选中日期后会执行的回调,只有当 `daterange` 或 `datetimerange` 才生效 | Function({ maxDate, minDate }) | — | — |
|
||||
|
||||
|
||||
@@ -218,6 +218,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生,`Picker Options` 或者其
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| shortcuts | 设置快捷选项,需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — |
|
||||
| disabledDate | 设置禁用状态,参数为当前日期,要求返回 Boolean | Function | — | — |
|
||||
| cellClassName | 设置日期的 className | Function(Date) | — | — |
|
||||
| firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |
|
||||
|
||||
### Shortcuts
|
||||
|
||||
@@ -50,6 +50,37 @@
|
||||
```
|
||||
:::
|
||||
|
||||
### 不添加 Title
|
||||
|
||||
当你不需要标题到时候, 你还可以去掉标题
|
||||
|
||||
:::demo 当遇到不需要 title 的场景时, 可以通过 `withHeader` 这个属性来关闭掉 title 的显示, 这样可以留出更大的空间给到用户, 为了用户的可访问性, 请务必设定 `title` 的值
|
||||
|
||||
```html
|
||||
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
|
||||
点我打开
|
||||
</el-button>
|
||||
|
||||
<el-drawer
|
||||
title="我是标题"
|
||||
:visible.sync="drawer"
|
||||
:with-header="false">
|
||||
<span>我来啦!</span>
|
||||
</el-drawer>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
drawer: false,
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 自定义内容
|
||||
|
||||
和 `Dialog` 组件一样, `Drawer` 同样可以在其内部嵌套各种丰富的操作
|
||||
@@ -92,7 +123,7 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="demo-drawer__footer">
|
||||
<el-button @click="dialog = false">取 消</el-button>
|
||||
<el-button @click="cancelForm">取 消</el-button>
|
||||
<el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -132,20 +163,32 @@ export default {
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formLabelWidth: '80px'
|
||||
formLabelWidth: '80px',
|
||||
timer: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClose(done) {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定要提交表单吗?')
|
||||
.then(_ => {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.timer = setTimeout(() => {
|
||||
done();
|
||||
// 动画关闭需要一定的时间
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 400);
|
||||
}, 2000);
|
||||
})
|
||||
.catch(_ => {});
|
||||
},
|
||||
cancelForm() {
|
||||
this.loading = false;
|
||||
this.dialog = false;
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -233,12 +276,13 @@ Drawer 提供一个 `destroyOnClose` API, 用来在关闭 Drawer 时销毁子组
|
||||
| destroy-on-close | 控制是否在关闭 Drawer 之后将子元素全部销毁 | boolean | - | false |
|
||||
| modal | 是否需要遮罩层 | boolean | — | true |
|
||||
| modal-append-to-body | 遮罩层是否插入至 body 元素上,若为 false,则遮罩层会插入至 Drawer 的父元素上 | boolean | — | true |
|
||||
| direction | Drawer 打开的方向 | Direction | rtl / ltr / ttb / tbb | rtl |
|
||||
| direction | Drawer 打开的方向 | Direction | rtl / ltr / ttb / btt | rtl |
|
||||
| show-close | 是否显示关闭按钮 | boolean | — | true |
|
||||
| size | Drawer 窗体的大小, 当使用 `number` 类型时, 以像素为单位, 当使用 `string` 类型时, 请传入 'x%', 否则便会以 `number` 类型解释 | number / string | - | '30%' |
|
||||
| title | Drawer 的标题,也可通过具名 slot (见下表)传入 | string | — | — |
|
||||
| visible | 是否显示 Drawer,支持 .sync 修饰符 | boolean | — | false |
|
||||
| wrapperClosable | 点击遮罩层是否可以关闭 Drawer | boolean | - | true |
|
||||
| withHeader | 控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效 | boolean | - | true |
|
||||
|
||||
### Drawer Slot
|
||||
|
||||
|
||||
@@ -222,6 +222,7 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
|
||||
<li>吉尔吉斯语(kg)</li>
|
||||
<li>亚美尼亚语 (hy)</li>
|
||||
<li>克罗地亚 (hr)</li>
|
||||
<li>世界语 (eo)</li>
|
||||
</ul>
|
||||
|
||||
如果你需要使用其他的语言,欢迎贡献 PR:只需在 [这里](https://github.com/ElemeFE/element/tree/dev/src/locale/lang) 添加一个语言配置文件即可。
|
||||
|
||||
@@ -172,7 +172,7 @@
|
||||
| min | 设置计数器允许的最小值 | number | — | -Infinity |
|
||||
| max | 设置计数器允许的最大值 | number | — | Infinity |
|
||||
| step | 计数器步长 | number | — | 1 |
|
||||
| step-strictly | 是否只能输入 step 的倍数 | number | — | false |
|
||||
| step-strictly | 是否只能输入 step 的倍数 | boolean | — | false |
|
||||
| precision| 数值精度 | number | — | — |
|
||||
| size | 计数器尺寸 | string | large, small | — |
|
||||
| disabled | 是否禁用计数器 | boolean | — | false |
|
||||
@@ -185,7 +185,7 @@
|
||||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------|--------|---------|
|
||||
| change | 绑定值被改变时触发 | 最后变更的值 |
|
||||
| change | 绑定值被改变时触发 | currentValue, oldValue |
|
||||
| blur | 在组件 Input 失去焦点时触发 | (event: Event) |
|
||||
| focus | 在组件 Input 获得焦点时触发 | (event: Event) |
|
||||
|
||||
|
||||
@@ -719,7 +719,8 @@ export default {
|
||||
|---------|--------|---------|
|
||||
| blur | 在 Input 失去焦点时触发 | (event: Event) |
|
||||
| focus | 在 Input 获得焦点时触发 | (event: Event) |
|
||||
| change | 在 Input 值改变时触发 | (value: string \| number) |
|
||||
| change | 仅在输入框失去焦点或用户按下回车时触发 | (value: string \| number) |
|
||||
| input | 在 Input 值改变时触发 | (value: string \| number) |
|
||||
| clear | 在点击由 `clearable` 属性生成的清空按钮时触发 | — |
|
||||
|
||||
### Input Methods
|
||||
@@ -768,6 +769,7 @@ export default {
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------|--------|---------|
|
||||
| select | 点击选中建议项时触发 | 选中建议项 |
|
||||
| change | 在 Input 值改变时触发 | (value: string \| number) |
|
||||
|
||||
### Autocomplete Methods
|
||||
| 方法名 | 说明 | 参数 |
|
||||
|
||||
@@ -127,13 +127,13 @@
|
||||
<template>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="openFullScreen"
|
||||
@click="openFullScreen1"
|
||||
v-loading.fullscreen.lock="fullscreenLoading">
|
||||
指令方式
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="openFullScreen">
|
||||
@click="openFullScreen2">
|
||||
服务方式
|
||||
</el-button>
|
||||
</template>
|
||||
@@ -146,13 +146,13 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openFullScreen() {
|
||||
openFullScreen1() {
|
||||
this.fullscreenLoading = true;
|
||||
setTimeout(() => {
|
||||
this.fullscreenLoading = false;
|
||||
}, 2000);
|
||||
},
|
||||
openFullScreen() {
|
||||
openFullScreen2() {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Loading',
|
||||
|
||||
60
examples/docs/zh-CN/popconfirm.md
Normal file
60
examples/docs/zh-CN/popconfirm.md
Normal file
@@ -0,0 +1,60 @@
|
||||
## Popconfirm 气泡确认框
|
||||
|
||||
点击元素,弹出气泡确认框。
|
||||
|
||||
### 基础用法
|
||||
|
||||
Popconfirm 的属性与 Popover 很类似,因此对于重复属性,请参考 Popover 的文档,在此文档中不做详尽解释。
|
||||
:::demo 在 Popconfirm 中,只有 `title` 属性可用,`content` 属性不会被展示。
|
||||
```html
|
||||
<template>
|
||||
<el-popconfirm
|
||||
title="这是一段内容确定删除吗?"
|
||||
>
|
||||
<el-button slot="reference">删除</el-button>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
````
|
||||
:::
|
||||
|
||||
### 自定义
|
||||
|
||||
可以在 Popconfirm 中自定义内容。
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<el-popconfirm
|
||||
confirmButtonText='好的'
|
||||
cancelButtonText='不用了'
|
||||
icon="el-icon-info"
|
||||
iconColor="red"
|
||||
title="这是一段内容确定删除吗?"
|
||||
>
|
||||
<el-button slot="reference">删除</el-button>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
|
||||
| title | 标题 | String | — | — |
|
||||
| confirmButtonText | 确认按钮文字 | String | — | — |
|
||||
| cancelButtonText | 取消按钮文字 | String | — | — |
|
||||
| confirmButtonType | 确认按钮类型 | String | — | Primary |
|
||||
| cancelButtonType | 取消按钮类型 | String | — | Text |
|
||||
| icon | Icon | String | — | el-icon-question |
|
||||
| iconColor | Icon 颜色 | String | — | #f90 |
|
||||
| hideIcon | 是否隐藏 Icon | Boolean | — | false |
|
||||
|
||||
### Slot
|
||||
| 参数 | 说明 |
|
||||
|--- | ---|
|
||||
| reference | 触发 Popconfirm 显示的 HTML 元素 |
|
||||
|
||||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------|--------|---------|
|
||||
| onConfirm | 点击确认按钮时触发 | — |
|
||||
| onCancel | 点击取消按钮时触发 | — |
|
||||
@@ -149,6 +149,7 @@ Popover 的属性与 Tooltip 很类似,它们都是基于`Vue-popper`开发的
|
||||
| popper-options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| popper-class | 为 popper 添加类名 | String | — | — |
|
||||
| open-delay | 触发方式为 hover 时的显示延迟,单位为毫秒 | Number | — | — |
|
||||
| close-delay | 触发方式为 hover 时的隐藏延迟,单位为毫秒 | number | — | 200 |
|
||||
| tabindex | Popover 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |
|
||||
|
||||
### Slot
|
||||
|
||||
@@ -174,3 +174,4 @@ 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 |
|
||||
@@ -448,7 +448,7 @@
|
||||
},
|
||||
mounted() {
|
||||
this.list = this.states.map(item => {
|
||||
return { value: item, label: item };
|
||||
return { value: `value:${item}`, label: `label:${item}` };
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
简单的步骤条。
|
||||
|
||||
:::demo 设置`active`属性,接受一个`Number`,表明步骤的 index,从 0 开始。需要定宽的步骤条时,设置`space`属性即可,它接受`Boolean`,单位为`px`,如果不设置,则为自适应。设置`finish-status`属性可以改变已经完成的步骤的状态。
|
||||
:::demo 设置`active`属性,接受一个`Number`,表明步骤的 index,从 0 开始。需要定宽的步骤条时,设置`space`属性即可,它接受`Number`,单位为`px`,如果不设置,则为自适应。设置`finish-status`属性可以改变已经完成的步骤的状态。
|
||||
```html
|
||||
<el-steps :active="active" finish-status="success">
|
||||
<el-step title="步骤 1"></el-step>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
提供几个固定的时间点供用户选择
|
||||
|
||||
:::demo 使用 el-time-select 标签,分别通过`star`、`end`和`step`指定可选的起始时间、结束时间和步长
|
||||
:::demo 使用 el-time-select 标签,分别通过`start`、`end`和`step`指定可选的起始时间、结束时间和步长
|
||||
```html
|
||||
<el-time-select
|
||||
v-model="value"
|
||||
|
||||
1
examples/extension/.gitignore
vendored
Normal file
1
examples/extension/.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
dist
|
||||
18
examples/extension/src/app.js
Normal file
18
examples/extension/src/app.js
Normal file
@@ -0,0 +1,18 @@
|
||||
import Vue from 'vue';
|
||||
import App from './editor/index';
|
||||
import Element from 'main/index.js';
|
||||
import 'packages/theme-chalk/src/index.scss';
|
||||
|
||||
export default () => {
|
||||
Vue.use(Element, { zIndex: 100000 });
|
||||
const root = document.createElement('div');
|
||||
document.body.appendChild(root);
|
||||
|
||||
window.ga = function() {
|
||||
console.log(arguments);
|
||||
};
|
||||
|
||||
new Vue({ // eslint-disable-line
|
||||
render: h => h(App)
|
||||
}).$mount(root);
|
||||
};
|
||||
6
examples/extension/src/background.js
Normal file
6
examples/extension/src/background.js
Normal file
@@ -0,0 +1,6 @@
|
||||
chrome.browserAction.onClicked.addListener(tab => {
|
||||
chrome.tabs.executeScript(tab.id, {
|
||||
file: 'entry.js'
|
||||
});
|
||||
})
|
||||
;
|
||||
212
examples/extension/src/editor/editor.vue
Normal file
212
examples/extension/src/editor/editor.vue
Normal file
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<div class="ext-panel" :class="{moving : moving}" :style="{top: `${top}px`, left: `${left}px`}" ref="editor" >
|
||||
<img class="entrance touch-icon" src="./icon-entrance.png" v-show="!showSidebar" @click="toggleSidebar" />
|
||||
<img class="close touch-icon" src="./icon-close.png" v-show="showSidebar" @click="toggleSidebar" />
|
||||
<div class="editor" :style="{height: `${height}px`}" v-show="showSidebar">
|
||||
<el-tabs v-model="activeTab" @tab-click="onTabClick">
|
||||
<el-tab-pane label="Config" name="config">
|
||||
<theme-configurator
|
||||
:themeConfig="themeConfig"
|
||||
:previewConfig="previewConfig"
|
||||
:onUserConfigUpdate="onUserConfigUpdate"
|
||||
from="extension"
|
||||
></theme-configurator>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Gallery" name="gallery">
|
||||
<gallery
|
||||
ref='gallery'
|
||||
:height="height"
|
||||
:width="width - 7"
|
||||
@action="onGalleryAction"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ThemeConfigurator from '../../../components/theme-configurator';
|
||||
import themeLoader from '../../../components/theme/loader';
|
||||
import gallery from './gallery';
|
||||
import { loadUserThemeFromLocal, saveUserThemeToLocal } from './utils';
|
||||
import bus from '../../../bus.js';
|
||||
import {
|
||||
ACTION_APPLY_THEME
|
||||
} from '../../../components/theme/constant.js';
|
||||
|
||||
let initX;
|
||||
let initY;
|
||||
let leftX = 0;
|
||||
let topY = 25;
|
||||
export default {
|
||||
mixins: [themeLoader],
|
||||
components: {
|
||||
ThemeConfigurator,
|
||||
gallery
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showSidebar: true,
|
||||
previewConfig: {},
|
||||
themeConfig: {},
|
||||
top: topY,
|
||||
left: leftX,
|
||||
height: window.innerHeight - 30 * 2,
|
||||
width: 0,
|
||||
moving: false,
|
||||
activeTab: 'config',
|
||||
themeName: '',
|
||||
userTheme: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const editor = this.$refs.editor;
|
||||
this.width = editor.offsetWidth;
|
||||
leftX = window.innerWidth - 20 - this.width;
|
||||
this.left = leftX;
|
||||
editor.addEventListener('mousedown', e => {
|
||||
initX = e.clientX;
|
||||
initY = e.clientY;
|
||||
leftX = this.left;
|
||||
topY = this.top;
|
||||
document.addEventListener('mousemove', this.moveFunc);
|
||||
});
|
||||
document.addEventListener('mouseup', e => {
|
||||
document.removeEventListener('mousemove', this.moveFunc);
|
||||
setTimeout(() => {this.moving = false;}, 0);
|
||||
});
|
||||
// chrome.storage.local.remove('ELEMENT_THEME_USER_CONFIG');
|
||||
loadUserThemeFromLocal()
|
||||
.then((result) => {
|
||||
if (result) {
|
||||
this.activeTab = 'gallery';
|
||||
this.userTheme = result;
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
checkLocalThemeConfig() {}, // disable mixin auto loading
|
||||
toggleSidebar() {
|
||||
if (this.moving) return;
|
||||
this.showSidebar = !this.showSidebar;
|
||||
if (!this.showSidebar) {
|
||||
const windowWidth = window.innerWidth;
|
||||
if (this.left + this.width * 0.5 < windowWidth * 0.5) {
|
||||
this.left = 0;
|
||||
} else {
|
||||
this.left = windowWidth - 50;
|
||||
}
|
||||
} else {
|
||||
this.moveEditor(this.left, this.top);
|
||||
}
|
||||
},
|
||||
moveFunc(e) {
|
||||
e.preventDefault();
|
||||
const deltaX = initX - e.clientX;
|
||||
const deltaY = initY - e.clientY;
|
||||
if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
|
||||
this.moving = true;
|
||||
}
|
||||
this.moveEditor(leftX - deltaX, topY - deltaY);
|
||||
},
|
||||
moveEditor(x, y) {
|
||||
const showSidebar = this.showSidebar;
|
||||
let nextTop = y;
|
||||
if (nextTop < 0) nextTop = 0;
|
||||
const maxTop = window.innerHeight - (showSidebar ? (this.height + 5) : 50);
|
||||
if (nextTop > maxTop) nextTop = maxTop;
|
||||
this.top = nextTop;
|
||||
let nextLeft = x;
|
||||
if (nextLeft < 0) nextLeft = 0;
|
||||
const maxLeft = window.innerWidth - (showSidebar ? (this.width + 5) : 50);
|
||||
if (nextLeft > maxLeft) nextLeft = maxLeft;
|
||||
this.left = nextLeft;
|
||||
},
|
||||
onGalleryAction(key, value) {
|
||||
switch (key) {
|
||||
case 'edit':
|
||||
this.themeName = value.name;
|
||||
this.themeConfig = JSON.parse(value.theme);
|
||||
bus.$emit(ACTION_APPLY_THEME, this.themeConfig);
|
||||
this.activeTab = 'config';
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
},
|
||||
onTabClick(e) {
|
||||
if (e && e.name === 'gallery') {
|
||||
this.$refs.gallery.init();
|
||||
}
|
||||
},
|
||||
onUserConfigUpdate(userConfig) {
|
||||
if (this.themeName) {
|
||||
this.userTheme.forEach((config) => {
|
||||
if (config.name === this.themeName) {
|
||||
config.update = Date.now();
|
||||
config.theme = JSON.stringify(userConfig);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.themeName = `Theme-${Date.now()}`;
|
||||
this.userTheme.push({
|
||||
update: Date.now(),
|
||||
name: this.themeName,
|
||||
theme: JSON.stringify(userConfig)
|
||||
});
|
||||
}
|
||||
saveUserThemeToLocal(this.userTheme);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.ext-panel {
|
||||
position: fixed;
|
||||
background: transparent;
|
||||
user-select: none;
|
||||
z-index: 100000;
|
||||
}
|
||||
.ext-panel.moving{
|
||||
cursor: move;
|
||||
}
|
||||
.ext-panel.moving .touch-icon{
|
||||
cursor: move;
|
||||
}
|
||||
.ext-panel .touch-icon{
|
||||
cursor: pointer;
|
||||
}
|
||||
.ext-panel .close {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
z-index: 100001;
|
||||
}
|
||||
.ext-panel .entrance {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
.ext-panel .editor {
|
||||
overflow: hidden;
|
||||
background: #f5f7fa;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
||||
margin: 5px 5px 0 0;
|
||||
min-width: 261px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.ext-panel .editor .el-tabs__content, .ext-panel .editor .el-tabs--top, .ext-panel .editor .el-tab-pane {
|
||||
height: 100%;
|
||||
}
|
||||
.ext-panel .el-tabs__nav-scroll >div {
|
||||
transform: translateX(60px)!important;
|
||||
}
|
||||
.ext-panel .editor-main {
|
||||
padding: 0 18px 70px;
|
||||
}
|
||||
</style>
|
||||
185
examples/extension/src/editor/gallery.vue
Normal file
185
examples/extension/src/editor/gallery.vue
Normal file
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div :style="{
|
||||
height: `${height}px`,
|
||||
width: `${width}px`
|
||||
}"
|
||||
class="main"
|
||||
>
|
||||
<ul
|
||||
class="theme-card-list"
|
||||
>
|
||||
<li class="theme-card" v-for="item in userTheme" :key="item.name">
|
||||
<theme-card type="user" :config="item" @action="onAction" from="extension"></theme-card>
|
||||
</li>
|
||||
<li class="theme-card">
|
||||
<theme-card type="upload" :config="{name: 'upload'}" @action="onAction"></theme-card>
|
||||
</li>
|
||||
</ul>
|
||||
<el-dialog :visible.sync="copyDialogVisible" :modal-append-to-body="false">
|
||||
<el-form :model="copyForm" ref="copyForm" :rules="copyFormRule">
|
||||
<el-form-item label="主题名称" prop="name">
|
||||
<el-input v-model="copyForm.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="closeCopyForm">取消</el-button>
|
||||
<el-button type="primary" @click="copyToUser">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
ul, li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.main {
|
||||
overflow: auto;
|
||||
}
|
||||
.theme-card-list {
|
||||
padding-bottom: 50px;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.theme-card {
|
||||
display: inline-block;
|
||||
height: 140px;
|
||||
height: 15vw;
|
||||
width: 100%;
|
||||
max-height: 230px;
|
||||
flex: 0 0 24%;
|
||||
cursor: default;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.theme-card .theme-card-item {
|
||||
margin-top: 0;
|
||||
}
|
||||
.theme-card .theme-card-item.is-upload {
|
||||
height: 80%
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import ThemeCard from '../../../components/theme/theme-card.vue';
|
||||
import { loadUserThemeFromLocal, saveUserThemeToLocal } from './utils';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
height: Number,
|
||||
width: Number
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userTheme: [],
|
||||
copyDialogVisible: false,
|
||||
copyForm: {},
|
||||
copyFormRule: {
|
||||
name: [{
|
||||
validator: this.validateCopyName,
|
||||
trigger: 'blur'
|
||||
}]
|
||||
}
|
||||
};
|
||||
},
|
||||
components: {
|
||||
ThemeCard
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
loadUserThemeFromLocal().then(result => {
|
||||
if (!result) return;
|
||||
this.userTheme = result;
|
||||
});
|
||||
},
|
||||
onAction(key, value) {
|
||||
switch (key) {
|
||||
case 'copy':
|
||||
this.openCopyForm(value.theme);
|
||||
break;
|
||||
case 'upload':
|
||||
this.openCopyForm(value);
|
||||
break;
|
||||
case 'delete':
|
||||
this.$confirm('确定要删除这个主题?', '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.deleteUserThemeByName(value.name);
|
||||
}).catch(() => {});
|
||||
break;
|
||||
case 'rename':
|
||||
this.openRenameForm(value.name);
|
||||
break;
|
||||
default:
|
||||
this.$emit('action', key, value);
|
||||
return;
|
||||
}
|
||||
},
|
||||
openCopyForm(theme) {
|
||||
this.copyForm.theme = theme;
|
||||
this.copyDialogVisible = true;
|
||||
},
|
||||
openRenameForm(name) {
|
||||
this.copyForm.oldname = name;
|
||||
this.copyDialogVisible = true;
|
||||
},
|
||||
closeCopyForm() {
|
||||
this.copyDialogVisible = false;
|
||||
this.$nextTick(() => {
|
||||
this.copyForm = {};
|
||||
});
|
||||
},
|
||||
validateCopyName(rule, value, callback) {
|
||||
if (!value) {
|
||||
callback(new Error('主题名称是必填项'));
|
||||
} else if (this.filterUserThemeByName(value).length > 0) {
|
||||
callback(new Error('主题名称重复'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
copyToUser() {
|
||||
this.$refs.copyForm.validate((valid) => {
|
||||
if (valid) {
|
||||
const { theme, name, oldname } = this.copyForm;
|
||||
if (theme) {
|
||||
// copy
|
||||
this.userTheme.push({
|
||||
update: Date.now(),
|
||||
name,
|
||||
theme
|
||||
});
|
||||
} else {
|
||||
// rename
|
||||
this.userTheme.forEach((config) => {
|
||||
if (config.name === oldname) {
|
||||
config.update = Date.now();
|
||||
config.name = name;
|
||||
}
|
||||
});
|
||||
}
|
||||
this.saveToLocal();
|
||||
this.closeCopyForm();
|
||||
}
|
||||
});
|
||||
},
|
||||
filterUserThemeByName(name, include = true) {
|
||||
return this.userTheme.filter((theme) => (include ? theme.name === name : theme.name !== name));
|
||||
},
|
||||
saveToLocal() {
|
||||
saveUserThemeToLocal(this.userTheme);
|
||||
},
|
||||
deleteUserThemeByName(name) {
|
||||
this.userTheme = this.filterUserThemeByName(name, false);
|
||||
this.saveToLocal();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
BIN
examples/extension/src/editor/icon-close.png
Normal file
BIN
examples/extension/src/editor/icon-close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
examples/extension/src/editor/icon-entrance.png
Normal file
BIN
examples/extension/src/editor/icon-entrance.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
13
examples/extension/src/editor/index.vue
Normal file
13
examples/extension/src/editor/index.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<editor />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import editor from './editor';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
editor
|
||||
}
|
||||
};
|
||||
</script>
|
||||
18
examples/extension/src/editor/utils.js
Normal file
18
examples/extension/src/editor/utils.js
Normal file
@@ -0,0 +1,18 @@
|
||||
const ELEMENT_THEME_USER_CONFIG = 'ELEMENT_THEME_USER_CONFIG';
|
||||
export const loadFromLocal = (key) => {
|
||||
return new window.Promise((resolve) => {
|
||||
chrome.storage.local.get([key], (result) => {
|
||||
resolve(result[key]);
|
||||
});
|
||||
});
|
||||
};
|
||||
export const saveToLocal = (key, value) => {
|
||||
chrome.storage.local.set({[key]: value});
|
||||
};
|
||||
|
||||
export const loadUserThemeFromLocal = () => {
|
||||
return loadFromLocal(ELEMENT_THEME_USER_CONFIG);
|
||||
};
|
||||
export const saveUserThemeToLocal = (value) => {
|
||||
saveToLocal(ELEMENT_THEME_USER_CONFIG, value);
|
||||
};
|
||||
7
examples/extension/src/entry.js
Normal file
7
examples/extension/src/entry.js
Normal file
@@ -0,0 +1,7 @@
|
||||
import init from './app';
|
||||
|
||||
if (!window.ElementThemeRollerInit) {
|
||||
window.ElementThemeRollerInit = true;
|
||||
init();
|
||||
}
|
||||
|
||||
BIN
examples/extension/src/icon.png
Normal file
BIN
examples/extension/src/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
27
examples/extension/src/manifest.json
Normal file
27
examples/extension/src/manifest.json
Normal file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "Element Theme Roller",
|
||||
"version": "0.0.9",
|
||||
"description": "Customize all Design Tokens of Element UI and preview in real-time",
|
||||
"web_accessible_resources": ["entry.js"],
|
||||
"background": {
|
||||
"scripts": [
|
||||
"background.js"
|
||||
],
|
||||
"persistent": true
|
||||
},
|
||||
"icons": {
|
||||
"128": "icon.png"
|
||||
},
|
||||
"browser_action": {
|
||||
"default_icon": "icon.png",
|
||||
"default_title": "Element Theme Roller"
|
||||
},
|
||||
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
|
||||
"manifest_version": 2,
|
||||
"permissions": [
|
||||
"activeTab",
|
||||
"storage",
|
||||
"https://*.ele.me/",
|
||||
"https://*.elenet.me/"
|
||||
]
|
||||
}
|
||||
@@ -248,6 +248,10 @@
|
||||
"path": "/popover",
|
||||
"title": "Popover 弹出框"
|
||||
},
|
||||
{
|
||||
"path": "/popconfirm",
|
||||
"title": "Popconfirm 气泡确认框"
|
||||
},
|
||||
{
|
||||
"path": "/card",
|
||||
"title": "Card 卡片"
|
||||
@@ -538,6 +542,10 @@
|
||||
"path": "/popover",
|
||||
"title": "Popover"
|
||||
},
|
||||
{
|
||||
"path": "/popconfirm",
|
||||
"title": "Popconfirm"
|
||||
},
|
||||
{
|
||||
"path": "/card",
|
||||
"title": "Card"
|
||||
@@ -832,6 +840,10 @@
|
||||
"path": "/popover",
|
||||
"title": "Popover"
|
||||
},
|
||||
{
|
||||
"path": "/popconfirm",
|
||||
"title": "Popconfirm"
|
||||
},
|
||||
{
|
||||
"path": "/card",
|
||||
"title": "Card"
|
||||
@@ -1126,6 +1138,10 @@
|
||||
"path": "/popover",
|
||||
"title": "Popover"
|
||||
},
|
||||
{
|
||||
"path": "/popconfirm",
|
||||
"title": "Popconfirm"
|
||||
},
|
||||
{
|
||||
"path": "/card",
|
||||
"title": "Card"
|
||||
|
||||
@@ -179,7 +179,7 @@
|
||||
}
|
||||
}
|
||||
fragments = fragments.replace(/#(\d+)/g, '<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>');
|
||||
fragments = fragments.replace(/@(\w+)/g, '<a href="https://github.com/$1" target="_blank">@$1</a>');
|
||||
fragments = fragments.replace(/@([\w-]+)/g, '<a href="https://github.com/$1" target="_blank">@$1</a>');
|
||||
this.$refs.timeline.innerHTML = `${fragments}</li>`;
|
||||
|
||||
changeLog.$el.remove();
|
||||
|
||||
@@ -366,40 +366,10 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="theme-intro-a" v-if="showIntroA" @click="hideIntroA">
|
||||
<div class="intro-banner">
|
||||
<img src="~examples/assets/images/theme-intro.png" alt="">
|
||||
<div class="intro-text">
|
||||
<p><%= 12 ></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mask"></div>
|
||||
</div>
|
||||
<div
|
||||
class="theme-intro-b"
|
||||
@click="hideIntroB"
|
||||
v-if="showIntroB"
|
||||
>
|
||||
<div class="intro-banner"
|
||||
:style="{
|
||||
left: introBX + 'px',
|
||||
top: introBY + 'px'
|
||||
}"
|
||||
>
|
||||
<img src="~examples/assets/images/intro-theme-b.png" alt="">
|
||||
<div class="title">
|
||||
<div>
|
||||
<p><%= 13 ></p>
|
||||
<p><%= 14 ></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import throttle from 'throttle-debounce/throttle';
|
||||
import { addClass, removeClass } from 'element-ui/src/utils/dom';
|
||||
|
||||
export default {
|
||||
created() {
|
||||
@@ -416,28 +386,12 @@
|
||||
if (calHeight < 0) calHeight = 0;
|
||||
if (calHeight > eleHeight) calHeight = eleHeight;
|
||||
this.mainImgOffset = calHeight;
|
||||
},
|
||||
hideIntroB() {
|
||||
removeClass(document.body, 'el-loading-parent--hidden');
|
||||
localStorage.setItem('KNOW_THEME', 'true');
|
||||
this.showIntroB = false;
|
||||
},
|
||||
hideIntroA() {
|
||||
const themeTab = document.querySelector('.nav-item-theme');
|
||||
this.introBX = themeTab.offsetLeft + (themeTab.clientWidth * 0.5) - (300 / 2);
|
||||
this.introBY = themeTab.offsetTop + 40;
|
||||
this.showIntroA = false;
|
||||
this.showIntroB = true;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lang: this.$route.meta.lang,
|
||||
mainImgOffset: 0,
|
||||
showIntroA: false,
|
||||
showIntroB: false,
|
||||
introBY: 0,
|
||||
introBX: 0
|
||||
mainImgOffset: 0
|
||||
};
|
||||
},
|
||||
beforeDestroy() {
|
||||
@@ -445,9 +399,6 @@
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('scroll', this.throttledHandleScroll);
|
||||
if (localStorage.getItem('KNOW_THEME')) return;
|
||||
this.showIntroA = true;
|
||||
addClass(document.body, 'el-loading-parent--hidden');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user