HarmonyOS应用开发文档更新修改说明:dialog组件补充示例代码和示例效果图,方便开发者掌握该组件的使用方式
自定义弹窗容器。
支持设备
智慧屏 | 智能穿戴 |
---|---|
支持 | 支持 |
权限列表
无
子组件
支持单个子组件。
属性
名称 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
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'
})
}
}