一、介绍

本篇 Codelab 次要基于 dialog 和 button 组件，实现弹窗的几种自定义成果，具体成果有：  
1.  正告弹窗，点击确认按钮弹窗敞开。
2.  确认弹窗，点击勾销按钮或确认按钮，触发对应操作。
3.  加载弹窗，展现加载中成果。
4.  提醒弹窗，反对用户输出内容，点击勾销和确认按钮，触发对应操作。
5.  进度条弹窗，展现进度条以及百分比。

相干概念
dialog组件：自定义弹窗容器组件。
button组件：按钮组件。

残缺示例
gitee源码地址[
](https://gitee.com/harmonyos/codelabs/tree/master/DialogDemo)
源码下载
弹窗根本应用（JS）.zip

二、环境搭建

咱们首先须要实现 HarmonyOS 开发环境搭建，可参照如下步骤进行。

软件要求
DevEco Studio版本：DevEco Studio 3.1 Release。 
HarmonyOS SDK版本：API version 9。

硬件要求
设施类型：华为手机或运行在 DevEco Studio 上的华为手机设施模拟器。
HarmonyOS 零碎：3.1.0 Developer Release。

环境搭建
1.  装置 DevEco Studio，详情请参考下载和装置软件。
2.  设置 DevEco Studio 开发环境，DevEco Studio 开发环境须要依赖于网络环境，须要连贯上网络能力确保工具的失常应用，能够依据如下两种状况来配置开发环境：
● 如果能够间接拜访 Internet，只需进行下载HarmonyOS SDK操作。
● 如果网络不能间接拜访 Internet，须要通过代理服务器才能够拜访，请参考配置开发环境。
3.  开发者能够参考以下链接，实现设施调试的相干配置：
● 应用真机进行调试
● 应用模拟器进行调试

三、代码构造解读

本篇 Codelab 只对外围代码进行解说，对于残缺代码，咱们会在源码下载或 gitee 中提供。

├──entry/src/main/js         // 代码区│  └──MainAbility│     ├──common│     │  └──images           // 图片资源│     ├──i18n             // 国际化中英文│     │  ├──en-US.json            │     │  └──zh-CN.json            │     ├──pages│     │  └──index│     │     ├──index.css     // 页面整体布局以及弹窗款式│     │     ├──index.hml     // 自定义弹窗展现页面│     │     └──index.js      // 弹窗显示敞开逻辑以及动画逻辑│     └──app.js              // 程序入口└──entry/src/main/resources  // 利用资源目录

四、构建利用页面

界面次要包含按钮列表页和自定义弹窗两局部，咱们能够通过在 dialog 标签中增加自定义组件设置弹窗，具体成果如图所示：

首先搭建 index.hml 中的按钮页，次要包含 5 种常见的弹窗，别离为 AlertDialog、ConfirmDialog、LoadingDialog、PromptDialog 以及 ProgressDialog。

<!--index.hml--><div class="btn-div">    <button type="capsule" value="AlertDialog" class="btn" onclick="showAlert"></button>    <button type="capsule" value="ConfirmDialog" class="btn" onclick="showConfirm"></button>    <button type="capsule" value="LoadingDialog" class="btn" onclick="showLoading"></button>    <button type="capsule" value="PromptDialog" class="btn" onclick="showPrompt"></button>    <button type="capsule" value="ProgressDialog" class="btn" onclick="showProgress"></button></div>

而后在 index.hml 中创立 AlertDialog 自定义弹窗，成果如图所示：

<!-- index.hml --><!-- AlertDialog自定义弹窗 --><dialog id="alertDialog" class="alert-dialog">    <div class="dialog-div">        <div class="alert-inner-txt">            <text class="txt">AlertDialog</text>        </div>        <div class="alert-inner-btn">            <button class="btn-single" type="capsule" value="Confirm"                 onclick="confirmClick('alertDialog')"></button>        </div>    </div></dialog>

创立 ConfirmDialog 自定义弹窗，成果如图所示：

<!-- index.hml --><!-- ConfirmDialog自定义弹窗 --><dialog id="confirmDialog" class="dialog-main">    <div class="dialog-div">        <div class="inner-txt">            <text class="txt">ConfirmDialog</text>        </div>        <div class="inner-btn">            <button type="capsule" value="Cancel" class="btn-txt-left"                 onclick="cancelClick('confirmDialog')"></button>            <button type="capsule" value="Confirm" class="btn-txt-right"                 onclick="confirmClick('confirmDialog')"></button>        </div>    </div></dialog>

创立 LoadingDialog 自定义弹窗，成果如图所示：

<!-- index.hml --><!-- LoadingDialog自定义弹窗 --><dialog id="loadingDialog" class="low-height-dialog">    <div class="dialog-loading">        <text>Loading...</text>        <image class="loading-img img-rotate" id="loading-img"             src="/common/images/ic_loading.svg"></image>    </div></dialog>

创立 PromptDialog 自定义弹窗，成果如图所示：

<!-- index.hml --><!-- PromptDialog自定义弹窗 --><dialog id="promptDialog" class="dialog-prompt">    <div class="dialog-div-prompt">        <div class="inner-txt-prompt">            <text class="txt">PromptDialog</text>        </div>        <input class="prompt-input" type="password" placeholder="please enter password"></input>        <div class="inner-btn">            <button type="capsule" value="Cancel" class="btn-txt-left"                 onclick="cancelClick('promptDialog')"></button>            <button type="capsule" value="Confirm" class="btn-txt-right"                 onclick="confirmClick('promptDialog')"></button>        </div>    </div></dialog>

创立 ProgressDialog 自定义弹窗，成果如图所示：

<!-- index.hml --><!-- ProgressDialog自定义弹窗 --><dialog id="progressDialog" class="low-height-dialog" oncancel="onCancel">    <div class="dialog-progress-div">        <div class="inner-txt-progress">            <text class="download-txt">Downloading...</text>            <text>{{ percent + '%' }}</text>        </div>        <div class="progress-div">            <progress class="min-progress" type="horizontal" percent="{{ percent }}"                 secondarypercent="50"></progress>        </div>    </div></dialog>

而后在 index.js 文件中实现不同 button 的点击事件，展现对应自定义弹窗：

// index.jsexport default {  data: {...},  // 展现AlertDialog  showAlert() {    this.$element('alertDialog').show();  },  // 展现ConfirmDialog  showConfirm() {    this.$element('confirmDialog').show();  },  // 展现LoadingDialog  showLoading() {    ...    this.animation = this.$element('loading-img').animate(frames, options);    this.animation.play();    this.$element('loadingDialog').show();  },  // 展现PromptDialog  showPrompt() {    this.$element('promptDialog').show();  },  // 展现ProgressDialog  showProgress() {    ...  }}

五、总结

您曾经实现了本次 Codelab 的学习，并理解到以下知识点：
1.  dialog 自定义弹窗容器组件的应用。
2.  button 按钮组件的应用。