fix(VsButton): modify loading icon position absolute (#196)

pubg · Jun 3, 2024 · ae3ee7c · ae3ee7c
1 parent c2992fe
commit ae3ee7c
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 11 deletions.
diff --git a/packages/vlossom/src/components/vs-button/VsButton.scss b/packages/vlossom/src/components/vs-button/VsButton.scss
@@ -40,7 +40,7 @@
         opacity: 0;
         width: 120%;
         height: 100%;
-        background: #ffffff;
+        background: var(--vs-white);
         transition: all 0.4s ease-out;
         pointer-events: none;
     }
@@ -119,24 +119,46 @@
 
 // loading
 .vs-button {
-    @keyframes rotate {
-        0% {
-            transform: rotate(0deg);
-        }
-        100% {
-            transform: rotate(360deg);
-        }
+    .content {
+        visibility: visible;
+    }
+
+    .loading-icon {
+        visibility: hidden;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        line-height: 1;
+        font-size: 0;
     }
 
     &.loading {
         pointer-events: none;
 
+        .content {
+            visibility: hidden;
+        }
+
         .loading-icon {
-            animation: rotate 2s linear infinite;
+            visibility: visible;
+
+            .rotate {
+                animation: rotate 2s linear infinite;
+            }
         }
     }
 }
 
+@keyframes rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
 @media screen and (max-width: 768px) {
     .vs-button.mobile-full {
         width: 100%;

diff --git a/packages/vlossom/src/components/vs-button/VsButton.vue b/packages/vlossom/src/components/vs-button/VsButton.vue
@@ -6,11 +6,13 @@
         :disabled="disabled"
         :aria-label="loading ? 'loading' : undefined"
     >
-        <span v-if="!loading" class="content">
+        <span class="content">
             <slot />
         </span>
 
-        <vs-icon v-if="loading" class="loading-icon" icon="rotateRight" :size="dense ? 20 : 24" />
+        <span class="loading-icon">
+            <vs-icon class="rotate" icon="rotateRight" :size="dense ? 15 : 20" />
+        </span>
     </button>
 </template>