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

HarmonyOS应用开发文档更新修改说明：dialog组件补充示例代码和示例效果图，方便开发者掌握该组件的使用方式

 自定义弹窗容器。

支持设备

表1 组件的设备支持情况

智慧屏	智能穿戴
支持	支持

权限列表

无

子组件

支持单个子组件。

属性

名称	类型	默认值	必填	描述
id	string	-	否	组件的唯一标识。
style	string	-	否	组件的样式声明。
class	string	-	否	组件的样式类，用于引用样式表。
ref	string	-	否	用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。
disabled	boolean	false	否	当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。
data	string	-	否	给当前组件设置data属性，进行相应的数据存储和读取。

事件

名称	参数	描述
cancel	-	用户点击非dialog区域触发取消弹窗时触发的事件。

样式

支持如下样式：

名称	类型	默认值	必填	描述
width	|	-	否	设置组件自身的宽度。 未设置时使用弹窗默认宽度。
height	|	-	否	设置组件自身的高度 未设置时使用弹窗默认高度。
margin		0	否	使用简写属性设置所有的外边距属性，该属性可以有1到4个值。 只有一个值时，这个值会被指定给全部的四个边。 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。
margin-[left|top|right|bottom]		0	否	设置左、上、右、下外边距属性。

方法

支持如下方法。

名称	参数	描述
show	-	弹出对话框
close	-	关闭对话框

说明

dialog属性、样式均不支持动态更新。

示例

  

    
  
  

    

      

        Simple dialog
      
      

        
        
      
    
  

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