PrimeVue ConfirmDialog 打开多次答案

【问题标题】：PrimeVue ConfirmDialog Opens Multiple TimesPrimeVue ConfirmDialog 打开多次
【发布时间】：2022-12-16 05:08:59
【问题描述】：

我有一个来自 PrimeVue 的 <ConfirmDialog> 组件，它可以正常工作，除了它在激活时会打开多次；作为参考，我在整个过程中做了多次该组件，一些ConfirmDialogs只打开一次，大多数通常打开两次。当接受或拒绝对话框时，它们都立即关闭，但是当按下对话框右上角的'X'时，它一次只关闭一个实例，显示打开了多个对话框。

我试过的：使用钥匙

<ConfirmDialog key="myDialog" />

...

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

感谢您的协助。

【问题讨论】：

标签： javascript vue.js components primevue

【解决方案1】：

我遇到了这个问题，我发现它是由在 DOM 标记中声明多个 ConfirmDialog 组件引起的。例如，如果您向使用它的每个组件添加一个确认对话框，然后您碰巧同时在页面上加载 2+ 个组件，您将看到该页面上存在的每个 <ConfirmDialog /> 都有一个对话框。

解决方案是只在根 Vue 组件中声明一次 ConfirmDialog，然后每次调用它时，只导入 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 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: () => {},
    });
};
</script>

<template>
    <div>
        <button @click="onRemoveThing">Remove</button>
    </div>
</template>

【讨论】：