RobinYang11 · 9863blackboy · Mar 23, 2023 · Mar 25, 2023 · Mar 25, 2023
diff --git a/src/_test.tsx b/src/_test.tsx
@@ -1,4 +1,3 @@
-
 import React, { useState } from 'react';
 import Modal from './components/modal/modal';
 import Upload from './components/upload/upload';
@@ -149,11 +148,9 @@ function App() {
     >
       请选择文件
     </Upload>
+    <HjjModal />
   </div >
 }
 
 const root = createRoot(document.getElementById("app")!)
-root.render(<App />)
-
-
-
+root.render(<App />)
diff --git a/src/components/HjjModal/index.module.css b/src/components/HjjModal/index.module.css
@@ -0,0 +1,65 @@
+.modal {
+  position: absolute;
+  top: 30%;
+  left: 50%;
+  transform: translate(-50%);
+  width: 520px;
+  padding: 20px 24px;
+  border-radius: 10px;
+  background-color: #fff;
+  z-index: 2;
+  box-shadow: 0 6px 16px 0 rgba(14, 13, 13, 0.1), 0 3px 6px -4px rgba(6, 6, 6, 0.12), 0 9px 28px 8px rgba(15, 14, 14, 0.05);
+}
+.modal .close {
+  position: fixed;
+  right: 26px;
+  top: 10px;
+  font-size: 20px;
+  color: #ccc;
+  width: 20px;
+  height: 20px;
+  text-align: center;
+  line-height: 20px;
+  cursor: pointer;
+}
+.modal .header {
+  margin-bottom: 10px;
+  font-size: 16px;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+}
+.modal .content {
+  min-height: 20px;
+  font-size: 14px;
+}
+.modal .footer {
+  height: 32px;
+  font-size: 14px;
+  margin-top: 12px;
+  display: flex;
+  flex-flow: nowrap;
+  justify-content: flex-end;
+  align-items: flex-end;
+}
+.modal .footer .my-button {
+  display: flex;
+  margin-left: 8px;
+  height: 32px;
+  background-color: #3875f7;
+  color: white;
+  border: 1px;
+  border-color: #d9d9d9;
+  border-radius: 3px;
+  padding: 5px 15px;
+  font-size: 14px;
+  cursor: pointer;
+}
+.mask {
+  background-color: rgba(0, 0, 0, 0.7);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
diff --git a/src/components/HjjModal/index.module.less b/src/components/HjjModal/index.module.less
@@ -0,0 +1,65 @@
+.modal{
+    position:absolute;
+    top: 30%;
+    left: 50%;
+    transform: translate(-50%);
+    width: 520px;
+    padding: 20px 24px;
+    border-radius: 10px;
+    background-color: #fff;
+    z-index: 2;
+    box-shadow: 0 6px 16px 0 rgba(14, 13, 13, 0.1), 0 3px 6px -4px rgba(6, 6, 6, 0.12), 0 9px 28px 8px rgba(15, 14, 14, 0.05);
+    .close{
+        position: fixed;
+        right: 26px;
+        top: 10px;
+        font-size: 20px;
+        color: #ccc;
+        width: 20px;
+        height: 20px;
+        text-align: center;
+        line-height: 20px;
+        cursor: pointer;
+    }
+    .header{
+        margin-bottom: 10px;
+        font-size:16px;
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+    }
+    .content{
+        min-height: 20px;
+        font-size: 14px;
+    }
+    .footer{
+        height: 32px;
+        font-size: 14px;
+        margin-top: 12px;
+        display: flex;
+        flex-flow: nowrap;
+        justify-content: flex-end;
+        align-items: flex-end;
+        .my-button{
+            display: flex;
+            margin-left: 8px;
+            height: 32px;
+            background-color: #3875f7;
+            color: white;
+            border: 1px;
+            border-color: #d9d9d9;
+            border-radius: 3px;
+           padding:5px 15px;
+           font-size: 14px;
+           cursor: pointer;
+        }
+    }
+  }
+  .mask{
+    background-color: rgba(0,0,0,0.7);
+    position: fixed;
+    top:0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
diff --git a/src/components/HjjModal/index.tsx b/src/components/HjjModal/index.tsx
@@ -0,0 +1,133 @@
+import React, { useState } from "react";
+import styles from "./index.module.less";
+
+interface ModalProps {
+  /** 控制弹框的显示隐藏 */
+  open: boolean;
+  /** 点击确定是的回调 */
+  onOk?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  /** 点击取消时候回调 */
+  onCancel?: (e: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
+  /** 弹框内容 */
+  children?: React.ReactNode;
+  /** 弹框头部内容 */
+  title?: React.ReactNode;
+  /** 弹框底部内容 */
+  footer?: React.ReactNode;
+  /** 弹框宽度 默认 520 */
+  width?: string | number;
+  /** 按钮文案 */
+  okText?: React.ReactNode;
+  cancelText?: React.ReactNode;
+  /** 是否显示遮罩层 */
+  mask?: boolean;
+  /** 有遮罩层时是否点击关闭 */
+  isMaskClosed?: boolean;
+  /** 外层容器的样式 */
+  style?: React.CSSProperties;
+  /** 外层容器的类名 */
+  modalClassName?: string;
+  /** 遮罩层的样式 */
+  maskStyle?: React.CSSProperties;
+  /** 内容区域的样式 */
+  contentStyle?: React.CSSProperties;
+}
+
+function MyModal(props: ModalProps) {
+  const {
+    open,
+    onOk,
+    onCancel,
+    children,
+    title,
+    footer,
+    width = 520,
+    okText,
+    cancelText,
+    mask = true,
+    isMaskClosed = true,
+    style,
+    modalClassName = "",
+    contentStyle,
+    maskStyle,
+  } = props;
+  if (!open) return null;
+
+  const modalStyle = {
+    ...style,
+    width,
+  };
+  const modalClsName = modalClassName
+    ? `${styles.modal} ${modalClassName}`
+    : styles.modal;
+  console.log(styles);
+  return (
+    <>
+      <div className={modalClsName} style={modalStyle}>
+        <div className={styles.close} onClick={onCancel}>
+          x
+        </div>
+        <div className={styles.header}>
+          <strong>{title}</strong>
+        </div>
+        <div className={styles.content} style={contentStyle}>
+          {children}
+        </div>
+        <div className={styles.footer}>
+          {footer ? (
+            footer
+          ) : (
+            <>
+              <button className={styles["my-button"]} onClick={onCancel}>
+                {cancelText ? cancelText : "取消"}
+              </button>
+              <button className={styles["my-button"]} onClick={onOk}>
+                {okText ? okText : "确定"}
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+      {mask ? (
+        <div
+          className={styles.mask}
+          style={maskStyle}
+          onClick={isMaskClosed ? onCancel : undefined}
+        ></div>
+      ) : null}
+    </>
+  );
+}
+export default function HjjTables() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  return (
+    <div className="hjj-modal">
+      <p>--------------------------------------</p>
+      <button onClick={() => setIsModalOpen(true)}>打开弹框</button>
+      {isModalOpen ? (
+        <MyModal
+          open={isModalOpen}
+          onOk={() => setIsModalOpen(false)}
+          onCancel={() => setIsModalOpen(false)}
+          title="自定义头部"
+          okText="确定文案"
+          cancelText="取消文案"
+          footer={null}
+          width={700}
+          // mask={false}
+          isMaskClosed={false}
+          // maskStyle={{ backgroundColor: "red" }}
+          style={{ backgroundColor: "aliceblue" }}
+          // modalClassName="test"
+        >
+          <p>自定义内容--------------------</p>
+          <p>自定义内容--------------------</p>
+          <p>自定义内容--------------------</p>
+          <p>自定义内容--------------------</p>
+        </MyModal>
+      ) : null}
+      <p>--------------------------------------</p>
+    </div>
+  );
+}
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -6,5 +6,6 @@ export { default as Tab } from './tab/tab';
 export { default as Flex } from './flex/flex';
 export { default as FlexItem } from './flex_item/flex_item';
 export { default as Table } from './table/table';
+export { default as HjjModal} from './HjjModal';
 
 export { BaseProps } from './base_props';