alert-mask

一个原生的移动端常用弹框小工具；主要包含loading、alert、confirm和message的蒙层，可直接以依赖包的形式映入到H5的移动端项目中。

Installation

请使用 npm安装包

    npm install alert-mask

引入

    import * as popModelServer from 'alert-mask'
    
    或者
    
    import {alert, confirm, loading, message} from 'alert-mask'

    var popModelServer = require('alert-mask')

注：由于内部是使用原生js创建DOM元素并挂载在body元素的最后，引入时须确保文档HTML文档已加载完成。通常在React、Vue等框架构建的单页面应用程序中，HTML文档以加载完成，在需要使用的地方直接引入使用即可；在独立的多页面（如H5独立活动页）中，注意需要在单个页面的HTML加载完成之后，通常在onload函数中以require按需加载的方式引入使用。

Explain

alert - 提示弹框

• 参数名称及含义：alert.use(option)
  • title：String 提示标题 (选填) 默认："提示"
  • content：String 提示内容 （必填）
  • confirmText：String 按钮文本 （选填）默认："确定"
  • callback：Function 确认回调函数 （选填）默认值关闭当前弹框，有回调函数会在关闭弹窗后立即执行回调函数
• example:

    import {alert} from 'alert-mask'
    alert.use({
        title: 'alert标题',
        content: 'alert内容文本',
        confirmText: 'alert按钮文本',
        callback: function(){
            console.log('alert弹框确定按钮回调函数')
        }
    })

confirm - 确认弹框

• 参数名称及含义：confirm.use(option)
  • title：String 提示标题 (选填) 默认："提示"
  • content：String 提示内容 （必填）
  • cancelText：String 左侧取消按钮文本 （选填）默认："取消"
  • confirmText：String 右侧确定消按钮文本 （选填）默认："确定"
  • cancelEvent：Function 取消回调函数 （选填）默认值关闭当前弹框，有回调函数会在关闭弹窗后立即执行回调函数
  • confirmEvent：Function 确认回调函数 （选填）默认值关闭当前弹框，有回调函数会在关闭弹窗后立即执行回调函数
• example:

    import {confirm} from 'alert-mask'
    confirm.use({
        title: '提示',
        content: '确定要提交吗？',
        cancelText: '不用了',
        confirmText: '提交吧',
        cancelEvent: function(){
            console.log('confirm点击取消回调函数输出')
        },
        confirmEvent: function(){
            console.log('confirm点击确定回调函数输出。。。')
        }
    })

loading - 加载动画

• 启用加载动画函数： laoding.use(text)

  • text: 加载动画下面的文本 (选填)，默认为: '加载中...'

• 关闭加载动画函数： laoding.close()

• example:

    import {loading} from 'alert-mask'
    // 开始加载动画
    loading.use('努力加载中，请稍等！')
    // 3秒后关闭加载动画
    setTimeout(function(){
        loading.close()
    },3000)

message - 消息弹框

• 参数名称及含义：message.use(option)
  • type: String || Object
  • 类型为String，即为message弹框的文本内容，位置默认居中，时间2秒
  • 类型为Object
  • option.content String 弹框的文本内容 默认为空''
  • option.position String 弹框位置，选题默认为 居中(50%); 可以传: 'top' 'bottom' 或者 距离顶部的百分比('35%')
  • option.time Number 弹框显示的时间(毫秒) 默认2000毫秒
• example:

    import {message} from 'alert-mask'
    popModelServer.message.use({
        time: 1000, //显示毫秒数 默认2000ms
        content: '登录失败，请稍后重试！', //展示内容
        position: '30%' //展示位置： top  bottom  默认中部：50%位置
    })

注：弹框UI基本固定不可配配置，需要对UI进行修改需自行重新对应元素的样式层叠覆盖即可