У меня есть компонент <ConfirmDialog>
от PrimeVue, который работает как надо, за исключением того, что при активации он открывается несколько раз; для справки, я делаю компонент несколько раз, некоторые ConfirmDialogs открываются только один раз, большинство из них обычно открываются дважды. При принятии или отклонении диалогового окна все они закрываются мгновенно, однако при нажатии «X» в правом верхнем углу диалогового окна он закрывает только один экземпляр за раз, показывая, что открыто несколько диалоговых окон.
Что я пробовал: Использование ключа
<ConfirmDialog key = "myDialog" />
...
const confirmer = (
message,
header,
icon,
) => {
confirm.require({
accept: () => { confirm.close()},
reject: () => { confirm.close()},
key: 'myDialog'
})}
Спасибо за помощь.
У меня была эта проблема, и я обнаружил, что она вызвана объявлением нескольких компонентов ConfirmDialog
в разметке DOM. Например, если вы добавите диалоговое окно подтверждения для каждого компонента, который его использует, а затем вы загрузите более 2 компонентов на страницу одновременно, вы увидите 1 диалоговое окно для каждого <ConfirmDialog />
, который существует на этой странице.
Решение состоит в том, чтобы объявить ConfirmDialog только один раз в вашем корневом компоненте Vue, а затем каждый раз, когда вы его вызываете, только импортируйте функцию useConfirm
, а затем вызывайте диалог с этим.
Например:
App.vue
<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>