Popconfirm 气泡确认框

弹出气泡确认框。 Popconfirm 在 Popover 基础上做了常用封装。

基础用法

点击弹出 Popconfirm。

查看代码

<template>
	<demo-container>
		<gov-popconfirm
			title="这是一段内容确定删除吗？"
			icon="info"
			iconColor="red"
			placement="right"
		>
			<template #reference>
				<gov-button icon="delete">点击删除</gov-button>
			</template>
		</gov-popconfirm>
	</demo-container>
</template>

自定义内容

也可以不用icon、title属性，使用默认插槽。

查看代码

<template>
	<demo-container>
		<gov-popconfirm
			placement="right"
			confirmButtonText="是的，确定"
			cancelButtonText="不是，点击关闭"
			confirmButtonType="primary"
			cancelButtonType="default"
			@cancel="handleCancel"
			@confirm="handleConfirm"
		>
			<div>下图是本站LOGO吗？</div>
			<img src="/logo.png" width="200" />
			<template #reference>
				<gov-button icon="mouse">点击触发</gov-button>
			</template>
		</gov-popconfirm>
	</demo-container>
</template>

<script setup>
import { GovMessage } from "@/dist/index.js";
const handleCancel = () => {
	GovMessage("点击了cancel");
};

const handleConfirm = () => {
	GovMessage("点击了confirm");
};
</script>

Attributes

Popconfirm 在 Popover 基础上做了常用封装，重复属性请参考 Popover 文档，在此文档不再赘述。

参数	说明	类型	可选值	默认值
title	标题	String	—	—
confirm-button-text	确认按钮文字	String	—	确定
cancel-button-text	取消按钮文字	String	—	取消
confirm-button-type	确认按钮类型	String	—	primary
cancel-button-type	取消按钮类型	String	—	text
icon	Icon	String	—	—
icon-color	Icon 颜色	String	—	—

Slots

参数	说明
reference	触发 Popconfirm 显示的 HTML 元素

Events

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