js原生popup_最小巧的移动端弹窗组件,toast、alert、confirm,使用原生js

popup

最小巧的移动端弹窗组件,toast、alert、confirm,使用原生js,不依赖任何类库,不需要引入任何css文件,只有一个js文件

组件设计为单例模式,在一个打开状态,再次打开另一个,会自动关闭上一个

1. toast

let toast = new ToastClass();

方法

方法名

说明

show

打开方法

hide

关闭方法

onShow

打开时回调(全局)

onHide

关闭时回调(全局)

toast打开方法

toast.show(options)

options

参数

类型

默认值

说明

text

String

正在加载

展示文本

loading

Boolean

false

是否展示loading图标

duration

Number

持续时间(ms)

onShow

Function

打开时回调

onHide

Function

关闭时回调

toast.show({

text: '正在加载',

duration: 2000,

onShow: function(){

console.log('打开了toast')

}

})

toast关闭方法

toast.hide()

2. alert

let alert = new AlertClass();

方法

方法名

说明

show

打开方法

hide

关闭方法

onShow

打开时回调(全局)

onHide

关闭时回调(全局)

alert打开方法

alert.show(options)

options

参数

类型

默认值

说明

title

String

标题

content

String

内容

btnText

String

确定

按钮文本

onShow

Function

打开时回调

onHide

Function

关闭时回调

alert.show({

title: '提示标题',

content: '提示内容',

onShow: function(){

console.log('打开了alert')

}

})

alert关闭方法

alert.hide()

3. confirm

let confirm = new ConfirmClass();

方法

方法名

说明

show

打开方法

hide

关闭方法

onShow

打开时回调(全局)

onHide

关闭时回调(全局)

confirm打开方法

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.show({

title: '提示标题',

content: '提示内容',

btns: [{

callback: function(instance){

instance.close = false;

console.log('点击了确定按钮,但不会关闭弹窗');

}

}, {

text: '不需要',

callback: function(){

console.log('点击了不需要按钮');

}

}],

onShow: function(){

console.log('打开了confirm')

}

})

confirm关闭方法

confirm.hide()

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
评论

打赏作者

weixin_39639622

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值