跳到主要内容
版本:v2

模态框

Modals API 提供了触发原生模态窗口的方法,用于警告、确认和输入提示,以及操作列表。

示例​

import { Plugins, ActionSheetOptionStyle } from '@capacitor/core';

const { Modals } = Plugins;

async showAlert() {
let alertRet = await Modals.alert({
title: '停止',
message: '这是一个错误'
});
}

async showConfirm() {
let confirmRet = await Modals.confirm({
title: '确认',
message: '您确定要按下红色按钮吗?'
});
console.log('确认返回', confirmRet);
}

async showPrompt() {
let promptRet = await Modals.prompt({
title: '你好',
message: '你叫什么名字?'
});
console.log('提示返回', promptRet);
}

async showActions() {
let promptRet = await Modals.showActions({
title: '照片选项',
message: '选择一个操作来执行',
options: [
{
title: '上传'
},
{
title: '分享'
},
{
title: '删除',
style: ActionSheetOptionStyle.Destructive
}
]
})
console.log('你选择了', promptRet);
}

API​

alert(...)​

alert(options: AlertOptions) => Promise<void>

显示警告模态框

参数类型
options
AlertOptions

prompt(...)​

prompt(options: PromptOptions) => Promise<PromptResult>

显示提示模态框

参数类型
options
PromptOptions

返回:

Promise<PromptResult>


confirm(...)​

confirm(options: ConfirmOptions) => Promise<ConfirmResult>

显示确认模态框

参数类型
options
ConfirmOptions

返回:

Promise<ConfirmResult>


showActions(...)​

showActions(options: ActionSheetOptions) => Promise<ActionSheetResult>

显示操作列表样式的模态框,为用户提供多种选项进行选择。

参数类型
options
ActionSheetOptions

返回:

Promise<ActionSheetResult>


接口​

AlertOptions​

属性类型
titlestring
messagestring
buttonTitlestring

PromptResult​

属性类型
valuestring
cancelledboolean

PromptOptions​

属性类型
titlestring
messagestring
okButtonTitlestring
cancelButtonTitlestring
inputPlaceholderstring
inputTextstring

ConfirmResult​

属性类型
valueboolean

ConfirmOptions​

属性类型
titlestring
messagestring
okButtonTitlestring
cancelButtonTitlestring

ActionSheetResult​

属性类型
indexnumber

ActionSheetOptions​

属性类型描述
titlestring
messagestring仅 iOS
optionsActionSheetOption[]

ActionSheetOption​

属性类型描述
titlestring
style
ActionSheetOptionStyle
iconstringWeb 图标(ionicon 命名约定)

枚举​

ActionSheetOptionStyle​

成员值
Default"DEFAULT"
Destructive"DESTRUCTIVE"
Cancel"CANCEL"