[重构] button buttonGroup buttonContainer 组件, 未破坏功能的前提下改进代码

src/module/button/index.less

@@ -0,0 +1,104 @@
+.layui-btn {
+    height: 38px;
+    line-height: 38px;
+    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/module/button/index.ts

@@ -6,4 +6,4 @@ Component.install = (app: App) => {
   app.component(Component.name || 'LayButton', Component)
 }
 
-export default Component as IDefineComponent
+export default Component as IDefineComponent

src/module/button/index.vue

@@ -1,13 +1,51 @@
+<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
+    radius?: boolean
+    border?: 'green' | 'blue' | 'orange' | 'red' | 'black'
+    disabled?: boolean
+    loading?: boolean
+    nativeType?: 'button' | 'submit' | 'reset'
+}
+
+const props = withDefaults(defineProps<LayButtonProps>(), {
+  fluid: false,
+  radius: false,
+  disabled: false,
+  loading: false,
+  nativeType: "button",
+});
+
+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="[
-      type ? 'layui-btn-' + type : '',
-      size ? 'layui-btn-' + size : '',
-      fluid ? 'layui-btn-fluid' : '',
-      radius ? 'layui-btn-radius' : '',
-      border ? 'layui-border-' + border : '',
-      disabled ? 'layui-btn-disabled' : '',
+      {
+       'layui-btn-fluid' : fluid,
+       'layui-btn-radius' : radius,
+       'layui-btn-disabled' : disabled
+      },
+      classes
     ]"
     :type="nativeType"
   >
@@ -23,25 +61,4 @@
     ></i>
     <slot v-else />
   </button>
-</template>
-
-<script lang="ts">
-export default {
-  name: 'LayButton',
-}
-</script>
-
-<script setup lang="ts">
-import { defineProps } from 'vue'
-
-const props = defineProps<{
-  type?: string
-  size?: string
-  fluid?: boolean
-  radius?: boolean
-  border?: string
-  disabled?: boolean
-  loading?: boolean
-  nativeType?: string
-}>()
-</script>
+</template>