细节优化

src/components/SButton.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { ref } from "vue";
 const props = defineProps({
   width: {
     type: String,
@@ -10,7 +11,7 @@ const props = defineProps({
   },
   onClick: {
     type: Function,
-    default: () => {},
+    default: async () => {},
   },
   disabled: {
     type: Boolean,
@@ -25,6 +26,17 @@ const props = defineProps({
     default: "#000",
   },
 });
+
+const loading = ref(false);
+const onBtnClick = async () => {
+  if (props.disabled || loading.value) return;
+  loading.value = true;
+  try {
+    await props.onClick();
+  } finally {
+    loading.value = false;
+  }
+};
 </script>
 
 <template>
@@ -38,13 +50,14 @@ const props = defineProps({
       color,
     }"
     open-type="getUserInfo"
-    @click="
-      () => {
-        if (!disabled) onClick();
-      }
-    "
+    @click="onBtnClick"
   >
-    <slot />
+    <block v-if="!loading">
+      <slot />
+    </block>
+    <block v-else>
+      <image src="../static/btn-loading.png" mode="widthFix" class="loading" />
+    </block>
   </button>
 </template>
 
@@ -55,9 +68,15 @@ const props = defineProps({
   line-height: 44px;
   font-weight: bold;
   font-size: 15px;
-  text-align: center;
   display: flex;
+  text-align: center;
   justify-content: center;
   align-items: center;
 }
+.loading {
+  width: 25px;
+  height: 25px;
+  background-blend-mode: darken;
+  animation: rotate 1s linear infinite;
+}
 </style>