feat(button): support the spinnerPlacement prop

hotdogc1017 · hotdogc1017 · commit f64f4a063a63 · 2025-08-15T00:48:33.000+08:00
diff --git a/packages/components/button/src/Button.vue b/packages/components/button/src/Button.vue
@@ -3,7 +3,10 @@ import { useButton, type ButtonProps } from "./use-button";
 
 import { computed, ref, type Component } from "vue";
 
-const props = withDefaults(defineProps<ButtonProps>(), {});
+const props = withDefaults(defineProps<ButtonProps>(), {
+  spinnerPlacement: "start",
+  isLoading: false,
+});
 
 defineSlots<{
   default(): Component;
@@ -19,8 +22,12 @@ const bind = useButton(props, buttonRef);
 <template>
   <button ref="buttonRef" v-bind="bind">
     <slot name="startContent" />
-    <slot name="spinner" />
+    <slot
+      v-if="isLoading && props.spinnerPlacement === 'start'"
+      name="spinner"
+    />
     <slot />
+    <slot v-if="isLoading && props.spinnerPlacement === 'end'" name="spinner" />
     <slot name="endContent" />
   </button>
 </template>
diff --git a/packages/components/button/src/use-button.ts b/packages/components/button/src/use-button.ts
@@ -64,7 +64,6 @@ export function useButton(
         disableAnimation = false,
         isDisabled: isDisabledProp = false,
         isIconOnly = false,
-        spinnerPlacement = "start",
       } = { ...originalProps, ...attrs };
 
       disableRipple.value = disableRippleProp || disableAnimation;
