ion-alert
Alert是一个向用户提供信息的对话框,或者使用输入从用户那里收集信息。在应用程序的内容顶部会出现一个提示,用户必须手动关闭该提示,然后才能恢复与应用程序的交互
头
,
小标题
而且
消息
.
按钮
在数组中
按钮
,每个按钮包含其属性
文本
,以及可选的
处理程序
.如果处理程序返回
假
那么,当点击按钮时,警报不会自动解除。所有按钮将按它们被添加到的顺序显示
按钮
从左到右数组。注意:最右边的按钮(数组中的最后一个)是主按钮。
可选的
角色
属性可以添加到按钮,例如
取消
.如果一个
取消
角色位于其中一个按钮上,然后如果通过点击背景来解除警报,那么它将从带有取消角色的按钮触发处理程序。
输入
警报还可以包括几种不同的输入,这些输入的数据可以传递回应用程序。输入可以作为提示用户信息的一种简单方式。单选、复选框和文本输入都可以接受,但不能混合使用。例如,一个警报可以有所有单选按钮输入,或者所有复选框输入,但是同一个警报不能混合单选按钮和复选框输入。但是请注意,不同类型的“文本”输入可以混合使用,例如
url
,
电子邮件
,
文本
,
文本区域
等。如果你需要一个复杂的表单UI,但不符合警报的指导方针,那么我们建议在模态中构建表单。
定制
Alert使用作用域封装,这意味着它将通过在运行时向每个样式附加一个附加类来自动限定CSS的作用域。在CSS中重写作用域选择器需要 高特异性 选择器。
我们建议传递一个自定义类
cssClass
在
创建
方法,并使用该方法向宿主元素和内部元素添加自定义样式。此属性还可以接受由空格分隔的多个类。查看
cssClass
.
/*不工作-不够具体*/
.alert-wrapper
{
背景
:
# e5e5e5
;
}
/*在cssClass中通过“我的自定义类”来增加专一性*/
.my-custom-class .alert-wrapper
{
背景
:
# e5e5e5
;
}
任何定义的
.my-custom-class
{
——背景
:
# e5e5e5
;
}
如果你正在构建一个Ionic Angular应betway东盟体育app用,这些样式需要添加到一个全局样式表文件中。读
风格的位置 详见下面的Angular部分。
接口
AlertButton
接口
AlertButton
{
文本
:
字符串
;
角色
?
:
“取消”
|
“破坏性的”
|
字符串
;
cssClass
?
:
字符串
|
字符串
[
]
;
处理程序
?
:
(
价值
:
任何
)
= >
布尔
|
无效
|
{
[
关键
:
字符串
]
:
任何
}
;
}
AlertInput
接口
AlertInput
{
类型
?
:
TextFieldTypes
|
“复选框”
|
“广播”
|
“文本区域”
;
的名字
?
:
字符串
;
占位符
?
:
字符串
;
价值
?
:
任何
;
标签
?
:
字符串
;
检查
?
:
布尔
;
禁用
?
:
布尔
;
id
?
:
字符串
;
处理程序
?
:
(
输入
:
AlertInput
)
= >
无效
;
最小值
?
:
字符串
|
数量
;
马克斯
?
:
字符串
|
数量
;
cssClass
?
:
字符串
|
字符串
[
]
;
属性
?
:
AlertInputAttributes
|
AlertTextareaAttributes
;
tabindex
?
:
数量
;
}
AlertInputAttributes
接口
AlertInputAttributes
扩展
JSXBase
.
InputHTMLAttributes
<
HTMLInputElement
>
{
}
AlertOptions
接口
AlertOptions
{
头
?
:
字符串
;
小标题
?
:
字符串
;
消息
?
:
字符串
|
betway东盟体育appIonicSafeString
;
cssClass
?
:
字符串
|
字符串
[
]
;
输入
?
:
AlertInput
[
]
;
按钮
?
:
(
AlertButton
|
字符串
)
[
]
;
backdropDismiss
?
:
布尔
;
半透明的
?
:
布尔
;
动画
?
:
布尔
;
htmlAttributes
?
:
AlertAttributes
;
模式
?
:
模式
;
keyboardClose
?
:
布尔
;
id
?
:
字符串
;
enterAnimation
?
:
AnimationBuilder
;
leaveAnimation
?
:
AnimationBuilder
;
}
AlertAttributes
接口
AlertAttributes
扩展
JSXBase
.
HTMLAttributes
<
HTMLElement
>
{
}
AlertTextareaAttributes
接口
AlertTextareaAttributes
扩展
JSXBase
.
TextareaHTMLAttributes
<
HTMLTextAreaElement
>
{
}
使用
进口
{
组件
}
从
“@angular /核心”
;
进口
{
AlertController
}
从
“@betway东盟体育appionic /角”
;
@
组件
(
{
选择器
:
“alert-example”
,
templateUrl
:
“alert-example.html”
,
styleUrls
:
[
”。/ alert-example.css '
]
,
}
)
出口
类
AlertExample
{
构造函数
(
公共
alertController
:
AlertController
)
{
}
异步
presentAlert
(
)
{
常量
警报
=
等待
这
.
alertController
.
创建
(
{
cssClass
:
“my-custom-class”
,
头
:
“警告”
,
小标题
:
“字幕”
,
消息
:
“这是一条警报信息。”
,
按钮
:
[
“好吧”
]
}
)
;
等待
警报
.
现在
(
)
;
常量
{
角色
}
=
等待
警报
.
onDidDismiss
(
)
;
控制台
.
日志
(
'onDidDismiss解决与角色'
,
角色
)
;
}
异步
presentAlertMultipleButtons
(
)
{
常量
警报
=
等待
这
.
alertController
.
创建
(
{
cssClass
:
“my-custom-class”
,
头
:
“警告”
,
小标题
:
“字幕”
,
消息
:
“这是一条警报信息。”
,
按钮
:
[
“取消”
,
“开放模式”
,
“删除”
]
}
)
;
等待
警报
.
现在
(
)
;
}
异步
presentAlertConfirm
(
)
{
常量
警报
=
等待
这
.
alertController
.
创建
(
{
cssClass
:
“my-custom-class”
,
头
:
“确定!”
,
消息
:
的消息文本<强> < / >强! !”
,
按钮
:
[
{
文本
:
“取消”
,
角色
:
“取消”
,
cssClass
:
“二级”
,
处理程序
:
(
废话
)
= >
{
控制台
.
日志
(
“确认取消:废话”
)
;
}
}
,
{
文本
:
“好吧”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认好了的
)
;
}
}
]
}
)
;
等待
警报
.
现在
(
)
;
}
异步
presentAlertPrompt
(
)
{
常量
警报
=
等待
这
.
alertController
.
创建
(
{
cssClass
:
“my-custom-class”
,
头
:
“提示!”
,
输入
:
[
{
的名字
:
“name1”
,
类型
:
“文本”
,
占位符
:
的占位符1
}
,
{
的名字
:
“name2”
,
类型
:
“文本”
,
id
:
“name2-id”
,
价值
:
“你好”
,
占位符
:
《占位符2》
}
,
/ /多行输入。
{
的名字
:
“段落”
,
id
:
“段落”
,
类型
:
“文本区域”
,
占位符
:
的占位符3 '
}
,
{
的名字
:
“name3”
,
价值
:
“http://betway东盟体育appwww.jesscamp.com”
,
类型
:
“url”
,
占位符
:
史上最喜欢的网站的
}
,
//输入日期和最小和最大
{
的名字
:
“name4”
,
类型
:
“日期”
,
最小值
:
“2017-03-01”
,
马克斯
:
“2018-01-12”
}
,
//输入日期
{
的名字
:
“name5”
,
类型
:
“日期”
}
,
{
的名字
:
“name6”
,
类型
:
“数量”
,
最小值
:
-
5
,
马克斯
:
10
}
,
{
的名字
:
“name7”
,
类型
:
“数量”
}
,
{
的名字
:
“name8”
,
类型
:
“密码”
,
占位符
:
“高级属性”
,
cssClass
:
“specialClass”
,
属性
:
{
最大长度
:
4
,
inputmode
:
“小数”
}
}
]
,
按钮
:
[
{
文本
:
“取消”
,
角色
:
“取消”
,
cssClass
:
“二级”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认取消的
)
;
}
}
,
{
文本
:
“好吧”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认好了的
)
;
}
}
]
}
)
;
等待
警报
.
现在
(
)
;
}
异步
presentAlertRadio
(
)
{
常量
警报
=
等待
这
.
alertController
.
创建
(
{
cssClass
:
“my-custom-class”
,
头
:
“广播”
,
输入
:
[
{
的名字
:
迎合广大的
,
类型
:
“广播”
,
标签
:
“电台1”
,
价值
:
“value1”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“电台1选择”
)
;
}
,
检查
:
真正的
}
,
{
的名字
:
“radio2”
,
类型
:
“广播”
,
标签
:
《电台2》
,
价值
:
“value2”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“电台2选择”
)
;
}
}
,
{
的名字
:
“radio3”
,
类型
:
“广播”
,
标签
:
《广播3》
,
价值
:
“value3”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“广播3选择”
)
;
}
}
,
{
的名字
:
“节目”
,
类型
:
“广播”
,
标签
:
“Radio 4”
,
价值
:
“value4”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“Radio 4选择”
)
;
}
}
,
{
的名字
:
“radio5”
,
类型
:
“广播”
,
标签
:
“电台5”
,
价值
:
“value5”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“电台5选择”
)
;
}
}
,
{
的名字
:
“radio6”
,
类型
:
“广播”
,
标签
:
“第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台
,
价值
:
“value6”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“广播6选择”
)
;
}
}
]
,
按钮
:
[
{
文本
:
“取消”
,
角色
:
“取消”
,
cssClass
:
“二级”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认取消的
)
;
}
}
,
{
文本
:
“好吧”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认好了的
)
;
}
}
]
}
)
;
等待
警报
.
现在
(
)
;
}
异步
presentAlertCheckbox
(
)
{
常量
警报
=
等待
这
.
alertController
.
创建
(
{
cssClass
:
“my-custom-class”
,
头
:
“复选框”
,
输入
:
[
{
的名字
:
“checkbox1”
,
类型
:
“复选框”
,
标签
:
“复选框1”
,
价值
:
“value1”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“选择复选框1”
)
;
}
,
检查
:
真正的
}
,
{
的名字
:
“checkbox2”
,
类型
:
“复选框”
,
标签
:
“复选框2”
,
价值
:
“value2”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“复选框选中2”
)
;
}
}
,
{
的名字
:
“checkbox3”
,
类型
:
“复选框”
,
标签
:
'复选框3 '
,
价值
:
“value3”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“复选框选中3”
)
;
}
}
,
{
的名字
:
“checkbox4”
,
类型
:
“复选框”
,
标签
:
“复选框4”
,
价值
:
“value4”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“复选框选中4”
)
;
}
}
,
{
的名字
:
“checkbox5”
,
类型
:
“复选框”
,
标签
:
”复选框5 '
,
价值
:
“value5”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“复选框选中5”
)
;
}
}
,
{
的名字
:
“checkbox6”
,
类型
:
“复选框”
,
标签
:
’Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 `
,
价值
:
“value6”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“复选框选中6”
)
;
}
}
]
,
按钮
:
[
{
文本
:
“取消”
,
角色
:
“取消”
,
cssClass
:
“二级”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认取消的
)
;
}
}
,
{
文本
:
“好吧”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认好了的
)
;
}
}
]
}
)
;
等待
警报
.
现在
(
)
;
}
}
风格的位置
在Angular中,特定页面的CSS作用域仅局限于该页面的元素。尽管Alert可以在页面中显示,但是
ion-alert
元素追加到当前页面的外部。这意味着任何定制样式都需要放在一个全局样式表文件中。在离子角起动betway东盟体育app器中,这可以是
src / global.scss
文件或者您可以注册一个新的全局样式文件
增加了
风格
构建选项
angular.json
.
函数
presentAlert
(
)
{
常量
警报
=
文档
.
createElement
(
“ion-alert”
)
;
警报
.
cssClass
=
“my-custom-class”
;
警报
.
头
=
“警告”
;
警报
.
小标题
=
“字幕”
;
警报
.
消息
=
“这是一条警报信息。”
;
警报
.
按钮
=
[
“好吧”
]
;
文档
.
身体
.
列表末尾
(
警报
)
;
等待
警报
.
现在
(
)
;
常量
{
角色
}
=
等待
警报
.
onDidDismiss
(
)
;
控制台
.
日志
(
'onDidDismiss解决与角色'
,
角色
)
;
}
函数
presentAlertMultipleButtons
(
)
{
常量
警报
=
文档
.
createElement
(
“ion-alert”
)
;
警报
.
cssClass
=
“my-custom-class”
;
警报
.
头
=
“警告”
;
警报
.
小标题
=
“字幕”
;
警报
.
消息
=
“这是一条警报信息。”
;
警报
.
按钮
=
[
“取消”
,
“开放模式”
,
“删除”
]
;
文档
.
身体
.
列表末尾
(
警报
)
;
返回
警报
.
现在
(
)
;
}
函数
presentAlertConfirm
(
)
{
常量
警报
=
文档
.
createElement
(
“ion-alert”
)
;
警报
.
cssClass
=
“my-custom-class”
;
警报
.
头
=
“确定!”
;
警报
.
消息
=
的消息文本<强> < / >强! !”
;
警报
.
按钮
=
[
{
文本
:
“取消”
,
角色
:
“取消”
,
cssClass
:
“二级”
,
处理程序
:
(
废话
)
= >
{
控制台
.
日志
(
“确认取消:废话”
)
;
}
}
,
{
文本
:
“好吧”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认好了的
)
}
}
]
;
文档
.
身体
.
列表末尾
(
警报
)
;
返回
警报
.
现在
(
)
;
}
函数
presentAlertPrompt
(
)
{
常量
警报
=
文档
.
createElement
(
“ion-alert”
)
;
警报
.
cssClass
=
“my-custom-class”
;
警报
.
头
=
“提示!”
;
警报
.
输入
=
[
{
占位符
:
的占位符1
}
,
{
的名字
:
“name2”
,
id
:
“name2-id”
,
价值
:
“你好”
,
占位符
:
《占位符2》
}
,
/ /多行输入。
{
的名字
:
“段落”
,
id
:
“段落”
,
类型
:
“文本区域”
,
占位符
:
的占位符3 '
}
,
{
的名字
:
“name3”
,
价值
:
“http://betway东盟体育appwww.jesscamp.com”
,
类型
:
“url”
,
占位符
:
史上最喜欢的网站的
}
,
//输入日期和最小和最大
{
的名字
:
“name4”
,
类型
:
“日期”
,
最小值
:
“2017-03-01”
,
马克斯
:
“2018-01-12”
}
,
//输入日期
{
的名字
:
“name5”
,
类型
:
“日期”
}
,
{
的名字
:
“name6”
,
类型
:
“数量”
,
最小值
:
-
5
,
马克斯
:
10
}
,
{
的名字
:
“name7”
,
类型
:
“数量”
}
,
{
的名字
:
“name8”
,
类型
:
“密码”
,
占位符
:
“高级属性”
,
cssClass
:
“specialClass”
,
属性
:
{
最大长度
:
4
,
inputmode
:
“小数”
}
}
]
;
警报
.
按钮
=
[
{
文本
:
“取消”
,
角色
:
“取消”
,
cssClass
:
“二级”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认取消的
)
}
}
,
{
文本
:
“好吧”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认好了的
)
}
}
]
;
文档
.
身体
.
列表末尾
(
警报
)
;
返回
警报
.
现在
(
)
;
}
函数
presentAlertRadio
(
)
{
常量
警报
=
文档
.
createElement
(
“ion-alert”
)
;
警报
.
cssClass
=
“my-custom-class”
;
警报
.
头
=
“广播”
;
警报
.
输入
=
[
{
类型
:
“广播”
,
标签
:
“电台1”
,
价值
:
“value1”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“电台1选择”
)
;
}
,
检查
:
真正的
}
,
{
类型
:
“广播”
,
标签
:
《电台2》
,
价值
:
“value2”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“电台2选择”
)
;
}
}
,
{
类型
:
“广播”
,
标签
:
《广播3》
,
价值
:
“value3”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“广播3选择”
)
;
}
}
,
{
类型
:
“广播”
,
标签
:
“Radio 4”
,
价值
:
“value4”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“Radio 4选择”
)
;
}
}
,
{
类型
:
“广播”
,
标签
:
“电台5”
,
价值
:
“value5”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“电台5选择”
)
;
}
}
,
{
类型
:
“广播”
,
标签
:
“第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台
,
价值
:
“value6”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“广播6选择”
)
;
}
}
]
;
警报
.
按钮
=
[
{
文本
:
“取消”
,
角色
:
“取消”
,
cssClass
:
“二级”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认取消的
)
}
}
,
{
文本
:
“好吧”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认好了的
)
}
}
]
;
文档
.
身体
.
列表末尾
(
警报
)
;
返回
警报
.
现在
(
)
;
}
函数
presentAlertCheckbox
(
)
{
常量
警报
=
文档
.
createElement
(
“ion-alert”
)
;
警报
.
cssClass
=
“my-custom-class”
;
警报
.
头
=
“复选框”
;
警报
.
输入
=
[
{
类型
:
“复选框”
,
标签
:
“复选框1”
,
价值
:
“value1”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“选择复选框1”
)
;
}
,
检查
:
真正的
}
,
{
类型
:
“复选框”
,
标签
:
“复选框2”
,
价值
:
“value2”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“复选框选中2”
)
;
}
}
,
{
类型
:
“复选框”
,
标签
:
'复选框3 '
,
价值
:
“value3”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“复选框选中3”
)
;
}
}
,
{
类型
:
“复选框”
,
标签
:
“复选框4”
,
价值
:
“value4”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“复选框选中4”
)
;
}
}
,
{
类型
:
“复选框”
,
标签
:
”复选框5 '
,
价值
:
“value5”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“复选框选中5”
)
;
}
}
,
{
类型
:
“复选框”
,
标签
:
’Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 `
,
价值
:
“value6”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“复选框选中6”
)
;
}
}
]
;
警报
.
按钮
=
[
{
文本
:
“取消”
,
角色
:
“取消”
,
cssClass
:
“二级”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认取消的
)
}
}
,
{
文本
:
“好吧”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认好了的
)
}
}
]
;
文档
.
身体
.
列表末尾
(
警报
)
;
返回
警报
.
现在
(
)
;
}
/*使用与useIonAlert钩子*/
进口
反应
从
“反应”
;
进口
{
IonButton
,
IonContent
,
IonPage
,
useIonAlert
}
从
“@betway东盟体育appionic /反应”
;
常量
AlertExample
:
反应
.
足球俱乐部
=
(
)
= >
{
常量
[
现在
]
=
useIonAlert
(
)
;
返回
(
<
IonPage
>
<
IonContent
全屏
>
<
IonButton
扩大
=
"
块
"
onClick
=
{
(
)
= >
现在
(
{
cssClass
:
“我的css”
,
头
:
“警告”
,
消息
:
“警戒级别从钩”
,
按钮
:
[
“取消”
,
{
文本
:
“好吧”
,
处理程序
:
(
d
)
= >
控制台
.
日志
(
“好压”
)
}
,
]
,
onDidDismiss
:
(
e
)
= >
控制台
.
日志
(
“解散”
)
,
}
)
}
>
显示警报
IonButton
>
<
IonButton
扩大
=
"
块
"
onClick
=
{
(
)
= >
现在
(
“你好与参数”
,
[
{
文本
:
“好吧”
}
]
)
}
>
使用参数显示警报
IonButton
>
IonContent
>
IonPage
>
)
;
}
;
/*使用与IonAlert组件*/
进口
反应
,
{
useState
}
从
“反应”
;
进口
{
IonAlert
,
IonButton
,
IonContent
}
从
“@betway东盟体育appionic /反应”
;
出口
常量
AlertExample
:
反应
.
足球俱乐部
=
(
)
= >
{
常量
[
showAlert1
,
setShowAlert1
]
=
useState
(
假
)
;
常量
[
showAlert2
,
setShowAlert2
]
=
useState
(
假
)
;
常量
[
showAlert3
,
setShowAlert3
]
=
useState
(
假
)
;
常量
[
showAlert4
,
setShowAlert4
]
=
useState
(
假
)
;
常量
[
showAlert5
,
setShowAlert5
]
=
useState
(
假
)
;
常量
[
showAlert6
,
setShowAlert6
]
=
useState
(
假
)
;
返回
(
<
IonContent
>
<
IonButton
onClick
=
{
(
)
= >
setShowAlert1
(
真正的
)
}
扩大
=
"
块
"
>
显示警报1
IonButton
>
<
IonButton
onClick
=
{
(
)
= >
setShowAlert2
(
真正的
)
}
扩大
=
"
块
"
>
显示警报2
IonButton
>
<
IonButton
onClick
=
{
(
)
= >
setShowAlert3
(
真正的
)
}
扩大
=
"
块
"
>
显示警告3
IonButton
>
<
IonButton
onClick
=
{
(
)
= >
setShowAlert4
(
真正的
)
}
扩大
=
"
块
"
>
显示警告4
IonButton
>
<
IonButton
onClick
=
{
(
)
= >
setShowAlert5
(
真正的
)
}
扩大
=
"
块
"
>
显示警报5
IonButton
>
<
IonButton
onClick
=
{
(
)
= >
setShowAlert6
(
真正的
)
}
扩大
=
"
块
"
>
显示警报6
IonButton
>
<
IonAlert
isOpen
=
{
showAlert1
}
onDidDismiss
=
{
(
)
= >
setShowAlert1
(
假
)
}
cssClass
=
'
my-custom-class
'
头
=
{
“警告”
}
小标题
=
{
“字幕”
}
消息
=
{
“这是一条警报信息。”
}
按钮
=
{
[
“好吧”
]
}
/>
<
IonAlert
isOpen
=
{
showAlert2
}
onDidDismiss
=
{
(
)
= >
setShowAlert2
(
假
)
}
cssClass
=
'
my-custom-class
'
头
=
{
“警告”
}
小标题
=
{
“字幕”
}
消息
=
{
“这是一条警报信息。”
}
按钮
=
{
[
“取消”
,
“开放模式”
,
“删除”
]
}
/>
<
IonAlert
isOpen
=
{
showAlert3
}
onDidDismiss
=
{
(
)
= >
setShowAlert3
(
假
)
}
cssClass
=
'
my-custom-class
'
头
=
{
“确定!”
}
消息
=
{
的消息文本<强> < / >强! !”
}
按钮
=
{
[
{
文本
:
“取消”
,
角色
:
“取消”
,
cssClass
:
“二级”
,
处理程序
:
废话
= >
{
控制台
.
日志
(
“确认取消:废话”
)
;
}
}
,
{
文本
:
“好吧”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认好了的
)
;
}
}
]
}
/>
<
IonAlert
isOpen
=
{
showAlert4
}
onDidDismiss
=
{
(
)
= >
setShowAlert4
(
假
)
}
cssClass
=
'
my-custom-class
'
头
=
{
“提示!”
}
输入
=
{
[
{
的名字
:
“name1”
,
类型
:
“文本”
,
占位符
:
的占位符1
}
,
{
的名字
:
“name2”
,
类型
:
“文本”
,
id
:
“name2-id”
,
价值
:
“你好”
,
占位符
:
《占位符2》
}
,
{
的名字
:
“name3”
,
价值
:
“http://betway东盟体育appwww.jesscamp.com”
,
类型
:
“url”
,
占位符
:
史上最喜欢的网站的
}
,
//输入日期和最小和最大
{
的名字
:
“name4”
,
类型
:
“日期”
,
最小值
:
“2017-03-01”
,
马克斯
:
“2018-01-12”
}
,
//输入日期
{
的名字
:
“name5”
,
类型
:
“日期”
}
,
{
的名字
:
“name6”
,
类型
:
“数量”
,
最小值
:
-
5
,
马克斯
:
10
}
,
{
的名字
:
“name7”
,
类型
:
“数量”
}
,
{
的名字
:
“name8”
,
类型
:
“密码”
,
占位符
:
“高级属性”
,
cssClass
:
“specialClass”
,
属性
:
{
最大长度
:
4
,
inputmode
:
“小数”
}
}
]
}
按钮
=
{
[
{
文本
:
“取消”
,
角色
:
“取消”
,
cssClass
:
“二级”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认取消的
)
;
}
}
,
{
文本
:
“好吧”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认好了的
)
;
}
}
]
}
/>
<
IonAlert
isOpen
=
{
showAlert5
}
onDidDismiss
=
{
(
)
= >
setShowAlert5
(
假
)
}
cssClass
=
'
my-custom-class
'
头
=
{
“广播”
}
输入
=
{
[
{
的名字
:
迎合广大的
,
类型
:
“广播”
,
标签
:
“电台1”
,
价值
:
“value1”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“电台1选择”
)
;
}
,
检查
:
真正的
}
,
{
的名字
:
“radio2”
,
类型
:
“广播”
,
标签
:
《电台2》
,
价值
:
“value2”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“电台2选择”
)
;
}
}
,
{
的名字
:
“radio3”
,
类型
:
“广播”
,
标签
:
《广播3》
,
价值
:
“value3”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“广播3选择”
)
;
}
}
,
{
的名字
:
“节目”
,
类型
:
“广播”
,
标签
:
“Radio 4”
,
价值
:
“value4”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“Radio 4选择”
)
;
}
}
,
{
的名字
:
“radio5”
,
类型
:
“广播”
,
标签
:
“电台5”
,
价值
:
“value5”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“电台5选择”
)
;
}
}
,
{
的名字
:
“radio6”
,
类型
:
“广播”
,
标签
:
“广播6”
,
价值
:
“value6”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“广播6选择”
)
;
}
}
]
}
按钮
=
{
[
{
文本
:
“取消”
,
角色
:
“取消”
,
cssClass
:
“二级”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认取消的
)
;
}
}
,
{
文本
:
“好吧”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认好了的
)
;
}
}
]
}
/>
<
IonAlert
isOpen
=
{
showAlert6
}
onDidDismiss
=
{
(
)
= >
setShowAlert6
(
假
)
}
cssClass
=
'
my-custom-class
'
头
=
{
“复选框”
}
输入
=
{
[
{
的名字
:
“checkbox1”
,
类型
:
“复选框”
,
标签
:
“复选框1”
,
价值
:
“value1”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“选择复选框1”
)
;
}
,
检查
:
真正的
}
,
{
的名字
:
“checkbox2”
,
类型
:
“复选框”
,
标签
:
“复选框2”
,
价值
:
“value2”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“复选框选中2”
)
;
}
}
,
{
的名字
:
“checkbox3”
,
类型
:
“复选框”
,
标签
:
'复选框3 '
,
价值
:
“value3”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“复选框选中3”
)
;
}
}
,
{
的名字
:
“checkbox4”
,
类型
:
“复选框”
,
标签
:
“复选框4”
,
价值
:
“value4”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“复选框选中4”
)
;
}
}
,
{
的名字
:
“checkbox5”
,
类型
:
“复选框”
,
标签
:
”复选框5 '
,
价值
:
“value5”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“复选框选中5”
)
;
}
}
,
{
的名字
:
“checkbox6”
,
类型
:
“复选框”
,
标签
:
“复选框6”
,
价值
:
“value6”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“复选框选中6”
)
;
}
}
]
}
按钮
=
{
[
{
文本
:
“取消”
,
角色
:
“取消”
,
cssClass
:
“二级”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认取消的
)
;
}
}
,
{
文本
:
“好吧”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认好了的
)
;
}
}
]
}
/>
IonContent
>
)
;
}
出口
默认的
AlertExample
;
进口
{
组件
,
h
}
从
“@stencil /核心”
;
进口
{
alertController
}
从
“@betway东盟体育appionic /核心”
;
@
组件
(
{
标签
:
“alert-example”
,
styleUrl
:
“alert-example.css”
}
)
出口
类
AlertExample
{
异步
presentAlert
(
)
{
常量
警报
=
等待
alertController
.
创建
(
{
cssClass
:
“my-custom-class”
,
头
:
“警告”
,
小标题
:
“字幕”
,
消息
:
“这是一条警报信息。”
,
按钮
:
[
“好吧”
]
}
)
;
等待
警报
.
现在
(
)
;
常量
{
角色
}
=
等待
警报
.
onDidDismiss
(
)
;
控制台
.
日志
(
'onDidDismiss解决与角色'
,
角色
)
;
}
异步
presentAlertMultipleButtons
(
)
{
常量
警报
=
等待
alertController
.
创建
(
{
cssClass
:
“my-custom-class”
,
头
:
“警告”
,
小标题
:
“字幕”
,
消息
:
“这是一条警报信息。”
,
按钮
:
[
“取消”
,
“开放模式”
,
“删除”
]
}
)
;
等待
警报
.
现在
(
)
;
}
异步
presentAlertConfirm
(
)
{
常量
警报
=
等待
alertController
.
创建
(
{
cssClass
:
“my-custom-class”
,
头
:
“确定!”
,
消息
:
的消息文本<强> < / >强! !”
,
按钮
:
[
{
文本
:
“取消”
,
角色
:
“取消”
,
cssClass
:
“二级”
,
处理程序
:
(
废话
)
= >
{
控制台
.
日志
(
“确认取消:废话”
)
;
}
}
,
{
文本
:
“好吧”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认好了的
)
;
}
}
]
}
)
;
等待
警报
.
现在
(
)
;
}
异步
presentAlertPrompt
(
)
{
常量
警报
=
等待
alertController
.
创建
(
{
cssClass
:
“my-custom-class”
,
头
:
“提示!”
,
输入
:
[
{
的名字
:
“name1”
,
类型
:
“文本”
,
占位符
:
的占位符1
}
,
{
的名字
:
“name2”
,
类型
:
“文本”
,
id
:
“name2-id”
,
价值
:
“你好”
,
占位符
:
《占位符2》
}
,
/ /多行输入。
{
的名字
:
“段落”
,
id
:
“段落”
,
类型
:
“文本区域”
,
占位符
:
的占位符3 '
}
,
{
的名字
:
“name3”
,
价值
:
“http://betway东盟体育appwww.jesscamp.com”
,
类型
:
“url”
,
占位符
:
史上最喜欢的网站的
}
,
//输入日期和最小和最大
{
的名字
:
“name4”
,
类型
:
“日期”
,
最小值
:
“2017-03-01”
,
马克斯
:
“2018-01-12”
}
,
//输入日期
{
的名字
:
“name5”
,
类型
:
“日期”
}
,
{
的名字
:
“name6”
,
类型
:
“数量”
,
最小值
:
-
5
,
马克斯
:
10
}
,
{
的名字
:
“name7”
,
类型
:
“数量”
}
,
{
的名字
:
“name8”
,
类型
:
“密码”
,
占位符
:
“高级属性”
,
cssClass
:
“specialClass”
,
属性
:
{
最大长度
:
4
,
inputmode
:
“小数”
}
}
]
,
按钮
:
[
{
文本
:
“取消”
,
角色
:
“取消”
,
cssClass
:
“二级”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认取消的
)
;
}
}
,
{
文本
:
“好吧”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认好了的
)
;
}
}
]
}
)
;
等待
警报
.
现在
(
)
;
}
异步
presentAlertRadio
(
)
{
常量
警报
=
等待
alertController
.
创建
(
{
cssClass
:
“my-custom-class”
,
头
:
“广播”
,
输入
:
[
{
的名字
:
迎合广大的
,
类型
:
“广播”
,
标签
:
“电台1”
,
价值
:
“value1”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“电台1选择”
)
;
}
,
检查
:
真正的
}
,
{
的名字
:
“radio2”
,
类型
:
“广播”
,
标签
:
《电台2》
,
价值
:
“value2”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“电台2选择”
)
;
}
}
,
{
的名字
:
“radio3”
,
类型
:
“广播”
,
标签
:
《广播3》
,
价值
:
“value3”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“广播3选择”
)
;
}
}
,
{
的名字
:
“节目”
,
类型
:
“广播”
,
标签
:
“Radio 4”
,
价值
:
“value4”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“Radio 4选择”
)
;
}
}
,
{
的名字
:
“radio5”
,
类型
:
“广播”
,
标签
:
“电台5”
,
价值
:
“value5”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“电台5选择”
)
;
}
}
,
{
的名字
:
“radio6”
,
类型
:
“广播”
,
标签
:
“第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台第六电台
,
价值
:
“value6”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“广播6选择”
)
;
}
}
]
,
按钮
:
[
{
文本
:
“取消”
,
角色
:
“取消”
,
cssClass
:
“二级”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认取消的
)
;
}
}
,
{
文本
:
“好吧”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认好了的
)
;
}
}
]
}
)
;
等待
警报
.
现在
(
)
;
}
异步
presentAlertCheckbox
(
)
{
常量
警报
=
等待
alertController
.
创建
(
{
cssClass
:
“my-custom-class”
,
头
:
“复选框”
,
输入
:
[
{
的名字
:
“checkbox1”
,
类型
:
“复选框”
,
标签
:
“复选框1”
,
价值
:
“value1”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“选择复选框1”
)
;
}
,
检查
:
真正的
}
,
{
的名字
:
“checkbox2”
,
类型
:
“复选框”
,
标签
:
“复选框2”
,
价值
:
“value2”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“复选框选中2”
)
;
}
}
,
{
的名字
:
“checkbox3”
,
类型
:
“复选框”
,
标签
:
'复选框3 '
,
价值
:
“value3”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“复选框选中3”
)
;
}
}
,
{
的名字
:
“checkbox4”
,
类型
:
“复选框”
,
标签
:
“复选框4”
,
价值
:
“value4”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“复选框选中4”
)
;
}
}
,
{
的名字
:
“checkbox5”
,
类型
:
“复选框”
,
标签
:
”复选框5 '
,
价值
:
“value5”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“复选框选中5”
)
;
}
}
,
{
的名字
:
“checkbox6”
,
类型
:
“复选框”
,
标签
:
’Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 `
,
价值
:
“value6”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“复选框选中6”
)
;
}
}
]
,
按钮
:
[
{
文本
:
“取消”
,
角色
:
“取消”
,
cssClass
:
“二级”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认取消的
)
;
}
}
,
{
文本
:
“好吧”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认好了的
)
;
}
}
]
}
)
;
等待
警报
.
现在
(
)
;
}
渲染
(
)
{
返回
[
<
离子含量
>
<
ion-button
onClick
=
{
(
)
= >
这
.
presentAlert
(
)
}
>
现在警报
ion-button
>
<
ion-button
onClick
=
{
(
)
= >
这
.
presentAlertMultipleButtons
(
)
}
>
当前警报:多个按钮
ion-button
>
<
ion-button
onClick
=
{
(
)
= >
这
.
presentAlertConfirm
(
)
}
>
现在提醒:确认
ion-button
>
<
ion-button
onClick
=
{
(
)
= >
这
.
presentAlertPrompt
(
)
}
>
现在提醒:提示
ion-button
>
<
ion-button
onClick
=
{
(
)
= >
这
.
presentAlertRadio
(
)
}
>
现在提醒:广播
ion-button
>
<
ion-button
onClick
=
{
(
)
= >
这
.
presentAlertCheckbox
(
)
}
>
现在提醒:复选框
ion-button
>
离子含量
>
]
;
}
}
<
模板
>
<
ion-button
@click
=
"
presentAlert
"
>
显示警报
ion-button
>
<
ion-button
@click
=
"
presentAlertMultipleButtons
"
>
显示警报(多个按钮)
ion-button
>
<
ion-button
@click
=
"
presentAlertConfirm
"
>
显示警报(确认)
ion-button
>
<
ion-button
@click
=
"
presentAlertPrompt
"
>
显示警告(提示)
ion-button
>
<
ion-button
@click
=
"
presentAlertRadio
"
>
显示警报(广播)
ion-button
>
<
ion-button
@click
=
"
presentAlertCheckbox
"
>
显示警报(复选框)
ion-button
>
模板
>
<
脚本
>
进口
{
IonButton
,
alertController
}
从
“@betway东盟体育appionic / vue”
;
进口
{
defineComponent
}
从
“vue”
;
出口
默认的
defineComponent
(
{
组件
:
{
IonButton
}
,
方法
:
{
异步
presentAlert
(
)
{
常量
警报
=
等待
alertController
.
创建
(
{
cssClass
:
“my-custom-class”
,
头
:
“警告”
,
小标题
:
“字幕”
,
消息
:
“这是一条警报信息。”
,
按钮
:
[
“好吧”
]
,
}
)
;
等待
警报
.
现在
(
)
;
常量
{
角色
}
=
等待
警报
.
onDidDismiss
(
)
;
控制台
.
日志
(
'onDidDismiss解决与角色'
,
角色
)
;
}
,
异步
presentAlertMultipleButtons
(
)
{
常量
警报
=
等待
alertController
.
创建
(
{
cssClass
:
“my-custom-class”
,
头
:
“警告”
,
小标题
:
“字幕”
,
消息
:
“这是一条警报信息。”
,
按钮
:
[
“取消”
,
“开放模式”
,
“删除”
]
,
}
)
;
返回
警报
.
现在
(
)
;
}
,
异步
presentAlertConfirm
(
)
{
常量
警报
=
等待
alertController
.
创建
(
{
cssClass
:
“my-custom-class”
,
头
:
“确定!”
,
消息
:
的消息文本<强> < / >强! !”
,
按钮
:
[
{
文本
:
“取消”
,
角色
:
“取消”
,
cssClass
:
“二级”
,
处理程序
:
废话
= >
{
控制台
.
日志
(
“确认取消:
,
废话
)
}
,
}
,
{
文本
:
“好吧”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认好了的
)
}
,
}
,
]
,
}
)
;
返回
警报
.
现在
(
)
;
}
,
异步
presentAlertPrompt
(
)
{
常量
警报
=
等待
alertController
.
创建
(
{
cssClass
:
“my-custom-class”
,
头
:
“提示!”
,
输入
:
[
{
占位符
:
的占位符1
,
}
,
{
的名字
:
“name2”
,
id
:
“name2-id”
,
价值
:
“你好”
,
占位符
:
《占位符2》
,
}
,
{
的名字
:
“name3”
,
价值
:
“http://betway东盟体育appwww.jesscamp.com”
,
类型
:
“url”
,
占位符
:
史上最喜欢的网站的
,
}
,
//输入日期和最小和最大
{
的名字
:
“name4”
,
类型
:
“日期”
,
最小值
:
“2017-03-01”
,
马克斯
:
“2018-01-12”
,
}
,
//输入日期
{
的名字
:
“name5”
,
类型
:
“日期”
,
}
,
{
的名字
:
“name6”
,
类型
:
“数量”
,
最小值
:
-
5
,
马克斯
:
10
,
}
,
{
的名字
:
“name7”
,
类型
:
“数量”
,
}
,
{
的名字
:
“name8”
,
类型
:
“密码”
,
占位符
:
“高级属性”
,
cssClass
:
“specialClass”
,
属性
:
{
最大长度
:
4
,
inputmode
:
“小数”
}
}
]
,
按钮
:
[
{
文本
:
“取消”
,
角色
:
“取消”
,
cssClass
:
“二级”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认取消的
)
}
,
}
,
{
文本
:
“好吧”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认好了的
)
}
,
}
,
]
,
}
)
;
返回
警报
.
现在
(
)
;
}
,
异步
presentAlertRadio
(
)
{
常量
警报
=
等待
alertController
.
创建
(
{
cssClass
:
“my-custom-class”
,
头
:
“广播”
,
输入
:
[
{
类型
:
“广播”
,
标签
:
“电台1”
,
价值
:
“value1”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“电台1选择”
)
;
}
,
检查
:
真正的
,
}
,
{
类型
:
“广播”
,
标签
:
《电台2》
,
价值
:
“value2”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“电台2选择”
)
;
}
}
,
{
类型
:
“广播”
,
标签
:
《广播3》
,
价值
:
“value3”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“广播3选择”
)
;
}
}
,
{
类型
:
“广播”
,
标签
:
“Radio 4”
,
价值
:
“value4”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“Radio 4选择”
)
;
}
}
,
{
类型
:
“广播”
,
标签
:
“电台5”
,
价值
:
“value5”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“电台5选择”
)
;
}
}
,
{
类型
:
“广播”
,
标签
:
“广播6”
,
价值
:
“value6”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“广播6选择”
)
;
}
}
,
]
,
按钮
:
[
{
文本
:
“取消”
,
角色
:
“取消”
,
cssClass
:
“二级”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认取消的
)
}
,
}
,
{
文本
:
“好吧”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认好了的
)
}
,
}
,
]
,
}
)
;
返回
警报
.
现在
(
)
;
}
,
异步
presentAlertCheckbox
(
)
{
常量
警报
=
等待
alertController
.
创建
(
{
cssClass
:
“my-custom-class”
,
头
:
“复选框”
,
输入
:
[
{
类型
:
“复选框”
,
标签
:
“复选框1”
,
价值
:
“value1”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“选择复选框1”
)
;
}
,
检查
:
真正的
,
}
,
{
类型
:
“复选框”
,
标签
:
“复选框2”
,
价值
:
“value2”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“复选框选中2”
)
;
}
}
,
{
类型
:
“复选框”
,
标签
:
'复选框3 '
,
价值
:
“value3”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“复选框选中3”
)
;
}
}
,
{
类型
:
“复选框”
,
标签
:
“复选框4”
,
价值
:
“value4”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“复选框选中4”
)
;
}
}
,
{
类型
:
“复选框”
,
标签
:
”复选框5 '
,
价值
:
“value5”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“复选框选中5”
)
;
}
}
,
{
类型
:
“复选框”
,
标签
:
“复选框6”
,
价值
:
“value6”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
“复选框选中6”
)
;
}
}
,
]
,
按钮
:
[
{
文本
:
“取消”
,
角色
:
“取消”
,
cssClass
:
“二级”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认取消的
)
}
,
}
,
{
文本
:
“好吧”
,
处理程序
:
(
)
= >
{
控制台
.
日志
(
确认好了的
)
}
,
}
,
]
,
}
)
;
返回
警报
.
现在
(
)
;
}
,
}
,
}
)
;
脚本
>
开发人员也可以直接在模板中使用该组件:
<
模板
>
<
ion-button
@click
=
"
setOpen(真正的)
"
>
显示警报
ion-button
>
<
ion-alert
:是开放的
=
"
isOpenRef
"
头
=
"
警报
"
分联箱
=
"
副标题
"
消息
=
"
这是一条警报消息。
"
css类
=
"
my-custom-class
"
:按钮
=
"
按钮
"
@didDismiss
=
"
setOpen(假)
"
>
ion-alert
>
模板
>
<
脚本
>
进口
{
IonAlert
,
IonButton
}
从
“@betway东盟体育appionic / vue”
;
进口
{
defineComponent
,
裁判
}
从
“vue”
;
出口
默认的
defineComponent
(
{
组件
:
{
IonAlert
,
IonButton
}
,
设置
(
)
{
常量
isOpenRef
=
裁判
(
假
)
;
常量
setOpen
=
(
状态
:
布尔
)
= >
isOpenRef
.
价值
=
状态
;
常量
按钮
=
[
“好吧”
]
;
返回
{
按钮
,
isOpenRef
,
setOpen
}
}
}
)
;
脚本
>
属性
动画 |
|
---|---|
描述 |
如果 |
属性 |
动画 |
类型 |
布尔 |
默认的 |
真正的 |
backdropDismiss |
|
描述 |
如果 |
属性 |
backdrop-dismiss |
类型 |
布尔 |
默认的 |
真正的 |
按钮 |
|
描述 |
要添加到警报中的按钮数组。 |
类型 |
(字符串| AlertButton) [] |
默认的 |
[] |
cssClass |
|
描述 |
用于自定义CSS的其他类。如果提供了多个类,它们应该用空格分隔。 |
属性 |
css类 |
类型 |
String | String [] | undefined |
enterAnimation |
|
描述 |
出现警报时使用的动画。 |
类型 |
((baseEl:任何,选择?:任何)= >Animation) | undefined |
头 |
|
描述 |
警报标题中的主要标题。 |
属性 |
头 |
类型 |
字符串|未定义 |
htmlAttributes |
|
描述 |
要传递给警报的其他属性。 |
类型 |
AlertAttributes |未定义 |
输入 |
|
描述 |
要在警报中显示的输入数组。 |
类型 |
AlertInput [] |
默认的 |
[] |
keyboardClose |
|
描述 |
如果 |
属性 |
keyboard-close |
类型 |
布尔 |
默认的 |
真正的 |
leaveAnimation |
|
描述 |
警报解除时使用的动画。 |
类型 |
((baseEl:任何,选择?:任何)= >Animation) | undefined |
消息 |
|
描述 |
在警报中显示的主要消息。 更多信息:安全文档 |
属性 |
消息 |
类型 |
betway东盟体育appIonicSafeString | string | undefined |
模式 |
|
描述 |
模式决定使用哪种平台样式。 |
属性 |
模式 |
类型 |
“ios”|“医学博士” |
小标题 |
|
描述 |
警报标题中的副标题。显示在标题下。 |
属性 |
分联箱 |
类型 |
字符串|未定义 |
半透明的 |
|
描述 |
如果 |
属性 |
半透明的 |
类型 |
布尔 |
默认的 |
假 |
事件
的名字 | 描述 |
---|---|
ionAlertDidDismiss |
在警报解除后发出。 |
ionAlertDidPresent |
在警报出现后触发。 |
ionAlertWillDismiss |
在警报解除之前发出。 |
ionAlertWillPresent |
在警报出现之前发出。 |
方法
驳回 |
|
---|---|
描述 |
在警报覆盖显示后解散它。 |
签名 |
解雇(数据?:任何作用?:字符串|未定义)= >Promise |
onDidDismiss |
|
描述 |
返回一个承诺,该承诺在警报确实解除时解析。 |
签名 |
onDidDismiss |
onWillDismiss |
|
描述 |
返回一个承诺,该承诺在警报解除时解析。 |
签名 |
onWillDismiss |
现在 |
|
描述 |
在创建警报覆盖之后显示警报覆盖。 |
签名 |
礼物()= > < >无效承诺 |
CSS自定义属性
的名字 | 描述 |
---|---|
——backdrop-opacity |
背景的不透明度 |
——背景 |
警报的背景 |
——高度 |
警戒高度 |
——max-height |
警报的最大高度 |
——max-width |
警报的最大宽度 |
——最小高度 |
警报的最低高度 |
——min-width |
警报的最小宽度 |
——宽度 |
警报宽度 |