鸿蒙next自定义弹窗

自定义弹窗组件MyDialog

@CustomDialog
export struct MyDialog {
  title?: string
  cancelBtnText?: string
  confirmBtnText?: string
  message?: string
  cancel: () => void = () => {}
  confirm: () => void = () => {}
  controller: CustomDialogController

  build() {
    Column({space: 16 }) {
      Text(this.title).fontSize(20).fontWeight(FontWeight.Bold)
      Text(this.message){
      }.fontSize(16)
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button(this.cancelBtnText)
          .onClick(() => {
            this.cancel()
            this.controller.close()
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        Button(this.confirmBtnText)
          .onClick(() => {
            this.confirm()
            this.controller.close()
          }).backgroundColor(0xffffff).fontColor(Color.Red)
      }.margin({ bottom: 10 })
    }
    .padding(16)
  }
}

调用

import { MyDialog } from './component/MyDialog';

@Entry
@Component
struct Page {

  @State message: string = 'Hello World';

  build() {
    Column() {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          this.dialogController.open();
        })
    }
    .height('100%')
    .width('100%')
  }

  // 自定义弹窗
  dialogController: CustomDialogController = new CustomDialogController({
    builder: MyDialog({
      title: '标题',
      cancelBtnText: '取消',
      confirmBtnText: '确定',
      message: '这是弹窗内容',
      cancel: ()=> { this.onCancel() },
      confirm: ()=> { this.onAccept() }
    })
  })

  onCancel() {
    console.log('取消');
  }

  onAccept() {
    console.log('确定');
  }
}