Vue용 vue-js-modal 라이브러리 수정 모달 기능 복원 가이드

In one of my Vue 2 projects, I utilized the vue-js-modal library. However, after migrating the project from Vue 2 to Vue 3, the modal didn’t work properly. Despite extensive research, I couldn't find any documentation or discussions addressing this issue, which led me to write this article.

In this article, I will share the changes I made to adapt vue-js-modal for Vue 3. I hope you find these insights helpful!

First, please review the GitHub thread and apply the changes suggested here: https://github.com/euvl/vue-js-modal/issues/814

After following the suggestions from the GitHub thread, you might still encounter issues with the modal in your Vue 3 project. To fully resolve these problems, I made several changes to the PluginCore.js and Plugin.js files. Below, you'll find the details of these changes.

Changes in Plugin.js
Modify the 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;

Changes in PluginCore.js
Imports and Initialization:

Replace the existing imports and initialization with the following:

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

Show Dynamic Modal:

Update the logic for showing dynamic modals:

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

Set Dynamic Modal Container:

Modify the function responsible for setting the modal container:

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

Final Changes in ModalsContainer.vue
As part of the migration to Vue 3, it was necessary to make a specific adjustment in the ModalsContainer.vue component.

Updating Event Listeners:

In the ModalsContainer.vue file, remove the existing v-on="$listeners" directive and replace it with:

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

This change should be made at line number 13.

By making these adjustments, you should be able to successfully migrate the vue-js-modal library to work seamlessly with Vue 3. I hope these steps help you resolve any remaining issues with your modals! If you need further assistance, please don't hesitate to ask in the comments section. Additionally, I would appreciate any feedback or insights you have, so feel free to leave your comments below

https://www.aliozzaim.com

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

위 내용은 Vue용 vue-js-modal 라이브러리 수정 모달 기능 복원 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!