Ionic Vue에서 모달 만들기
10456 단어 vuetypescriptjavascriptionic
이온 모달 내부에 렌더링하려는 구성 요소를 만듭니다.
@/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>
<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>
모달을 닫는 메소드 생성
@/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>
<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>
Reference
이 문제에 관하여(Ionic Vue에서 모달 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/amitgurbani/creating-a-modal-in-ionic-vue-2fe5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)