mirror of https://github.com/ElemeFE/element
Merge branch 'ElemeFE:dev' into fix-datePicker-defaultTime
z__z
GitHub
commit
6b1e6d2a21
|
|
@ -0,0 +1,45 @@
|
|||
name: Preview Build
|
||||
|
||||
on: pull_request
|
||||
|
||||
jobs:
|
||||
build:
|
||||
name: Build
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
PULL_REQUEST_NUMBER: ${{ github.event.number }}
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v2
|
||||
|
||||
- name: Setup node
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: '10.15.0'
|
||||
registry-url: https://registry.npmjs.com/
|
||||
|
||||
- name: Build
|
||||
run: npm run bootstrap && npm run deploy:build
|
||||
|
||||
|
||||
# share website dist
|
||||
- name: Upload artifact
|
||||
uses: actions/upload-artifact@v2
|
||||
with:
|
||||
name: docs
|
||||
path: examples/element-ui/
|
||||
retention-days: 1
|
||||
|
||||
# write pr.txt for share
|
||||
- name: Save pr number
|
||||
if: ${{ always() }}
|
||||
run: echo ${PULL_REQUEST_NUMBER} > ./pr.txt
|
||||
|
||||
# share pr number
|
||||
- name: Upload pr number
|
||||
if: ${{ always() }}
|
||||
uses: actions/upload-artifact@v2
|
||||
with:
|
||||
name: pr
|
||||
path: ./pr.txt
|
||||
retention-days: 1
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
name: Preview Deploy
|
||||
|
||||
on:
|
||||
workflow_run:
|
||||
workflows: ['Preview Build']
|
||||
types:
|
||||
- completed
|
||||
|
||||
jobs:
|
||||
success:
|
||||
runs-on: ubuntu-latest
|
||||
if: github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.conclusion == 'success'
|
||||
steps:
|
||||
- name: download pr artifact
|
||||
uses: dawidd6/action-download-artifact@v2
|
||||
with:
|
||||
workflow: ${{ github.event.workflow_run.workflow_id }}
|
||||
name: pr
|
||||
|
||||
- name: save PR id
|
||||
id: pr
|
||||
run: echo "::set-output name=id::$(<pr.txt)"
|
||||
|
||||
- name: download docs artifact
|
||||
uses: dawidd6/action-download-artifact@v2
|
||||
with:
|
||||
workflow: ${{ github.event.workflow_run.workflow_id }}
|
||||
workflow_conclusion: success
|
||||
name: docs
|
||||
|
||||
- name: upload surge service
|
||||
id: deploy
|
||||
run: |
|
||||
export DEPLOY_DOMAIN=https://preview-pr-${{ steps.pr.outputs.id }}-element-ui.surge.sh
|
||||
npx surge --project ./ --domain $DEPLOY_DOMAIN --token ${{ secrets.SURGE_TOKEN }}
|
||||
|
||||
- name: update status comment
|
||||
uses: actions-cool/maintain-one-comment@v1.2.1
|
||||
with:
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
body: |
|
||||
🎊 PR Preview has been successfully built and deployed to https://preview-pr-${{ steps.pr.outputs.id }}-element-ui.surge.sh
|
||||
<img width="300" src="https://user-images.githubusercontent.com/507615/90250366-88233900-de6e-11ea-95a5-84f0762ffd39.png">
|
||||
<!-- Sticky Pull Request Comment -->
|
||||
body-include: '<!-- Sticky Pull Request Comment -->'
|
||||
number: ${{ steps.pr.outputs.id }}
|
||||
|
||||
- name: The job failed
|
||||
if: ${{ failure() }}
|
||||
uses: actions-cool/maintain-one-comment@v1.2.1
|
||||
with:
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
body: |
|
||||
😭 Deploy PR Preview failed.
|
||||
<img width="300" src="https://user-images.githubusercontent.com/507615/90250824-4e066700-de6f-11ea-8230-600ecc3d6a6b.png">
|
||||
<!-- Sticky Pull Request Comment -->
|
||||
body-include: '<!-- Sticky Pull Request Comment -->'
|
||||
number: ${{ steps.pr.outputs.id }}
|
||||
|
||||
failed:
|
||||
runs-on: ubuntu-latest
|
||||
if: github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.conclusion == 'failure'
|
||||
steps:
|
||||
- name: download pr artifact
|
||||
uses: dawidd6/action-download-artifact@v2
|
||||
with:
|
||||
workflow: ${{ github.event.workflow_run.workflow_id }}
|
||||
name: pr
|
||||
|
||||
- name: save PR id
|
||||
id: pr
|
||||
run: echo "::set-output name=id::$(<pr.txt)"
|
||||
|
||||
- name: The job failed
|
||||
uses: actions-cool/maintain-one-comment@v1.2.1
|
||||
with:
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
body: |
|
||||
😭 Deploy PR Preview failed.
|
||||
<img width="300" src="https://user-images.githubusercontent.com/507615/90250824-4e066700-de6f-11ea-8230-600ecc3d6a6b.png">
|
||||
<!-- Sticky Pull Request Comment -->
|
||||
body-include: '<!-- Sticky Pull Request Comment -->'
|
||||
number: ${{ steps.pr.outputs.id }}
|
||||
|
|
@ -1,5 +1,158 @@
|
|||
## Changelog
|
||||
|
||||
### 2.15.9
|
||||
|
||||
*2022-06-02*
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- Table
|
||||
- Fix Tabl-header shake bug (#21863 by @bofeng)
|
||||
- Fix when partial import show `el-checkbox not imported` error (#21828 by @bobohuochai)
|
||||
- FormItem
|
||||
- Fix change rules verification not reset bug (#21892 by @bofeng)
|
||||
- Cascader
|
||||
- Fix change options unexpect error (#21759 by @louiebb)
|
||||
- Docs
|
||||
- Fix Popover docs (#21843 by @lod61)
|
||||
- Fix Calendar docs (#21814 by @GoJam11)
|
||||
- Fix TimePicker docs (#21803 by @Alanscut)
|
||||
- Fix DatePicker docs (#21877 by @Nirvanaiu)
|
||||
- 其他
|
||||
- Fix codepen display bug (#21863 by @bofeng)
|
||||
|
||||
#### Optimization
|
||||
|
||||
- I18n
|
||||
- Add translation of Swahili (#21895 by @quilltouch)
|
||||
- Chore
|
||||
- Use launch-editor-middleware in dev environment (#21633 by @polemices)
|
||||
- DatePicker & Cascader
|
||||
- Optimize the dropdown animation direction (#21806 by @XivLaw)
|
||||
- Tooltip
|
||||
- Optimize `getFirstElement` code (#21886 by @zhankang)
|
||||
- Input
|
||||
- Optimize scss code (#21558 by @cheese-git)
|
||||
|
||||
### 2.15.8
|
||||
|
||||
*2022-04-12*
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- Drawer
|
||||
- Fix appendToBody failure problem (#21264 by @cs1707)
|
||||
- Switch
|
||||
- Fix toggling value problem(#19473 by @EdwinBetanc0urt)
|
||||
- Docs
|
||||
- Fix input docs (#21723 by @justforuse)
|
||||
- Fix DatePicker docs (#21663 by @justforuse)
|
||||
- Fix Skeleton docs (#21601 by @yanwydxf)
|
||||
- Others
|
||||
- Fix vue version (#21736 by @ckvv)
|
||||
|
||||
#### Optimization
|
||||
|
||||
- I18n
|
||||
- add translation of Azerbaijani (#21012 by @ricardotondello)
|
||||
- update translation of Slovenian (#21729 by @patik123)
|
||||
- update translation of Slovak (#21711 by @sjaustirni )
|
||||
- add translation of Icelandic (#21709 by @aronhr)
|
||||
- add translation of Bengali (#21485 by @llwwtt)
|
||||
|
||||
#### Others
|
||||
|
||||
- Due to compatibility considerations, the PR on node-sass (#21019 by @linxsbox) of 2.15.7 release has been withdrawn and will be published in an appropriate version after re-evaluation.
|
||||
|
||||
### 2.15.7
|
||||
|
||||
*2021-11-18*
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- Select
|
||||
- fix click icon triggering dropdown (#21314 by @dennyak47)
|
||||
- fix keydown event when composition (#21336 by @bchen1029)
|
||||
- Badge
|
||||
- fix type class when is-dot (#21308 by @adaex)
|
||||
- Form
|
||||
- validate method reject error info (#21374 by @cs1707)
|
||||
- Table
|
||||
- fix resizeObserver loop limit exceeded (#21255 by @tomieric)
|
||||
- fix toggleAllSelection bug when table is empty (#21456 by @cs1707)
|
||||
- optimize performance (#21330 by @cs1707)
|
||||
- Button
|
||||
- fix disabled priority (#21375 by @cs1707)
|
||||
- Descriptions
|
||||
- fix label slot bug (#21462 by @cs1707)
|
||||
- SASS
|
||||
- replace node-sass with dart-sass (#21019 by @linxsbox)
|
||||
- Docs
|
||||
- fix skeleton typos (#21408 by @zhhbstudio)
|
||||
|
||||
### 2.15.6
|
||||
|
||||
*2021-09-02*
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- Cascader
|
||||
- fix a bug that makes the browser jitter in zoom mode (#21207 by @cs1707)
|
||||
- optimize performance (#21231 by @cs1707)
|
||||
- Select
|
||||
- fix long text overflow in multiple mode (#21237 by @cs1707)
|
||||
- Dropdown
|
||||
- add disabled property (#21235 by @mshioda)
|
||||
- Radio
|
||||
- fix checked state when browser go back (#21250 by @cs1707)
|
||||
- Descriptions
|
||||
- fix type declaration (#21265 by @adaex)
|
||||
- avoid table style conflict (#21254 by @adaex)
|
||||
- Drawer
|
||||
- fix append to body (#21264 by @cs1707)
|
||||
- Local
|
||||
- fix italian mistake (#21012 by @ricardotondello)
|
||||
|
||||
### 2.15.5
|
||||
|
||||
*2021-08-04*
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- Select
|
||||
- fix resetInputHeight (#21201 by @cs1707)
|
||||
|
||||
### 2.15.4
|
||||
|
||||
*2021-08-03*
|
||||
|
||||
#### New features
|
||||
|
||||
- Descriptions
|
||||
- add description component (#21129 by @cs1707)
|
||||
- Result
|
||||
- add result component (#21171 by @cs1707)
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- Utils
|
||||
- fix isScroll (#21098 by @canvascat)
|
||||
- Translation
|
||||
- update it.js (#21133 by @bliberi)
|
||||
- RadioGroup
|
||||
- fix RadioGroup used in component causes exception #17908 (#20783 by @lceric)
|
||||
- Message
|
||||
- fix message[type] (#21088 by @cs1707)
|
||||
- Carousel
|
||||
- reset the timer when setActiveItem method is called (#20846 by @Nekojita1)
|
||||
- Cascader
|
||||
- fix emitPath (#21185 by @cs1707)
|
||||
- Select
|
||||
- fix select filterable bug (#17494 by @profore)
|
||||
- fix a bug that makes the browser jitter in zoom mode (#21197 by @cs1707)
|
||||
- Tree
|
||||
- fix insertChild (#21194 by @cs1707)
|
||||
|
||||
### 2.15.3
|
||||
|
||||
*2021-06-29*
|
||||
|
|
|
|||
153
CHANGELOG.es.md
153
CHANGELOG.es.md
|
|
@ -1,5 +1,158 @@
|
|||
## Changelog
|
||||
|
||||
### 2.15.9
|
||||
|
||||
*2022-06-02*
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- Table
|
||||
- Fix Tabl-header shake bug (#21863 by @bofeng)
|
||||
- Fix when partial import show `el-checkbox not imported` error (#21828 by @bobohuochai)
|
||||
- FormItem
|
||||
- Fix change rules verification not reset bug (#21892 by @bofeng)
|
||||
- Cascader
|
||||
- Fix change options unexpect error (#21759 by @louiebb)
|
||||
- Docs
|
||||
- Fix Popover docs (#21843 by @lod61)
|
||||
- Fix Calendar docs (#21814 by @GoJam11)
|
||||
- Fix TimePicker docs (#21803 by @Alanscut)
|
||||
- Fix DatePicker docs (#21877 by @Nirvanaiu)
|
||||
- 其他
|
||||
- Fix codepen display bug (#21863 by @bofeng)
|
||||
|
||||
#### Optimization
|
||||
|
||||
- I18n
|
||||
- Add translation of Swahili (#21895 by @quilltouch)
|
||||
- Chore
|
||||
- Use launch-editor-middleware in dev environment (#21633 by @polemices)
|
||||
- DatePicker & Cascader
|
||||
- Optimize the dropdown animation direction (#21806 by @XivLaw)
|
||||
- Tooltip
|
||||
- Optimize `getFirstElement` code (#21886 by @zhankang)
|
||||
- Input
|
||||
- Optimize scss code (#21558 by @cheese-git)
|
||||
|
||||
### 2.15.8
|
||||
|
||||
*2022-04-12*
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- Drawer
|
||||
- Fix appendToBody failure problem (#21264 by @cs1707)
|
||||
- Switch
|
||||
- Fix toggling value problem(#19473 by @EdwinBetanc0urt)
|
||||
- Docs
|
||||
- Fix input docs (#21723 by @justforuse)
|
||||
- Fix DatePicker docs (#21663 by @justforuse)
|
||||
- Fix Skeleton docs (#21601 by @yanwydxf)
|
||||
- Others
|
||||
- Fix vue version (#21736 by @ckvv)
|
||||
|
||||
#### Optimization
|
||||
|
||||
- I18n
|
||||
- add translation of Azerbaijani (#21012 by @ricardotondello)
|
||||
- update translation of Slovenian (#21729 by @patik123)
|
||||
- update translation of Slovak (#21711 by @sjaustirni )
|
||||
- add translation of Icelandic (#21709 by @aronhr)
|
||||
- add translation of Bengali (#21485 by @llwwtt)
|
||||
|
||||
#### Others
|
||||
|
||||
- Due to compatibility considerations, the PR on node-sass (#21019 by @linxsbox) of 2.15.7 release has been withdrawn and will be published in an appropriate version after re-evaluation.
|
||||
|
||||
### 2.15.7
|
||||
|
||||
*2021-11-18*
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- Select
|
||||
- fix click icon triggering dropdown (#21314 by @dennyak47)
|
||||
- fix keydown event when composition (#21336 by @bchen1029)
|
||||
- Badge
|
||||
- fix type class when is-dot (#21308 by @adaex)
|
||||
- Form
|
||||
- validate method reject error info (#21374 by @cs1707)
|
||||
- Table
|
||||
- fix resizeObserver loop limit exceeded (#21255 by @tomieric)
|
||||
- fix toggleAllSelection bug when table is empty (#21456 by @cs1707)
|
||||
- optimize performance (#21330 by @cs1707)
|
||||
- Button
|
||||
- fix disabled priority (#21375 by @cs1707)
|
||||
- Descriptions
|
||||
- fix label slot bug (#21462 by @cs1707)
|
||||
- SASS
|
||||
- replace node-sass with dart-sass (#21019 by @linxsbox)
|
||||
- Docs
|
||||
- fix skeleton typos (#21408 by @zhhbstudio)
|
||||
|
||||
### 2.15.6
|
||||
|
||||
*2021-09-02*
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- Cascader
|
||||
- fix a bug that makes the browser jitter in zoom mode (#21207 by @cs1707)
|
||||
- optimize performance (#21231 by @cs1707)
|
||||
- Select
|
||||
- fix long text overflow in multiple mode (#21237 by @cs1707)
|
||||
- Dropdown
|
||||
- add disabled property (#21235 by @mshioda)
|
||||
- Radio
|
||||
- fix checked state when browser go back (#21250 by @cs1707)
|
||||
- Descriptions
|
||||
- fix type declaration (#21265 by @adaex)
|
||||
- avoid table style conflict (#21254 by @adaex)
|
||||
- Drawer
|
||||
- fix append to body (#21264 by @cs1707)
|
||||
- Local
|
||||
- fix italian mistake (#21012 by @ricardotondello)
|
||||
|
||||
### 2.15.5
|
||||
|
||||
*2021-08-04*
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- Select
|
||||
- fix resetInputHeight (#21201 by @cs1707)
|
||||
|
||||
### 2.15.4
|
||||
|
||||
*2021-08-03*
|
||||
|
||||
#### New features
|
||||
|
||||
- Descriptions
|
||||
- add description component (#21129 by @cs1707)
|
||||
- Result
|
||||
- add result component (#21171 by @cs1707)
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- Utils
|
||||
- fix isScroll (#21098 by @canvascat)
|
||||
- Translation
|
||||
- update it.js (#21133 by @bliberi)
|
||||
- RadioGroup
|
||||
- fix RadioGroup used in component causes exception #17908 (#20783 by @lceric)
|
||||
- Message
|
||||
- fix message[type] (#21088 by @cs1707)
|
||||
- Carousel
|
||||
- reset the timer when setActiveItem method is called (#20846 by @Nekojita1)
|
||||
- Cascader
|
||||
- fix emitPath (#21185 by @cs1707)
|
||||
- Select
|
||||
- fix select filterable bug (#17494 by @profore)
|
||||
- fix a bug that makes the browser jitter in zoom mode (#21197 by @cs1707)
|
||||
- Tree
|
||||
- fix insertChild (#21194 by @cs1707)
|
||||
|
||||
### 2.15.3
|
||||
|
||||
*2021-06-29*
|
||||
|
|
|
|||
|
|
@ -1,5 +1,158 @@
|
|||
## Changelog
|
||||
|
||||
### 2.15.9
|
||||
|
||||
*2022-06-02*
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- Table
|
||||
- Fix Tabl-header shake bug (#21863 by @bofeng)
|
||||
- Fix when partial import show `el-checkbox not imported` error (#21828 by @bobohuochai)
|
||||
- FormItem
|
||||
- Fix change rules verification not reset bug (#21892 by @bofeng)
|
||||
- Cascader
|
||||
- Fix change options unexpect error (#21759 by @louiebb)
|
||||
- Docs
|
||||
- Fix Popover docs (#21843 by @lod61)
|
||||
- Fix Calendar docs (#21814 by @GoJam11)
|
||||
- Fix TimePicker docs (#21803 by @Alanscut)
|
||||
- Fix DatePicker docs (#21877 by @Nirvanaiu)
|
||||
- 其他
|
||||
- Fix codepen display bug (#21863 by @bofeng)
|
||||
|
||||
#### Optimization
|
||||
|
||||
- I18n
|
||||
- Add translation of Swahili (#21895 by @quilltouch)
|
||||
- Chore
|
||||
- Use launch-editor-middleware in dev environment (#21633 by @polemices)
|
||||
- DatePicker & Cascader
|
||||
- Optimize the dropdown animation direction (#21806 by @XivLaw)
|
||||
- Tooltip
|
||||
- Optimize `getFirstElement` code (#21886 by @zhankang)
|
||||
- Input
|
||||
- Optimize scss code (#21558 by @cheese-git)
|
||||
|
||||
### 2.15.8
|
||||
|
||||
*2022-04-12*
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- Drawer
|
||||
- Fix appendToBody failure problem (#21264 by @cs1707)
|
||||
- Switch
|
||||
- Fix toggling value problem(#19473 by @EdwinBetanc0urt)
|
||||
- Docs
|
||||
- Fix input docs (#21723 by @justforuse)
|
||||
- Fix DatePicker docs (#21663 by @justforuse)
|
||||
- Fix Skeleton docs (#21601 by @yanwydxf)
|
||||
- Others
|
||||
- Fix vue version (#21736 by @ckvv)
|
||||
|
||||
#### Optimization
|
||||
|
||||
- I18n
|
||||
- add translation of Azerbaijani (#21012 by @ricardotondello)
|
||||
- update translation of Slovenian (#21729 by @patik123)
|
||||
- update translation of Slovak (#21711 by @sjaustirni )
|
||||
- add translation of Icelandic (#21709 by @aronhr)
|
||||
- add translation of Bengali (#21485 by @llwwtt)
|
||||
|
||||
#### Others
|
||||
|
||||
- Due to compatibility considerations, the PR on node-sass (#21019 by @linxsbox) of 2.15.7 release has been withdrawn and will be published in an appropriate version after re-evaluation.
|
||||
|
||||
### 2.15.7
|
||||
|
||||
*2021-11-18*
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- Select
|
||||
- fix click icon triggering dropdown (#21314 by @dennyak47)
|
||||
- fix keydown event when composition (#21336 by @bchen1029)
|
||||
- Badge
|
||||
- fix type class when is-dot (#21308 by @adaex)
|
||||
- Form
|
||||
- validate method reject error info (#21374 by @cs1707)
|
||||
- Table
|
||||
- fix resizeObserver loop limit exceeded (#21255 by @tomieric)
|
||||
- fix toggleAllSelection bug when table is empty (#21456 by @cs1707)
|
||||
- optimize performance (#21330 by @cs1707)
|
||||
- Button
|
||||
- fix disabled priority (#21375 by @cs1707)
|
||||
- Descriptions
|
||||
- fix label slot bug (#21462 by @cs1707)
|
||||
- SASS
|
||||
- replace node-sass with dart-sass (#21019 by @linxsbox)
|
||||
- Docs
|
||||
- fix skeleton typos (#21408 by @zhhbstudio)
|
||||
|
||||
### 2.15.6
|
||||
|
||||
*2021-09-02*
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- Cascader
|
||||
- fix a bug that makes the browser jitter in zoom mode (#21207 by @cs1707)
|
||||
- optimize performance (#21231 by @cs1707)
|
||||
- Select
|
||||
- fix long text overflow in multiple mode (#21237 by @cs1707)
|
||||
- Dropdown
|
||||
- add disabled property (#21235 by @mshioda)
|
||||
- Radio
|
||||
- fix checked state when browser go back (#21250 by @cs1707)
|
||||
- Descriptions
|
||||
- fix type declaration (#21265 by @adaex)
|
||||
- avoid table style conflict (#21254 by @adaex)
|
||||
- Drawer
|
||||
- fix append to body (#21264 by @cs1707)
|
||||
- Local
|
||||
- fix italian mistake (#21012 by @ricardotondello)
|
||||
|
||||
### 2.15.5
|
||||
|
||||
*2021-08-04*
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- Select
|
||||
- fix resetInputHeight (#21201 by @cs1707)
|
||||
|
||||
### 2.15.4
|
||||
|
||||
*2021-08-03*
|
||||
|
||||
#### New features
|
||||
|
||||
- Descriptions
|
||||
- add description component (#21129 by @cs1707)
|
||||
- Result
|
||||
- add result component (#21171 by @cs1707)
|
||||
|
||||
#### Bug fixes
|
||||
|
||||
- Utils
|
||||
- fix isScroll (#21098 by @canvascat)
|
||||
- Translation
|
||||
- update it.js (#21133 by @bliberi)
|
||||
- RadioGroup
|
||||
- fix RadioGroup used in component causes exception #17908 (#20783 by @lceric)
|
||||
- Message
|
||||
- fix message[type] (#21088 by @cs1707)
|
||||
- Carousel
|
||||
- reset the timer when setActiveItem method is called (#20846 by @Nekojita1)
|
||||
- Cascader
|
||||
- fix emitPath (#21185 by @cs1707)
|
||||
- Select
|
||||
- fix select filterable bug (#17494 by @profore)
|
||||
- fix a bug that makes the browser jitter in zoom mode (#21197 by @cs1707)
|
||||
- Tree
|
||||
- fix insertChild (#21194 by @cs1707)
|
||||
|
||||
### 2.15.3
|
||||
|
||||
*2021-06-29*
|
||||
|
|
|
|||
|
|
@ -1,5 +1,158 @@
|
|||
## 更新日志
|
||||
|
||||
### 2.15.9
|
||||
|
||||
*2022-06-02*
|
||||
|
||||
#### Bug 修复
|
||||
|
||||
- Table
|
||||
- 表头抖动修复 (#21863 by @bofeng)
|
||||
- 按需引用时 `el-checkbox not imported` 修复 (#21828 by @bobohuochai)
|
||||
- FormItem
|
||||
- 修复 rules 切换为 null 时校验未重置 问题 (#21892 by @bofeng)
|
||||
- Cascader
|
||||
- 修复 切换 options 时错误报错信息 问题 (#21759 by @louiebb)
|
||||
- Docs
|
||||
- 修复 Popover 文案 (#21843 by @lod61)
|
||||
- 修复 Calendar 文案 (#21814 by @GoJam11)
|
||||
- 修复 TimePicker 文案 (#21803 by @Alanscut)
|
||||
- 修复 DatePicker 文案 (#21877 by @Nirvanaiu)
|
||||
- 其他
|
||||
- 官网在线演示功能修复 (#21863 by @bofeng)
|
||||
|
||||
#### 优化
|
||||
|
||||
- I18n
|
||||
- 新增 斯瓦希里语 翻译 (#21895 by @quilltouch)
|
||||
- Chore
|
||||
- 本地开发时可从 devTools 工具跳转源代码 (#21633 by @polemices)
|
||||
- DatePicker & Cascader
|
||||
- 弹窗方向优化 (#21806 by @XivLaw)
|
||||
- Tooltip
|
||||
- 优化 `getFirstElement` 代码 (#21886 by @zhankang)
|
||||
- Input
|
||||
- 优化 scss 代码 (#21558 by @cheese-git)
|
||||
|
||||
### 2.15.8
|
||||
|
||||
*2022-04-12*
|
||||
|
||||
#### Bug 修复
|
||||
|
||||
- Drawer
|
||||
- 修复 appendToBody 失效问题 (#21264 by @cs1707)
|
||||
- Switch
|
||||
- 修复 toggling value 问题(#19473 by @EdwinBetanc0urt)
|
||||
- Docs
|
||||
- 修复 input 文案 (#21723 by @justforuse)
|
||||
- 修复 DatePicker 文案 (#21663 by @justforuse)
|
||||
- 修复 Skeleton 文案 (#21601 by @yanwydxf)
|
||||
- 其他
|
||||
- 修复 vue 版本(#21736 by @ckvv)
|
||||
|
||||
#### 优化
|
||||
|
||||
- I18n
|
||||
- 新增 阿塞拜疆语 翻译 (#21012 by @ricardotondello)
|
||||
- 更新 斯洛文尼亚语 翻译 (#21729 by @patik123)
|
||||
- 更新 斯洛伐克语 翻译 (#21711 by @sjaustirni )
|
||||
- 新增 冰岛语 的翻译 (#21709 by @aronhr)
|
||||
- 新增 孟加拉 语的翻译 (#21485 by @llwwtt)
|
||||
|
||||
#### 其他
|
||||
|
||||
- 因兼容性考虑，撤回2.15.7关于node-sass的更新(#21019 by @linxsbox)，重新评估后会在后续合适版本上线
|
||||
|
||||
### 2.15.7
|
||||
|
||||
*2021-11-18*
|
||||
|
||||
#### Bug 修复
|
||||
|
||||
- Select
|
||||
- 修复 filter 模式下，点击图标不能触发下拉的 bug (#21314 by @dennyak47)
|
||||
- 修复 composition 模式下 keydown 事件 (#21336 by @bchen1029)
|
||||
- Badge
|
||||
- 修复 is-dot class (#21308 by @adaex)
|
||||
- Form
|
||||
- validate 方法返回错误信息 (#21374 by @cs1707)
|
||||
- Table
|
||||
- 修复 resizeObserver loop limit exceeded (#21255 by @tomieric)
|
||||
- 修复 toggleAllSelection (#21456 by @cs1707)
|
||||
- 优化 table 性能 (#21330 by @cs1707)
|
||||
- Button
|
||||
- 修复 disabled 优先级 (#21375 by @cs1707)
|
||||
- Descriptions
|
||||
- 修复 label slot bug (#21462 by @cs1707)
|
||||
- SASS
|
||||
- node-sass 替换为 dart-sass (#21019 by @linxsbox)
|
||||
- Docs
|
||||
- 修复 skeleton 文案 (#21408 by @zhhbstudio)
|
||||
|
||||
### 2.15.6
|
||||
|
||||
*2021-09-02*
|
||||
|
||||
#### Bug 修复
|
||||
|
||||
- Cascader
|
||||
- 修复浏览器缩放模式下抖动的 bug (#21207 by @cs1707)
|
||||
- 优化性能 (#21231 by @cs1707)
|
||||
- Select
|
||||
- 修复多选模式下文字溢出的 bug (#21237 by @cs1707)
|
||||
- Dropdown
|
||||
- 增加 disabled 属性 (#21235 by @mshioda)
|
||||
- Radio
|
||||
- 修复浏览器返回后保留状态的 bug (#21250 by @cs1707)
|
||||
- Descriptions
|
||||
- 修复类型定义 (#21265 by @adaex)
|
||||
- 修复与表格组件混用样式冲突的问题 (#21254 by @adaex)
|
||||
- Drawer
|
||||
- 修复 append-to-body (#21264 by @cs1707)
|
||||
- Local
|
||||
- 修复 italian 翻译错误 (#21012 by @ricardotondello)
|
||||
|
||||
### 2.15.5
|
||||
|
||||
*2021-08-04*
|
||||
|
||||
#### Bug 修复
|
||||
|
||||
- Select
|
||||
- 修复 resetInputHeight 报错的 bug (#21201 by @cs1707)
|
||||
|
||||
### 2.15.4
|
||||
|
||||
*2021-08-03*
|
||||
|
||||
#### 新特性
|
||||
|
||||
- Descriptions
|
||||
- 新增 Descriptions 组件 (#21129 by @cs1707)
|
||||
- Result
|
||||
- 新增 Result 组件 (#21171 by @cs1707)
|
||||
|
||||
#### Bug 修复
|
||||
|
||||
- Utils
|
||||
- 修复 isScroll (#21098 by @canvascat)
|
||||
- Translation
|
||||
- 更新 it.js (#21133 by @bliberi)
|
||||
- RadioGroup
|
||||
- 修复 RadioGroup 与 component 兼容的 bug (#20783 by @lceric)
|
||||
- Message
|
||||
- 修复 message[type] (#21088 by @cs1707)
|
||||
- Carousel
|
||||
- 修复 setActiveItem 重置计时 (#20846 by @Nekojita1)
|
||||
- Cascader
|
||||
- 修复 emitPath (#21185 by @cs1707)
|
||||
- Select
|
||||
- 修复 filterable bug (#17494 by @profore)
|
||||
- 修复浏览器缩放模式下抖动的 bug (#21197 by @cs1707)
|
||||
- Tree
|
||||
- 修复 insertChild (#21194 by @cs1707)
|
||||
|
||||
### 2.15.3
|
||||
|
||||
*2021-06-29*
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
|
||||
Element will stay with Vue 2.x
|
||||
|
||||
For Vue 3.0, we recommend using [Element Plus](https://github.com/element-plus/element-plus) from the same team
|
||||
For Vue 3.0, we recommend using [Element Plus](https://github.com/element-plus/element-plus) from the same team (Element Plus is a community develop project)
|
||||
|
||||
## Links
|
||||
- Homepage and documentation
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ const ProgressBarPlugin = require('progress-bar-webpack-plugin');
|
|||
const VueLoaderPlugin = require('vue-loader/lib/plugin');
|
||||
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
||||
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
|
||||
const launchEditorMiddleware = require('launch-editor-middleware');
|
||||
|
||||
const config = require('./config');
|
||||
|
||||
|
|
@ -33,7 +34,16 @@ const webpackConfig = {
|
|||
host: '0.0.0.0',
|
||||
port: 8085,
|
||||
publicPath: '/',
|
||||
hot: true
|
||||
hot: true,
|
||||
before: (app) => {
|
||||
/*
|
||||
* 编辑器类型 :此处的指令表示的时各个各个编辑器在cmd或terminal中的命令
|
||||
* webstorm
|
||||
* code // vscode
|
||||
* idea
|
||||
*/
|
||||
app.use('/__open-in-editor', launchEditorMiddleware('code'));
|
||||
}
|
||||
},
|
||||
performance: {
|
||||
hints: false
|
||||
|
|
|
|||
|
|
@ -83,5 +83,8 @@
|
|||
"popconfirm": "./packages/popconfirm/index.js",
|
||||
"skeleton": "./packages/skeleton/index.js",
|
||||
"skeleton-item": "./packages/skeleton-item/index.js",
|
||||
"empty": "./packages/empty/index.js"
|
||||
"empty": "./packages/empty/index.js",
|
||||
"descriptions": "./packages/descriptions/index.js",
|
||||
"descriptions-item": "./packages/descriptions-item/index.js",
|
||||
"result": "./packages/result/index.js"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -205,7 +205,7 @@
|
|||
goCodepen() {
|
||||
// since 2.6.2 use code rather than jsfiddle https://blog.codepen.io/documentation/api/prefill/
|
||||
const { script, html, style } = this.codepen;
|
||||
const resourcesTpl = '<scr' + 'ipt src="//unpkg.com/vue/dist/vue.js"></scr' + 'ipt>' +
|
||||
const resourcesTpl = '<scr' + 'ipt src="//unpkg.com/vue@2/dist/vue.js"></scr' + 'ipt>' +
|
||||
'\n<scr' + `ipt src="//unpkg.com/element-ui@${ version }/lib/index.js"></scr` + 'ipt>';
|
||||
let jsTpl = (script || '').replace(/export default/, 'var Main =').trim();
|
||||
let htmlTpl = `${resourcesTpl}\n<div id="app">\n${html.trim()}\n</div>`;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
.demo-block.demo-descriptions {
|
||||
.margin-top {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.my-label {
|
||||
background: #E1F3D8;
|
||||
}
|
||||
|
||||
.my-content {
|
||||
background: #FDE2E2;
|
||||
}
|
||||
}
|
||||
|
|
@ -45,4 +45,5 @@
|
|||
@import "./avatar.scss";
|
||||
@import "./drawer.scss";
|
||||
@import "./skeleton.scss";
|
||||
@import "./descriptions.scss";
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,191 @@
|
|||
## Descriptions
|
||||
|
||||
Display multiple fields in list form.
|
||||
|
||||
### Basic usage
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-descriptions title="User Info">
|
||||
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="Place">Suzhou</el-descriptions-item>
|
||||
<el-descriptions-item label="Remarks">
|
||||
<el-tag size="small">School</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
```
|
||||
:::
|
||||
|
||||
### Sizes
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio label="">Default</el-radio>
|
||||
<el-radio label="medium">Medium</el-radio>
|
||||
<el-radio label="small">Small</el-radio>
|
||||
<el-radio label="mini">Mini</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<el-descriptions class="margin-top" title="With border" :column="3" :size="size" border>
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="small">Operation</el-button>
|
||||
</template>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-user"></i>
|
||||
Username
|
||||
</template>
|
||||
kooriookami
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-mobile-phone"></i>
|
||||
Telephone
|
||||
</template>
|
||||
18100000000
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-location-outline"></i>
|
||||
Place
|
||||
</template>
|
||||
Suzhou
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-tickets"></i>
|
||||
Remarks
|
||||
</template>
|
||||
<el-tag size="small">School</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-office-building"></i>
|
||||
Address
|
||||
</template>
|
||||
No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-descriptions class="margin-top" title="Without border" :column="3" :size="size">
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="small">Operation</el-button>
|
||||
</template>
|
||||
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="Place">Suzhou</el-descriptions-item>
|
||||
<el-descriptions-item label="Remarks">
|
||||
<el-tag size="small">School</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
size: ''
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Vertical List
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-descriptions title="Vertical list with border" direction="vertical" :column="4" border>
|
||||
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="Place" :span="2">Suzhou</el-descriptions-item>
|
||||
<el-descriptions-item label="Remarks">
|
||||
<el-tag size="small">School</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-descriptions class="margin-top" title="Vertical list without border" :column="4" direction="vertical">
|
||||
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="Place" :span="2">Suzhou</el-descriptions-item>
|
||||
<el-descriptions-item label="Remarks">
|
||||
<el-tag size="small">School</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
```
|
||||
:::
|
||||
|
||||
### Customized Style
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-descriptions title="Customized style list" :column="3" border>
|
||||
<el-descriptions-item label="Username" label-class-name="my-label" content-class-name="my-content">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="Place">Suzhou</el-descriptions-item>
|
||||
<el-descriptions-item label="Remarks">
|
||||
<el-tag size="small">School</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Address" :content-style="{'text-align': 'right'}">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<style>
|
||||
.my-label {
|
||||
background: #E1F3D8;
|
||||
}
|
||||
|
||||
.my-content {
|
||||
background: #FDE2E2;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Descriptions Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| border | with or without border | boolean | — | false |
|
||||
| column | numbers of `Descriptions Item` in one line | number | — | 3 |
|
||||
| direction | direction of list | string | vertical / horizontal | horizontal |
|
||||
| size | size of list | string | medium / small / mini | — |
|
||||
| title | title text, display on the top left | string | — | — |
|
||||
| extra | extra text, display on the top right | string | — | — |
|
||||
| colon | change default props colon value of Descriptions Item | boolean | — | true |
|
||||
| labelClassName | custom label class name | string | — | — |
|
||||
| contentClassName | custom content class name | string | — | — |
|
||||
| labelStyle | custom label style | object | — | — |
|
||||
| contentStyle | custom content style | object | — | — |
|
||||
|
||||
### Descriptions Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| title | custom title, display on the top left |
|
||||
| extra | custom extra area, display on the top right |
|
||||
|
||||
### Descriptions Item Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| label | label text | string | — | — |
|
||||
| span | colspan of column | number | — | 1 |
|
||||
| labelClassName | custom label class name | string | — | — |
|
||||
| contentClassName | custom content class name | string | — | — |
|
||||
| labelStyle | custom label style | object | — | — |
|
||||
| contentStyle | custom content style | object | — | — |
|
||||
|
||||
### Descriptions Item Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| label | custom label |
|
||||
|
|
@ -279,6 +279,7 @@ Besides default size, Dropdown component provides three additional sizes for you
|
|||
| show-timeout | Delay time before show a dropdown (only works when trigger is `hover`) | number | — | 250 |
|
||||
| hide-timeout | Delay time before hide a dropdown (only works when trigger is `hover`) | number | — | 150 |
|
||||
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Dropdown | number | — | 0 |
|
||||
| disabled | whether the Dropdown is disabled | boolean | — | false |
|
||||
|
||||
### Dropdown Slots
|
||||
|
||||
|
|
|
|||
|
|
@ -476,7 +476,7 @@ Custom validate callback function must be called. See more advanced usage at [as
|
|||
{ type: 'number', message: 'age must be a number'}
|
||||
]"
|
||||
>
|
||||
<el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
|
||||
<el-input v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('numberValidateForm')">Submit</el-button>
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
|
|||
## Import via CDN
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/vue"></script>
|
||||
<script src="//unpkg.com/vue@2"></script>
|
||||
<script src="//unpkg.com/element-ui"></script>
|
||||
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
|
||||
|
||||
|
|
@ -156,7 +156,7 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
|
|||
Compatible with `vue-i18n`
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/vue"></script>
|
||||
<script src="//unpkg.com/vue@2"></script>
|
||||
<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
|
||||
<script src="//unpkg.com/element-ui"></script>
|
||||
<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"></script>
|
||||
|
|
|
|||
|
|
@ -263,7 +263,7 @@ export default {
|
|||
|
||||
### Sizes
|
||||
|
||||
:::demo Add `size` attribute to change the size of Input. In addition to the default size, there are three other options: `large`, `small` and `mini`.
|
||||
:::demo Add `size` attribute to change the size of Input. In addition to the default size, there are three other options: `medium`, `small` and `mini`.
|
||||
```html
|
||||
<div class="demo-input-size">
|
||||
<el-input
|
||||
|
|
|
|||
|
|
@ -25,11 +25,11 @@ We recommend our users to lock Element's version when using CDN. Please refer to
|
|||
|
||||
### Hello world
|
||||
|
||||
If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://codepen.io/ziyoung/pen/rRKYpd)
|
||||
If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://codepen.io/bofeng/pen/poaEmJY)
|
||||
|
||||
<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html" frameborder="no" allowtransparency="true" allowfullscreen="true">
|
||||
See the Pen <a href='https://codepen.io/ziyoung/pen/rRKYpd/'>Element demo</a> by hetech
|
||||
(<a href='https://codepen.io/ziyoung'>@ziyoung</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/bofeng/embed/poaEmJY/?height=265&theme-id=light&default-tab=html" frameborder="no" allowtransparency="true" allowfullscreen="true">
|
||||
See the Pen <a href='https://codepen.io/bofeng/pen/poaEmJY/'>Element demo</a> by hetech
|
||||
(<a href='https://codepen.io/bofeng'>@bofeng</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
If you are using npm and wish to apply webpack, please continue to the next page: [Quick Start](/#/en-US/component/quickstart).
|
||||
|
|
|
|||
|
|
@ -0,0 +1,76 @@
|
|||
## Result
|
||||
|
||||
Used to give feedback on the result of user's operation or access exception.
|
||||
|
||||
### Basic usage
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-row>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="success" title="Success Tip" subTitle="Please follow the instructions">
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="warning" title="Warning Tip" subTitle="Please follow the instructions">
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="error" title="Error Tip" subTitle="Please follow the instructions">
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="info" title="Info Tip" subTitle="Please follow the instructions">
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
</el-row>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Customized content
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-result title="404" subTitle="Sorry, request error">
|
||||
<template slot="icon">
|
||||
<el-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
|
||||
</template>
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Result Attributes
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| title | title | string | — | — |
|
||||
| sub-title | sub title | string | — | — |
|
||||
| icon | icon type | string | success / warning / info / error | info |
|
||||
|
||||
### Result Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| icon | custom icon |
|
||||
| title | custom title |
|
||||
| subTitle | custom sub title |
|
||||
| extra | custom extra area |
|
||||
|
|
@ -40,7 +40,7 @@ We have provided a switch flag indicating whether showing the loading animation,
|
|||
:::
|
||||
|
||||
### Customized Template
|
||||
ElementPlus only provides the most common template, sometimes that could be a problem, so you have a slot named `template` to do that work.
|
||||
Element only provides the most common template, sometimes that could be a problem, so you have a slot named `template` to do that work.
|
||||
|
||||
Also we have provided different types skeleton unit that you can choose, for more detailed info, please scroll down to the bottom of this page to see the API description. Also, when building your own customized skeleton structure, you should be structuring them as closer to the real DOM as possible, which avoiding the DOM bouncing caused by the height difference.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,191 @@
|
|||
## Descriptions
|
||||
|
||||
Display multiple fields in list form.
|
||||
|
||||
### Basic usage
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-descriptions title="User Info">
|
||||
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="Place">Suzhou</el-descriptions-item>
|
||||
<el-descriptions-item label="Remarks">
|
||||
<el-tag size="small">School</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
```
|
||||
:::
|
||||
|
||||
### Sizes
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio label="">Default</el-radio>
|
||||
<el-radio label="medium">Medium</el-radio>
|
||||
<el-radio label="small">Small</el-radio>
|
||||
<el-radio label="mini">Mini</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<el-descriptions class="margin-top" title="With border" :column="3" :size="size" border>
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="small">Operation</el-button>
|
||||
</template>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-user"></i>
|
||||
Username
|
||||
</template>
|
||||
kooriookami
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-mobile-phone"></i>
|
||||
Telephone
|
||||
</template>
|
||||
18100000000
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-location-outline"></i>
|
||||
Place
|
||||
</template>
|
||||
Suzhou
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-tickets"></i>
|
||||
Remarks
|
||||
</template>
|
||||
<el-tag size="small">School</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-office-building"></i>
|
||||
Address
|
||||
</template>
|
||||
No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-descriptions class="margin-top" title="Without border" :column="3" :size="size">
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="small">Operation</el-button>
|
||||
</template>
|
||||
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="Place">Suzhou</el-descriptions-item>
|
||||
<el-descriptions-item label="Remarks">
|
||||
<el-tag size="small">School</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
size: ''
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Vertical List
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-descriptions title="Vertical list with border" direction="vertical" :column="4" border>
|
||||
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="Place" :span="2">Suzhou</el-descriptions-item>
|
||||
<el-descriptions-item label="Remarks">
|
||||
<el-tag size="small">School</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-descriptions class="margin-top" title="Vertical list without border" :column="4" direction="vertical">
|
||||
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="Place" :span="2">Suzhou</el-descriptions-item>
|
||||
<el-descriptions-item label="Remarks">
|
||||
<el-tag size="small">School</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
```
|
||||
:::
|
||||
|
||||
### Customized Style
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-descriptions title="Customized style list" :column="3" border>
|
||||
<el-descriptions-item label="Username" label-class-name="my-label" content-class-name="my-content">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="Place">Suzhou</el-descriptions-item>
|
||||
<el-descriptions-item label="Remarks">
|
||||
<el-tag size="small">School</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Address" :content-style="{'text-align': 'right'}">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<style>
|
||||
.my-label {
|
||||
background: #E1F3D8;
|
||||
}
|
||||
|
||||
.my-content {
|
||||
background: #FDE2E2;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Descriptions Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| border | with or without border | boolean | — | false |
|
||||
| column | numbers of `Descriptions Item` in one line | number | — | 3 |
|
||||
| direction | direction of list | string | vertical / horizontal | horizontal |
|
||||
| size | size of list | string | medium / small / mini | — |
|
||||
| title | title text, display on the top left | string | — | — |
|
||||
| extra | extra text, display on the top right | string | — | — |
|
||||
| colon | change default props colon value of Descriptions Item | boolean | — | true |
|
||||
| labelClassName | custom label class name | string | — | — |
|
||||
| contentClassName | custom content class name | string | — | — |
|
||||
| labelStyle | custom label style | object | — | — |
|
||||
| contentStyle | custom content style | object | — | — |
|
||||
|
||||
### Descriptions Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| title | custom title, display on the top left |
|
||||
| extra | custom extra area, display on the top right |
|
||||
|
||||
### Descriptions Item Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| label | label text | string | — | — |
|
||||
| span | colspan of column | number | — | 1 |
|
||||
| labelClassName | custom label class name | string | — | — |
|
||||
| contentClassName | custom content class name | string | — | — |
|
||||
| labelStyle | custom label style | object | — | — |
|
||||
| contentStyle | custom content style | object | — | — |
|
||||
|
||||
### Descriptions Item Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| label | custom label |
|
||||
|
|
@ -281,6 +281,7 @@ Además del tamaño predeterminado, el componente Dropdown proporciona tres tama
|
|||
| show-timeout | Tiempo de retardo antes de mostrar un dropdown (solamente trabaja cuando se dispara `hover`) | number | — | 250 |
|
||||
| hide-timeout | Tiempo de retardo antes de ocultar un dropdown (solamente trabaja cuando se dispara `hover`) | number | — | 150 |
|
||||
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) de Dropdown | number | — | 0 |
|
||||
| disabled | si el desplegable está desactivado | boolean | — | false |
|
||||
|
||||
### Dropdown Slots
|
||||
|
||||
|
|
|
|||
|
|
@ -485,7 +485,7 @@ Se debe llamar a la función de validación de llamada de retorno personalizada.
|
|||
{ type: 'number', message: 'age must be a number'}
|
||||
]"
|
||||
>
|
||||
<el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
|
||||
<el-input v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('numberValidateForm')">Submit</el-button>
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
|
|||
## Importar via CDN
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/vue"></script>
|
||||
<script src="//unpkg.com/vue@2"></script>
|
||||
<script src="//unpkg.com/element-ui"></script>
|
||||
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
|
||||
|
||||
|
|
@ -156,7 +156,7 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
|
|||
Compatible con `vue-i18n`
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/vue"></script>
|
||||
<script src="//unpkg.com/vue@2"></script>
|
||||
<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
|
||||
<script src="//unpkg.com/element-ui"></script>
|
||||
<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"></script>
|
||||
|
|
|
|||
|
|
@ -269,7 +269,7 @@ export default {
|
|||
|
||||
### Tamaño
|
||||
|
||||
:::demo Añada el atributo `size` para cambiar el tamaño del Input. Además del tamaño predeterminado, hay otras tres opciones: `large`, `small` y `mini`.
|
||||
:::demo Añada el atributo `size` para cambiar el tamaño del Input. Además del tamaño predeterminado, hay otras tres opciones: `medium`, `small` y `mini`.
|
||||
|
||||
```html
|
||||
<div class="demo-input-size">
|
||||
|
|
|
|||
|
|
@ -24,11 +24,11 @@ Recomendamos a nuestros usuarios congelar la versión de Element cuando usas un
|
|||
|
||||
### Hello world
|
||||
|
||||
Si esta usando un CDN, una página con Hello-World es fácil con Element. [Online Demo](https://codepen.io/ziyoung/pen/rRKYpd)
|
||||
Si esta usando un CDN, una página con Hello-World es fácil con Element. [Online Demo](https://codepen.io/bofeng/pen/poaEmJY)
|
||||
|
||||
<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
|
||||
See the Pen <a href='https://codepen.io/ziyoung/pen/rRKYpd/'>Element demo</a> by hetech
|
||||
(<a href='https://codepen.io/ziyoung'>@ziyoung</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/bofeng/embed/poaEmJY/?height=265&theme-id=light&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
|
||||
See the Pen <a href='https://codepen.io/bofeng/pen/poaEmJY/'>Element demo</a> by hetech
|
||||
(<a href='https://codepen.io/bofeng'>@bofeng</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
Si esta usando npm y desea combinarlo con webpack, por favor continué a la siguiente página: [Quick Start](/#/es/component/quickstart)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,76 @@
|
|||
## Result
|
||||
|
||||
Used to give feedback on the result of user's operation or access exception.
|
||||
|
||||
### Basic usage
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-row>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="success" title="Success Tip" subTitle="Please follow the instructions">
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="warning" title="Warning Tip" subTitle="Please follow the instructions">
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="error" title="Error Tip" subTitle="Please follow the instructions">
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="info" title="Info Tip" subTitle="Please follow the instructions">
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
</el-row>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Customized content
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-result title="404" subTitle="Sorry, request error">
|
||||
<template slot="icon">
|
||||
<el-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
|
||||
</template>
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Result Attributes
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| title | title | string | — | — |
|
||||
| sub-title | sub title | string | — | — |
|
||||
| icon | icon type | string | success / warning / info / error | info |
|
||||
|
||||
### Result Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| icon | custom icon |
|
||||
| title | custom title |
|
||||
| subTitle | custom sub title |
|
||||
| extra | custom extra area |
|
||||
|
|
@ -40,7 +40,7 @@ We have provided a switch flag indicating whether showing the loading animation,
|
|||
:::
|
||||
|
||||
### Customized Template
|
||||
ElementPlus only provides the most common template, sometimes that could be a problem, so you have a slot named `template` to do that work.
|
||||
Element only provides the most common template, sometimes that could be a problem, so you have a slot named `template` to do that work.
|
||||
|
||||
Also we have provided different types skeleton unit that you can choose, for more detailed info, please scroll down to the bottom of this page to see the API description. Also, when building your own customized skeleton structure, you should be structuring them as closer to the real DOM as possible, which avoiding the DOM bouncing caused by the height difference.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,191 @@
|
|||
## Descriptions
|
||||
|
||||
Display multiple fields in list form.
|
||||
|
||||
### Basic usage
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-descriptions title="User Info">
|
||||
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="Place">Suzhou</el-descriptions-item>
|
||||
<el-descriptions-item label="Remarks">
|
||||
<el-tag size="small">School</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
```
|
||||
:::
|
||||
|
||||
### Sizes
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio label="">Default</el-radio>
|
||||
<el-radio label="medium">Medium</el-radio>
|
||||
<el-radio label="small">Small</el-radio>
|
||||
<el-radio label="mini">Mini</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<el-descriptions class="margin-top" title="With border" :column="3" :size="size" border>
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="small">Operation</el-button>
|
||||
</template>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-user"></i>
|
||||
Username
|
||||
</template>
|
||||
kooriookami
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-mobile-phone"></i>
|
||||
Telephone
|
||||
</template>
|
||||
18100000000
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-location-outline"></i>
|
||||
Place
|
||||
</template>
|
||||
Suzhou
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-tickets"></i>
|
||||
Remarks
|
||||
</template>
|
||||
<el-tag size="small">School</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-office-building"></i>
|
||||
Address
|
||||
</template>
|
||||
No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-descriptions class="margin-top" title="Without border" :column="3" :size="size">
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="small">Operation</el-button>
|
||||
</template>
|
||||
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="Place">Suzhou</el-descriptions-item>
|
||||
<el-descriptions-item label="Remarks">
|
||||
<el-tag size="small">School</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
size: ''
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Vertical List
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-descriptions title="Vertical list with border" direction="vertical" :column="4" border>
|
||||
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="Place" :span="2">Suzhou</el-descriptions-item>
|
||||
<el-descriptions-item label="Remarks">
|
||||
<el-tag size="small">School</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-descriptions class="margin-top" title="Vertical list without border" :column="4" direction="vertical">
|
||||
<el-descriptions-item label="Username">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="Place" :span="2">Suzhou</el-descriptions-item>
|
||||
<el-descriptions-item label="Remarks">
|
||||
<el-tag size="small">School</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
```
|
||||
:::
|
||||
|
||||
### Customized Style
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-descriptions title="Customized style list" :column="3" border>
|
||||
<el-descriptions-item label="Username" label-class-name="my-label" content-class-name="my-content">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="Place">Suzhou</el-descriptions-item>
|
||||
<el-descriptions-item label="Remarks">
|
||||
<el-tag size="small">School</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Address" :content-style="{'text-align': 'right'}">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<style>
|
||||
.my-label {
|
||||
background: #E1F3D8;
|
||||
}
|
||||
|
||||
.my-content {
|
||||
background: #FDE2E2;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Descriptions Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| border | with or without border | boolean | — | false |
|
||||
| column | numbers of `Descriptions Item` in one line | number | — | 3 |
|
||||
| direction | direction of list | string | vertical / horizontal | horizontal |
|
||||
| size | size of list | string | medium / small / mini | — |
|
||||
| title | title text, display on the top left | string | — | — |
|
||||
| extra | extra text, display on the top right | string | — | — |
|
||||
| colon | change default props colon value of Descriptions Item | boolean | — | true |
|
||||
| labelClassName | custom label class name | string | — | — |
|
||||
| contentClassName | custom content class name | string | — | — |
|
||||
| labelStyle | custom label style | object | — | — |
|
||||
| contentStyle | custom content style | object | — | — |
|
||||
|
||||
### Descriptions Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| title | custom title, display on the top left |
|
||||
| extra | custom extra area, display on the top right |
|
||||
|
||||
### Descriptions Item Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| label | label text | string | — | — |
|
||||
| span | colspan of column | number | — | 1 |
|
||||
| labelClassName | custom label class name | string | — | — |
|
||||
| contentClassName | custom content class name | string | — | — |
|
||||
| labelStyle | custom label style | object | — | — |
|
||||
| contentStyle | custom content style | object | — | — |
|
||||
|
||||
### Descriptions Item Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| label | custom label |
|
||||
|
|
@ -281,6 +281,7 @@ En plus de la taille par défaut, le composant Dropdown propose trois autres tai
|
|||
| show-timeout | Délai avant d'afficher le menu (ne marche que si `trigger` est `hover`) | number | — | 250 |
|
||||
| hide-timeout | Délai avant de cacher le menu (ne marche que si `trigger` est `hover`) | number | — | 150 |
|
||||
| tabindex | [tabindex](https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/tabindex) de Dropdown | number | — | 0 |
|
||||
| disabled | Si le Dropdown est désactivé | boolean | — | false |
|
||||
|
||||
### Dropdown Slots
|
||||
|
||||
|
|
|
|||
|
|
@ -475,7 +475,7 @@ Les callback de validations personnalisées doivent être appelées. Un usage pl
|
|||
{ type: 'number', message: 'l\'âge doit être un nombre'}
|
||||
]"
|
||||
>
|
||||
<el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
|
||||
<el-input v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('numberValidateForm')">Soumettre</el-button>
|
||||
|
|
|
|||
|
|
@ -147,7 +147,7 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
|
|||
## Import via un CDN
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/vue"></script>
|
||||
<script src="//unpkg.com/vue@2"></script>
|
||||
<script src="//unpkg.com/element-ui"></script>
|
||||
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
|
||||
|
||||
|
|
@ -159,7 +159,7 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
|
|||
Compatible avec `vue-i18n`
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/vue"></script>
|
||||
<script src="//unpkg.com/vue@2"></script>
|
||||
<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
|
||||
<script src="//unpkg.com/element-ui"></script>
|
||||
<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"></script>
|
||||
|
|
|
|||
|
|
@ -262,7 +262,7 @@ export default {
|
|||
|
||||
### Tailles
|
||||
|
||||
:::demo Ajoutez l'attribut `size` pour changer la taille de l'input. En plus de la taille par défaut, il y a trois autres options: `large`, `small` et `mini`.
|
||||
:::demo Ajoutez l'attribut `size` pour changer la taille de l'input. En plus de la taille par défaut, il y a trois autres options: `medium`, `small` et `mini`.
|
||||
```html
|
||||
<div class="demo-input-size">
|
||||
<el-input
|
||||
|
|
|
|||
|
|
@ -25,11 +25,11 @@ Il est recommandé de fixer la version d'Element lors de l'utilisation du CDN. R
|
|||
|
||||
### Hello world
|
||||
|
||||
Si vous utilisez un CDN, une page hello-world peut être obtenue facilement avec Element ([démo en ligne](https://codepen.io/ziyoung/pen/rRKYpd)).
|
||||
Si vous utilisez un CDN, une page hello-world peut être obtenue facilement avec Element ([démo en ligne](https://codepen.io/bofeng/pen/poaEmJY)).
|
||||
|
||||
<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html" frameborder="no" allowtransparency="true" allowfullscreen="true">
|
||||
See the Pen <a href='https://codepen.io/ziyoung/pen/rRKYpd/'>Element demo</a> by hetech
|
||||
(<a href='https://codepen.io/ziyoung'>@ziyoung</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/bofeng/embed/poaEmJY/?height=265&theme-id=light&default-tab=html" frameborder="no" allowtransparency="true" allowfullscreen="true">
|
||||
See the Pen <a href='https://codepen.io/bofeng/pen/poaEmJY/'>Element demo</a> by hetech
|
||||
(<a href='https://codepen.io/bofeng'>@bofeng</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
Si vous utilisez npm et souhaitez ajouter webpack, continuez sur la page suivante: [Démarrer](/#/fr-FR/component/quickstart).
|
||||
|
|
|
|||
|
|
@ -0,0 +1,76 @@
|
|||
## Result
|
||||
|
||||
Used to give feedback on the result of user's operation or access exception.
|
||||
|
||||
### Basic usage
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-row>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="success" title="Success Tip" subTitle="Please follow the instructions">
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="warning" title="Warning Tip" subTitle="Please follow the instructions">
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="error" title="Error Tip" subTitle="Please follow the instructions">
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="info" title="Info Tip" subTitle="Please follow the instructions">
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
</el-row>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Customized content
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-result title="404" subTitle="Sorry, request error">
|
||||
<template slot="icon">
|
||||
<el-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
|
||||
</template>
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="medium">Back</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Result Attributes
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| title | title | string | — | — |
|
||||
| sub-title | sub title | string | — | — |
|
||||
| icon | icon type | string | success / warning / info / error | info |
|
||||
|
||||
### Result Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| icon | custom icon |
|
||||
| title | custom title |
|
||||
| subTitle | custom sub title |
|
||||
| extra | custom extra area |
|
||||
|
|
@ -40,7 +40,7 @@ We have provided a switch flag indicating whether showing the loading animation,
|
|||
:::
|
||||
|
||||
### Customized Template
|
||||
ElementPlus only provides the most common template, sometimes that could be a problem, so you have a slot named `template` to do that work.
|
||||
Element only provides the most common template, sometimes that could be a problem, so you have a slot named `template` to do that work.
|
||||
|
||||
Also we have provided different types skeleton unit that you can choose, for more detailed info, please scroll down to the bottom of this page to see the API description. Also, when building your own customized skeleton structure, you should be structuring them as closer to the real DOM as possible, which avoiding the DOM bouncing caused by the height difference.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
## Calendar calendar
|
||||
## Calendar 日历
|
||||
|
||||
显示日期
|
||||
|
||||
|
|
|
|||
|
|
@ -273,7 +273,7 @@
|
|||
|
||||
使用`format`指定输入框的格式；使用`value-format`指定绑定值的格式。
|
||||
|
||||
默认情况下，组件接受并返回`Date`对象。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：
|
||||
默认情况下，组件接受并返回`Date`对象。以下为可用的格式化字符串，以 UTC 2017年1月2日 03:04:05 为例：
|
||||
|
||||
:::warning
|
||||
请注意大小写
|
||||
|
|
|
|||
|
|
@ -0,0 +1,191 @@
|
|||
## Descriptions 描述列表
|
||||
|
||||
列表形式展示多个字段。
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-descriptions title="用户信息">
|
||||
<el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="手机号">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="居住地">苏州市</el-descriptions-item>
|
||||
<el-descriptions-item label="备注">
|
||||
<el-tag size="small">学校</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
```
|
||||
:::
|
||||
|
||||
### 不同尺寸
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio label="">默认</el-radio>
|
||||
<el-radio label="medium">中等</el-radio>
|
||||
<el-radio label="small">小型</el-radio>
|
||||
<el-radio label="mini">超小</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<el-descriptions class="margin-top" title="带边框列表" :column="3" :size="size" border>
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="small">操作</el-button>
|
||||
</template>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-user"></i>
|
||||
用户名
|
||||
</template>
|
||||
kooriookami
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-mobile-phone"></i>
|
||||
手机号
|
||||
</template>
|
||||
18100000000
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-location-outline"></i>
|
||||
居住地
|
||||
</template>
|
||||
苏州市
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-tickets"></i>
|
||||
备注
|
||||
</template>
|
||||
<el-tag size="small">学校</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-office-building"></i>
|
||||
联系地址
|
||||
</template>
|
||||
江苏省苏州市吴中区吴中大道 1188 号
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-descriptions class="margin-top" title="无边框列表" :column="3" :size="size">
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="small">操作</el-button>
|
||||
</template>
|
||||
<el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="手机号">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="居住地">苏州市</el-descriptions-item>
|
||||
<el-descriptions-item label="备注">
|
||||
<el-tag size="small">学校</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
size: ''
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 垂直列表
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-descriptions title="垂直带边框列表" direction="vertical" :column="4" border>
|
||||
<el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="手机号">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="居住地" :span="2">苏州市</el-descriptions-item>
|
||||
<el-descriptions-item label="备注">
|
||||
<el-tag size="small">学校</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-descriptions class="margin-top" title="垂直无边框列表" :column="4" direction="vertical">
|
||||
<el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="手机号">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="居住地" :span="2">苏州市</el-descriptions-item>
|
||||
<el-descriptions-item label="备注">
|
||||
<el-tag size="small">学校</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
```
|
||||
:::
|
||||
|
||||
### 自定义样式
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-descriptions title="自定义样式列表" :column="3" border>
|
||||
<el-descriptions-item label="用户名" label-class-name="my-label" content-class-name="my-content">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="手机号">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="居住地">苏州市</el-descriptions-item>
|
||||
<el-descriptions-item label="备注">
|
||||
<el-tag size="small">学校</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="联系地址" :contentStyle="{'text-align': 'right'}">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<style>
|
||||
.my-label {
|
||||
background: #E1F3D8;
|
||||
}
|
||||
|
||||
.my-content {
|
||||
background: #FDE2E2;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
### Descriptions Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| border | 是否带有边框 | boolean | — | false |
|
||||
| column | 一行 `Descriptions Item` 的数量 | number | — | 3 |
|
||||
| direction | 排列的方向 | string | vertical / horizontal | horizontal |
|
||||
| size | 列表的尺寸 | string | medium / small / mini | — |
|
||||
| title | 标题文本，显示在左上方 | string | — | — |
|
||||
| extra | 操作区文本，显示在右上方 | string | — | — |
|
||||
| colon | 是否显示冒号 | boolean | — | true |
|
||||
| labelClassName | 自定义标签类名 | string | — | — |
|
||||
| contentClassName | 自定义内容类名 | string | — | — |
|
||||
| labelStyle | 自定义标签样式 | object | — | — |
|
||||
| contentStyle | 自定义内容样式 | object | — | — |
|
||||
|
||||
### Descriptions Slots
|
||||
|
||||
| Name | 说明 |
|
||||
|------|--------|
|
||||
| title | 自定义标题，显示在左上方 |
|
||||
| extra | 自定义操作区，显示在右上方 |
|
||||
|
||||
### Descriptions Item Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| label | 标签文本 | string | — | — |
|
||||
| span | 列的数量 | number | — | 1 |
|
||||
| labelClassName | 自定义标签类名 | string | — | — |
|
||||
| contentClassName | 自定义内容类名 | string | — | — |
|
||||
| labelStyle | 自定义标签样式 | object | — | — |
|
||||
| contentStyle | 自定义内容样式 | object | — | — |
|
||||
|
||||
### Descriptions Item Slots
|
||||
|
||||
| Name | 说明 |
|
||||
|------|--------|
|
||||
| label | 自定义标签文本 |
|
||||
|
|
@ -283,6 +283,7 @@ Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场
|
|||
| show-timeout | 展开下拉菜单的延时（仅在 trigger 为 hover 时有效）| number | — | 250 |
|
||||
| hide-timeout | 收起下拉菜单的延时（仅在 trigger 为 hover 时有效）| number | — | 150 |
|
||||
| tabindex | Dropdown 组件的 [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | — | 0 |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
|
||||
### Dropdown Slots
|
||||
|
||||
|
|
|
|||
|
|
@ -470,7 +470,7 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
|
|||
{ type: 'number', message: '年龄必须为数字值'}
|
||||
]"
|
||||
>
|
||||
<el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
|
||||
<el-input v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
|
|||
## 通过 CDN 的方式加载语言文件
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/vue"></script>
|
||||
<script src="//unpkg.com/vue@2"></script>
|
||||
<script src="//unpkg.com/element-ui"></script>
|
||||
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
|
||||
|
||||
|
|
@ -158,7 +158,7 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
|
|||
搭配 `vue-i18n` 使用
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/vue"></script>
|
||||
<script src="//unpkg.com/vue@2"></script>
|
||||
<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
|
||||
<script src="//unpkg.com/element-ui"></script>
|
||||
<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"></script>
|
||||
|
|
|
|||
|
|
@ -250,7 +250,7 @@ export default {
|
|||
|
||||
### 尺寸
|
||||
|
||||
:::demo 可通过 `size` 属性指定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。
|
||||
:::demo 可通过 `size` 属性指定输入框的尺寸，除了默认的大小外，还提供了 medium、small 和 mini 三种尺寸。
|
||||
```html
|
||||
<div class="demo-input-size">
|
||||
<el-input
|
||||
|
|
|
|||
|
|
@ -25,11 +25,11 @@ npm i element-ui -S
|
|||
|
||||
### Hello world
|
||||
|
||||
通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://codepen.io/ziyoung/pen/rRKYpd)
|
||||
通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://codepen.io/bofeng/pen/poaEmJY)
|
||||
|
||||
<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/ziyoung/embed/rRKYpd/?height=265&theme-id=light&default-tab=html" frameborder="no" allowtransparency="true" allowfullscreen="true">
|
||||
See the Pen <a href='https://codepen.io/ziyoung/pen/rRKYpd/'>Element demo</a> by hetech
|
||||
(<a href='https://codepen.io/ziyoung'>@ziyoung</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
<iframe height="265" style="width: 100%;" scrolling="no" title="Element demo" src="//codepen.io/bofeng/embed/poaEmJY/?height=265&theme-id=light&default-tab=html" frameborder="no" allowtransparency="true" allowfullscreen="true">
|
||||
See the Pen <a href='https://codepen.io/bofeng/pen/poaEmJY/'>Element demo</a> by hetech
|
||||
(<a href='https://codepen.io/bofeng'>@bofeng</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：[快速上手](/#/zh-CN/component/quickstart)。
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
|
|||
| offset | 出现位置的偏移量 | Number | — | 0 |
|
||||
| transition | 定义渐变动画 | String | — | fade-in-linear |
|
||||
| visible-arrow | 是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |
|
||||
| popper-options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| popper-options | [popper.js](https://popper.js.org/) 的参数 | Object | 参考 [popper.js](https://popper.js.org/) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| popper-class | 为 popper 添加类名 | String | — | — |
|
||||
| open-delay | 触发方式为 hover 时的显示延迟，单位为毫秒 | Number | — | — |
|
||||
| close-delay | 触发方式为 hover 时的隐藏延迟，单位为毫秒 | number | — | 200 |
|
||||
|
|
|
|||
|
|
@ -0,0 +1,76 @@
|
|||
## Result 结果
|
||||
|
||||
用于对用户的操作结果或者异常状态做反馈。
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-row>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="success" title="成功提示" subTitle="请根据提示进行操作">
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="medium">返回</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="warning" title="警告提示" subTitle="请根据提示进行操作">
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="medium">返回</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="error" title="错误提示" subTitle="请根据提示进行操作">
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="medium">返回</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
<el-col :sm="12" :lg="6">
|
||||
<el-result icon="info" title="信息提示" subTitle="请根据提示进行操作">
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="medium">返回</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-col>
|
||||
</el-row>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 自定义内容
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-result title="404" subTitle="抱歉，请求错误">
|
||||
<template slot="icon">
|
||||
<el-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
|
||||
</template>
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="medium">返回</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Result Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| title | 标题 | string | — | — |
|
||||
| sub-title | 二级标题 | string | — | — |
|
||||
| icon | 图标类型 | string | success / warning / info / error | info |
|
||||
|
||||
### Result Slots
|
||||
|
||||
| Name | 说明 |
|
||||
|------|--------|
|
||||
| icon | 自定义图标 |
|
||||
| title | 自定义标题 |
|
||||
| subTitle | 自定义二级标题 |
|
||||
| extra | 自定义底部额外区域 |
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
|
||||
### 自定义样式
|
||||
|
||||
ElementPlus 提供的排版模式有时候并不满足要求，当您想要用自己定义的模板时，可以通过一个具名 Slot 来自己设定模板。
|
||||
Element 提供的排版模式有时候并不满足要求，当您想要用自己定义的模板时，可以通过一个具名 Slot 来自己设定模板。
|
||||
|
||||
我们提供了不同的模板单元可供使用，具体可选值请看 API 详细描述。 建议在描述模板的时候，尽量靠近真实的 DOM 结构，这样可以避免 DOM 高度差距引起的抖动。
|
||||
:::demo
|
||||
|
|
@ -306,7 +306,7 @@ ElementPlus 提供的排版模式有时候并不满足要求，当您想要用
|
|||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| ------- | ------------------------ | ------------ | -------------------------------------------------------------------- | ------ |
|
||||
| variant | 当前显示的占位元素的样式 | Enum(string) | p / text / h1 / h3 / text / caption / button / image / circle / rect | text |
|
||||
| variant | 当前显示的占位元素的样式 | Enum(string) | p / h1 / h3 / text / caption / button / image / circle / rect | text |
|
||||
|
||||
### Skeleton Slots
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
## TimePicker 时间选择器
|
||||
|
||||
用于选择或输入日期
|
||||
用于选择或输入时间
|
||||
|
||||
### 固定时间点
|
||||
|
||||
|
|
|
|||
|
|
@ -184,6 +184,14 @@
|
|||
{
|
||||
"path": "/empty",
|
||||
"title": "Empty 空状态"
|
||||
},
|
||||
{
|
||||
"path": "/descriptions",
|
||||
"title": "Descriptions 描述列表"
|
||||
},
|
||||
{
|
||||
"path": "/result",
|
||||
"title": "Result 结果"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -486,6 +494,14 @@
|
|||
{
|
||||
"path": "/empty",
|
||||
"title": "Empty"
|
||||
},
|
||||
{
|
||||
"path": "/descriptions",
|
||||
"title": "Descriptions"
|
||||
},
|
||||
{
|
||||
"path": "/result",
|
||||
"title": "Result"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -792,6 +808,14 @@
|
|||
{
|
||||
"path": "/empty",
|
||||
"title": "Empty"
|
||||
},
|
||||
{
|
||||
"path": "/descriptions",
|
||||
"title": "Descriptions"
|
||||
},
|
||||
{
|
||||
"path": "/result",
|
||||
"title": "Result"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -1098,6 +1122,14 @@
|
|||
{
|
||||
"path": "/empty",
|
||||
"title": "Empty"
|
||||
},
|
||||
{
|
||||
"path": "/descriptions",
|
||||
"title": "Descriptions"
|
||||
},
|
||||
{
|
||||
"path": "/result",
|
||||
"title": "Result"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.2":"2.13","2.14.1":"2.14","2.15.3":"2.15"}
|
||||
{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","2.13.2":"2.13","2.14.1":"2.14","2.15.9":"2.15"}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "element-ui",
|
||||
"version": "2.15.3",
|
||||
"version": "2.15.9",
|
||||
"description": "A Component Library for Vue.js.",
|
||||
"main": "lib/element-ui.common.js",
|
||||
"files": [
|
||||
|
|
@ -115,6 +115,7 @@
|
|||
"karma-sourcemap-loader": "^0.3.7",
|
||||
"karma-spec-reporter": "^0.0.32",
|
||||
"karma-webpack": "^3.0.5",
|
||||
"launch-editor-middleware": "^2.3.0",
|
||||
"markdown-it": "^8.4.1",
|
||||
"markdown-it-anchor": "^5.0.2",
|
||||
"markdown-it-chain": "^1.3.0",
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
v-text="content"
|
||||
class="el-badge__content"
|
||||
:class="[
|
||||
'el-badge__content--' + type,
|
||||
type ? 'el-badge__content--' + type : null,
|
||||
{
|
||||
'is-fixed': $slots.default,
|
||||
'is-dot': isDot
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
|
||||
},
|
||||
buttonDisabled() {
|
||||
return this.disabled || (this.elForm || {}).disabled;
|
||||
return this.$options.propsData.hasOwnProperty('disabled') ? this.disabled : (this.elForm || {}).disabled;
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -236,6 +236,11 @@ export default {
|
|||
this.timer = setInterval(this.playSlides, this.interval);
|
||||
},
|
||||
|
||||
resetTimer() {
|
||||
this.pauseTimer();
|
||||
this.startTimer();
|
||||
},
|
||||
|
||||
setActiveItem(index) {
|
||||
if (typeof index === 'string') {
|
||||
const filteredItems = this.items.filter(item => item.name === index);
|
||||
|
|
@ -260,6 +265,7 @@ export default {
|
|||
if (oldIndex === this.activeIndex) {
|
||||
this.resetItemPosition(oldIndex);
|
||||
}
|
||||
this.resetTimer();
|
||||
},
|
||||
|
||||
prev() {
|
||||
|
|
|
|||
|
|
@ -136,6 +136,10 @@ export default {
|
|||
},
|
||||
|
||||
watch: {
|
||||
value() {
|
||||
this.syncCheckedValue();
|
||||
this.checkStrictly && this.calculateCheckedNodePaths();
|
||||
},
|
||||
options: {
|
||||
handler: function() {
|
||||
this.initStore();
|
||||
|
|
@ -143,10 +147,6 @@ export default {
|
|||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
value() {
|
||||
this.syncCheckedValue();
|
||||
this.checkStrictly && this.calculateCheckedNodePaths();
|
||||
},
|
||||
checkedValue(val) {
|
||||
if (!isEqual(val, this.value)) {
|
||||
this.checkStrictly && this.calculateCheckedNodePaths();
|
||||
|
|
@ -157,7 +157,7 @@ export default {
|
|||
},
|
||||
|
||||
mounted() {
|
||||
if (!isEmpty(this.value)) {
|
||||
if (!this.isEmptyValue(this.value)) {
|
||||
this.syncCheckedValue();
|
||||
}
|
||||
},
|
||||
|
|
@ -195,13 +195,21 @@ export default {
|
|||
node.syncCheckState(this.checkedValue);
|
||||
});
|
||||
},
|
||||
isEmptyValue(val) {
|
||||
const { multiple, config } = this;
|
||||
const { emitPath } = config;
|
||||
if (multiple || emitPath) {
|
||||
return isEmpty(val);
|
||||
}
|
||||
return false;
|
||||
},
|
||||
syncActivePath() {
|
||||
const { store, multiple, activePath, checkedValue } = this;
|
||||
|
||||
if (!isEmpty(activePath)) {
|
||||
const nodes = activePath.map(node => this.getNodeByValue(node.getValue()));
|
||||
this.expandNodes(nodes);
|
||||
} else if (!isEmpty(checkedValue)) {
|
||||
} else if (!this.isEmptyValue(checkedValue)) {
|
||||
const value = multiple ? checkedValue[0] : checkedValue;
|
||||
const checkedNode = this.getNodeByValue(value) || {};
|
||||
const nodes = (checkedNode.pathNodes || []).slice(0, -1);
|
||||
|
|
@ -361,7 +369,7 @@ export default {
|
|||
const nodes = this.getFlattedNodes(leafOnly);
|
||||
return nodes.filter(node => node.checked);
|
||||
} else {
|
||||
return isEmpty(checkedValue)
|
||||
return this.isEmptyValue(checkedValue)
|
||||
? []
|
||||
: [this.getNodeByValue(checkedValue)];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,12 +51,8 @@ export default class Store {
|
|||
}
|
||||
|
||||
getNodeByValue(value) {
|
||||
if (value) {
|
||||
const nodes = this.getFlattedNodes(false, !this.config.lazy)
|
||||
.filter(node => (valueEquals(node.path, value) || node.value === value));
|
||||
return nodes && nodes.length ? nodes[0] : null;
|
||||
}
|
||||
return null;
|
||||
const nodes = this.getFlattedNodes(false, !this.config.lazy)
|
||||
.filter(node => (valueEquals(node.path, value) || node.value === value));
|
||||
return nodes && nodes.length ? nodes[0] : null;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -159,7 +159,8 @@ const PopperMixin = {
|
|||
arrowOffset: Popper.props.arrowOffset,
|
||||
offset: Popper.props.offset,
|
||||
boundariesPadding: Popper.props.boundariesPadding,
|
||||
popperOptions: Popper.props.popperOptions
|
||||
popperOptions: Popper.props.popperOptions,
|
||||
transformOrigin: Popper.props.transformOrigin
|
||||
},
|
||||
methods: Popper.methods,
|
||||
data: Popper.data,
|
||||
|
|
@ -231,7 +232,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
dropDownVisible: false,
|
||||
checkedValue: this.value || null,
|
||||
checkedValue: this.value,
|
||||
inputHover: false,
|
||||
inputValue: null,
|
||||
presentText: null,
|
||||
|
|
@ -350,7 +351,7 @@ export default {
|
|||
this.inputInitialHeight = input.$el.offsetHeight || InputSizeMap[this.realSize] || 40;
|
||||
}
|
||||
|
||||
if (!isEmpty(this.value)) {
|
||||
if (!this.isEmptyValue(this.value)) {
|
||||
this.computePresentContent();
|
||||
}
|
||||
|
||||
|
|
@ -413,6 +414,7 @@ export default {
|
|||
handleDropdownLeave() {
|
||||
this.filtering = false;
|
||||
this.inputValue = this.presentText;
|
||||
this.doDestroy();
|
||||
},
|
||||
handleKeyDown(event) {
|
||||
switch (event.keyCode) {
|
||||
|
|
@ -485,9 +487,17 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
isEmptyValue(val) {
|
||||
const { multiple } = this;
|
||||
const { emitPath } = this.panel.config;
|
||||
if (multiple || emitPath) {
|
||||
return isEmpty(val);
|
||||
}
|
||||
return false;
|
||||
},
|
||||
computePresentText() {
|
||||
const { checkedValue, config } = this;
|
||||
if (!isEmpty(checkedValue)) {
|
||||
if (!this.isEmptyValue(checkedValue)) {
|
||||
const node = this.panel.getNodeByValue(checkedValue);
|
||||
if (node && (config.checkStrictly || node.isLeaf)) {
|
||||
this.presentText = node.getText(this.showAllLevels, this.separator);
|
||||
|
|
@ -632,10 +642,12 @@ export default {
|
|||
}
|
||||
|
||||
if (tags) {
|
||||
const { offsetHeight } = tags;
|
||||
const offsetHeight = Math.round(tags.getBoundingClientRect().height);
|
||||
const height = Math.max(offsetHeight + 6, inputInitialHeight) + 'px';
|
||||
inputInner.style.height = height;
|
||||
this.updatePopper();
|
||||
if (this.dropDownVisible) {
|
||||
this.updatePopper();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -218,16 +218,16 @@
|
|||
},
|
||||
|
||||
bindScrollEvent() {
|
||||
const bindFuntion = (type) => {
|
||||
const bindFunction = (type) => {
|
||||
this.$refs[type].wrap.onscroll = (e) => {
|
||||
// TODO: scroll is emitted when set scrollTop programatically
|
||||
// should find better solutions in the future!
|
||||
this.handleScroll(type, e);
|
||||
};
|
||||
};
|
||||
bindFuntion('hours');
|
||||
bindFuntion('minutes');
|
||||
bindFuntion('seconds');
|
||||
bindFunction('hours');
|
||||
bindFunction('minutes');
|
||||
bindFunction('seconds');
|
||||
},
|
||||
|
||||
handleScroll(type) {
|
||||
|
|
|
|||
|
|
@ -97,7 +97,9 @@ const NewPopper = {
|
|||
appendToBody: Popper.props.appendToBody,
|
||||
offset: Popper.props.offset,
|
||||
boundariesPadding: Popper.props.boundariesPadding,
|
||||
arrowOffset: Popper.props.arrowOffset
|
||||
arrowOffset: Popper.props.arrowOffset,
|
||||
placement: Popper.props.placement,
|
||||
transformOrigin: Popper.props.transformOrigin
|
||||
},
|
||||
methods: Popper.methods,
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
import DescriptionsItem from '../descriptions/src/descriptions-item';
|
||||
|
||||
/* istanbul ignore next */
|
||||
DescriptionsItem.install = function install(Vue) {
|
||||
Vue.component(DescriptionsItem.name, DescriptionsItem);
|
||||
};
|
||||
|
||||
export default DescriptionsItem;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import Descriptions from './src/index';
|
||||
|
||||
/* istanbul ignore next */
|
||||
Descriptions.install = function install(Vue) {
|
||||
Vue.component(Descriptions.name, Descriptions);
|
||||
};
|
||||
|
||||
export default Descriptions;
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
export default {
|
||||
name: 'ElDescriptionsItem',
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
span: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
contentClassName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
contentStyle: {
|
||||
type: Object
|
||||
},
|
||||
labelClassName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
labelStyle: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
render() {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
export default {
|
||||
name: 'ElDescriptionsRow',
|
||||
props: {
|
||||
row: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
inject: ['elDescriptions'],
|
||||
render(h) {
|
||||
const { elDescriptions } = this;
|
||||
const row = (this.row || []).map(item => {
|
||||
return {
|
||||
...item,
|
||||
label: item.slots.label || item.props.label,
|
||||
...['labelClassName', 'contentClassName', 'labelStyle', 'contentStyle'].reduce((res, key) => {
|
||||
res[key] = item.props[key] || elDescriptions[key];
|
||||
return res;
|
||||
}, {})
|
||||
};
|
||||
});
|
||||
if (elDescriptions.direction === 'vertical') {
|
||||
return (
|
||||
<tbody>
|
||||
<tr class="el-descriptions-row">
|
||||
{
|
||||
row.map(item => {
|
||||
return (
|
||||
<th
|
||||
class={{
|
||||
'el-descriptions-item__cell': true,
|
||||
'el-descriptions-item__label': true,
|
||||
'has-colon': elDescriptions.border ? false : elDescriptions.colon,
|
||||
'is-bordered-label': elDescriptions.border,
|
||||
[item.labelClassName]: true
|
||||
}}
|
||||
style={item.labelStyle}
|
||||
colSpan={item.props.span}
|
||||
>{item.label}</th>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tr>
|
||||
<tr class="el-descriptions-row">
|
||||
{
|
||||
row.map(item =>{
|
||||
return (
|
||||
<td
|
||||
class={['el-descriptions-item__cell', 'el-descriptions-item__content', item.contentClassName]}
|
||||
style={item.contentStyle}
|
||||
colSpan={item.props.span}
|
||||
>{item.slots.default}</td>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tr>
|
||||
</tbody>
|
||||
);
|
||||
}
|
||||
if (elDescriptions.border) {
|
||||
return (
|
||||
<tbody>
|
||||
<tr class="el-descriptions-row">
|
||||
{
|
||||
row.map(item=> {
|
||||
return ([
|
||||
<th
|
||||
class={{
|
||||
'el-descriptions-item__cell': true,
|
||||
'el-descriptions-item__label': true,
|
||||
'is-bordered-label': elDescriptions.border,
|
||||
[item.labelClassName]: true
|
||||
}}
|
||||
style={item.labelStyle}
|
||||
colSpan="1"
|
||||
>{item.label}</th>,
|
||||
<td
|
||||
class={['el-descriptions-item__cell', 'el-descriptions-item__content', item.contentClassName]}
|
||||
style={item.contentStyle}
|
||||
colSpan={item.props.span * 2 - 1}
|
||||
>{item.slots.default}</td>
|
||||
]);
|
||||
})
|
||||
}
|
||||
</tr>
|
||||
</tbody>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<tbody>
|
||||
<tr class="el-descriptions-row">
|
||||
{
|
||||
row.map(item=> {
|
||||
return (
|
||||
<td class="el-descriptions-item el-descriptions-item__cell" colSpan={item.props.span}>
|
||||
<div class="el-descriptions-item__container">
|
||||
<span
|
||||
class={{
|
||||
'el-descriptions-item__label': true,
|
||||
'has-colon': elDescriptions.colon,
|
||||
[item.labelClassName]: true
|
||||
}}
|
||||
style={item.labelStyle}
|
||||
>{item.label}</span>
|
||||
<span
|
||||
class={['el-descriptions-item__content', item.contentClassName]}
|
||||
style={item.contentStyle}
|
||||
>{item.slots.default}</span>
|
||||
</div>
|
||||
</td>);
|
||||
})
|
||||
}
|
||||
</tr>
|
||||
</tbody>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,180 @@
|
|||
import DescriptionsRow from './descriptions-row';
|
||||
import { isFunction } from 'element-ui/src/utils/types';
|
||||
|
||||
export default {
|
||||
name: 'ElDescriptions',
|
||||
components: {
|
||||
[DescriptionsRow.name]: DescriptionsRow
|
||||
},
|
||||
props: {
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
column: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'horizontal'
|
||||
},
|
||||
size: {
|
||||
type: String
|
||||
// validator: isValidComponentSize,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
extra: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
labelStyle: {
|
||||
type: Object
|
||||
},
|
||||
contentStyle: {
|
||||
type: Object
|
||||
},
|
||||
labelClassName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
contentClassName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
colon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
descriptionsSize() {
|
||||
return this.size || (this.$ELEMENT || {}).size;
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
elDescriptions: this
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getOptionProps(vnode) {
|
||||
if (vnode.componentOptions) {
|
||||
const componentOptions = vnode.componentOptions;
|
||||
const { propsData = {}, Ctor = {} } = componentOptions;
|
||||
const props = (Ctor.options || {}).props || {};
|
||||
const res = {};
|
||||
for (const k in props) {
|
||||
const v = props[k];
|
||||
const defaultValue = v.default;
|
||||
if (defaultValue !== undefined) {
|
||||
res[k] = isFunction(defaultValue) ? defaultValue.call(vnode) : defaultValue;
|
||||
}
|
||||
}
|
||||
return { ...res, ...propsData };
|
||||
}
|
||||
return {};
|
||||
},
|
||||
getSlots(vnode) {
|
||||
let componentOptions = vnode.componentOptions || {};
|
||||
const children = vnode.children || componentOptions.children || [];
|
||||
const slots = {};
|
||||
children.forEach(child => {
|
||||
if (!this.isEmptyElement(child)) {
|
||||
const name = (child.data && child.data.slot) || 'default';
|
||||
slots[name] = slots[name] || [];
|
||||
if (child.tag === 'template') {
|
||||
slots[name].push(child.children);
|
||||
} else {
|
||||
slots[name].push(child);
|
||||
}
|
||||
}
|
||||
});
|
||||
return { ...slots };
|
||||
},
|
||||
isEmptyElement(c) {
|
||||
return !(c.tag || (c.text && c.text.trim() !== ''));
|
||||
},
|
||||
filledNode(node, span, count, isLast = false) {
|
||||
if (!node.props) {
|
||||
node.props = {};
|
||||
}
|
||||
if (span > count) {
|
||||
node.props.span = count;
|
||||
}
|
||||
if (isLast) {
|
||||
// set the max span, cause of the last td
|
||||
node.props.span = count;
|
||||
}
|
||||
return node;
|
||||
},
|
||||
getRows() {
|
||||
const children = ((this.$slots.default || []).filter(vnode => vnode.tag &&
|
||||
vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'ElDescriptionsItem'));
|
||||
const nodes = children.map(vnode => {
|
||||
return {
|
||||
props: this.getOptionProps(vnode),
|
||||
slots: this.getSlots(vnode),
|
||||
vnode
|
||||
};
|
||||
});
|
||||
const rows = [];
|
||||
let temp = [];
|
||||
let count = this.column;
|
||||
|
||||
nodes.forEach((node, index) => {
|
||||
const span = node.props.span || 1;
|
||||
|
||||
if (index === children.length - 1) {
|
||||
temp.push(this.filledNode(node, span, count, true));
|
||||
rows.push(temp);
|
||||
return;
|
||||
}
|
||||
|
||||
if (span < count) {
|
||||
count -= span;
|
||||
temp.push(node);
|
||||
} else {
|
||||
temp.push(this.filledNode(node, span, count));
|
||||
rows.push(temp);
|
||||
count = this.column;
|
||||
temp = [];
|
||||
}
|
||||
});
|
||||
|
||||
return rows;
|
||||
}
|
||||
},
|
||||
render() {
|
||||
const { title, extra, border, descriptionsSize, $slots } = this;
|
||||
const rows = this.getRows();
|
||||
|
||||
return (
|
||||
<div class="el-descriptions">
|
||||
{
|
||||
(title || extra || $slots.title || $slots.extra)
|
||||
? <div class="el-descriptions__header">
|
||||
<div class="el-descriptions__title">
|
||||
{ $slots.title ? $slots.title : title}
|
||||
</div>
|
||||
<div class="el-descriptions__extra">
|
||||
{ $slots.extra ? $slots.extra : extra }
|
||||
</div>
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
|
||||
<div class="el-descriptions__body">
|
||||
<table class={['el-descriptions__table', {'is-bordered': border}, descriptionsSize ? `el-descriptions--${descriptionsSize}` : '']}>
|
||||
{rows.map(row => (
|
||||
<DescriptionsRow row={row}></DescriptionsRow>
|
||||
))}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
@ -190,6 +190,9 @@ export default {
|
|||
if (this.visible) {
|
||||
this.rendered = true;
|
||||
this.open();
|
||||
if (this.appendToBody) {
|
||||
document.body.appendChild(this.$el);
|
||||
}
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
|
|
|
|||
|
|
@ -59,6 +59,10 @@
|
|||
tabindex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -111,14 +115,14 @@
|
|||
};
|
||||
},
|
||||
show() {
|
||||
if (this.triggerElm.disabled) return;
|
||||
if (this.disabled) return;
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
this.visible = true;
|
||||
}, this.trigger === 'click' ? 0 : this.showTimeout);
|
||||
},
|
||||
hide() {
|
||||
if (this.triggerElm.disabled) return;
|
||||
if (this.disabled) return;
|
||||
this.removeTabindex();
|
||||
if (this.tabindex >= 0) {
|
||||
this.resetTabindex(this.triggerElm);
|
||||
|
|
@ -129,7 +133,7 @@
|
|||
}, this.trigger === 'click' ? 0 : this.hideTimeout);
|
||||
},
|
||||
handleClick() {
|
||||
if (this.triggerElm.disabled) return;
|
||||
if (this.disabled) return;
|
||||
if (this.visible) {
|
||||
this.hide();
|
||||
} else {
|
||||
|
|
@ -250,28 +254,38 @@
|
|||
},
|
||||
|
||||
render(h) {
|
||||
let { hide, splitButton, type, dropdownSize } = this;
|
||||
let { hide, splitButton, type, dropdownSize, disabled } = this;
|
||||
|
||||
const handleMainButtonClick = (event) => {
|
||||
this.$emit('click', event);
|
||||
hide();
|
||||
};
|
||||
|
||||
let triggerElm = !splitButton
|
||||
? this.$slots.default
|
||||
: (<el-button-group>
|
||||
<el-button type={type} size={dropdownSize} nativeOn-click={handleMainButtonClick}>
|
||||
let triggerElm = null;
|
||||
if (splitButton) {
|
||||
triggerElm = <el-button-group>
|
||||
<el-button type={type} size={dropdownSize} nativeOn-click={handleMainButtonClick} disabled={disabled}>
|
||||
{this.$slots.default}
|
||||
</el-button>
|
||||
<el-button ref="trigger" type={type} size={dropdownSize} class="el-dropdown__caret-button">
|
||||
<el-button ref="trigger" type={type} size={dropdownSize} class="el-dropdown__caret-button" disabled={disabled}>
|
||||
<i class="el-dropdown__icon el-icon-arrow-down"></i>
|
||||
</el-button>
|
||||
</el-button-group>);
|
||||
</el-button-group>;
|
||||
} else {
|
||||
triggerElm = this.$slots.default;
|
||||
const vnodeData = triggerElm[0].data || {};
|
||||
let { attrs = {} } = vnodeData;
|
||||
if (disabled && !attrs.disabled) {
|
||||
attrs.disabled = true;
|
||||
vnodeData.attrs = attrs;
|
||||
}
|
||||
}
|
||||
const menuElm = disabled ? null : this.$slots.dropdown;
|
||||
|
||||
return (
|
||||
<div class="el-dropdown" v-clickoutside={hide}>
|
||||
<div class="el-dropdown" v-clickoutside={hide} aria-disabled={disabled}>
|
||||
{triggerElm}
|
||||
{this.$slots.dropdown}
|
||||
{menuElm}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -95,6 +95,11 @@
|
|||
},
|
||||
validateStatus(value) {
|
||||
this.validateState = value;
|
||||
},
|
||||
rules(value) {
|
||||
if ((!value || value.length === 0) && this.required === undefined) {
|
||||
this.clearValidate();
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -116,8 +116,8 @@
|
|||
// if no callback, return promise
|
||||
if (typeof callback !== 'function' && window.Promise) {
|
||||
promise = new window.Promise((resolve, reject) => {
|
||||
callback = function(valid) {
|
||||
valid ? resolve(valid) : reject(valid);
|
||||
callback = function(valid, invalidFields) {
|
||||
valid ? resolve(valid) : reject(invalidFields);
|
||||
};
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -337,15 +337,18 @@
|
|||
this.focused = true;
|
||||
this.$emit('focus', event);
|
||||
},
|
||||
handleCompositionStart() {
|
||||
handleCompositionStart(event) {
|
||||
this.$emit('compositionstart', event);
|
||||
this.isComposing = true;
|
||||
},
|
||||
handleCompositionUpdate(event) {
|
||||
this.$emit('compositionupdate', event);
|
||||
const text = event.target.value;
|
||||
const lastCharacter = text[text.length - 1] || '';
|
||||
this.isComposing = !isKorean(lastCharacter);
|
||||
},
|
||||
handleCompositionEnd(event) {
|
||||
this.$emit('compositionend', event);
|
||||
if (this.isComposing) {
|
||||
this.isComposing = false;
|
||||
this.handleInput(event);
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import Vue from 'vue';
|
|||
import Main from './main.vue';
|
||||
import { PopupManager } from 'element-ui/src/utils/popup';
|
||||
import { isVNode } from 'element-ui/src/utils/vdom';
|
||||
import { isObject } from 'element-ui/src/utils/types';
|
||||
let MessageConstructor = Vue.extend(Main);
|
||||
|
||||
let instance;
|
||||
|
|
@ -44,14 +45,17 @@ const Message = function(options) {
|
|||
};
|
||||
|
||||
['success', 'warning', 'info', 'error'].forEach(type => {
|
||||
Message[type] = options => {
|
||||
if (typeof options === 'string') {
|
||||
options = {
|
||||
message: options
|
||||
};
|
||||
Message[type] = (options) => {
|
||||
if (isObject(options) && !isVNode(options)) {
|
||||
return Message({
|
||||
...options,
|
||||
type
|
||||
});
|
||||
}
|
||||
options.type = type;
|
||||
return Message(options);
|
||||
return Message({
|
||||
type,
|
||||
message: options
|
||||
});
|
||||
};
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
tabindex="-1"
|
||||
@focus="focus = true"
|
||||
@blur="focus = false"
|
||||
autocomplete="off"
|
||||
>
|
||||
<span
|
||||
class="el-radio-button__inner"
|
||||
|
|
|
|||
|
|
@ -43,7 +43,9 @@
|
|||
return (this.elFormItem || {}).elFormItemSize;
|
||||
},
|
||||
_elTag() {
|
||||
return (this.$vnode.data || {}).tag || 'div';
|
||||
let tag = (this.$vnode.data || {}).tag;
|
||||
if (!tag || tag === 'component') tag = 'div';
|
||||
return tag;
|
||||
},
|
||||
radioGroupSize() {
|
||||
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@
|
|||
:name="name"
|
||||
:disabled="isDisabled"
|
||||
tabindex="-1"
|
||||
autocomplete="off"
|
||||
>
|
||||
</span>
|
||||
<span class="el-radio__label" @keydown.stop>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
import Result from './src/index.vue';
|
||||
|
||||
/* istanbul ignore next */
|
||||
Result.install = function(Vue) {
|
||||
Vue.component(Result.name, Result);
|
||||
};
|
||||
|
||||
export default Result;
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.57818,15.42182 C32.0157534,14.8593933 31.1038797,14.8593933 30.541453,15.42182 L30.541453,15.42182 L24.0006789,21.9625941 L17.458547,15.42182 C16.8961203,14.8593933 15.9842466,14.8593933 15.42182,15.42182 C14.8593933,15.9842466 14.8593933,16.8961203 15.42182,17.458547 L15.42182,17.458547 L21.9639519,23.9993211 L15.42182,30.541453 C14.8593933,31.1038797 14.8593933,32.0157534 15.42182,32.57818 C15.9842466,33.1406067 16.8961203,33.1406067 17.458547,32.57818 L17.458547,32.57818 L24.0006789,26.0360481 L30.541453,32.57818 C31.1038797,33.1406067 32.0157534,33.1406067 32.57818,32.57818 C33.1406067,32.0157534 33.1406067,31.1038797 32.57818,30.541453 L32.57818,30.541453 L26.0374059,23.9993211 L32.57818,17.458547 C33.1406067,16.8961203 33.1406067,15.9842466 32.57818,15.42182 Z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'IconError'
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M24,19 L21,19 C20.1715729,19 19.5,19.6715729 19.5,20.5 C19.5,21.3284271 20.1715729,22 21,22 L21,22 L22.5,22 L22.5,31 L21,31 C20.1715729,31 19.5,31.6715729 19.5,32.5 C19.5,33.3284271 20.1715729,34 21,34 L21,34 L27,34 C27.8284271,34 28.5,33.3284271 28.5,32.5 C28.5,31.6715729 27.8284271,31 27,31 L27,31 L25.5,31 L25.5,20.5 C25.5,19.6715729 24.8284271,19 24,19 L24,19 Z M24,13 C22.8954305,13 22,13.8954305 22,15 C22,16.1045695 22.8954305,17 24,17 C25.1045695,17 26,16.1045695 26,15 C26,13.8954305 25.1045695,13 24,13 Z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'IconInfo'
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M34.5548098,16.4485711 C33.9612228,15.8504763 32.9988282,15.8504763 32.4052412,16.4485711 L32.4052412,16.4485711 L21.413757,27.5805811 L21.413757,27.5805811 L21.4034642,27.590855 C21.0097542,27.9781674 20.3766105,27.9729811 19.9892981,27.5792711 L19.9892981,27.5792711 L15.5947588,23.1121428 C15.0011718,22.514048 14.0387772,22.514048 13.4451902,23.1121428 C12.8516033,23.7102376 12.8516033,24.6799409 13.4451902,25.2780357 L13.4451902,25.2780357 L19.6260786,31.5514289 C20.2196656,32.1495237 21.1820602,32.1495237 21.7756472,31.5514289 L21.7756472,31.5514289 L34.5548098,18.614464 C35.1483967,18.0163692 35.1483967,17.0466659 34.5548098,16.4485711 Z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'IconSuccess'
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M24,31 C22.8954305,31 22,31.8954305 22,33 C22,34.1045695 22.8954305,35 24,35 C25.1045695,35 26,34.1045695 26,33 C26,31.8954305 25.1045695,31 24,31 Z M24,14 C23.1715729,14 22.5,14.6715729 22.5,15.5 L22.5,15.5 L22.5,27.5 C22.5,28.3284271 23.1715729,29 24,29 C24.8284271,29 25.5,28.3284271 25.5,27.5 L25.5,27.5 L25.5,15.5 C25.5,14.6715729 24.8284271,14 24,14 Z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'IconWarning'
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<template>
|
||||
<div class="el-result">
|
||||
<div class="el-result__icon">
|
||||
<slot name="icon">
|
||||
<component :is="iconElement" :class="iconElement" />
|
||||
</slot>
|
||||
</div>
|
||||
<div v-if="title || $slots.title" class="el-result__title">
|
||||
<slot name="title">
|
||||
<p>{{ title }}</p>
|
||||
</slot>
|
||||
</div>
|
||||
<div v-if="subTitle || $slots.subTitle" class="el-result__subtitle">
|
||||
<slot name="subTitle">
|
||||
<p>{{ subTitle }}</p>
|
||||
</slot>
|
||||
</div>
|
||||
<div v-if="$slots.extra" class="el-result__extra">
|
||||
<slot name="extra"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import IconSuccess from './icon-success.vue';
|
||||
import IconError from './icon-error.vue';
|
||||
import IconWarning from './icon-warning.vue';
|
||||
import IconInfo from './icon-info.vue';
|
||||
|
||||
const IconMap = {
|
||||
success: 'icon-success',
|
||||
warning: 'icon-warning',
|
||||
error: 'icon-error',
|
||||
info: 'icon-info'
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'ElResult',
|
||||
components: {
|
||||
[IconSuccess.name]: IconSuccess,
|
||||
[IconError.name]: IconError,
|
||||
[IconWarning.name]: IconWarning,
|
||||
[IconInfo.name]: IconInfo
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
subTitle: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: 'info'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconElement() {
|
||||
const icon = this.icon;
|
||||
return icon && IconMap[icon] ? IconMap[icon] : 'icon-info';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -52,8 +52,8 @@
|
|||
@blur="softFocus = false"
|
||||
@keyup="managePlaceholder"
|
||||
@keydown="resetInputState"
|
||||
@keydown.down.prevent="navigateOptions('next')"
|
||||
@keydown.up.prevent="navigateOptions('prev')"
|
||||
@keydown.down.prevent="handleNavigate('next')"
|
||||
@keydown.up.prevent="handleNavigate('prev')"
|
||||
@keydown.enter.prevent="selectOption"
|
||||
@keydown.esc.stop.prevent="visible = false"
|
||||
@keydown.delete="deletePrevTag"
|
||||
|
|
@ -83,13 +83,15 @@
|
|||
:tabindex="(multiple && filterable) ? '-1' : null"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
@keyup.native="debouncedOnInputChange"
|
||||
@keydown.native.down.stop.prevent="navigateOptions('next')"
|
||||
@keydown.native.up.stop.prevent="navigateOptions('prev')"
|
||||
@input="debouncedOnInputChange"
|
||||
@keydown.native.down.stop.prevent="handleNavigate('next')"
|
||||
@keydown.native.up.stop.prevent="handleNavigate('prev')"
|
||||
@keydown.native.enter.prevent="selectOption"
|
||||
@keydown.native.esc.stop.prevent="visible = false"
|
||||
@keydown.native.tab="visible = false"
|
||||
@paste.native="debouncedOnInputChange"
|
||||
@compositionstart="handleComposition"
|
||||
@compositionupdate="handleComposition"
|
||||
@compositionend="handleComposition"
|
||||
@mouseenter.native="inputHovering = true"
|
||||
@mouseleave.native="inputHovering = false">
|
||||
<template slot="prefix" v-if="$slots.prefix">
|
||||
|
|
@ -441,6 +443,11 @@
|
|||
},
|
||||
|
||||
methods: {
|
||||
handleNavigate(direction) {
|
||||
if (this.isOnComposition) return;
|
||||
|
||||
this.navigateOptions(direction);
|
||||
},
|
||||
handleComposition(event) {
|
||||
const text = event.target.value;
|
||||
if (event.type === 'compositionend') {
|
||||
|
|
@ -566,10 +573,10 @@
|
|||
handleFocus(event) {
|
||||
if (!this.softFocus) {
|
||||
if (this.automaticDropdown || this.filterable) {
|
||||
this.visible = true;
|
||||
if (this.filterable) {
|
||||
if (this.filterable && !this.visible) {
|
||||
this.menuVisibleOnFocus = true;
|
||||
}
|
||||
this.visible = true;
|
||||
}
|
||||
this.$emit('focus', event);
|
||||
} else {
|
||||
|
|
@ -647,11 +654,12 @@
|
|||
let inputChildNodes = this.$refs.reference.$el.childNodes;
|
||||
let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0];
|
||||
const tags = this.$refs.tags;
|
||||
const tagsHeight = tags ? Math.round(tags.getBoundingClientRect().height) : 0;
|
||||
const sizeInMap = this.initialInputHeight || 40;
|
||||
input.style.height = this.selected.length === 0
|
||||
? sizeInMap + 'px'
|
||||
: Math.max(
|
||||
tags ? (tags.clientHeight + (tags.clientHeight > sizeInMap ? 6 : 0)) : 0,
|
||||
tags ? (tagsHeight + (tagsHeight > sizeInMap ? 6 : 0)) : 0,
|
||||
sizeInMap
|
||||
) + 'px';
|
||||
if (this.visible && this.emptyText !== false) {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<slot v-if="loading" name="template">
|
||||
<el-skeleton-item
|
||||
v-for="item in rows"
|
||||
:key="item"
|
||||
:key="`${i}-${item}`"
|
||||
:class="{
|
||||
'el-skeleton__paragraph': item !== 1,
|
||||
'is-first': item === 1,
|
||||
|
|
|
|||
|
|
@ -134,7 +134,9 @@
|
|||
this.$nextTick(() => {
|
||||
// set input's checked property
|
||||
// in case parent refuses to change component's value
|
||||
this.$refs.input.checked = this.checked;
|
||||
if (this.$refs.input) {
|
||||
this.$refs.input.checked = this.checked;
|
||||
}
|
||||
});
|
||||
},
|
||||
setBackgroundColor() {
|
||||
|
|
|
|||
|
|
@ -32,15 +32,16 @@ export const cellForced = {
|
|||
return <el-checkbox
|
||||
disabled={ store.states.data && store.states.data.length === 0 }
|
||||
indeterminate={ store.states.selection.length > 0 && !this.isAllSelected }
|
||||
nativeOn-click={ this.toggleAllSelection }
|
||||
on-input={ this.toggleAllSelection }
|
||||
value={ this.isAllSelected } />;
|
||||
},
|
||||
renderCell: function(h, { row, column, store, $index }) {
|
||||
renderCell: function(h, { row, column, isSelected, store, $index }) {
|
||||
return <el-checkbox
|
||||
nativeOn-click={ (event) => event.stopPropagation() }
|
||||
value={ store.isSelected(row) }
|
||||
value={ isSelected }
|
||||
disabled={ column.selectable ? !column.selectable.call(null, row, $index) : false }
|
||||
on-input={ () => { store.commit('rowSelectedChanged', row); } } />;
|
||||
on-input={ () => { store.commit('rowSelectedChanged', row); } }
|
||||
/>;
|
||||
},
|
||||
sortable: false,
|
||||
resizable: false
|
||||
|
|
@ -67,9 +68,9 @@ export const cellForced = {
|
|||
renderHeader: function(h, { column }) {
|
||||
return column.label || '';
|
||||
},
|
||||
renderCell: function(h, { row, store }) {
|
||||
renderCell: function(h, { row, store, isExpanded }) {
|
||||
const classes = ['el-table__expand-icon'];
|
||||
if (store.states.expandRows.indexOf(row) > -1) {
|
||||
if (isExpanded) {
|
||||
classes.push('el-table__expand-icon--expanded');
|
||||
}
|
||||
const callback = function(e) {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import ElTooltip from 'element-ui/packages/tooltip';
|
|||
import debounce from 'throttle-debounce/debounce';
|
||||
import LayoutObserver from './layout-observer';
|
||||
import { mapStates } from './store/helper';
|
||||
import TableRow from './table-row.js';
|
||||
|
||||
export default {
|
||||
name: 'ElTableBody',
|
||||
|
|
@ -14,7 +15,8 @@ export default {
|
|||
|
||||
components: {
|
||||
ElCheckbox,
|
||||
ElTooltip
|
||||
ElTooltip,
|
||||
TableRow
|
||||
},
|
||||
|
||||
props: {
|
||||
|
|
@ -39,7 +41,7 @@ export default {
|
|||
border="0">
|
||||
<colgroup>
|
||||
{
|
||||
this.columns.map(column => <col name={ column.id } key={column.id} />)
|
||||
this.columns.map(column => <col name={column.id} key={column.id} />)
|
||||
}
|
||||
</colgroup>
|
||||
<tbody>
|
||||
|
|
@ -48,7 +50,7 @@ export default {
|
|||
return acc.concat(this.wrappedRowRender(row, acc.length));
|
||||
}, [])
|
||||
}
|
||||
<el-tooltip effect={ this.table.tooltipEffect } placement="top" ref="tooltip" content={ this.tooltipContent }></el-tooltip>
|
||||
<el-tooltip effect={this.table.tooltipEffect} placement="top" ref="tooltip" content={this.tooltipContent}></el-tooltip>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
|
|
@ -71,6 +73,10 @@ export default {
|
|||
hasExpandColumn: states => states.columns.some(({ type }) => type === 'expand')
|
||||
}),
|
||||
|
||||
columnsHidden() {
|
||||
return this.columns.map((column, index) => this.isColumnHidden(index));
|
||||
},
|
||||
|
||||
firstDefaultColumnIndex() {
|
||||
return arrayFindIndex(this.columns, ({ type }) => type === 'default');
|
||||
}
|
||||
|
|
@ -219,6 +225,8 @@ export default {
|
|||
}));
|
||||
}
|
||||
|
||||
classes.push('el-table__cell');
|
||||
|
||||
return classes.join(' ');
|
||||
},
|
||||
|
||||
|
|
@ -236,7 +244,7 @@ export default {
|
|||
|
||||
if (cell) {
|
||||
const column = getColumnByCell(table, cell);
|
||||
const hoverState = table.hoverState = {cell, column, row};
|
||||
const hoverState = table.hoverState = { cell, column, row };
|
||||
table.$emit('cell-mouse-enter', hoverState.row, hoverState.column, hoverState.cell, event);
|
||||
}
|
||||
|
||||
|
|
@ -314,7 +322,6 @@ export default {
|
|||
|
||||
rowRender(row, $index, treeRowData) {
|
||||
const { treeIndent, columns, firstDefaultColumnIndex } = this;
|
||||
const columnsHidden = columns.map((column, index) => this.isColumnHidden(index));
|
||||
const rowClasses = this.getRowClass(row, $index);
|
||||
let display = true;
|
||||
if (treeRowData) {
|
||||
|
|
@ -326,67 +333,37 @@ export default {
|
|||
let displayStyle = display ? null : {
|
||||
display: 'none'
|
||||
};
|
||||
return (<tr
|
||||
style={ [displayStyle, this.getRowStyle(row, $index)] }
|
||||
class={ rowClasses }
|
||||
key={ this.getKeyOfRow(row, $index) }
|
||||
on-dblclick={ ($event) => this.handleDoubleClick($event, row) }
|
||||
on-click={ ($event) => this.handleClick($event, row) }
|
||||
on-contextmenu={ ($event) => this.handleContextMenu($event, row) }
|
||||
on-mouseenter={ _ => this.handleMouseEnter($index) }
|
||||
on-mouseleave={ this.handleMouseLeave }>
|
||||
{
|
||||
columns.map((column, cellIndex) => {
|
||||
const { rowspan, colspan } = this.getSpan(row, column, $index, cellIndex);
|
||||
if (!rowspan || !colspan) {
|
||||
return null;
|
||||
}
|
||||
const columnData = { ...column };
|
||||
columnData.realWidth = this.getColspanRealWidth(columns, colspan, cellIndex);
|
||||
const data = {
|
||||
store: this.store,
|
||||
_self: this.context || this.table.$vnode.context,
|
||||
column: columnData,
|
||||
row,
|
||||
$index
|
||||
};
|
||||
if (cellIndex === firstDefaultColumnIndex && treeRowData) {
|
||||
data.treeNode = {
|
||||
indent: treeRowData.level * treeIndent,
|
||||
level: treeRowData.level
|
||||
};
|
||||
if (typeof treeRowData.expanded === 'boolean') {
|
||||
data.treeNode.expanded = treeRowData.expanded;
|
||||
// 表明是懒加载
|
||||
if ('loading' in treeRowData) {
|
||||
data.treeNode.loading = treeRowData.loading;
|
||||
}
|
||||
if ('noLazyChildren' in treeRowData) {
|
||||
data.treeNode.noLazyChildren = treeRowData.noLazyChildren;
|
||||
}
|
||||
}
|
||||
}
|
||||
return (
|
||||
<td
|
||||
style={ this.getCellStyle($index, cellIndex, row, column) }
|
||||
class={ this.getCellClass($index, cellIndex, row, column) }
|
||||
rowspan={ rowspan }
|
||||
colspan={ colspan }
|
||||
on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) }
|
||||
on-mouseleave={ this.handleCellMouseLeave }>
|
||||
{
|
||||
column.renderCell.call(
|
||||
this._renderProxy,
|
||||
this.$createElement,
|
||||
data,
|
||||
columnsHidden[cellIndex]
|
||||
)
|
||||
}
|
||||
</td>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tr>);
|
||||
return (
|
||||
<TableRow
|
||||
style={[displayStyle, this.getRowStyle(row, $index)]}
|
||||
class={rowClasses}
|
||||
key={this.getKeyOfRow(row, $index)}
|
||||
nativeOn-dblclick={($event) => this.handleDoubleClick($event, row)}
|
||||
nativeOn-click={($event) => this.handleClick($event, row)}
|
||||
nativeOn-contextmenu={($event) => this.handleContextMenu($event, row)}
|
||||
nativeOn-mouseenter={_ => this.handleMouseEnter($index)}
|
||||
nativeOn-mouseleave={this.handleMouseLeave}
|
||||
columns={columns}
|
||||
row={row}
|
||||
index={$index}
|
||||
store={this.store}
|
||||
context={this.context || this.table.$vnode.context}
|
||||
firstDefaultColumnIndex={firstDefaultColumnIndex}
|
||||
treeRowData={treeRowData}
|
||||
treeIndent={treeIndent}
|
||||
columnsHidden={this.columnsHidden}
|
||||
getSpan={this.getSpan}
|
||||
getColspanRealWidth={this.getColspanRealWidth}
|
||||
getCellStyle={this.getCellStyle}
|
||||
getCellClass={this.getCellClass}
|
||||
handleCellMouseEnter={this.handleCellMouseEnter}
|
||||
handleCellMouseLeave={this.handleCellMouseLeave}
|
||||
isSelected={this.store.isSelected(row)}
|
||||
isExpanded={this.store.states.expandRows.indexOf(row) > -1}
|
||||
fixed={this.fixed}
|
||||
>
|
||||
</TableRow>
|
||||
);
|
||||
},
|
||||
|
||||
wrappedRowRender(row, $index) {
|
||||
|
|
@ -404,7 +381,7 @@ export default {
|
|||
return [[
|
||||
tr,
|
||||
<tr key={'expanded-row__' + tr.key}>
|
||||
<td colspan={ this.columnsCount } class="el-table__expanded-cell">
|
||||
<td colspan={ this.columnsCount } class="el-table__cell el-table__expanded-cell">
|
||||
{ renderExpanded(this.$createElement, { row, $index, store: this.store }) }
|
||||
</td>
|
||||
</tr>]];
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ export default {
|
|||
key={cellIndex}
|
||||
colspan={ column.colSpan }
|
||||
rowspan={ column.rowSpan }
|
||||
class={ this.getRowClasses(column, cellIndex) }>
|
||||
class={ [...this.getRowClasses(column, cellIndex), 'el-table__cell'] }>
|
||||
<div class={ ['cell', column.labelClassName] }>
|
||||
{
|
||||
sums[cellIndex]
|
||||
|
|
@ -72,7 +72,7 @@ export default {
|
|||
</td>)
|
||||
}
|
||||
{
|
||||
this.hasGutter ? <th class="gutter"></th> : ''
|
||||
this.hasGutter ? <th class="el-table__cell gutter"></th> : ''
|
||||
}
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@ export default {
|
|||
</th>))
|
||||
}
|
||||
{
|
||||
this.hasGutter ? <th class="gutter"></th> : ''
|
||||
this.hasGutter ? <th class="el-table__cell gutter"></th> : ''
|
||||
}
|
||||
</tr>
|
||||
)
|
||||
|
|
@ -286,11 +286,12 @@ export default {
|
|||
}));
|
||||
}
|
||||
|
||||
classes.push('el-table__cell');
|
||||
|
||||
return classes.join(' ');
|
||||
},
|
||||
|
||||
toggleAllSelection(event) {
|
||||
event.stopPropagation();
|
||||
toggleAllSelection() {
|
||||
this.store.commit('toggleAllSelection');
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -113,7 +113,6 @@ class TableLayout {
|
|||
|
||||
const noData = !(this.store.states.data && this.store.states.data.length);
|
||||
this.viewportHeight = this.scrollX ? tableHeight - (noData ? 0 : this.gutterWidth) : tableHeight;
|
||||
|
||||
this.updateScrollY();
|
||||
this.notifyObservers('scrollable');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,101 @@
|
|||
import ElCheckbox from 'element-ui/packages/checkbox';
|
||||
export default {
|
||||
name: 'ElTableRow',
|
||||
props: [
|
||||
'columns',
|
||||
'row',
|
||||
'index',
|
||||
'isSelected',
|
||||
'isExpanded',
|
||||
'store',
|
||||
'context',
|
||||
'firstDefaultColumnIndex',
|
||||
'treeRowData',
|
||||
'treeIndent',
|
||||
'columnsHidden',
|
||||
'getSpan',
|
||||
'getColspanRealWidth',
|
||||
'getCellStyle',
|
||||
'getCellClass',
|
||||
'handleCellMouseLeave',
|
||||
'handleCellMouseEnter',
|
||||
'fixed'
|
||||
],
|
||||
components: {
|
||||
ElCheckbox
|
||||
},
|
||||
render() {
|
||||
const {
|
||||
columns,
|
||||
row,
|
||||
index: $index,
|
||||
store,
|
||||
context,
|
||||
firstDefaultColumnIndex,
|
||||
treeRowData,
|
||||
treeIndent,
|
||||
columnsHidden = [],
|
||||
isSelected,
|
||||
isExpanded
|
||||
} = this;
|
||||
|
||||
return (
|
||||
<tr>
|
||||
{
|
||||
columns.map((column, cellIndex) => {
|
||||
const { rowspan, colspan } = this.getSpan(row, column, $index, cellIndex);
|
||||
if (!rowspan || !colspan) {
|
||||
return null;
|
||||
}
|
||||
const columnData = { ...column };
|
||||
columnData.realWidth = this.getColspanRealWidth(columns, colspan, cellIndex);
|
||||
const data = {
|
||||
store,
|
||||
isSelected,
|
||||
isExpanded,
|
||||
_self: context,
|
||||
column: columnData,
|
||||
row,
|
||||
$index
|
||||
};
|
||||
if (cellIndex === firstDefaultColumnIndex && treeRowData) {
|
||||
data.treeNode = {
|
||||
indent: treeRowData.level * treeIndent,
|
||||
level: treeRowData.level
|
||||
};
|
||||
if (typeof treeRowData.expanded === 'boolean') {
|
||||
data.treeNode.expanded = treeRowData.expanded;
|
||||
// 表明是懒加载
|
||||
if ('loading' in treeRowData) {
|
||||
data.treeNode.loading = treeRowData.loading;
|
||||
}
|
||||
if ('noLazyChildren' in treeRowData) {
|
||||
data.treeNode.noLazyChildren = treeRowData.noLazyChildren;
|
||||
}
|
||||
}
|
||||
}
|
||||
return (
|
||||
<td
|
||||
style={this.getCellStyle($index, cellIndex, row, column)}
|
||||
class={this.getCellClass($index, cellIndex, row, column)}
|
||||
rowspan={rowspan}
|
||||
colspan={colspan}
|
||||
on-mouseenter={($event) => this.handleCellMouseEnter($event, row)}
|
||||
on-mouseleave={this.handleCellMouseLeave}
|
||||
>
|
||||
{
|
||||
column.renderCell.call(
|
||||
this._renderProxy,
|
||||
this.$createElement,
|
||||
data,
|
||||
columnsHidden[cellIndex]
|
||||
)
|
||||
}
|
||||
</td>
|
||||
);
|
||||
})
|
||||
}
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
@ -412,7 +412,7 @@
|
|||
},
|
||||
|
||||
// TODO 使用 CSS transform
|
||||
syncPostion: throttle(20, function() {
|
||||
syncPostion() {
|
||||
const { scrollLeft, scrollTop, offsetWidth, scrollWidth } = this.bodyWrapper;
|
||||
const { headerWrapper, footerWrapper, fixedBodyWrapper, rightFixedBodyWrapper } = this.$refs;
|
||||
if (headerWrapper) headerWrapper.scrollLeft = scrollLeft;
|
||||
|
|
@ -427,17 +427,30 @@
|
|||
} else {
|
||||
this.scrollPosition = 'middle';
|
||||
}
|
||||
},
|
||||
|
||||
throttleSyncPostion: throttle(16, function() {
|
||||
this.syncPostion();
|
||||
}),
|
||||
|
||||
onScroll(evt) {
|
||||
let raf = window.requestAnimationFrame;
|
||||
if (!raf) {
|
||||
this.throttleSyncPostion();
|
||||
} else {
|
||||
raf(this.syncPostion);
|
||||
}
|
||||
},
|
||||
|
||||
bindEvents() {
|
||||
this.bodyWrapper.addEventListener('scroll', this.syncPostion, { passive: true });
|
||||
this.bodyWrapper.addEventListener('scroll', this.onScroll, { passive: true });
|
||||
if (this.fit) {
|
||||
addResizeListener(this.$el, this.resizeListener);
|
||||
}
|
||||
},
|
||||
|
||||
unbindEvents() {
|
||||
this.bodyWrapper.removeEventListener('scroll', this.syncPostion, { passive: true });
|
||||
this.bodyWrapper.removeEventListener('scroll', this.onScroll, { passive: true });
|
||||
if (this.fit) {
|
||||
removeResizeListener(this.$el, this.resizeListener);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "element-theme-chalk",
|
||||
"version": "2.15.3",
|
||||
"version": "2.15.9",
|
||||
"description": "Element component chalk theme.",
|
||||
"main": "lib/index.css",
|
||||
"style": "lib/index.css",
|
||||
|
|
|
|||
|
|
@ -224,10 +224,12 @@
|
|||
margin-right: -1px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
z-index: 1;
|
||||
&:not(.is-disabled) {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(active) {
|
||||
|
|
|
|||
|
|
@ -426,8 +426,6 @@ $--input-font-size: $--font-size-base !default;
|
|||
/// color||Color|0
|
||||
$--input-font-color: $--color-text-regular !default;
|
||||
/// height||Other|4
|
||||
$--input-width: 140px !default;
|
||||
/// height||Other|4
|
||||
$--input-height: 40px !default;
|
||||
$--input-border: $--border-base !default;
|
||||
$--input-border-color: $--border-color-base !default;
|
||||
|
|
@ -971,6 +969,13 @@ $--empty-image-width: 160px !default;
|
|||
$--empty-description-margin-top: 20px !default;
|
||||
$--empty-bottom-margin-top: 20px !default;
|
||||
|
||||
/* Descriptions
|
||||
-------------------------- */
|
||||
$--descriptions-header-margin-bottom: 20px !default;
|
||||
$--descriptions-title-font-size: 16px !default;
|
||||
$--descriptions-table-border: 1px solid $--border-color-lighter !default;
|
||||
$--descriptions-item-bordered-label-background: #fafafa !default;
|
||||
|
||||
/* Skeleton
|
||||
--------------------------*/
|
||||
$--skeleton-color: #f2f2f2 !default;
|
||||
|
|
@ -980,6 +985,19 @@ $--skeleton-to-color: #e6e6e6 !default;
|
|||
--------------- */
|
||||
$--svg-monochrome-grey: #DCDDE0 !default;
|
||||
|
||||
/* Result
|
||||
-------------------------- */
|
||||
$--result-padding: 40px 30px !default;
|
||||
$--result-icon-font-size: 64px !default;
|
||||
$--result-title-font-size: 20px !default;
|
||||
$--result-title-margin-top: 20px !default;
|
||||
$--result-subtitle-margin-top: 10px !default;
|
||||
$--result-extra-margin-top: 30px !default;
|
||||
$--result-info-color: $--color-info !default;
|
||||
$--result-success-color: $--color-success !default;
|
||||
$--result-warning-color: $--color-warning !default;
|
||||
$--result-danger-color: $--color-danger !default;
|
||||
|
||||
/* Break-point
|
||||
--------------------------*/
|
||||
$--sm: 768px !default;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(descriptions-item) {
|
||||
vertical-align: top;
|
||||
|
||||
@include e(container) {
|
||||
display: flex;
|
||||
|
||||
.el-descriptions-item__label,
|
||||
.el-descriptions-item__content {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
.el-descriptions-item__content {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(label) {
|
||||
&.has-colon {
|
||||
&::after {
|
||||
content: ':';
|
||||
position: relative;
|
||||
top: -0.5px;
|
||||
}
|
||||
}
|
||||
&.is-bordered-label {
|
||||
font-weight: bold;
|
||||
color: $--color-text-secondary;
|
||||
background: $--descriptions-item-bordered-label-background;
|
||||
}
|
||||
&:not(.is-bordered-label) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(content) {
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
@import 'descriptions-item';
|
||||
|
||||
@include b(descriptions) {
|
||||
box-sizing: border-box;
|
||||
font-size: $--font-size-base;
|
||||
color: $--color-text-primary;
|
||||
|
||||
@include e(header) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: $--descriptions-header-margin-bottom;
|
||||
|
||||
@include e(title) {
|
||||
font-size: $--descriptions-title-font-size;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(body) {
|
||||
color: $--color-text-regular;
|
||||
background-color: $--color-white;
|
||||
|
||||
.el-descriptions__table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
|
||||
.el-descriptions-item__cell {
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
@include when(left) {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@include when(center) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@include when(right) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-bordered {
|
||||
table-layout: auto;
|
||||
.el-descriptions-item__cell {
|
||||
border: $--descriptions-table-border;
|
||||
padding: 12px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
:not(.is-bordered) {
|
||||
.el-descriptions-item__cell {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(medium) {
|
||||
&.is-bordered {
|
||||
.el-descriptions-item__cell {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.is-bordered) {
|
||||
.el-descriptions-item__cell {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include m(small) {
|
||||
font-size: 12px;
|
||||
|
||||
&.is-bordered {
|
||||
.el-descriptions-item__cell {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.is-bordered) {
|
||||
.el-descriptions-item__cell {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include m(mini) {
|
||||
font-size: 12px;
|
||||
|
||||
&.is-bordered {
|
||||
.el-descriptions-item__cell {
|
||||
padding: 6px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.is-bordered) {
|
||||
.el-descriptions-item__cell {
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
&:not(.is-disabled)::before {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
|
@ -60,6 +60,11 @@
|
|||
outline-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
[disabled] {
|
||||
cursor: not-allowed;
|
||||
color: $--font-color-disabled-base;
|
||||
}
|
||||
}
|
||||
|
||||
@include b(dropdown-menu) {
|
||||
|
|
|
|||
|
|
@ -81,3 +81,6 @@
|
|||
@import "./skeleton.scss";
|
||||
@import "./skeleton-item.scss";
|
||||
@import "./empty.scss";
|
||||
@import "./descriptions.scss";
|
||||
@import "./descriptions-item.scss";
|
||||
@import "./result.scss";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@include b(result) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
padding: $--result-padding;
|
||||
|
||||
@include e(icon) {
|
||||
svg {
|
||||
width: $--result-icon-font-size;
|
||||
height: $--result-icon-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(title) {
|
||||
margin-top: $--result-title-margin-top;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: $--result-title-font-size;
|
||||
color: $--color-text-primary;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(subtitle) {
|
||||
margin-top: $--result-subtitle-margin-top;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: $--font-size-base;
|
||||
color: $--color-text-regular;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(extra) {
|
||||
margin-top: $--result-extra-margin-top;
|
||||
}
|
||||
|
||||
.icon-success {
|
||||
fill: $--result-success-color;
|
||||
}
|
||||
|
||||
.icon-error {
|
||||
fill: $--result-danger-color;
|
||||
}
|
||||
|
||||
.icon-info {
|
||||
fill: $--result-info-color;
|
||||
}
|
||||
|
||||
.icon-warning {
|
||||
fill: $--result-warning-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -13,6 +13,9 @@
|
|||
margin: 5px 0;
|
||||
|
||||
@include when(multiple) {
|
||||
& .el-select-dropdown__item {
|
||||
padding-right: 40px;
|
||||
}
|
||||
& .el-select-dropdown__item.selected {
|
||||
color: $--select-option-selected-font-color;
|
||||
background-color: $--select-dropdown-background;
|
||||
|
|
|
|||
|
|
@ -119,8 +119,9 @@
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.el-tag__close {
|
||||
margin-top: -2px;
|
||||
@include e(tags-text) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.el-tag {
|
||||
|
|
@ -128,12 +129,15 @@
|
|||
border-color: transparent;
|
||||
margin: 2px 0 2px 6px;
|
||||
background-color: #f0f2f5;
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
align-items: center;
|
||||
|
||||
&__close.el-icon-close {
|
||||
background-color: $--color-text-placeholder;
|
||||
right: -7px;
|
||||
top: 0;
|
||||
color: $--color-white;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: $--color-text-secondary;
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@
|
|||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
|
||||
th.gutter, td.gutter {
|
||||
.el-table__cell.gutter {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
}
|
||||
|
|
@ -111,13 +111,13 @@
|
|||
font-weight: 500;
|
||||
|
||||
&.is-group {
|
||||
th {
|
||||
th.el-table__cell {
|
||||
background: $--background-color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th, td {
|
||||
.el-table__cell {
|
||||
padding: 12px 0;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -149,21 +149,21 @@
|
|||
}
|
||||
|
||||
@include m(medium) {
|
||||
th, td {
|
||||
.el-table__cell {
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(small) {
|
||||
font-size: 12px;
|
||||
th, td {
|
||||
.el-table__cell {
|
||||
padding: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(mini) {
|
||||
font-size: 12px;
|
||||
th, td {
|
||||
.el-table__cell {
|
||||
padding: 6px 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -176,15 +176,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
th.is-leaf, td {
|
||||
th.el-table__cell.is-leaf,
|
||||
td.el-table__cell {
|
||||
border-bottom: $--table-border;
|
||||
}
|
||||
|
||||
th.is-sortable {
|
||||
th.el-table__cell.is-sortable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
th {
|
||||
th.el-table__cell {
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
background-color: $--table-header-background-color;
|
||||
|
|
@ -215,7 +216,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
td {
|
||||
td.el-table__cell {
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -280,7 +281,7 @@
|
|||
border-color: transparent;
|
||||
}
|
||||
|
||||
th, td {
|
||||
.el-table__cell {
|
||||
border-right: $--table-border;
|
||||
|
||||
&:first-child .cell {
|
||||
|
|
@ -288,12 +289,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
th.gutter:last-of-type {
|
||||
th.el-table__cell.gutter:last-of-type {
|
||||
border-bottom: $--table-border;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
& th {
|
||||
& th.el-table__cell {
|
||||
border-bottom: $--table-border;
|
||||
}
|
||||
}
|
||||
|
|
@ -356,7 +357,7 @@
|
|||
bottom: 0;
|
||||
z-index: 3;
|
||||
|
||||
& tbody td {
|
||||
& tbody td.el-table__cell {
|
||||
border-top: $--table-border;
|
||||
background-color: $--table-row-hover-background-color;
|
||||
color: $--table-font-color;
|
||||
|
|
@ -377,7 +378,7 @@
|
|||
|
||||
@include e(footer-wrapper) {
|
||||
margin-top: -1px;
|
||||
td {
|
||||
td.el-table__cell {
|
||||
border-top: $--table-border;
|
||||
}
|
||||
}
|
||||
|
|
@ -390,7 +391,7 @@
|
|||
@include e((header-wrapper, footer-wrapper)) {
|
||||
overflow: hidden;
|
||||
|
||||
& tbody td {
|
||||
& tbody td.el-table__cell {
|
||||
background-color: $--table-row-hover-background-color;
|
||||
color: $--table-font-color;
|
||||
}
|
||||
|
|
@ -481,11 +482,11 @@
|
|||
@include m(striped) {
|
||||
& .el-table__body {
|
||||
& tr.el-table__row--striped {
|
||||
td {
|
||||
td.el-table__cell {
|
||||
background: #FAFAFA;
|
||||
}
|
||||
|
||||
&.current-row td {
|
||||
&.current-row td.el-table__cell {
|
||||
background-color: $--table-current-row-background-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -496,14 +497,14 @@
|
|||
tr.hover-row {
|
||||
&, &.el-table__row--striped {
|
||||
&, &.current-row {
|
||||
> td {
|
||||
> td.el-table__cell {
|
||||
background-color: $--table-row-hover-background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tr.current-row > td {
|
||||
tr.current-row > td.el-table__cell {
|
||||
background-color: $--table-current-row-background-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -531,13 +532,13 @@
|
|||
}
|
||||
|
||||
@include m(enable-row-transition) {
|
||||
.el-table__body td {
|
||||
.el-table__body td.el-table__cell {
|
||||
transition: background-color .25s ease;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(enable-row-hover) {
|
||||
.el-table__body tr:hover > td {
|
||||
.el-table__body tr:hover > td.el-table__cell {
|
||||
background-color: $--table-row-hover-background-color;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue