• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# dialog开发指导
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @liyi0309-->
5<!--Designer: @liyi0309-->
6<!--Tester: @lxl007-->
7<!--Adviser: @HelloCrease-->
8
9dialog组件用于创建自定义弹窗，通常用来展示用户当前需要或用户必须关注的信息或操作。具体用法请参考[dialog API](../reference/apis-arkui/arkui-js/js-components-container-dialog.md)。
10
11
12## 创建dialog组件
13
14在pages/index目录下的hml文件中创建一个dialog组件，并添加Button组件来触发dialog。dialog组件仅支持width、height、margin、margin-[left|top|right|bottom]、margin-[start|end]样式。
15```html
16<!-- xxx.hml -->
17<div class="doc-page">
18  <dialog class="dialogClass" id="dialogId" dragable="true">
19    <div class="content">
20      <text>this is a dialog</text>
21    </div>
22  </dialog>
23  <button value="click me" onclick="openDialog"></button>
24</div>
25```
26
27```css
28/* xxx.css */
29.doc-page {
30  width:100%;
31  height:100%;
32  flex-direction: column;
33  align-items: center;
34  justify-content: center;
35  background-color: #F1F3F5;
36}
37.dialogClass{
38  width: 80%;
39  height: 250px;
40  margin-start: 1%;
41}
42.content{
43  width: 100%;
44  height: 250px;
45  justify-content: center;
46  background-color: #e8ebec;
47  border-radius: 20px;
48}
49text{
50  width: 100%;
51  height: 100%;
52  text-align: center;
53}
54button{
55  width: 70%;
56  height: 60px;
57}
58```
59
60```js
61// xxx.js
62export default {
63  //Touch to open the dialog box.
64  openDialog(){
65    this.$element('dialogId').show()
66  },
67}
68```
69
70![zh-cn_image_0000001211246571](figures/zh-cn_image_0000001211246571.gif)
71
72
73## 设置弹窗响应
74
75开发者点击页面上非dialog的区域时，将触发cancel事件而关闭弹窗。同时也可以通过对dialog添加show和close方法来显示和关闭弹窗。
76
77
78```html
79<!-- xxx.hml -->
80<div class="doc-page">
81  <dialog class="dialogClass" id="dialogId" oncancel="cancelDialog">
82    <div class="dialogDiv">
83      <text>dialog</text>
84      <button value="confirm" onclick="confirmClick"></button>
85    </div>
86  </dialog>
87  <button value="click me" onclick="openDialog"></button>
88</div>
89```
90
91
92```css
93/* xxx.css */
94.doc-page {
95  width:100%;
96  height:100%;
97  flex-direction: column;
98  align-items: center;
99  justify-content: center;
100  background-color: #F1F3F5;
101}
102.dialogClass{
103  width: 80%;
104  height: 300px;
105  margin-start: 1%;
106}
107.dialogDiv{
108  width: 100%;
109  flex-direction: column;
110  justify-content: center;
111  align-self: center;
112}
113text{
114  height: 100px;
115  align-self: center;
116}
117button{
118  align-self: center;
119  margin-top: 20px;
120  width: 60%;
121  height: 80px;
122}
123```
124
125
126```js
127// xxx.js
128import promptAction from '@ohos.promptAction';
129export default {
130  cancelDialog(e){
131    promptAction.showToast({
132      message: 'dialogCancel'
133    })
134  },
135  openDialog(){
136    this.$element('dialogId').show()
137     promptAction.showToast({
138      message: 'dialogShow'
139    })
140  },
141  confirmClick(e) {
142    this.$element('dialogId').close()
143    promptAction.showToast({
144      message: 'dialogClose'
145    })
146  },
147}
148```
149
150
151![zh-cn_image_0000001163229150](figures/zh-cn_image_0000001163229150.gif)
152
153
154> **说明：**
155> - 仅支持单个子组件。
156>
157> - dialog属性、样式均不支持动态更新。
158>
159> - dialog组件不支持focusable、click-effect属性。
160
161
162## 场景示例
163
164
165在本场景中，开发者可以通过dialog组件实现一个日程表。弹窗在打开状态下，利用[textarea](../reference/apis-arkui/arkui-js/js-components-basic-textarea.md)组件输入当前日程，点击确认按钮后获取当前时间并保存输入文本。最后以列表形式将各日程进行展示。
166
167
168```html
169<!-- xxx.hml -->
170<div class="doc-page">
171  <text style="margin-top: 60px;margin-left: 30px;">
172    <span>{{date}} events</span>
173  </text>
174  <div class="btnDiv">
175    <button type="circle" class="btn" onclick="addSchedule">+</button>
176  </div>
177<!--  for Render events data  -->
178  <list style="width: 100%;">
179    <list-item type="item" for="scheduleList" style="width:100%;height: 200px;">
180      <div class="scheduleDiv">
181        <text class="text1">{{date}}  event</text>
182        <text class="text2">{{$item.schedule}}</text>
183      </div>
184    </list-item>
185  </list>
186  <dialog id="dateDialog" oncancel="cancelDialog" >
187    <div class="dialogDiv">
188      <div class="innerTxt">
189        <text class="text3">{{date}}</text>
190        <text class="text4">New event</text>
191      </div>
192      <textarea placeholder="Event information" onchange="getSchedule" class="area" extend="true"></textarea>
193      <div class="innerBtn">
194        <button type="text" value="Cancel" onclick="cancelSchedule" class="innerBtn"></button>
195        <button type="text" value="OK" onclick="setSchedule" class="innerBtn"></button>
196      </div>
197    </div>
198  </dialog>
199</div>
200```
201
202
203```css
204/* xxx.css */
205.doc-page {
206  flex-direction: column;
207  background-color: #F1F3F5;
208}
209.btnDiv {
210  width: 100%;
211  height: 200px;
212  flex-direction: column;
213  align-items: center;
214  justify-content: center;
215}
216.btn {
217  radius:60px;
218  font-size: 100px;
219  background-color: #1E90FF;
220}
221.scheduleDiv {
222  width: 100%;
223  height: 200px;
224  flex-direction: column;
225  justify-content: space-around;
226  padding-left: 55px;
227}
228.text1 {
229  color: #000000;
230  font-weight: bold;
231  font-size: 39px;
232}
233.text2 {
234  color: #a9a9a9;
235  font-size: 30px;
236}
237.dialogDiv {
238  flex-direction: column;
239  align-items: center;
240}
241.innerTxt {
242  width: 320px;
243  height: 160px;
244  flex-direction: column;
245  align-items: center;
246  justify-content: space-around;
247}
248.text3 {
249  font-family: serif;
250  color: #1E90FF;
251  font-size: 38px;
252}
253.text4 {
254  color: #a9a9a9;
255  font-size: 33px;
256}
257.area {
258  width: 320px;
259  border-bottom: 1px solid #1E90FF;
260}
261.innerBtn {
262  width: 320px;
263  height: 120px;
264  justify-content: space-around;
265  text-color: #1E90FF;
266}
267```
268
269
270```js
271// xxx.js
272var info = null;
273import promptAction from '@ohos.promptAction';
274export default {
275  data: {
276    curYear:'',
277    curMonth:'',
278    curDay:'',
279    date:'',
280    schedule:'',
281    scheduleList:[]
282  },
283  onInit() {
284    // Obtain the current date.
285    var date = new Date();
286    this.curYear = date.getFullYear();
287    this.curMonth = date.getMonth() + 1;
288    this.curDay = date.getDate();
289    this.date = this.curYear + '-' + this.curMonth + '-' + this.curDay;
290    this.scheduleList = []
291  },
292  addSchedule(e) {
293    this.$element('dateDialog').show()
294  },
295  cancelDialog(e) {
296    promptAction.showToast({
297      message: 'Event setting canceled.'
298    })
299  },
300  getSchedule(e) {
301    info = e.value
302  },
303  cancelSchedule(e) {
304    this.$element('dateDialog').close()
305    promptAction.showToast({
306      message: 'Event setting canceled.'
307    })
308  },
309//    Touch OK to save the data.
310  setSchedule(e) {
311    if (e.text === '') {
312      this.schedule = info
313    } else {
314      this.schedule = info
315      var addItem =  {schedule: this.schedule,}
316      this.scheduleList.push(addItem)
317    }
318    this.$element('dateDialog').close()
319  }
320}
321```
322
323
324![zh-cn_image_0000001234329527](figures/zh-cn_image_0000001234329527.gif)
325
326
327## 相关实例
328
329针对dialog开发，有以下相关实例可供参考：
330
331- [弹窗基本使用（JS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/DialogDemo)
332