Harmony OS 自定义弹窗组件 @CustomDialog的使用方法

最新推荐文章于 2026-06-18 21:05:44 发布

原创

最新推荐文章于 2026-06-18 21:05:44 发布 · 452 阅读

标签

#前端 #javascript #开发语言

收录于

以预览图片为例

先创建一个名为PreViewImage 的 @CustomDialog 组件，并用export default PreViewImage，导出组件。

@CustomDialog
struct PreViewImage {
  controller: CustomDialogController
  url: string = ''

  build() {
    Column() {
      Image(this.url)
        .width('100%')
    }
    .backgroundColor(Color.Black)
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .onClick(()=>{
      this.controller.close()
    })
  }
}

export default PreViewImage

再在父组件创建一个命名为preViewControl的CustomDialogController ，将PreViewImage组件作为builder的参数，将url传递给PreViewImage组件，将custcuomStyle值设为true,将控制@CustomDialog的方法写入方法内，这样调用preViewImageFn时也就调用了this.preViewControl.open()，将弹窗打开了。

       // 父组件 多个image message
       import Message from './Message'
       import PreViewImage from './PreViewImage'
       @State
       messageList: MessageInfoModel[] = []
         preViewUrl: string = ''

       preViewControl: CustomDialogController = new CustomDia