Popconfirm 用于弹出气泡式的确认框，可以在目标元素附近弹出，相较于 Modal 对话框有着更轻量的优势，相信你会爱上使用这个组件。

基本展示

展开查看代码

<template>
    <j-popconfirm placement="right" title="你确认要删除它吗？" description="这是一段描述，你确认要删吗？">
        <j-button danger type="primary">删除</j-button>
    </j-popconfirm>
</template>

调整位置

使用placement属性指定气泡卡片显示的位置。

展开查看代码

<template>
    <div style="width: 460px; max-width: 100%; margin: 50px auto 60px">
        <j-space style="width: 100%; margin-top: 20px; justify-content: center">
            <j-popconfirm placement="top-start" title="Top Start">
                <j-button>Top Start</j-button>

                <template #description>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popconfirm>
            <j-popconfirm placement="top" title="Top">
                <j-button>Top</j-button>

                <template #description>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popconfirm>
            <j-popconfirm placement="top-end" title="Top End">
                <j-button>Top End</j-button>

                <template #description>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popconfirm>
        </j-space>
        <j-space style="width: 100%; margin-top: 20px; justify-content: space-between">
            <j-popconfirm placement="left-start" title="Left Start">
                <j-button>Left Start</j-button>

                <template #description>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popconfirm>
            <j-popconfirm placement="right-start" title="Right Start">
                <j-button>Right Start</j-button>

                <template #description>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popconfirm>
        </j-space>
        <j-space style="width: 100%; margin-top: 20px; justify-content: space-between">
            <j-popconfirm placement="left" title="Left">
                <j-button>Left</j-button>

                <template #description>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popconfirm>
            <j-popconfirm placement="right" title="Right">
                <j-button>Right</j-button>

                <template #description>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popconfirm>
        </j-space>
        <j-space style="width: 100%; margin-top: 20px; justify-content: space-between">
            <j-popconfirm placement="left-end" title="Left End">
                <j-button>Left End</j-button>

                <template #description>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popconfirm>
            <j-popconfirm placement="right-end" title="Right End">
                <j-button>Right End</j-button>

                <template #description>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popconfirm>
        </j-space>
        <j-space style="width: 100%; margin-top: 20px; justify-content: center">
            <j-popconfirm placement="bottom-start" title="Bottom Start">
                <j-button>Bottom Start</j-button>

                <template #description>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popconfirm>
            <j-popconfirm placement="bottom" title="Bottom">
                <j-button>Bottom</j-button>

                <template #description>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popconfirm>
            <j-popconfirm placement="bottom-end" title="Bottom End">
                <j-button>Bottom End</j-button>

                <template #description>
                    <div>Content 1</div>
                    <div>Content 2</div>
                </template>
            </j-popconfirm>
        </j-space>
    </div>
</template>

异步确认

onConfirm支持异步，当它返回一个Promise时，确认按钮的loading状态会从onConfirm开始执行后一直持续，直到Promise状态确定后结束。这对于 ajax 类操作是非常友好的，因为你无需自行管理按钮的loading状态！

展开查看代码

<template>
    <j-popconfirm title="你确认要删除它吗？" description="如果onConfirm返回Promise，可以支持异步确认哦！" @confirm="onConfirm">
        <j-button danger type="primary">删除</j-button>
    </j-popconfirm>
</template>

<script setup lang="ts">
import { sleep } from '@jview/utils'

const onConfirm = async () => {
    // 用一个 3 秒的延迟模拟 ajax 请求
    await sleep(3)
    return Promise.resolve(true)
}
</script>

属性

参数	说明	类型	默认值	必填
disabled	禁止弹出浮层	boolean	无	否
title	确认框的标题，支持字符串/属性/插槽	string | VNode	无	否
description	确认框的详细描述，支持字符串/属性/插槽	string | VNode	无	否
placement	浮层位置，可选top, bottom, left, right, top-start, top-end, bottom-start, bottom-end, left-start, left-end, right-start, right-end	Placement	'bottom'	否
icon	确认框标题左侧的图标，支持属性/插槽	VNode	无	否
open	控制浮层显隐，支持 v-model，仅在必要时使用 open	boolean	undefined	否
onConfirm	确认事件回调，如果返回 Promise，则可以支持异步确认效果	Function	无	否
getPopupContainer	ssr时，默认渲染到父级元素下；可指定浮层的容器，比如渲染到 body 下	() => undefined | HTMLElement	无	否
cancelButton	自定义渲染取消按钮，支持属性或插槽	VNode	无	否
destroyWhenHide	控制隐藏后是否销毁浮层	boolean	无	否
confirmButton	自定义渲染确认按钮，支持属性或插槽	VNode	无	否
mouseEnterDelay	鼠标移入后延时多少才显示 Tooltip，单位：秒	number	0.1	否
cancelText	取消按钮文字	string	'取消'	否
mouseLeaveDelay	鼠标移出后延时多少才隐藏 Tooltip，单位：秒	number	0.1	否
confirmText	确认按钮文字	string	'确定'	否
overlayClassName	浮层class	string	无	否
titleIcon	标题左侧图标	VNode	<ExclamationCircleFilled />	否
overlayStyle	浮层style	CSSProperties	无	否
overlayInnerStyle	浮层内容区style	CSSProperties	无	否
cancelButtonProps	传给取消按钮的属性	object	无	否
overlayColor	浮层背景颜色	string	无	否
confirmButtonProps	传给确认按钮的属性	object	无	否
trigger	触发方式	"hover" | "click"	'hover'	否
showCancel	是否显示取消按钮，默认显示	boolean	true	否
arrowVisible	是否显示箭头	boolean	true	否
offsetOption	offset 配置	OffsetOptions	12	否