Empty 빈 상태

데이터가 없을 때의 자리표시 표시입니다. 기본 슬롯으로 조작 버튼을 넣거나, 이미지 주소를 전달해 기본 일러스트를 교체할 수 있습니다.

빈 상태

<template>
  <div class="demo-col">
    <LhEmpty description="그림 기록 없음" />
    <LhEmpty>
      <template #default>
        <LhButton type="primary" @click="reload">다시 로딩</LhButton>
      </template>
    </LhEmpty>
    <p class="demo-note">description을 전달하지 않으면 언어 팩 기본 텍스트를 사용합니다. 아래는 사용자 정의 이미지 예시입니다.</p>
    <LhEmpty
      description="사용자 정의 이미지 주소"
      image="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='120'%3E%3Crect%20width='160'%20height='120'%20fill='%23e8e2d5'/%3E%3Cpath%20d='M0%2086%20Q40%2060%2080%2086%20T160%2086%20V120%20H0%20Z'%20fill='%23c9c2b2'/%3E%3Ctext%20x='50%'%20y='50'%20font-size='16'%20fill='%232b4c7c'%20text-anchor='middle'%20font-family='serif'%3E%E6%B0%B4%E5%A2%A8%E7%95%99%E7%99%BD%3C/text%3E%3C/svg%3E"
    />
  </div>
</template>

<script>
export default {
  methods: {
    reload() {
      alert('데모: 다시 로딩 트리거')
    },
  },
}
</script>

Props

프로퍼티	설명	타입	기본값
description	빈 상태 설명 텍스트 (미전달 시 언어 팩 empty.description 사용)	string	—
image	사용자 정의 이미지 URL (기본 인라인 일러스트 대체)	string	—
sx	sx 레이아웃 단축 프로퍼티	—	—

Slots

기본 슬롯: 설명 아래의 조작 영역 ("다시 로딩" 버튼 등).