Loading

Loading (로딩)

데이터를 불러오는 동안 애니메이션을 보여주는 컴포넌트예요.

출처: 문서

본문

컨테이너 안에서 로딩 (Loading inside a container)

데이터를 불러오는 동안 컨테이너(예: 테이블) 안에서 애니메이션을 표시해요. Element Plus는 로딩을 호출하는 두 가지 방법을 제공해요: 디렉티브(directive)와 서비스(service) 방식이에요. 커스텀 디렉티브 v-loading에는 boolean 값을 바인딩하기만 하면 돼요. 기본적으로 로딩 마스크는 디렉티브가 사용된 요소에 붙어요. body 한정자를 추가하면 마스크가 body 요소에 붙게 돼요.

커스터마이징 (Customization)

로딩 텍스트, 로딩 스피너, 배경색을 커스터마이징할 수 있어요. v-loading이 바인딩된 요소에 element-loading-text 속성을 추가하면 그 값이 스피너 아래에 표시돼요. 마찬가지로 element-loading-spinner / element-loading-svg와 element-loading-background 속성을 각각 사용해서 svg 아이콘, 배경색 값, 로딩 아이콘을 설정할 수 있어요.

WARNING element-loading-spinner / element-loading-svg 속성이 HTML 조각을 지원하기는 하지만, 웹사이트에서 임의의 HTML을 동적으로 렌더링하는 것은 XSS 공격을 유발하기 쉬워서 매우 위험해요. element-loading-spinner / element-loading-svg의 내용이 신뢰할 수 있는지 반드시 확인하세요. 사용자가 제출한 내용을 이 속성에 절대 할당하지 마세요.

전체 화면 로딩 (Full screen loading)

데이터를 불러오는 동안 전체 화면 애니메이션을 보여줘요. 디렉티브로 사용할 때 전체 화면 로딩은 fullscreen 한정자가 필요하고, body에 붙게 돼요. 이 경우 body의 스크롤을 비활성화하고 싶다면 lock 한정자를 추가하면 돼요. 서비스로 사용할 때는 로딩이 기본적으로 전체 화면이 돼요.

서비스 (Service)

로딩을 서비스로도 호출할 수 있어요. Loading 서비스를 임포트합니다:

import { ElLoading } from 'element-plus'

호출해요:

ElLoading.service(options)

매개변수 options는 Loading의 설정이고, 자세한 내용은 아래 표에서 확인할 수 있어요. LoadingService는 Loading 인스턴스를 반환하고, 이 인스턴스의 close 메서드를 호출해서 닫을 수 있어요:

const loadingInstance = ElLoading.service(options)
nextTick(() => {
  // Loading should be closed asynchronously
  loadingInstance.close()
})

이 경우 전체 화면 로딩은 싱글톤(singleton)이에요. 기존 전체 화면 로딩이 닫히기 전에 새 전체 화면 로딩을 호출하면 실제로 새 로딩 인스턴스를 만들지 않고 기존 인스턴스를 반환해요:

const loadingInstance1 = ElLoading.service({ fullscreen: true })
const loadingInstance2 = ElLoading.service({ fullscreen: true })
console.log(loadingInstance1 === loadingInstance2) // true

둘 중 아무 인스턴스에서나 close 메서드를 호출하면 이 전체 화면 로딩을 닫을 수 있어요. Element Plus를 전체 임포트하면 app.config.globalProperties에 전역 메서드 $loading이 등록돼요. this.$loading(options)처럼 호출할 수 있고, 역시 Loading 인스턴스를 반환해요.

앱 컨텍스트 상속 (App context inheritance) 2.9.10

이제 로딩 생성자의 두 번째 매개변수로 컨텍스트를 받아서 현재 앱의 컨텍스트를 주입하고 앱의 모든 속성을 상속받을 수 있어요. 이렇게 사용할 수 있어요:

TIP ElLoading 컴포넌트를 전역 등록했다면 앱 컨텍스트를 자동으로 상속받아요.

import { getCurrentInstance } from 'vue'
import { ElLoading } from 'element-plus'

// in your setup method
const { appContext } = getCurrentInstance()!
ElLoading.service({}, appContext)

API

Options

Directives

더 알아보기 (Learn more)

• Drawer 컴포넌트 — Drawer
• Message 컴포넌트 — 전역 메시지
• Message Box 컴포넌트 — 메시지 박스
• Element Plus 시작하기 — 프로젝트 설정