JView UIPopconfirm 用于弹出气泡式的确认框，可以在目标元素附近弹出，相较于 Modal 对话框有着更轻量的优势，相信你会爱上使用这个组件。
基本展示
展开查看代码
vue
<template>
<j-popconfirm placement="right" title="你确认要删除它吗？" description="这是一段描述，你确认要删吗？">
<j-button danger type="primary">删除</j-button>
</j-popconfirm>
</template><template>
<j-popconfirm placement="right" title="你确认要删除它吗？" description="这是一段描述，你确认要删吗？">
<j-button danger type="primary">删除</j-button>
</j-popconfirm>
</template>调整位置
使用placement属性指定气泡卡片显示的位置。
展开查看代码
vue
<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><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状态！
展开查看代码
vue
<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><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 | 指定浮层的容器，默认渲染到 body 下；如需渲染到父级元素下，可返回 null | () => null | HTMLElement | () => document.body | 否 |
| 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 | 无 | 否 |
| cancelButtonProps | 传给取消按钮的属性 | object | 无 | 否 |
| overlayInnerStyle | 浮层内容区style | CSSProperties | 无 | 否 |
| confirmButtonProps | 传给确认按钮的属性 | object | 无 | 否 |
| overlayColor | 浮层背景颜色 | string | 无 | 否 |
| showCancel | 是否显示取消按钮，默认显示 | boolean | true | 否 |
| trigger | 触发方式 | "click" | "hover" | 'hover' | 否 |
| arrowVisible | 是否显示箭头 | boolean | true | 否 |
| offsetOption | offset 配置 | OffsetOptions | 12 | 否 |