Vue の vue-js-modal ライブラリを修正する モーダル機能を復元するためのガイド

私の Vue 2 プロジェクトの 1 つでは、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

以上がVue の vue-js-modal ライブラリを修正する モーダル機能を復元するためのガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。