对话框 / Alert对话框组件
对话框作为和用户交互的弹出层组件, 向用户提供操作选择或操作列表, 让使用者作出决定。 这里的对话框可以是: Alert/Confirm/Radios/Checkboxes/Input等.
这里需要注意的是, Select组件使用的就是Radio/Checkboxes这两模式的封装, 但是单选多选两者只能选一个模式出现. 另外, 对于Input类文本输入, 可以混合使用,
比如url，email，text等，如果确认表单过多, 请单独开一页或者用modal组件处理.
关于buttons属性的说明
- role属性: cancel只在ios下有用, 他会将标记cancel的button做特殊处理, 比如点击背景关闭则触发cancel的handler
- cssClass属性: 这个属性用于自定义button的样式, 同理, 外层的cssClass用来定义整个弹层的样式
- handler属性: 默认是关闭当前的组件, 可以通过
Alert.dismiss()返回的Promise做后续处理, 他表示整个动画完毕
关于inputs属性的说明
- inputs属性内type的属性的填值能改变弹出层的展现形式, 比如: input/checkbox/radio等三种形式.
- 上述的三种形式一次只能选择一种, 这个是规定定死的.
- 关于input的type类型: text/tel/number/email -> 对应的其余属性可以是: type/name/placeholder/value.
- 关于input的type类型: checkbox/radio -> 对应的其余属性可以是: type/value/label/checked/disabled.
- 以上如果混用是达不到效果的, 这个是Alert组件的使用约定.
使用注意
- 建议在关闭弹出层动画后在处理关闭事项, 比如跳转/再次弹出提示等
- 弹层组件全部对路由跳转相应, 比如路由切换则弹层自动关闭, 这个可以通过
dismissOnPageChange设置 - button超过三个则纵向排列
- 更详细的示例请看demo
- 源码:
用法 / Usages
import { Alert } from 'vimo'
// Alert
Alert.present({
title: 'Alert',
message: '收到这个通知的人希望你今天能搞定这个alert组件',
cssClass: 'alertCssOuterMain ',
enableBackdropDismiss: true,
buttons: [
{
text: '确定',
handler: (value) => {
Alert.dismiss().then((data) => {
console.debug('button3 click dismiss ')
console.debug(data)
});
}
}
]
});
// Input
input () {
Alert.present({
title: '登录iTunes Store',
// subTitle: '收到这个通知的人希望你今天能搞定这个alert组件',
message: '请输入您Apple ID"apple@icloud.com"的密码',
cssClass: 'alertCssOuterMain ',
enableBackdropDismiss: true,
inputs: [
{
type: 'password',
name: 'password',
placeholder: '密码',
value: '',
},
],
buttons: [
{
text: '取消',
role: 'cancel',
handler: () => {}
},
{
text: '确定',
role: '',
handler: (value) => {
Alert.present({
title: '请确认',
// subTitle: '收到这个通知的人希望你今天能搞定这个alert组件',
message: '您输入的信息：' + JSON.stringify(value),
cssClass: '',
enableBackdropDismiss: true,
buttons: [
{
text: '确定',
role: 'cancel',
handler: (value) => {
Alert.dismiss().then(function (msg) {
console.log('alert input2 dismiss promise')
})
}
}
]
}).then(function () {
console.log('alert input2 present promise')
})
}
}
]
}).then(function () {
console.log('alert input1 present promise')
});
}方法 / Methods
(inner) dismiss() → {Promise}
- 源码:
手动关闭组件, 当开启动画过度完毕时触发 Promise 的 resolve 。
(inner) present(options) → {Promise}
- 源码:
开启组件, 当开启动画过度完毕时触发 Promise 的 resolve 。
参数 / Parameters:
| Name | Type | Description | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
options |
object | 传入参数 Properties
|