在前端开发中，我们需要经常使用一些提示框来方便用户进行操作，而 npm 包 corner-alerts 是一个轻量级、易用的提示框组件，可以快速在网页右上角弹出提示框。本文将介绍如何使用该组件。
安装
在使用之前，我们需要先安装该 npm 包，在项目目录下执行以下命令：
npm install corner-alerts
使用
安装成功后，我们可以在需要的页面中引入 corner-alerts：
import CornerAlerts from 'corner-alerts';
在使用之前，我们需要创建一个 alert 管理器和一个 alert 组件。我们可以在一个 js 文件中完成这两个组件的配置：
-- -------------------- ---- -------
-- --------
------ ------------ ---- ----------------
----- ------------ -
------------- -
----------- - ---
------- - --
-
--------------- -
-------- - --------
------------------------
----------
------ ---------
-
--------------- -
----------- - ------------------------ -- -------- --- ----
-
-
----- ----- -
-------------------- -
------------ - --------
-
------ -
--------------------------------
-
------ -
--------------------------------
-
-
------ ----- ------------ - --- ---------------
------ ----- ---------- - ------然后在需要使用的页面中引入该文件：
import { alertManager, AlertClass } from './alert';接着就可以使用 addAlert 方法添加提示框了：
-- -------------------- ---- ------- ----- ------- - ------------------------- ------------ -------- ------ -------- ----- ------- -------- ---- ---- ------------- -- - ---------------------------------- -- -------
在这个例子中，我们创建了一个提示框，设置了一些选项，然后通过 addAlert 方法将其添加到提示框管理器中，最后在 10 秒后通过 removeAlert 方法将其从管理器中移除。
选项
在创建提示框的时候，我们可以设置许多选项：
message
提示框的文本内容。
type
提示框的类型，可以是 "success"、"info"、"warning"、"danger"。
dismissible
是否可以手动关闭提示框，默认为 true。
timeout
提示框自动关闭的时间，单位是毫秒，默认为 5000。
总结
在本文中，我们介绍了如何使用 npm 包 corner-alerts 来创建轻量且易用的网页提示框组件。我们首先讲解了如何安装该包，然后演示了如何引入和配置提示框管理器和提示框组件。最后，我们讲解了如何设置提示框的选项。使用这个包可以极大地简化网页提示框的开发，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c2281e8991b448d9c04