Titre réécrit en : PrimeVue ConfirmDialog Problème d'instances multiples

Question

J'ai un composant de PrimeVue et il fonctionne bien sauf qu'il s'ouvre plusieurs fois lorsqu'il est activé ; pour référence, j'exécute le composant plusieurs fois et certaines boîtes de dialogue de confirmation ne s'ouvrent qu'une seule fois, le plus souvent deux fois. Lorsque la boîte de dialogue est acceptée ou rejetée, elles se ferment toutes immédiatement. Cependant, lorsque vous appuyez sur le « X » dans le coin supérieur droit de la boîte de dialogue, une seule instance à la fois est fermée, affichant plusieurs boîtes de dialogue ouvertes.

Ce que j'ai essayé : Utilisez la clé

<ConfirmDialog key="myDialog" />

...

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

Merci pour votre aide.

Answer 1

J'ai rencontré ce problème et j'ai découvert qu'il était dû à la déclaration de plusieurs ConfirmDialog 组件引起的。例如，如果您向使用它的每个组件添加一个确认对话框，然后您碰巧同时在页面上加载 2 个以上组件，则您将看到每个 dans les balises DOM qui avaient toutes 1 boîte de dialogue présente sur la page.

La solution est de déclarer ConfirmDialog une seule fois dans le composant racine de Vue, puis à chaque fois qu'il est appelé, importez simplement la fonction useConfirm puis utilisez cette fonction pour appeler la boîte de dialogue.

Par exemple :

Vue de l'application

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

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

    <ConfirmDialog />
</template>

Tous les autres composants :

<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>