Popconfirm

Popconfirm (팝컨펌)

요소 클릭 동작에 대한 간단한 확인 대화 상자예요.

출처: 문서

본문

위치 (Placement)

popconfirm은 9가지 위치를 가져요. 참조 요소를 클릭했을 때 표시 내용을 설정하려면 title 속성을 사용해요. placement 속성은 popconfirm의 위치를 결정해요. 그 값은 [orientation]-[alignment] 형식으로, 네 가지 방향 top, left, right, bottom과 세 가지 정렬 start, end, null이 있고, 기본 정렬은 null이에요. 예를 들어 placement="left-end"를 보면, popconfirm은 마우스를 올린 요소의 왼쪽에 표시되고 popconfirm의 아래쪽이 요소의 아래쪽과 정렬돼요.

.popconfirm-base-box {
  width: 600px;
}

.popconfirm-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.popconfirm-base-box .center {
  justify-content: center;
}

.popconfirm-base-box .box-item {
  width: 110px;
  margin-top: 10px;
}

기본 사용법 (Basic usage)

Popconfirm은 Popover와 비슷해요. 그래서 일부 중복 속성은 Popover의 문서를 참조하세요. Popconfirm에서는 title 속성만 사용 가능하고, content는 무시돼요.

커스터마이징 (Customize)

Popconfirm을 이렇게 커스터마이징할 수 있어요.

트리거 이벤트 (Trigger event)

버튼을 클릭해서 이벤트를 트리거해요.

API

Attributes

Name Description Type Default
title 제목 string —
effect 2.11.2 Tooltip 테마, 내장 테마: dark / light enum / string light
confirm-button-text Confirm 버튼 텍스트 string —
cancel-button-text Cancel 버튼 텍스트 string —
confirm-button-type Confirm 버튼 타입 enum primary
cancel-button-type Cancel 버튼 타입 enum text
icon 아이콘 컴포넌트 string / Component QuestionFilled
icon-color 아이콘 색 string #f90
hide-icon 아이콘 숨김 여부 boolean false
hide-after 사라지는 지연 시간(밀리초) number 200
teleported popconfirm을 body로 텔레포트할지 여부 boolean true
persistent popconfirm이 비활성이고 persistent가 false일 때 popconfirm이 파괴됨 boolean false
width popconfirm 너비, 최소 너비 150px string / number 150
tooltip Tooltip의 모든 속성 상속, 단: popper-class, popper-style, fallback-placements는 제외 — —

Events

Name Description Type
confirm confirm 버튼 클릭 시 트리거 Function
cancel cancel 버튼 클릭 시 트리거 Function

Slots

Name Description Type
reference Popconfirm을 트리거하는 HTML 요소 —
actions 2.8.1 Popconfirm 바닥글 내용 object

Exposes

Name Description Type
popperRef 2.10.7 el-popper 컴포넌트 인스턴스 object
hide 2.10.7 popconfirm 숨기기 Function

더 알아보기 (Learn more)