Popconfirm 气泡确认框

点击元素弹出气泡确认框，常用于一些需要二次确认的危险操作。

基础用法

在需要二次确认的元素外包一层 ZcPopconfirm 即可。

<template>
  <ZcPopconfirm title="确定删除吗？" @confirm="handleConfirm">
    <ZcButton type="danger">删除</ZcButton>
  </ZcPopconfirm>
</template>
<script setup>
const handleConfirm = () => {
  console.log('确认删除')
}
</script>

危险操作

使用 danger 属性将确认按钮标红，强调操作的危险性。

<template>
  <ZcPopconfirm
    title="确定要删除这条记录吗？此操作不可恢复。"
    description="删除后数据将永久丢失。"
    danger
    confirm-button-text="确定删除"
    @confirm="handleConfirm"
  >
    <ZcButton type="danger">危险操作</ZcButton>
  </ZcPopconfirm>
</template>
<script setup>
const handleConfirm = () => {
  console.log('确认删除')
}
</script>

自定义内容

使用插槽自定义气泡内容，通过 v-model:visible 控制显隐。

<template>
  <ZcPopconfirm
    title="自定义标题"
    description="这是一段描述信息"
    :visible="visible"
    @update:visible="visible = $event"
    @confirm="handleConfirm"
  >
    <ZcButton @click="visible = !visible">自定义触发</ZcButton>
  </ZcPopconfirm>
</template>
<script setup>
import { ref } from 'vue'
const visible = ref(false)
const handleConfirm = () => {
  console.log('确认')
  visible.value = false
}
</script>

Popconfirm API

Props

参数	说明	类型	默认值
title	确认框标题	string	'Are you sure?'
description	确认框描述	string	''
confirmButtonText	确认按钮文字	string	'Confirm'
cancelButtonText	取消按钮文字	string	'Cancel'
confirmButtonType	确认按钮类型	string	'primary'
cancelButtonType	取消按钮类型	string	'default'
danger	是否为危险操作	boolean	false
hideCancelButton	是否隐藏取消按钮	boolean	false
hideConfirmButton	是否隐藏确认按钮	boolean	false
disabled	是否禁用	boolean	false
placement	弹出位置	'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'	'top'
trigger	触发方式	'hover' | 'click'	'click'
visible	是否显示 (v-model:visible)	boolean	false
showArrow	是否显示箭头	boolean	true
width	弹出框宽度	number	220
icon	自定义图标类名	string	''

Events

事件名	说明	回调参数
confirm	点击确认按钮时触发
cancel	点击取消按钮时触发

Slots

插槽名	说明
default	触发元素