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

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

5 6
> **说明:**
>
K
kukixi 已提交
7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
> 本模块首批接口从API version 8开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。

## 导入模块

```
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

**示例:**
  ```
  export default {    
    showToast() {        
      prompt.showToast({            
        message: 'Message Info',
        duration: 2000,      
      });
    }
  }
  ```
## ShowToastOptions

文本提示框的选项。

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

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

## prompt.showDialog

K
kukixi 已提交
53
showDialog(options: ShowDialogOptions): Promise&lt;ShowDialogSuccessResponse&gt;
K
kukixi 已提交
54 55

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

K
kukixi 已提交
57 58 59
**系统能力:** SystemCapability.ArkUI.ArkUI.Full

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

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

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

K
kukixi 已提交
70
**示例:**
K
kukixi 已提交
71

K
kukixi 已提交
72
  ```
K
kukixi 已提交
73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
  export default {
    showDialog() {
      prompt.showDialog({
        title: 'Title Info',
        message: 'Message Info',
        buttons: [
          {
             text: 'button1',
             color: '#000000',
          },
          {
             text: 'button2',
             color: '#000000',
          }
         ],
      })
      .then(data => {
        console.info('showDialog success, click button: ' + data.index);
      })
      .catch(err => {
        console.info('showDialog error: ' + err);
      })
K
kukixi 已提交
95 96 97 98
    }
  }
  ```

K
kukixi 已提交
99 100
## prompt.showDialog

K
kukixi 已提交
101
showDialog(options: ShowDialogOptions, callback: AsyncCallback&lt;ShowDialogSuccessResponse&gt;):void 
K
kukixi 已提交
102 103 104 105 106 107 108

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

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


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

**示例:**
  ```
K
kukixi 已提交
116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138
  export default {
    callback(err, data) {
      if(err) {
        console.info('showDialog err: ' + err);
        return;
      }
      console.info('showDialog success callback, click button: ' + data.index);
    },
    showDialog() {
      prompt.showDialog({
        title: 'showDialog Title Info',
        message: 'Message Info',
        buttons: [
          {
            text: 'button1',
            color: '#000000',
          },
          {
            text: 'button2',
            color: '#000000',
          }
        ]
      }, this.callback);
K
kukixi 已提交
139 140 141 142 143 144 145 146 147 148
    }
  }
  ```

## ShowDialogOptions

对话框的选项。

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

H
HelloCrease 已提交
149 150
| 名称      | 类型     | 必填   | 说明                                       |
| ------- | ------ | ---- | ---------------------------------------- |
L
luoying_ace_admin 已提交
151 152
| title   | string\| [Resource](../../ui/ts-types.md#resource类型)<sup>9+</sup> | 否    | 标题文本。                                    |
| message | string\| [Resource](../../ui/ts-types.md#resource类型)<sup>9+</sup> | 否    | 内容文本。                                    |
H
HelloCrease 已提交
153
| buttons | Array  | 否    | 对话框中按钮的数组,结构为:{text:'button',&nbsp;color:&nbsp;'\#666666'},支持1-3个按钮。其中第一个为positiveButton;第二个为negativeButton;第三个为neutralButton。 |
K
kukixi 已提交
154 155 156 157 158 159 160

## ShowDialogSuccessResponse 

对话框的响应结果。

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

H
HelloCrease 已提交
161 162
| 名称    | 类型     | 说明                  |
| ----- | ------ | ------------------- |
K
kukixi 已提交
163 164 165 166 167
| index | number | 选中按钮在buttons数组中的索引。 |


## prompt.showActionMenu

K
kukixi 已提交
168
showActionMenu(options: ActionMenuOptions, callback: AsyncCallback&lt;ActionMenuSuccessResponse&gt;):void
K
kukixi 已提交
169 170 171 172 173 174

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

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

**参数:**
H
HelloCrease 已提交
175 176 177 178
| 参数名      | 类型                                       | 必填   | 说明        |
| -------- | ---------------------------------------- | ---- | --------- |
| options  | [ActionMenuOptions](#actionmenuoptions)  | 是    | 操作菜单选项。   |
| callback | AsyncCallback&lt;[ActionMenuSuccessResponse](#actionmenusuccessresponse)> | 是    | 菜单响应结果回调。 |
K
kukixi 已提交
179 180 181 182


**示例:**
  ```
K
kukixi 已提交
183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204
  export default {
    callback(err, data) {
      if(err) {
        console.info('showActionMenu err: ' + err);
        return;
      }
      console.info('showActionMenu success callback, click button: ' + data.index);
    },
    showActionMenu() {
      prompt.showActionMenu({
        title: 'Title Info',
        buttons: [
          {
            text: 'item1',
            color: '#666666',
          },
          {
             text: 'item2',
             color: '#000000',
          },
        ]
      }, this.callback)
K
kukixi 已提交
205 206 207
    }
  }
  ```
K
kukixi 已提交
208

K
kukixi 已提交
209
## prompt.showActionMenu
K
kukixi 已提交
210

L
luoying_ace_admin 已提交
211
showActionMenu(options: ActionMenuOptions): Promise&lt;ActionMenuSuccessResponse&gt;
K
kukixi 已提交
212 213 214 215 216 217

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

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

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

K
kukixi 已提交
222
**返回值:**
H
HelloCrease 已提交
223 224 225
| 类型                                       | 说明      |
| ---------------------------------------- | ------- |
| Promise&lt;[ActionMenuSuccessResponse](#actionmenusuccessresponse)&gt; | 菜单响应结果。 |
K
kukixi 已提交
226 227 228

**示例:**
  ```
K
kukixi 已提交
229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249
  export default {
    showActionMenu() {
      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 已提交
250 251 252 253 254 255 256 257 258
    }
  }
  ```
## ActionMenuOptions

操作菜单的选项。

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

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

## ActionMenuSuccessResponse

操作菜单的响应结果。

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

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

L
luoying_ace_admin 已提交
274 275 276 277 278 279 280 281
## Button

菜单中的菜单项按钮。

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

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