ユーザ用ツール

サイト用ツール


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 [Vue.jsでIonic(@ionic/vue)]
行 15: 行 15:
  
 上記Blogを写経してみたいと思います。 上記Blogを写経してみたいと思います。
 +
 +===== ソースコードとDEMOサイト =====
 +ソースコード
 +https://github.com/adash333/ionic4-vue-modal
 +
 +DEMOサイト
 +https://compassionate-neumann-66e20f.netlify.com/
 +
 +{{:ionic4:pasted:20190430-144410.png}}
  
 ===== 開発環境 ===== ===== 開発環境 =====
行 408: 行 417:
 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