ReactJS 常青角对话框组件

简介

ReactJS 常青角对话框组件是一个基于 ReactJS 的 UI 组件库，用于创建对话框交互界面。它提供了一个易于使用且高度可定制的对话框组件，使用户可以快速开发出各种类型的对话框，如提示框、警告框、错误框等。

特点

• 可以自定义外观和样式，更加灵活；
• 提供了方便的 API 和事件处理方法；
• 完全兼容现代浏览器和移动设备；
• 支持国际化；
• 支持响应式布局。

安装

使用 npm 安装：

npm install cg-react-dialog

使用 yarn 安装：

yarn add cg-react-dialog

使用

首先需要引入对话框组件：

import { Dialog } from "cg-react-dialog";

然后在 render 方法中使用：

<Dialog
  title="标题"
  content="内容"
  onOk={() => { console.log('点击了确定按钮') }}
  onCancel={() => { console.log('点击了取消按钮') }}
  visible={true}
/>

其中，title 表示对话框的标题，content 表示对话框的内容，onOk 是点击确定按钮时的处理方法，onCancel 是点击取消按钮时的处理方法，visible 表示对话框是否可见。

API

| 属性 | 描述 | 类型 | 默认值 | | --- | --- | --- | --- | | title | 对话框标题 | string 或 ReactElement | "" | | content | 对话框内容 | string 或 ReactElement | "" | | visible | 对话框是否可见 | boolean | false | | okText | 确认按钮文字 | string | "确定" | | cancelText | 取消按钮文字 | string | "取消" | | onOk | 点击确认按钮的回调函数 | function | () => {} | | onCancel | 点击取消按钮的回调函数 | function | () => {} |

事件

| 名称 | 描述 | | --- | --- | | onOk | 点击确认按钮的回调函数 | | onCancel | 点击取消按钮的回调函数 |

示例

import React, { useState } from "react";
import { Dialog } from "cg-react-dialog";

function Example() {
  const [visible, setVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setVisible(true)}>显示对话框</button>
      <Dialog
        title="标题"
        content="内容"
        onOk={() => {
          console.log("点击了确定按钮");
          setVisible(false);
        }}
        onCancel={() => {
          console.log("点击了取消按钮");
          setVisible(false);
        }}
        visible={visible}
      />
    </div>
  );
}

总结

ReactJS 常青角对话框组件提供了一个易于使用且高度可定制的对话框组件，可以大大节省程序员的时间和精力，使得开发者可以更加专注于业务逻辑的实现。强烈推荐大家使用！