智慧屏和智能穿戴开发：容器组件dialog

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