在我的一個 Vue 2 專案中，我使用了 vue-js-modal 函式庫。然而，將專案從 Vue 2 遷移到 Vue 3 後，模式無法正常運作。儘管進行了廣泛的研究，但我找不到任何解決此問題的文件或討論，這促使我寫了這篇文章。

在這篇文章中，我將分享我為使 vue-js-modal 適應 Vue 3 所做的更改。我希望這些見解對您有幫助！

首先，請查看 GitHub 線程並應用此處建議的更改：https://github.com/euvl/vue-js-modal/issues/814

遵循 GitHub 執行緒的建議後，您可能仍會在 Vue 3 專案中遇到模式問題。為了完全解決這些問題，我對 PluginCore.js 和 Plugin.js 檔案進行了一些更改。您將在下面找到這些變更的詳細資訊。

Plugin.js 中的更改
修改插件：

import Modal from './components/Modal.vue';
import Dialog from './components/Dialog.vue';
import PluginCore from './PluginCore';

const Plugin = {
    install(app, options = {}) {
        if (app.config.globalProperties.$modal) {
            return;
        }

        const plugin = PluginCore(options);

        app.config.globalProperties.$modal = plugin;
        app.provide('$modal', plugin);

        app.mixin({
            mounted() {
                if (this.$root === this) {
                    if (!plugin.context.root) {
                        plugin.setDynamicModalContainer(this);
                    }
                }
            },
        });

        app.component(plugin.context.componentName, Modal);

        if (options.dialog) {
            app.component('Dialog', Dialog);
        }
    },
};

export default Plugin;

PluginCore.js 中的更改
導入與初始化：

用以下內容取代現有的導入和初始化：

import { h, render, createVNode } from 'vue';

顯示動態模態：

更新顯示動態模態的邏輯：

const showDynamicModal = (
    component,
    componentProps,
    componentSlots,
    modalProps = componentSlots || {},
    modalEvents
) => {
    const container = context.root?.__modalContainer;
    const defaults = options.dynamicDefaults || {};

    if (!container) {
        console.warn('Modal container not found. Make sure the dynamic modal container is set.');
        return;
    }
    container.add(
        component,
        componentProps,
        componentSlots,
        { ...defaults, ...modalProps },
        modalEvents
    );
};

設定動態模態容器：

修改負責設定模態容器的函數：

const setDynamicModalContainer = (root) => {
    context.root = root;

    if (!root) {
        console.warn('Root component is undefined. Make sure the root instance is passed correctly.');
        return;
    }

    const element = createDivInBody();

    const vnode = createVNode(ModalsContainer);
    vnode.appContext = root.$.appContext;

    try {
        return render(vnode, element);
    } catch (error) {
        console.error('Error rendering vnode:', error);
    }
};

ModalsContainer.vue 的最終更改
作為遷移到 Vue 3 的一部分，有必要在 ModalsContainer.vue 元件中進行具體調整。

更新事件監聽器：

在 ModalsContainer.vue 檔案中，刪除現有的 v-on="$listeners" 指令並將其替換為：

v-on="modal.componentListeners" || {}

此更改應在第 13 行進行。

透過進行這些調整，您應該能夠成功遷移 vue-js-modal 庫以與 Vue 3 無縫協作。我希望這些步驟可以幫助您解決模態的任何剩餘問題！如果您需要進一步的協助，請隨時在評論部分提問。此外，如果您有任何反饋或見解，我將不勝感激，因此請隨時在下面留下您的評論

https://www.aliozzaim.com

參考
https://github.com/euvl/vue-js-modal/issues/814
https://github.com/euvl/vue-js-modal