标题重写为：PrimeVue ConfirmDialog Multiple Instances Issue

Question

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

我尝试过的： 使用密钥

<ConfirmDialog key="myDialog" />

...

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

感谢您的帮助。

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>