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

docs(components): [loading] (#12296)

Browse Source
This commit is contained in:
Xc 2023-04-07 00:45:56 +08:00 committed by GitHub
parent f0bbeb3a4d
commit ff3b7b5b43
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -79,25 +79,27 @@ Calling the `close` method on any one of them can close this full screen Loading
If Element Plus is imported entirely, a globally method `$loading` will be registered to `app.config.globalProperties`. You can invoke it like this: `this.$loading(options)`, and it also returns a Loading instance.
## Options
## API
| Attribute | Description | Type | Accepted Values | 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 | object/string | — | 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 | — | — |
| custom-class | custom class name for Loading | string | — | — |
### Options
## Directives
| 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 |
| -------------------------- | ------------------------------------------------------------ | ------- |
| v-loading | show animation while loading data | boolean |
| 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 |
### 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] |

24
packages/components/loading/src/types.ts
View File

@ -2,13 +2,31 @@ import type { MaybeRef } from '@vueuse/core'
export type LoadingOptionsResolved = {
parent: LoadingParentElement
/**
* @description background color of the mask
*/
background: MaybeRef<string>
svg: MaybeRef<string>
svgViewBox: MaybeRef<string>
/**
* @description class name of the custom spinner
*/
spinner: MaybeRef<boolean | string>
/**
* @description loading text that displays under the spinner
*/
text: MaybeRef<string>
/**
* @description same as the `fullscreen` modifier of `v-loading`
*/
fullscreen: boolean
/**
* @description same as the `lock` modifier of `v-loading`
*/
lock: boolean
/**
* @description custom class name for Loading
*/
customClass: MaybeRef<string>
visible: boolean
target: HTMLElement
@ -17,7 +35,13 @@ export type LoadingOptionsResolved = {
}
export type LoadingOptions = Partial<
Omit<LoadingOptionsResolved, 'parent' | 'target'> & {
/**
* @description the DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to `document.querySelector` to get the corresponding DOM node
*/
target: HTMLElement | string
/**
* @description same as the `body` modifier of `v-loading`
*/
body: boolean
}
>