In einem meiner Vue 2-Projekte habe ich die vue-js-modal-Bibliothek verwendet. Nach der Migration des Projekts von Vue 2 auf Vue 3 funktionierte das Modal jedoch nicht richtig. Trotz umfangreicher Recherchen konnte ich keine Dokumentation oder Diskussionen zu diesem Problem finden, was mich dazu veranlasste, diesen Artikel zu schreiben.

In diesem Artikel werde ich die Änderungen teilen, die ich vorgenommen habe, um vue-js-modal für Vue 3 anzupassen. Ich hoffe, Sie finden diese Erkenntnisse hilfreich!

Bitte lesen Sie zunächst den GitHub-Thread und wenden Sie die hier vorgeschlagenen Änderungen an: https://github.com/euvl/vue-js-modal/issues/814

Nachdem Sie den Vorschlägen aus dem GitHub-Thread gefolgt sind, können in Ihrem Vue 3-Projekt immer noch Probleme mit dem Modal auftreten. Um diese Probleme vollständig zu beheben, habe ich mehrere Änderungen an den Dateien PluginCore.js und Plugin.js vorgenommen. Nachfolgend finden Sie die Einzelheiten zu diesen Änderungen.

Änderungen in Plugin.js
Ändern Sie das Plugin:

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;

Änderungen in PluginCore.js
Importe und Initialisierung:

Ersetzen Sie die vorhandenen Importe und Initialisierungen durch Folgendes:

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

Dynamisches Modal anzeigen:

Aktualisieren Sie die Logik zum Anzeigen dynamischer Modalitäten:

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
    );
};

Dynamischen modalen Container festlegen:

Ändern Sie die Funktion, die für das Festlegen des modalen Containers verantwortlich ist:

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);
    }
};

Letzte Änderungen in ModalsContainer.vue
Im Rahmen der Migration auf Vue 3 war eine spezifische Anpassung in der ModalsContainer.vue-Komponente erforderlich.

Ereignis-Listener aktualisieren:

Entfernen Sie in der Datei ModalsContainer.vue die vorhandene v-on="$listeners"-Direktive und ersetzen Sie sie durch:

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

Diese Änderung sollte in Zeile 13 vorgenommen werden.

Durch diese Anpassungen sollten Sie in der Lage sein, die vue-js-modal-Bibliothek erfolgreich zu migrieren, um nahtlos mit Vue 3 zu arbeiten. Ich hoffe, diese Schritte helfen Ihnen, alle verbleibenden Probleme mit Ihren Modalen zu lösen! Wenn Sie weitere Hilfe benötigen, zögern Sie bitte nicht, im Kommentarbereich nachzufragen. Darüber hinaus würde ich mich über Ihr Feedback oder Ihre Erkenntnisse freuen. Sie können also gerne unten Ihre Kommentare hinterlassen

https://www.aliozzaim.com

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