最小巧的移动端弹窗组件,toast、alert、confirm,使用原生js,不依赖任何类库,不需要引入任何css文件,只有一个js文件
组件设计为单例模式,在一个打开状态,再次打开另一个,会自动关闭上一个
let toast = new ToastClass();
-
方法
方法名 说明 show 打开方法 hide 关闭方法 onShow 打开时回调(全局) onHide 关闭时回调(全局)
toast.show(options)
-
options
参数 类型 默认值 说明 text String 正在加载 展示文本 loading Boolean false 是否展示loading图标 duration Number 无 持续时间(ms) onShow Function 无 打开时回调 onHide Function 无 关闭时回调 -
示例 (可参考 toast.html )
toast.show({
text: '正在加载',
duration: 2000,
onShow: function(){
console.log('打开了toast')
}
})
toast.hide()
let alert = new AlertClass();
-
方法
方法名 说明 show 打开方法 hide 关闭方法 onShow 打开时回调(全局) onHide 关闭时回调(全局)
alert.show(options)
-
options
参数 类型 默认值 说明 title String 无 标题 content String 无 内容 btnText String 确定 按钮文本 onShow Function 无 打开时回调 onHide Function 无 关闭时回调 -
示例 (可参考 alert.html )
alert.show({
title: '提示标题',
content: '提示内容',
onShow: function(){
console.log('打开了alert')
}
})
alert.hide()
let confirm = new ConfirmClass();
-
方法
方法名 说明 show 打开方法 hide 关闭方法 onShow 打开时回调(全局) onHide 关闭时回调(全局)
confirm.show(options)
-
options
参数 类型 默认值 说明 title String 无 标题 content String 无 内容 btns Array 见下方btns 按钮文本/css类 onShow Function 无 打开时回调 onHide Function 无 关闭时回调 -
btns 默认值:[{text: '确定', class: 'confirm'}, {text: '取消', class: 'cancel'}]
参数 类型 默认值 说明 text String 确定、取消 按钮文本 class String confirm、cancel 按钮css类 callback Function 无 按钮点击回调 -
示例 (可参考 confirm.html )
confirm.show({
title: '提示标题',
content: '提示内容',
btns: [{
callback: function(instance){
instance.close = false;
console.log('点击了确定按钮,但不会关闭弹窗');
}
}, {
text: '不需要',
callback: function(){
console.log('点击了不需要按钮');
}
}],
onShow: function(){
console.log('打开了confirm')
}
})
confirm.hide()