From 033867f9199d1f6f2d41a3a3233b3d9d76bc05d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=9F=A5=E6=99=93=E5=90=8C=E4=B8=B6?= Date: Mon, 22 Jul 2024 08:08:43 +0800 Subject: [PATCH] feat(components): [loading] replenish loading attributes (#17174) * 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 --- docs/en-US/component/loading.md | 40 +++++++++++++--------- packages/components/loading/src/service.ts | 2 ++ 2 files changed, 25 insertions(+), 17 deletions(-) diff --git a/docs/en-US/component/loading.md b/docs/en-US/component/loading.md index a8359d632a..299e4956d2 100644 --- a/docs/en-US/component/loading.md +++ b/docs/en-US/component/loading.md @@ -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] | diff --git a/packages/components/loading/src/service.ts b/packages/components/loading/src/service.ts index cb4080d125..b784891d98 100644 --- a/packages/components/loading/src/service.ts +++ b/packages/components/loading/src/service.ts @@ -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, } }