イオン性Vueを持つ積層モデルの使用

イオン5が放出されたので、それは新しいコンポーネントを使用することが可能ですiOS UI Kit これにより、ユーザーの以前の現在のコンテキストから別の一時モードでコンテンツを開くことができます.
これらの内容は、ionic modal controller そして、彼らは@イオン/角度と@イオン/反応で非常によく働くが、彼らはまだ完全にイオン/Vueでサポートされていませんが、この機能を回避策を使用して動作するようにする方法がありますので、生産でそれを使用する場合は注意してください.
スタックモードを使用するには、現在のアクセスにアクセスする必要がありますIonRouterOutlet 参考までに現在のところ、それを参照する公式メソッドはないので、私たちはVUE 3を使用しますprovide アプリケーションコンポーネントからの参照を提供するメソッドとinject 各子コンポーネントにアクセスする方法.
/src/appVue

<template>
  <IonApp>
    <ion-router-outlet
      ref="routerOuteletRef"
      id="main-content"
    ></ion-router-outlet>
  </IonApp>
</template>

<script lang="ts">
import { IonApp, IonRouterOutlet } from "@ionic/vue";
import { defineComponent, ref, provide } from "vue";

export default defineComponent({
  name: "App",
  components: {
    IonApp,
    IonRouterOutlet,
  },
  setup() {
    // create an empty ref
    const routerOuteletRef = ref(null);
    // provide the value in the component hierarchy
    provide("routerOutlet", routerOuteletRef);

    return { routerOuteletRef };
  },
});
</script>

今、我々は一般的な“ホーム”コンポーネントを使用します
スタティックモードは、PresentingElementオプションをモーダルコントローラーに渡すことによって起動されます.
/src/view/homeVue

<script lang="ts">
import { defineComponent, inject } from "vue";
import { modalController } from "@ionic/vue"

import Home from "./Home.vue";

export default defineComponent({
  name: "Home",
  setup() {
    const outlet: any = inject("routerOutlet");

    const openModal = async () => {
      // use the last presenting element
      const top = (await modalController.getTop()) || outlet.value.$el;

      const modal = await modalController.create({
        component: Home,
        swipeToClose: true,
        presentingElement: top,
      });
      return modal.present();
    };

    return {
      openModal,
    };
  },
});
</script>

Here a fully working コードサンドボックスの例.