©2020-2024 ioDraw All rights reserved
HarmonyOS应用开发文档更新修改说明：dialog组件补充示例代码和示例效果图，方便开发者掌握该组件的使用方式
自定义弹窗容器。
支持设备
<>
表1 组件的设备支持情况
智慧屏
智能穿戴
支持
支持
权限列表
<>
无
子组件
<>
支持单个子组件。
属性
<>
名称
类型
默认值
必填
描述
id
string
-
否
组件的唯一标识。
style
string
-
否
组件的样式声明。
class
string
-
否
组件的样式类，用于引用样式表。
ref
string
-
否
用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。
disabled
boolean
false
否
当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。
data
string
-
否
给当前组件设置data属性，进行相应的数据存储和读取。
事件
<>
名称
参数
描述
cancel
-
用户点击非dialog区域触发取消弹窗时触发的事件。
样式
<>
支持如下样式：
名称
类型
默认值
必填
描述
width
<length> | <percentage>
-
否
设置组件自身的宽度。
未设置时使用弹窗默认宽度。
height
<length> | <percentage>
-
否
设置组件自身的高度
未设置时使用弹窗默认高度。
margin
<length>
0
否
使用简写属性设置所有的外边距属性，该属性可以有1到4个值。
*
<>只有一个值时，这个值会被指定给全部的四个边。
*
<>两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。
*
<>三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。
*
<>四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。
margin-[left|top|right|bottom]
<length>
0
否
设置左、上、右、下外边距属性。
方法
<>
支持如下方法。
名称
参数
描述
show
-
弹出对话框
close
-
关闭对话框
说明
dialog属性、样式均不支持动态更新。
示例
<!-- xxx.hml --> <div class="doc-page"> <div class="btn-div"> <button
type="capsule" value="Click here" 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> /* xxx.css */ .doc-page { flex-direction:
column; } .btn-div { width: 100%; height: 200px; flex-direction: column;
align-items: center; justify-content: center; } .btn { background-color:
#a9a9a9; } .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; } .btn-txt { text-color: #1e90ff; } // xxx.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' }) } }