تحميل Loading

قناع التحميل، بطريقتين: خدمة LhLoading.show() (ملء الشاشة أو محلي، تُعيد { close })، أو توجيه v-loading يُعلَّق مباشرة على العنصر.

قناع التحميل

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhButton type="primary" @click="showFull">قناع ملء الشاشة (خدمة)</LhButton>
      <LhButton @click="showLocal">قناع محلي (خدمة)</LhButton>
      <LhButton @click="toggleDirective">توجيه v-loading ({{ loading ? 'إيقاف' : 'تشغيل' }})</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">يُعلَّق القناع التوجيهي على هذا العنصر (position: relative يأتي من التنسيق المضمَّن).</p>
    </div>
    <p class="demo-note">
      LhLoading.show بدون تمرير target يكون ملء الشاشة؛ وبتمرير target يُعلَّق على العنصر المحدد؛ ويُسجَّل توجيه v-loading عبر Vue.use(LhLoading).
    </p>
  </div>
</template>

<script>
export default {
  data: () => ({
    loading: false,
  }),
  methods: {
    showFull() {
      const handle = LhLoading.show({ text: 'جارٍ العرض عالي الدقة…' })
      setTimeout(() => handle.close(), 1500)
    },
    showLocal() {
      const handle = LhLoading.show({ target: this.$refs.panel, text: 'تحميل محلي' })
      setTimeout(() => handle.close(), 1500)
    },
    toggleDirective() {
      this.loading = !this.loading
    },
  },
}
</script>

واجهة الخدمة

// بدون تمرير target يكون القناع ملء الشاشة
const handle = LhLoading.show({ text: 'جارٍ العرض…' })
setTimeout(() => handle.close(), 1500)

// يُعلَّق على عنصر محدد (يجب أن يكون العنصر position: relative)
LhLoading.show({ target: el, text: 'تحميل محلي', background: 'rgba(0,0,0,.5)' })

يُسجِّل Vue.use(LhLoading) توجيه v-loading: <div v-loading="isLoading" />، وقيمته false | string | LhLoadingOptions.

Loading Props

خصائص مكوّن القناع (LhLoadingMask)، وتُمرَّر الحقول التي تحمل الأسماء نفسها كخيارات لـ LhLoading.show:

خاصية	الوصف	النوع	الافتراضي
fullscreen	هل هو ملء الشاشة (true عندما الهدف body)	boolean	false
text	نص تلميح التحميل (يُؤخَذ من حزمة اللغة loading.text عند غيابه)	string	—
background	لون خلفية القناع (قيمة CSS background)	string	—
zIndex	مستوى الطبقة	number	—
spinner	هل تُظهر أيقونة الدوران (true افتراضياً)	boolean	true
sx	خصائص تخطيط سريعة عبر sx	—	—