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	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 快速版面配置屬性（作用於觸發器根元素） */
  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 ​

無障礙 ​

類型定義 ​