في أحد مشاريع 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