Cargando

Máscara de carga con dos formas de uso: el servicio LhLoading.show() (a pantalla completa o local; devuelve { close }), o la directiva v-loading colgada directamente sobre un elemento.

Máscara de carga

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhButton type="primary" @click="showFull">Máscara a pantalla completa (servicio)</LhButton>
      <LhButton @click="showLocal">Máscara local (servicio)</LhButton>
      <LhButton @click="toggleDirective">Directiva v-loading ({{ loading ? 'Desactivar' : 'Activar' }})</LhButton>
    </div>
    <div
      ref="panel"
      class="demo-note"
      v-loading="loading"
      style="
        position: relative;
        height: 140px;
        border: 1px dashed var(--lh-border-color, #d9d0c2);
        border-radius: 8px;
        margin: 0;
      "
    >
      <p style="padding: 12px; margin: 0">La máscara directiva se coloca sobre este elemento (position: relative lo aporta el estilo en línea).</p>
    </div>
    <p class="demo-note">
      LhLoading.show sin target es a pantalla completa; si se pasa target, se monta en el elemento indicado; la directiva v-loading se registra con Vue.use(LhLoading).
    </p>
  </div>
</template>

<script>
export default {
  data: () => ({
    loading: false,
  }),
  methods: {
    showFull() {
      const handle = LhLoading.show({ text: 'Renderizando en alta definición…' })
      setTimeout(() => handle.close(), 1500)
    },
    showLocal() {
      const handle = LhLoading.show({ target: this.$refs.panel, text: 'Carga local' })
      setTimeout(() => handle.close(), 1500)
    },
    toggleDirective() {
      this.loading = !this.loading
    },
  },
}
</script>

API de servicio

// Sin target, la máscara es a pantalla completa
const handle = LhLoading.show({ text: 'Renderizando…' })
setTimeout(() => handle.close(), 1500)

// Montar en el elemento indicado (el elemento necesita position: relative)
LhLoading.show({ target: el, text: 'Carga local', background: 'rgba(0,0,0,.5)' })

Vue.use(LhLoading) registra la directiva v-loading: <div v-loading="isLoading" />; el valor es false | string | LhLoadingOptions.

Loading Props

Props del componente de máscara (LhLoadingMask); las options de LhLoading.show pasan los campos con el mismo nombre:

Propiedad	Descripción	Tipo	Predeterminado
fullscreen	Si es a pantalla completa (true cuando el objetivo es body)	boolean	false
text	Texto de la indicación de carga (si no se pasa, se usa loading.text del paquete de idioma)	string	—
background	Color de fondo de la máscara (valor de background de CSS)	string	—
zIndex	Nivel de apilamiento	number	—
spinner	Si se muestra el icono giratorio (true por defecto)	boolean	true
sx	Propiedad de diseño rápido sx	—	—