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' }) } }

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:766591547
关注微信