Chargement

Voile de chargement, deux usages : le service LhLoading.show() (plein écran ou ciblé, renvoie { close }), ou la directive v-loading posée directement sur un élément.

Voile de chargement

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhButton type="primary" @click="showFull">Voile plein écran (service)</LhButton>
      <LhButton @click="showLocal">Voile localisé (service)</LhButton>
      <LhButton @click="toggleDirective">Directive v-loading ({{ loading ? 'Désactiver' : 'Activer' }})</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">Le voile directive est posé sur cet élément (position: relative est fourni par le style en ligne).</p>
    </div>
    <p class="demo-note">
      LhLoading.show sans target couvre tout l'écran ; avec target, le voile s'attache à l'élément indiqué ; la directive v-loading est enregistrée via Vue.use(LhLoading).
    </p>
  </div>
</template>

<script>
export default {
  data: () => ({
    loading: false,
  }),
  methods: {
    showFull() {
      const handle = LhLoading.show({ text: 'Rendu haute définition…' })
      setTimeout(() => handle.close(), 1500)
    },
    showLocal() {
      const handle = LhLoading.show({ target: this.$refs.panel, text: 'Chargement local' })
      setTimeout(() => handle.close(), 1500)
    },
    toggleDirective() {
      this.loading = !this.loading
    },
  },
}
</script>

API de service

// Sans target, le voile couvre tout l'écran
const handle = LhLoading.show({ text: 'Rendu en cours…' })
setTimeout(() => handle.close(), 1500)

// Attaché à un élément précis (l'élément doit être en position: relative)
LhLoading.show({ target: el, text: 'Chargement local', background: 'rgba(0,0,0,.5)' })

Vue.use(LhLoading) enregistre la directive v-loading : <div v-loading="isLoading" />, dont la valeur est false | string | LhLoadingOptions.

Loading Props

Props du composant de voile (LhLoadingMask) ; les options de LhLoading.show transmettent les champs de même nom :

Propriété	Description	Type	Valeur par défaut
fullscreen	Plein écran (true lorsque la cible est body)	boolean	false
text	Texte du voile (pack de langue loading.text si non transmis)	string	—
background	Couleur de fond du voile (valeur CSS background)	string	—
zIndex	Niveau d'empilement	number	—
spinner	Affiche l'icône rotative (true par défaut)	boolean	true
sx	Raccourci de mise en page sx	—	—