black-tip

    2.0.0 • Public • Published

    blackTip

    移动端黑色提示,高度还原微信toast的一个轻量级提示插件,原生js实现,gzip压缩之后 只有4Kb

    Screenshot 预览

    Toast.loading('数据加载中');

    screenshot

    Toast.info('加载失败');

    screenshot

    Toast.success();

    screenshot

    Toast.error();

    screenshot

    Demo

    demo 点击预览

    Install 安装

    npm 安装

    $ npm install black-tip --save-dev

    cnpm 淘宝镜像安装

    $ cnpm install black-tip --save-dev

    页面引用

    <script src="./Toast.js"></script>

    Usage 使用

    API

    • Toast.success()

    icon - 打钩标志,默认显示时间 800ms, 默认文字 '已完成'

     
    Toast.success('提交成功') // 默认显示 800ms 后消失
     
    Toast.success(1000) // 传入一个参数,且为数字时,文字为默认文字 '已完成', 显示 1000ms 后消失
     
    Toast.success('提交成功', 1500) // 第一个参数字符串,第二个参数为数字时, 此例显示 1500ms 后消失
     
    // 也可以
    Toast.success('提交成功', { 
        duration: 800,  // 持续时长 不填默认 800
        complete: function() {
            console.log('我经完成了');
        }
    });
     
    // 也可以
    Toast.success('提交成功', function() {
        console.log('我经完成了'); // 回调函数默认 800ms 后执行
    });
     
    // 也可以
    Toast.success({
        text: '提交成功',
        duration: 600,
        complete: function() {
            console.log('我经完成了');
        }
    });
     
    • Toast.info()

    icon - 感叹号 '!',默认显示时间 1500ms,默认文字 '警告',参数同 Toast.success()

    • Toast.error()

    icon - '×',默认显示时间 1500ms ,默认文字 '错误',参数同 Toast.success()

    ----分割一下----

    • Toast.loading()

    icon 为旋转的小图标,默认文字为 '请稍后..',不会自动消失,可以通过 Toast.hide() 方法隐藏,或在参数中传入 duration (持续时长) 值,时间到了后自动隐藏

    Toast.loading('正在加载中', {duration: 3000});
    • Toast.hide()

    隐藏正在显示的 Toast, 可传入一个 回调函数 Toast 隐藏后执行

    Toast.loading('正在加载中');
    setTimeout(() => {
        Toast.hide(function(){
            console.log('我已经隐藏了')
        });
    }, 1000);

    Props 参数

    根据需求可以传入多种多样的参数
    • arguments[0] 第一个参数 | 类型 | 默认 | 说明 | | ---------------- | ---------------| ------------------------------------------| | string | '' | 你要展示的文字 | | number | 1500ms | toast显示时长 | | function | 无 | toast隐藏后的回调函数 | | object | 无 | toast隐藏后的回调函数 |
    • arguments[1] 第二个参数是 object 时
    key 类型 默认 说明
    text String - 你要展示的文字
    duration Number 1500ms toast显示时长
    complete Function - toast隐藏后的回调函数
    • arguments[1] 第二个参数是 function 时 回调函数

    Install

    npm i black-tip

    DownloadsWeekly Downloads

    1

    Version

    2.0.0

    License

    ISC

    Last publish

    Collaborators

    • cloud_cb