@beisen-phoenix/mobile-toast

吐司弹框

用法

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;
}