feat:添加button组件

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>

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;
+}

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;