Titel umgeschrieben in: PrimeVue ConfirmDialog Multiple Instances Issue

Question

Ich habe eine -Komponente von PrimeVue und sie funktioniert einwandfrei, außer dass sie mehrmals geöffnet wird, wenn sie als Referenz aktiviert wird. Ich führe die Komponente mehrmals aus und einige der Bestätigungsdialoge öffnen sich nur einmal, meistens zweimal. Wenn der Dialog angenommen oder abgelehnt wird, werden alle sofort geschlossen. Wenn Sie jedoch auf das „X“ in der oberen rechten Ecke des Dialogs klicken, wird jeweils nur eine Instanz geschlossen, sodass mehrere geöffnete Dialoge angezeigt werden.

Was ich versucht habe: Verwenden Sie die Taste

<ConfirmDialog key="myDialog" />

...

const confirmer = (
 message,
 header,
 icon,
 ) => {
confirm.require({
 accept: () => { confirm.close()},
 reject: () => { confirm.close()},
 key: 'myDialog'
})}

Danke für deine Hilfe.

Answer 1

我遇到了这个问题，我发现它是由在 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>