javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): el-loading spinner directive (#4133)

Browse Source
This commit is contained in:
Aex
2021-11-01 15:16:11 +08:00
committed by GitHub
parent 5a9b90b3aa
commit fa46dbd0b4
3 changed files with 14 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 |

5
docs/examples/loading/customization.vue
View File

@@ -2,7 +2,8 @@
<el-table
v-loading="loading"
element-loading-text="Loading..."
:element-loading-spinner="Loading"
:element-loading-spinner="svg"
element-loading-svg-view-box="-10, -10, 50, 50"
element-loading-background="rgba(0, 0, 0, 0.8)"
:data="tableData"
style="width: 100%"
@@ -27,12 +28,10 @@
<script lang="ts">
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',

11
packages/components/loading/src/createLoadingComponent.ts
View File

@@ -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]
),
]
),