標題重寫為：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>