Dialog 대화상자

모달 대화상자입니다. Vue2에는 Teleport가 없어 팝업 레이어 호스트는 mounted 시점에 body로 옮겨지고 (fixed 배치), 컴포넌트는 완전한 반응형 연결을 유지합니다. 마스크 클릭 / ESC / 닫기 버튼 / beforeClose로 닫기를 제어할 수 있고, 드래그와 스크롤 잠금을 지원합니다.

대화상자

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhButton type="primary" @click="basic = true">기본 대화상자</LhButton>
      <LhButton @click="center = true">position="center" 가운데</LhButton>
      <LhButton @click="bottom = true">position="bottom" 하단</LhButton>
      <LhButton @click="full = true">fullscreen 전체 화면</LhButton>
      <LhButton @click="drag = true">draggable 드래그 가능</LhButton>
      <LhButton @click="strict = true">마스크/Esc 닫기 비활성화</LhButton>
      <LhButton @click="guard = true">beforeClose 가로채기</LhButton>
      <LhButton @click="noClose = true">showClose=false</LhButton>
    </div>
    <LhDialog v-model="basic" title="제발" width="420px" :top="top" :z-index="2000">
      <p style="margin: 0">대화상자는 body에 마운트되며, 마스크와 콘텐츠 모두 fixed 배치입니다. top이 상단 거리를, zIndex가 쌓임 순서를 제어합니다.</p>
      <template #footer>
        <LhButton @click="basic = false">취소</LhButton>
        <LhButton type="primary" @click="basic = false">서명</LhButton>
      </template>
    </LhDialog>
    <LhDialog v-model="center" title="가운데 팝업" position="center" width="360px" center>
      <p style="margin: 0">position="center"가 수직 가운데를 맞추고, center가 제목과 하단 버튼을 가운데 정렬합니다.</p>
      <template #footer>
        <LhButton type="primary" @click="center = false">알겠습니다</LhButton>
      </template>
    </LhDialog>
    <LhDialog v-model="bottom" title="하단 팝업" position="bottom" width="480px">
      <p style="margin: 0">position="bottom"은 하단에 표시되며, 모바일 조작 패널에 적합합니다.</p>
    </LhDialog>
    <LhDialog v-model="full" title="전체 화면 보기" fullscreen>
      <p style="margin: 0">fullscreen은 전체 뷰포트를 채우고, 콘텐츠 영역은 남은 높이에 맞춥니다.</p>
      <template #footer>
        <LhButton type="primary" @click="full = false">닫기</LhButton>
      </template>
    </LhDialog>
    <LhDialog v-model="drag" title="제목 표시줄을 누르고 드래그" draggable width="420px">
      <p style="margin: 0">draggable을 켜면 제목 표시줄을 눌러 팝업을 드래그할 수 있습니다.</p>
    </LhDialog>
    <LhDialog
      v-model="strict"
      title="엄격 모드"
      width="400px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :lock-scroll="true"
    >
      <p style="margin: 0">closeOnClickModal / closeOnPressEscape를 모두 끄고, lockScroll이 페이지 스크롤을 잠가 버튼으로만 닫을 수 있습니다.</p>
      <template #footer>
        <LhButton type="primary" @click="strict = false">이 버튼만</LhButton>
      </template>
    </LhDialog>
    <LhDialog v-model="guard" title="닫기 전 가로채기" width="400px" :before-close="beforeClose">
      <p style="margin: 0">beforeClose가 닫기 동작을 가로채고, done()을 호출해야 실제로 닫힙니다 (여기서는 이중 확인을 시연).</p>
    </LhDialog>
    <LhDialog v-model="noClose" title="닫기 버튼 없음" width="360px" :show-close="false">
      <p style="margin: 0">showClose=false가 우측 상단 닫기 버튼을 숨깁니다.</p>
      <template #footer>
        <LhButton type="primary" @click="noClose = false">닫기</LhButton>
      </template>
    </LhDialog>
  </div>
</template>

<script>
export default {
  data: () => ({
    basic: false,
    center: false,
    bottom: false,
    full: false,
    drag: false,
    strict: false,
    guard: false,
    noClose: false,
    top: '15vh',
  }),
  methods: {
    beforeClose(done) {
      if (window.confirm('이 대화상자를 닫으시겠습니까?')) done()
    },
  },
}
</script>

Props

프로퍼티	설명	타입	기본값
v-model	표시/숨김 (model: modelValue/input. :visible.sync 외의 표준 v-model 사용법도 호환)	boolean	false
title	제목	string	''
width	너비	string \| number	'480px'
position	위치	'top' \| 'center' \| 'bottom'	'center'
center	제목과 하단 버튼을 가운데 정렬	boolean	false
fullscreen	전체 화면	boolean	false
showClose	닫기 버튼 표시	boolean	true
closeOnClickModal / closeOnPressEscape	마스크 / ESC 닫기	boolean	true
draggable	헤더 드래그 (뷰포트 경계 제약)	boolean	false
lockScroll	body 스크롤 잠금	boolean	true
beforeClose	닫기 전 가로채기, done() 호출 시 실제로 닫힘	(done) => void	—
top	상단 거리 (position=top일 때 적용)	string	'15vh'
zIndex / themeVars / bgPattern / sx	쌓임 순서와 테마 덮어쓰기	—	—

Events

이벤트	설명	콜백 매개변수
input	v-model 표시/숨김 동기화	boolean
open	열기 시작 (진입 전환)	—
opened	열기 완료 (전환 종료)	—
close	닫기 시작 (이탈 전환)	—
closed	닫기 완료 (전환 종료)	—

Slots

슬롯	설명
default	본문
header	사용자 정의 제목
footer	하단 조작 영역

메서드

메서드	설명
close()	대화상자 닫기
isVisible	현재 표시 여부 (defineExpose)