Tajuk ditulis semula kepada: PrimeVue ConfirmDialog Isu Berbilang Kejadian

Question

Saya mempunyai komponen daripada PrimeVue dan ia berfungsi dengan baik kecuali ia dibuka beberapa kali apabila diaktifkan; sebagai rujukan, saya melaksanakan komponen itu beberapa kali sepanjang dan beberapa dialog pengesahan hanya dibuka sekali, selalunya Buka dua kali. Apabila dialog diterima atau ditolak, kesemuanya ditutup serta-merta, namun, apabila menekan "X" di sudut kanan atas dialog, ia hanya menutup satu kejadian pada satu masa, menunjukkan berbilang dialog terbuka.

Apa yang saya cuba: Gunakan kunci

<ConfirmDialog key="myDialog" />

...

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

Terima kasih atas bantuan anda.

Answer 1

Saya menghadapi masalah ini dan saya mendapati ia berpunca daripada mengisytiharkan berbilang ConfirmDialog 组件引起的。例如，如果您向使用它的每个组件添加一个确认对话框，然后您碰巧同时在页面上加载 2 个以上组件，则您将看到每个 dalam teg DOM yang kesemuanya mempunyai 1 dialog pada halaman.

Penyelesaian adalah untuk mengisytiharkan ConfirmDialog hanya sekali dalam komponen root Vue, dan kemudian setiap kali ia dipanggil, hanya import fungsi useConfirm dan kemudian gunakan fungsi itu untuk memanggil dialog.

Contohnya:

Pandangan Apl

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

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

    <ConfirmDialog />
</template>

Semua komponen lain:

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