1# dialog
2
3>  **说明：**
4>  从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
5
6自定义弹窗容器。
7
8## 权限列表
9
10无
11
12
13## 子组件
14
15支持单个子组件。
16
17
18## 属性
19
20除支持[通用属性](js-components-common-attributes.md)外，支持如下属性：
21
22| 名称                    | 类型      | 默认值   | 必填   | 描述           |
23| --------------------- | ------- | ----- | ---- | ------------ |
24| dragable<sup>7+</sup> | boolean | false | 否    | 设置对话框是否支持拖拽。 |
25
26>  **说明：**
27>
28>  弹窗类组件不支持focusable、click-effect属性。
29
30
31## 样式
32
33仅支持[通用样式](js-components-common-styles.md)中的width、height、margin、margin-[left|top|right|bottom]、margin-[start|end]样式。
34
35
36## 事件
37
38不支持[通用事件](js-components-common-events.md)，仅支持如下事件：
39
40| 名称                 | 参数   | 描述                         |
41| ------------------ | ---- | -------------------------- |
42| cancel             | -    | 用户点击非dialog区域触发取消弹窗时触发的事件。 |
43| show<sup>7+</sup>  | -    | 对话框弹出时触发该事件。               |
44| close<sup>7+</sup> | -    | 对话框关闭时触发该事件。               |
45
46
47## 方法
48
49不支持[通用方法](js-components-common-methods.md)，仅支持如下方法。
50
51| 名称    | 参数   | 描述     |
52| ----- | ---- | ------ |
53| show  | -    | 弹出对话框。 |
54| close | -    | 关闭对话框。 |
55
56>  **说明：**
57>  dialog属性、样式均不支持动态更新。
58
59
60## 示例
61
62```html
63<!-- xxx.hml -->
64<div class="doc-page">
65  <div class="btn-div">
66    <button type="capsule" value="Click here" class="btn" onclick="showDialog"></button>
67  </div>
68  <dialog id="simpledialog" dragable="true" class="dialog-main" oncancel="cancelDialog">
69    <div class="dialog-div">
70      <div class="inner-txt">
71        <text class="txt" ondoubleclick="doubleclick">Simple dialog</text>
72      </div>
73      <div class="inner-btn">
74        <button type="capsule" value="Cancel" onclick="cancelSchedule" class="btn-txt"></button>
75        <button type="capsule" value="Confirm" onclick="setSchedule" class="btn-txt"></button>
76      </div>
77    </div>
78  </dialog>
79</div>
80```
81
82```css
83/* xxx.css */
84.doc-page {
85  flex-direction: column;
86  justify-content: center;
87  align-items: center;
88}
89.btn-div {
90  width: 100%;
91  height: 200px;
92  flex-direction: column;
93  align-items: center;
94  justify-content: center;
95}
96.btn {
97  background-color: #F2F2F2;
98  text-color: #0D81F2;
99}
100.txt {
101  color: #000000;
102  font-weight: bold;
103  font-size: 39px;
104}
105.dialog-main {
106  width: 500px;
107}
108.dialog-div {
109  flex-direction: column;
110  align-items: center;
111}
112.inner-txt {
113  width: 400px;
114  height: 160px;
115  flex-direction: column;
116  align-items: center;
117  justify-content: space-around;
118}
119.inner-btn {
120  width: 400px;
121  height: 120px;
122  justify-content: space-around;
123  align-items: center;
124}
125.btn-txt {
126  background-color: #F2F2F2;
127  text-color: #0D81F2;
128}
129```
130
131```js
132// xxx.js
133import promptAction from '@ohos.promptAction';
134export default {
135  showDialog() {
136    this.$element('simpledialog').show()
137  },
138  cancelDialog() {
139    promptAction.showToast({
140      message: 'Dialog cancelled'
141    })
142  },
143  cancelSchedule() {
144    this.$element('simpledialog').close()
145    promptAction.showToast({
146      message: 'Successfully cancelled'
147    })
148  },
149  setSchedule() {
150    this.$element('simpledialog').close()
151    promptAction.showToast({
152      message: 'Successfully confirmed'
153    })
154  },
155  doubleclick(){
156    promptAction.showToast({
157      message: 'doubleclick'
158    })
159  }
160}
161```
162
163![zh-cn_image_0000001167846062](figures/zh-cn_image_0000001167846062.gif)
164