Drawer 서랍

화면 가장자리에서 미끄러져 나오는 팝업 레이어로, 상세, 필터 등 보조 조작에 적합합니다. 네 방향, 크기와 마스크 동작을 제어할 수 있습니다.

서랍

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhButton type="primary" @click="open('right')">right 우측</LhButton>
      <LhButton @click="open('left')">left 좌측</LhButton>
      <LhButton @click="open('top')">top 상단</LhButton>
      <LhButton @click="open('bottom')">bottom 하단</LhButton>
      <LhButton @click="openNoMask">마스크로 닫기 안 함</LhButton>
    </div>
    <LhDrawer v-model="visible" :title="title" :direction="direction" :size="size">
      <p style="margin: 0 0 8px">direction이 방향을, size가 크기 (숫자 px 또는 백분율 문자열) 를 제어합니다.</p>
      <p class="demo-note">하단 버튼으로 lockScroll / closeOnEsc 등의 조합을 트리거할 수 있습니다.</p>
      <template #footer>
        <LhButton @click="visible = false">취소</LhButton>
        <LhButton type="primary" @click="visible = false">저장</LhButton>
      </template>
    </LhDrawer>
    <LhDrawer
      v-model="noMask"
      title="마스크 클릭으로 닫기 안 함"
      direction="right"
      size="30%"
      :mask-closable="false"
      :show-close="true"
      :lock-scroll="true"
      :close-on-esc="false"
    >
      <p style="margin: 0">maskClosable=false, closeOnEsc=false이며 버튼이나 닫기 아이콘으로만 닫을 수 있습니다.</p>
      <template #footer>
        <LhButton type="primary" @click="noMask = false">닫기</LhButton>
      </template>
    </LhDrawer>
  </div>
</template>

<script>
export default {
  data: () => ({
    visible: false,
    noMask: false,
    title: '우측 서랍',
    direction: 'right',
    size: '360px',
  }),
  methods: {
    open(dir) {
      this.direction = dir
      this.title = `${dir} 서랍`
      this.size = dir === 'top' || dir === 'bottom' ? '30%' : '360px'
      this.visible = true
    },
    openNoMask() {
      this.noMask = true
    },
  },
}
</script>

Props

프로퍼티	설명	타입	기본값
v-model	표시 여부 (제어형 modelValue prop)	boolean	false
title	제목	string	—
direction	방향	'right' \| 'left' \| 'top' \| 'bottom'	'right'
size	크기: 숫자는 px, 문자열은 백분율 지원	string \| number	—
maskClosable	마스크 클릭 시 닫을지 여부	boolean	true
showClose	닫기 버튼 표시 여부	boolean	true
teleportTarget	팝업 레이어 마운트 대상 (선택자 또는 요소, 기본값 body. 2.7에는 Teleport가 없어 host 이동으로 구현)	string \| HTMLElement	—
lockScroll	페이지 스크롤 잠금 여부	boolean	true
closeOnEsc	Esc 닫기 응답 여부	boolean	true
themeVars	컴포넌트 수준 테마 변수, ConfigProvider 설정 덮어쓰기	Record<string, string>	—
bgPattern	컴포넌트 수준 배경 무늬, ConfigProvider 설정 덮어쓰기	string	—
sx	sx 레이아웃 단축 프로퍼티 (패널에 적용)	—	—

Slots

슬롯	설명
header	제목 영역 (기본 title prop 사용)
default	서랍 본문
footer	하단 버튼 영역