Popconfirm 확인 풍선

가벼운 이중 확인: 트리거 근처에 확인 풍선을 띄우며, 대화상자를 열 필요가 없습니다. 시맨틱은 차단형 확인(role="alertdialog")입니다: 열리면 포커스가 '확인' 버튼에 놓이고, Tab이 두 버튼 사이를 순환하며, Escape는 취소로 간주합니다.

기본 사용법

vue

<template>
  <LhPopconfirm title="이 기록을 삭제하시겠습니까?" @confirm="onConfirm" @cancel="onCancel">
    <LhButton type="danger">삭제</LhButton>
  </LhPopconfirm>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const action = ref('')
function onConfirm() {
  action.value = '확인됨'
}
function onCancel() {
  action.value = '취소됨'
}
const pcVisible = ref(false)
</script>

vue

<script>
export default {
  data() {
    return { action: '', pcVisible: false }
  },
  methods: {
    onConfirm() {
      this.action = '확인됨'
    },
    onCancel() {
      this.action = '취소됨'
    },
  },
}
</script>

<template>
  <LhPopconfirm title="이 기록을 삭제하시겠습니까?" @confirm="onConfirm" @cancel="onCancel">
    <LhButton type="danger">삭제</LhButton>
  </LhPopconfirm>
</template>

세 가지 어조

vue

<script setup lang="ts">
</script>

<template>
  <!-- 정보 어조 -->
  <LhPopconfirm type="info" title="이 기록의 접속 로그를 보시겠습니까?">
    <LhButton>정보</LhButton>
  </LhPopconfirm>
  <!-- 경고 어조 -->
  <LhPopconfirm type="warning" title="이 작업은 모든 멤버에게 알립니다.">
    <LhButton type="warning">경고</LhButton>
  </LhPopconfirm>
  <!-- 위험 어조 -->
  <LhPopconfirm type="danger" title="삭제 후 복구할 수 없습니다.">
    <LhButton type="danger">위험</LhButton>
  </LhPopconfirm>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- 정보 어조 -->
  <LhPopconfirm type="info" title="이 기록의 접속 로그를 보시겠습니까?">
    <LhButton>정보</LhButton>
  </LhPopconfirm>
  <!-- 경고 어조 -->
  <LhPopconfirm type="warning" title="이 작업은 모든 멤버에게 알립니다.">
    <LhButton type="warning">경고</LhButton>
  </LhPopconfirm>
  <!-- 위험 어조 -->
  <LhPopconfirm type="danger" title="삭제 후 복구할 수 없습니다.">
    <LhButton type="danger">위험</LhButton>
  </LhPopconfirm>
</template>

커스텀 문구와 위치

vue

<script setup lang="ts">
</script>

<template>
  <!-- 커스텀 문구와 위치 -->
  <LhPopconfirm
    title="보관 후 휴지통에서 복구할 수 있습니다."
    confirm-text="보관"
    cancel-text="다시 생각해 보기"
    placement="right"
  >
    <LhButton>커스텀 문구</LhButton>
  </LhPopconfirm>
  <!-- 마우스 올림 트리거 -->
  <LhPopconfirm title="마우스를 올리면 확인됩니다." trigger="hover" :show-after="0" placement="bottom">
    <LhButton>마우스 올림 트리거</LhButton>
  </LhPopconfirm>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- 커스텀 문구와 위치 -->
  <LhPopconfirm
    title="보관 후 휴지통에서 복구할 수 있습니다."
    confirm-text="보관"
    cancel-text="다시 생각해 보기"
    placement="right"
  >
    <LhButton>커스텀 문구</LhButton>
  </LhPopconfirm>
  <!-- 마우스 올림 트리거 -->
  <LhPopconfirm title="마우스를 올리면 확인됩니다." trigger="hover" :show-after="0" placement="bottom">
    <LhButton>마우스 올림 트리거</LhButton>
  </LhPopconfirm>
</template>

버튼 문구는 기본적으로 언어 팩 popconfirm.confirm / popconfirm.cancel을 사용하며, confirm-text / cancel-text로 덮어쓸 수 있습니다.

아이콘, 확인 버튼 유형과 동작 스위치

show-icon로 경고 아이콘을 표시하고, confirm-button-type으로 확인 버튼의 주요 유형을 바꿉니다; disabled로 트리거를 비활성화합니다; v-model:visible로 표시/숨김을 제어합니다; hide-after로 자동 접힘을 지연시킵니다; popper-class / teleport-target으로 팝업을 커스터마이징합니다.

vue

<script setup lang="ts">
import { ref } from 'vue'
const pcVisible = ref(false)
</script>

<template>
  <!-- 아이콘과 확인 버튼 유형 -->
  <LhPopconfirm title="이 기록을 삭제하시겠습니까?" show-icon confirm-button-type="primary">
    <LhButton type="danger">아이콘 포함</LhButton>
  </LhPopconfirm>
  <!-- 트리거 비활성화 -->
  <LhPopconfirm title="이 작업을 사용할 수 없습니다." disabled>
    <LhButton disabled>비활성화</LhButton>
  </LhPopconfirm>
  <!-- 제어되는 표시/숨김과 지연 접기 -->
  <LhPopconfirm v-model:visible="pcVisible" title="제어되는 팝업" :hide-after="1000">
    <LhButton>{{ pcVisible ? '접기' : '펼치기' }}</LhButton>
  </LhPopconfirm>
</template>

vue

<script>
export default {
  data() {
    return { pcVisible: false }
  },
}
</script>

<template>
  <!-- 아이콘과 확인 버튼 유형 -->
  <LhPopconfirm title="이 기록을 삭제하시겠습니까?" show-icon confirm-button-type="primary">
    <LhButton type="danger">아이콘 포함</LhButton>
  </LhPopconfirm>
  <!-- 트리거 비활성화 -->
  <LhPopconfirm title="이 작업을 사용할 수 없습니다." disabled>
    <LhButton disabled>비활성화</LhButton>
  </LhPopconfirm>
  <!-- 제어되는 표시/숨김과 지연 접기 -->
  <LhPopconfirm v-model:visible="pcVisible" title="제어되는 팝업" :hide-after="1000">
    <LhButton>{{ pcVisible ? '접기' : '펼치기' }}</LhButton>
  </LhPopconfirm>
</template>

Popconfirm API

Props

프로퍼티	설명	타입	기본값
type	확인 어조	`"info" \| "warning" \| "danger"`	`'warning'`
placement	표시 위치	`"top" \| "top-start" \| "top-end" \| "bottom" \| "bottom-start" \| "bottom-end" \| "left" \| "left-start" \| "left-end" \| "right" \| "right-start" \| "right-end"`	`'top'`
trigger	트리거 방식	`"click" \| "hover" \| "focus" \| "manual"`	`'click'`
title	확인 내용(content 슬롯으로도 가능)	`string`	—
confirmText	확인 버튼 문구(넘기지 않으면 언어 팩 popconfirm.confirm 사용)	`string`	—
cancelText	취소 버튼 문구(넘기지 않으면 언어 팩 popconfirm.cancel 사용)	`string`	—
confirmButtonType	확인 버튼 유형	`"default" \| "primary"`	`'primary'`
visible	수동으로 제어하는 표시 상태(v-model:visible)	`boolean`	—
disabled	비활성화 여부	`boolean`	—
showIcon	어조 아이콘 표시 여부	`boolean`	`true`
popperClass	팝업 커스텀 클래스명	`string`	—
teleportTarget	Teleport 대상(선택자 또는 요소, 기본값 body)	`string \| HTMLElement`	`'body'`
showAfter	표시 지연 시간(ms)	`number`	—
hideAfter	숨김 지연 시간(ms)	`number`	—
themeVars	컴포넌트 수준 테마 변수, ConfigProvider 설정을 덮어씀	`{ [x: string]: string; }`	—
bgPattern	컴포넌트 수준 배경 문양, ConfigProvider 설정을 덮어씀	`string`	—
sx	빠른 레이아웃 속성(트리거 루트 요소에 적용)	`LhSxProps`	—

Events

이벤트	설명	매개변수
confirm	확인 버튼을 클릭한 후 발생	—
cancel	취소 버튼을 클릭하거나 Escape를 누른 후 발생	—
update:visible	표시/숨김 변경	`(value: boolean)`
show	표시된 후 발생	—
hide	숨겨진 후 발생	—

Slots

슬롯	설명
default	트리거 콘텐츠
content	커스텀 확인 내용

Methods

메서드	설명
show	프로그래밍 방식으로 표시
hide	프로그래밍 방식으로 숨김
toggle	프로그래밍 방식으로 전환

접근성

팝업은 role="alertdialog" + aria-modal="true"이며, 트리거에는 aria-haspopup / aria-expanded가 있습니다
열리면 포커스가 '확인' 버튼에 놓이고, Tab이 두 동작 버튼 사이를 순환하며, 닫은 후 트리거로 포커스가 돌아갑니다
Escape는 취소로 간주합니다(WAI-ARIA alertdialog에 맞춤: Escape로 닫고 부정으로 간주)
확인 내용은 aria-labelledby로 연결됩니다; 어조 아이콘은 장식용입니다(aria-hidden)

타입 정의

이 컴포넌트가 외부로 노출하는 TypeScript 타입 구조는 다음과 같습니다(packages/components/popconfirm/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 클릭하여 전체 정의를 펼쳐 볼 수 있습니다; 프로퍼티 설명은 위쪽 Props 표를 참고하세요):

LhPopconfirmProps

/**
 * Popconfirm 컴포넌트 Props
 */
export interface LhPopconfirmProps {
  /** 확인 어조 */
  type?: LhPopconfirmType
  /** 표시 위치 */
  placement?: LhPlacement
  /** 트리거 방식 */
  trigger?: LhPopconfirmTrigger
  /** 확인 내용(content 슬롯으로도 가능) */
  title?: string
  /** 확인 버튼 문구(넘기지 않으면 언어 팩 popconfirm.confirm 사용) */
  confirmText?: string
  /** 취소 버튼 문구(넘기지 않으면 언어 팩 popconfirm.cancel 사용) */
  cancelText?: string
  /** 확인 버튼 유형 */
  confirmButtonType?: 'default' | 'primary'
  /** 수동으로 제어하는 표시 상태(v-model:visible) */
  visible?: boolean
  /** 비활성화 여부 */
  disabled?: boolean
  /** 어조 아이콘 표시 여부 */
  showIcon?: boolean
  /** 팝업 커스텀 클래스명 */
  popperClass?: string
  /** Teleport 대상(선택자 또는 요소, 기본값 body) */
  teleportTarget?: string | HTMLElement
  /** 표시 지연 시간(ms) */
  showAfter?: number
  /** 숨김 지연 시간(ms) */
  hideAfter?: number
  /** 컴포넌트 수준 테마 변수, ConfigProvider 설정을 덮어씀 */
  themeVars?: Record<string, string>
  /** 컴포넌트 수준 배경 문양, ConfigProvider 설정을 덮어씀 */
  bgPattern?: string
  /** 빠른 레이아웃 속성(트리거 루트 요소에 적용) */
  sx?: LhSxProps
}

LhPopconfirmPlacement _{(출처: @lh-ui/share/core/shared/popper)}

/**
 * Popper 위치 엔진(순수 함수, 프레임워크 의존 없음)
 *
 * 팝업(Tooltip / Popover / Popconfirm / Dropdown 등)이 공통으로 사용하는
 * 기하학 계산: 12가지 placement 배치, 주축 오버플로우 뒤집기(flip),
 * 교차축 끼워 넣기(shift). 매개변수는 모두 rect 리터럴이며 DOM을
 * 건드리지 않으므로 직접 단위 테스트할 수 있습니다.
 */

/** 팝업 방위(방향 + 정렬) */
export type LhPlacement =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'left'
  | 'left-start'
  | 'left-end'
  | 'right'
  | 'right-start'
  | 'right-end'

LhPopconfirmTrigger _{(출처: @lh-ui/share/core/popconfirm (logic.ts))}

/** 트리거 방식 */
export type LhPopconfirmTrigger = 'click' | 'hover' | 'focus' | 'manual'

LhPopconfirmType _{(출처: @lh-ui/share/core/popconfirm (logic.ts))}

/** 확인 어조 */
export type LhPopconfirmType = 'info' | 'warning' | 'danger'

Popconfirm 확인 풍선 ​

기본 사용법 ​

세 가지 어조 ​

커스텀 문구와 위치 ​

아이콘, 확인 버튼 유형과 동작 스위치 ​

Popconfirm API ​

Props ​

Events ​

Slots ​

Methods ​

접근성 ​

타입 정의 ​