js-apis-prompt.md 8.7 KB
Newer Older
K
kukixi 已提交
1 2
# 弹窗

T
explain  
tianyu 已提交
3 4
创建并显示文本提示框、对话框和操作菜单。

5 6
> **说明:**
>
K
kukixi 已提交
7 8 9 10
> 本模块首批接口从API version 8开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。

## 导入模块

H
HelloCrease 已提交
11
```js
K
kukixi 已提交
12 13 14 15 16 17 18 19 20 21 22 23
import prompt from '@ohos.prompt'
```

## prompt.showToast

showToast(options: ShowToastOptions): void

创建并显示文本提示框。

**系统能力:** SystemCapability.ArkUI.ArkUI.Full

**参数:**
H
HelloCrease 已提交
24 25 26
| 参数名     | 类型                                    | 必填   | 说明      |
| ------- | ------------------------------------- | ---- | ------- |
| options | [ShowToastOptions](#showtoastoptions) | 是    | 文本弹窗选项。 |
K
kukixi 已提交
27 28

**示例:**
H
HelloCrease 已提交
29 30 31 32 33
  ```js
prompt.showToast({            
  message: 'Message Info',
    duration: 2000,      
});
K
kukixi 已提交
34 35 36 37 38 39 40
  ```
## ShowToastOptions

文本提示框的选项。

**系统能力:** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。

H
HelloCrease 已提交
41 42 43
| 名称       | 类型                                       | 必填     | 说明                                       |
| -------- | ---------------------------------------- | ------ | ---------------------------------------- |
| message  | string\| [Resource](../../ui/ts-types.md#resource类型)<sup>9+</sup> | 是      | 显示的文本信息。                                 |
S
shanshurong 已提交
44
| duration | number                                   | 否      | 默认值1500ms,取值区间:1500ms-10000ms。若小于1500ms则取默认值,若大于10000ms则取上限值10000ms。 |
S
shanshurong 已提交
45
| bottom   | string\| number                                   | 否 | 设置弹窗边框距离屏幕底部的位置。                                        |
K
kukixi 已提交
46 47 48

## prompt.showDialog

K
kukixi 已提交
49
showDialog(options: ShowDialogOptions): Promise&lt;ShowDialogSuccessResponse&gt;
K
kukixi 已提交
50 51

创建并显示对话框,对话框响应后同步返回结果。
K
kukixi 已提交
52

K
kukixi 已提交
53 54 55
**系统能力:** SystemCapability.ArkUI.ArkUI.Full

**参数:**
H
HelloCrease 已提交
56 57 58
| 参数名     | 类型                                      | 必填   | 说明     |
| ------- | --------------------------------------- | ---- | ------ |
| options | [ShowDialogOptions](#showdialogoptions) | 是    | 对话框选项。 |
K
kukixi 已提交
59 60

**返回值:**
K
kukixi 已提交
61

H
HelloCrease 已提交
62 63 64
| 类型                                       | 说明       |
| ---------------------------------------- | -------- |
| Promise&lt;[ShowDialogSuccessResponse](#showdialogsuccessresponse)&gt; | 对话框响应结果。 |
K
kukixi 已提交
65

K
kukixi 已提交
66
**示例:**
K
kukixi 已提交
67

H
HelloCrease 已提交
68 69 70 71 72 73 74 75 76 77 78 79
  ```js
prompt.showDialog({
  title: 'Title Info',
  message: 'Message Info',
  buttons: [
    {
      text: 'button1',
      color: '#000000',
    },
    {
      text: 'button2',
      color: '#000000',
K
kukixi 已提交
80
    }
H
HelloCrease 已提交
81 82 83 84 85 86 87 88
  ],
})
  .then(data => {
    console.info('showDialog success, click button: ' + data.index);
  })
  .catch(err => {
    console.info('showDialog error: ' + err);
  })
K
kukixi 已提交
89 90
  ```

K
kukixi 已提交
91 92
## prompt.showDialog

K
kukixi 已提交
93
showDialog(options: ShowDialogOptions, callback: AsyncCallback&lt;ShowDialogSuccessResponse&gt;):void 
K
kukixi 已提交
94 95 96 97 98 99 100

创建并显示对话框,对话框响应结果异步返回。

**系统能力:** SystemCapability.ArkUI.ArkUI.Full


**参数:**
H
HelloCrease 已提交
101 102 103 104
| 参数名      | 类型                                       | 必填   | 说明           |
| -------- | ---------------------------------------- | ---- | ------------ |
| options  | [ShowDialogOptions](#showdialogoptions)  | 是    | 页面显示对话框信息描述。 |
| callback | AsyncCallback&lt;[ShowDialogSuccessResponse](#showdialogsuccessresponse)&gt; | 是    | 对话框响应结果回调。   |
K
kukixi 已提交
105 106

**示例:**
H
HelloCrease 已提交
107 108 109 110 111 112 113 114
  ```js
prompt.showDialog({
  title: 'showDialog Title Info',
  message: 'Message Info',
  buttons: [
    {
      text: 'button1',
      color: '#000000',
K
kukixi 已提交
115
    },
H
HelloCrease 已提交
116 117 118
    {
      text: 'button2',
      color: '#000000',
K
kukixi 已提交
119
    }
H
HelloCrease 已提交
120 121 122 123 124
  ]
}, (err, data) => {
  if (err) {
    console.info('showDialog err: ' + err);
    return;
K
kukixi 已提交
125
  }
H
HelloCrease 已提交
126 127
  console.info('showDialog success callback, click button: ' + data.index);
});
K
kukixi 已提交
128 129 130 131 132 133 134 135
  ```

## ShowDialogOptions

对话框的选项。

**系统能力:** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。

H
HelloCrease 已提交
136 137
| 名称      | 类型                                       | 必填   | 说明                                       |
| ------- | ---------------------------------------- | ---- | ---------------------------------------- |
L
luoying_ace_admin 已提交
138 139
| title   | string\| [Resource](../../ui/ts-types.md#resource类型)<sup>9+</sup> | 否    | 标题文本。                                    |
| message | string\| [Resource](../../ui/ts-types.md#resource类型)<sup>9+</sup> | 否    | 内容文本。                                    |
H
HelloCrease 已提交
140
| buttons | Array                                    | 否    | 对话框中按钮的数组,结构为:{text:'button',&nbsp;color:&nbsp;'\#666666'},支持1-3个按钮。其中第一个为positiveButton;第二个为negativeButton;第三个为neutralButton。 |
K
kukixi 已提交
141 142 143 144 145 146 147

## ShowDialogSuccessResponse 

对话框的响应结果。

**系统能力:** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。

H
HelloCrease 已提交
148 149
| 名称    | 类型     | 说明                  |
| ----- | ------ | ------------------- |
K
kukixi 已提交
150 151 152 153 154
| index | number | 选中按钮在buttons数组中的索引。 |


## prompt.showActionMenu

K
kukixi 已提交
155
showActionMenu(options: ActionMenuOptions, callback: AsyncCallback&lt;ActionMenuSuccessResponse&gt;):void
K
kukixi 已提交
156 157 158 159 160 161

创建并显示操作菜单,菜单响应结果异步返回。

**系统能力:** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。

**参数:**
H
HelloCrease 已提交
162 163 164 165
| 参数名      | 类型                                       | 必填   | 说明        |
| -------- | ---------------------------------------- | ---- | --------- |
| options  | [ActionMenuOptions](#actionmenuoptions)  | 是    | 操作菜单选项。   |
| callback | AsyncCallback&lt;[ActionMenuSuccessResponse](#actionmenusuccessresponse)> | 是    | 菜单响应结果回调。 |
K
kukixi 已提交
166 167 168


**示例:**
H
HelloCrease 已提交
169 170 171 172 173 174 175
  ```js
prompt.showActionMenu({
  title: 'Title Info',
  buttons: [
    {
      text: 'item1',
      color: '#666666',
K
kukixi 已提交
176
    },
H
HelloCrease 已提交
177 178 179 180 181 182 183 184 185
    {
      text: 'item2',
      color: '#000000',
    },
  ]
}, (err, data) => {
  if (err) {
    console.info('showActionMenu err: ' + err);
    return;
K
kukixi 已提交
186
  }
H
HelloCrease 已提交
187 188
  console.info('showActionMenu success callback, click button: ' + data.index);
})
K
kukixi 已提交
189
  ```
K
kukixi 已提交
190

K
kukixi 已提交
191
## prompt.showActionMenu
K
kukixi 已提交
192

L
luoying_ace_admin 已提交
193
showActionMenu(options: ActionMenuOptions): Promise&lt;ActionMenuSuccessResponse&gt;
K
kukixi 已提交
194 195 196 197 198 199

创建并显示操作菜单,菜单响应后同步返回结果。

**系统能力:** SystemCapability.ArkUI.ArkUI.Full

**参数:**
H
HelloCrease 已提交
200 201 202
| 参数名     | 类型                                      | 必填   | 说明      |
| ------- | --------------------------------------- | ---- | ------- |
| options | [ActionMenuOptions](#actionmenuoptions) | 是    | 操作菜单选项。 |
K
kukixi 已提交
203

K
kukixi 已提交
204
**返回值:**
H
HelloCrease 已提交
205 206 207
| 类型                                       | 说明      |
| ---------------------------------------- | ------- |
| Promise&lt;[ActionMenuSuccessResponse](#actionmenusuccessresponse)&gt; | 菜单响应结果。 |
K
kukixi 已提交
208 209

**示例:**
H
HelloCrease 已提交
210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229
  ```js
prompt.showActionMenu({
  title: 'showActionMenu Title Info',
  buttons: [
    {
      text: 'item1',
      color: '#666666',
    },
    {
      text: 'item2',
      color: '#000000',
    },
  ]
})
  .then(data => {
    console.info('showActionMenu success, click button: ' + data.index);
  })
  .catch(err => {
    console.info('showActionMenu error: ' + err);
  })
K
kukixi 已提交
230 231 232 233 234
  ```
## ActionMenuOptions

操作菜单的选项。

H
HelloCrease 已提交
235
**系统能力:** SystemCapability.ArkUI.ArkUI.Full。
K
kukixi 已提交
236

H
HelloCrease 已提交
237 238
| 名称      | 类型                                       | 必填   | 说明                                       |
| ------- | ---------------------------------------- | ---- | ---------------------------------------- |
L
luoying_ace_admin 已提交
239
| title   | string\| [Resource](../../ui/ts-types.md#resource类型)<sup>9+</sup> | 否    | 标题文本。                                    |
H
HelloCrease 已提交
240
| buttons | Array&lt;[Button](#button)&gt;           | 是    | 菜单中菜单项按钮的数组,结构为:{text:'button',&nbsp;color:&nbsp;'\#666666'},支持1-6个按钮。大于6个按钮时弹窗不显示。 |
K
kukixi 已提交
241 242 243 244 245

## ActionMenuSuccessResponse

操作菜单的响应结果。

H
HelloCrease 已提交
246
**系统能力:** SystemCapability.ArkUI.ArkUI.Full
K
kukixi 已提交
247

H
HelloCrease 已提交
248 249 250
| 名称    | 类型     | 必填   | 说明                       |
| ----- | ------ | ---- | ------------------------ |
| index | number | 否    | 选中按钮在buttons数组中的索引,从0开始。 |
K
kukixi 已提交
251

L
luoying_ace_admin 已提交
252 253 254 255
## Button

菜单中的菜单项按钮。

H
HelloCrease 已提交
256
**系统能力:** SystemCapability.ArkUI.ArkUI.Full
L
luoying_ace_admin 已提交
257

H
HelloCrease 已提交
258 259 260
| 名称    | 类型                                       | 必填   | 说明      |
| ----- | ---------------------------------------- | ---- | ------- |
| text  | string\| [Resource](../../ui/ts-types.md#resource类型)<sup>9+</sup> | 是    | 按钮文本内容。 |
L
luoying_ace_admin 已提交
261
| color | string\| [Resource](../../ui/ts-types.md#resource类型)<sup>9+</sup> | 是    | 按钮文本颜色。 |
L
luoying_ace_admin 已提交
262