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	전체 화면 여부 (대상이 body일 때 true)	boolean	false
text	로딩 안내 문구 (미전달 시 언어 팩 loading.text 사용)	string	—
background	오버레이 배경색 (CSS background 값)	string	—
zIndex	쌓임 순서	number	—
spinner	회전 아이콘 표시 여부 (기본 true)	boolean	true
sx	sx 레이아웃 단축 속성	—	—