简介
ec-site-alert 是一个基于 React 的前端组件库，能够帮助开发者快速构建符合特定业务需求的弹窗。该组件库支持多种弹窗类型，并提供了丰富的自定义配置选项。
ec-site-alert 的使用非常简单，只需通过 npm 安装后引用即可快速投入使用。
安装
使用 npm 进行安装：
npm install --save ec-site-alert
使用方法
在需要使用弹窗的页面或组件中，通过以下方式引用 ec-site-alert：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- -------- ------------- - ------ - ---------- -------------- ------------------- ----------------- -------- -- - -------------------- -- ------------ -- - -------------------- -- -- -- -展开代码
上例中展示了使用 ec-site-alert 构建一个确认删除记录的弹窗。
SiteAlert 接受一个 type 属性来指定弹窗类型，目前支持以下类型：
- alert：提醒弹窗，只有一个确定按钮。
- confirm：确认弹窗，包含确定和取消两个按钮。
- prompt：输入框弹窗，包含输入框和确定、取消两个按钮。
- custom：自定义弹窗，可以自行添加组件和按钮。
除 type 属性外，还可以通过其他属性配置弹窗的外观和行为：
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| title | string | '' | 弹窗标题 |
| content | string | '' | 弹窗内容 |
| promptConfig | object | null | prompt 类型弹窗的配置，包括输入框初始值、输入框类型、提示文本等等。 |
| buttons | object[] | null | 自定义按钮列表，每个按钮包含文本、类名和点击事件。 |
| onOk | function | () => {} | 确定按钮点击事件 |
| onCancel | function | () => {} | 取消按钮点击事件 |
| onClose | function | () => {} | 弹窗关闭事件 |
| onOpen | function | () => {} | 弹窗打开事件 |
| disabledClose | boolean | false | 是否禁用关闭按钮 |
| className | string | '' | 弹窗的附加类名，可以用于覆盖默认样式。 |
示例代码
下面是一个使用 custom 类型弹窗的例子，展示了如何添加自定义组件和按钮，以及如何使用 SiteAlert 的 onOpen 和 onClose 事件：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- -------- ------------------ - ------ - ---- ------------------------- --- ------------------------------------------------- -- ---------------------------------------------------- ------ ------------------------------ ----------- ------------------------------- ------------------- ----------------- -- - ---------------------------------------- -- -- ------ -- - -------- ------------- - ------ - ---------- ------------- --------------- ------------------- ---------- -- - --------------------- -- ----------- -- - --------------------- -- ---------- - ----- ----- ---------- ------------------------- -------- -- -- - ---------------------- ------ -- -- - ----- ----- ---------- ----------------------------- -------- -- -- - -------------------- -- -- -- - ------------- -- - ------------ --------------- --------------------- ------------ ---------------------- -- - --------------- -- -- -- ------------ -- -展开代码
结语
ec-site-alert 为开发者快速构建符合特定业务需求的弹窗提供了方便快捷的工具。期待开发者能够通过本篇文章了解 ec-site-alert 的使用方法，从而使自己的前端项目更加高效、美观和易用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673ddfb81d47349e53b6d
