Skip to content

Загрузка ​

Глобальный сервис загрузочной маски. Как и Message, использует паттерн точки монтирования.

Размещение точки монтирования ​

vue
<template>
  <lh-config-provider>
    <view><!-- Содержимое страницы --></view>
    <lh-loading />
  </lh-config-provider>
</template>

Вызов ​

ts
import { useLhLoading } from '@lh-ui/uniapp'

const loading = useLhLoading()

// show принимает объект опций или просто строку с текстом, возвращает handle
const handle = loading.show({ text: 'Загрузка...' })
handle.close()

// Закрыть все
loading.closeAll()

Без точки монтирования будет предупреждение

Как и у Message: если вызван useLhLoading(), а на странице нет <lh-loading />, в режиме разработки выдаётся явный console.error, без молчаливой деградации.

LhLoadingOptions ​

ПропОписаниеТипПо умолчанию
targetЦелевой узел (только на H5; на MP всегда полноэкранная маска)string—
textТекст загрузкиstring—
backgroundЦвет фоновой маскиstring—
lockБлокировка прокрутки (только на H5)booleanfalse
zIndexZ-index; если не передан, назначается по нарастающейnumber—

Методы ​

МетодОписаниеПараметры
showПоказывает загрузочную маску, возвращает handle ({ close })(options: LhLoadingOptions | string)
closeЗакрывает загрузку с указанным id(id: number)
closeAllЗакрывает все—

Отличия от версии для Vue3 ​

  • target на платформе Mini Program поддерживает только полноэкранную маску — в Mini Program нельзя выбрать произвольный узел для маски, в первом выпуске на стороне MP target игнорируется (поле сохранено и описано в документации).
  • lock работает только на H5; в Mini Program нет блокировки прокрутки body.
  • При наложении нескольких экземпляров useLhZIndex гарантирует, что более поздняя маска будет выше.