From 9d8d8702646bae1e6981e72546adbe66bef4a161 Mon Sep 17 00:00:00 2001
From: Davdeyang <1320501826@qq.com>
Date: Sun, 23 Apr 2023 20:30:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=B7=BB=E5=8A=A0button=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/_test.tsx                    | 10 +++++
 src/components/button/index.less | 74 ++++++++++++++++++++++++++++++++
 src/components/button/index.tsx  | 61 ++++++++++++++++++++++++++
 3 files changed, 145 insertions(+)
 create mode 100644 src/components/button/index.less
 create mode 100644 src/components/button/index.tsx

diff --git a/src/_test.tsx b/src/_test.tsx
index e9158c2..d5d2802 100644
--- a/src/_test.tsx
+++ b/src/_test.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import ReactDom from "react-dom";
+import Button from "./components/button";
 
 // import * as GOJI from "goji_ui";
 // import Input from "./components/input";
@@ -11,6 +12,15 @@ function App() {
 
   return (
     <div>
+      <Button
+        types="primary"
+        onClick={() => {
+          console.log("ksk");
+        }}
+      >
+        取消
+      </Button>
+
       <Upload urlFilter={(v: any) => v?.url} uploadUrl="/api/upload">
         上传
       </Upload>
diff --git a/src/components/button/index.less b/src/components/button/index.less
new file mode 100644
index 0000000..b5a86e4
--- /dev/null
+++ b/src/components/button/index.less
@@ -0,0 +1,74 @@
+.gojiButton {
+  display: inline-block;
+  font-size: 14px;
+  padding: 0px 15px;
+  border-radius: 6px;
+  cursor: pointer;
+  background-color: #fff;
+  color: #000;
+  text-align: center;
+  border: 1px solid;
+  margin: 6px;
+  line-height: 30px;
+}
+
+.gojiButton:hover {
+  color: #0a0a78;
+  transition: all 0.3s;
+}
+
+.primaryButton {
+  font-size: 14px;
+  padding: 0px 15px;
+  border-radius: 5px;
+  cursor: pointer;
+  background-color: #fff;
+  list-style: none;
+  color: rgba(0, 0, 0, 0.88);
+  text-align: center;
+  border: 1px solid;
+  transition: all 0.3s;
+}
+
+.primaryButton:hover {
+  background-color: #0a0a78 !important;
+  color: #fff !important;
+}
+
+.linkButton {
+  border: none;
+  color: green;
+}
+
+.linkButton:hover {
+  color: rgb(31, 119, 219) !important;
+}
+
+.textButton {
+  border: none;
+}
+
+.textButton:hover {
+  background-color: rgb(179, 180, 180);
+  color: #000;
+}
+
+.round {
+  border-radius: 40px;
+}
+
+.circle {
+  border-radius: 50%;
+}
+
+.dashedButton {
+  border: 1px dashed;
+}
+
+.disableButton {
+  cursor: not-allowed !important;
+  border-color: #d9d9d9;
+  color: rgba(0, 0, 0, 0.25);
+  background-color: rgba(0, 0, 0, 0.04);
+  box-shadow: none;
+}
diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
new file mode 100644
index 0000000..756fd98
--- /dev/null
+++ b/src/components/button/index.tsx
@@ -0,0 +1,61 @@
+import React from "react";
+import "./index.less";
+import classnames from "classnames";
+
+//如何继承 DOMAttributes
+
+type type = "primary" | "link" | "dashed" | "text" | "disable";
+type iconPos = "left" | "right";
+
+interface IButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * type:类型
+   */
+  types?: type | undefined;
+  style?: React.CSSProperties | undefined;
+  className?: string | undefined;
+  children?: React.ReactNode | undefined;
+  icon?: React.ReactNode | undefined;
+  /**
+   * iconPos:图标定位 左和右
+   */
+  iconPos?: iconPos | undefined;
+  herf?: string | undefined;
+  disabled?: boolean | undefined;
+}
+
+const Button = (props: IButton) => {
+  const { types, style, className, children, icon, iconPos, disabled } = props;
+
+  const getBtnClass = () => {
+    switch (types) {
+      case "primary":
+        return "primaryButton gojiButton";
+      case "dashed":
+        return "dashedButton gojiButton";
+      case "link":
+        return "linkButton gojiButton";
+      case "text":
+        return "textButton gojiButton";
+      case "disable":
+        return "disable gojiButton";
+      default:
+        return "gojiButton";
+    }
+  };
+
+  return (
+    <button
+      className={classnames(
+        `${getBtnClass()} ${className} ${disabled && "disableButton"}`
+      )}
+      style={{ ...style }}
+      {...props}
+    >
+      {icon && iconPos === "left"} {children ? children : "BUTTON"}
+      {icon && iconPos === "right"}
+    </button>
+  );
+};
+
+export default Button;