ionic4:ionic-vue

差分

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

この比較画面へのリンク

--- ionic4:ionic-vue [2019/04/30] – [src/views/Home.vueとAbout.vueの変更(ion-buttonとion-card)] adash333
+++ ionic4:ionic-vue [2020/12/03] (現在) – [Vue.jsでIonic（@ionic/vue）] adash333
@@ 行 1: / 行 1: @@
 ====== Vue.jsでIonic（@ionic/vue） ======
+→2020年10月 ionic-vueが正式対応したそうです。
+https://i-doctor.sakura.ne.jp/font/?p=45127
 Ionicは、スマホアプリ（PWAを含む）作成のためのJavascriptフレームワークです。Ionic3まではAngular専用でしたが、Ionic4から、素のJavascript(Vanilla)、ReactとVueにも対応する予定だそうです。
@@ 行 15: / 行 18: @@
 上記Blogを写経してみたいと思います。
+===== ソースコードとDEMOサイト =====
+ソースコード
+https://github.com/adash333/ionic4-vue-modal
+DEMOサイト
+https://compassionate-neumann-66e20f.netlify.com/
+{{:ionic4:pasted:20190430-144410.png}}
 ===== 開発環境 =====
@@ 行 408: / 行 420: @@
 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.1556633534.txt.gz · 最終更新: 2019/04/30 by adash333