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>

サービス 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）の props です。LhLoading.show の options が同名フィールドを透過します。

プロパティ	説明	型	デフォルト値
fullscreen	全画面かどうか（target が body のとき true）	boolean	false
text	読み込みのヒントテキスト（渡さないときは言語パッケージの loading.text を使用）	string	—
background	オーバーレイの背景色（CSS background 値）	string	—
zIndex	重ね合わせの順序	number	—
spinner	回転アイコンを表示するかどうか（デフォルトは true）	boolean	true
sx	sx によるレイアウト省略記法	—	—