2.0.2 • Published 5 years ago
@beisen-phoenix/mobile-toast v2.0.2
吐司弹框
用法
npm install --save @beisen-phoenix/mobile-toast
import Toast from '@beisen-phoenix/mobile-toast';
Toast.success('您的钱包已入账 1,000,000,000 元');
Toast.success({
content: '您的钱包已入账 1,000,000,000 元',
customZIndex: 1000,
mask: true,
duration: 2,
onClose() {
console.log('');
}
});
接口
Toast 显示一个全屏居中的信息提示框,它有一些方法来显示不同风格的图标表示不同的情况。多次调用会产生多个独立的 Toast,后面的在 Z 方向上覆盖前面的。
方法如下:
success
: 显示成功图标fail
: 显示失败图标info
: 显示提示信息图标offline
: 显示断网图标loading
: 显示加载中图标
它们都有如下一些参数:
name | description | type | default | required |
---|---|---|---|---|
content | 显示的内容,可以是字符串,也可以是 ReactNode | string | React.ReactNode | 是 | |
duration | 持续显示的时间,单位秒(不是毫秒) | number | 1.5 (loading 时为 604800) | 否 |
onClose | 关闭时的回调。手动调用ToastInstance.close() 时不会触发此回调 | () => void | undefined | 否 |
mask | 是否启用透明的背景,当启用时会导致类似模态对话框的行为,会阻止页面上的其它操作。默认启用 | boolean | true | 否 |
customZIndex | 自定义 z-index | number | N/A | 否 |
changelog 2019/10/24 将 success、fail、info、offline、loading 等方法接收的参数调整为 string 或者 object
注意,duration
在loading
时默认值是 604800,因为一般在调用 loading 时都需要手动调用ToastInstance.close()
关闭。
这些方法都会返回一个ToastInstance
类型的对象,可以调用其close
方法来关闭这个 Toast:
interface ToastInstance {
close: () => void;
}
show
另外还有一个show
方法,可以用来实现更高级的功能,本质上上述的 success、fail 等最终都是调用的它。它的参数为ToastOptions
类型:
interface ToastOptions {
icon?: React.ReactNode; // 如果不传则不会显示图标
content?: string | React.ReactNode; // 如果不传则不会显示该区域
duration?: number; // 默认值1.5秒
mask?: boolean;
onClose?: () => void;
}