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）