Ionic5 Vue3 Javascript扩展 Modal模态对话框 以及Modal模态对话框传值

ionic5 Vue3实战教程： https://www.itying.com/goods-1150.html

一、Modal模态对话框简介

官方文档：https://ionicframework.com/docs/api/modal Modal模态对话框主要用于登录注册页面，我们可以把它理解为从页面底部弹出的另一个页面。

二、Modal模态对话框的创建以及主页面给模态对话框页面传值

比如我们想在modal页面中弹出另一个页面

1、新建一个模态对话框组件modal/LoginModal.vue

<template>
  <ion-header>
    <ion-toolbar>
      <ion-title>{{ title }}</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">
    {{ content }}
  </ion-content>
</template>

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

export default defineComponent({
  name: 'Modal',
  props: {
    title: { type: String, default: 'Super Modal' },
  },
  data() {
    return {
      content: 'Content',
    }
  },
  components: { IonContent, IonHeader, IonTitle, IonToolbar }
});
</script>

2、弹出模态对话框

<template>
  <ion-page>
    <ion-content class="ion-padding">
      <ion-button @click="openModal">Open Modal</ion-button>
    </ion-content>
  </ion-page>
</template>

<script>
import { IonButton, IonContent, IonPage, modalController } from '@ionic/vue';
import Modal from './modal.vue'

export default {
  components: { IonButton, IonContent, IonPage },
  methods: {
    async openModal() {
      const modal = await modalController
        .create({
          component: Modal,
          cssClass: 'my-custom-class',
          componentProps: {
            title: 'New Title'
          },
        })
      return modal.present();
    },
  },
}
</script>

三、关闭模态对话框

在弹出的组件页面中使用modalController.dismiss()就可以关闭模态对话框

<template>
  <ion-header>
    <ion-toolbar>
      <ion-title>用户登录</ion-title>
      <ion-buttons slot="end">
        <ion-button v-on:click="close()">
          关闭
        </ion-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">
   这是用户登录页面
  </ion-content>
</template>
<script>
import { IonContent, IonHeader, IonTitle, IonToolbar,modalController} from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Modal',
  props: {
    title: { type: String, default: 'Super Modal' },
  },
  data() {
    return {
      content: 'Content',
    }
  },
  methods:{
     close(){
        modalController.dismiss()
     }
  },
  components: { IonContent, IonHeader, IonTitle, IonToolbar }
});
</script>

四、模态对话框页面给主页面传值

一、关闭的时候传值

modalController.dismiss({
     username:"张三",
     age:20
})

二、主页面接收传值

 async openModal() {
      const modal = await modalController
        .create({
          component: LoginModal,
          cssClass: 'my-custom-class',
          componentProps: {
            title: 'New Title'
          },
        })     
        modal.present();

        const { data } = await modal.onDidDismiss();       
        console.log(data);
     
}