Ionic对话框开发全攻略

Ionic 对话框基础概念

Ionic对话框是一种模态组件，用于在应用顶层显示临时内容，常见于确认操作、输入表单或通知场景。通过ion-modal或内置的alert、action-sheet等组件实现。

Alert 对话框示例

Alert对话框适合简单信息展示或确认操作。以下代码展示如何创建带按钮的自定义Alert：

import { alertController } from '@ionic/vue';

const showAlert = async () => {
  const alert = await alertController.create({
    header: '确认删除',
    message: '确定要删除这条记录吗？',
    buttons: [
      {
        text: '取消',
        role: 'cancel'
      },
      {
        text: '删除',
        role: 'confirm',
        handler: () => {
          console.log('记录已删除');
        }
      }
    ]
  });
  await alert.present();
};

Action Sheet 对话框

Action Sheet提供从屏幕底部滑出的选项列表，适合多操作选择场景：

import { actionSheetController } from '@ionic/vue';

const showActionSheet = async () => {
  const actionSheet = await actionSheetController.create({
    header: '分享到',
    buttons: [
      {
        text: '微信',
        icon: 'logo-wechat',
        handler: () => {}
      },
      {
        text: '微博',
        icon: 'logo-weibo',
        handler: () => {}
      },
      {
        text: '取消',
        icon: 'close',
        role: 'cancel'
      }
    ]
  });
  await actionSheet.present();
};

自定义模态对话框

使用ion-modal创建完全自定义的对话框内容：

<template>
  <ion-button @click="openModal">打开模态框</ion-button>
  <ion-modal :is-open="isOpen" @didDismiss="isOpen = false">
    <ion-header>
      <ion-toolbar>
        <ion-title>自定义标题</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <p>这里是自定义内容区域</p>
      <ion-input placeholder="输入内容"></ion-input>
      <ion-button @click="submitForm">提交</ion-button>
    </ion-content>
  </ion-modal>
</template>

<script setup>
import { ref } from 'vue';
const isOpen = ref(false);
const openModal = () => isOpen.value = true;
const submitForm = () => {
  console.log('表单提交');
  isOpen.value = false;
};
</script>

对话框动画定制

通过enterAnimation和leaveAnimation属性自定义动画效果：

import { createAnimation } from '@ionic/vue';

const enterAnimation = (baseEl: HTMLElement) => {
  const root = baseEl.shadowRoot!;
  const backdrop = createAnimation()
    .addElement(root.querySelector('ion-backdrop')!)
    .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
  
  const wrapper = createAnimation()
    .addElement(root.querySelector('.modal-wrapper')!)
    .fromTo('transform', 'translateY(100%)', 'translateY(0)');

  return createAnimation()
    .addElement(baseEl)
    .easing('cubic-bezier(0.36,0.66,0.04,1)')
    .duration(500)
    .addAnimation([backdrop, wrapper]);
};

对话框样式覆盖

通过CSS变量修改默认样式：

ion-modal {
  --width: 80%;
  --height: 50%;
  --border-radius: 16px;
  --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

ion-modal::part(backdrop) {
  background: rgba(0, 0, 255, 0.5);
}

ion-modal ion-toolbar {
  --background: #3880ff;
  --color: white;
}

对话框生命周期事件

监听对话框状态变化：

const modal = await modalController.create({
  component: CustomModal,
  componentProps: {},
  onWillPresent: () => console.log('即将打开'),
  onDidPresent: () => console.log('已经打开'),
  onWillDismiss: () => console.log('即将关闭'),
  onDidDismiss: () => console.log('已经关闭')
});

嵌套对话框处理

处理多层对话框叠加时的z-index问题：

const showNestedModals = async () => {
  const firstModal = await modalController.create({
    component: FirstComponent,
    cssClass: 'nested-modal'
  });
  
  await firstModal.present();
  
  const secondModal = await modalController.create({
    component: SecondComponent,
    cssClass: 'nested-modal'
  });
  
  await secondModal.present();
};

.nested-modal {
  z-index: 10000;
}

.nested-modal + .modal-wrapper {
  z-index: 10001;
}

对话框数据传递

父组件向对话框传递数据：

// 打开对话框时传递参数
const modal = await modalController.create({
  component: CustomModal,
  componentProps: {
    userId: '123',
    data: { name: '示例' }
  }
});

子组件接收参数：

import { IonModal, modalController } from '@ionic/vue';
import { defineProps } from 'vue';

const props = defineProps({
  userId: String,
  data: Object
});

const closeModal = () => {
  modalController.dismiss({
    returnedData: '处理后的数据'
  });
};