全局反馈

用法

npm install --save @beisen-phoenix/mobile-snackbars

import Snackbars from '@beisen-phoenix/mobile-snackbars';
Snackbars.success('收益已到账：¥ 1,000,000,000,000');

接口

Snackbars在顶部显示一个提示信息条，它有一些方法来显示不同风格的颜色和图标表示不同的情况。调用一次就会创建一个新的实例，新的在Z方向上覆盖旧的。

每一个Snackbar都可以通过拖动手势来关闭。对于自动关闭的Snackbar，在拖动期间自动关闭计时会中止，待拖动手势完成之后如果仍未关闭（非关闭手势），会重新启动计时。

方法如下：

• success: 显示成功的颜色及图标
• fail: 显示失败的颜色及图标
• warning: 显示警告的颜色及图标
• info: 显示提示信息的颜色及图标

它们都有如下参数：

| name | description | type | default | 是否必传 | | ------ | ----------- | ---- | ------- | ------- | | content | 显示的内容，可以是字符串，也可以是ReactNode | string | React.ReactNode | | 是 | | duration | 持续显示的时间，单位秒（不是毫秒） | number | 1.5 | 否 | | manuallyClose | 是否手动关闭，设为true将会显示一个关闭按钮 | boolean | false | 否 | | onClose | 关闭回调，在调用SnackbarInstance.close()来关闭时不会触发此回调 | () => void | 否 | | customClass | 自定义类名 | string | N/A | 否 | | customZIndex | 自定义 z-index | number | N/A | 否 |

它们都返回一个SnackbarInstance：

interface SnackbarInstance {
  close: () => void;
}

其中的close方法可以用来关闭创建的实例。

show

另外还有一个show方法，可以用来实现更高级的功能，本质上上述的success、fail等最终都是调用的它。它的参数为SnackbarOptions类型：

interface SnackbarOptions {
  container?: HTMLElement; // Snackbars要添加到的容器，不传则为body
  type?: ShowType;
  content?: string | React.ReactNode;
  duration?: number;
  manuallyClose?: boolean;
  customClass?: string;
  customZIndex?: number;
  onClose?: () => void;
}

小技巧

如何在不使用自定义container的情况下快速调整Snackbar的垂直显示位置？

设置customClass，并设置top样式：

.some-custom-class {
  top: 44px;
}