Uppy 通知器（Informer）

@uppy/informer 插件是一个弹出式通知栏，用于为控制台显示通知。当插件有令人兴奋的消息（或错误）需要分享时，它们可以通过 Informer 来实现。

何时使用？

当你使用控制台时，它已经默认包含了这个插件。虽然这个插件是单独发布的，但它是专门为控制台设计的。理论上你可以不使用控制台而单独使用它，但这并不被官方支持。

安装

npm
```
npm install @uppy/informer
```
yarn
```
yarn add @uppy/informer
```

CDN

谨慎

该捆绑包包含了大部分的 Uppy 插件，因此这种方法不建议在生产环境中使用，因为当您可能只使用少数几个插件时，您的用户却需要下载所有插件。
但在加速开发环境方面，这可能会很有帮助，所以不妨在开始时使用它来提速。

<!-- 1. Add CSS to `<head>` -->
<link href="https://releases.transloadit.com/uppy/v3.27.3/uppy.min.css" rel="stylesheet">

<!-- 2. Initialize -->
<div id="uppy"></div>

<script type="module">
    import { Uppy, Informer } from "https://releases.transloadit.com/uppy/v3.27.3/uppy.min.mjs"
    const uppy = new Uppy()
    uppy.use(Informer, { target: '#informer' })
</script>

使用

import Uppy from "@uppy/core";
import Informer from "@uppy/informer";

// `@uppy/informer` 插件包含了一些基本样式。
// 你也可以选择不使用这些样式并提供自己的样式。
import "@uppy/core/dist/style.min.css";
import "@uppy/informer/dist/style.min.css";

new Uppy().use(Informer, { target: "#informer" });

Informer 从 uppy.state.info 获取数据，这是由各种插件通过 uppy.info 方法更新的。

例如，在压缩器插件中，我们这样使用它：

const size = prettyBytes(totalCompressedSize);
this.uppy.info(this.i18n("compressedX", { size }), "info");

当调用 uppy.info 时，Uppy 会发出 info-visible 事件，并在超时后发出 info-hidden 事件。

API

选项

`id`

此插件的唯一标识符（ string，默认值：'Informer' ）。

如果你需要多个 Informer 实例时，请使用此选项。

`target`

将通知器挂载到的 DOM 元素、CSS 选择器或插件（ string 或 Element，默认值：null ）。

Uppy 通知器（Informer）

何时使用？

安装

使用

API

选项

id

target

在本文档中

`id`

`target`