HarmonyOS 基础之JS实现自定义弹窗 原创 精华
深开鸿
发布于 2021-9-7 10:56
浏览
2收藏
介绍
Dialog是HarmonyOS的提示框,虽然说是很基础的东西,但是里面其实还有很多值得学习交流的地方。本文会介绍如何使用默认的dialoge和自定义Dialog:
1、默认Dialog的使用方法
2、自定义Dialog组件封装
效果展示
默认Dialog | 自定义 Dialog |
---|---|
默认Dialog的使用
样式:仅支持通用样式中的width、height、margin、margin-[left|top|right|bottom]、margin-[start|end]样式。
方法: 仅支持show(弹出对话框),close(关闭对话框)
pairDialog.hml
<div class="doc-page">
<div class="btn-div">
<button type="capsule" value="Click dialog" class="btn" onclick="showDialog"></button>
</div>
<dialog id="simpledialog" class="dialog-main" oncancel="cancelDialog">
<div class="dialog-div">
<div class="inner-txt">
<text class="txt">Simple dialog</text>
</div>
<div class="inner-btn">
<button type="capsule" value="Cancel" onclick="cancelSchedule" class="btn-txt"></button>
<button type="capsule" value="Confirm" onclick="setSchedule" class="btn-txt"></button>
</div>
</div>
</dialog>
</div>
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
<element name="titleBar" src="../../components/titleBar/titleBar.hml"></element>
<element name="pairDialog" src="../../components/titleBar/pairDialog/pairDialog.hml" ></element>
<element name="pairCustomizeDialog" src="../../components/titleBar/pairCustomizeDialog/pairCustomizeDialog.hml" ></element>
<div class="dialog">
<titleBar title="dialog展示"
@back-press="exit" >
</titleBar>
<!-- 默认demo -->
<pairDialog ></pairDialog>
<!-- 自定义dialog -->
<pairCustomizeDialog content="{{deviceResource}}"></pairCustomizeDialog>
</div>
作者:王国菊
更多原创内容请关注:开鸿 HarmonyOS 学院
入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
DialogDemo.zip 3.32M 69次下载
已于2021-9-10 14:54:57修改
赞
9
收藏 2
回复
相关推荐
样式展示的非常全面
谢谢,希望能帮到有需要的小伙伴