From 5fc06babe1258a50a1c37d8c54d203c6e623cf0a Mon Sep 17 00:00:00 2001
From: GuoJikun <qwerboy0912@gmail.com>
Date: Fri, 3 Nov 2023 14:18:17 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E4=BF=AE=E5=A4=8D=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=20loading=20=E6=97=A0=E6=B3=95=E5=AE=8C=E5=85=A8?=
 =?UTF-8?q?=E9=81=AE=E7=9B=96=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/src/components/button.md        | 49 ++++++++++++-------
 packages/ivy-design-wc/package.json           |  2 +-
 .../src/components/button/index.ce.vue        | 37 ++++++--------
 3 files changed, 46 insertions(+), 42 deletions(-)

diff --git a/packages/docs/src/components/button.md b/packages/docs/src/components/button.md
index 848d2cb..9637991 100644
--- a/packages/docs/src/components/button.md
+++ b/packages/docs/src/components/button.md
@@ -83,32 +83,43 @@
 ## 支持的 Css 变量
 
 :::details 点击打开
+
 ```css
-:host{
-    --ivy-button-border-color: var(--ivy-border-color, #dcdfe6);
-    --ivy-button-text-color: var(--ivy-text-color, #303133);
-    --ivy-button-background-color: var(--ivy-color-white, #fff);
-    
-    --ivy-button-hover-text-color: var(--el-color-white, #fff);
-    --ivy-button-hover-background-color: var(--ivy-color-primary-light-3, #79bbff);
-    --ivy-button-hover-border-color: var(--ivy-color-primary-light-3, #79bbff);
-    
-    --ivy-button-active-background-color: var(--ivy-color-primary-dark-2, #337ecc);
-    --ivy-button-active-border-color: var(--ivy-color-primary-dark-2, #337ecc);
-    
-    --ivy-button-disabled-text-color: var(--ivy-color-white, #fff);
-    --ivy-button-disabled-background-color: var(--ivy-color-primary-light-5, #a0cfff);
-    --ivy-button-disabled-border-color: var(--ivy-color-primary-light-5, #a0cfff);
-    
-    --ivy-button-height: var(--ivy-size-medium, 32px);
+:host {
+  --ivy-button-border-color: var(--ivy-border-color, #dcdfe6);
+  --ivy-button-text-color: var(--ivy-text-color, #303133);
+  --ivy-button-background-color: var(--ivy-color-white, #fff);
+
+  --ivy-button-hover-text-color: var(--el-color-white, #fff);
+  --ivy-button-hover-background-color: var(
+    --ivy-color-primary-light-3,
+    #79bbff
+  );
+  --ivy-button-hover-border-color: var(--ivy-color-primary-light-3, #79bbff);
+
+  --ivy-button-active-background-color: var(
+    --ivy-color-primary-dark-2,
+    #337ecc
+  );
+  --ivy-button-active-border-color: var(--ivy-color-primary-dark-2, #337ecc);
+
+  --ivy-button-disabled-text-color: var(--ivy-color-white, #fff);
+  --ivy-button-disabled-background-color: var(
+    --ivy-color-primary-light-5,
+    #a0cfff
+  );
+  --ivy-button-disabled-border-color: var(--ivy-color-primary-light-5, #a0cfff);
+
+  --ivy-button-height: var(--ivy-size-medium, 32px);
 }
 ```
+
 :::
 
 ## Props
 
-| 属性名   | 说明   | 可选值                                         | 默认值       |
-| -------- | ------ |---------------------------------------------|-----------|
+| 属性名   | 说明   | 可选值                                      | 默认值    |
+| -------- | ------ | ------------------------------------------- | --------- |
 | type     | 类型   | default/primary/success/warning/danger/info | `default` |
 | round    | 圆角   | -                                           | -         |
 | disabled | 禁用   | -                                           | -         |
diff --git a/packages/ivy-design-wc/package.json b/packages/ivy-design-wc/package.json
index ae85536..9dd4689 100644
--- a/packages/ivy-design-wc/package.json
+++ b/packages/ivy-design-wc/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ivy-design/ce",
-    "version": "1.0.1",
+    "version": "1.0.2",
     "private": false,
     "main": "dist/ivy-design.js",
     "module": "dist/ivy-design.mjs",
diff --git a/packages/ivy-design-wc/src/components/button/index.ce.vue b/packages/ivy-design-wc/src/components/button/index.ce.vue
index 71cd993..e028d95 100644
--- a/packages/ivy-design-wc/src/components/button/index.ce.vue
+++ b/packages/ivy-design-wc/src/components/button/index.ce.vue
@@ -33,7 +33,6 @@ const props = defineProps({
             'ivy-button',
             `ivy-button--${props.type}`,
             {
-                'is-loading': props.loading,
                 'is-round': props.round,
                 'is-disabled': props.disabled
             }
@@ -42,6 +41,7 @@ const props = defineProps({
         <genLoading v-if="props.loading" class="ivy-loading" />
         <slot></slot>
     </button>
+    <div v-if="props.loading" class="is-loading"></div>
 </template>
 
 <style lang="scss">
@@ -66,12 +66,12 @@ const props = defineProps({
 
     --ivy-button-height: var(--ivy-size-medium, 32px);
     margin-right: 12px;
+    position: relative;
 }
 :host(:last-child) {
     margin-right: 0;
 }
 .ivy-button {
-    position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -110,6 +110,7 @@ const props = defineProps({
     }
     & .ivy-loading {
         margin-right: 8px;
+        animation: rotating 2s linear infinite;
     }
 
     &--primary {
@@ -197,26 +198,18 @@ const props = defineProps({
         --ivy-button-disabled-border-color: var(--ivy-color-info-light-5, #c8c9cc);
     }
 }
-.ivy-button.is-loading {
-    position: relative;
-    pointer-events: none;
-    &::before {
-        display: block;
-        box-sizing: border-box;
-        z-index: 1;
-        pointer-events: none;
-        content: ' ';
-        position: absolute;
-        width: calc(100% + 2px);
-        height: calc(100% + 2px);
-        left: -1px;
-        top: -1px;
-        border-radius: inherit;
-        background-color: var(--ivy-mask-color-extra-light, rgba(255, 255, 255, 0.3));
-    }
-    & .ivy-loading {
-        animation: rotating 2s linear infinite;
-    }
+.is-loading {
+    display: block;
+    box-sizing: border-box;
+    z-index: 1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background-color: var(--ivy-mask-color-extra-light, rgba(255, 255, 255, 0.3));
+
+    border-radius: 4px;
 }
 
 .ivy-button.is-round {