确认弹出框

ConfirmPopup 显示一个相对于其目标显示的确认覆盖层。

导入 #


import ConfirmPopup from 'primevue/confirmpopup';

服务 #

ConfirmPopup 通过需要作为应用程序插件安装的 ConfirmationService 来控制。


import {createApp} from 'vue';
import ConfirmationService from 'primevue/confirmationservice';

const app = createApp(App);
app.use(ConfirmationService);

该服务可通过组合 API 的 useConfirm 函数或使用选项 API 的应用程序的 $confirm 属性获得。


import { useConfirm } from "primevue/useconfirm";

const confirm = useConfirm();

基本 #

通过调用 $confirm 实例的 require 方法并传递选项来自定义弹出窗口来显示 ConfirmPopup。target 属性是强制性的，用于将弹出窗口与它的引用器对齐。


<ConfirmPopup></ConfirmPopup>
<Button @click="confirm1($event)" label="Save" outlined></Button>
<Button @click="confirm2($event)" label="Delete" severity="danger" outlined></Button>

模板 #

模板允许自定义消息内容。


<ConfirmPopup group="templating">
    <template #message="slotProps">
        <div class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700 p-4 mb-4 pb-0">
            <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
            <p>{{ slotProps.message.message }}</p>
        </div>
    </template>
</ConfirmPopup>
<Button @click="showTemplate($event)" label="Save"></Button>

无头模式 #

通过定义一个 container 插槽来启用无头模式，该插槽允许您实现整个确认 UI，而不是默认元素。


<ConfirmPopup group="headless">
    <template #container="{ message, acceptCallback, rejectCallback }">
        <div class="rounded p-4">
            <span>{{ message.message }}</span>
            <div class="flex items-center gap-2 mt-4">
                <Button label="Save" @click="acceptCallback" size="small"></Button>
                <Button label="Cancel" outlined @click="rejectCallback" severity="secondary" size="small" text></Button>
            </div>
        </div>
    </template>
</ConfirmPopup>
<Button @click="requireConfirmation($event)" label="Save"></Button>

可访问性 #

屏幕阅读器

ConfirmPopup 组件使用 alertdialog 角色，并且由于任何属性都传递给根元素，您可以定义诸如 aria-label 或 aria-labelledby 之类的属性来描述弹出窗口的内容。此外，由于焦点保持在弹出窗口内，因此添加了 aria-modal。

当使用 $confirm 实例的 require 方法并将触发器作为参数传递时，ConfirmPopup 会向触发器添加 aria-expanded 状态属性和 aria-controls，以便定义触发器和对话框之间的关系。


<ConfirmPopup id="confirm" aria-label="popup" />

<Button @click="openPopup($event)" label="Confirm" id="confirmButton" :aria-expanded="isVisible" :aria-controls="isVisible ? 'confirm' : null" />


<script setup>
const confirm = useConfirm();
const isVisible = ref(false);
const openPopup = (event) => {
    confirm.require({
        target: event.currentTarget,
        message: 'Are you sure you want to proceed?',
        header: 'Confirmation',
        onShow: () => {
            isVisible.value = true;
        },
        onHide: () => {
            isVisible.value = false;
        }
    });
}
</script>

覆盖层键盘支持

按键	功能
tab	将焦点移动到弹出窗口内的下一个可聚焦元素。
shift + tab	将焦点移动到弹出窗口内的上一个可聚焦元素。
escape	关闭弹出窗口并将焦点移动到触发器。

按钮键盘支持

按键	功能
enter	触发操作，关闭弹出窗口并将焦点移动到触发器。
space	触发操作，关闭弹出窗口并将焦点移动到触发器。