在鸿蒙上实现简单的自定义弹窗！-鸿蒙自定义桌面怎么设置密码保护

Dialog 是 HarmonyOS 的提示框，虽然说是很基础的东西，但是里面其实还有很多值得学习交流的地方。

本文会介绍如何使用默认的 Dialog 和自定义 Dialog：

默认 Dialog 的使用方法

自定义 Dialog 组件封装

效果展示

默认 Dialog：

自定义 Dialog：

默认认 Dialog 的使用

样式：仅支持通用样式中的 width、height、margin、margin-[left|top|right|bottom]、margin-[start|end] 样式。

方法：仅支持 show（弹出对话框），close（关闭对话框）。

pairDialog.hml：

pairDialog.css：

.doc-page { flex-direction: column; justify-content: center; align-items: center; } .btn-div { width: 100%; height: 200px; flex-direction: column; align-items: center; justify-content: center; } .txt { color: #000000; font-weight: bold; font-size: 39px; } .dialog-main { width: 500px; } .dialog-div { flex-direction: column; align-items: center; } .inner-txt { width: 400px; height: 160px; flex-direction: column; align-items: center; justify-content: space-around; } .inner-btn { width: 400px; height: 120px; justify-content: space-around; align-items: center; }

pairDialog.js：

import prompt from @system.prompt;

export default { showDialog(e) { this.$element(simpledialog).show() }, cancelDialog(e) { prompt.showToast({ message: Dialog cancelled }) }, cancelSchedule(e) { this.$element(simpledialog).close() prompt.showToast({ message: Successfully cancelled }) }, setSchedule(e) { this.$element(simpledialog).close() prompt.showToast({ message: Successfully confirmed }) } }

自定义 Dialog 组件封装

pairCustomizeDialog.js：

// 支持自定义传入内容如下 props:{ // 取消 public_cancel:{ type:String, default:”取消” }, // 确定 public_sure:{ type:String, default:”确定” }, // 标题 title:{ type:String, default:”使用指导” }, // 内容 content:{ type:Array, default:[] } }

显示 Dialog

代码如下：