Vue の vue-js-modal ライブラリを修正する モーダル機能を復元するためのガイド

私の Vue 2 プロジェクトの 1 つでは、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 の変更点
プラグインを変更します:

リーリー

PluginCore.jsの変更点
インポートと初期化:

既存のインポートと初期化を次のものに置き換えます:

リーリー

動的モーダルを表示:

動的モーダルを表示するためのロジックを更新します:

リーリー

動的モーダルコンテナの設定:

モーダルコンテナの設定を担当する関数を変更します:

リーリー

ModalsContainer.vueの最終変更
Vue 3 への移行の一環として、ModalsContainer.vue コンポーネントに特定の調整を行う必要がありました。

イベントリスナーの更新:

ModalsContainer.vue ファイルで、既存の v-on="$listeners" ディレクティブを削除し、次のように置き換えます。

リーリー

この変更は行番号 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

以上がVue の vue-js-modal ライブラリを修正する モーダル機能を復元するためのガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。