气泡确认 Popconfirm

点击元素后弹出气泡式的确认框，用于需要二次确认的操作场景，比 Modal 更轻量。

基础用法

点击触发元素后弹出确认气泡，支持确认和取消操作。

<template>
  <bp-popconfirm content="请确认是否执行操作" :on-before-ok="handleBeforeOk">
    <bp-button>Open popconfirm</bp-button>
  </bp-popconfirm>
</template>

<script setup lang="ts">
const handleBeforeOk = async () => {
  await new Promise(resolve => setTimeout(resolve, 2000));
  return true;
};
</script>

类型

通过 type 属性设置确认框类型，影响图标和确认按钮样式。支持 info（默认）、success、warning、error 四种类型。

<template>
  <bp-space :size="16">
    <bp-popconfirm content="确认执行此操作？" type="info">
      <bp-button status="primary">Info</bp-button>
    </bp-popconfirm>
    <bp-popconfirm content="确认执行此操作？" type="success">
      <bp-button status="success">Success</bp-button>
    </bp-popconfirm>
    <bp-popconfirm content="确认执行此操作？" type="warning">
      <bp-button status="warning">Warning</bp-button>
    </bp-popconfirm>
    <bp-popconfirm content="确认执行此操作？" type="error">
      <bp-button status="danger">Error</bp-button>
    </bp-popconfirm>
  </bp-space>
</template>

弹出位置

通过 position 属性设置气泡弹出位置，继承 Trigger 组件的所有位置参数。

<template>
  <div class="position-demo">
    <bp-popconfirm content="确认执行？" position="top">
      <bp-button>Top</bp-button>
    </bp-popconfirm>
    <bp-popconfirm content="确认执行？" position="bottom">
      <bp-button>Bottom</bp-button>
    </bp-popconfirm>
    <bp-popconfirm content="确认执行？" position="top-left">
      <bp-button>Top Left</bp-button>
    </bp-popconfirm>
    <bp-popconfirm content="确认执行？" position="top-right">
      <bp-button>Top Right</bp-button>
    </bp-popconfirm>
    <bp-popconfirm content="确认执行？" position="bottom-left">
      <bp-button>Bottom Left</bp-button>
    </bp-popconfirm>
    <bp-popconfirm content="确认执行？" position="bottom-right">
      <bp-button>Bottom Right</bp-button>
    </bp-popconfirm>
  </div>
</template>

<style lang="scss" scoped>
.position-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
</style>

自定义按钮文字

通过 ok-text 和 cancel-text 属性自定义按钮文案，适用于不同业务场景。

<template>
  <bp-popconfirm content="删除后将无法恢复，确认删除？" type="error" ok-text="删除" cancel-text="再想想" @ok="handleOk">
    <bp-button status="danger">删除</bp-button>
  </bp-popconfirm>
</template>

<script setup lang="ts">
const handleOk = () => {
  console.log("confirmed");
};
</script>

异步确认

通过 on-before-ok 回调实现异步确认，确认按钮会自动进入 loading 状态。返回 true 关闭气泡，返回 false 则保持打开。

<template>
  <bp-popconfirm content="确认提交？" :on-before-ok="handleBeforeOk" @ok="handleOk">
    <bp-button status="primary">异步提交</bp-button>
  </bp-popconfirm>
</template>

<script setup lang="ts">
const handleBeforeOk = async () => {
  await new Promise((resolve) => setTimeout(resolve, 2000));
  return true;
};

const handleOk = () => {
  console.log("submitted");
};
</script>

Popconfirm 属性

content	确认框提示内容	String	-	-
type	确认框类型，影响图标和按钮样式	String	info	-
position	气泡弹出位置	TriggerPosition	top	-
ok-text	确认按钮文字	String	确认	-
cancel-text	取消按钮文字	String	取消	-
on-before-ok	确认前的异步回调，返回 true 关闭气泡，返回 false 保持打开。按钮自动进入 loading 状态	Function	-	-

Popconfirm 事件

ok	点击确认按钮后触发	-	-
cancel	点击取消按钮后触发	-	-

Popconfirm 插槽

default

触发气泡的元素

-

-