NPM 包 ec-site-alert 使用教程

简介

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

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

安装

使用 npm 进行安装：

npm install --save ec-site-alert

使用方法

在需要使用弹窗的页面或组件中，通过以下方式引用 ec-site-alert：

import { SiteAlert } from 'ec-site-alert';

function MyComponent() {
  return (
    <SiteAlert
      type="confirm"
      title="确定要删除这条记录吗？"
      content="删除后不可恢复"
      onOk={() => {
        console.log('确认删除');
      }}
      onCancel={() => {
        console.log('取消删除');
      }}
    />
  );
}

上例中展示了使用 ec-site-alert 构建一个确认删除记录的弹窗。

SiteAlert 接受一个 type 属性来指定弹窗类型，目前支持以下类型：

• alert：提醒弹窗，只有一个确定按钮。
• confirm：确认弹窗，包含确定和取消两个按钮。
• prompt：输入框弹窗，包含输入框和确定、取消两个按钮。
• custom：自定义弹窗，可以自行添加组件和按钮。

除 type 属性外，还可以通过其他属性配置弹窗的外观和行为：

示例代码

下面是一个使用 custom 类型弹窗的例子，展示了如何添加自定义组件和按钮，以及如何使用 SiteAlert 的 onOpen 和 onClose 事件：

import { SiteAlert } from 'ec-site-alert';

function CustomAlert(props) {
  return (
    <div className="custom-alert">
      <h2 className="custom-alert-title">{props.title}</h2>
      <p className="custom-alert-content">{props.content}</p>
      <input
        className="custom-alert-input"
        type="text"
        placeholder={props.placeholder}
        value={props.value}
        onChange={(event) => {
          props.onInputChange(event.target.value);
        }}
      />
    </div>
  );
}

function MyComponent() {
  return (
    <SiteAlert
      type="custom"
      title="请输入您的姓名"
      content="这是一个自定义弹窗"
      onOpen={() => {
        console.log('弹窗已打开');
      }}
      onClose={() => {
        console.log('弹窗已关闭');
      }}
      buttons={[
        {
          text: '确定',
          className: 'custom-alert-button-ok',
          onClick: () => {
            console.log('输入的姓名是：', name);
          },
        },
        {
          text: '取消',
          className: 'custom-alert-button-cancel',
          onClick: () => {
            console.log('取消输入');
          },
        },
      ]}
    >
      {(alertProps) => (
        <CustomAlert
          {...alertProps}
          placeholder="请输入您的姓名"
          value={name}
          onInputChange={(value) => {
            setName(value);
          }}
        />
      )}
    </SiteAlert>
  );
}

结语

ec-site-alert 为开发者快速构建符合特定业务需求的弹窗提供了方便快捷的工具。期待开发者能够通过本篇文章了解 ec-site-alert 的使用方法，从而使自己的前端项目更加高效、美观和易用。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673ddfb81d47349e53b6d