修复 src 结构

src/component/button/index.less

@@ -0,0 +1,104 @@
+.layui-btn {
+  height: 38px;
+  line-height: 36px;
+  border: 1px solid transparent;
+  padding: 0 18px;
+  background-color: #009688;
+  color: #fff;
+  white-space: nowrap;
+  text-align: center;
+  font-size: 14px;
+  border-radius: 2px;
+  cursor: pointer;
+}
+
+.layui-btn:hover {
+  opacity: 0.8;
+  filter: alpha(opacity=80);
+  color: #fff;
+}
+
+.layui-btn:active {
+  opacity: 1;
+  filter: alpha(opacity=100);
+}
+
+.layui-btn + .layui-btn {
+  margin-left: 10px;
+}
+
+.layui-btn-radius {
+  border-radius: 100px;
+}
+
+.layui-btn .layui-icon {
+  padding: 0 2px;
+  vertical-align: middle\9;
+  vertical-align: bottom;
+}
+
+.layui-btn-primary {
+  border-color: #d2d2d2;
+  background: 0 0;
+  color: #666;
+}
+
+.layui-btn-primary:hover {
+  border-color: #009688;
+  color: #333;
+}
+
+.layui-btn-normal {
+  background-color: #1e9fff;
+}
+
+.layui-btn-warm {
+  background-color: #ffb800;
+}
+
+.layui-btn-danger {
+  background-color: #ff5722;
+}
+
+.layui-btn-checked {
+  background-color: #5fb878;
+}
+
+.layui-btn-disabled,
+.layui-btn-disabled:active,
+.layui-btn-disabled:hover {
+  border-color: #eee !important;
+  background-color: #fbfbfb !important;
+  color: #d2d2d2 !important;
+  cursor: not-allowed !important;
+  opacity: 1;
+}
+
+.layui-btn-lg {
+  height: 44px;
+  line-height: 44px;
+  padding: 0 25px;
+  font-size: 16px;
+}
+
+.layui-btn-sm {
+  height: 30px;
+  line-height: 30px;
+  padding: 0 10px;
+  font-size: 12px;
+}
+
+.layui-btn-xs {
+  height: 22px;
+  line-height: 22px;
+  padding: 0 5px;
+  font-size: 12px;
+}
+
+.layui-btn-xs i {
+  font-size: 12px !important;
+}
+
+.layui-btn-fluid {
+  width: 100%;
+}

src/component/button/index.ts

@@ -0,0 +1,9 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+import type { IDefineComponent } from "../type/index";
+
+Component.install = (app: App) => {
+  app.component(Component.name || "LayButton", Component);
+};
+
+export default Component as IDefineComponent;

src/component/button/index.vue

@@ -0,0 +1,67 @@
+<script lang="ts">
+export default {
+  name: "LayButton",
+};
+</script>
+
+<script setup lang="ts">
+import "./index.less";
+import { computed } from "vue";
+
+export interface LayButtonProps {
+  type?: "primary" | "normal" | "warm" | "danger";
+  size?: "lg" | "sm" | "xs";
+  fluid?: boolean | string;
+  radius?: boolean | string;
+  border?: "green" | "blue" | "orange" | "red" | "black";
+  disabled?: boolean | string;
+  loading?: boolean | string;
+  nativeType?: "button" | "submit" | "reset";
+}
+
+const props = withDefaults(defineProps<LayButtonProps>(), {
+  fluid: false,
+  radius: false,
+  loading: false,
+  disabled: false,
+  nativeType: "button",
+});
+
+const emit = defineEmits(["click"]);
+
+const onClick = (event : any) => {
+  if(!props.disabled) {
+    emit("click", event);
+  }
+}
+
+const classes = computed(() => {
+  return [
+    props.type ? `layui-btn-${props.type}` : "",
+    props.size ? `layui-btn-${props.size}` : "",
+    props.border ? `layui-border-${props.border}` : "",
+  ];
+});
+</script>
+
+<template>
+  <button
+    class="layui-btn"
+    :class="[
+      {
+        'layui-btn-fluid': fluid,
+        'layui-btn-radius': radius,
+        'layui-btn-disabled': disabled,
+      },
+      classes,
+    ]"
+    :type="nativeType"
+    @click="onClick"
+  >
+    <i
+      v-if="loading"
+      class="layui-icon layui-icon-loading-one layui-anim layui-anim-rotate layui-anim-loop"
+    ></i>
+    <slot v-else></slot>
+  </button>
+</template>