Ionic Vue에서 모달 만들기

이온 모달 내부에 렌더링하려는 구성 요소를 만듭니다.



@/components/modal.vue

<template>
  <ion-header>
    <ion-toolbar>
      <ion-title>Modal</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">
    This is a modal
  </ion-content>
</template>

<script>
import { IonContent, IonHeader, IonTitle, IonToolbar } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  name: "Modal",
  components: { IonContent, IonHeader, IonTitle, IonToolbar },
});
</script>


모달을 여는 모달 인스턴스 및 메서드 만들기



@/views/Home.vue

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Ionic Vue Modal Example</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-button @click="openModal">Open Modal</ion-button>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonButton,
  modalController,
} from "@ionic/vue";
import { defineComponent } from "vue";

import Modal from "@/components/modal.vue";

export default defineComponent({
  name: "Home",
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
    IonButton,
  },
  setup() {
    const openModal = async () => {
      const modal = await modalController.create({
        component: Modal, //Modal is name of the component to render inside ionic modal
      });
      return modal.present();
    };

    return { openModal };
  },
});
</script>



  • @ionic/vue에서 modalController를 가져옵니다.
  • @/components/modal.vue에서 컴포넌트 Modal을 가져옵니다.
  • "Open Modal"버튼을 클릭할 때 모달을 표시하는 메서드 openModal을 만듭니다.

  • 모달을 닫는 메소드 생성



    @/components/modal.vue

    <template>
      <ion-header>
        <ion-toolbar>
          <ion-title>Modal</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="ion-padding">
        This is a modal <br />
        <ion-button @click="closeModal">Close Modal</ion-button>
      </ion-content>
    </template>
    
    <script>
    import {
      IonContent,
      IonHeader,
      IonTitle,
      IonToolbar,
      IonButton,
      modalController,
    } from "@ionic/vue";
    import { defineComponent } from "vue";
    
    export default defineComponent({
      name: "Modal",
      components: { IonContent, IonHeader, IonTitle, IonToolbar, IonButton },
      setup() {
        const closeModal = () => {
          modalController.dismiss();
        };
    
        return { closeModal };
      },
    });
    </script>
    


  • @ionic/vue에서 modalController를 가져옵니다.
  • "Close Modal"버튼을 클릭할 때 모달을 닫는 closeModal 메서드를 만듭니다.
  • 좋은 웹페이지 즐겨찾기