Загрузка

Маска загрузки с двумя способами применения: сервисный 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>

Сервисный API

// Без 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); поля options у LhLoading.show пробрасываются с теми же именами:

Проп	Описание	Тип	По умолчанию
fullscreen	Полноэкранность (true, когда целевой элемент — body)	boolean	false
text	Текст подсказки о загрузке (если не передан, берётся loading.text из языкового пакета)	string	—
background	Цвет фона маски (значение CSS background)	string	—
zIndex	Уровень по z-оси	number	—
spinner	Показывать ли вращающуюся иконку (по умолчанию true)	boolean	true
sx	Проп sx для быстрого макета	—	—