Popconfirm 확인 풍선

재확인용 가벼운 풍선으로, 대화상자형 확인 상호작용을 대체합니다. 세 가지 어조, 버튼 맞춤 설정이 가능합니다.

확인 풍선

<template>
  <div class="demo-col" style="padding: 40px 0">
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhPopconfirm title="이 기록을 삭제하시겠습니까?" @confirm="onOk">
        <LhButton type="danger">삭제</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="경고 어조" type="warning" placement="top" @confirm="onOk">
        <LhButton type="warning">warning</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="위험 어조" type="danger" placement="right" @confirm="onOk">
        <LhButton type="danger">danger 우측</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="hover 트리거" trigger="hover" placement="bottom" @confirm="onOk">
        <LhButton>hover 하단</LhButton>
      </LhPopconfirm>
    </div>
    <p class="demo-note">버튼 문구와 유형 맞춤 설정 / 아이콘 없음 / 엄격한 배치</p>
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhPopconfirm
        title="버튼 맞춤 설정"
        confirm-text="확인"
        cancel-text="다시 생각해 보기"
        confirm-button-type="primary"
        placement="left"
        @confirm="onOk"
      >
        <LhButton>버튼 맞춤 설정</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="어조 아이콘 없음" :show-icon="false" placement="top" @confirm="onOk">
        <LhButton>showIcon=false</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="top에 엄격하게 배치" placement="top" :flip="false" @confirm="onOk">
        <LhButton>flip=false</LhButton>
      </LhPopconfirm>
      <LhPopconfirm title="비활성화" disabled>
        <LhButton disabled>disabled</LhButton>
      </LhPopconfirm>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    onOk() {
      LhMessage.success('확인되었습니다')
    },
  },
}
</script>

Props

프로퍼티	설명	타입	기본값
type	확인 어조	'info' \| 'warning' \| 'danger'	'info'
placement	표시 위치	'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'	'top'
flip	주축 방향 공간이 부족할 때 방향을 반전할지 여부 (기본 활성화). false로 설정하면 placement에 엄격하게 배치되며, 뷰포트 밖으로 넘칠 수 있음	boolean	true
trigger	트리거 방식	'click' \| 'hover' \| 'focus' \| 'manual'	'click'
title	확인 내용 (content 슬롯 사용 가능)	string	—
confirmText	확인 버튼 문구 (미전달 시 언어 팩 popconfirm.confirm 사용)	string	—
cancelText	취소 버튼 문구 (미전달 시 언어 팩 popconfirm.cancel 사용)	string	—
confirmButtonType	확인 버튼 유형	'default' \| 'primary'	'primary'
visible	수동으로 제어하는 표시 상태 (:visible.sync)	boolean	—
disabled	비활성화 여부	boolean	false
showIcon	어조 아이콘 표시 여부	boolean	true
popperClass	팝업 레이어 맞춤 클래스명	string	—
teleportTarget	팝업 레이어 마운트 대상 (선택자 또는 요소, 기본 body. 2.7은 Teleport가 없어 host 이동으로 구현)	string \| HTMLElement	—
showAfter	표시 지연 시간(ms)	number	—
hideAfter	숨김 지연 시간(ms)	number	—
themeVars	컴포넌트 수준 테마 변수, ConfigProvider 설정 덮어쓰기	Record<string, string>	—
bgPattern	컴포넌트 수준 배경 문양, ConfigProvider 설정 덮어쓰기	string	—
sx	sx 레이아웃 단축 속성 (트리거 루트 요소에 적용)	—	—

이벤트

이벤트	설명	콜백 매개변수
confirm	확인 버튼 클릭	—
cancel	취소 버튼 클릭	—

슬롯

슬롯	설명
default	트리거
content	확인 내용 (기본적으로 title prop 사용)