OpenHarmony实战开发-dialog开发指导

最新推荐文章于 2024-08-05 17:58:14 发布

码牛程序猿

最新推荐文章于 2024-08-05 17:58:14 发布

阅读量798

点赞数 19

分类专栏： HarmonyOS 鸿蒙工程师鸿蒙文章标签： harmonyos 鸿蒙应用开发 OpenHarmony 华为鸿蒙鸿蒙开发鸿蒙系统

本文链接：https://blog.csdn.net/2401_82546228/article/details/138313069

版权

本文详细介绍了如何在Ohos平台上使用dialog组件创建自定义弹窗，包括设置样式、响应用户操作，以及在日程管理场景中的应用实例。还提到相关教程和开发资源链接，帮助读者快速入门鸿蒙开发。

摘要由CSDN通过智能技术生成

dialog组件用于创建自定义弹窗，通常用来展示用户当前需要或用户必须关注的信息或操作。

创建dialog组件

在pages/index目录下的hml文件中创建一个dialog组件，并添加Button组件来触发dialog。dialog组件仅支持width、height、margin、margin-[left|top|right|bottom]、margin-[start|end]样式。

<!-- xxx.hml -->
<div class="doc-page">
  <dialog class="dialogClass" id="dialogId" dragable="true">
    <div class="content">
      <text>this is a dialog</text>
    </div>
  </dialog>
  <button value="click me" onclick="opendialog"></button>
</div>

/* xxx.css */
.doc-page {
   
  width:100%;
  height:100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F1F3F5;
}
.dialogClass{
   
  width: 80%;
  height: 250px;
  margin-start: 1%;
}
.content{
   
  width: 100%;
  height: 250px;
  justify-content: center;
  background-color: #e8ebec;
  border-radius: 20px;
}
text{
   
  width: 100%;
  height: 100%;
  text-align: center;
}
button{
   
  width: 70%;
  height: 60px;
}

// xxx.js
export default {
   
  //Touch to open the dialog box.
  opendialog(){
   
    this.$element('dialogId').show()
  },
}

在这里插入图片描述

设置弹窗响应

开发者点击页面上非dialog的区域时，将触发cancel事件而关闭弹窗。同时也可以通过对dialog添加show和close方法来显示和关闭弹窗。

<!-- xxx.hml -->
<div class="doc-page">
  <dialog class="dialogClass" id="dialogId" oncancel="canceldialog">
    <div class="dialogDiv">
      <text>dialog</text>
      <button value="confirm" onclick=