ユーザ用ツール

サイト用ツール


ionic4:ionic-vue

差分

このページの2つのバージョン間の差分を表示します。

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
次のリビジョン 両方とも次のリビジョン
ionic4:ionic-vue [2019/04/30]
adash333 [src/views/Home.vueとAbout.vueの変更(ion-buttonとion-card)]
ionic4:ionic-vue [2019/04/30]
adash333 [ソースコード]
行 408: 行 408:
 Modal画面は開くことはできたが、Modal画面からAbout画面に戻ることができない。。。 Modal画面は開くことはできたが、Modal画面からAbout画面に戻ることができない。。。
  
 +==== Modal画面を閉じるボタンの実装($ionic.modalController.dismiss()) ====
 +Modal画面を閉じるボタンを設置する場合は、Modal.vueの<template>内に%%@click="closeModal"%%のようにcloseModal関数を記載し、<script>内にmethodsでcloseModal()関数を定義します。
  
 +src/views/Modal.vue
 +<code>
 +// <template>内に以下を記載
 +      <div text-center>
 +        <ion-button @click="closeModal">close modal</ion-button>
 +      </div>
  
 +// <script>内に以下を記載
 +  methods: {
 +    closeModal() {
 +      return this.$ionic.modalController.dismiss();
 +    }
 +  }
 +</code>
 +
 +{{:ionic4:pasted:20190430-142909.png}}
 +
 +{{:ionic4:pasted:20190430-142948.png}}
 +
 +{{:ionic4:pasted:20190430-143008.png}}
 +
 +これで、Modal画面の作成と、Modal画面を閉じるボタンの実装を行うことができました。
 +
 +===== ソースコードとDEMOサイト =====
 +ソースコード
 +https://github.com/adash333/ionic4-vue-modal
 +
 +DEMOサイト
 +https://compassionate-neumann-66e20f.netlify.com/
 +
 +{{:ionic4:pasted:20190430-144410.png}}
 +
 +{{:ionic4:pasted:20190430-144428.png}}
 +
 +{{:ionic4:pasted:20190430-144515.png}}
 +
 +{{:ionic4:pasted:20190430-144529.png}}
  
  

ionic4/ionic-vue.txt · 最終更新: 2020/12/03 by adash333