我遇到了这个问题，我发现它是由在 DOM 标记中声明多个 ConfirmDialog 组件引起的。例如，如果您向使用它的每个组件添加一个确认对话框，然后您碰巧同时在页面上加载 2 个以上组件，则您将看到每个 都有 1 个对话框存在于该页面上。

解决方案是仅在根 Vue 组件中声明一次ConfirmDialog，然后每次调用它时，仅导入 useConfirm 函数，然后使用该函数调用对话框。

例如：

应用程序视图

<script setup>
import ConfirmDialog from 'primevue/confirmdialog';
</script>

<template>
    <router-view></router-view>

    <ConfirmDialog />
</template>

所有其他组件：

<script setup>
import { useConfirm } from 'primevue/useconfirm';

const confirm = useConfirm();

const handleRemoveThing = () => {
    // bye
};

const onRemoveThing = () => {
    confirm.require({
        message: 'Are you sure you want to remove some thing?',
        header: 'Remove Thing',
        icon: 'icon-delete',
        rejectLabel: 'Cancel',
        acceptLabel: 'Remove',
        acceptClass: 'p-button-danger',
        accept: handleRemoveThing,
    });
};
</script>

<template>
    <div>
        <button @click="onRemoveThing">Remove</button>
    </div>
</template>