В одном из моих проектов 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