Harmony Codelab 样例—弹窗基本使用

一、介绍

本篇 Codelab 主要基于 dialog 和 button 组件，实现弹窗的几种自定义效果，具体效果有：  

1.  警告弹窗，点击确认按钮弹窗关闭。

2.  确认弹窗，点击取消按钮或确认按钮，触发对应操作。

3.  加载弹窗，展示加载中效果。

4.  提示弹窗，支持用户输入内容，点击取消和确认按钮，触发对应操作。

5.  进度条弹窗，展示进度条以及百分比。

相关概念

dialog组件：自定义弹窗容器组件。

button组件：按钮组件。

完整示例

gitee源码地址

源码下载

弹窗基本使用（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 按钮组件的使用。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/136147.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Java基于SpringBoot的在线考试系统的研究与实现（附源码，教程）

Java基于SpringBoot的在线考试系统的研究与实现（附源码，教程）

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W,Csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 文章目录 第一章第二章.主要技术第三章第四章 系统设计4.1功能结构4.2 数据库设计4.2.1 数据库E/R图4.2.2 数…
阅读更多...
数据变换：数据挖掘的准备工作之一

数据变换：数据挖掘的准备工作之一

⭐️⭐️⭐️⭐️⭐️欢迎来到我的博客⭐️⭐️⭐️⭐️⭐️ &#x1f434;作者&#xff1a;秋无之地 &#x1f434;简介&#xff1a;CSDN爬虫、后端、大数据领域创作者。目前从事python爬虫、后端和大数据等相关工作&#xff0c;主要擅长领域有&#xff1a;爬虫、后端、大数据…
阅读更多...
《Python趣味工具》——自制emoji3

《Python趣味工具》——自制emoji3

今日目标 在上次&#xff0c;我们绘制了静态的emoji图。并且总结了turtle中的常用函数。 本次我们将尝试制作一个动态的emoji&#xff0c;让你的表情包动起来&#xff01; 文章目录 一、动画原理&#xff1a;二、制作动画&#xff1a;1. 修改eyes_black()函数&#xff1a;2. 绘…
阅读更多...
软考和PMP哪个含金量更高？

软考和PMP哪个含金量更高？

软考中&#xff0c;能和pmp一起来比较的是软考高项&#xff0c;软考高级信息系统项目管理师&#xff0c;和PMP的共同点&#xff0c;基本来说都是项目管理类的证书。本质也都是适用于项目经理岗位的证书&#xff0c;软考高项中大部分考试内容是PMPIT技术两部分&#xff0c;其中项…
阅读更多...
【STL容器】list

【STL容器】list

文章目录 一、list定义二、list的迭代器三、list的元素操作四&#xff0c;list的优缺点 一、list定义 list本质是一个双向带头循环链表 template<class T> struct list_node {list_node* prev;T val;list_node* next; };template<class T> class list {typedef lis…
阅读更多...
如何打造可视化警务巡防通信解决方案

如何打造可视化警务巡防通信解决方案

近年来&#xff0c;科学技术飞速发展&#xff0c;给予了犯罪分子可乘之机。当面临专业化的犯罪分子、高科技的犯罪手段&#xff0c;传统警务模式似乎不能满足警方打击犯罪的需要&#xff0c;因此当今公安工作迫切需要构建智能化、系统化、信息化的警务通信管理模式。 警务人员…
阅读更多...
python 第一次作业

python 第一次作业

1.使用turtle换一个五环 2.设计这样一个程序&#xff1a;输入一个数字 判断它是不是一个质数 使用turtle换一个五环&#xff1a; >>> import turtle #导入模块 >>> turtle.width(10) #设置圆圈宽度 >>> turtle.color("blue&qu…
阅读更多...
JDK10特性

JDK10特性

文章目录 JAVA10概述语法层次的变化局部变量的类型推断不能使用类型推断的场景变量的声明初始值nulllambda表达式方法引用为数组静态初始化成员变量不能使用其他不可以的场景 API层次的变化集合的copyOf方法 总结 JAVA10概述 2018年3月21日&#xff0c;Oracle官方宣布JAVA10正…
阅读更多...
HTML整站规划与规范

HTML整站规划与规范

文章目录 命名规则命名命名书写 包含样式规范样式重置样式引入页面结构页面宽度页面高度与背景页面设计 网址图标 命名规则 命名 根据每块元素的主题、功能、页面上的位置命名&#xff0c;便于后期更改与维护。 另外&#xff1a;如果所有样式放在同一文件下&#xff0c;可以给…
阅读更多...
BUUCTF：[GYCTF2020]FlaskApp

BUUCTF：[GYCTF2020]FlaskApp

Flask的网站&#xff0c;这里的功能是Base64编码解码&#xff0c;并输出 并且是存在SSTI的 /hint 提示PIN码 既然提示PIN&#xff0c;那应该是开启了Debug模式的&#xff0c;解密栏那里随便输入点什么报错看看&#xff0c;直接报错了&#xff0c;并且该Flask开启了Debug模式&am…
阅读更多...
qt自定义可删除标签控件、自适应布局

qt自定义可删除标签控件、自适应布局

自定义标签&#xff0c;支持删除、设置/获取数据、自适应布局操作。 如图&#xff0c;可点击删除按钮操作、拖拽窗口自适应&#xff1b; 代码参考
阅读更多...
21天学会C++：Day11----运算符重载

21天学会C++：Day11----运算符重载

CSDN的uu们&#xff0c;大家好。这里是C入门的第十一讲。 座右铭&#xff1a;前路坎坷&#xff0c;披荆斩棘&#xff0c;扶摇直上。 博客主页&#xff1a; 姬如祎 收录专栏&#xff1a;C专题 目录 1. 知识引入 2. 运算符重载 2.1 operator<() 2.2 operator() 2.3 o…
阅读更多...
Vue的详细教程--基础语法【上】

Vue的详细教程--基础语法【上】

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于Vue的相关操作吧 一.插值 1.文本 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>插值</title>&l…
阅读更多...
python爬虫爬取电影数据并做可视化

python爬虫爬取电影数据并做可视化

思路&#xff1a; 1、发送请求&#xff0c;解析html里面的数据 2、保存到csv文件 3、数据处理 4、数据可视化 需要用到的库&#xff1a; import requests,csv #请求库和保存库 import pandas as pd #读取csv文件以及操作数据 from lxml import etree #解析html库 from …
阅读更多...
element 搜索框静态查询

element 搜索框静态查询

效果图 代码块 <template><div><!-- 1.产品搜索 --><div class"header"><div class"from"><el-form :inline"true" :model"formInline" class"demo-form-inline"><el-form-item l…
阅读更多...
Vue复选框批量删除示例

Vue复选框批量删除示例

Vue复选框批量删除 通过使用v-model指令绑定单个复选框 例如<input type"checkbox" id"checkbox" v-model"checked"> 而本次我们要做的示例大致是这样的&#xff0c;首先可以增加内容&#xff0c;然后通过勾选来进行单独或者批量删除&…
阅读更多...
[计算机入门] 电源选项设置

[计算机入门] 电源选项设置

3.10 电源选项设置 有时候我们的电脑一段时间没有用&#xff0c;会自己关掉屏幕或者直接睡眠&#xff0c;这是电源选项没有设置好导致的。 1、打开控制面板&#xff0c;打开其中的电源选项 2、点击左侧上方的选择关闭显示器的时间 3、进入到编辑计划设置界面&#xff0c;在…
阅读更多...
【Vue】MVVM模型还没懂嘛

【Vue】MVVM模型还没懂嘛

hello&#xff0c;我是小索奇&#xff0c;精心制作的Vue教程持续更新哈&#xff0c;想要学习&巩固&避坑就一起学习叭~ MVVM 模型 Vue虽然没有完全遵循MVVM模型&#xff0c;但Vue的设计也收到了它的启发在文档中也会使用VM&#xff08;ViewModel的缩写&#xff09;这个变…
阅读更多...
安防电源芯片有哪些-42v转5v芯片

安防电源芯片有哪些-42v转5v芯片

安防电源芯片有多种种类和型号&#xff0c;以下是一些常见的安防电源芯片&#xff1a; 1. 电源管理芯片&#xff08;Power Management IC&#xff0c;PMIC&#xff09;&#xff1a;这些芯片用于管理和控制安防系统的电源供应&#xff0c;包括电压调整、电流控制、电池管理等功…
阅读更多...
全网多种方法解决idea中报出的Cannot find declaration to go to的问题

全网多种方法解决idea中报出的Cannot find declaration to go to的问题

文章目录 1. 发现错误2. 分析问题3. 解决错误4. 解决该错误的其他方法4.1 其他方法14.2 其他方法24.3 其他方法34.4 其他方法44.5 解决方法54.6 解决方法6 5. 文章总结 1. 发现错误 今早下载一新项目&#xff0c;打开之后&#xff0c;点击对应的代码时&#xff0c;却报出如下错…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023