在鸿蒙上实现简单的自定义弹窗！

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

代码如下：