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 快速佈局屬性（作用於觸發器根元素）	—	—

Events

事件	說明	回呼參數
confirm	點選確認按鈕	—
cancel	點選取消按鈕	—

Slots

插槽	說明
default	觸發器
content	確認內容（預設取 title prop）