Vue 3のTeleportでモーダルウィンドウを作成する
2024年12月12日 15:15
Teleportを使うことで、モーダルウィンドウを簡単に作成することができるようになりました。
Vue 3では、以前まで使われていたPortal
というAPIは廃止され、その機能はTeleportに統合されました。
それでは、Teleportを使ってモーダルウィンドウを作成してみましょう。
Teleportは、Vue 3で追加された新しい機能の1つです。
これは、アプリケーションのルート要素以外の場所に、コンポーネントをレンダリングするためのものです。
具体的には、モーダルウィンドウやドロップダウンメニューなど、アプリケーションのルート要素の外に表示したいものを簡単に実現することができます。
それでは、Teleportを使ってモーダルウィンドウを作成してみましょう。
まずは、Vue 3のプロジェクトを作成し、必要なパッケージをインストールします。
次に、モーダルウィンドウ用のコンポーネントを作成します。
次に、モーダルウィンドウを表示するためのボタンを作成します。
ここまでのコードをApp.vue
に追加し、表示してみると、ボタンをクリックするとモーダルウィンドウが表示されます。
しかし、このままだとモーダルウィンドウがアプリケーションのルート要素の中に表示されてしまいます。
ここで、Teleportを使ってモーダルウィンドウをルート要素の外に表示することで、より自然な動作を実現できます。
まずは、Modal.vue
のテンプレートにTeleportを追加します。
次に、モーダルウィンドウを表示するためのボタンをクリックした時に、Teleportを使ってモーダルウィンドウを表示するように変更します。
これで、モーダルウィンドウがルート要素の外に表示されるようになりました。
Teleportを使ってモーダルウィンドウを表示した後、どのようにして閉じることができるのでしょうか。
モーダルウィンドウの外をクリックすることで閉じるようにしたいと思います。
まずは、Modal.vue
のテンプレートに、外側をクリックした時に親コンポーネントのisOpen
をfalse
にするように変更します。
次に、親コンポーネントのModal.vue
の呼び出し部分を、v-model
を使ってisOpen
を双方向バインディングします。
これで、モーダルウィンドウの外をクリックすると自動的に閉じるようになりました。
Teleportを使うことで、ルート要素の外にコンポーネントをレンダリングすることができるようになりました。
これにより、以前までのPortal
と比べてより簡単にモーダルウィンドウなどを作成することができるようになりました。
また、v-model
を使うことで、コンポーネントの双方向バインディングを実現し、モーダルウィンドウの外をクリックすることで自動的に閉じるようにすることもできました。
これからは、Teleportを使ってより使いやすいアプリケーションを作成していきましょう。
[cv:issue_marketplace_engineer]
診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。