介绍
ceri-toaster 是一个可以在前端网页中展示通知消息的 npm 包。用户不需要手动编写代码来展示通知，只需要传入相关参数即可。
安装 ceri-toaster
要使用 ceri-toaster，首先我们需要在项目中安装它。在终端中进入项目文件夹，并输入如下命令：
npm install ceri-toaster
如何使用 ceri-toaster
使用 ceri-toaster 需要先引入它，然后在代码当中适时的调用它。以下是使用 ceri-toaster 的模板：
import { toast } from 'ceri-toaster';
toast("message", { options });在上面的模板中，第一个参数 'message' 指定了要展示的信息，第二个参数 { options } 则为展示通知的相关选项。
假设我们要展示一条通知，内容为 'Hello World!'，我们可以使用以下代码：
import { toast } from 'ceri-toaster';
toast('Hello World!');ceri-toaster 的选项参数
除了必备的信息参数外，我们可以使用多个选项参数来定制通知的展示效果。以下是可用选项的列表：
- theme
- position
- type
- className
- timeout
theme
选择 theme 参数对通知的视觉效果进行定制。该参数有如下可选项：
- default
- success
- danger
- warning
- info
默认为 default。
以下为一个例子：
import { toast } from 'ceri-toaster';
toast('Hello World!', {theme: 'success'});上面的代码将会展示一个绿色的通知框，其中包含着 'Hello World!' 的信息。
position
position 参数规定了每条通知出现的位置。该参数有如下可选项：
- topRight
- topLeft
- bottomRight
- bottomLeft
默认为 topRight。
以下为一个例子：
import { toast } from 'ceri-toaster';
toast('Hello World!', {position: 'bottomRight'});该代码将会展示一个出现在浏览器窗口右下角的通知框，其中包含着 'Hello World!' 的信息。
type
type 参数决定了通知框的类型。该参数有如下可选项：
- normal
- progress
默认为 normal。
以下为一个例子：
import { toast } from 'ceri-toaster';
toast('Please wait...', {type: 'progress'});在这个例子中，我们展示了一个类型为 progress 的通知框，其中包含了 'Please wait...' 的信息。
className
通过添加 classNam 参数，我们可以继续个性化地修改样式。例如：
import { toast } from 'ceri-toaster';
toast('Hello World!', {className: 'custom-alert'});这段代码将会展示一个自定义的 class 为 custom-alert 的通知框。
timeout
timeout 参数规定了通知框会持续多长时间。默认为 5000 毫秒。
例如：
import { toast } from 'ceri-toaster';
toast("It's been five seconds.", {timeout: 5000});这段代码将会展示一个展示 5 秒并自动消失的通知框，其中包含着 'It's been five seconds.' 的信息。
更多例子
下面是另一个使用 ceri-toaster 的例子。这个例子涉及了多个选项。
import { toast } from 'ceri-toaster';
toast('Great job!', {
theme: 'success',
position: 'topLeft',
timeout: 3000,
});这里，我们将会展示一个绿色的通知框，其中包含着 'Great job!' 的信息。通知框出现在浏览器窗口左上角，持续 3 秒并自动消失。
结论
使用 ceri-toaster，我们可以在网页中展示一个便捷的通知框，让用户了解到我们的信息。此外，通过各种选项参数，我们可以对通知框进行定制化，以满足不同的需求。如果你对此有任何问题或建议，请联系我们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005606781e8991b448de8a8