NPM 包 ec-site-alert 使用教程

阅读时长 6 分钟读完

简介

ec-site-alert 是一个基于 React 的前端组件库,能够帮助开发者快速构建符合特定业务需求的弹窗。该组件库支持多种弹窗类型,并提供了丰富的自定义配置选项。

ec-site-alert 的使用非常简单,只需通过 npm 安装后引用即可快速投入使用。

安装

使用 npm 进行安装:

使用方法

在需要使用弹窗的页面或组件中,通过以下方式引用 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

纠错
反馈