From fa46dbd0b4e0f4abe29c9c2445ab735b6224d7be Mon Sep 17 00:00:00 2001 From: Aex Date: Mon, 1 Nov 2021 15:16:11 +0800 Subject: [PATCH] fix(components): el-loading spinner directive (#4133) --- docs/en-US/component/loading.md | 17 +++++++++-------- docs/examples/loading/customization.vue | 5 ++--- .../loading/src/createLoadingComponent.ts | 11 +++-------- 3 files changed, 14 insertions(+), 19 deletions(-) diff --git a/docs/en-US/component/loading.md b/docs/en-US/component/loading.md index 813e8ea783..6ba6b1fff6 100644 --- a/docs/en-US/component/loading.md +++ b/docs/en-US/component/loading.md @@ -21,7 +21,7 @@ loading/basic You can customize loading text, loading spinner and background color. -:::demo Add attribute `element-loading-text` to the element on which `v-loading` is bound, and its value will be displayed under the spinner. Similarly, the `element-loading-spinner`, `element-loading-background`, and `element-loading-svg` attributes are used to set the icon component, background color value, and loading icon, respectively. +:::demo Add attribute `element-loading-text` to the element on which `v-loading` is bound, and its value will be displayed under the spinner. Similarly, the `element-loading-spinner / element-loading-svg` and `element-loading-background` attributes are used to set the svg icon, background color value, and loading icon, respectively. loading/customization @@ -29,7 +29,7 @@ loading/customization :::warning -Although the `element-loading-svg` attribute supports incoming HTML fragments, it is very dangerous to dynamically render arbitrary HTML on the website, because it is easy to cause [XSS attack](https://en.wikipedia.org/wiki/Cross-site_scripting). Please make sure that the content of `element-loading-svg` is trustworthy. **Never** assign user-submitted content to the `element-loading-svg` attribute. +Although the `element-loading-spinner / element-loading-svg` attribute supports incoming HTML fragments, it is very dangerous to dynamically render arbitrary HTML on the website, because it is easy to cause [XSS attack](https://en.wikipedia.org/wiki/Cross-site_scripting). Please make sure that the content of `element-loading-spinner / element-loading-svg` is trustworthy. **Never** assign user-submitted content to the `element-loading-spinner / element-loading-svg` attribute. ::: @@ -94,9 +94,10 @@ If Element Plus is imported entirely, a globally method `$loading` will be regis ## Directives -| 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 compontent of the custom spinner | string / Component | -| element-loading-background | background color of the mask | 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 | diff --git a/docs/examples/loading/customization.vue b/docs/examples/loading/customization.vue index 9e93323f05..62e1995286 100644 --- a/docs/examples/loading/customization.vue +++ b/docs/examples/loading/customization.vue @@ -2,7 +2,8 @@ import { defineComponent, reactive, toRefs } from 'vue' -import { Loading } from '@element-plus/icons' export default defineComponent({ setup() { const state = reactive({ - Loading, tableData: [ { date: '2016-05-02', diff --git a/packages/components/loading/src/createLoadingComponent.ts b/packages/components/loading/src/createLoadingComponent.ts index 79ca210875..e85a73999a 100644 --- a/packages/components/loading/src/createLoadingComponent.ts +++ b/packages/components/loading/src/createLoadingComponent.ts @@ -11,7 +11,6 @@ import { withDirectives, } from 'vue' import { removeClass } from '@element-plus/utils/dom' -import ElIcon from '@element-plus/components/icon' import type { VNode } from 'vue' import type { Nullable } from '@element-plus/utils/types' @@ -94,12 +93,13 @@ export function createLoadingComponent({ return componentSetupConfig }, render() { + const svg = this.spinner || this.svg const spinner = h( 'svg', { class: 'circular', viewBox: this.svgViewBox ? this.svgViewBox : '25 25 50 50', - ...(this.svg ? { innerHTML: this.svg } : {}), + ...(svg ? { innerHTML: svg } : {}), }, [ h('circle', { @@ -112,8 +112,6 @@ export function createLoadingComponent({ ] ) - const noSpinner = h(ElIcon, {}, () => [this.spinner]) - const spinnerText = h('p', { class: 'el-loading-text' }, [this.text]) return h( @@ -143,10 +141,7 @@ export function createLoadingComponent({ { class: 'el-loading-spinner', }, - [ - !this.spinner ? spinner : noSpinner, - this.text ? spinnerText : null, - ] + [spinner, this.text ? spinnerText : null] ), ] ),