差分

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

--- ionic4:ionic-vue [2019/04/30] – [src/views/Home.vueとAbout.vueの変更] 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}}
 ===== 開発環境 =====
@@ 行 322: / 行 334: @@
 {{:ionic4:pasted:20190430-134025.png}}
+画像つきカードCardを作成することができました。
+===== ion-modalを試してみる =====
+modalという、リンクをクリックすると一時的に出てくる画面を試してみます。
+src/views/Modal.vueを新規作成し、
+src/views/About.vueに"Open Modal"ボタンを設置し、そのボタンをクリックすると、Modal.vueが表示されるようにします。
+参考：https://ionicframework.com/docs/api/modal
+{{:ionic4:pasted:20190430-134513.png}}
+src/views/Modal.vueを新規作成
+<code>
+<template>
+  <div>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>{{ title }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content padding>
+      {{ content }}
+    </ion-content>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Modal',
+  props: {
+    title: { type: String, default: 'Super Modal' },
+  },
+  data() {
+    return {
+      content: 'Content',
+    }
+  },
+}
+</script>
+</code>
+{{:ionic4:pasted:20190430-134720.png}}
+src/views/About.vue
+<code>
+// <template>内に、
+<div text-center>
+  <ion-button color="success" fill="outline" @click="openModal">Open Modal</ion-button>
+</div>
+// <script>内は、以下のように
+<script>
+import Modal from './modal.vue'
+export default {
+  name: "about",
+  methods: {
+    openModal() {
+      return this.$ionic.modalController
+        .create({
+          component: Modal,
+          componentProps: {
+            data: {
+              content: 'New Content',
+            },
+            propsData: {
+              title: 'New title',
+            },
+          },
+        })
+        .then(m => m.present())
+    },
+  },
+}
+</script>
+</code>
+{{:ionic4:pasted:20190430-141043.png}}
+{{:ionic4:pasted:20190430-141132.png}}
+{{:ionic4:pasted:20190430-141155.png}}
+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}}