Loading

Se muestra una animación mientras se cargan los datos.

Cargando dentro de un contenedor

Muestra una animación en un contenedor (como en una tabla) mientras se cargan los datos.

Personalización

Puede personalizar el texto de carga, spinner de carga y color de fondo.

WARNING

Aunque los atributos element-loading / element-loading-svg admiten fragmentos HTML entrantes, es muy peligroso representar dinámicamente HTML arbitrario en el sitio web porque es fácil causar ataques XSS. Por favor, asegúrese de que el contenido de element-loading-spinner / element-loading-svg es de confianza. Nunca asigne contenido enviado por el usuario a los atributos element-loading-spinner / element-loading-svg.

Cargando a pantalla completa

Muestra una animación de pantalla completa mientras se cargan los datos.

Servicio

Puede invocar el componente como un servicio. Importe el servicio:

import { ElLoading } from 'element-plus'

Invocarlo:

ElLoading.service(options)

El parámetro options es la configuración del componente, y estos detalles pueden ser encontrados en la siguiente tabla. LoadingService devuelve una instancia del componente, y puede cerrarlo invocando el método close:

const loadingInstance = ElLoading.service(options)
nextTick(() => {
  // Loading should be closed asynchronously
  loadingInstance.close()
})

Tenga en cuenta que, en este caso, el componente a pantalla completa es una instancia única. Si un nuevo componente de pantalla completa es invocado antes de que se cierre la existente, se devolverá la instancia existente en lugar de crear la otra instancia:

const loadingInstance1 = ElLoading.service({ fullscreen: true })
const loadingInstance2 = ElLoading.service({ fullscreen: true })
console.log(loadingInstance1 === loadingInstance2) // true

Llamar al método close en cualquiera de ellas puede cerrarlo.

Si Element Plus es importado completamente, un método global $loading puede ser registrado en app.config.globalProperties. Puede invocarlo como esto: this.$loading(options), y también devuelve una instancia del componente.

API

Opciones

Nombre	Descripción	Tipo	Por defecto
target	el nodo del DOM que el componente debe cubrir. Acepta un objecto DOM o una cadena. Si está es una cadena, este será pasado a `document.querySelector` para obtener el correspondiente nodo del DOM	`string` / `HTMLElement`	document.body
body	igual que el modificador `body` de `v-loading`	`boolean`	false
fullscreen	igual que el modificador `fullscreen` de `v-loading`	`boolean`	true
lock	igual que el modificador `lock` de `v-loading`	`boolean`	false
text	texto de carga que se muestra debajo del spinner	`string`	—
spinner	nombre de clase del spinner personalizado	`string`	—
background	color de fondo de la máscara	`string`	—
customClass	nombre de clase personalizada para el componente	`string`	—

Directivas

Nombre	Descripción	Tipo
v-loading	se muestra una animación mientras se cargan los datos	`boolean` / `Options`
element-loading-text	texto de carga que se muestra debajo del spinner	`string`
element-loading-spinner	icono del spinner personalizado	`string`
element-loading-svg	icono del spinner personalizado (igual que element-loading-spinner)	`string`
element-loading-background	color de fondo de la máscara	`string`