ionicActionSheet 装饰器示例 - Javascript

ionicActionSheet 是一个Ionic中的组件，用于实现类似于原生 app 中的 Action Sheet 的效果。它向用户展示一个列表，每个选项都有不同的操作或意义。

在Ionic中，默认使用ion-action-sheet组件。通过装饰器@ionic/angular中的@Component装饰器来使用该组件。下面是一个简单的示例：

<ion-buttons slot="end">
  <ion-button (click)="presentActionSheet()">操作</ion-button>
</ion-buttons>

import { Component } from '@angular/core';
import { ActionSheetController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(
    public actionSheetController: ActionSheetController
  ) {}

  async presentActionSheet() {
    const actionSheet = await this.actionSheetController.create({
      header: '操作',
      buttons: [{
        text: '删除',
        role: 'destructive',
        icon: 'trash',
        handler: () => {
          console.log('Delete clicked');
        }
      }, {
        text: '分享',
        icon: 'share',
        handler: () => {
          console.log('Share clicked');
        }
      }, {
        text: '取消',
        icon: 'close',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      }]
    });
    await actionSheet.present();
  }

}

在presentActionSheet()方法中，我们通过使用ActionSheetController创建了一个actionSheet，并在其中添加了三个按钮。可以看到，每个按钮都有一个text和一个icon，并且还有一个可选择的handler方法。这个handler方法是当用户点击以后需要执行的代码。

最后，我们通过调用actionSheet.present()来展示这个action sheet。

以上是一个简单的ionicActionSheet装饰器示例。虽然它比较简单，但它可以让您了解如何使用此组件，以及如何在应用中添加自定义操作表。

参考链接

• Ionic 官方文档
• Angular 官方文档