• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 弹窗
2
3创建并显示文本提示框、对话框和操作菜单。
4
5> **说明：**
6>
7> 本模块首批接口从API version 8开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
8
9## 导入模块
10
11```js
12import prompt from '@ohos.prompt'
13```
14
15## prompt.showToast
16
17showToast(options: ShowToastOptions): void
18
19创建并显示文本提示框。
20
21**系统能力：** SystemCapability.ArkUI.ArkUI.Full
22
23**参数：**
24
25| 参数名     | 类型                                    | 必填   | 说明      |
26| ------- | ------------------------------------- | ---- | ------- |
27| options | [ShowToastOptions](#showtoastoptions) | 是    | 文本弹窗选项。 |
28
29**示例：**
30
31```js
32prompt.showToast({
33  message: 'Message Info',
34    duration: 2000,
35});
36```
37
38 ![zh-cn_image_0001](figures/zh-cn_image_0001.gif)
39
40## ShowToastOptions
41
42文本提示框的选项。
43
44**系统能力：**  SystemCapability.ArkUI.ArkUI.Full。
45
46| 名称       | 类型              | 必填   | 说明                                       |
47| -------- | --------------- | ---- | ---------------------------------------- |
48| message  | string          | 是    | 显示的文本信息。                                 |
49| duration | number          | 否    | 默认值1500ms，取值区间：1500ms-10000ms。若小于1500ms则取默认值，若大于10000ms则取上限值10000ms。 |
50| bottom   | string\| number | 否    | 设置弹窗边框距离屏幕底部的位置。                         |
51
52## prompt.showDialog
53
54showDialog(options: ShowDialogOptions): Promise<ShowDialogSuccessResponse>
55
56创建并显示对话框，对话框响应后同步返回结果。
57
58**系统能力：**  SystemCapability.ArkUI.ArkUI.Full
59
60**参数：**
61
62| 参数名     | 类型                                      | 必填   | 说明     |
63| ------- | --------------------------------------- | ---- | ------ |
64| options | [ShowDialogOptions](#showdialogoptions) | 是    | 对话框选项。 |
65
66**返回值：**
67
68| 类型                                       | 说明       |
69| ---------------------------------------- | -------- |
70| Promise<[ShowDialogSuccessResponse](#showdialogsuccessresponse)> | 对话框响应结果。 |
71
72**示例：**
73
74```js
75prompt.showDialog({
76  title: 'Title Info',
77  message: 'Message Info',
78  buttons: [
79    {
80      text: 'button1',
81      color: '#000000',
82    },
83    {
84      text: 'button2',
85      color: '#000000',
86    }
87  ],
88})
89  .then(data => {
90    console.info('showDialog success, click button: ' + data.index);
91  })
92  .catch(err => {
93    console.info('showDialog error: ' + err);
94  })
95```
96
97 ![zh-cn_image_0002](figures/zh-cn_image_0002.gif)
98
99## prompt.showDialog
100
101showDialog(options: ShowDialogOptions, callback: AsyncCallback<ShowDialogSuccessResponse>):void
102
103创建并显示对话框，对话框响应结果异步返回。
104
105**系统能力：**  SystemCapability.ArkUI.ArkUI.Full
106
107**参数：**
108
109| 参数名      | 类型                                       | 必填   | 说明           |
110| -------- | ---------------------------------------- | ---- | ------------ |
111| options  | [ShowDialogOptions](#showdialogoptions)  | 是    | 页面显示对话框信息描述。 |
112| callback | AsyncCallback<[ShowDialogSuccessResponse](#showdialogsuccessresponse)> | 是    | 对话框响应结果回调。   |
113
114**示例：**
115
116```js
117prompt.showDialog({
118  title: 'showDialog Title Info',
119  message: 'Message Info',
120  buttons: [
121    {
122      text: 'button1',
123      color: '#000000',
124    },
125    {
126      text: 'button2',
127      color: '#000000',
128    }
129  ]
130}, (err, data) => {
131  if (err) {
132    console.info('showDialog err: ' + err);
133    return;
134  }
135  console.info('showDialog success callback, click button: ' + data.index);
136});
137```
138
139 ![zh-cn_image_0004](figures/zh-cn_image_0004.gif)
140
141## ShowDialogOptions
142
143对话框的选项。
144
145**系统能力：** SystemCapability.ArkUI.ArkUI.Full
146
147| 名称      | 类型      | 必填   | 说明                                       |
148| ------- | ------- | ---- | ---------------------------------------- |
149| title   | string | 否    | 标题文本。                                    |
150| message | string  | 否    | 内容文本。                                    |
151| buttons | Array   | 否    | 对话框中按钮的数组，结构为：{text:'button', color: '\#666666'}，支持1-3个按钮。其中第一个为positiveButton；第二个为negativeButton；第三个为neutralButton。 |
152
153## ShowDialogSuccessResponse
154
155对话框的响应结果。
156
157**系统能力：**  SystemCapability.ArkUI.ArkUI.Full
158
159| 名称    | 类型     | 说明                  |
160| ----- | ------ | ------------------- |
161| index | number | 选中按钮在buttons数组中的索引。 |
162
163
164## prompt.showActionMenu
165
166showActionMenu(options: ActionMenuOptions, callback: AsyncCallback<ActionMenuSuccessResponse>):void
167
168创建并显示操作菜单，菜单响应结果异步返回。
169
170**系统能力：** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。
171
172**参数：**
173
174| 参数名      | 类型                                       | 必填   | 说明        |
175| -------- | ---------------------------------------- | ---- | --------- |
176| options  | [ActionMenuOptions](#actionmenuoptions)  | 是    | 操作菜单选项。   |
177| callback | AsyncCallback<[ActionMenuSuccessResponse](#actionmenusuccessresponse)> | 是    | 菜单响应结果回调。 |
178
179
180**示例：**
181
182```js
183prompt.showActionMenu({
184  title: 'Title Info',
185  buttons: [
186    {
187      text: 'item1',
188      color: '#666666',
189    },
190    {
191      text: 'item2',
192      color: '#000000',
193    },
194  ]
195}, (err, data) => {
196  if (err) {
197    console.info('showActionMenu err: ' + err);
198    return;
199  }
200  console.info('showActionMenu success callback, click button: ' + data.index);
201})
202```
203
204 ![zh-cn_image_0005](figures/zh-cn_image_0005.gif)
205
206## prompt.showActionMenu
207
208showActionMenu(options: ActionMenuOptions): Promise<ActionMenuSuccessResponse>
209
210创建并显示操作菜单，菜单响应后同步返回结果。
211
212**系统能力：** SystemCapability.ArkUI.ArkUI.Full
213
214**参数：**
215
216| 参数名     | 类型                                      | 必填   | 说明      |
217| ------- | --------------------------------------- | ---- | ------- |
218| options | [ActionMenuOptions](#actionmenuoptions) | 是    | 操作菜单选项。 |
219
220**返回值：**
221
222| 类型                                       | 说明      |
223| ---------------------------------------- | ------- |
224| Promise<[ActionMenuSuccessResponse](#actionmenusuccessresponse)> | 菜单响应结果。 |
225
226**示例：**
227
228```js
229prompt.showActionMenu({
230  title: 'showActionMenu Title Info',
231  buttons: [
232    {
233      text: 'item1',
234      color: '#666666',
235    },
236    {
237      text: 'item2',
238      color: '#000000',
239    },
240  ]
241})
242  .then(data => {
243    console.info('showActionMenu success, click button: ' + data.index);
244  })
245  .catch(err => {
246    console.info('showActionMenu error: ' + err);
247  })
248```
249 ![zh-cn_image_0006](figures/zh-cn_image_0006.gif)
250
251## ActionMenuOptions
252
253操作菜单的选项。
254
255**系统能力：** SystemCapability.ArkUI.ArkUI.Full。
256
257| 名称      | 类型                             | 必填   | 说明                                       |
258| ------- | ------------------------------ | ---- | ---------------------------------------- |
259| title   | string                         | 否    | 标题文本。                                    |
260| buttons | Array<[Button](#button)> | 是    | 菜单中菜单项按钮的数组，结构为：{text:'button', color: '\#666666'}，支持1-6个按钮。大于6个按钮时弹窗不显示。 |
261
262## ActionMenuSuccessResponse
263
264操作菜单的响应结果。
265
266**系统能力：** SystemCapability.ArkUI.ArkUI.Full
267
268| 名称    | 类型     | 必填   | 说明                       |
269| ----- | ------ | ---- | ------------------------ |
270| index | number | 否    | 选中按钮在buttons数组中的索引，从0开始。 |
271
272## Button
273
274菜单中的菜单项按钮。
275
276**系统能力：** SystemCapability.ArkUI.ArkUI.Full
277
278| 名称    | 类型     | 必填   | 说明      |
279| ----- | ------ | ---- | ------- |
280| text  | string | 是    | 按钮文本内容。 |
281| color | string | 是    | 按钮文本颜色。 |
282