我遇到了這個問題，我發現它是由在 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>