H5Dialog

功能描述

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

依赖模块

快速使用

var toast = new aToast()
toast.show({
    text: '下载中',
    loading: true,
    onShow: function () {
        console.log('打开了toast1');
        setTimeout(function () {
            toast.show({
                text: '加载完成',
                duration: 2000,
                onHide: function () {
                    console.log('关闭了toast2')
                }
            })
        }, 3000)
    }
})

var alert = new aAlert()
alert.show({
    title: '提示标题',
    content: '提示内容',
    btnText: '我知道了',
    onShow: function () {
        console.log('打开了alert')
    },
    onHide: function () {
        console.log('关闭了alert')
    }
})

var confirm = new aConfirm()
confirm.show({
    title: '提示标题',
    content: '提示内容',
    btns: [{
        callback: function (instance) {
            instance.close = false;
            console.log('点击了确定按钮,但不会关闭弹窗');
        }
    }, {
        text: '不需要',
        callback: function () {
            console.log('点击了不需要按钮');
        }
    }],
    onShow: function () {
        console.log('打开了confirm')
    }
})

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
  • 默认值:无
  • 作用:隐藏回调
  • 是否必传:否

方法

显示

(toast|alert|confirm).show()

隐藏

(toast|alert|confirm).hide()

特别说明