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()

特别说明

无

是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18