ユーザ用ツール

サイト用ツール


ionic4:ionic-vue

差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン両方とも次のリビジョン
ionic4:ionic-vue [2019/04/30] – [src/views/Home.vueとAbout.vueの変更(ion-buttonとion-card)] adash333ionic4:ionic-vue [2019/04/30] – [ion-modalを試してみる] 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画面を閉じるボタンの実装を行うことができました。
 +
 +===== ソースコード =====
  
  

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

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki