मेरे Vue 2 प्रोजेक्ट्स में से एक में, मैंने Vue-js-modal लाइब्रेरी का उपयोग किया। हालाँकि, प्रोजेक्ट को Vue 2 से Vue 3 पर स्थानांतरित करने के बाद, मोडल ठीक से काम नहीं करता था। व्यापक शोध के बावजूद, मुझे इस मुद्दे को संबोधित करने वाला कोई दस्तावेज़ या चर्चा नहीं मिली, जिसके कारण मुझे यह लेख लिखना पड़ा।

इस लेख में, मैं Vue 3 के लिए vue-js-modal को अनुकूलित करने के लिए किए गए परिवर्तनों को साझा करूंगा। मुझे आशा है कि आपको ये जानकारियां उपयोगी लगेंगी!

सबसे पहले, कृपया 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 3 के साथ निर्बाध रूप से काम करने के लिए Vue-js-modal लाइब्रेरी को सफलतापूर्वक स्थानांतरित करने में सक्षम होना चाहिए। मुझे आशा है कि ये चरण आपके मॉडल्स के साथ किसी भी शेष समस्या को हल करने में आपकी सहायता करेंगे! यदि आपको और सहायता की आवश्यकता है, तो कृपया टिप्पणी अनुभाग में पूछने में संकोच न करें। इसके अतिरिक्त, मैं आपकी किसी भी प्रतिक्रिया या अंतर्दृष्टि की सराहना करूंगा, इसलिए बेझिझक अपनी टिप्पणियाँ नीचे छोड़ें

https://www.aliozzim.com

संदर्भ
https://github.com/euvl/vue-js-modal/issues/814
https://github.com/euvl/vue-js-modal