Popconfirm 氣泡確認框

點選元素彈出確認氣泡，用於危險或重要操作前的二次確認。語義為 role="alertdialog"， 開啟即圈住焦點，確認 / 取消或 Esc 後關閉。

基礎用法

確認 / 取消 / 語氣類型

已確認 0 次

import { LhButton, LhPopconfirm } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhPopconfirm title="确定执行此操作吗？" onConfirm={() => console.log('confirmed')}>
      <LhButton>确认</LhButton>
    </LhPopconfirm>
  )
}

Popconfirm Props

屬性	說明	型別	可選值	預設值
children	觸發器節點	ReactNode	—	—
title	確認的標題 / 問題	ReactNode	—	—
confirmText	確認按鈕文案	string	—	語言包 popconfirm.confirm（确定）
cancelText	取消按鈕文案	string	—	語言包 popconfirm.cancel（取消）
type	語氣類型	'info' | 'warning' | 'danger'	—	'warning'
placement	展示位置	LhPopconfirmPlacement	top / bottom / left / right（含 -start / -end）	'top'
trigger	觸發方式	LhPopconfirmTrigger	'hover' | 'click' | 'focus' | 'manual'	'click'
disabled	停用	boolean	—	false
showIcon	是否顯示圖示	boolean	—	true
hideCancel	是否隱藏取消按鈕	boolean	—	false
visible	受控顯隱	boolean	—	—
defaultVisible	非受控預設顯隱	boolean	—	false
popperClass	浮層自訂類別名	string	—	—
themeVars	元件級主題變數	Record<string, string>	—	—
sx	快速版面配置屬性（作用於觸發器）	SxProps	—	—

Popconfirm 事件

事件	說明	回呼簽名	Vue 對照
onConfirm	點選確認按鈕	() => void	confirm
onCancel	點選取消按鈕或按 Esc	() => void	cancel
onVisibleChange	顯隱變化	(visible: boolean) => void	update:visible

圈焦與 Esc

彈出層始終按 alertdialog 圈住焦點；按 Esc 等同於點選取消（觸發 onCancel 並關閉）。

確認後自動關閉

與 plus 一致：點選確認或取消都會先觸發回呼再關閉，無需外部手動收起。

樣式

import '@lh-ui/react/style/popconfirm'