From fd8e18104c4fc3809e7ebaf884f9a51fcb22219f Mon Sep 17 00:00:00 2001
From: "rongjie.song" <rongjie.song@1step.ai>
Date: Thu, 10 Nov 2022 12:00:08 +0800
Subject: [PATCH] =?UTF-8?q?fix(button):=20=E8=A7=A3=E5=86=B3loading?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C=E8=A6=86=E7=9B=96=E5=BA=95=E5=B1=82=E6=96=87?=
 =?UTF-8?q?=E5=AD=97=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/devui/button/src/button.scss | 16 ++++++++++++++++
 packages/devui-vue/devui/button/src/button.tsx  |  5 ++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/devui-vue/devui/button/src/button.scss b/packages/devui-vue/devui/button/src/button.scss
index 9369a59050..28ace67aa0 100644
--- a/packages/devui-vue/devui/button/src/button.scss
+++ b/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); }
+}
diff --git a/packages/devui-vue/devui/button/src/button.tsx b/packages/devui-vue/devui/button/src/button.tsx
index b8016110d6..6b36cd3ca6 100644
--- a/packages/devui-vue/devui/button/src/button.tsx
+++ b/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>
       );