Skip to content

Popconfirm 气泡确认框

xy-popconfirm 适合承接“删除前确认”“发布前确认”“切换前提醒”这类轻量确认动作。它依然是一个原地完成的小浮层,但这版已经从固定确认壳子升级成可组合的业务确认浮层。

基础用法

最常见的用法是用 title + content 交代风险,再把确认动作留在当前按钮附近完成。

基础用法确认操作

气泡确认框用于需要二次确认的危险操作,点击后弹出确认提示。

旧触发写法兼容

旧页面如果没有提供 #reference,且也没有传 content,当前版本会把默认插槽兼容成 trigger。但这只用于兼容历史页面;新写法仍然建议显式使用 #reference

位置

placement 继承当前浮层体系的位置能力,适合在工具栏、表格行操作和卡片角标里做细调。

自定义图标与按钮

effect、图标、按钮类型和按钮透传 props 可以组合使用,让确认框更贴近业务语义。

正文插槽

title 继续承接标题区,默认插槽只负责正文区;需要更复杂的提示说明时,优先用默认插槽而不是把内容塞进 title

异步确认与 loading

before-confirm / before-cancel 支持 Promise。执行期间组件会自动托管按钮 loading 和禁用状态,避免重复提交。

最近状态:等待操作

虚拟触发与外部控制

virtual-refvirtual-triggeringv-model 适合右键菜单、外部控制按钮或虚拟锚点场景。

什么时候用 Popconfirm

  • 你只需要一次轻量确认,不希望把流程升级成完整对话框。
  • 你需要承接一小段正文说明,但还不想进入完整 Popover 或 Dialog。
  • 你希望确认动作自动托管 loading、关闭和基础交互状态,而不是每次都手写一层。

内容结构约定

  • title 始终属于头部主语义,不会被默认插槽替代。
  • 默认插槽只承接正文区;未提供默认插槽时,组件才会回退渲染 content
  • actions 插槽只承接底部动作区,不负责正文结构。
  • 如果没有 reference,且没有传 content,默认插槽会被兼容成 trigger;这属于历史写法兼容,不建议在新页面里继续依赖这种歧义结构。
  • 新页面推荐始终显式区分:
    • #reference 负责触发器
    • content 或默认插槽负责正文

异步 hook 约定

  • before-confirm / before-cancel 返回 false 时,面板保持打开,且不会继续派发 confirm / cancel
  • hook 返回 Promise 时,组件会自动进入 pending 状态:当前动作按钮 loading,两个默认按钮都会被禁用。
  • hook resolve 后,才会派发对应事件并关闭面板;reject 时保持展开。

白名单兼容属性

xy-popconfirm 当前显式接入了部分 Tooltip 能力,而不是把任意属性全部透传到底层浮层。当前可复用的白名单能力主要包括:

  • trigger-keys
  • transition
  • popper-options
  • open-delay / close-delay / show-after / hide-after
  • virtual-ref / virtual-triggering

如果你需要任意正文结构、完全自由的触发策略或更复杂的浮层控制,优先改用 xy-popover

locale 文案兜底

如果没有显式传入 confirm-button-textcancel-button-textxy-popconfirm 会优先读取 xy-config-provider 的以下 locale key:

  • popconfirmConfirmButtonText
  • popconfirmCancelButtonText

都没有时,分别回退到内置默认文案 确定取消

命名映射

Vue 模板中 props 和 events 使用 kebab-case,源码 / TS 类型层使用 camelCase,两者由 Vue 自动转换,等价:

Props 映射

模板写法(kebab-case)源码 / TS 写法(camelCase)
model-valuemodelValue
confirm-button-textconfirmButtonText
cancel-button-textcancelButtonText
confirm-button-typeconfirmButtonType
cancel-button-typecancelButtonType
confirm-button-propsconfirmButtonProps
cancel-button-propscancelButtonProps
icon-coloriconColor
hide-iconhideIcon
show-arrowshowArrow
open-delayopenDelay
close-delaycloseDelay
show-aftershowAfter
hide-afterhideAfter
close-on-esccloseOnEsc
close-on-outsidecloseOnOutside
append-toappendTo
popper-classpopperClass
popper-stylepopperStyle
trigger-keystriggerKeys
popper-optionspopperOptions
virtual-refvirtualRef
virtual-triggeringvirtualTriggering
before-confirmbeforeConfirm
before-cancelbeforeCancel

其余属性(titlecontentplacementwidthdisabledeffectteleportedpersistentoffsettransition)为单词形式,模板与源码写法一致。

Events 映射

模板写法(kebab-case)源码 emit 写法(camelCase)
update:model-valueupdate:modelValue
before-showbeforeShow
before-hidebeforeHide

其余事件(showhideopencloseconfirmcancel)为单单词,模板与源码写法一致。

before-showbefore-hide 在源码 defineEmits 中使用连字符形式声明,模板监听时写 @before-show / @before-hide,写法一致,无需转换。

下方 API 表格统一按模板层推荐写法列出。

API

Popconfirm Attributes

属性说明类型默认值
model-value受控显示状态booleanfalse
title标题文案string''
content纯文本正文;未提供默认插槽时作为正文区兜底string''
placement浮层位置Placement'bottom'
disabled是否禁用booleanfalse
width面板宽度,最小值为 150pxstring | number150
open-delay打开延时白名单属性number80
close-delay关闭延时白名单属性number60
show-after打开延时别名,优先级高于 open-delaynumberundefined
hide-after关闭延时别名,优先级高于 close-delay;确认/取消成功后也遵循该延时number200
effect视觉风格PopconfirmEffect'light'
teleported是否通过 Teleport 挂载到外层容器booleantrue
append-toTeleport 的挂载目标string | HTMLElement'body'
persistent关闭后是否保留 DOMbooleanfalse
offset浮层偏移量number10
trigger-keys键盘打开键白名单string[]Tooltip 内置默认值
show-arrow是否显示箭头booleantrue
close-on-escEscape 是否关闭booleantrue
close-on-outside点击外部是否关闭booleantrue
popper-class浮层容器自定义类名string''
popper-style浮层容器自定义样式StyleValueundefined
transition过渡名称string'xy-fade'
popper-options浮层定位兼容配置子集TooltipPopperOptionsundefined
icon前置图标string'mdi:help-circle-outline'
icon-color图标颜色string'var(--xy-warning)'
hide-icon是否隐藏图标booleanfalse
confirm-button-text确认按钮文案;未传时回退到 locale.popconfirmConfirmButtonText'确定'stringundefined
cancel-button-text取消按钮文案;未传时回退到 locale.popconfirmCancelButtonText'取消'stringundefined
confirm-button-type确认按钮类型PopconfirmButtonType'primary'
cancel-button-type取消按钮类型PopconfirmButtonType'text'
confirm-button-props透传给确认按钮的补充配置;不会覆盖内部 loading/disabled 和 confirm-button-typePartial<ButtonProps>undefined
cancel-button-props透传给取消按钮的补充配置;不会覆盖内部 loading/disabled 和 cancel-button-typePartial<ButtonProps>undefined
before-confirm确认前置 hook,支持返回 booleanPromisePopconfirmHookundefined
before-cancel取消前置 hook,支持返回 booleanPromisePopconfirmHookundefined
virtual-ref虚拟定位引用ReferenceElement | nullnull
virtual-triggering是否启用虚拟触发模式booleanfalse

Popconfirm Events

事件说明参数
update:model-value开关状态变化PopconfirmModelValueChangeHandler
before-show面板即将打开时触发
show面板完成进入后触发
before-hide面板即将关闭时触发
hide面板完成离开后触发
open浮层逻辑打开时触发
close浮层逻辑关闭时触发
confirm确认动作完成后触发PopconfirmActionHandler
cancel取消动作完成后触发PopconfirmActionHandler

Popconfirm Slots

插槽说明
reference触发区域;常规模式下通过点击它打开确认框
default正文区;插槽参数为 PopconfirmSlotProps
actions自定义操作区;插槽参数为 PopconfirmSlotProps

Popconfirm Exposes

名称说明类型
hide立即关闭确认框PopconfirmInstance["hide"]
popperRef面板根节点引用PopconfirmInstance["popperRef"]