简介
hc-alert 是一款前端 JavaScript 库，用于在网页上显示类似于弹窗或提示框的信息。它大小轻巧，易于使用，同时提供了丰富的选项，能够定制外观、行为和内容。hc-alert 快速易用，适合于快速建立漂亮的弹窗效果。
安装
hc-alert 是一款 npm 包，可以在项目中使用 npm 或 yarn 安装。首先执行下面的命令进行安装：
--- ------- --------
或者使用 yarn：
---- --- --------
基本用法
hc-alert 提供了一个只有两个必要参数的函数，用于在网页上显示弹窗：
--- ------- - -------------------- ----------------- ------
这个例子将在浏览器上显示一个标题为提示，内容为这是一条信息的弹窗。
为了改变弹窗的外观和行为，hc-alert 提供了很多选项。例如，可以使用 type 选项来指定弹窗的类型：
------------------- ----- ------ ----------
这个例子将显示一个标题为错误，内容为这是一条错误消息，类型为 error 的弹窗。
定制选项
hc-alert 提供了很多选项来定制弹窗的外观和行为。以下是部分可用选项：
| 选项名 | 默认值 | 描述 |
|---|---|---|
type |
'info' |
弹窗的类型，可以是 info、success、warning 和 error。 |
title |
'' |
弹窗的标题 |
message |
'' |
弹窗的内容 |
buttons |
[] |
弹窗的按钮。每个按钮是一个对象，包含 text、primary 和 onClick 三个属性。 |
autoHide |
false |
是否自动隐藏弹窗。如果设为 true，弹窗会在 4 秒后自动关闭。 |
duration |
4000 |
弹窗自动关闭的时间，单位为毫秒。 |
示例代码
以下是一个完整的示例，展示了如何使用 hc-alert 定制一个弹窗：
--- ------- - --------------------
----------------- ----- -
----- ----------
--------- -----
--------- -----
-------- -
-
----- ------
-------- -----
-------- ---------- -
---------------
-
-
-
---这个例子将显示一个标题为警告，内容为这是一个警告，类型为 warning 的弹窗，并且在 2 秒后自动关闭，同时增加了一个名为“知道了”的按钮，当用户点击这个按钮时将触发一个弹窗。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006725b3660cf7123b363ae