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