简介
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