[Ionic x Vue] モーダルによる画面遷移を作る

はじめに

Ionicはクロスプラットフォームのモバイルアプリ向けフレームワークです。主にiOS/Android向けに、ワンソースコードでモバイルアプリを開発することができます。

今回はモーダルの使い方を解説します。

事前準備

こちらのブログ を通して作成したプロジェクトをベースに進めます。

モーダルとは

モーダルは、現在表示している画面に割り込む形で新しい画面を表示する画面遷移手法です。

• ion-modal - Ionic Documentation

次のような画面遷移をします。

Ionicでは、モーダルを使って画面遷移をする場合はルーティングに変更はありません。つまりリロードすると元の画面に戻ります。

モーダルを実装する

Home.vue に ModalDemo.vue に遷移するボタンを置き、そのクリックイベントで画面遷移を行います。なお、モーダルから戻ってきた際に値の受け渡しができるので、それも試してみます。

Home.vue

<template>
  <ion-nav class="ion-page">
    <ion-header>
      <ion-toolbar>
        <ion-title>Hello World</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <h1>Welcome To @ionic/vue</h1>
      <img alt="Vue logo" src="../assets/logo.png" />
      <ion-button @click="onClick" full>Go to ModalDemo Page</ion-button>
      <p>{{ message }}</p>
    </ion-content>
  </ion-nav>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      message: null,
    }
  },
  methods: {
    async onClick() {
      const modal = await this.$ionic.modalController.create({
        component: ModalDemo,
        componentProps: {
          data: {
            content: 'New Content',
          },
          propsData: {
            title: 'New title',
          },
        }
      });
      modal.present();
      const { data } = await modal.onDidDismiss();
      this.message = data.message;
    }
  }
}
</script>

About.vue は画面遷移先です。こちらは閉じれるようボタンを配置します。閉じる処理内で値を渡します。

ModalDemo.vue

<template>
  <div class="modal-demo">
    <ion-header>
      <ion-toolbar>
        <ion-title>{{ title }}</ion-title>
        <ion-buttons slot="end">
          <ion-button @click="onCancel">Cancel</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content padding>
      {{ content }}
    </ion-content>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  name: 'modal-demo',
  props: {
    title: { type: String, default: 'Super Modal' },
  },
  data() {
    return {
      content: 'Content',
    }
  },
  methods: {
      onCancel() {
          this.$ionic.modalController.dismiss({
              message: 'Cancel'
          });
      }
  }
}
</script>

これで動かすと、画面遷移ができます。

ネイティブアプリのような画面遷移を作ろう

モーダルは前述の通り、画面に差し込む形で表示させる画面遷移です。例えば何か一覧から選択させる時などに幅広く使えます。