FxPopconfirm 气泡确认框

点击触发元素弹出确认气泡，含确认 / 取消按钮。基于 FxPopover。

基础用法

title 设置提示内容，@confirm / @cancel 监听确认 / 取消。

<template>
  <FxPopconfirm title="确认删除该项吗？" @confirm="onConfirm" @cancel="onCancel">
    <template #reference>
      <FxBtn type="danger">删除</FxBtn>
    </template>
  </FxPopconfirm>
</template>

<script setup lang="ts">
import { FxPopconfirm, fxMsg } from "@fx/components"

function onConfirm() {
  fxMsg.success("已删除")
}
function onCancel() {
  fxMsg.info("已取消")
}
</script>

出现位置

placement 控制弹出方向。

<template>
  <div class="popconfirm-base-box">
    <div class="row center">
      <FxPopconfirm class="box-item" title="Top Left prompts info" placement="top-start" @confirm="() => {}">
        <template #reference><FxBtn>top-start</FxBtn></template>
      </FxPopconfirm>
      <FxPopconfirm class="box-item" title="Top Center prompts info" placement="top" @confirm="() => {}">
        <template #reference><FxBtn>top</FxBtn></template>
      </FxPopconfirm>
      <FxPopconfirm class="box-item" title="Top Right prompts info" placement="top-end" @confirm="() => {}">
        <template #reference><FxBtn>top-end</FxBtn></template>
      </FxPopconfirm>
    </div>
    <div class="row">
      <FxPopconfirm class="box-item" title="Left Top prompts info" placement="left-start" @confirm="() => {}">
        <template #reference><FxBtn>left-start</FxBtn></template>
      </FxPopconfirm>
      <FxPopconfirm class="box-item" title="Right Top prompts info" placement="right-start" @confirm="() => {}">
        <template #reference><FxBtn>right-start</FxBtn></template>
      </FxPopconfirm>
    </div>
    <div class="row">
      <FxPopconfirm class="box-item" title="Left Center prompts info" placement="left" @confirm="() => {}">
        <template #reference><FxBtn class="mt-3 mb-3">left</FxBtn></template>
      </FxPopconfirm>
      <FxPopconfirm class="box-item" title="Right Center prompts info" placement="right" @confirm="() => {}">
        <template #reference><FxBtn>right</FxBtn></template>
      </FxPopconfirm>
    </div>
    <div class="row">
      <FxPopconfirm class="box-item" title="Left Bottom prompts info" placement="left-end" @confirm="() => {}">
        <template #reference><FxBtn>left-end</FxBtn></template>
      </FxPopconfirm>
      <FxPopconfirm class="box-item" title="Right Bottom prompts info" placement="right-end" @confirm="() => {}">
        <template #reference><FxBtn>right-end</FxBtn></template>
      </FxPopconfirm>
    </div>
    <div class="row center">
      <FxPopconfirm class="box-item" title="Bottom Left prompts info" placement="bottom-start" @confirm="() => {}">
        <template #reference><FxBtn>bottom-start</FxBtn></template>
      </FxPopconfirm>
      <FxPopconfirm class="box-item" title="Bottom Center prompts info" placement="bottom" @confirm="() => {}">
        <template #reference><FxBtn>bottom</FxBtn></template>
      </FxPopconfirm>
      <FxPopconfirm class="box-item" title="Bottom Right prompts info" placement="bottom-end" @confirm="() => {}">
        <template #reference><FxBtn>bottom-end</FxBtn></template>
      </FxPopconfirm>
    </div>
  </div>
</template>

<script setup lang="ts">
import { FxPopconfirm } from "@fx/components"
</script>

<style scoped>
.popconfirm-base-box {
  width: 600px;
}
.popconfirm-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.popconfirm-base-box .center {
  justify-content: center;
}
.popconfirm-base-box .box-item {
  width: 110px;
  margin-top: 10px;
}
</style>

自定义按钮

confirm-button-text / cancel-button-text 自定义按钮文字，confirm-button-type / cancel-button-type 自定义类型。

<template>
  <FxPopconfirm
    title="确认提交吗？"
    confirm-button-text="提交"
    cancel-button-text="再想想"
    confirm-button-type="success"
    icon="ep:info-filled"
    icon-color="var(--fx-color-primary)"
    @confirm="fxMsg.success('已提交')"
  >
    <template #reference>
      <FxBtn type="primary">提交</FxBtn>
    </template>
  </FxPopconfirm>
</template>

<script setup lang="ts">
import { FxPopconfirm, fxMsg } from "@fx/components"
</script>

自定义按钮区

actions 插槽可完全替换底部按钮区，作用域提供 { confirm, cancel }，调用即触发对应事件并关闭。

<template>
  <FxPopconfirm
    :width="220"
    icon="ep:info-filled"
    icon-color="var(--fx-color-primary)"
    title="确认删除这项吗？"
    @cancel="onCancel"
  >
    <template #reference>
      <FxBtn>删除</FxBtn>
    </template>
    <template #actions="{ confirm, cancel }">
      <FxBtn size="small" @click="cancel">再想想</FxBtn>
      <FxBtn type="danger" size="small" :disabled="!clicked" @click="confirm">
        确认删除
      </FxBtn>
    </template>
  </FxPopconfirm>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { FxPopconfirm } from "@fx/components"

// 防误触：需先点过一次「再想想」启用确认按钮
const clicked = ref(false)
function onCancel() {
  clicked.value = true
}
</script>

局部引入

import { FxPopconfirm } from "@fx/components"

API

Attributes

名称	说明	类型	默认值
title	标题（提示内容）	string	—
confirm-button-text	确认按钮文字	string	确定
cancel-button-text	取消按钮文字	string	取消
confirm-button-type	确认按钮类型	ButtonType	primary
cancel-button-type	取消按钮类型	ButtonType	—
icon	自定义图标。字符串为 IconString 类型（即 FxIcon 图标名，如 ep:edit、ant-design:home、svg:xxx）	string	ep:question-filled
icon-color	图标颜色	string	var(--color-warning)
hide-icon	是否隐藏图标	boolean	false
placement	出现位置	Placement	bottom
width	宽度	string | number	192
disabled	是否禁用	boolean	false
show-arrow	是否显示箭头	boolean	true
teleported / persistent	teleport / 持久化	boolean	true
button-size	按钮尺寸	'small' | 'default' | 'large'	—
hide-after	隐藏延时（ms）	number	200
visible (v-model:visible) ^(fx 增强)	是否显示	boolean	—
virtual-triggering	是否启用虚拟触发	boolean	false
virtual-ref	虚拟触发元素，配合 virtual-triggering	Measurable	—

Slots

名称	说明
reference	触发元素
actions	自定义底部按钮区，作用域 { confirm, cancel }

Events

名称	说明
confirm	点击确认（参数 MouseEvent）
cancel	点击取消（参数 MouseEvent）
update:visible ^(fx 增强)	显隐变化

实现说明

• 浮层引擎基于 @floating-ui/dom
• v-model:visible、disabled / placement / offset / show-arrow / show-after / popper-class / popper-style / button-size 为 fx 扩展能力
• 图标走 @fx-core/icon，样式走 @fx/styles token