mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-11-21 01:02:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [loading] replenish loading attributes (#17174)

Browse Source 
* docs: replenish loading attributes

* fix: format md with prettier

* docs: redo `element-loading-background`

* feat(components): [loading] replenish loading attributes

* docs: add version tag

* Update loading.md
This commit is contained in:
知晓同丶 2024-07-22 08:08:43 +08:00 committed by GitHub
parent 9a9afd4734
commit 033867f919
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 25 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
docs/en-US/component/loading.md
View File

@ -83,23 +83,29 @@ If Element Plus is imported entirely, a globally method `$loading` will be regis
### Options
| Name | Description | Type | Default |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- | ------------- |
| target | the DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to `document.querySelector` to get the corresponding DOM node | ^[string] / ^[HTMLElement] | document.body |
| body | same as the `body` modifier of `v-loading` | ^[boolean] | false |
| fullscreen | same as the `fullscreen` modifier of `v-loading` | ^[boolean] | true |
| lock | same as the `lock` modifier of `v-loading` | ^[boolean] | false |
| text | loading text that displays under the spinner | ^[string] | — |
| spinner | class name of the custom spinner | ^[string] | — |
| background | background color of the mask | ^[string] | — |
| customClass | custom class name for Loading | ^[string] | — |
| Name | Description | Type | Default |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- | ------------- |
| target | the DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to `document.querySelector` to get the corresponding DOM node | ^[string] / ^[HTMLElement] | document.body |
| body | same as the `body` modifier of `v-loading` | ^[boolean] | false |
| fullscreen | same as the `fullscreen` modifier of `v-loading` | ^[boolean] | true |
| lock | same as the `lock` modifier of `v-loading` | ^[boolean] | false |
| text | loading text that displays under the spinner | ^[string] | — |
| spinner | class name of the custom spinner | ^[string] | — |
| background | background color of the mask | ^[string] | — |
| customClass | custom class name for loading | ^[string] | — |
| svg | custom SVG element to override the default loading spinner | ^[string] | — |
| svgViewBox | sets the viewBox attribute for loading svg element | ^[string] | — |
| beforeClose ^(2.7.8) | Function executed before loading attempts to close. If this function returns false, the closing process will be aborted. Otherwise, the loading will close. | ^[Function]`() => boolean` | — |
| closed ^(2.7.8) | Function triggered after loading has completely closed | ^[Function]`() => void` | — |
### Directives
| Name | Description | Type |
| -------------------------- | ------------------------------------------------------------ | ----------------------- |
| v-loading | show animation while loading data | ^[boolean] / ^[Options] |
| element-loading-text | loading text that displays under the spinner | ^[string] |
| element-loading-spinner | icon of the custom spinner | ^[string] |
| element-loading-svg | icon of the custom spinner (same as element-loading-spinner) | ^[string] |
| element-loading-background | background color of the mask | ^[string] |
| Name | Description | Type |
| ---------------------------- | ------------------------------------------------------------ | ------------------------------ |
| v-loading | show animation while loading data | ^[boolean] / ^[LoadingOptions] |
| element-loading-text | loading text that displays under the spinner | ^[string] |
| element-loading-spinner | icon of the custom spinner | ^[string] |
| element-loading-svg | icon of the custom spinner (same as element-loading-spinner) | ^[string] |
| element-loading-svg-view-box | sets the viewBox attribute for loading svg element | ^[string] |
| element-loading-background | background color of the mask | ^[string] |
| element-loading-custom-class | custom class name for loading | ^[string] |

2
packages/components/loading/src/service.ts
View File

@ -89,6 +89,8 @@ const resolveOptions = (options: LoadingOptions): LoadingOptionsResolved => {
lock: options.lock ?? false,
customClass: options.customClass || '',
visible: options.visible ?? true,
beforeClose: options.beforeClose,
closed: options.closed,
target,
}
}