H5Dialog

功能描述

H5Dialog是原生js实现toast、alert、confirm弹框,无任何依赖

依赖模块

快速使用

  1. var toast = new aToast()
  2. toast.show({
  3. text: '下载中',
  4. loading: true,
  5. onShow: function () {
  6. console.log('打开了toast1');
  7. setTimeout(function () {
  8. toast.show({
  9. text: '加载完成',
  10. duration: 2000,
  11. onHide: function () {
  12. console.log('关闭了toast2')
  13. }
  14. })
  15. }, 3000)
  16. }
  17. })
  18. var alert = new aAlert()
  19. alert.show({
  20. title: '提示标题',
  21. content: '提示内容',
  22. btnText: '我知道了',
  23. onShow: function () {
  24. console.log('打开了alert')
  25. },
  26. onHide: function () {
  27. console.log('关闭了alert')
  28. }
  29. })
  30. var confirm = new aConfirm()
  31. confirm.show({
  32. title: '提示标题',
  33. content: '提示内容',
  34. btns: [{
  35. callback: function (instance) {
  36. instance.close = false;
  37. console.log('点击了确定按钮,但不会关闭弹窗');
  38. }
  39. }, {
  40. text: '不需要',
  41. callback: function () {
  42. console.log('点击了不需要按钮');
  43. }
  44. }],
  45. onShow: function () {
  46. console.log('打开了confirm')
  47. }
  48. })

toast配置项

text

  • 类型:String
  • 默认值:无
  • 作用:显示内容
  • 是否必传:是

    duration

  • 类型:Number

  • 默认值:0
  • 作用:显示时长,毫秒
  • 是否必传:否

    loading

  • 类型:Boolean

  • 默认值:false
  • 作用:是否显示加载
  • 是否必传:否

    onShow

  • 类型:Function

  • 默认值:无
  • 作用:显示回调
  • 是否必传:否

    onHide

  • 类型:Function

  • 默认值:无
  • 作用:隐藏回调
  • 是否必传:否

alert配置项

title

  • 类型:String
  • 默认值:无
  • 作用:显示标题
  • 是否必传:是

    content

  • 类型:String

  • 默认值:无
  • 作用:显示内容
  • 是否必传:是

    btnText

  • 类型:String

  • 默认值:确定
  • 作用:按钮内容
  • 是否必传:否

    onShow

  • 类型:Function

  • 默认值:无
  • 作用:显示回调
  • 是否必传:否

    onHide

  • 类型:Function

  • 默认值:无
  • 作用:隐藏回调
  • 是否必传:否

confirm配置项

title

  • 类型:String
  • 默认值:无
  • 作用:显示标题
  • 是否必传:是

    content

  • 类型:String

  • 默认值:无
  • 作用:显示内容
  • 是否必传:是

    btns

  • 类型:Array

  • 默认值:无
  • 作用:按钮组
  • 是否必传:否

    onShow

  • 类型:Function

  • 默认值:无
  • 作用:显示回调
  • 是否必传:否

    onHide

  • 类型:Function

  • 默认值:无
  • 作用:隐藏回调
  • 是否必传:否

方法

显示

  1. (toast|alert|confirm).show()

隐藏

  1. (toast|alert|confirm).hide()

特别说明