fix(button): 解决loading效果覆盖底层文字问题

Author: rongjie.song

packages/devui-vue/devui/button/src/button.scss

@@ -384,3 +384,19 @@ $devui-btn-lg-padding: var(--devui-btn-lg-padding, 0 24px);
 .clear-right-5 {
   margin-right: 5px;
 }
+
+.loading-icon__container {
+  display: inline-flex;
+  align-items: center;
+  margin-right: 5px;
+
+  .button-icon-loading {
+    animation: rotating 1.5s linear infinite;
+  }
+}
+
+@keyframes rotating {
+  0% { transform: rotate(0); }
+
+  100% { transform: rotate(180deg); }
+}

packages/devui-vue/devui/button/src/button.tsx

@@ -26,8 +26,11 @@ export default defineComponent({
 
     return () => {
       return (
-        <button class={classes.value} disabled={disabled.value} v-loading={loading.value} onClick={onClick}>
+        <button class={classes.value} disabled={disabled.value} onClick={onClick}>
           {icon.value && <Icon name={icon.value} size="var(--devui-font-size, 12px)" color="" class={iconClass.value} />}
+          <div class="loading-icon__container" v-show={loading.value}>
+            <d-icon name="icon-loading" class="button-icon-loading" color="#BBDEFB"></d-icon>
+          </div>
           <span class="button-content">{ctx.slots.default?.()}</span>
         </button>
       );