PopConfirm 气泡确认框

目标操作需要用户二次确认时，在目标附近弹出浮层询问。

点击元素，弹出气泡式的确认框。

导入

import { PopConfirm } from "@reglow/reui";

何时使用

目标元素的操作需要用户进一步确认时，在目标元素附近弹出浮层提示，询问用户。

代码演示

基础用法

<script setup lang="ts">
import { PopConfirm, PopConfirmTrigger, PopConfirmContent } from "@reglow/reui";
import { Button } from "@reglow/reui";

function handleConfirm() {
  console.log("confirmed");
}
</script>

<template>
  <PopConfirm>
    <PopConfirmTrigger>
      <Button>删除</Button>
    </PopConfirmTrigger>
    <PopConfirmContent
      title="确定删除吗？"
      @confirm="handleConfirm"
    />
  </PopConfirm>
</template>

带描述和危险操作

<PopConfirm>
  <PopConfirmTrigger>
    <Button variant="destructive">删除</Button>
  </PopConfirmTrigger>
  <PopConfirmContent
    title="确定删除这条数据？"
    description="删除后不可恢复，请谨慎操作"
    ok-text="删除"
    ok-variant="destructive"
    @confirm="handleDelete"
  />
</PopConfirm>

自定义位置

<PopConfirm>
  <PopConfirmTrigger>
    <Button>悬停查看</Button>
  </PopConfirmTrigger>
  <PopConfirmContent
    title="提示"
    side="bottom"
    align="end"
    :side-offset="12"
  />
</PopConfirm>

隐藏取消按钮和图标

<PopConfirm>
  <PopConfirmTrigger>
    <Button>确认</Button>
  </PopConfirmTrigger>
  <PopConfirmContent
    title="操作已完成"
    :show-cancel="false"
    :show-icon="false"
  />
</PopConfirm>

API

PopConfirm Props

参数说明类型默认值
open (v-model)是否显示booleanfalse
defaultOpen默认是否显示booleanfalse

PopConfirmTrigger Props

无额外 props，通过 as-child 包裹触发元素。

PopConfirmContent Props

参数说明类型默认值
title标题string-
description描述内容string-
okText确认按钮文字string"确认"
cancelText取消按钮文字string"取消"
okVariant确认按钮类型"default" | "destructive" | "outline" | "secondary" | "ghost" | "link""default"
showCancel是否显示取消按钮booleantrue
showIcon是否显示图标booleantrue
disabled是否禁用booleanfalse
side弹出方向"top" | "right" | "bottom" | "left""top"
align对齐方式"start" | "center" | "end""center"
sideOffset侧边偏移number8
alignOffset对齐偏移number0
class自定义类名string-

PopConfirmContent Events

事件说明回调参数
confirm点击确认(e: Event) => void
cancel点击取消(e: Event) => void

PopConfirmContent Slots

插槽说明
icon自定义图标
title自定义标题
description自定义描述
okText自定义确认按钮文字
cancelText自定义取消按钮文字
Notification 通知提醒框
全局展示通知提醒信息
Skeleton 骨架屏
Skeleton 骨架屏