HarmonyOS 关于自定义弹窗的封装调用

<!-- LoadingDialog.hml -->
@entry
<dialog id="loadingDialog" controller="{{this}}">
    <div class="dialog-container">
        <progress circular></progress>
        <text>加载中...</text>
    </div>
</dialog>

/* LoadingDialog.hss */
.dialog-container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

progress {
    width: 50px;
    height: 50px;
}

// LoadingDialog.js
export default {
    show() {
        this.$element('loadingDialog').show();
    },
    hide() {
        this.$element('loadingDialog').close();
    }
}

<!-- MainPage.hml -->
<component src="@resources/LoadingDialog" id="loadingDialogComponent"></component>

<div>
    <!-- 页面其他内容 -->
    <button onclick="showLoading()">Show Loading</button>
    <button onclick="hideLoading()">Hide Loading</button>
</div>

// MainPage.js
export default {
    data: {
        loadingDialog: null,
    },
    onInit() {
        this.loadingDialog = this.$element('loadingDialogComponent');
    },
    showLoading() {
        this.loadingDialog.show();
    },
    hideLoading() {
        this.loadingDialog.hide();
    }
}

@CustomDialog  
struct CustomDialogExample {  
  textContent: string = ''  
  dialogController: CustomDialogController = new CustomDialogController({  
    builder: CustomDialogExample(),  
  })  
  
  build() {  
    Column() {  
      Text(this.textContent)  
        .fontSize(20)  
        .margin({ top: 10, bottom: 10 })  
    }  
  }  
}  
  
  
@Entry  
@Component  
struct Index {  
  @Builder  
  ButtonShowToast(buttonText: string, content: string) {  
    Button(buttonText)  
      .onClick(() => {  
        let dialogController: CustomDialogController = new CustomDialogController({  
          builder: CustomDialogExample({ textContent: content }),  
        })  
        dialogController.open()  
      })  
  }  
  
  build() {  
    Row() {  
      Column() {  
        this.ButtonShowToast('test1', '加载中1...')  
        this.ButtonShowToast('test2', '加载中2...')  
      }  
    }  
  }  
}