Memperbaiki Perpustakaan vue-js-modal untuk Vue Panduan untuk Memulihkan Fungsi Modal

Dalam salah satu projek Vue 2 saya, saya menggunakan perpustakaan vue-js-modal. Walau bagaimanapun, selepas memindahkan projek daripada Vue 2 ke Vue 3, mod tidak berfungsi dengan betul. Walaupun penyelidikan yang meluas, saya tidak menemui sebarang dokumentasi atau perbincangan yang menangani isu ini, yang menyebabkan saya menulis artikel ini.

Dalam artikel ini, saya akan berkongsi perubahan yang saya buat untuk menyesuaikan vue-js-modal untuk Vue 3. Saya harap anda dapati cerapan ini membantu!

Mula-mula, sila semak urutan GitHub dan gunakan perubahan yang dicadangkan di sini: https://github.com/euvl/vue-js-modal/issues/814

Selepas mengikuti cadangan daripada urutan GitHub, anda mungkin masih menghadapi masalah dengan modal dalam projek Vue 3 anda. Untuk menyelesaikan masalah ini sepenuhnya, saya membuat beberapa perubahan pada fail PluginCore.js dan Plugin.js. Di bawah, anda akan menemui butiran perubahan ini.

Perubahan dalam Plugin.js
Ubah suai pemalam:

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;

Perubahan dalam PluginCore.js
Import dan Permulaan:

Ganti import dan permulaan sedia ada dengan yang berikut:

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

Tunjukkan Modal Dinamik:

Kemas kini logik untuk menunjukkan modal dinamik:

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

Tetapkan Bekas Modal Dinamik:

Ubah suai fungsi yang bertanggungjawab untuk menetapkan bekas modal:

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

Perubahan Akhir dalam ModalsContainer.vue
Sebagai sebahagian daripada pemindahan ke Vue 3, adalah perlu untuk membuat pelarasan khusus dalam komponen ModalsContainer.vue.

Mengemas kini Pendengar Acara:

Dalam fail ModalsContainer.vue, alih keluar arahan v-on="$listeners" sedia ada dan gantikannya dengan:

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

Perubahan ini hendaklah dibuat di baris nombor 13.

Dengan membuat pelarasan ini, anda sepatutnya berjaya memindahkan pustaka vue-js-modal untuk berfungsi dengan lancar dengan Vue 3. Saya harap langkah ini membantu anda menyelesaikan sebarang isu yang tinggal dengan modal anda! Jika anda memerlukan bantuan lanjut, jangan teragak-agak untuk bertanya di bahagian komen. Selain itu, saya akan menghargai sebarang maklum balas atau pandangan yang anda miliki, jadi sila tinggalkan ulasan anda di bawah

https://www.aliozzaim.com

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

Atas ialah kandungan terperinci Memperbaiki Perpustakaan vue-js-modal untuk Vue Panduan untuk Memulihkan Fungsi Modal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!