cbui-toast

1.0.1 • Public • Published

title: 轻量级移动端提示组件 cbui-toast date: 2017-08-07 22:23:43 tags: js

概述

高度还原微信原生 toast 的一个轻量级提示插件,纯 js 实现,gzip 压缩之后只有 4Kb,拥有更多样化的 API 接口与更高效集约的性能

Demo 预览

demo 点击预览

基础 API

Toast.loading('请稍后...');

Toast.loading()

Toast.info();

Toast.info()

Toast.success();

Toast.success()

Toast.error();

Toast.error()

安装与使用

npm 安装

$ npm install cbui-toast --save

直接引用

<script src="./Toast.js"></script>
import Toast from 'cbui-toast';

API 文档

API

Toast.success()

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

  • 参数配置
Toast.success('提交成功') // 显示 0.8 秒

Toast.success(1000) // 显示 1 秒,文字为默认文字 '已完成'

Toast.success('提交成功', 1500) // 显示 1.5 秒

// 第二个参数为回调函数
Toast.success('提交成功', function() {
    // 在显示 800ms 后 Toast 隐藏时执行
    console.log('我是回调函数');
});

// 第二个参数为配置项
Toast.success('提交成功' {
    duration: 1000, // 持续时长(ms),不填默认 800
    complete: function() {
        console.log('我完成了');
    }
});

// 一个配置项
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.loading('正在加载中');

Toast.loading({
  text: '正在加载中',
  duration: 3000 // 可以配置显示时长,但建议根据情况调用 Toast.hide() 方法来隐藏
});

Toast.hide()

隐藏正在显示的 Toast,随时都可以调用此方法,并可传入一个回调函数 会在 Toast 隐藏后执行

  • 参数配置
Toast.loading('正在加载中');
setTimeout(function() {
  Toast.hide(function() {
    console.log('我隐藏了');
  });
}, 1000);

tip:

  1. Toast.loading() 通常用于反馈用户操作等待状态,因为无法知道什么时候会有反馈结果,因此不会自动消失,需要根据实际情况来调用隐藏方法来隐藏它

  2. 调用 successinfoerrorloading 等方法时,会先将当前正在显示的 toast 隐藏

Props 参数

Toast 的参数配置非常灵活,可以传入多种多样的参数配置

arguments[0] 第一个参数

类型 默认 说明
string success-已完成info-警告error-错误loading-请稍后.. 你要展示的文字
number success-800ms /info,error-2000ms toast 显示时长
function toast 隐藏后的回调函数
object toast 隐藏后的回调函数

arguments[1] 第二个参数

  • 为 object 时
key 类型 默认 说明
text string - 你要展示的文字
duration sumber success-800ms /info,error - 2000ms toast 显示时长
complete function - toast 隐藏后的回调函数
  • 为 function 时

    作为回调函数, Toast 隐藏后执行

  • 为 number 时(前提需要第一个参数为 string)

    作为 Toast 显示时长

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.0.1
    1
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 1.0.1
    1
  • 1.0.0
    0

Package Sidebar

Install

npm i cbui-toast

Weekly Downloads

1

Version

1.0.1

License

ISC

Unpacked Size

116 kB

Total Files

28

Last publish

Collaborators

  • cloud_cb